VOOZH about

URL: https://www.coursera.org/learn/web-design-wireframes-prototypes

⇱ Web Design: Wireframes to Prototypes | Coursera


Web Design: Wireframes to Prototypes

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Web Design: Wireframes to Prototypes

This course is part of UI / UX Design Specialization

81,219 already enrolled

Included with

Gain insight into a topic and learn the fundamentals.
4.9

918 reviews

Intermediate level
Some related experience required
Flexible schedule
3 weeks at 10 hours a week
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
4.9

918 reviews

Intermediate level
Some related experience required
Flexible schedule
3 weeks at 10 hours a week
Learn at your own pace

Build your subject-matter expertise

This course is part of the UI / UX Design Specialization
When you enroll in this course, you'll also be enrolled in this Specialization.
  • Learn new concepts from industry experts
  • Gain a foundational understanding of a subject or tool
  • Develop job-relevant skills with hands-on projects
  • Earn a shareable career certificate

There are 5 modules in this course

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss:

- Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course. This is the fourth and last course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.

What's included

1 video4 readings

1 videoTotal 2 minutes
  • Course Introduction2 minutes
4 readingsTotal 10 minutes
  • About this course2 minutes
  • About the assignments3 minutes
  • Required tools2 minutes
  • About CalArts and the Program in Graphic Design3 minutes

This week is all about wireframes. After mapping out our strategy and scope in the previous course, Web Design: Strategy and Information Architecture, this is the first time in the process that we will address the screen. Now things are going to get much more concrete as we’re starting to actually lay out elements for the user interface. This week you will learn why working on wireframes first—before designing high-fidelity mockups—is a helpful intermediate step. I’ll also talk about responsive design, navigation systems, wayfinding, common design patterns, and strategies for homepage design. And, we’ll discuss which tools are most appropriate for creating wireframes. Because creating those will be your assignment at the end of the week.

What's included

15 videos9 readings3 assignments1 peer review

15 videosTotal 106 minutes
  • Introduction to Week 11 minute
  • Introduction to Wireframes5 minutes
  • Responsive Design: What size should your website be?8 minutes
  • Navigation Systems15 minutes
  • Wayfinding9 minutes
  • Common Web Design Patterns13 minutes
  • Common Form Elements6 minutes
  • Examples of Homepage Content Strategies13 minutes
  • Wireframing Tools3 minutes
  • Wireframes: Bradley8 minutes
  • Wireframes: Alyson, part 19 minutes
  • Wireframes: Alyson, part 28 minutes
  • Why Peer Review? 2 minutes
  • Peer Review Tips4 minutes
  • How to apply feedback 2 minutes
9 readingsTotal 69 minutes
  • Project Brief2 minutes
  • Scrolling6 minutes
  • Further Reading10 minutes
  • Jakob’s law 10 minutes
  • Resource: Design Patterns Collection10 minutes
  • Further Reading10 minutes
  • Try it yourself: Sketch out a wireframe15 minutes
  • What is peer review?5 minutes
  • A Final Thought for the Week1 minute
3 assignmentsTotal 48 minutes
  • Week 1 Quiz30 minutes
  • Navigation Systems10 minutes
  • Common Design Patterns8 minutes
1 peer reviewTotal 120 minutes
  • Wireframes120 minutes

We finally reached the point that many of you—especially if you consider yourself a visual designer—have probably been waiting for. We’ll now talk about designing the look and feel for your website. Meaning, we’re ready to design visual mockups. Finally, you’ll get to decide on colors, typefaces, and images. Maybe you’ll create a few illustrations. And your site will need a logo, too. This week, we’ll focus on designing the visual mockups of just the homepage. To find some inspiration, I’ll also have you create a mood board.

What's included

13 videos6 readings3 assignments1 peer review

13 videosTotal 120 minutes
  • Introduction to Week 21 minute
  • Visual Mockups4 minutes
  • Design Principles4 minutes
  • What is whitespace?6 minutes
  • Using whitespace to style a form5 minutes
  • A visual comparison2 minutes
  • Web Fonts7 minutes
  • Web Typography: A few tips8 minutes
  • Creating Visual Mockups8 minutes
  • Visual Mockups Example13 minutes
  • Moodboards and Homepage Mockup: Bradley7 minutes
  • Homepage Mockup: Alyson13 minutes
  • Bonus Material: Interview with Rob Hope on Web Design Trends44 minutes
6 readingsTotal 71 minutes
  • Aesthetic Usability Effect10 minutes
  • The Grid19 minutes
  • Further Reading20 minutes
  • Web History, Skeuomorphs & Flat Design14 minutes
  • Moodboards7 minutes
  • A Final Thought for the Week1 minute
