Week 1: Starting to create mockups

Most product interfaces have already two sizes of text:

1) A smaller size text that's used for longer text passages 2) A larger size that's used for titles and headings

Two common ways to create typographic hierarchy are by..

1) Changing the typeface's size and weight 2) ...

Set and save color styles in Figma

1) in the layers panel, on the left side of the Figma screen, select the shape that has the color you want to save, and reuse. 2) in the design panel, on the right side of the Figma screen, navigate to the fill header. Click the style icon, which is represented by four dots shaped like a square. 3) a menu will appear called libraries. Click the plus(+) icon in the top-right corner. 4) type in a name for the style. 5) click create style.

3 best practices when it comes to using icons in designs

1. Make icons universal.Consider whether an icon is culturally or geographically specific before adding it to your designs. Will that icon make sense to a global audience, or only for users in the region where you live? Where will the users of the product you're designing be located? Your goal should be to include icons that everyone recognizes and understands, regardless of their background. 2. Consider including a text label. Usually, text labels are included in a small font directly below an icon, including a text label ensures that users who use a screen, reader, or a new adapter of technology, are able to identify the icon. In addition, a text label can clearly describe what the icon means. 3. Keep Branding clear. Everything, including your icons, should reflect the imagery you created for your brand that means that everything across your app needs to have the same color scheme, the same font, and the same style.

3 steps to find the perfect typography for your design

1. Selecting a type classification 2. Picking a typeface 3. Choosing a font

For the dog walker app we could use the 60-10-10 rule by..

60% is white(backgrounds, lines, and text) 30% is gray 10% is orange(used to emphasize or highlight important info)

hi-fidelity (hi-fi)

A design that closely matches the look and feel of the final product and is more refined or polished overall.

Low fidelity(lo-fi)

A design that has a lower amount of complexity and is less refined or polished

Pages

A file also contained pages, where you design your screens

Canvas

A file contains the canvas, where you'll create layers and objects for your design.

Type classification

A general system to describe styles of type, like serif and sans serif

Lines

A line in a straight figure connecting 2 points in a space. In the world of UX design, lines can be used to differentiate sections of an app, connect two related ideas, or add emphasis to certain parts of the design. For example, you may choose to place a line below header text to draw additional emphasis to titles.

The color red can communicate

A lot of attention

Typographic Hierarchy

A method of ordering typefaces and fonts in a layout to create divisions that show users where to focus and how to find information.

Mock-up

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

Sans Serif Font

A style of text that lacks hooks (or feet) on the ends of the letters. Most desirable for projection since the text is easier to read

Iconography

A system of graphic images or symbols that are associated with a subject or idea.

Accessibility for visual elements

As you design mock-ups, think about how users with various accessibility needs might react to the elements you include. Ex: do headers stand out from the information placed below, by using lines or another visual design element? And, do all your images have alt text?

What is one way you can you design with low contrast sensitivity in mind?

By using the luminosity contrast ratio, which is a measurement of the contrast between the background, and the text color used on top of that background. As a standard, the WCAG recommends that the luminosity contrast ratio of images and text me to contrast ratio of at least 4.5: 1.

User Interface (UI)

Concerned with how digital product's interface looks and functions.

Visual appeal for visual elements

Consider how the content of your designs will be experienced by users in the real world. Are your lines connecting or dividing the right design elements? Are any shapes accidentally overlapping? Did your image upload correctly to Figma? You'll want to review your work with a heightened attention to detail, specifically looking for elements of your designs that might not be the most visually appealing

Constraints in Figma

Constraints limit where an element can be placed within a frame. This is helpful when you need to maintain a specific distance from the edge of the canvas and for designing on different devices.

3) WCAG: Use patterns and texture to create contrast

Contrast is the difference between two or more elements in a design. Contrast is often created through black and white imagery, or the large size of a header text versus the smaller size of body text. Imagine you're creating a bar graph about user research using a clients brand colors to create contrast without relying on color alone, you can add subtle stripes to one column and dots to another. With contrasting patterns, in addition to color, the bars in the graph will be clearly differentiated for all users.

