View all Tracks
UX: Visual Design Process
User Experience Design, commonly called UX Design, encompasses all aspects of a user's interaction with a company, its services, and its products. UX designers put themselves into the shoes of users to create solutions through empathy.
In this Track, you'll learn various methods of iterating on a design idea, from wireframing to building a mockup to sharing interactive prototypes.
We'll begin with a few foundational courses in design thinking and giving/receiving feedback. Then you'll dive into our 2-hour Introduction to Wireframing course, where you'll learn the methods and process for wireframing, a key skill for a lot of UX design work.
Next, we'll tackle Typography. Working with type is something that every UX designer needs to be comfortable with, and this in-depth course will get you up to speed. Afterward, you'll take our Designing Layouts course, which covers visual and typographic hierarchy, the use of grids and alignment in layouts, and how to choose colors.
To wrap up this Track, we'll learn how to create mockups of your designs, how to prototype them in Adobe XD and Figma, and how to present your ideas.
Ready to dive into the exciting UX design process? Let's begin!
Ready to start learning?
Treehouse offers a 7 day free trial for new students. Get access to 1000s of hours of content. Learn to code, land your dream job.
Start Your Free Trial
-
Course
- 1
- 2
Visual Design Foundations
In this course, you'll build your design vocabulary and learn how to describe the basic building blocks of any visual image. We'll start by learning about the elements of design, like line, shape, and form. Then we'll move on to the principles of design, like balance, harmony, and movement. By the end, you'll have a better foundation for discussing design with other team members and you'll be able to make objective observations about what is often subjective subject matter.
-
26 minWorkshop
Handling Feedback as a UX Designer
This workshop prepares new designers for handling feedback on their work in a diplomatic, effective, and professional manner.
Viewed -
7 minWorkshop
Receiving UX Feedback by Example
See positive ways of handling different types of feedback on your designs, including constructive, negative, and prescriptive feedback.
Viewed -
3 minWorkshop
Collecting Design Inspiration
Collecting design inspiration is a fun way to get fresh ideas! It also helps you stay current with design trends and become aware of emerging design patterns. The goal is to collect designs that spark your own creative ideas.
Viewed -
Course
- 1
- 2
- 3
- 5
Introduction to Wireframing
Wireframing is a useful part of the design process. Throughout a website or mobile app project, you will have a lot of ideas and the best way to sort through those ideas is to brainstorm. Wireframes are a visual artifact of brainstorming, and the goal is to make them with minimal effort, as to encourage ideation. Whether you're a designer or not, wireframing is an important skill to have in your toolkit. It's beneficial for product managers, marketers, or anyone else with ideas for a website or mobile app. Wireframes are a valuable tool for visualizing user experiences, iterating on ideas, and sharing ideas with others.
-
7 minPractice
Practice Sketching
For this practice session, you’ll be creating eight rough sketches for the primary screen of a sketching application. This app gives users the ability to make quick, shareable, black-and-white sketches using their fingers on a touchscreen.
Viewed -
11 minPractice
Practice Wireframing
For this practice session, you’ll be creating a digital wireframe in Adobe XD for the primary screen of a sketching application. This app gives users the ability to make quick, shareable, black-and-white sketches using their fingers on a touchscreen.
Viewed -
Course
- 1
- 2
- 3
- 4
- 5
Typography for Designers
Typography is one of the most important aspects of good design. In this course, you'll learn all you need to know about creating good typography as a UX Designer: how to choose a typeface; what to look for when laying out type, how to create typographic hierarchy, laying out type, and creating responsive typography.
-
6 minPractice
Before and After: Typography
Improve the typography on an existing design.
Viewed -
Course
- 1
- 2
Designing Layouts
In this course, you'll learn how to apply design principles through a series of examples. Each example will include some component that can be improved, and by making the improvement, you'll develop strong aesthetic sensibilities about things like visual and typographic hierarchy, the use of grids and alignment in layouts, and how to choose colors.
-
37 minWorkshop
Creating Mockups
Learn how mockups are used in the design process, and discover techniques for bringing them into your workflow. Practice transforming a set of wireframes into realistic depictions of the app by applying visual design styling and using Apple’s UI Kit for Adobe XD.
Viewed -
7 minPractice
Before and After: Color
Practice designing with color.
Viewed -
5 minPractice
Before and After: Layout
Improve the layout of an existing mobile iOS app.
Viewed -
Course
- 1
- 2
- 3
Prototyping with Adobe XD
Adobe XD is a visual prototyping tool for PC and macOS. In this course, you'll learn how to use Adobe XD by building a mockup for a travel booking app. By the end, you'll be able to create interactive prototypes that can be shared with others.
-
Course
- 1
- 2
- 3
Prototyping with Figma
In this course, you'll learn how to build interactive and sharable prototypes in Figma, a web-based visual prototyping tool. You'll create a prototype for a "prosumer" mobile photography app, and by the end, you'll have a better understanding of how to create interactive prototypes that can be shared with project stakeholders and team members.
-
7 minPractice
Practice Prototyping
Practice prototyping by connecting mockups in Adobe XD. Practice creating tap, time, and drag interactions.
Viewed -
Course
- 1
- 2
Collaborating with Developers
Designers will learn how to involve developers throughout the design process, from conceptual brainstorming to implementation in code.
-
17 minWorkshop
Presenting Design Ideas
Learn how to effectively present your design process to stakeholders so you can communicate a vision. Define the agenda, set the project goals, share your research, compare iterations, navigate feedback, and create a path for the next steps.
Viewed -
2 minInstruction
UX: Going beyond Visual Design
Now that you've finished the UX: Visual Design Process Track, you may wish to continue learning more about UX design....(continue reading)
Viewed -
Track Completion
This course includes:
- Visual Design Foundations 35 min
- Handling Feedback as a UX Designer 26 min
- Receiving UX Feedback by Example 7 min
- Collecting Design Inspiration 3 min
- Introduction to Wireframing 104 min
- Practice Sketching 7 min
- Practice Wireframing 11 min
- Typography for Designers 3 hours
- Before and After: Typography 6 min
- Designing Layouts 52 min
- Creating Mockups 37 min
- Before and After: Color 7 min
- Before and After: Layout 5 min
- Prototyping with Adobe XD 71 min
- Prototyping with Figma 71 min
- Practice Prototyping 7 min
- Collaborating with Developers 72 min
- Presenting Design Ideas 17 min
- UX: Going beyond Visual Design 2 min