BrainStation Announces New London Campus
Take a look at BrainStation's brand new campus in Shoreditch, London, the home for our part-time courses, award-winning bootcamps, and industry events in the UK.
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.
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.
Mood Boards
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.
Typography
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
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.
Customer Empathy
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.
Ideation
It’s essential in design thinking to formalize your ideation process so that you can identify concrete opportunities and create more innovative solutions.
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
- Pttrns.com
- Dribbble.com
- Behance.com
- Siteinspire
- awwwards.com,
- Nngroup.com
- UXcollective
- blog.brainstation.io
Great UX Design Books
- The Design of Everyday Things
- 101 Design Methods
- Don’t Make Me Think
