Visual design:

How a technology appears to users?

Mockup:

A high fidelity prototype that represents your final product.

It says to designer how will look visually the final product.

Note:

-to build mockup with elements and layouts

Like: typography, color…

-elements usually into layouts using methods like grade, space …

-when creating mockups think about elements you will use in each page,

-mockups has actual words icons color…

Fidelity:

How design matches the final look of a product

Low- less complexity, refine, polish. It is used to bring ideas out quickly.

High-closely looks as a final product. It is used to test it like a final product and get more specific
feedback from user.

Top (3) Elements of visual design:

1- typography: it is text and font.

It help us to build hierarchy. Make it easy to read add a visual style.

2- color: how people understand color how color mix match contrast with one another

3- iconography: image or symbol associated with idea or a subject.

Note:

Visual is very important but the most important is usability.

Typography:
Use do text and font.

3 steps to find best typography:

1- selecting a type classification.

General system it describes style of type.

Two most popular classes is serif and sans serif

2- picking a type face.

The overall style of a letter.

Stroke, wight, shape, type of serif, line length…

Some of serif type faces: times New Roman, Georgia, Cambria.

Sans serif type faces: Arial, Helvetica, verdant.

Note:

-ux designers prefer sans-serif faces for app ans website because it is more readable on the
screen.

-now serif is also good cause resolution f screen got better.

3- choosing a font.

Size, thickness, emphasis of letters.

Tip:

-Difference between font and typefaces: the collection of all of the characters in one size and
style.

Exa: robots light in 12 pt is a font and roboto bold in 16 pt is also a font.

Typography hierarchy:

A method of ordering typefaces and fonts in a layout to create divisions it helps user

Where to focus and how to find specific information.

-By font user can find specific information. And also understand which point is more important.
We can do this by changing size or weight of text.

Importance of typography:

1- adds hierarchy.

2- make text easy and fast to read.

3- matches brand guidelines. It is vidual style choices used to communicate a brand identity,
values and missions.

Typography displays company identity.

Exa: gogle sans type phase created by Google. Even this is used for Google search. So before
you design an app for Google ask them for their particular font and….

Note:

Those three things make your product for user more usable and more meaningful.

Place holder text benefits:

Lorem ipsume:

1- This is very good to save time without paying attention to details use it instead of real text.

2- it is good in ideation phase when you want to focus just on the layout.

3-it gives you more time to develop copy.

Drawbacks:

1- it can confuse stakeholders.

2- if design is sized and adjusted to fit so it can affect the overall layout.

Note:

-place holder text is more used in low fidelity prototype.

Real copy benefits:

1- no need to resize it if needed.

2- provides more time to stockholders and users… for feedback.

Disadvantages:

1-using real copy doesn't save you from editing the text. You will edit it many many times.

2- in low fidelity if you send it for usability study people will give comments on the text
selection. and we don't need comments in the lo fi usability study on the text selection.

You can also use both of them mix

Copy and place holder.

Note:

Choosing one method against other is depend on your project stakeholders users feedback of
your teammates and ….

Color:
Color can attract thousands moods and behaviors.

Red:

Attract lots of attention.

Blue:

Calmness and peace and trust if dark it means sadness. Blue is most popular color all around the
world.

Orange:

Creative energetic.

Yellow:

Happy, optimistic. For baby and adults. If got dark become gold which is success and rich and
wealthy.

Green:

Nature, wealth, health.

Purple:

Royalty, wealth, and also creativity.

Black:

Luxury, modern and traditional.

Colors with low contrast if mixed:

 Green & red

 Green & brown
 Blue & purple
 Green & blue
 Light green & yellow
 Blue & gray
 Green & gray
 Green & black

The importance of color in UX:

1- add emphasis:

Change in color can change the attention of user to other point.

60-30-10 Rule

Exa: white 60%, Gray 30%,pink/purple 10%.

Accent color (10%) So pink color highlight or emphasis information.

Neutral color (30%) color has supportive role in text, background, lines.

Primary color (60%) mostly background colors are white.

