Mar 6, 2012

The four key components of excellent web design

Filled under: ,

There are a lot of what is needed for the development of web design, but I think that all this can be divided into four main components. If you are able to implement all four - you get hit web design. However, if you remove at least one, the integrity of the design will suffer.

This is the task of all aspects of good design should complement each other, helping to achieve the ultimate goal of the website. In this article, I identified four key components of excellent web design, gave examples of their implementation and how to achieve them.

A. Nice layout

In virtually every sphere of our lives is important to have a good foundation. If the base is wrong, then everything built on it are likely to collapse. Base web design - this is your layout.

Layout of web design involves placing content and navigation elements. Do you want to install in a hierarchical sequence of precisely those elements that are most important to the user, and this is determined by how you feel, the audience will enjoy the site.

Use the frame

A common practice among web designers - to create a framework that, in fact, a schematic depicting a variety of items that appear on the page. The frame is usually constructed of rectangles of different shades of gray and blocks of text. The idea is to make the framework as simple as possible and not get bogged down in the colors and design elements.

Jesse Bennett-Chamberlain of  31 Three  perfectly painted the development process in his blog. Here is an example of a skeleton, which he created for the project  Embrace Pet Community .

The four key components of excellent web design
 Be generous with the free space

This is a key aspect of good web design - it is something more than what is (or rather is not) between the different design elements. I'm talking about free or negative space. Many designers make the mistake of overloading the site. Do not be afraid to give the pages to breathe. More space will give your design a more sophisticated look.

Working with the layout of  The Swish Life ,  Liam McKay  knew how important it was to use wide margins around the content to give the design of openness and airiness, while doing so in order to view the text easier. Notice how a lot of empty space around the blocks of content. So the user is easier to concentrate on what's important.
The four key components of excellent web design
 Mutant Labs  - another excellent example of proper use of space. This design gives a feeling of openness dark colors, texture and allows the blackboard and doodles to be seen.
The four key components of excellent web design
 More information about the layout and frame

Wireframes Magazine  - this is the blog team of architects and designers of information interaction, which contains a wealth of information and examples of models and diagrams.
The four key components of excellent web design
 Two. Effective typography

As well as layout, typography plays an important role in how the user perceives the content of the website. Typography web design should facilitate easy reading and a shift in structure and hierarchy of content.

Great importance =

31Three   uses capital letters and large font size for headings and subheadings. This establishes a clear hierarchy that identifies the title as more important than the paragraph below it.
The four key components of excellent web design

The four key components of excellent web design
 Make text legible

Dan Sederholm made ​​a text  Simple Bits  is very easy to read by using a high contrast between text and background. And pay attention to the line spacing in paragraphs. Always leave enough space to the main text is easily readable. Usually have to experiment, but there is a good rule of thumb: to set the row height 1,5 em, which is 1.5 times the size of the font.
The four key components of excellent web design
 Read more about typography

If you want to learn more about typography, you can use our  list of good sites on the topic . In addition, you can go through  the list of tools to help you with typography in web design .

Three. The right color scheme

It is important to choose the right color scheme, as it sets the mood of your design more than any other component. Do not rely on your own taste, determining what color to use. This issue should be resolved on the basis of the objectives of the site and the information about the audience.

Take the chance to be different

Website  Gap Medics  features a bold color choice, which is contrary to what we used to see on medical websites. This is useful, because the site is trying to attract young medical students. The colors help give the site a feeling of youth and style that softens the seriousness of the topic.
The four key components of excellent web design
 Sometimes a bit of color - it is right

Carsonified   basically uses only two colors. Dark brown and creamy white complement the vintage poster style and design elements. Sometimes a minimal color palette - that's all you need.
The four key components of excellent web design
 To help choose the right color scheme?

Kuler from Adobe  - it is driven web application that allows you to view color palettes created by others. You can also create your own palette using the color wheel, color combinations, bars and sliders on the color scale.
The four key components of excellent web design
 For more information about the tools to work with color, we will write later.

4. Coordinated design elements

This is the stage of design, from which you can get a lot of fun. Here is where creativity roam: texture, icons, pictures, etc. But remember that the design elements also play an important role in maintaining the spirit site. Therefore, they must comply with the objectives of the site and its audience. Also, design elements shall comply with the above three components.

Consistency in Action

Designer  Red Velvet Art  has done an excellent job on the application of manual drawing style through a variety of design elements. Notice how the icons, background image and scribble together. Typography and color scheme of "retro" is also consistent.
The four key components of excellent web design

The four key components of excellent web design
 Attention to detail

Blog  Squarespace  has a typical blog layout and design of wait, but look at this pixel scale with divisions on the left and right edge of the window content. This small design element focuses on the contents of the window, and is consistent with the rest of the design.
The four key components of excellent web design

The four key components of excellent web design
 Less is actually more

This design would look good on a white background, but  Elliot Jay Stocks  likes to use a texture. In order not to lose the sense of openness of the site, he used light and subtle texture in grunge style. It works because it does not violate the minimalist layout and still makes the design more interesting.
The four key components of excellent web design

0 comments:

Post a Comment