1) WCAG: Color blindness

Difficulty distinguishing between certain colors. There are 3 common categories of blindness: red-green, blue-yellow, and total color blindness. Use color blindness simulators to test colors!

File

Each document in figma

2) WCAG:Use icons in design, in addition to color

Ex: if you are designing a form and want to indicate that a field is missing text or formatted incorrectly, do not solely rely on turning incorrect text to the color red. You should also use a red exclamation point icon. the exclamation point will draw users attention to the form field with the color and the icon, so your designs will be clearer to more users.

Brand guidelines do not have rules on typography and other visual design elements that have already been researched,tested, and approved by the company's design team.

False

It is NOT ok to change the design or element of a wireframe when designing your mock-ups. True or False?

False. It's ok to change or rearrange elements in your wireframes.

Material.io

Google's material design page, which has a list of free icons

4) WCAG: Avoud color combinations that could be hard to distinguish

Here are some color combinations that are often difficult for users who are color blind to differentiate between: • red and green • green and brown • blue and purple • green and blue • light green, and yellow • blue and gray • green and gray • green, and black Keep in mind: if you use green in your designs, that doesn't mean you need to avoid read, brown, blue, and gray all together. But because these colors can be hard to distinguish, it's better to not put those colors directly next to each other, especially for critical information. In addition, you should create other forms of contrast, like, adding return labels to differentiate important facts.

High contrast

High contrast has a ratio of 16:1. These designs are easy to read, and use Boulder colors for text that stand out on the background.

Visual design

How a product or technology appears to users

Fidelity

How closely a design matches the look and feel of the final product

Readability

How easy it is for users to read whole words and passages in a product.

Legibility

How easy it is to distinguish one letter from another within a particular typeface or font.

What is the third foundational element?

Iconography: refers to the images or symbols associated with a subject or idea.(power icon on your computer)

Why is typography so important in UX design?

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

Image

In UX design, images are used to tell stories, make an impact without words, and add visual emphasis. Images can be static, like pictures and illustrations, or moving, like animations and GIFS. Either way, you should include images that are relevant to the story you want to tell with your design and that are relevant to the users you're designing for. Ex: if your all for home repair services is addressing a specific problem that many users face, like a clogged gutter, it might be effective to include an image of a clogged gutter in your designs to drive emotional impact.

What design do UX designers use when the want to get ideas out quickly and leave room for exploration.

Lo-Fi designs

Low contrast

Low contrast has a ratio of 2: 1. As you can tell, the background color and text are difficult to read.

Placeholder text is often used in..

Low-fidelity designs, like wireframes.

Maximum contrast

Maximum contrast has a ratio of 21:1. For the most contrast in your designs like this, use black and white only.

Minimum contrast

Minimum contrast had a ratio of 4.5:1. These background and text combinations are easier to read, even though they use light colors.

5) WCAG: 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. Many people experience, low contrast sensitivity on a daily basis. For example, people who have high visual acuity experience, low contrast sensitivity when it's dark in a digital screen, is too bright, or when it's bright, and a digital screen is too dark. In addition, as peoples eyes get older, their contrast sensitivity, naturally weakens.

The color blue can communicate

Serenity, peace, feelings of calmness.

Example of Sans serif typefaces

Serial, Helvetica, Verdana

Shape

Shape is defined as line around a self-contained space that includes length and width. Shapes have a place in almost every app design, whether you use rectangles, squares, circles, or another shape. Ex: to view more information within an app, there is often a circle with a plus sign(+) inside, which indicates that users can click the shape to expand the menu and learn more. Alternatively, to close out a window in an app, app designs often use a circle with a x inside.

What are some other foundational elements?

Size, shape, and direction

Before designing you should start with..

Sketches. Then you bring them into your design tool.

Light sensitivity

Some users are just as sensitive to bright light and bright colors as they are to low contrast. Light sensitivity is the inability to tolerate light uses who have light sensitivity might experience your designs with a dim screen. Or they might use the operating system of their device to choose between light mode, dark mode, and high contrast mode, as shown in the image is below. It's best to allow users to make the setting choices, so try designing your own light and dark modes of your own projects.

