Basic Elements of Design Applied to Web

Are your website designs feeling a little lack luster lately? Want to re-vamp your design style? Take a moment to go back to the basics and you may find yourself surprised at what you will learn.

GDBD Creative Design

1. Emphasis
Emphasis is the importance attached to something. In websites, emphasis translates to hierarchy. To develop strong hierarchy you view the world’s best web design firms and after that must decide the priority of individual items that will make up your whole. In web design the most important thing is your site’s purpose (ie: getting hired, selling a product or supplying information). The site’s purpose should have the most emphasis. Emphasis can be derived from the amount of space an element occupies. This is why company logo, taglines, and/or main message are commonly the largest items on a website. When it comes to text, large fonts will demand more attention whereas denser information will become secondary.

2. Contrast
Contrast is the visual differentiation of graphic elements. Contrast creates emphasis and hierarchy. High contrast separates and distinguishes elements while low contrast blends similar multiple elements. As a web designer, you should “intentionally draw attention to certain elements through deliberate control of contrast” (Web Designer’s Idea Book Vol. 2, page 12). Contrast can be created and manipulated through color, size, shape, and density. This also applies to type where contrast is created through type size, color, weight, style and font.

3. Balance
Balance is the visual weight and stability of a design as a whole. If your design feels unstable, it is most likely unbalanced. Balance can be symmetrical or asymmetrical. When you split a design down the middle, if the two halves are mirrored you have a symmetrical design. If the two halves are not mirrored but appear visually equal you have an asymmetrical design. Our infographic designers in the UK usually uses a combination of the two. A site may be asymmetrical up top while symmetrical below or vice versa.

4. Alignment
Alignment is the positioning of elements to create a line. An example of typical alignment would be the tops of two columns lining up. This comes from working with a grid. However, designers like to break the grid to introduce visual interest. This is acceptable as long as the alignment of the design as a whole makes sense and is visually appealing.

5. Repetition
Repetition is the act of repeating elements. Elements should be used throughout site design in various ways creating visual unity through color, shape, line, fonts, imagery and/or style.

6. Flow
Flow is how the eye reads or scans the site. Flow is the result of how elements are put together. Naturally, we read left to right, top to bottom so it makes sense to follow this natural flow. However, it is not “wrong” to place a logo in the top right corner as opposed to the top left. In fact, straying from the natural order can create unique styling, but one must be careful not to create a design that user’s will not understand or is not logical. One must be aware of how the site “reads” or how the eye explores the site. The design style should create a loop, keep the users visual interest, and keep their eyes scanning the site.

It is important to remember that these basic elements do not just apply to web design, but any type of design. If you compare your work to this basic checklist you should find that you create complete and successful designs.

web designer's idea book volume 2Thanks to the Web Designer’s Idea Book Vol. 2 for inspiring this article, if you are looking for a good and creative read I suggest you pick it up at your local bookstore or online.

, , , , , , ,

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>