Design for frontend developers (part 1)

3r33333. When a designer sends mockups to a developer, there is always some misunderstanding between them. Graphic editor gives a lot of freedom, the designer may not know the technical limitations, something not to notice, or sweep away the problems under the carpet. 3r3302. 3r33232.  3r3308. 3r33333. It comes to the implementation of the interface and the developer is faced with these imperfections. 3r3302. 3r33232.  3r3308. 3r33333. A bad decision is to make it easier. Approximately as in a model, but taking into account technical limitations. It is done quickly, it looks horrible. The designer grumbles, QA gets a bunch of bugs. 3r3302. 3r33232.  3r3308. 3r33333. Another bad decision is to make it in the layout. We sit till the night, polish the pixels, tails are nailed through position: absolute. The designer is happy, the team leader is indignant at the porridge with porridge in styles, the manager is not satisfied with the time spent. 3r3302. 3r318.
3r33232.  3r3308. 3r33333. A good solution is to discuss problem areas with the designer, to simplify or remove everything technically difficult, to assemble the lion's share of the layout from ready-made elements. All are satisfied, you are great. 3r3302. 3r33232.  3r3308. 3r33333. I gathered a few principles that will help find these most problematic places, and even come to the designer with a ready-made solution, and not with bare hands. 3r3302. 3r33232.  3r3308. 3r33333. They all rely on scientific research and are easily verified. About combinations of fonts, colors, styles, cultural features, and the like, I will not write anything. The purpose of the article is not to teach each front design, but to give guidelines that will help in making decisions. 3r3302. 3r33232.  3r3308. 3r33333. Principles are given in no particular order. 3r3302. 3r33232.  3r3308. 3r3338. Grouping
3r33232.  3r3308. 3r3342. Observation 3r33262. 3r33232.  3r3308. 3r33333. The brain is prone merge things into groups if they are close, similar or aligned with each other. 3r3302. 3r33232.  3r3308.
Principle
3r33232.  3r3308. 3r33333. The grouping of elements reflects their links and position in the page hierarchy. 3r3302. 3r33232.  3r3308. 3r33333. I will give an example. The spacing between letters in a word is less than the spaces between words. This allows the word to be recognized as an independent group. The same thing happens with strings - the space between them is a little more than the distance between words. The next level is a paragraph, then a page, and so on. With each step in the hierarchy, the distance increases. 3r3302. 3r33232.  3r3308. 3r33333. 3r3365. 3r33232.  3r3308. Neat grouping of settings on Mac 3r3302. 3r33232.  3r3308. 3r33333. Indenting is the easiest, but not the only way to show the hierarchy. For example, on Habré the distance between paragraphs is greater than the distance between the page and the side menu. But it lies on the color plate, so its place in the hierarchy is still clear. Grouping with color and alignment outweighs not enough indenting. 3r3302. 3r33232.  3r3308. 3r33333. The principle of grouping works against the designer. Random alignment or proximity can combine two components that should not be grouped at all and confuse the user. 3r3302. 3r33232.  3r3308. 3r33333. 3r380. 3r33232.  3r3308. Firefox settings. It's all very bad. Try, for example, to guess what are the three buttons on the right. 3r3302. 3r33232.  3r3308. 3r3386. How to apply 3r36262. 3r33232.  3r3308. 3r33333. This principle helps to find problems in the grouping of elements that the designer missed. 3r3302. 3r33232.  3r3308. 3r33333. 3r395. 3r3302. 3r33232.  3r3308. 3r33333. For example, in this menu, single-level blocks have different indents. This oversight is easily noticed and corrected at the layout stage. 3r3302. 3r33232.  3r3308.
Home reading
3r33232.  3r3308.
 3r3308.
3r31-10. Principles of grouping
 3r3308.
Principle in the wording of Artemy Lebedev
 3r3308.
Ilya Birman develops the theme . 3r3122. Interpretation
Gorbunova. And another .
 3r3308.
