Web Design Elements

Web Design Elements

The elements of design are the building blocks.

We distinguish 5 basic web design elements:

1. Lines and Linework

Lines can be horizontal or vertical, they can be borders or elements to delimit a a space. Lineworks increase the readability of the website.

Example: sidebars are often delimited by a vertical line, headers by horizontal lines.

2. Shape

Shapes mark the contour of a space. usually they are rectangular or square, but any shape is possible by embedding images into the design.

Examples: Boxes in the sidebar for widgets, menu tabs, form fields.

3. Texture

Texture gives your design the feeling of surface. Texture adds a visual effect which can be natural or artificial.

Examples:

The above images show that texture is defined “by the pixel” to lead to the desired effect. The second image represents the visual effect achieved by the defined texture of the first.

4. Color

Color is the most visible element of Web Design,however it is not a necessity. I like to start design without color to introduce it later to strengthen the design elements or to emphasize.

Color can be used in many ways: foregrounds, backgrounds, titles, text, borders, JPEG images for photos with millions of colors or GIF for flat color images.

Color will always remain a matter of taste. In as much as I am concerned, I prefer black and white web design plus a color to put accents in text or links; for the rest the design is a support for the content. Images as part of the content attract the eye of the visitor.

5. Direction

Direction gives Web Design motion. The visitors eye is guided to see what the designer wants him to see.

Example: Horizontal headers, vertical columns colored elements displayed on key spots to which we want to attract the visitor. Direction influences the movement of our eyes when scanning a page.

Example: on the screen shot above, the focal point is the post content index. The eye passes from the top left site name to the post title and then to the index and then continues downwards. Note the font color in the sidebar is lighter than in the content area. The eye pursues it’s scan downwards.

By placing a colored graphic element on the top right of the site, you would immediately distract the visitor: this is why top right ads are so successful.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

This page is wiki editable click here to edit this page.

More about this Topic

• Transparent WordPress Theme Design
• Yorgo Nestoridis Design Brand Header
• Design Branding
• Web Design Workshop 15 Disney Look
• Transparent WordPress Semiomantics XO