{"id":10554,"date":"2020-02-12T15:28:19","date_gmt":"2020-02-12T20:28:19","guid":{"rendered":"https:\/\/blog.brainstation.io\/?p=10554"},"modified":"2021-01-28T15:43:15","modified_gmt":"2021-01-28T20:43:15","slug":"a-guide-to-ux-design-essentials","status":"publish","type":"post","link":"https:\/\/brainstation.io\/blog\/a-guide-to-ux-design-essentials","title":{"rendered":"A Guide to UX Design Essentials"},"content":{"rendered":"\n

From color and mood to typography and research, there\u2019s 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\u2019s User Experience Design Diploma program, who has been a designer for 10 years.<\/span><\/p>\n\n\n\n

So, without further adieu, let\u2019s take a look at some UX design essentials. <\/span><\/p>\n\n\n\n

How UX Designers Use Color<\/span><\/h2>\n\n\n\n

Primary and Secondary colors<\/strong><\/h3>\n\n\n\n

When crafting your design, it\u2019s 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. <\/span><\/p>\n\n\n\n

\u201cColor 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. <\/span><\/p>\n\n\n\n

If you\u2019re 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,\u201d Sebastian said. <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

As an example, take a look at the website of a design agency called Waaark<\/a>. 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. <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Mood Boards<\/strong><\/h3>\n\n\n\n

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.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

In the example below, CW Pencils<\/a> is looking to inspire a fun, creative mood \u2013 one that sparks the viewer\u2019s own creative edge. Bright pastel colors help to accomplish that. <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Alternatively, Kinfolk is emitting a sense of quiet, peace, and minimalism, a mood that embodies their brand and magazine\u2019s style. <\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Typography<\/span><\/h2>\n\n\n\n

How to Choose the Right Font<\/strong><\/h4>\n\n\n\n

When selecting a font, pay attention to sizes, height, and whether you\u2019re using serif or sans serif. Each element has a different effect on the feel of the content.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Google has an extensive <\/span>Font Library<\/span><\/a> which provides a great way to explore different styles and how they work together. <\/span><\/p>\n\n\n\n

\u201cWhen learning typography, it\u2019s best to pick one typeface with many weights \u2013 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\u2019re comfortable with that typeface, pick up another one and try the same thing,\u201d Sebastian said.<\/span><\/p>\n\n\n\n

Understanding Visual Hierarchy<\/strong><\/h4>\n\n\n\n

Sizes are important to distinguishing hierarchy and establishing balance on a page. It\u2019s 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.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

The image below is a great exercise in image hierarchy \u2013 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.<\/span><\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Design Thinking<\/span><\/h2>\n\n\n\n

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. <\/span><\/p>\n\n\n\n

Customer Empathy<\/strong><\/h4>\n\n\n\n

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\u2019s needs. <\/span><\/p>\n\n\n\n

Prototyping and Validation<\/strong><\/h4>\n\n\n\n

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.  <\/span><\/p>\n\n\n\n

Ideation <\/strong><\/h4>\n\n\n\n

It\u2019s essential in design thinking to formalize your ideation process so that you can identify concrete opportunities and create more innovative solutions. <\/span><\/p>\n\n\n\n

Focus on User Research<\/span><\/h2>\n\n\n\n

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.<\/span><\/p>\n\n\n\n

\u201cTalk to people, observe human behavior, and test your designs \u2013 these are the basics that should be part of any project throughout the whole process. If it\u2019s not human-centered design stemming from the needs of the people you are designing for, it can quickly become \u2018self-centered design,\u2019\u201d Sebastian says<\/span><\/p>\n\n\n\n

Design and Research<\/strong><\/h4>\n\n\n\n

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. <\/span><\/p>\n\n\n\n

UX Design Resources<\/span><\/h2>\n\n\n\n

Popular UX Design Tools<\/strong><\/h4>\n\n\n\n

Sketch or Figma: <\/b>Use either of these tools to bring your wireframes to life.<\/span><\/p>\n\n\n\n

Invisionapp: <\/b>Use Invisionapp to build out a simple prototype for your designs. <\/span>If you want to create more advanced prototyping with micro-interactions, you can use <\/span>Principle, Flinto, Framer, ProtoPie.<\/span><\/p>\n\n\n\n

Adobe: <\/b>Adobe Photoshop and Illustrator are good companion tools for creating vectors and editing photos. <\/span><\/p>\n\n\n\n

Online UX Design Resources<\/strong><\/h4>\n\n\n\n