Woohoo! We are officially halfway done—and even more. Now we are at a point of no return and can see the finish line already. Without wasting any time let's start with the Course 5.

This course focuses on visual design, which is how a product or technology appears to users. We will be getting into the field of user interface or UI design as well. Unlike course 4, this will be heavily hands-on and involve the use of Figma again.

Week 1: Starting to Create Mockups

Mockups

1. A mockup is a static, high-fidelity design that is used as a representation of a final product.

2. Low-fidelity prototypes usually only feature empty spaces, or placeholders, for content. Mockups have actual words, images, and icons that will appear in your design.

3. We want to use various UI principles related to typography, color theory, and iconography to make our mockups visually pleasing.

4. In addition, ways to lay out elements on the screen, like grids, containment, and space also play an equally important role to beautify the mockups.

Foundational Elements of UI

Typography

1. Three steps to find the perfect typography for your design

   • Select a type classification

   • Pick a typeface

   • Choose a font

2. Type Classification

   • Type classification is a general system to describe styles of type. Each font family has a certain "personality" to them. Some are fun and playful, some are strict and blunt while others are academic or fancy.

   • They can be distributed into 5 categories: Serif, Sans serif, Display, Handwriting, and Monospace.

     1. Serif: These are the oldest of the font families and have their roots in printing typography. Hence they used to be harder to read on digital screens, but now with the widescale availability of high-resolution screens that is not the case anymore.

     2. Sans serif: These are the most versatile and can fit a design with a wide range of personalities. These are the safest bet out of all the styles.

     3. Display: They should only be used for large headings and never for paragraphs.

     4. Handwriting: As the name suggests, these font styles look like they are handwritten and should be used with caution as well as they carry a heavy personality.

     5. Monospace: They are generally used to display code.

3. Typeface

   • A typeface is the overall style of a letter. Typefaces are distinguished by their stroke weight, shape, type of serif, and line lengths.

   • Each typeface is known by a family name.

   • Examples: Arial, Verdana, Times new roman, Roboto, etc.

4. Font

   • Font is the size, thickness, and emphasis of letters.

   • So, for the Arial typeface, the font family contains the font files for Arial (regular), Arial Narrow, Arial Black, Arial Bold, Arial Italic, and Arial Bold Italic

5. Typographic hierarchy

   • If all the text on a page is the same size and visual style, it's hard for users to quickly understand the page's parts and find the specific information they're looking for.

   • To help readers better navigate the page, we need to create a hierarchy. A typographic hierarchy is a method of ordering typefaces and fonts in a layout to create divisions that show users where to focus and how to find information.

   • This can be achieved by varying the typeface's size and weight.

   • Most product interfaces have at least two sizes for text: a smaller size that's used for longer text passages, and a larger size that's used for titles and headings.

   • Similarly higher weight implies a text of greater importance.

Color

1. A change in color can draw the attention of users to a focal point in your design.

   That focal point is often an important action you want users to take, like a sign-up link or a purchase button.

2. 60-30-10 Rule

   • One neutral color makes up 60 percent of the color palette in your design.

   • A second complementary color makes up 30 percent of the palette.

   • A third accent color makes up 10 percent of the palette to add emphasis.

3. Colors play an important role in a company's brand guidelines, just like typography. Color helps define a product's visual identity, making it stand out among competitors.

4. Color choice can impact the accessibility of designs. It's important to check

   the contrast between the colors you choose. There are various online tools to help choose different color contrast and color palettes.

