The process of website creation (web-project) can be conditionally divided into three stages:
- Planning
- Design
- Development
Let’s start with planning.
Planning
This stage can be divided into several substages:
- Creating an idea
- Development of the project structure
- Working out the design layout
Creating an idea
At this stage, we need to come up with the subject of the project (site, service). Further, according to the chosen subject, it is necessary to collect relevant materials: text, drawing.
Development of the project structure
When we have already come up with the subject of the project, collected the necessary materials, the next stage will be the development of the project structure. The structure of the project implies website sections, according to which the navigation menu and the design of the project will be formed. At this stage it is possible to classify the material according to the subjects and sections.
Working out the design layout
Once we have determined the project structure, we can create the design layout (schematically).
To draw a layout, you can use paper and pen, Photoshop, any other graphics editors (Adobe Fireworks was often previously used). It is important to note that this stage is not drawing the finished design layout, but only schematic sketch made to understand how the main data units, graphics and other design elements will be located on the website.
Image may be NSFW.
Clik here to view.
The main web-page elements
The main elements of the page often are: containing block (wrapper, container), logo, navigation, content, footer, free place (actually free place is not design element, but the concept, bearing in mind of which during working up the design layout, our project will not be like a pileup of blocks).
Image may be NSFW.
Clik here to view.
Containing block (container)
Element body or div can fulfill the role of a container on a page. The width of the containing block can be rubber (fluid), or can be fixed (fixed).
Logo
The text or graphics component of the project and setting it among the others. The logo is often located in the upper left corner of the page, or in the middle (depending on ideas, layout).
Navigation
The main navigation bar contains links to the main sections of the site. The navigation bar is often located at the top of the page (no matter how navigation elements are located – vertically or horizontally).
Content
Content is the main component of the web page. It takes a leading role in the design of the web-page, so it takes more space, in addition it is confirmed by graphics besides text.
Footer
This element is located at the bottom of the page and usually contains information about the manufacturer, contacts and legal information, links to the main sections of the website (they often duplicate the basic navigation), links to social networks, feedback form and so on.
Rubber and fixed layout
Image may be NSFW.
Clik here to view.
Fixed layout
Fixed layout means that, depending on a user’s screen resolution your site will always have the same width.
Rubber layout
“Rubber” layout means that a web-page will try to take all available space on the user’s screen, adjusting to the resolution.
In this context, it is worth understanding such concepts as responsive web design (Responsive Web Design aka. RWD) and adaptive web design (Adaptive Web Design aka. AWD). The first one fits into the concept of “rubber” and means that when you change the screen size, your website adapts to it, second concept implies that during the development you define basic resolution (screen size), under which your content will adjust (adapt). In both cases, you should develope not one, but several layouts which will fit different screen resolutions. Three layouts are often created to iPhone (Android Phone), iPad (Android Tablet) and Desktop resolutions.
Image may be NSFW.
Clik here to view.
This image shows both approaches. On the top a block “responds” to any changes in the size of the container, on the bottom it is “adapted” to a certain width.
Why are several layouts created in “rubber” design, and one isn’t used?
When designing the layout of the mobile version of a website the main content is to be in the front, that is why the navigation menu is often hidden, large banners and decorative items are hidden, content blocks are usually placed next to each other. On a preconceived layout, it is possible to determine what elements we keep on mobile and which we hide.
Modular grid
Before drawing up the project scheme it is also necessary to understand the concept of a modular grid. Modular grid implies a division of a page into separate columns vertically and arranging content when designing the layout for this grid.
The most popular system is a modular grid 960 Grid System, which at a maximum divides a page to 12, 16, and 24 columns. At maximum grid has 960 pixels in width. This resolution is based on the fact that most modern displays, at the time of creating the grid had resolution not less than 1024 by 768 pixels. Creating a layout on the basis of this grid further will help to accelerate the developmental process.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
It is also worth noting that at the development of “rubber” page layout there is the concept of the maximum width. This statement is based on the convenience of information perceiving. If we assume that our website does not have a maximum value in width, the information on large monitors will be greatly expanded and it would be uncomfortable to read it. Most often they are limited to a width of 1280 pixels.
Modular grid 960GS is in keeping with the concept of “fixed” design, for “rubber” design, you can draw attention to the adaptation of the same grid on the site or use the grid, which offers framework Bootstrap.
Due to the modular grid, blocks of content and elements will be located at a certain distance from each other, will have palatable width that in the future will be visually pleasant to a user and will not cause him any discomfort in the perception of the site.
The modular grid, in fact, is a kind of visual abstraction, visual division of the page to equal in width columns with equal space between them. You can visualize this model by a guideline or a separate layer, where these columns will be shown. This resolution can be found in the grid patterns 960gs.
Web pages layouts
Among the variety of drawing layout of web pages there are four the most common:
- Navigation in the left column
Image may be NSFW.
Clik here to view.
- Navigation in the right column
Image may be NSFW.
Clik here to view.
- Navigation in three columns
Image may be NSFW.
Clik here to view.
- Horizontal navigation. At this stage websites with this type of navigation are the majority. The convenience of this approach is easily explained by the fact that in this case we have more space for content that make up our website.
Image may be NSFW.
Clik here to view.
Mobile First
Considering the trends of recent years, this approach has its niche firmly in the development and design of websites. The trend is that almost 60% of Internet users use mobile devices to network access that is why decency is the development of not only the desktop version of the site, but also a mobile version. Using this approach, the development of the site layout, design and makeup begins with the mobile version, and then layouts for other resolutions are being worked out: blocks, banners, additional design elements are added and so forth.
This approach considers almost the entire development cycle that is why we return to it.
Having learned all of the abovementioned we can move on to the next step – Design (read part 2)