Visual Elements of User Interface Design from Coursera

This design-centric course examines the broad question of what an interface is and what role a designer plays in creating a user interface. Learning how to design and articulate meaning using color, type, and imagery is essential to making interfaces function clearly and seamlessly. Through a series of lectures and visual exercises, you will focus on the many individual elements and components that make up the skillset of an interface designer. By the end of this course, you will be able to describe the key formal elements of clear, consistent, and intuitive UI design, and apply your learned skills to the design of a static screen-based interface.

This is the first 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 and Specialization Overview

Welcome! In this first module I will summarize the assignments and expectations of this course, as well as the UI/UX Design Specialization.

What IS a user interface anyway?

In this first week we will look at some basic broad concepts and contexts for user interfaces, looking at examples both on and off-screen. We will look at basic principles of interaction theory, discuss the relationship between UI and UX, and examine the relationship between coding and designing. We will discuss the roles of functionality and aesthetics in interface design and outline a "form-first" philosophy to user interface design. This week will focus on background information and terminology and will give you the context and vocabulary necessary before you start making great interfaces!

Formal Elements of Interface Design

This week we are going to examine the various formal elements that make up an interface. We’ll start out with the larger questions of content, context and audience that frame any UI/UX project. In other words: What is it? Who is it for? And, where does it live? And we’ll look at the big picture of overall design direction, what is often referred to as “look and feel”. From there we’ll go into detail of how the basic components of how visual design works in the context of interface design: language, shape, color, imagery, typography, and icons. These areas will be the formal building blocks you will use to create the more complex visual structure of a screen-based user interface.

Active Elements of Interface Design

This week we are going to take our static interface elements and begin to think about how a user interacts with them. In other words, how to bring these elements a stage closer to having a life on the screen. We’ll be looking at navigational conventions, such as menus, buttons, and icons in different states. Our focus will move from what the graphic interface looks like, to include how it works and how it responds to the user. By adding interactivity to our static designs, the idea is to think more deeply about the role the designer plays in shaping a user’s interactive experience.

Composing the Elements of Interface Design

This week we are going to take our individual interface components and see what happens when we try to put them together into a more complex structure. We’ll be looking at how to get our components to work harmoniously as a family, figuring out how hierarchy works in the interface, and discussing conventions and expectations of contemporary interface design. We’ll also be examining how to navigate to different screens and how to build visual relationships between different kinds of content within a single site. Finally, we’ll be discussing different platforms, how to create variable content for different screen sizes, and looking at how to organize complex bodies of content into user-friendly structures.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops foundational design principles and interface design skills

Taught by Michael Worthington, an experienced designer

Focuses on visual communication, rather than marketing or programming

Suits learners with graphic or visual design experience seeking UI or UX skills

Part of a specialization, providing a comprehensive UI/UX design approach

Reviews summary

Ui/ux elements

Learners say the course provides a helpful overview of the basics of visual elements of user interface design. While it's a good foundation for beginners, more experienced designers may find it too basic. Students appreciate the assignments, but note that feedback from peers can be subjective, making the peer review process frustrating.

Learners find the weekly assignments to be valuable, as they provide practical application of the concepts covered.

"I really enjoyed doing this course and learnt a lot. I had absolutely no knowledge about working on any of the adobe apps and designing, so this course is very good for beginners like me."

The course offers a structured introduction to UI/UX design for beginners with no prior knowledge.

"This is a good course for beginners. I love that it understand that not all people who takes this course is already knowledgeable in a way with Ui. So it seems to tackle the course a little lighter for us beginners."

Students often express frustration with the peer review process. They note that feedback can be subjective and unfair, and that some peers do not take the assignments seriously.

"The peer grading system is awful. Easy A if you get lucky with reviewers, but some give you 0 for no reason"

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 Visual Elements of User Interface Design with these activities:

Don't Make Me Think

Show steps

Explore the principles of intuitive navigation and user-friendly design.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Typography Comparison

Show steps

Foster a critical eye for typography to improve your understanding of typefaces.

Browse courses on Typography

Show steps

Analyze different typefaces, their characteristics, and their impact.
Compare typefaces for readability, legibility, and aesthetics.
Identify typefaces suitable for various UI elements, such as headings, body text, and buttons.

Color Palette Exercise

Show steps

Get creative with colors to enhance your understanding of UI color design.

Browse courses on Color Theory

Show steps

Gather inspiration from existing color palettes.
Create a mood board with colors that inspire different emotions.
Experiment with your own color combinations and schemes.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Design Critique

Show steps

Exchange feedback and learn from other designers in a design critique session.

Browse courses on UI/UX Design

Show steps

Join a group or online platform for design critiques.
Submit your UI design for review and provide feedback on others' designs.

UX Research Workshop

Show steps

Learn practical UX research methods to gather insights and improve your designs.

Browse courses on UX Research

Show steps

