How To Make a Visual Hierarchy in a Design Visual hierarchy can be created using: 1. Colors and Contrast 2. Scale 3. Grouping (Proximity and Common regions) Color and Contrast 1. MoMA.org The website MoMA.org employs the use of colour to communicate a sense o hierarchy. Specifically, the green links located in the upper right corner of the webpage are visually prominent in comparison to the black links positioned beneath the logo. 2. TheNounProject.com The website TheNounProject.com: The initial focus of attention is directed onto the search field, mostly attributed to its prominent dimensions and the stark contrast between its white colour and the surrounding black background. The user is prompted by the form to commence their search. The gaze is thereafter drawn towards the white icons positioned beneath the search area, thereby offering a preview of potential outcomes. Best practices when using color and contrast: 1. Consider color saturation. 2. Don’t use too many colors. 3. Don’t use too many contrast variations. 4. Do not rely only on color to communicate visual hierarchy. Scale "Would you also agree that the cuisine at restaurant X is better than others?" This question appears to be designed to elicit agreement from respondents regarding the superiority of the cuisine at restaurant X, while potentially limiting the opportunity for alternative perspectives to be expressed. 1. Jersey Dairy Milik The milk carton's typographic treatment effectively establishes a visually compelling hierarchy by employing variations in scale. The observer's attention is instantly captured by the salient features of the product, namely its classification as milk and its fat composition. 2. Hipcamp.com The communication of visual hierarchy is achieved by means of text size, as well as contrast. The initial focus of the observer is directed towards the "Find yourself outside" language, mostly attributed to its prominent visual characteristics such as its substantial size and bold formatting. This paragraph provides a broad overview of the activities that can be undertaken on this website. Best practices when using scale: 1. Use no more than 3 sizes: small, medium, and large 2. Make the most important element biggest. Emphasize the most important aspect of your design by making it the biggest. Grouping: Proximity and Common Regions This enquiry provides respondents with the opportunity to express their personal viewpoints without being guided towards a certain response. 1. Spotify Upon initial observation, the human eye promptly discerns three distinct clusters on the visual display. The deliberate augmentation of distance between groups serves to establish distinct separation and individuality for each grouping. Equally significant is the deliberate reduction of white space between titles and their corresponding information. The reduction in gap between headings and content establishes a hierarchical relationship. 2. Shopify Check Out from Fields The notion of proximity is evident in effective form design. The close proximity of the section headers and the corresponding form fields effectively conveys their association, indicating that they are interconnected. Additionally, there is an augmented amount of spacing between each segment of fields, so facilitating the visual perception of this hierarchical spatial arrangement. It is worth noting the presence of a boundary surrounding the two Express checkout buttons, exemplifying the idea of common region. This boundary effectively isolates the buttons from the checkout form located below. Best practices when using grouping: 1. Let it breathe When the group comprises a large number of elements, it is probable that attention will be distributed among them. One effective strategy to enhance the prominence of the most critical part of your design is to allocate it a greater amount of space. 2. Consider using a container Enhance the visual appearance of the content by using supplementary design elements such as borders or backdrops. The utilization of these supplementary components may result in an excessive number of visual stimuli; hence it is advisable to exercise restraint in their application. The three sizes under consideration are small, medium, and giant.