3r33232.  3r3308.
The sequence
3r33232.  3r3308.
Observation 3r33262. 3r33232.  3r3308. 3r33333. Objects with which a person is already familiar recognized faster and more accurately. . Familiar context also simplifies recognition. 3r3302. 3r33232.  3r3308. 3r3145. Principle
3r33232.  3r3308. 3r33333. Standard site elements should follow established patterns. 3r3302. 3r33232.  3r3308. 3r33333. These patterns are quite elastic - an elongated rectangle with a short text in the center is perceived as a button, even if it is without shadows or volume. If there is only a frame from the rectangle, and the text is shifted to the left edge, then this is a text field. If there is a triangle on the right - dropdown list. The screen is dark and in the center something is spinning - without words it is clear that you need to wait. 3r3302. 3r33232.  3r3308. 3r33333. 3r3158. 3r3302. 3r33232.  3r3308. 3r33333. You can click on the button and what is written on it will happen. You can select something from the list, focus on the text field. Do not break the basic things and do not make the elements look like what they are not. It is bad if the button suddenly turns out to be a link or a drop-down list. It is very bad if the element cannot be told what will happen if you click on it. Hell itself, when it is not at all clear what is before us: an interactive element or not. 3r3302. 3r33232.  3r3308. 3r33333. 3r3167. 3r33232.  3r3308. Incredible control from Java settings - checkbox with confirmation in a separate window. The big blue button, despite the name, means cancellation of the action. 3r3302. 3r33232.  3r3308. 3r3173. How to apply 3r36262. 3r33232.  3r3308. 3r33333. Use standard default and custom elements only if absolutely necessary. They are clearer and easier to implement. 3r3302. 3r33232.  3r3308. 3r33333. Internal consistency is achieved by maximizing the reuse of everything. Bring everything to the component library - from inputs and buttons to colors, shadows, indents, and animations. 3r3302. 3r33232.  3r3308. 3r3185. Home reading
3r33232.  3r3308. 3r33333. 3r3190. The influence of context and familiarity with the object on its recognition
3r3302. 3r33232.  3r3308. 3r3195. Colors and contrast
3r33232.  3r3308. 3r-33199. Observation 3r33262. 3r33232.  3r3308. 3r33333. Studies say that the differences in tone and saturation of the background and the text have little effect on the readability, but the contrast in illumination is directly. In addition, 3r3206. about 4% of people
suffer from color disorders. 3r3302. 3r33232.  3r3308.
Principle
3r33232.  3r3308. 3r33333. Always check the contrast of the text. 3r3302. 3r33232.  3r3308. 3r33333. W3C regards as normal the contrast is 1: 4.5 for regular size text and 1: 3 for text size 24px or more. 3r3302. 3r33232.  3r3308. 3r33333. Especially often there are problems with white text on a colored background and gray on gray. The designer may not be aware that the combination of the problem, and users will strain. 3r3302. 3r33232.  3r3308. 3r33333. Design for frontend developers (part 1) How to apply 3r36262. 3r33232.  3r3308. 3r33333. The process can be automated with the utility ax . The easiest way to use the browser extension. CLI and integration with popular testing systems are also available. 3r3302. 3r33232.  3r3308. 3r33333. For a quick check of the contrast of two colors, is suitable. contrast ratio . 3r3302. 3r33232.  3r3308. 3r33333. Home reading
3r33232.  3r3308.
 3r3308.
Investigating the effect of contrast on reading
 3r3308.
W3C Recommendations
 3r3308.
3r33232.  3r3308.
Conclusions
3r33232.  3r3308.
 3r3308.
Discuss with the designer places that you think are problematic.
 3r3308.
Check that the distances between the elements correspond to their position in the hierarchy.
 3r3308.
Use standard controls in a standard way.
 3r3308.
Automate contrast checking.
 3r3308.
3r33232.  3r3308. 3r33333. In the second part I will talk about semantics, states, performance and size. 3r3302. 3r3309. 3r3308. 3r3308. 3r3306. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r3307. 3r3308. 3r3309.
+ 0 -

Add comment