Web Design Layout

A Web page can be compared to a building. It has an entrance lobby, several floors, and various departments and facilities. As the architect designing the web designer not only the task, the website (the building) so that it works and made more extraordinary is it that the people she (it) to use, navigate through and feel good.

1.The home page (input range)
You should immediately reveal what it is on the website. It serves primarily the welcome but not the orientation. One should, therefore, on the home page, information to users ...

• Sender (From whom will the information?)
• Addressee (To whom is the information intended?)
• Documents (What is this?)
• Timeliness (from the date the information is?)

Using this information, the user can quickly see whether it is worthwhile for him to deal further with the website. Likewise, one should add a legal notice and copyright information in the hypertext system. The home page should also build up quickly. Therefore, the use of rich graphics, external services (eg counter) and plug-ins can be avoided.
2. Dimensions of the screen set The next step should be established, should be designed in any size, the Web page. This is to avoid that such margins are cut too small or the image will appear on the screen. Since it is impossible to make a website look in all browsers and on all systems the same, it should be ensured that the pages appear on the same system well and consistently.
2.1 Width of web pages
It is particularly important that the sides are not too broad, since scrolling is very unpopular right and the clarity suffers. Taking into account the necessary controls of the browser / operating system to start from the following sizes ... 800x600 pixels (750x400 pixels Usable area) Resolution 1024x768 pixels (980x570 pixels usable area)
2.2 Length of websites
Information that is visible without scrolling immediately, the user views the most. Therefore, important links and text and image information without having to scroll be available. It is therefore appropriate to present a shorter, condensed version of the information on the first page and a link be added to the interested user will execute Page to a text on the topic. For more text-heavy pages should also have a download version or the Print button integrate, since many users prefer to print out longer texts.

2.3 Resolution-dependent or - independent websites layout?
At the beginning of the screen design should include consideration be given to whether the layout of the site customize the browser window size or not. For a fixed width you have to work with pixel values, otherwise with percentages.
A flexible layout has the advantage that users do not have a big screen with the feeling of those in vain to have acquired, because the picture in the upper left corner disappears. Flexible sides also come out better in print. A disadvantage is that the columns of text on large monitors can get too wide.
3. Navigation A simple structure and easy access to the contents are the be all and in a user-friendly site web design. The user needs to know at any time, where he is currently located, where he can go and how he comes back.
Therefore, one should design a site structure. Software programs such as Dreamweaver offer the possibility to create a kind of dummy web page with links and all bases, before moving on to pages to fill with content. Retains also the web designer an overview.
Basically, the navigation will be designed so that the actual content not to step into the background. One should think of alternatives in terms of navigation. (Eg internal search function, "pull-down menus)
4. Design grid This is the basis for the creation of a consistent screen layout across multiple pages and needs before the actual design of the screen carefully considered and are outlined. The consistent layout and navigation are, the easier the user will be able to cope with the page because it can detect the location of the desired information and navigation intuitive.
There are basically four ways to visually consistency in pages that belong together to achieve ...

• A basic form that is repeated on all pages (form layout)
• About a frame that is repeated on every page (under Layout)
• Using various colors that correspond to specific topics (color-controlled structure issues)
• On a free composition, which is classified into (the free layout) End!