When a designer begins creating a visual solution, the first thing that has to be addressed is the order of operations. Namely, where does the designer want a user to begin their experience and where do they want it to end. Building a successful pathway for the user will govern each decision made along the way.
Visual design differs from other types of design, in that the user can use their eyes to scan the immediate surroundings. This adds a multitude of distractions that are available to the user, and making the job of the designer significantly more complicated.
Regardless of the specific design tool used (type, image, color, etc.), a skillful designer will capture the attention of a user by establishing Heirarchy primarily through the use of size, space, or arrangement.
Review the resources provided below before attempting the exercises that follow.
Resources for review
| Article/Video | Source/Author |
|---|---|
| Visual Principles | New Pragmatic |
| Designer’s Guide to Visual Hierarchy | Zeven Design |
| 9 Effective Tips on Visual Hierarchy | UX Planet |
Exercise
Length: Around an hour to complete
This exercise has two components. The Figma file provided contains all the material you will need to complete the assignment. Simply duplicate the file to create a copy to work from. If this is your first time using Figma, this would be an excellent time to take a moment to work through our Intro to Figma video tutorial series.
Part one: This task is focused on establishing hierarchy via size. Using the images provided in the Figma file, create a design that successfully establishes hierarchy each frame provided. Use the frame name to determine which images to display in your design.
Part two: This task is focused on using the application of space to establish hierarchy. Using the content provided, create a focal point that draws attention to the area designated.
Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.
///
Up next Using Grids