Typeface

The overall style of a letter. Typefaces are distinguished by their stroke weight, shape, type of serif, and line lengths.

Color Palette

The selection of colors that are used throughout a single project. A predefined color palette helps with both design efficiency and visual consistency: the designer can refer to the pallet to quickly identify the hex codes. They need for adding color to new design elements, and they can ensure their consistently using the same colors across parallel elements, like buttons and headers.

Size

The size of an element is in relation to other elements and factors that affect the design. Size is an especially important consideration when designing an app for a mobile phone screen size, which is pretty small. The size of elements can determine how users experience your design, for or for worse. Ex: a button that's too small can frustrate users or cause them to tap the wrong part of your design.

Font

The size, thickness, and emphasis of letters

In a mock-up there is..

There are actual photos, the use of color, use of shadows, different fonts, and stylized buttons:

Why is iconography important to a company's brand?

They help to identify the company easily

Examples of serif typefaces

Times New Roman, Georgia, Cambria

If you are designing for a specific company you should ask for their brand guidelines before getting started. True or False?

True

What are the 3 foundational events of visual design?

Typography, color, and iconography

What is the first foundational element?

Typography: refers to the use of texts and icons

Brand guidelines

Visual style choices use to communicate a brand's identity, values, and mission

Determine where to include icons

When determining where to include icons, designers typically focus on the products user flow and identify places were icons, my guide and support users. In your own mock ups, you might begin by identifying 2-3 places to include icons. Depending on the needs of your specific design, this may include: • home menu icons • contact icons • settings icons

When do UX designers use high-fidelity designs?

When they want to test a design that looks like a real product and get more specific data from users.

Serif Font

a style of text that contains hooks (or feet) on the ends of the letters. Use sparingly if at all for projection

The designers use color to create both visual variety in high visual and high visual contrast which is key to..

accessibility

Each page has its own..

canvas. This canvas is gray be default, where you can add, remove and update designs.

What is the second foundational element?

color: Think about the messages that certain colors communicate, how people understand color, and how colors mix, match or contrast with one another.

High Fidelity Prototypes enable..

designers, stakeholders, users, and others to simulate the full experience of a final product, including its visual and interactive elements.

Creating visual cues can help..

distinguish some words and phrases as more important than others

Each typeface is known by a..

family name

Elements are often arranged into layouts using methods like..

grids, containment, and space

A headline in a magazine or a title in a book are examples of..

header styles. They both have larger and thickets letters than the words to follow.

To help readers better navigate the page, we need to create a..

hierarchy

Real copy is often used in..

high-fidelity design

Icons

images or symbols that stand for specific actions or tools in an app or website. Using icons in your designs can quickly communicate concepts, instead of explaining a concept's meaning with words

As you build your design skills and learn more about color, consider the kinds of blank it's sends to the users

messages

A bold type face gives..

more emphasis or important to the text.

A UX designer makes text hold on the payment page to ensure that..

the user is sure they are paying correctly

UX designers use easy-to-read typography for digital platforms, because..

they want to make sure all users, including those with lower vision can still read products.

Elements like typography, color, and iconography are the building blocks for..

visual deisgn

Mock-ups give UX designers an indication of..

what the product will look like visually.

The importance of color in UX design

• Add emphasis: it can draw users to a focal point in your designs. Usually it's an action you want users to take(sign up link) • Communicate Branding: Color helps define a product's visual identity, making it stand out against competitors. The colors are consistent through various products making it easy to identify certain brands/companies • Impact the accessibility of designs: it's important to check the contrast between colors you use. You don't want the text hard to read. Follow WCAG(web content Accessibility guidelines)on color contrast options. • Test your color options in various devices and different environments. Colors can look different on different devices or during different times during the day.

Why is color an important factor in designing your product?

• Color helps the user effectively navigate the design. • Color can convey emotions for the user • Color draws the attention of the user

Benefits to including images

• Communicate a message without using words • Create an emotional response from users(in order to get this response the photos need to fit the UI) • set a product apart from the competition

