October 16, 2017 at 17:31Stone in the garden of the designer
- Tutorial
* The article is intended for beginning designers of online stores, as well as frontend developers who are able to somehow influence them. If you do not belong to these categories, you can not waste your time. I warned.
“All errors that the frontend developer made will return to him when building the site, all the flaws that the designer was too lazy to draw will be thought out by the layout designer”
Having worked a certain period in the development of online stores on the OpenCart platform, I would like to share my personal experience, as well as the typical mistakes of young designers in creating web pages. I hope that this article will improve your design skills and you will not allow what will be discussed ...
1) Use fonts carefully
When creating a website design, the use of no more than 3-4 different font families for the entire site is encouraged. Preferences should be given to fonts that are in the public domain, for example - fonts.google.com/ (At the time of writing, 846 font families are available), this will help in optimizing the site, and will not cause problems with copyright infringement. The main font size is 16px (for small labels - 14px). Headings, subheadings 20-26px (more possible). (I won’t describe why this is so, if it’s interesting you can read here 20 questions about tourte web fonts or here Opinion: the main text in 16px naikom )
If you decide to use something less than 14 px, there must be a very good reason for this (for example, a loan agreement, a legally binding document,
Be especially careful when choosing a color for texts on the site. They should not be many (max 5-6). * It is not necessary to implement these 50 shades of gray on the site for each sub-category.
It is also considered good practice to attach a jpg file to your finished layout on which descriptions of all used fonts and colors are displayed.
2) Make out the appearance of the menu and their items
Drop-down-leaving-pull-down menus must be displayed in at least two states:
- assembled;
- spread out
Menu items should be displayed in 2 ways:
passive (cursor not hovering)
active (cursor hovering)
In addition, the texts of the menu items should take into account the possibility of a long section name (example - Storage and transportation, Auction goods) and transfer it to the second line. If the site is planned to be multilingual, at the moment, too, may break the layout. (On this topic I really liked the article Eleventh grader , or we are testing the bugs of the Diokuz layout )
3) Make out links
For links, the design of 3 statuses is very desirable: a regular link (link), a hover link (hover link), and a visited link (visited link). Of course, it is necessary that the designer make up all 3 states for the layout designer (In practice, of course, it is rare, but demand)
4) Make navigation chains
Navigation chains (they are bread crumbs) should be spelled out taking into account real section names and word wrap.
How designers like to send the layout:
How it will probably look on the site:
I’m not so sure that this is correct from the point of view of the CEO, but I think everyone got the idea, these breadcrumbs tend to turn into full-size bakery products like noodles in two lines. It would not be bad to take this into account at the time of design.
5) The client must know that he is making a mistake
Warning messages should be drawn in the layout. (Error messages, operation confirmation, etc.) otherwise it will be sculpted with prompts, or even worse - through alert () messages.
★ Registration form ★ by Andry Zirka ( @ BlackStar1991 ) on CodePen
6) The heading menu will tend to expand
Quite often it happens that the initial elements of the site’s menu on the output grow to disgrace.
You will be very lucky if you can find out about the maximum nesting of product categories before the start of design development. It will also save a lot of time and nerves. (This is especially true if the site is being redesigned).
Initial option
A turned out to be approximately the same at the output (branching to the 4th subcategory)
* This, of course, is not entirely correct, but who has the desire to redo the finished database or to prove to the customer that it’s better not to do this and users will not go so deep into the category tree.
7) Guides and grids in the layout - this is important
In the age of digital devices without the right adaptive, nowhere.
Since at the moment the developers are not yet ready to switch to the Grid system (but everything goes to that ), and continue to use life-saving frameworks (Bootstrap, Foundation and others ) with their standard 12-column grids in their work , this should be taken into account in design. Actually, if you are lucky and you work in a reputable company, you can count on layouts for popular resolutions 1200px, 991px, 768px, 450px, 320px (more details here), but in practice it’s such a rarity. In the best case, designers can provide a large layout - 1920px (or 1680px - who has worse monitors) and something similar to a mobile one under the 320px extension. Everything would be fine if there were clearly observed indentation of the guides. Let me give you a small but very typical example.
Designer, remember these are two completely different layouts!
Of course, this is not critical and can be reset through the class with padding-left: 0! Important; And then again, with a decrease in permissions, again, but what’s the point of this? Arrange the content in the right places and everything will look good with lower resolutions. In other words, do not create unnecessary problems for the layout designer, if they can be avoided.
Also, quite often, designers give out layouts with “extra” guides. Most often, they do not carry a semantic load in the layout (especially for vertical guides), but visually clutter up the layout.
Personally, I ask you to remove everything that does not guide Bootstrap grids. I can already see what is on the same level with what, and what is not visible, so there is corresponding software ( PerfectPixel , Avocode , Zeplin ) he will not let me create chaos.
8) Divide and conquer
Never, hear, never merge all your project layouts into one PSD file! (Even if you really want to and it is so convenient for you, even if you know that there will be fewer errors with the transfer of different repeated blocks) Not only will you spoil your karma, you will also make the layout designer to slander and commemorate your relatives. After all, not everyone has powerful iron, for some, if they only had to open such a monsto-file, they would have to seriously strain themselves.
One page - one layout! (Home, Product card, Categories, Cart, Authorization ....)
If you still got such a layout from the designer, we
solve this problem like this:
- We collect the necessary layers in a group.
- In the palette of layers we poke on the group with the right mouse button.
- In the drop-down menu, select the item Duplicate Group ...
- In the window that appears, in the Document column, select New.
- Profit
9) What if there will be no content?
Quite often it happens that the designed interface at the output is not always in demand. I will give an example:
This is a standard part of the Product Card page for clothing stores. But if the store plans to sell not only clothes, but also other related things - fishing rods, knives, lighters, camping equipment, and so on. it may happen that some blocks will be inaccessible to interaction, or more likely, they simply won’t connect from the admin panel. (In the example, these are Size Select blocks and a Short Description block, * And yes, there is also a separate block Full description of the goods, do not ask why.) As a result, we have an empty place, or a broken layout. Of course, this problem is solved by queries on the server (like “Is there content?”, And if not, then we’ll insert the desired style), but it would be nice if the designer solves this problem instead of dumping imperfections on the shoulders of others.
Just try to connect parts of your components for a while, and imagine what will happen if one day this block is not needed.
10) And what will happen next ...?
Before starting to make up the layout, I like to go to my designer and start asking stupid questions (forgive me my designer, Olya, I’m such a radish) Questions are always simple and of the same type: - What will happen after the user clicks on one or another item. I consider this behavior quite acceptable if there is no clearly drawn element, or an explanation of how it will work.
Typical errors, unfinished items.
In all examples, the designer was too lazy to think about what will happen after the user interacts with the elements of the site. Also, the user in these examples will not be displayed in any way if he does something wrong. The designer is required to provide this.
The layout designer is also responsible for the correct (preferably intuitive) work of all elements of interaction.
The main thing here is always to carefully consider the layout proposed to you first, and not to overdo it, (designers are usually vulnerable people). The designer should clearly tell the layout designer whether there will be a redirect to another page, the appearance of a PopUp window, the effect of scrolling, or something else ... again, if this is not intuitively clear, and there is no clearly drawn element.
I advocate direct contact between the layout designer and the designer, if possible.
A good tone in the work will also be to show the layout to the designer, to remove defects (and they will certainly, the crown will not fall).
I hope that these recommendations will improve you as a designer of online stores. Let's make the web better.