Scalability and types of web design. Scalability and types of web design Looking at the intermediate result
Websites also have their own skeleton. But it is useless to ask doctors about its features. And the veterinarians are also not aware of the structure of the site. Only the layout designers know about this. It is on them that the structure of the skeleton of the future resource depends. And the main way to create the bones of his skeleton is block layout.
Website layout is a craft for the initiated
There is something mysterious in the layout of the site. But this is until you get to know this craft better. We begin our dedication:
The next stage of website development after creating its layout is layout. The task of the layout designer is to transfer the skeleton of the future site to the virtual world using html code and css tables. Simply put, transfer the dimensions and proportions of the resource into a form that is understandable for the browser.
In the process of layout with html code, the "skeleton" of the site is split into parts. And using css ( cascading style sheets) sets the size of its "bones", color and location.
There are several types of layout:
I. Tabular - used to be the main type of layout. In the table layout, the tag is used to set the site structure
and its child tags. Layout using tables allows you to arrange all design elements in the most proportional way relative to each other. But at the same time, this code turns out to be too voluminous:
Also, the main disadvantages of the table code include its long loading time and poor indexing of content by search engines.
The content of a spreadsheet-based page will not be displayed until all of the data is loaded. Block layout allows you to display each loaded element separately.
Poor indexing of table pages is due to large gaps between blocks of text located in different cells of the table.
Now tabular verst is rarely used as the main method for creating sites. Now it is used only for structuring tabular data and the location of graphic images.
II. Block - currently the main layout method. Unlike tabular block layout, it has a number of advantages:
Separating the style of the elements from the html code;
The ability to overlay one layer on top of another - this ability greatly facilitates the positioning of elements.
Better indexing by search engines;
High speed of loading a page consisting of mutually independent elements;
Ease of creating visual effects ( dropdown menus, lists, tooltips).
The main disadvantage of the block layout is a certain “ ambiguity»Understanding of its code by different browsers. Therefore, html pages often have to be "refined" by using special hacks.
With the advent of block layout, such a concept as "cross-browser compatibility" was born. Due to the difference in the display of the same element in different browsers, layout designers have to insert whole chunks of code (hacks) into the main html.
The hack is highly specialized and solves the problem of incorrect display in only one browser.
The main element used in block layout is the tag
... The section of code separated by this tag is called a layer. All styling decisions have been moved outside the html code into cascading style sheets. They are accessed via IDs or css classes:
How does block layout work?
Before starting the layout, the finished psd layout of the site is cut into blocks (layers) in a graphical editor. Cut out background pictures are placed in a separate folder, which will be attached separately to each layer:
For example, let's take this website layout, created in Photoshop. First, in a text editor, using a div, we set the structure of the future resource and assign its own id selector to each layer. It turns out the following structure:
Then to the finished site structure in html with the line attach the css file. Then we add to it the style description of each layer, positioning relative to other elements and its dimensions.
You can learn more about all the css properties from the technical documentation for the language.
This is how our example of a block layout of a site looks in a browser window:
Of course, this example is just a visual aid to demonstrate how block layout works. The real layout is done using background images and logos included in css. And also with the inclusion of hacks in the html and css code to optimize the display in all browsers.
While exploring the vastness of the web, many will probably notice that most sites are built on the basis of a grid. Elements or blocks in such sites are located on the page not chaotically, as it was several years ago, but in a certain sequence and structured (sometimes it is imperceptible at first glance). These sites are well balanced and tend to look clean and tidy. Much credit for this neatness belongs to grid, which underlies the design and provides the user with a clear, undistorted structure of the site.
While grids tend to represent simple intersections of horizontal and vertical lines at specified intervals, many designers use them to decorate and accentuate obvious geometric shapes and visual paths. We can see these paths and shapes in portfolio sites, galleries, blogs, and other creative projects. This is not surprising, since the mesh has a number of useful properties and advantages, for example, such as:
Creating visual paths to guide users
Combining various components into a coherent whole
Sorting information
And, of course, the mesh is perfect for showing the beauty of straight lines. Below we have prepared sites in which the grid is more than just a basic design.
Conclusion
As already mentioned, the grid is an integral part of design and easily turns chaos into order, and in website design, like nowhere else, this opportunity is really important. Most users want information quickly and easily, and there is no better way than to present them with a clear and well-organized structure.
No, this does not mean at all that the appearance of the site should be linear and simple. Sometimes, even simple geometric shapes, skillfully "diluted" with colors, images and graphics (remember flat design), can be really attractive. What do you think? Doesn't such a clear division into blocks look attractive?
Hello, Comrade Reader!
Why do we need landing pages in 10 blocks, if important information is on the first screen and you can limit yourself to the sections "About us", "Services", "Prices" and "Contacts"? The answer is simple: to absorb attention buyer and motivate enter into a relationship with the product andinduce to buy a product.
Most used visitor engagement techniques in the process of purchasing a product is AIDA(from the English Attention-Interest-Desire-Action) and PMPHS(Pain-More Pain-Hope-Solution). Guided by these techniques, the logical structure of the landing page is built and the blocks that will be present on the landing are determined.
I have collected for you 20 illustrative examples of blocks that perform a specific informative function. Examples come in handy if you and facilitate communication with the designer and designer of your landing page.
In this post, you will get acquainted with the first half - 10 blocks. For the remaining 10 examples, wait for the next article in August.
20 landing blocks - choose yours
Block-constituent parts of the product, complete set;
Block guarantees (triple);
Block about the achievements / advantages of your company;
Block about company employees;
Block about services / departments of the company;
Block about partners / clients;
CTA (Call-to-action, call to action);
Block-advantages of the client from the use of your product ("Why us?");
Block about the process of providing a service (delivery, method of making a transaction);
Block Calculator;
Block with a special offer + time limiter;
Block with a gift + conditions for receiving a gift;
Block with a map of the company's location ("How to get there");
Block with contact information;
Block comparison table;
Block identification "For whom?";
Block FAQ.
* Block numbering is approximate - the order of blocks on the landing page depends on the niche. You can determine the order of blocks using all the same Yandex Metrics tools (scrolling map, heatmap) this article will help you.
Contains key information for the visitor of the landing page, the USP of your company. It is desirable that this information be competitive as well. Depending on the niche, such information can be: product price (from 488 rubles per 1 piece), delivery time (delivery in 2 days), place of production (directly from Germany). you can learn more from the previous article.
Suitable for: wholesale topics; niches where the buyer is not sufficiently aware of the benefits of the product (mainly the product).
The block can be the answer to the buyer's question "Why is it so expensive?" If it contains detailed descriptions of the characteristics of the product. This is to create a clearer picture of the object of desire in the head of the potential client.
3. Block-component parts of the product, complete set
Suitable for: descriptions of complex services; niches for organizing leisure activities; descriptions of the bundle of goods.
If the block about the characteristics of the product demonstrates the product entirely, then the block about the component parts decomposes the product (product or service) into terms.
4. Block guarantees (triple)
Suitable for: any landing page.
Most often it is located after the block with the cost of the product. It is built on the basis of the target audience's objections and closes them, demonstrating the benefits of the service in your company.
5. Block on achievements / benefits
Suitable for: any landing page; branded product from a well-known company; especially important in a highly competitive niche.
Especially important for businesses in a highly competitive niche. For example, if several companies offer the same product, then the one who provides the most convenient conditions for the transaction and shows the competence of the work of his company (since what year does the company exist, the number of implemented projects, discounts and gifts to regular customers, the number of points of sale, etc.).
6. Block about company employees
Suitable for: niches in the provision of services
The use is advisable in a situation where it is important not WHAT the buyer will receive, and HOW the result will be achieved.
7. Block about services / departments of the company
Suitable for: complex services topics; landing pages with multiple products in one application area.
8. Block partners
Suitable for: any landing page.
The block increases the visitor's confidence if you use the logos of famous customers.
Suitable for: info-business; the service sector; niches where process matters (HOW) getting the result.
Great addition to cases - visual demonstration WAS / HAS BEEN, as well as infographics and print screens with statistics.
Niches where demonstration matters:
To be continued…
Today we discussed the first 10 blocks for the landing page, we will publish more in the near future - stay tuned!
The new year has brought a lot of fresh technologies and trends, but most likely the trends that have shown themselves by the end of 2015 will dominate. More videos, vertical pattern solutions, material inspired ideas and stylish slides. Increase in popularity is to be expected for these techniques. Most of the new concepts are not so difficult to implement. Below are 11 web design trends (and many great example sites) that we will face in 2016. Samples of these designs will really help you get a sense of the trend.
The site is attractive with animated backgrounds, interactive effects
More beautiful typography
Simplified interfaces paved the way for the idea of beautiful typography (as well as easy-to-use web tools like Google Fonts and Adobe Typekit - expanding development capabilities with huge online libraries). The simplicity of the inscriptions (readable and easy to understand) in the concept of "calligraphy" frees up space for other elements. What you should try to link is the readable font and the entertaining newness of the options.
a country-style restaurant website: measured and unhurried, without fuss (catchy contrasts) with well-chosen colors and fonts. Country style (rustic-style) gives a feeling of closeness to nature. The branding associated with the birds is reflected graphically (illustrations, background drawings). In general, this is part of the identity - "hawk and chicken" (eng. Hawk and Hen), as a symbol of a successful hunt
Illustrations and drawings
Illustrations with drawings bring creative imagination and a cheerful mood to the design. Works for all types of sites (not only for children). The popularity of the “illustrated” style has also grown when it came to the design of small elements (icons, etc.) in the site design.
What is especially pleasing in this trend is that illustrations add personality to the site. Since illustrations or "sketch icons" are most likely hand-drawn, visually and by general feeling, such a site seems to be more personal for users. From the point of view of the development of the trend towards increasing the efficiency of communication with the user, there is still a lot to be done on this path.
The site has nice microiterations and illustrations. and "Baby-style" of the entire site turns design into a game
Previously, on the Internet, the tabular type of layout was widespread, to which it is dedicated. However, over time, this approach to creating a site structure became outdated, and was replaced by a block layout.
Differences between block layout and tabular layout
If the table layout implies that the page content is inside the tag
, then the concept of block layout is based on the active use of universal tags
inside which content is placed, including other tags.
The block layout is devoid of the drawbacks of the table layout - it is indexed better by search engines, its code is not so sprawling, and the blocks
, which are so fond of being called "layers", were originally conceived to be universal, that is, "for everything", while
is a table that you need to use to display tabular data and nothing more.
The only noticeable disadvantage of block layout is that sites made on it can be displayed in different ways in browsers. To avoid this, you need to make the layout "cross-browser", that is, equally displayed by any browser.
The essence of block layout
A website layout is created in a graphical editor: it is marked where which area of the page (header, bottom, sidebar, main content) will be located and how much space to take, pictures and backgrounds are prepared.
Each part of the page is placed in its own block
: the top of the site - in the first, the menu - in the second, content - in the third, etc. Each block is filled with content using HTML, as well as positioned and styled using CSS markup.
The final HTML document is a collection of blocks
with content inside. The design is often found in a separate CSS file connected to the page with a tag. , or at least in a container
