5.1.1: Design Foundations – A Guide to Visual Hierarchy (with Infographic)

Question 1

What is the aesthetic-usability effect?

Answer 1

It means that the UI meets the proper design principles to help the user fulfill their needs
https://www.nngroup.com/articles/aesthetic-usability-effect/

Question 2

Typographic Hierarchy

Answer 2

https://www.fonts.com/content/learning/fyti/typographic-tips/typographic-hierarchy

Question 3

Top UX Designers

Answer 3

https://www.toptal.com/designers/ux

Question 4

Gestalt principles of design

most basic rules of visual hierarchy

Answer 4

https: //www.toptal.com/designers/ui/gestalt-principles-of-design
https: //www.toptal.com/designers/visual/infographic-gestalt-principles-of-design

Question 5

Why is Visual Hierarchy Important?

Answer 5

Visual Hierarchy helps the user navigate through the UI in an efficient and aesthetically pleasing manner. This experience is important in ensuring that the users complete their intended journey.

Question 6

Boost Your UX with Clear Visual Hierarchy

… visual hierarchy

Answer 6

https://www.toptal.com/designers/ux/visual-hierarchy

Question 7

What is information comprehension?

Answer 7

It is the measurement of how efficient a user is able to understand and consume the information in a way that the company intended

Question 8

Meaningful Design and the Art of Delightful UX

Answer 8

https://www.toptal.com/designers/ux/delight-meaningful-ux-design

Question 9

Guide to Visual Hierarchy. Name 17 of them in the article

Answer 9

Size and Scale, Color and Contrast, Alignment, White Space, Negative Space, Symmetry and Asymmetry,

Question 10

1. Size and Scale

Answer 10

Refers to making the focal elements of the UI the biggest to direct users there first

Question 11

2. Color and Contrast

Answer 11

Using a bright color in a dark background to make a specific element stand out from the rest

Question 12

3. Typographic Hierarchy

Answer 12

The header would be the largest, followed by the sub-heading, and the paragraph text in smallest; this is to give the user a visual flow of how they should consume the information

Question 13

4. Spacing and Proximity

Answer 13

A lot of space around the object can give a more dramatic effect. Proximity helps group together certain elements that relate to each other to prevent confusion when users read through the information

Question 14

5. Negative Space

Answer 14

The use of background to enhance the focus on the main subject

Question 15

6. Alignment

Answer 15

Worries about how text are organized to make it easier for the user to read

Question 16

7. Rule of Odds

Answer 16

It is aesthetically balanced when certain elements show an odd number of times

Question 17

8. Repetition

Answer 17

Repeating colors, layouts, etc. helps the user adapt to the usage of the UI and be able to intuitively navigate based on the patterns they’ve seen before

Question 18

9. Leading Lines

Answer 18

Help direct the user to a flow when consuming the information in front of them

Question 19

10. Rule of Thirds

Answer 19

Refers to the UI being split into thirds horizontally and vertically with 4 focal points to keep an aesthetic balance

Question 20

11. Golden Ratio

Answer 20

Gives an aesthetically pleasing effect on the user by seeing a balance using the ratio

Question 21

12. Perspective

Answer 21

Gives a sense depth to the UI which can help with user flow, organizing information, etc.

Question 22

13. Focal Point

Answer 22

The main subjects, objects, etc. that the user will gravitate to first to judge whether it’s worth consuming the rest of the content and understand what type of information they’re getting themselves into

Question 23

14. Balance

Answer 23

Maintaining a sense of harmony between the elements to give the user a delightful journey when navigating through the UI

Question 24

15. Randomness

Answer 24

Used properly, it can create contrast to direct the user to a specific element. It can also give a tasteful detour from what the user is used to seeing.

Question 25

16. Texture

Answer 25

Allows buttons, images, etc. to stand out from the rest. This commonly used to help the user transition to the proper page

Question 26

17. Visual Triangle

Question 27

5.1.2: 11 Visual Hierarchy Design Principles - Learn How to Improve and Create Beautiful Graphic Designs VIDEO

Answer 27

https://www.springboard.com/workshops/ui-ux-design-career-track/learn#/curriculum/32223