Web Design: Wireframes to Prototypes from Coursera

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 inside

Syllabus

Course Overview

Not Getting Caught up in the Details: Wireframes

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.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Provides a solid foundation for students by teaching fundamental UX research principles

Taught by Roman Jaster, who is recognized for their work in UX design

Covers key topics like responsive web design, mobile-first approach, and typography, which are essential for modern web design

Provides hands-on experience in creating wireframes, mockups, and clickable prototypes

Requires completion of the previous course in the series, limiting accessibility

Reviews summary

Practical web design: wireframes to prototypes

According to learners, this course serves as a valuable capstone to the UI/UX Design Specialization. It teaches translating wireframes into high-fidelity mockups and clickable prototypes. The instructor Michael Worthington is highly praised for his clear teaching. A major strength is the practical, portfolio-ready assignments. Feedback notes the prototyping section needs more depth. The code overview is useful for context but is very basic. The most significant criticism is the inconsistent peer review system with varying feedback quality. Completing the prerequisite course is essential. Overall, it's a solid course, but projects require significant time.

Introduction to code is basic, not for programming.

"I liked the brief overview of HTML/CSS/JS, useful for context but definitely not a coding course."

"The part about code was very basic, probably too basic if you have any development background."

"The section on code is a good reality check but not a deep dive."

"The coding part is just an overview, don't expect to learn to code."

"The coding module is more about appreciating development than understanding it practically."

"code overview is helpful for context, but superficial."

Must complete previous course for project.

"The requirement to complete the previous course (Strategy and Information Architecture) is essential as this course heavily relies on the project developed there."

"Requires dedication to complete the assignments properly."

"Definitely requires the prerequisite, don't skip it!"

"The course assumes you've done the previous one, which makes sense as it builds on it."

"Builds directly on the previous course."

"Make sure you have the prerequisite course done; it's non-negotiable for completing the assignments."

"Definitely needs the previous course."

"Prerequisite is a must."

"Ensure you have the prerequisite course material ready."

Clear, knowledgeable, and engaging guidance.

"The instructor, Michael Worthington, is incredibly knowledgeable and presents the material in a clear, engaging manner."

"Michael Worthington's instruction is top-notch – clear, concise, and inspiring."

"The instructor's guidance is superb."

"The instructor is fantastic, explaining complex concepts simply."

"instructor is knowledgeable and easy to follow."

Hands-on assignments reinforce learning for portfolio.

"The assignments are practical and build upon the concepts learned, providing valuable hands-on experience."

"The assignments are challenging but very practical, culminating in a great portfolio piece."

"Assignments are practical and reinforce learning."

"Assignments are challenging but rewarding, allowing you to apply what you learn immediately."

"assignments are project-based and require significant time investment, but the output is useful for a portfolio."

"hands-on projects were the best part, turning theory into practice and resulting in tangible portfolio pieces."

Prototyping module is less detailed than others.

"The prototyping part felt a bit rushed compared to the others."

"Prototyping section was a bit thin."

"Prototyping could have been more detailed."

"The prototyping section is too brief to be truly useful for creating complex interactions."

"not deep enough for skill mastery in prototyping"

Quality of peer feedback and grading varies.

"Peer reviews were sometimes hit or miss, which is a common issue in these types of courses."

"My main issue was the peer review system; feedback quality varied wildly, and it sometimes felt unfair."

"Peer grading is the weakest link, as is common in online courses."

"Peer assessment is, unfortunately, unreliable at times."

"Peer review quality was inconsistent, leading to frustration with grading."

"Peer assessment variability is a known issue in these formats."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Web Design: Wireframes to Prototypes with these activities:

Gather UX Design Resources

Show steps

Gather a collection of useful resources, tools, and articles for UX design to help you stay up-to-date with the field.

Browse courses on UX Design

Show steps

Create a list of different types of resources you need
Search for and bookmark useful resources
Organize your resources into a central location

Learn About Responsive Design

Show steps

Responsive design ensures that your website or app looks and functions well on all devices.

Browse courses on Responsive Design

Show steps

Read an article or watch a video about responsive design
Apply responsive design techniques to a simple web page

Create a Wireframe Sketch

Show steps

Wireframing is an essential skill for designing intuitive and user-friendly interfaces.

Browse courses on Wireframing

Show steps

Choose a simple web page or app screen to design
Sketch out the layout of the screen, including the placement of elements like navigation, content, and buttons
Label the different elements of the wireframe

Three other activities

Expand to see all activities and additional details

