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 .
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
0 comments:
Post a Comment