Typography can help add:

• Hierarchy to your designs • Make text easy to read • and add visual style

60-30-10 rule

• One neutral color makes up 60% of the color palette (dominant color) • A second complementary color makes up 30% of the color palette (secondary color) • A third accent color makes up 10% of the palette to add emphasis (accent color)

Luanne is American, but she's designing a food delivery mobile app for a client that is based in Peru. Luanne uses green as an accent color to represent prosperity. Her client criticizes the designs color scheme because the color green has negative connotations in Peru. What could Luanne have done differently?

• Perform regional research on color • contact the client prior to choosing colors • Conduct competitive research into other apps used by the target market.

Disadvantages of using placeholder text for designers

• Placeholder text might confused stakeholders or distract from the design. • If your design is sized and adjusted to fit placeholder text, changing that text in later versions of the design can change the overall layout

Benefits of Pages in Figma

• They are a great way to organize designs in Figma. • Each page has its own canvas, where you can create and store design assets or different versions of the same assets(design asserts include, wireframes, mock-ups and the individual elements that make up wireframes and mock-ups)

What should you keep in mind when designing mock-ups?

• Think about visual elements you want to use on each screen of your design such as typography, color, and iconography.

Alignment options in Figma

• Tidy Up: Distribute the selected elements evenly in all directions • Distribute vertical spacing: Space selected elements evenly across the height of the frame • Distribute horizontal spacing: Space selected elements evenly across the width of the frame

Disadvantages of real copies

• Using a real copy early in the design process, doesn't save you from copy edits later. • Humans are drawn to words. A real copy in a prototype can distract stakeholders from commenting on design choices. They will focus more on the words you chose, rather than the visual design and functionality of a prototype, which is more important.

Advantages of using a real copy

• Using a real copy from the start of the design process can lead to fewer adjustments to your design later. Ex: you won't have go resize design elements to fit the real copy. • Thinking about real copy early in design process provides more time for feedback on copy-related design choices. Your design and copy work together to form one user experience. Creating design elements and copy together, from the beginning can make them more cohesive.

placeholder text (lorem ipsum)

• Using this text allows you to share designs with stakeholders early, in the beginning stages of development, before your designs are finished. This is very important when you need feedback or gather alignment on the direction of a product or design, before too much time is spent developing the details • Placeholder text, is great to use during the ideation phase and when creating your first wireframes, when you want to focus on the layout of the designs, not the copy • Using placeholder text provides you with more time to develop a copy. If you need to develop your own copy, coming up with words to include in designs take time. Using placeholder text allows you to continue design while questions about the copy are being sorted.

When it comes to icons, here are some useful reflection questions you can ask yourself:

• Will these icons guide and support users by saving space, catching attention, and making it easier to transition to another page or location? • are there any alt-text labels to describe what the icons mean and make them accessible for screen readers. • have I ensured The icons are not too specific to a particular culture or geographic location • are the icons and labels, consistent with the color, palette and typography I have established in my design. • is that iconography, consistent with relevant branding and style guidelines?

What essential guiding questions should you think about when bringing icons into a design?

• Will this icon be inclusive an accessible for users? Think about whether an icon will communicate what you wanted to communicate to all users. For example, if it's meaning, as you need to specific culture, or if it has multiple meanings across different locations, it may not be inclusive or accessible. • have I added an alt-text label to describe what the icon means? Screen readers cannot read icons, but they will read the alt-text labels attached to those icons. alt-text labels are essential for making icons accessible. • have a chosen iconography that represents the companies brand and miss any relevant branding guidelines? Like all official elements of a design, icons can convey a brand identity, mission, values.

Benefits of good Typography in UX design

• adds hierarchy • Makes text easy to read • matches brand guidelines

The way you arrange elements on a screen can make your design:

• aesthetically pleasing • help users interact with your product • make your designs more accessible

Images help

• enhance your designs • create a connection to the product for users • establish a stronger brand presence

When icons are made effectively, they..

• limit wasted tech space • catch the user's attention • are an easy way to transition to another page or location • icons support global audiences