USING

SHAPES

LAYERING RECTANGLES

Some of the latest trends in web design include layering squares and rectangles over each other. These are typically placed over section dividing lines to create an overlapping look. For example on the Ketamine Clinic example, there is a rectangle of fern leaves underneath of a box holding text, but overtop of the header image. Other versions of this trend include placing outlines as frames over sections of the site like in the example on the right. It is always helpful to look at examples of other peoples' work and see how you can best emulate that in your own site.

REPEATING SHAPES

A good design strategy is to repeat shapes throughout your design to create consistency and style. In the example on the left, the company uses circles and curved lines throughout their design creating an aesthetic and repetition. Another rule of thumb that is common across many sites is to distill information into simple images. Use icons when possible to add visual flare and also quickly communicate your ideas.

CONTRASTING SHAPES

Another way you can work with shapes would be to contrast them. You want to create repetition, but it's also okay to break up the consistency with some contrast. In both of these examples the designer used both rectangles and circles which contrasted the hard edges from the softer curvy edges of the circles. This creates added visual interest while still maintaining the style. Once you know and understand the rules, you can break them. Play around with different components and see what works and what doesn't. Emulate aspects other peoples' work.

USING

ICONS

Icons are a great way of creating visual interest within your design or website. We as humans are drawn to imagery so distilling a group of information to a graphical component grabs attention quickly and easily, leading the eye to read through the information that is next to it. Using them effectively is almost formulaic. People expect to see them used in a handful of ways, making it easy for you to use them!

EXAMPLE SET UPS

HEADING