{"id":13107,"date":"2017-10-20T11:30:37","date_gmt":"2017-10-20T10:30:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13107"},"modified":"2020-12-21T11:35:13","modified_gmt":"2020-12-21T11:35:13","slug":"crash-course-ui-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/crash-course-ui-design\/","title":{"rendered":"A Crash Course in UI UX Design"},"content":{"rendered":"

UI vs. UX Design<\/h2>\n

If you\u2019ve done any kind of research about software design, you\u2019ve probably heard of the terms \u201cUI\u201d and \u201cUX\u201d. But what separates UI from UX?<\/p>\n

At their most simple forms, UX design<\/a><\/strong> is what makes an interface useful, and UI design<\/strong> is what makes an interface beautiful. For UI, this includes a blend of visual hierarchy and interface elements. To understand what separates a great interface from a good interface, one must understand the UI design<\/strong> is merely just one layer of the entire design process. Perhaps this is why people often confuse UX and UI. In the following few paragraphs, however, I hope to help you as the audience or reader understand where the differences lie in the context of the design process.<\/p>\n

According to Garrett in The Elements of the User Experience<\/em><\/a>, UX can be understood in five primary planes.<\/p>\n

Let\u2019s start with the most abstract plane:<\/p>\n

<\/p>\n

\"\"<\/a>

The first plane of product\u00a0design<\/p><\/div>\n

At a high level, the first plane is really the starting block of product design. Here, you\u2019re applying different research methods<\/a>, including user interviews, competitive analyses, user personas<\/a>, and other research techniques to understand:<\/p>\n

    \n
  1. What is the problem you are trying to solve?<\/li>\n
  2. What are your user needs?<\/li>\n
  3. How does your product fit within a business context (product objectives)?<\/li>\n<\/ol>\n

    The second plane:<\/p>\n

    \"\"<\/a>

    The second plane of product\u00a0design<\/p><\/div>\n

    In this stage, you should be defining functional specifications and content requirements of your platform. In other words:<\/p>\n

      \n
    1. How might you solve the problems through your platform? What are the features, and how might you prioritize them?<\/li>\n<\/ol>\n

      The challenge here for designers is prioritizing features while minimizing tradeoffs. Sure, you might have hundreds of ideas to solve a problem, but you can\u2019t implement all of them.<\/p>\n

      The third plane:<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      In this stage, your ideas should begin to form a structure. Information architecture is concerned with how the information within an app is organized, and how users cognitively process the information. User flows map out the specific journeys users embark on through the app to help solve their specific need. It\u2019s concerned with the most logical steps for your users to gratify their needs.<\/p>\n

      The next plane is where things become less abstract and more concrete:<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      The skeleton plane seeks to achieve the structure of an interface design and information design. Interface design is concerned with the arrangement of specific interface elements to enable users to interact with the functionality of a system, while information design is concerned with the presentation of information in a way that facilitates understanding.<\/p>\n

      In this stage, you\u2019ll probably find UX or Product Designers designing, testing, and iterating on wireframes<\/a>. Wireframes are very low fidelity, often greyscale mockups that demonstrate the intent of each interface element for users.<\/p>\n

      And finally, the most concrete plane:<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      The surface plane, as the name suggests, strives for great sensory experience and visual design. The goal here for designers is to form a visceral connection with users by successfully communicating the brand, product, value and functionality in one cohesive image.<\/p>\n

      This is the plane where you\u2019ll find UI Designers<\/strong> and Visual Designers doing the bulk of their work using tools such as Sketch, Photoshop, Adobe Experience Design, Illustrator.<\/p>\n

      Next, let\u2019s jump into some basic principles of UI Design.<\/p>\n

      Principle #1: Clarity comes\u00a0first<\/h2>\n

      There\u2019s nothing worse than ambiguity in an app. What does this button do? How did I get here? How do I go back? <\/em>In order to avoid this, a designer should always ask themselves:<\/p>\n

      Why is this here? Does this make sense? What other possibilities can I explore?<\/em><\/p>\n

      Great designers know how to explore the variety of possibilities of an interface layout, the potential tradeoffs of each, and understand which design might help a user best achieve their goals. Clarity in design allows a user to feel confident while navigating through your app.<\/span><\/p>\n

      Principle #2: Provide clear, meaningful feedback<\/h2>\n

      We\u2019ve all used a website or an app where we\u2019ll try to click a button, and we\u2019ll wonder if the system registered the click.<\/p>\n

      Simply put, every action needs a reaction<\/strong>. If you\u2019re a web developer, for example, changing the\u00a0:hover state of a button is a common form of feedback to allow your users to understand their hover action.<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      A great example is Facebook\u2019s use of their skeleton loading state. While the user waits for their content to load, a loading state in the shape of the content provides meaningful and relevant feedback for users for them to understand that their content is loading.<\/p>\n

      Principle #3: Consistency matters<\/h2>\n

      When I refer to consistency, I\u2019m talking about consistency in the placement of interface elements or the language throughout the product. Once your users start learning how to use a product, they shouldn\u2019t have to relearn it. Let\u2019s take a look at an example of bad consistency.<\/p>\n

      \"\"<\/a>

      Xfinity Home\u00a0Page<\/p><\/div>\n

      <\/p>\n

      \"\"<\/a>

      Xfinity TV\u00a0Page<\/p><\/div>\n

      <\/p>\n

      \"\"<\/a>

      Xfinity Personal Page<\/p><\/div>\n

      <\/p>\n

      The above example might look like 3 websites from 3 different companies, but it\u2019s actually not. What might make one think that? Well, the navigation bars for each page uses a different set of colors, layout and font styles. As a user, this might be confusing and disorienting, and users might forget that these are all under one single website.<\/p>\n

      As a designer, how can you maintain consistency throughout your app? You can design your app using a consistent grid system<\/a>, such as the common 8-point grid system found in mobile apps and icon design. You can also maintain a consistent color scheme and navigational elements across screens. These elements can all be rooted in a style-guide:<\/p>\n

      \"\"<\/a>

      Source: https:\/\/dribbble.com\/shots\/1817828-Style-Guide<\/a><\/p><\/div>\n

      <\/p>\n

      The point is: good consistency and structure will make your users feel at home.<\/strong><\/p>\n

      Principle #4: When in doubt, use established design patterns<\/h2>\n

      Don\u2019t get me wrong here \u2014 innovation is awesome and encouraged, but it shouldn\u2019t have to be at the expense of the user experience. There\u2019s no need to reinvent the wheel if the wheel is doing a great job at doing its job. For example, if you\u2019re ever unsure if an icon accurately or intuitively represents a word, just use the word in its place. Or adhere to common color patterns<\/a>, such as a shade of red to warn\/alert a user, or green to mark something complete.<\/p>\n

      Why use established design patterns? Well, for one, many of these established design principles are grounded in human perception. Let\u2019s take a F-Shaped reading pattern or eye scanning pattern when it comes to reading blocks of content.<\/p>\n

      \"The<\/a>

      The F-Shaped reading\u00a0pattern<\/p><\/div>\n

      This is a heat map generated by data collected from an eye-tracking experiment. The red areas represent the most viewed sections, while the blue are the least. As you can see, the heat map generated somewhat resembles the letter F. But what does this mean for designers?<\/p>\n

      It means you should put the most important content at the top left corner.<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      For example, you\u2019ll typically find a logo in the top left corner. This allows companies to strengthen their brand identities. In the top right corner, you might typically find the pages for navigation, or perhaps a search bar. This allows users to navigate different pages with ease without searching throughout the page for the navigational elements. Here are two examples that adhere to this design pattern:<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      As you go further and further down the page, the user\u2019s attention might wither. Therefore, put the most important content towards the top, and user bold headlines that will make your content easily scannable.<\/p>\n

      Principle #5: Use visual hierarchy<\/h2>\n

      What is visual hierarchy? Well, it\u2019s the arrangement of elements in a way that implies relative importance. it\u2019s the designer\u2019s attempt to guide the order in which the eyes perceive information presented.<\/p>\n

      \"visual<\/a>

      Source: https:\/\/dribbble.com\/shots\/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary<\/a><\/p><\/div>\n

      <\/p>\n

      The way we perceive information is affected by several factors that contribute to how <\/em>we rank the hierarchy of the content within the layout. Let\u2019s jump into some hierarchy basics:<\/p>\n

      I. Typography<\/h2>\n

      What makes good typography? The two primary factors are legibility <\/strong>and readability<\/strong>.<\/p>\n

      Legibility is the innate qualities of a typeface that makes each individual letterform distinguishable from one another. This is totally dependent on the typeface, so there\u2019s nothing that you can do to make a typeface more legible, so pick appropriately.<\/p>\n

      Readability is determined by how you manipulate a particular typeface to make it easier to comprehend.<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      Notice how the top typeface is harder to read than the bottom? If not\u2026<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      What about now?<\/p>\n

      Another factor in determining how easy something is to read is the line length<\/strong>. If the line is too short, and the reader jumps from line to line constantly, it makes it extremely difficult for the reader to absorb information. The same goes for if the line length is too long?\u2014?the eyes get tired quickly.<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      Also, never center large blocks of copy. It\u2019s much easier for us to read a block of text that is left aligned because the eye knows exactly where the next line begins<\/strong>.<\/p>\n

      \"\"<\/a><\/p>\n

      <\/p>\n

      II. White space (AKA Negative\u00a0Space)<\/h2>\n

      Has anyone looked at a menu \/ a website \/ an interface and thought, \u201cThis looks and feels great, but I\u2019m not sure why?\u201d Well now you do. The answer is white space. White space helps with readability and comprehension immensely. A study (Lin, 2004), found that good use of white space between paragraphs and in the left and right margin increases comprehension by almost 20%<\/strong>. Readers find it easier to focus on and process generously spaced content.<\/p>\n

      \"\"<\/a>

      Positive space = Dog. Negative Space =\u00a0Cat<\/p><\/div>\n

      <\/p>\n

      A lot of people believe white space depends on \u201ctaste\u201d. I think it\u2019s more objective than that. We can use white space intentionally to create a strong hierarchy. Let\u2019s take a look at Helen Tran<\/a>\u2019s site and how she uses white space intentionally:<\/p>\n

      \"Beautiful<\/a>

      Source: https:\/\/dribbble.com\/shots\/2047524-V5-0-Website-Redesign<\/a><\/p><\/div>\n

      Beautiful portfolio! Now let\u2019s take a closer look:<\/p>\n

      \"Beautiful<\/a><\/p>\n

      <\/p>\n

      Notice how there are 4 clear blocks of content. Let\u2019s break it down either further:<\/p>\n

      <\/a><\/p>\n

      <\/p>\n

      Helen uses a combination of line height, font size, color, and white space to separate content within each block itself. This allows for ease for users to naturally navigate the sections of these blocks of content.<\/p>\n

      III. Color<\/h2>\n

      Color theory is really, really complex. My goal isn\u2019t to explain the entirety of color theory, but to provide you with a few broad concepts that you might be able to leverage in your UI designs<\/strong> immediately.<\/p>\n

      <\/a><\/p>\n

      <\/p>\n

      If you stare at the above picture, you\u2019ll notice that the blue square on the left feels farther away, while the red square on the right feels closer. Warm colors come towards you, while cool colors fade into the background. Let\u2019s take a look at this in a UI example:<\/p>\n

      \"UI<\/a>

      Source: Dribbble<\/p><\/div>\n

      In the design above, we can see how the designer is using a warm red to bring the call-to-action (Update Now) forward, while using a cooler blue to recede the navigation farther into the background. The same happens in the illustration on the left. The red lightning icon immediately stands out among the rest of the interface.<\/p>\n

      You can also use colors to group similar interface components together:<\/p>\n

      \"design<\/a>

      Source: Dribbble<\/p><\/div>\n

      <\/p>\n

      <\/p>\n

      Lastly, less is more. The more colors there are, the less impact each individual color will have<\/strong>. A great example is Instagram\u2019s recent redesign:<\/p>\n

      \"Instagram\u2019s<\/a><\/p>\n

      <\/p>\n

      The reduction of color not only makes the photos stand out more, but it increases the effectiveness of the notifications as well because they aren\u2019t competing with the colors in the top and bottom navigation bars anymore.<\/p>\n

      Further Resources:<\/h2>\n
      uxdesign.cc \u2013 User Experience Design<\/span>User Experience, Usability, Product Design. By @fabriciot and @caioab. Follow the UX Bear<\/span><\/span><\/a><\/section>\n
      Color in UI Design: A (Practical) Framework<\/span>Being pretty self-taught as far as UI design goes, I\u2019ve always wondered why so many articles and books talk about color\u2026<\/span><\/span><\/a><\/section>\n
      UI Design: Famous Principles<\/span>In this article, trying to collect the famous principles in design & how it used in UI design, principles will help you\u2026<\/span><\/span><\/a><\/section>\n

      This article was originally published on Jeff's Medium page<\/a>.<\/em><\/p>\n

      Further reading:<\/h3>\n