Week 9 Page 4: Using Shape for Unity, Consistency and Visual Interest
Shapes, such as circles, rectangles, hexagons etc., are particularly useful for containing and organizing information in screen design. When used creatively and repeatedly, they can also create visual interest and strong unity. Here's a quick overview of the practical and more creative uses of shape.
Traditional Shapes: Rectangles and Squares
The most traditional use of shape in screen design is the ever-present box or grid! When dealing with large amounts of content on a screen, one of the designer's best tools is the box. Boxes don't have to be boring, however! Think about color, tint, opacity and image when designing with rectangular and square shapes. Also think about taking the edge off (literally) by using rounded corners. Here are a few examples of boxes in action.
Notice, in the example below, how you can use subtle boxes to organize merchandise without distracting or overwhelming what's for sale.
This example uses plain old boxes but spices them up by using tints of color and alternating images. As a result, this design feels very unified. Also notice the use of line to connect the type with the image.
Rectangles and bars can be useful for isolating content and also anchoring elements such as logos or photos. Here's an example of how you can use bars to create connection between elements in design:
Going Beyond the Box: Circles and More...
While the box (rectangle or square) is a nice, safe way of approaching design, you can often create more dynamic layouts by using other shapes either to contain elements or create direction and flow (to unify a design). Squares and rectangles tend to be fairly static but once you include circles, ovals, hexagons, diamonds etc., the design often becomes more dynamic. A repeated shape can develop a unifying theme or mood for a design.
Circles have more movement than squares particularly if used at different sizes to create a direction. It can be interesting to use circles for photos and then repeat the circles as bullets or to contain icons. Here's a site that uses a circle theme (even the icons are in circles): http://www.passionaboutdesign.com/ Links to an external site.
Geometric shapes like diamonds and hexagons can make visually interesting designs particularly if the shape is repeated in a variety of ways. Hexagons seem to be all the rage in screen design at the moment! Take a look at this site: http://builtbybuffalo.com/ Links to an external site.
Here's a new take on the traditional rectangle! This website is no longer available but the semi-transparent shapes overlapped and moved over the photos!
Shapes as page containers are also a current trend. Many one page sites employ a shape theme to identify sections of the site. These may be scrolling style or parallax (where the shape seems to overlap over existing content). Sometimes these designs use traditional colored rectangles but often they include more creative diagonal shapes or interesting details/shapes added to the top or bottom of a colored rectangle. Here are a few examples:
Dynamic use of repeated shapes and color! (This website has since changed!)
Look at the next site! The diagonal shapes scroll over back layer of the page. Notice how the diagonal is broken by organic shapes too! Organic shapes can be particularly useful for breaking up the horizontal nature of the screen.
http://www.spacho.com/
Links to an external site.
In conclusion... don't let shapes limit your designs. Move beyond the rectangle and grid. Try to use dynamic shapes (geometric or organic) to create a mood and a sense of unity in your designs.
Successful Shape or Not?!!Look at the following sites and decide: Successful or Not Successful? • Heather B Bianchi: http://studiohbd.com/ Links to an external site. • Sasha & Lucca: https://www.sashaandlucca.com/ Links to an external site. • Evoke: http://cafeevoke.com/ Links to an external site. (Archived version) You can post your comments to our Weekly Class Discussion, Discoveries and Questions Forum if you want to discuss these sites with other students. |