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.

Traffic lights

Read about what's good

what should give you pause

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

Foundational visual ui design principles

According to learners, this course offers a strong foundational understanding of visual UI design elements. Students highlight the clear lectures and helpful assignments that aid in applying concepts like hierarchy and composition. Many felt it was excellent for those with a design background transitioning to UI, appreciating its focus on visual form. However, a notable point raised is that the course is quite theoretical and does not cover practical UI software tools, which was a significant limitation for some seeking hands-on skills.

Approach is conceptual, focused on theory.

"However, I found it a bit too theoretical and not enough hands-on application..."

"This course felt very academic and focused on abstract visual theory..."

"It's very much a CalArts style approach - conceptual."

"Provides a strong theoretical foundation... Less helpful if you just want to learn *how* to build..."

Assignments reinforce learning and apply concepts.

"The assignments, especially the final project, were very helpful in applying the concepts."

"The weekly exercises build upon each other nicely."

"Assignments are helpful for conceptual understanding."

"The exercises are good for practice and reinforced the learning."

Provides a solid base in UI visual principles.

"Excellent foundational course for UI design, particularly focusing on the visual aspects."

"Provides a strong theoretical foundation for UI visual design."

"Exactly what I needed to understand the visual language of UI. The structure is logical..."

"I gained a strong understanding of core UI visual elements like color, type, and hierarchy."

Does not teach modern UI design software.

"Was hoping for more practical skills using modern UI tools. This course felt very academic..."

"Decent overview, but felt it lacked depth in certain areas. Also, as others noted, it doesn't teach software tools..."

"Might be better for fine artists than digital product designers."

"It's purely theoretical visual design, without showing how to implement in Figma or Sketch."

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

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

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

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

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

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

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

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

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

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