Show all six activities

Participate in a UX Design Critique

Show steps

Critique the designs of others and seek critique on your own designs to improve your skills.

Browse courses on UX Design

Show steps

Find a UX design critique session or workshop
Participate in the critique by providing and receiving feedback on designs

Design a Mockup for a Web Page

Show steps

Creating a mockup allows you to visualize the final look and feel of your website or app.

Browse courses on Mockups

Show steps

Create a wireframe of the page
Choose a color scheme and typography
Add images and other visual elements
Get feedback on your mockup from others

Build a Personal Portfolio Website

Show steps

Build a website to showcase your UX design skills and projects, as this will help you stand out in the job market.

Browse courses on Portfolio

Show steps

Plan the structure and content of your portfolio
Design the layout and visuals of your portfolio
Develop the website using HTML, CSS, and JavaScript
Deploy your portfolio website online

Career center

Learners who complete Web Design: Wireframes to Prototypes will develop knowledge and skills that may be useful to these careers:

UI/UX Designer

This course provides comprehensive instruction in both UI and UX design, as well as practical skills-based instruction centered around a visual communications perspective. If you want to become a UI/UX Designer, this course is a great place to start.

See salaries and explore the career path for UI/UX Designer

User Experience Designer

This course provides a comprehensive overview of user experience (UX) design. You will learn how to apply early UX research to actual user interfaces through the creation of wireframes, mockups, and prototypes. These skills will prepare you for a career as a UX Designer in a variety of industries.

See salaries and explore the career path for User Experience Designer

Interaction Designer

This course can help you become a successful Interaction Designer. The course will teach you how to create wireframes, mockups, and interactive prototypes. You will learn how to design for responsive web and mobile devices. This knowledge will prepare you for the challenges of designing interactive experiences.

See salaries and explore the career path for Interaction Designer

User Interface Designer

This course provides a holistic view of UX design, from strategy and information architecture all the way to building interactive prototypes. These skills will help build a strong foundation for your career as a User Interface Designer.

See salaries and explore the career path for User Interface Designer

Digital Product Designer

This course can help you become a well-rounded Digital Product Designer. It will teach you how to create user interfaces that are both functional and aesthetically pleasing. You will also learn about the different technologies that make the web work.

See salaries and explore the career path for Digital Product Designer

Information Architect

This course builds on the concepts covered in the course Web Design: Strategy and Information Architecture. The skills taught in this course will help you build a foundation as an Information Architect.

See salaries and explore the career path for Information Architect

Web Designer

Web Designers are typically focused on visual and creative aspects of website design, but a course that discusses early UX research, wireframing, prototyping, and web technologies could be very useful for your professional development.

See salaries and explore the career path for Web Designer

Webmaster

This course can help you become a Webmaster with a strong foundation in UX design. You will learn how to create wireframes, mockups, and prototypes. You will also learn about the importance of responsive design and typography. These skills will help you to create effective websites that meet the needs of your users.

See salaries and explore the career path for Webmaster

Human-Computer Interaction Designer

This course provides a foundational understanding of the principles of human-computer interaction (HCI). This knowledge will be valuable for a career as an HCI Designer.

See salaries and explore the career path for Human-Computer Interaction Designer

Graphic Designer

This course teaches the fundamentals of UX design, which will be useful for your career as a Graphic Designer. You will learn how to create wireframes, mockups, and prototypes. You will also learn about responsive design and the importance of typography. These skills will help you create visually appealing and functional user interfaces.

See salaries and explore the career path for Graphic Designer

Web Developer

This course may prove useful if you are interested in a career as a Web Developer. The course discusses different web technologies such as HTML, CSS, JavaScript, and databases. An understanding of these technologies will help build a foundation for a career in web development.

See salaries and explore the career path for Web Developer

Front-End Developer

This course may be useful for learners who are interested in becoming a Front-End Developer with a focus on visual communication and UI/UX design.

See salaries and explore the career path for Front-End Developer

Back-End Developer

This course may be useful for learners who are interested in becoming a Back-End Developer with a focus on user experience (UX).

See salaries and explore the career path for Back-End Developer

Project Manager

This course may be helpful for learners who are interested in becoming a Project Manager with a focus on digital products. You will learn how to plan, execute, and manage projects in a UX-focused environment.

See salaries and explore the career path for Project Manager

Software Engineer

This course may be helpful for learners who are interested in becoming a Software Engineer with a focus on user experience (UX).

See salaries and explore the career path for Software Engineer