Introduction to Web Design

Introduction to Web Design
The term “web design” means the discipline to structure the graphic elements of a website to reflect, through an aesthetic dimension, the visual identity of the company or organization. It is thus a step in visual design, as opposed to the functional design (ergonomics, navigation). The purpose of webdesign is to enhance the image of the company or organization through graphics to enhance its visual identity and provide a sense of confidence to the user. However, under the criteria of ergonomics, a website must meet the expectations of users and enable it to easily find information they seek.

The web design is a compromise between a presentation with a stunning graphics, giving credibility and image to the company and navigation allowing the user to easily find what they seek. By extension the term means the business webdesigner to design the design of a website.

The necessary inspiration
The design of a web page is primarily an act implementing artistic inventiveness and creativity. The purpose of this guide is to give some key elements to obtain an effective design; however, a good source of inspiration may be to visit reference sites, including corporate sites.

The layout of the page
It generally leads to the creation of models of pages (in English templates), serving as templates for the creation of the website. The templates are images created in the form of layers, or web pages representing the skeleton graph of a standard page.

The traditional structure of a Web page is:

• A logo in the upper left. Most of the time the logo is clickable and leads to the home page.
• An area navigation (menu), to the left and / or right.
• A header containing the name of the site, a banner navigation and a zone for a banner (advertising or not).
• A body of the page containing the essential information.
• Footer gathering useful information such as date of update, a link to a contact form, a plan of access.

Graphic chart
A graphic charter is a synthetic document which summarizes the rules on presentation of graphic elements of a website, reflecting its visual identity. The charter defines clothing graphic chart on this page, including the sizes, colors and appearances of texts, images and buttons on the site and the relative positioning of objects on the page.

Model
A model is a fake website and summary (prototype) with the design of the site and its navigation. The model allows formalizing the design of the site and is usually the validation stage of this phase, to move to the implementation phase. The model represents the main pages of the site (without content) with static pages and can simulate navigation. Thus, the dynamic elements such as search engine, for example, lead to a page with fake results.

Size pages
The size of the web depends mainly on the definition display (resolution is the term used wrongly) Internet users. In terms of width, the ideal is to opt for a lower value to the horizontal definition of the majority of visitors, not to force them to scroll the screen with the horizontal elevator. A short page allows for visitors to easily skim information to identify items of interest. Regarding the length, it is advisable not to exceed three to five screen heights. Indeed, the pages too long may not be read in full and take longer to load.

To ensure optimal viewing for most visitors there are several strategies:

• Select the smallest width supported by the largest number (between 600 and 800 pixels wide for example).
• Choose a page with tables invisible variable widths (defined as percentages).
• Detect resolution visitors with a script (e.g. JavaScript) and redirect the visitor to a page on the right width. This method requires that visitors have a browser with JavaScript enabled and asked to create as many pages as desired widths.

Position information
When creating pages, the position of information is important. Given the sense of reading information (diagonally from top left to bottom right), information at the top of the page will be more likely to be read by Internet users.

Choosing your pictures
The images allow you to a website and make it gayer. Nevertheless abuse image may hinder visual comfort, and the loading of pages. Webmaster beginner likes to brighten their site with funny animations gleaned on the web. Where possible it is better to move because they can irritate the player and because they give an amateur site.

Background color
The choice of background color is important because a background poorly chosen may hinder readability. A good color contrast between the foreground and the dominant color of the background is required. As such, it is highly advisable to choose a background graphic as it may interfere with the reading and usually emerges a sense of amateurism. The background should generally be chosen very pale.

Typography
It is strongly against the state to use more than two fonts on a website. The stylized fonts should be used sparingly (for the title for example) and most of the web page will be made with a classic police (Arial, Verdana, Helvetica, etc.).To use traditional print, font’s wheelbase (serif) generally facilitates reading since wheelbases can accompany the eyes of the reader. On the web, the use of such policies is not recommended because under the definition of the visitors screen, the wheelbases can very quickly become handwritten embarrassing for reading. Thus, it is desirable to opt for sans serif fonts (sans serif), plus round. Finally, be aware that texts using non-standard fonts may not appear correctly on the screens of users. To create titles with such policies, it is possible to circumvent this restriction by creating transparent images with the text.

Graphic symbols
It is advisable to use symbols or icons to establish a visual signal. Caution still the choice of symbols because the sense perceived by the user may be different from that attributed to him, especially if the website has an international vocation. The following symbols are commonly used:

• A magnifying glass usually symbolizes a search function.
• Indicates an envelope can contact the webmaster by mail
• A question characterizes online help.
• A house is a link to the homepage.
• A flag indicates the language of the current page or the possibility of changing language.