Participate in a UX research workshop or online tutorial.
Conduct a user interview or usability test on a digital product or service.

Interface Redesign

Show steps

Apply your skills to enhance the user experience of an existing website or app.

Browse courses on Interface Design

Show steps

Choose an interface to redesign.
Design a new interface with improved functionality and user flow.
Create a prototype or low-fidelity mockup to demonstrate your design.

Prototyping and User Testing

Show steps

Attend a workshop to learn how to create and test prototypes of your designs.

Browse courses on Prototyping

Show steps

Enroll in an in-person or online prototyping and user testing workshop.
Engage in hands-on activities to learn about different prototyping tools and techniques.
Conduct user testing on your own prototypes and analyze the results.

UI Style Guide

Show steps

Develop a comprehensive style guide to ensure consistency in your UI designs.

Browse courses on UI Design

Show steps

Define the visual elements of your UI, including color palette, typography, and iconography.
Create a set of guidelines for the use of these elements in different UI components.
Present your UI style guide to a peer for feedback and refinement.

Career center

Learners who complete Visual Elements of User Interface Design will develop knowledge and skills that may be useful to these careers:

UX Designer

A UX Designer is responsible for making digital products a pleasure to use. Every interaction should be smooth, engaging, and aesthetically pleasing. This course grounds you in the fundamentals of UX and UI Design, helping build a foundation for a successful career in the field. You will learn how to use color, typography, and imagery to make interfaces function clearly and seamlessly, and improve the overall user experience.

See salaries and explore the career path for UX Designer

UI Designer

A UI Designer creates the visual interface of a digital product, making it both functional and visually appealing. This course provides a strong foundation for a career as a UI Designer, as it teaches you how to design and articulate meaning using color, type, and imagery to make interfaces function clearly and seamlessly.

See salaries and explore the career path for UI Designer

Interaction Designer

An Interaction Designer creates the interactive elements of a digital product, ensuring that it is both usable and enjoyable to use. This course can help you build a foundation for a career in Interaction Design, as it teaches you how to design and articulate meaning using color, type, and imagery to make interfaces function clearly and seamlessly. You will also learn how to apply your learned skills to the design of a static screen-based interface.

See salaries and explore the career path for Interaction Designer

Product Designer

A Product Designer oversees the entire product development process, from ideation to launch. This course can provide a valuable foundation for a career in Product Design, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design. You will also learn how to describe the key formal elements of UI design and apply your skills to the design of a static screen-based interface.

See salaries and explore the career path for Product Designer

Visual Designer

A Visual Designer creates the visual elements of a digital product, such as the logo, branding, and marketing materials. This course can help you build a foundation for a career in Visual Design, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design. You will also learn how to describe the key formal elements of UI design and apply your skills to the design of a static screen-based interface.

See salaries and explore the career path for Visual Designer

Graphic designer

A Graphic Designer creates visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course can help you build a foundation for a career in Graphic Design, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design. You will also learn how to describe the key formal elements of UI design and apply your skills to the design of a static screen-based interface.

See salaries and explore the career path for Graphic designer

Web Designer

A Web Designer creates and maintains websites. This course can help you build a foundation for a career in Web Design, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design. You will also learn how to describe the key formal elements of UI design and apply your skills to the design of a static screen-based interface.

See salaries and explore the career path for Web Designer

Art Director

An Art Director oversees the visual elements of a creative project, such as a film, television show, or magazine. This course can help you build a foundation for a career as an Art Director, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design. You will also learn how to describe the key formal elements of UI design and apply your skills to the design of a static screen-based interface.

See salaries and explore the career path for Art Director

Creative Director

A Creative Director oversees the creative vision of a project, such as a film, television show, or magazine. This course can help you build a foundation for a career as a Creative Director, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design. You will also learn how to describe the key formal elements of UI design and apply your skills to the design of a static screen-based interface.

See salaries and explore the career path for Creative Director

Back-End Developer

A Back-end Developer creates the server-side logic of a website or application. This course may be useful for a Back-end Developer, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design.

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

Front-End Developer

A Front-end Developer creates the user interface of a website or application. This course may be useful for a Front-end Developer, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design.

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

Computer Scientist

A Computer Scientist studies the theory and practice of computation. This course may be useful for a Computer Scientist, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design.

See salaries and explore the career path for Computer Scientist

Software Engineer

A Software Engineer designs, develops, and maintains software systems. This course may be useful for a Software Engineer, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design.

See salaries and explore the career path for Software Engineer

Human-Computer Interaction Researcher

A Human-Computer Interaction Researcher studies the interaction between humans and computers. This course may be useful for a Human-Computer Interaction Researcher, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design.

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

Data Scientist

A Data Scientist analyzes data to extract insights and make predictions. This course may be useful for a Data Scientist, as it teaches you the basics of user interface design and the importance of clear, consistent, and intuitive design.

See salaries and explore the career path for Data Scientist