5. We should follow Web Content Accessibility Guidelines, or WCAG, on color contrast standards to make sure your designs are accessible.

   • Color blindness: There are three common categories of color blindness: red-green, blue-yellow, and total color blindness. There are a few ways to keep color accessibility in mind as you design:

     1. Use icons in designs in addition to color to show the state or purpose of some area.

     2. Use patterns and texture to create contrast instead of solely relying on color variations.

     3. Avoid color combinations that could be hard to distinguish such as: Green & Red, Light green & Yellow, Blue & purple, etc.

   • Low contrast sensitivity: People who have low contrast sensitivity experience objects as dim or unclear, which makes those objects more difficult for a person to identify.

     1. One way that you can design with low contrast sensitivity in mind is to use the luminosity contrast ratio, which is a measurement of the contrast between the background and the text color used on top of that background.

     2. As a standard, the WCAG recommends that the luminosity contrast ratio of images and text meets a contrast ratio of at least 4.5 : 1.

   • Light sensitivity: It is the inability to tolerate light.

     1. User should be provided the option to switch between light mode, dark mode and high-contrast mode.

Iconography

1. Iconography is a system of graphic images or symbols that are associated with a subject or an idea.

2. When done correctly, icons limit wasted tech space, catch the user's attention and are an easy way to transition to another page or location.

3. Since icons can't be read by text readers, consider adding a level along with each icon.

Typography, Color and Iconography help establish the brand image, identity and value as well. For example, most of Google products use Google Sans as the font family and the color and icon schema usually have a combination of red, blue, yellow and green color in equal proportions.

Additional Design Considerations

1. Hyperlinked Text: Hyperlinks allow people to easily navigate digital products, and a standard stylization makes links instantly recognizable when the text is blue and underlined. Things to keep in mind when added links to your design:

   • Meet user expectations. If text is underlined and blue, it should always be a link! Don't confuse your users by ignoring common conventions.

   • Image links. Many users now expect the logo on a company’s website to link to the homepage. Changing mouse arrow to pointer is a good way to illustrate a link.

   • Use descriptive links. Instead of hyperlinking the word "here", use a descriptive phrase.

2. Buttons: Things to keep in mind when adding buttons to your design:

   • Make buttons look like buttons. Buttons should be easily recognizable as buttons through their shape, size, and color. Most buttons are rectangles or circles, so a star- or heart-shaped button could confuse users.

   • Include negative space. UX designers often add padding to buttons, which is extra negative space that keeps the screen from becoming too cluttered, and makes it less likely to accidently tap a neighbouring button.

3. Input: Inputs are text fields where users enter information. It should be clear what information belongs in an input. It should also be big enough to fit the information to be added.

   • Use placeholders. Placeholders act as a visual cue to tell the users what is the expect format and type of input.

   • Group inputs into subcategories. For example, you could make a "Personal Information" category that includes inputs for the user’s first name, last name, date of birth, gender, and so on. Similarly, a "Contact Information'' category could include inputs for an email address, phone number, street address, city, and so on.

Page Layout

Layouts usually refer to the specific placement of text, style, icons, and images. The goal of layouts is to present information in a logical way, making the important elements stand out.

Grids

1. Basic Grids. Intersecting lines divide pages into small squares that allow you to

   easily layout elements in a design.

2. Layout Grids. More commonly used. A layout grid is a series of columns and

   alleys that allow you to organize elements in a design.

Containment

1. Dividers. Dividers are single lines that separate sections of content in a design. Dividers can be simple yet effective tools for quickly breaking up content that doesn’t belong together.

2. Borders. Borders are continuous lines that form shapes, like rectangles, that break up sections of a page. Borders usually form around a specific design element or important text.

3. Fill. Fill assigns colors to objects in your design. The color you choose will fill in the design element, which makes content stand out on your page.

4. Shadow. Shadows create dimensions, especially when used in combination with borders or fill.

   • Drop shadows come directly off of the element and can go in any direction. Drop shadows are perfect for making buttons feel like they’re coming off of the page.

   • Inner shadows move inward onto the element. Inner shadows are a great way to show that a button is being pressed.

Negative Space

Negative or White space is the gaps between elements in a design. We can manipulate white spaces to create a cleaner design using:

1. Line Spacing. Vertical space between two pieces of text.

2. Padding. Negative space surrounding content, or between the border and the design elements.

3. Margin. Space outside the border of the design.

   

   Negative space draws the attention of the users towards the search bar.

Note: Will be editing this article later on to add more images as examples.