Design vs. Layout?
On Habrahabr, the question has often been raised that the currently popular life-cycles of developing web interfaces are out of date. It was last discussed in the publication “Design in the browser” , but it never came to a common opinion.
It is time to finally find the answers to two main questions: “Who is to blame?” And “What is to be done?” In the eternal struggle of design and layout ...
To start an article is to consider how the development of web interfaces actually takes place, who participates in it, what exactly does and what is responsible for. There are dozens of methodologies by which the life cycle of development of web interfaces is built, but all of them are united by the basic stages:
')
Stage one: Creation of formal requirements for the developed interface. The end result of this stage is a brief or technical task, which describes what should be on the layout and how it will be implemented. People with project roles are involved in this: a business analyst, a technical writer;
Stage two: Development of a graphic design layout for the brief or TK. This work is performed by a designer (web designer, GUI designer);
Stage Three: Layout of the interface (creating html \ css \ JS code) for a graphic design layout. A typesetter (front-end developer, web developer) is working on the layout.
You can limit yourself to the basic stages and get a high-class result, perhaps, only in “spherical conditions in a vacuum”. In practice, at each stage a number of problems arise, which must be solved by introducing sub-steps and complicating the life cycle of developing an interface.
Examples of problems and sub-stages arising from their fault can be:
We will talk more about the problems that arise and how to solve them below, starting with the question of the objectivity of assessing the quality of design layouts.
Development of web-interface design implies the work of designing the interaction and design of the appearance of web pages. Appearance is convenient to convey in a graphic design layout. Those. design work comes down to creating a layout.
Evaluation of the layout, by and large, is subjective. Often based on such epithets as beautiful, like, pleasant, neat, and their options with the prefix “not” ... The quality of the layout is evaluated by personal preferences. The question arises: is it even possible to formally evaluate the layout by subjective criteria? Can. And the most effective way is testing on a focus group: a group of people from a target audience is recruited for which a model is being developed, a demonstration is held, after which research participants fill out questionnaire questionnaires, setting ratings based on their personal opinion on these subjective parameters. The average value - an adequate assessment of the quality of the layout.
How often in practice does such testing occur on a focus group? Unfortunately, very rarely. Usually, it all comes down to agreeing the personal opinions of the designer and the customer. At the same time, from experience, as the performer is not always able to adequately assess his work, so the customer has a useless or even detrimental opinion to the quality. As a result, the end user suffers, for which, it would seem, the layout is made.
Another approach to the formal assessment of the layout is based on the principles of interaction with users, which are sometimes called the “Steve Jobs Principles”:
According to these principles, solutions from Apple were created at the beginning of the era of home computers, turning those PCs into a work of design art, as opposed to the “square-practical” appearance of competitors' products. Consumers themselves had no idea that they would like the fact that such a utilitarian thing, like a computer, can be a stylish design solution. But after seeing the implementation created by designers who did not consider the opinion of the consumer, they still appreciated it positively. However, this is another story, let us return to the development of the appearance of web pages ...
Yes, many design studios are working on evaluating layouts on similar principles, without any focus groups from representatives of Central Asia, independently determining what the layout should be, and getting a very successful and high-quality result. Everything is the same as with the focus group, only here an expert group is assembled, consisting of several experienced designers working in the same field, they are also presented with a mock-up, and it is assessed.
But, again, how often in practice do expert groups come together that are composed of at least someone other than the artist designer and customer? It seems that we have already talked about this ...
A formal assessment of the quality of the design layout is possible, but in fact rarely feasible. Any individual assessment is subjective, and this among other problems of web-interface development ...
The problem voiced in the subtitle is well known among web designers:
No matter how efficiently and in detail the layout was drawn, it remains a graphic image, sometimes it is also called a “dead” layout. Even if you are developing a web page design, where there are no dynamic elements (drop-down menus, changing shadows by clicking, etc.), your layout still feels different from the final, customized page (even on static you can select text, skip and other).
Concerns this problem and ease of use. Partly usability expertise can also be carried out using a graphical layout (assessing the location and layout of elements, etc.), but you can fully understand how convenient the interface was, identify all the pitfalls in working with it, you can only on the final, finished web page .
This is also where one more misfortune of both designers and web designers is - lack of content. Sometimes it is written in the brief: “here is a text on a page, and here is a picture”. And what is this text, what size is it, how many paragraphs and headings are in it; what is there for the picture, in what color range is it, what are its proportions - not indicated. Then it is necessary to use “fish” (caps) in the design layout - third-party texts, pictures. Sometimes they have to be used during layout. And then, when the page is already placed final, working content, terrified of the final result,
It turns out that even if the design layout was initially evaluated positively, the assessment of the final result can change greatly for the worse.
What do we have in the end? Embittered designers who paint the N version of the layout and rightly declare: “it is necessary to set the requirements for the layout more formally”. No less annoyed web designers, turning the page in the M'th time. Spreading deadlines, failed deadlines, exceeded budgets and perennial questions “Who is to blame?” And “What to do?” Complement this picture.
All this could have been avoided if we change the typical model of the life cycle of the development of web interfaces. After a small adjustment, it would look like this:
Stage one: Content preparation;
Stage two: Creation of a brief brief with a description of the functionality and formal requirements for the interface being developed;
Stage Three: Rapid development of the interface in the conditions where it will be used (directly in the browser), immediately verstaya it as a ready-made web page, with continuous expert and usability assessment.
All problems disappear on their own, the end result is always at a high level, in addition - the time and development costs are reduced several times as compared with the existing typical life cycles of developing web interfaces. The question is why everyone still does not use such a good scheme? In fact, right now this approach is gaining momentum.
This was discussed in the article, the link to which we gave at the beginning of the post ( http://habrahabr.ru/post/238485/ ), but I will duplicate here again:
In the text of that article and in the comments to it, the thesis was expressed, and most importantly, the thesis of how to implement this approach was refuted: “It is necessary that the designer be a typesetter and develop the interface immediately as a ready-made layout”.
In the same place, in the comments there were also voiced other examples that speak for the relevance of the described approach - these are specialized products that have appeared recently. First, these are solutions for quickly creating prototypes of web pages, such as: www.axure.com , http://froont.com . Secondly, these are the programs and services of the new generation, where when visually developing the layout, the ready layout is immediately generated (and unlike similar products of the “old generation”, these solutions generate clean and concise code, as if it was written by a high-class layout designer): http : //macaw.co , https://webflow.com .
Products for prototyping are good because you can quickly get a visual result, but the concise and clean layout, and especially the full-fledged interfaces created in them, is not a question. Solutions that generate high-quality code can not be called simple, and quickly work in them will not work. Sometimes, working with them, on the contrary, is commensurate or even longer than in the case when you first need to draw a graphic layout, and then “manually” impose it. At the same time, neither in those nor in others is it possible to work on the layout in the conditions in which it will be used (that is, directly in the browser, with the missing working elements of the editor). Yes, and autosave and hosting projects, giving continuous access to the intermediate result to third parties (for quality assessment, usability expertise, etc.), not everyone has ...
When a solution appears, devoid of all these shortcomings and capable of fully implementing the proposed life cycle of developing web interfaces, it remains only a matter of time. All trends lead precisely to such a product.
If you are interested in the problems described in the article, and its solution, we offer to watch this short video as a bonus - http://www.youtube.com/watch?v=nIOVU9_KRKA
Kirill,
Project Manager Mockup editor SletchBuilder
In collaboration with our designer Sergey Sevenvampire and web developer Anton skrutty .
It is time to finally find the answers to two main questions: “Who is to blame?” And “What is to be done?” In the eternal struggle of design and layout ...
Typical Web Interface Development Lifecycle
To start an article is to consider how the development of web interfaces actually takes place, who participates in it, what exactly does and what is responsible for. There are dozens of methodologies by which the life cycle of development of web interfaces is built, but all of them are united by the basic stages:
')
Stage one: Creation of formal requirements for the developed interface. The end result of this stage is a brief or technical task, which describes what should be on the layout and how it will be implemented. People with project roles are involved in this: a business analyst, a technical writer;
Stage two: Development of a graphic design layout for the brief or TK. This work is performed by a designer (web designer, GUI designer);
Stage Three: Layout of the interface (creating html \ css \ JS code) for a graphic design layout. A typesetter (front-end developer, web developer) is working on the layout.
You can limit yourself to the basic stages and get a high-class result, perhaps, only in “spherical conditions in a vacuum”. In practice, at each stage a number of problems arise, which must be solved by introducing sub-steps and complicating the life cycle of developing an interface.
Examples of problems and sub-stages arising from their fault can be:
- The lack of a common vision or lack of understanding of the subject area - to restrict the text description in the brief or TK will not work. It will be necessary to create several prototypes, to conduct additional research.
- A nice looking interface can be inconvenient to use. To avoid this, we have to involve a usability specialist in the work and conduct additional expertise for usability, etc.
We will talk more about the problems that arise and how to solve them below, starting with the question of the objectivity of assessing the quality of design layouts.
The problem of formal evaluation of design
Development of web-interface design implies the work of designing the interaction and design of the appearance of web pages. Appearance is convenient to convey in a graphic design layout. Those. design work comes down to creating a layout.
Evaluation of the layout, by and large, is subjective. Often based on such epithets as beautiful, like, pleasant, neat, and their options with the prefix “not” ... The quality of the layout is evaluated by personal preferences. The question arises: is it even possible to formally evaluate the layout by subjective criteria? Can. And the most effective way is testing on a focus group: a group of people from a target audience is recruited for which a model is being developed, a demonstration is held, after which research participants fill out questionnaire questionnaires, setting ratings based on their personal opinion on these subjective parameters. The average value - an adequate assessment of the quality of the layout.
How often in practice does such testing occur on a focus group? Unfortunately, very rarely. Usually, it all comes down to agreeing the personal opinions of the designer and the customer. At the same time, from experience, as the performer is not always able to adequately assess his work, so the customer has a useless or even detrimental opinion to the quality. As a result, the end user suffers, for which, it would seem, the layout is made.
Another approach to the formal assessment of the layout is based on the principles of interaction with users, which are sometimes called the “Steve Jobs Principles”:
Developers do not take into account the opinions of users, themselves defining what the user needs, because developers are experts and professionals who see the situation as a whole and adequately, and in most cases end users themselves do not know what they want and are only able to enjoy a result that satisfies their needs, which they had not previously suspected.
According to these principles, solutions from Apple were created at the beginning of the era of home computers, turning those PCs into a work of design art, as opposed to the “square-practical” appearance of competitors' products. Consumers themselves had no idea that they would like the fact that such a utilitarian thing, like a computer, can be a stylish design solution. But after seeing the implementation created by designers who did not consider the opinion of the consumer, they still appreciated it positively. However, this is another story, let us return to the development of the appearance of web pages ...
Yes, many design studios are working on evaluating layouts on similar principles, without any focus groups from representatives of Central Asia, independently determining what the layout should be, and getting a very successful and high-quality result. Everything is the same as with the focus group, only here an expert group is assembled, consisting of several experienced designers working in the same field, they are also presented with a mock-up, and it is assessed.
But, again, how often in practice do expert groups come together that are composed of at least someone other than the artist designer and customer? It seems that we have already talked about this ...
A formal assessment of the quality of the design layout is possible, but in fact rarely feasible. Any individual assessment is subjective, and this among other problems of web-interface development ...
Discrepancy of sensations from the graphic layout and the imposed web page
The problem voiced in the subtitle is well known among web designers:
No matter how efficiently and in detail the layout was drawn, it remains a graphic image, sometimes it is also called a “dead” layout. Even if you are developing a web page design, where there are no dynamic elements (drop-down menus, changing shadows by clicking, etc.), your layout still feels different from the final, customized page (even on static you can select text, skip and other).
Concerns this problem and ease of use. Partly usability expertise can also be carried out using a graphical layout (assessing the location and layout of elements, etc.), but you can fully understand how convenient the interface was, identify all the pitfalls in working with it, you can only on the final, finished web page .
This is also where one more misfortune of both designers and web designers is - lack of content. Sometimes it is written in the brief: “here is a text on a page, and here is a picture”. And what is this text, what size is it, how many paragraphs and headings are in it; what is there for the picture, in what color range is it, what are its proportions - not indicated. Then it is necessary to use “fish” (caps) in the design layout - third-party texts, pictures. Sometimes they have to be used during layout. And then, when the page is already placed final, working content, terrified of the final result,
It turns out that even if the design layout was initially evaluated positively, the assessment of the final result can change greatly for the worse.
How could all these problems be avoided when developing web interfaces
What do we have in the end? Embittered designers who paint the N version of the layout and rightly declare: “it is necessary to set the requirements for the layout more formally”. No less annoyed web designers, turning the page in the M'th time. Spreading deadlines, failed deadlines, exceeded budgets and perennial questions “Who is to blame?” And “What to do?” Complement this picture.
All this could have been avoided if we change the typical model of the life cycle of the development of web interfaces. After a small adjustment, it would look like this:
Stage one: Content preparation;
Stage two: Creation of a brief brief with a description of the functionality and formal requirements for the interface being developed;
Stage Three: Rapid development of the interface in the conditions where it will be used (directly in the browser), immediately verstaya it as a ready-made web page, with continuous expert and usability assessment.
All problems disappear on their own, the end result is always at a high level, in addition - the time and development costs are reduced several times as compared with the existing typical life cycles of developing web interfaces. The question is why everyone still does not use such a good scheme? In fact, right now this approach is gaining momentum.
This was discussed in the article, the link to which we gave at the beginning of the post ( http://habrahabr.ru/post/238485/ ), but I will duplicate here again:
- At the St. Petersburg WSD most of the reports were devoted to this topic - http://webstandardsdays.ru/2014/06/28/ ;
- This was discussed in the report by Anton Vinogradov from Alfa Lab on BEMup ( https://tech.yandex.ru/events/bemup/6- September 20154/talks/2189/), where he considered the topic on the example of the layout of the Yandex application. Taxi;
- The report by Ilya Puhalsky on Rest in PS ( https://vimeo.com/85995812 ) also clearly explained a similar problem.
In the text of that article and in the comments to it, the thesis was expressed, and most importantly, the thesis of how to implement this approach was refuted: “It is necessary that the designer be a typesetter and develop the interface immediately as a ready-made layout”.
In the same place, in the comments there were also voiced other examples that speak for the relevance of the described approach - these are specialized products that have appeared recently. First, these are solutions for quickly creating prototypes of web pages, such as: www.axure.com , http://froont.com . Secondly, these are the programs and services of the new generation, where when visually developing the layout, the ready layout is immediately generated (and unlike similar products of the “old generation”, these solutions generate clean and concise code, as if it was written by a high-class layout designer): http : //macaw.co , https://webflow.com .
Products for prototyping are good because you can quickly get a visual result, but the concise and clean layout, and especially the full-fledged interfaces created in them, is not a question. Solutions that generate high-quality code can not be called simple, and quickly work in them will not work. Sometimes, working with them, on the contrary, is commensurate or even longer than in the case when you first need to draw a graphic layout, and then “manually” impose it. At the same time, neither in those nor in others is it possible to work on the layout in the conditions in which it will be used (that is, directly in the browser, with the missing working elements of the editor). Yes, and autosave and hosting projects, giving continuous access to the intermediate result to third parties (for quality assessment, usability expertise, etc.), not everyone has ...
When a solution appears, devoid of all these shortcomings and capable of fully implementing the proposed life cycle of developing web interfaces, it remains only a matter of time. All trends lead precisely to such a product.
If you are interested in the problems described in the article, and its solution, we offer to watch this short video as a bonus - http://www.youtube.com/watch?v=nIOVU9_KRKA
Kirill,
Project Manager Mockup editor SletchBuilder
In collaboration with our designer Sergey Sevenvampire and web developer Anton skrutty .
Source: https://habr.com/ru/post/240271/
All Articles