The Basics of Web Design. Where Does Web Design Start?

The Basics of Web Design. Where Does Web Design Start?

As the theater begins with a hanger, so web design begins with the definition of the goals and objectives of the future site. Why do I need a website? Which audience is it for? What results will achieve?

The answers to these and similar questions should lie in the formation of the basis of the web-design of the project. The term “web-design” is understood to mean the totality of work on the development of the logical structure and decoration of web pages. The task of web design is to provide a convenient flow of information to the user of the site or web application and to satisfy the aesthetic taste of the audience.

Modern web-design begins with the separation of design and content. Thanks to this approach, it has become much easier to make changes to the content of the site without affecting its design or to change the design without changing the content. This is largely facilitated by modern content management systems – CMS.

The basics of web design.

Are laid at the stage of development of the technical task – a document that describes the requirements for the visual presentation and structure of the site. The terms of reference also often describe wishes regarding the software implementation of the site.

Design Development Phase.

After the development and approval of the terms of reference, the design development phase begins. And the first thing to do is create a modular grid. The modular grid describes the location of elements on the pages of the site.

The modular grid of any web page contains at least two blocks: for the main site test and for the menu. If additional elements are needed on the page, for example, another menu, “footer” or “header”, then the modular grid is divided into several blocks.

The sizes of blocks of a modular grid are selected individually and can be anything. However, it should be borne in mind that according to usability requirements, the appearance of a horizontal scroll bar when viewing a page is unacceptable – this negatively affects the perception of the site by visitors. Therefore, in aggregate, the width of the blocks should not exceed the maximum width of the screens of representatives of the target audience of the site.

In the “header” block, it is customary to indicate the name of the site, which can be selected in accordance with the name of the company or the name of the author, as well as the logo of the site, if necessary. The main menu block in European sites is traditionally located on the left, in accordance with the direction of writing (from left to right). Also, the main menu can be located on top, under the “header”.

If the site is designed for viewing on screens with different resolutions, then the web-design, as a rule, is performed by “rubber” or is centered horizontally.

When the information model of the future site is ready, you can take on the artistic part of web design. Typically, web design is performed in the form of templates – defined sets of elements and their relationships. It is the templates that allow you to separate the development of the visual design of the site from the content.

There are main page templates and templates for typical site pages. The template of the main page is usually made more “intricate”, and the templates of the remaining pages of the site only support the main idea.

The template developed in the graphical editor is made up of an HTML-file. Using HTML tags and CSS style sheets, all the necessary page parameters are set: placement of elements, font color, and size, background color, etc.

Work on the template requires a mandatory cross-browser test, i.e. for compatibility with various browsers and their versions. Different browsers may interpret HTML code differently, so such testing is necessary to avoid a possible “collapse” of the design.

The tested and completely ready to work website design is “attached” to the functional “canvas” created by web programmers. In case of using CMS, the developed templates are “uploaded” to the appropriate folder on the server – and that’s all, the site is ready for filling.