Web Design Wireframes to Prototypes
Join the Web Design: Wireframes to Prototypes online course by Coursera to learn the application of early UX research to tangible user interfaces and more.
Intermediate
Online
3 Weeks
1,914 INR Quick Facts
| Medium Of Instructions | Mode Of Learning | Mode Of Delivery |
|---|---|---|
| English | Self Study | Video and Text Based |
Course Overview
The Web Design: Wireframes to Prototypes certification course by Coursera is the continuation of the Web Design: Strategy and Information Architecture course and is the final course in the UI/UX Design Specialization offered by Coursera. In this programme, you will gain knowledge about creating wireframes, high-fidelity mockups, as well as clickable prototypes.
Created in collaboration with the California Institute of Arts, the Coursera Web Design: Wireframes to Prototypes online course brings to you a design-centric approach for user experience (UX) design and user interface (UI). It offers skill-based, practical instructions and a visual communications perspective, rather than being focused on programming or marketing alone.
Furthermore, the Coursera Web Design: Wireframes to Prototypes training is a self-paced learning course, built for the convenience of students, that allows them to learn at their own speed and from the comfort of their own space. The students can also earn a shareable certificate after completing the course successfully.
The Highlights
- Flexible deadlines
- Free enrolment
- 100% Online
- Self-Paced course
- Intermediate level
- Approximate completion in 27 hours
- Shareable Certificate
- Hands-on Projects
- Subtitles in English
Programme Offerings
- online learning
- Flexible Deadlines
- Sharable certificate
- Graded Assignments
- Graded Quizzes
- peer feedback
Courses and Certificate Fees
| Certificate Availability | Certificate Providing Authority |
|---|---|
| yes | Coursera |
Web Design: Wireframes to Prototypes Fee Structure:
Head | Amount |
Fee | Rs. 1,914 /Month |
What you will learn
Upon completion of the Coursera Web Design: Wireframes to Prototypes certification syllabus course, you will have:
- Knowledge of responsive web design, along with mobile web challenges
- Understanding of a mobile-first approach
- Overview of the different cloud service models like IaaS, PaaS, SaaS, as well as deployment models (Public, Private, Hybrid)
- Understanding the relationship between programming and design
- Basic knowledge of the different web technologies that make the web work and include HTML, JavaScript, CSS, server-side coding, as well as databases
- Hands-on experience at Adobe XD, Adobe Illustrator, sketch and Balsamiq.
Who it is for
The Web Design: Wireframes to Prototypes online course will be suitable for the following individuals:
- Those who want to sharpen their analysis and visual design skills for UX and UI, and be web developers.
- Those with some experience in front-end, back-end web development
- Those who wish to build a skill set in UX or UI for web designing and app designing.
Admission Details
To apply to the Web Design: Wireframes to Prototypes classes course online course by Coursera, you can follow the given steps:
- Open the official website of Coursera- https://www.coursera.org/.
- Search for ‘Web Design: Wireframes to Prototypes course’.
- Now, click on the ‘Enroll for FREE’ button.
- A dialogue box will pop up asking you to sign up/sign in to Coursera.
- If you already have an account, use those details to log in and continue or else sign up using your email id.
Application Details
Joining the Coursera Web Design: Wireframes to Prototypes course, requires you to sign up on the website using your Email ID and password. Once done, you will be eligible to join the course.
The Syllabus
Videos
- Course Introduction
Readings
- About this course
- About the assignments
- Required tools
- About CalArts and the Program in Graphic Design
Videos
- Introduction to Week 1
- Introduction to Wireframes
- Responsive Design: What size should your website be?
- Navigation Systems
- Wayfinding
- Common Web Design Patterns
- Common Form Elements
- Examples of Homepage Content Strategies
- Wireframing Tools
- Wireframes: Bradley
- Wireframes: Alyson, part 1
- Wireframes: Alyson, part 2
- Why Peer Review?
- Peer Review Tips
- How to apply feedback
Readings
- Project Brief
- Scrolling
- Further Reading
- Jakob’s law
- Resource: Design Patterns Collection
- Further Reading
- Try it yourself: Sketch out a wireframe
- What is peer review?
- A Final Thought for the Week
Assignments
- Navigation Systems
- Common Design Patterns
- Week 1 Quiz
Peer Review
- Wireframes
Videos
- Introduction to Week 2
- Visual Mockups
- Design Principles
- What is whitespace?
- Using whitespace to style a form
- A visual comparison
- Web Fonts
- Web Typography: A few tips
- Creating Visual Mockups
- Visual Mockups Example
- Moodboards and Homepage Mockup: Bradley
- Homepage Mockup: Alyson
- Bonus Material: Interview with Rob Hope on Web Design Trends
Readings
- Aesthetic Usability Effect
- The Grid
- Further Reading
- Web History, Skeuomorphs & Flat Design
- Moodboards
- A Final Thought for the Week
Assignments
- Design Principles/Whitespace
- Web Typography
- Week 2 Quiz
Peer Review
- Visual Mockups: Home Pages
Videos
- Introduction to Week 3
- Do I Need to Learn How to Code?
- Survey of Web Technologies
- HTML vs. CSS vs. Javascript: A metaphorical adventure•6 minutes
- HTML Basics
- CSS Basics
- Web Inspector
- Bonus Material: Interview with Rob Hope, Part 2
Readings
- A Web Design History Primer
- How to become a unicorn
- Try it yourself: Styling Buttons
- More from Rob Hope: “Show Them” Landing Page Course
- Bonus Material: Intrinsic Web Design
- A Final Thought for the Week
Peer Review
- Visual Mockups: Full Set
assignment
- Week 3 Quiz
Videos
- Introduction to Week 4
- Clickable Prototype Example Part 1
- Clickable Prototype Example Part 2
- Accessibility
- Bonus Material: Interview with Margaret Andersen
- Full Mockups: Bradley
- Full Mockups: Alyson
Readings
- Accessibility Resources
- Dark Patterns
- A Final Thought for the Week
Peer Reviews
- Final Project Submission
- Clickable Prototype of Mockups
Discussion Prompt
- Dark Patterns
assignment
- Week 4 Quiz
Instructors
CalArts Frequently Asked Questions (FAQ's)
For this particular course, it is ideal to have some experience in graphic or visual design, along with some experience with human-computer interaction and front or back-end web development.
As this is a graphic design course, students will need access to a desktop computer or laptop with the appropriate software installed. Adobe CC software is required for these courses, but if not available, you can use other available alternatives as well.
The UI / UX Design Specialization consists of 4 courses namely UI / UX Design Specialization, Web Design: Strategy and Information Architecture, UX Design Fundamentals, and Web Design: Wireframes to Prototypes.
Yes, Coursera helps students who cannot afford the fee for the specialization by providing financial aid. You can apply for financial aid at the time of enrolling or later on in the course, by filling out an application and waiting for approval.
The average rating or stars that are given by the consumers are 4.9 out of 5.