3 assignmentsTotal 50 minutes
  • Week 2 Quiz30 minutes
  • Design Principles/Whitespace12 minutes
  • Web Typography8 minutes
1 peer reviewTotal 240 minutes
  • Visual Mockups: Home Pages240 minutes

This week, you’ll continue the visual design of your websites, refining the look and feel based on peer feedback. Having worked on the homepage mockup last week, it’s time to design the remaining screens. As an important aside, I will take you on a short expedition to the land of code. Although this specialization isn’t about learning how to code, I want to at least introduce you to the technologies that make the web work. And we’ll look at a few coding examples. After all, the web is built upon certain languages—HTML, CSS, and JavaScript. in order to be an effective UX designer, it is helpful to have a rudimentary understanding of these technologies.

What's included

8 videos6 readings1 assignment1 peer review

8 videosTotal 99 minutes
  • Introduction to Week 31 minute
  • Do I Need to Learn How to Code?4 minutes
  • Survey of Web Technologies14 minutes
  • HTML vs. CSS vs. Javascript: A metaphorical adventure6 minutes
  • HTML Basics5 minutes
  • CSS Basics9 minutes
  • Web Inspector8 minutes
  • Bonus Material: Interview with Rob Hope, Part 252 minutes
6 readingsTotal 98 minutes
  • A Web Design History Primer7 minutes
  • How to become a unicorn5 minutes
  • Try it yourself: Styling Buttons15 minutes
  • More from Rob Hope: “Show Them” Landing Page Course1 minute
  • Bonus Material: Intrinsic Web Design69 minutes
  • A Final Thought for the Week1 minute
1 assignmentTotal 30 minutes
  • Week 3 Quiz30 minutes
1 peer reviewTotal 300 minutes
  • Visual Mockups: Full Set300 minutes

Welcome to the final week of this course and the final week of the entire UI/UX Design Specialization. I hope that you learned a lot of new concepts, techniques, and skills that will allow you to design some amazing interactive experiences in the real world. This week, you will have time to revise any of your project components. And then I’d like you to assemble them into a presentation that will represent the culmination of all of the UX phases we covered. This should be a great project to include in your portfolio. I’ll also show you how to take your static mockups and assemble them into clickable prototypes.

What's included

7 videos3 readings1 assignment1 peer review1 discussion prompt

7 videosTotal 70 minutes
  • Introduction to Week 41 minute
  • Clickable Prototype Example Part 15 minutes
  • Clickable Prototype Example Part 213 minutes
  • Accessibility7 minutes
  • Bonus Material: Interview with Margaret Andersen28 minutes
  • Full Mockups: Bradley9 minutes
  • Full Mockups: Alyson8 minutes
3 readingsTotal 26 minutes
  • Accessibility Resources10 minutes
  • Dark Patterns15 minutes
  • A Final Thought for the Week1 minute
1 assignmentTotal 30 minutes
  • Week 4 Quiz30 minutes
1 peer reviewTotal 180 minutes
  • Final Project Submission180 minutes
1 discussion promptTotal 10 minutes
  • Dark Patterns10 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

Instructor ratings
4.8 (218 ratings)
2 Courses106,468 learners

Explore more from Music and Art

Why people choose Coursera for their career

👁 Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
👁 Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
👁 Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
👁 Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Learner reviews

  • 5 stars

    89%

  • 4 stars

    8.70%

  • 3 stars

    1.41%

  • 2 stars

    0.21%

  • 1 star

    0.65%

Showing 3 of 918

NF
·

Reviewed on Dec 1, 2022

core skill teaching as UI UX i learned much about UI UX design in this course. As a graphics designer, i have been enhancing my skill from this course.

JB
·

Reviewed on Jun 4, 2022

This course did a great job of explaining the why's and how's of designing wireframes. The content is easy to understand and follow.

MM
·

Reviewed on Oct 20, 2021

This is an amazing course, the lecturer has a great charisma and the material is well prepared, you will get the difference once you experience other courses out there.

Frequently asked questions

Since this is a graphic design course, to complete the assignments you will need access to a desktop or laptop computer with the appropriate software installed. You can't really do graphic design work properly on a smartphone or tablet. Adobe CC software is recommended for these courses, but alternatives are available. Software will be reviewed in greater detail in the first week of the course.

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,

¹ Some assignments in this course are AI-graded. For these assignments, your data will be used in accordance with Coursera's Privacy Notice.