2- Communicate branding:

Visual appearance and voice of a company.

3- Impact the accessibility of design:

-check colors in different devices, cause color differs from one device in other and also pay
attention in day and night.

We have to check the contrast between colors we chose

WACAG we should use this method of contrast.

Note:
-color help effectively navigate the design. And also can draw attention and emotion of users.

Iconography:
A system of graphic images or symbols associated with subject or idea.

Note:

-Icon save wasted space, catch user attention, easy way to transition from one page to other, icon
giving information in both digital and real world, icon support global audience, quick
communication instead of lots of words.

-when you use icon add a text to describe what this icon means because icon can't be read by
screen readers.

-iconography is crucial for a company's brand. Some companies has their specific icons. Like
Google.

-selected icons should be accessible, easy to usederstand, inclusive.

-Make icon universal: use an icon that is popular all around the world like home don't include
specific place icon or an icon that has two different meanings.

-consider a text label: under the icon. So screen reader can read it.

-keep branding clear: font, color, icon should be same to same like each other.

-how to find right place for adding icon you can do this by user flow.

-downloaded icon should be in SVG format to use it.

-to save an icon select it and then click create component at the top like 4 diamonds. And you use
it from local components assets section.

-icons make design more usable and meaningful.

More elements:

We have some more less important elements some of theme:

1- Line: used for depreciate one section from other, make emphasis of it be under a title…,

2- size: it is important especially in app used in phone if it is small it frustrate user.

3- shape: like rectangle, square.. this is also necessary.

4- image: for telling story, make impact by its visual without any word, make emphasis.

It can be static sample picture or like gif..

You should include pic that describe what story you want to present and that is also depends to
user you are designing for.

Note:

Finally pay attention to two things: visual appeal how the contents of your design will be
experienced by users like are line connect or separate right sections… 2 pay special attention to
accessibility.

Benefit of including image:

1-communicate a message without a word.

2-creating emotional response from user.

If you have some tight image user is gonna be impress. If you want to impress user so pay
special attention to UI.

UI:

How a digital product interface looks and function.

3- can set a product a way from competition. When you want to check other websites in
competitive audit also check img…

Brief:

Image can: can enhance design, create connection to the product for user, establish better brand.

Layout:

Ways to arrange elements on a page.

How to place icon, rectangle, line, pic… in page. And how to

Goal: to make important elements stand out.

You can do this also from previous designed pages.

Tip:

-good layout improve user flow and make it easy to navigate.

How to place element correct:

1-basic grades:

Lines divided layout to squares and allow you to arrange elements easily.

1-Layout grid:

Columns and alleys allow you to arrange elements.

Columns are light red and same width.

Alleys are white and same width.

Note:

Which one we should use? that's depend to you.

But designers use layout grade the most.

Reasons to use grade:

1-create clarity and consistency.

2-Quick in the design process.

3-make it easy to collaborate on design.

Every know to place where this element.

4-help you to ensure your design fit within the screen boundaries.

Note :

Auto layout: automatically changing size shrink or grow. Exa shrink a button so if I grow the text
inside button automatically will grow or if I shrink auto….

Containment:

Visual barriers to keep design neat and organized.

We have 4 kind of containment:

Divider, Border, Fill, shadow.

1- divider: are lines that separate sections.

2- Border: continues lines often Form shapes like rectangle.

3- Fill: put color to shapes and borders.

4- Shadow: create dimensions with combination with borders and fills.

White space:

The gap between elements in a design. Also it's called negative space.

Importance of white space:

1- provide emphasis: focusing on an action it should be done.

2- Group items: also known as proximity.

3- Help with readability.

Note: we should satisfy stakeholders that white space make product easy to use and lead them to
better business results.

4-gives a user visual break. No frustration when they read

Brief:

-add emphasis, readability, and clear grouping to design.


 Start by identifying the places where there is not enough negative space.
 Determine places to use negative space to improve the grouping, emphasis, and
readability.
 Implement the changes in one screen first, and then repeat on all other screens.