Deconstruction in web design part 2

After our introduction about deconstruction in web design, let us begin working on transforming our business through its web presence.

First step (and quite important to me)… Pink Floyd. The band that made its music the definition of deconstruction. In their songs, we will find only the necessary notes, vocals and percussion. All the rest is silence, the so called whitespace in design. It’s trully wonderful that we can find the same elements between two different types of art and be able to inspire from them.

There is no reason to start saying what should be put first on a web page, what should not be placed, etc. This is something that every one of us will decide. This is what will make a website unique, like each Pink Floyd’s song . Even if it uses the same notes with another. This is the time, when we will show our skills, when we get the basic principles (“rules” is an ugly word) and transform them into a website  in which the visitor’s eye will be happy to look at and flows perfectly from top to bottom.

Pink Floyd. The band that made its music the definition of deconstruction. In their songs, we will find only the necessary notes, vocals and percussion. All the rest is silence, the so called whitespace in design

Ways to “clean up” our website

Now let’s talk about some key elements and ways to get rid of the unneseccary stuff and improve the user experience.

A typical example is the central message. A small yet descriptive sentence for what the company can do, using large fonts and placed in home page almost immediately after the header section is a wonderful solution, so the visitor can get the message immediately. 100% success!

We can also use pale colors in the background, if not entirely white. Being more relaxed in reading the pure white is our first choice. Maybe a white background with a gradient, which will be totally supportive, will be a nice choice. Of course we are not negative on using strong colors, but it must have something to “add” with its presence. This is what we have to decide according to each project.

If you choose to use a strong, bold color, it must characterize your business. It must be something the user will remember next to your name. Something that builds your business identity. The right use of a strong color can make miracles. It gives personallity to the website by pointing out messages, links, titles etc.

As mentioned at the beginning of this article whitespace is the most important factor in the success of a website. When you find the right ratio, in agreement with our content, you will have our text “breathing” properly. The reduced use or abuse of whitespace will tire the visitor who will see a company that not feeling comfortable with itself.

News sites. Is minimalism and deconstruction possible.

Let’s see now a more specific website category. The news sites are difficult from the beginning to follow the deconstructive way of layout content. So we have to work over some other elements that will give us the desired result. Two of these, and perhaps most important is the whitespace mentioned above and typography.

The use of a single font is essential. The only exception might be the title of an article. For example, while around the site we use sans-serif fonts, in the titles we can use serifs.

On the other hand we have the right amount of whitespace within our site. The margins between paragraphs and headers, the line height, the padding in our divs, the “air” that exist around the images in the text, the distances between the articles. There are many elements we can configure to relax the eyes of our visitors.

Now is a good time to talk about Golden Ratio

tip: to find the relationship between font-size and line-height of a paragraph, we should use the “φ”. The number also known as the “golden ratio”. Multiply the font-size of our paragraph (in pixel) to 1.62 and take the number of pixels for the line-height. example: font-size: 12px, line-height: 19.4pixels> 19pixels (approximately)

The correct and reasonable use of “φ” can help us by making our website to be based on proportional sizes. This will make the eye of a visitor to feel familiar with it.

You can read more thoughts on the “golden ratio” in my article “Golden Ratio in modern CSS” as published by the CSSGlobe.

In conclusion

Naturally, two articles so small cannot fully cover such a significant trend in web design even if it is so specialized. In subsequent articles I will try to analyze one-one the elements that lead us ever closer to our goal succeed. To “teach” the businessmen about the benefits simplifing their web presence and internet business strategy.

This post is by Chris G. Chiotis, designer and blogger about making money online and internet advices. Follow Chris on twitter or Join Chris’ Facebook Page.