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.

Finally, Make it Beautiful: The Mockup Phase

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.

An Excursion to Codelandia

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.

Putting it all Together: Final Presentation

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.

Good to know

Know what's good

, what to watch for

, 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

Web design: wireframes to prototypes masterclass

Learners say this course is largely positive and especially helpful for beginners with little to no experience. It teaches the fundamentals of web design, including strategy, information architecture, visual mockups, and prototyping. Through hands-on projects, students will build a portfolio-worthy clickable prototype of a website. This course is part of a well-received specialization, and some students have even gotten their first web design clients after completing the program.

Suited for beginners with no prior experience.

"It's a good tool for beginners who wants to be familiar in web design."

"This specialization is really helpful. It is designed for people who do not know anything about graphic design."

Involves practical projects and assignments.

"It was a great hands-on learning experience."

"I enjoyed the courses very much as well as the assignments."

Provides opportunities to build a portfolio.

"At the end of the course I have a portfolio to show."

"I have a project to put in my portfolio."

"I was able to understand how to design a website ... including everything from the ideation, strategy, wireframes, and mockups."

May include outdated material.

"The teacher gives old information about tools and trends."

Involves peer review of assignments.

"Giving bad grades and not explaining anything."

"This is a wonderful course that gave me a great tool to move forward in the world of UX/UI. If there is only one small set-back about this course, which is the peer review process."

"No one gives you feedback so you have to make the most of the course for yourself."

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

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

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

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

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

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

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

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

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

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