Summary
Highlights
Grouping involves placing related elements together rather than spacing them evenly, making information easier to understand. This is commonly seen in website navigation, where all navigation links are grouped at the top. The Dribbble website is used as an example, showcasing how navigation, hero sections, and content grids are clearly grouped. This principle is crucial for organizing information, especially when dealing with a lot of client content, and is also effective in poster design, where headlines, artist names, and practical information are grouped for clarity.
Scale refers to using different sizes for elements within a composition to create visual interest. Instead of three equally sized elements, a more compelling layout uses large, medium, and small elements. This is demonstrated with gig posters by DKNG, where illustrations are large, artist names medium, and information small. Employing large contrasts in size, such as huge headlines, small captions, or full-bleed images, adds drama and aesthetic appeal, as shown in fashion advertising examples like a Hermès ad and Apple's iPhone 13 Pro website, which uses macro-sized phone images and varied type sizes to create dynamic layouts.
Sequence is about the order and flow of elements, guiding the viewer through a design like a video editor transitions between shots. In web design, this means considering how each panel appears as a user scrolls, ensuring it works both in isolation and as part of a larger narrative. The Apple iPhone 13 Pro website illustrates this with its scrolling experience, where grouping and scale are used in sequence to tell the product's story. The 'Stand With Ukraine' website is another example, using moving images, varied text sizes, and a large, bleeding date in the background to create a storytelling effect that evolves as the user scrolls, emphasizing a sense of unfolding events.
The video encourages viewers to apply these principles of grouping, scale, and sequence in their own designs and to observe how others implement them. By consciously identifying these principles in action, designers can solidify their understanding and improve their compositions. The next video in the series will cover the final three principles of layout.