Graduates had the opportunity to participate in a stay-at-home hackathon with Microsoft. Learn more about how the winning team worked together.
From color and mood to typography and research, there’s a lot to cover in the broad and ever-growing user experience (UX) design field. To get a better sense of the essential components, we spoke to Ann-Marie Sebastian, a Lead Educator in BrainStation’s User Experience Design Diploma program, who has been a designer for 10 years.
So, without further adieu, let’s take a look at some UX design essentials.
Become a UX Designer in just 12 weeks!
BrainStation’s User Experience Diploma Program is a full-time, 12-week program that equips professionals with the skills and experience to start a new career in design.
How UX Designers Use Color
Primary and Secondary colors
When crafting your design, it’s standard to select sets of primary colors and secondary colors that will act as the dominant and accent colors of your design. These can all be complemented by a neutral or grayscale color selection.
“Color is what many students struggle with the most during the UI phase. In order to fully understand color, you need to dive into theory, however today there are many color generators and online resources that make the process much easier.
If you’re having difficulty, the 60-30-10 rule is a good place to start. Choose a dominant color and use it 60 percent of the time, then use a secondary color that matches the dominant one. Use an accent color (the 10 percent) sparingly, or in situations where you want to highlight content. It also helps to choose a light background (white) or dark background (dark grey) to keep things simple,” Sebastian said.
As an example, take a look at the website of a design agency called Waaark. For their design, they decided to use a range of blues as their primary and secondary colors. The red and pink hues act as an accent to their design. Lastly, neutrals help in creating additional elements like the magnifying glass and the clothing items.
When starting a design, Sebastien suggests that you create a mood board that experiments with the feeling you want your product to instil in the viewer or user.
In the example below, CW Pencils is looking to inspire a fun, creative mood – one that sparks the viewer’s own creative edge. Bright pastel colors help to accomplish that.
Alternatively, Kinfolk is emitting a sense of quiet, peace, and minimalism, a mood that embodies their brand and magazine’s style.
How to Choose the Right Font
When selecting a font, pay attention to sizes, height, and whether you’re using serif or sans serif. Each element has a different effect on the feel of the content.
Google has an extensive Font Library which provides a great way to explore different styles and how they work together.
“When learning typography, it’s best to pick one typeface with many weights – italic, light, bold, medium, etc. Learn how to work with different weights to create visual hierarchy and to better understand balance and structure. Once you’re comfortable with that typeface, pick up another one and try the same thing,” Sebastian said.
Understanding Visual Hierarchy
Sizes are important to distinguishing hierarchy and establishing balance on a page. It’s important to UX specifically as it helps with website navigation. In the example below, you can clearly see where the eye should be drawn first. The Call to Action and title predominantly draw the eye, the rest is deprioritized secondary information.
The image below is a great exercise in image hierarchy – it shows how size draws the eyes in a specific order. Be sure to order information in a way that guides the reader to important information first.
Design thinking is an approach to conceptualizing and building products that solve problems while creating positive experiences for end-users. As it puts an emphasis on empathy, it is a great companion to conducting good user research and high-quality UX design.
Establishing customer empathy is an essential aspect of the design thinking process. When creating designs, prioritize a user-centric approach to uncover insights and develop marketplace solutions that fulfill your customer’s needs.
Prototyping and Validation
The ability to build and measure success based on customer experience allows you to reap the benefits of prototyping. Validation frameworks test assumptions, confirm solutions, and maximize the efficient use of resources prior to a product launch.
It’s essential in design thinking to formalize your ideation process so that you can identify concrete opportunities and create more innovative solutions.
Learn design skills to boost your career – from home!
BrainStation offers Online Live Certificate Courses in UX design, UI design, and design thinking. Attend live classes and interact with peers and expert Instructors from anywhere in the world.
Focus on User Research
The heart and soul of UX design is user research. Knowing your customers is the key to producing a seamless user experience. From surveys to usability tests, there are over 20 different qualitative and quantitative methodologies that allow for different kinds of exploration in the UX practice.
“Talk to people, observe human behavior, and test your designs – these are the basics that should be part of any project throughout the whole process. If it’s not human-centered design stemming from the needs of the people you are designing for, it can quickly become ‘self-centered design,’” Sebastian says
Design and Research
Before designing, plan and conduct research to understand behavior, needs, and motivation. With formal UX training, you can learn how to communicate complex interactions visually through experience maps that feature personas. All this research culminates in wireframing and prototypes.
UX Design Resources
Popular UX Design Tools
Sketch or Figma: Use either of these tools to bring your wireframes to life.
Invisionapp: Use Invisionapp to build out a simple prototype for your designs. If you want to create more advanced prototyping with micro-interactions, you can use Principle, Flinto, Framer, ProtoPie.
Adobe: Adobe Photoshop and Illustrator are good companion tools for creating vectors and editing photos.
Online UX Design Resources
- Mobbin patterns
Great UX Design Books
- The Design of Everyday Things
- 101 Design Methods
- Don’t Make Me Think