"〇〇 君, this is not the same as the prototype picture!"
This is the last thing I want to hear when doing web design. I have been accused of this without exception, and in turn said the same thing to my juniors.
It can be said that web designers have experienced such a period. Why was it pointed out to copy the prototype? What can I do to avoid this problem? This time I want to share with you the reasons and countermeasures for this problem.
图像表现力 ” 和“ 信息 理解及提案能力” " Image expressiveness " and " Information understanding and proposal ability"
First of all, the conclusion is directly stated. It can be said that the person who will be pointed out to copy the prototype picture lacks "image expressiveness" and "information understanding and proposal ability".
"Image expressiveness" refers to the selection of appropriate implementation methods in the image from a variety of expression methods; "information understanding and proposal ability" refers to, for whom, in what way, what to communicate, what effect to achieve Thinking ability for a series of problems.
It may not be easy to understand this alone. The following question will analyze the impact of these two abilities on the results of creation with three people with different levels of experience as examples.
1.New employee A
Image expressiveness × / Information understanding and proposal ability ×
It is just guaranteed not to time out, and it is rarely designed to extend the simple prototype diagram. Without an in-depth understanding of the content, the content and text of the prototype picture are expressed in the design without doubt.
Because the prototype is basically reflected in the design as it is, the quality of the UI interface has not been improved from planning to actual operation. Coupled with the fact that there are no instructions in the proposal, the quality of the entire proposal is not very high.
Isn't this the same as the prototype?
2.B with one year of experience
Image expressiveness ◯ / Information understanding and proposal ability △
I have accumulated a variety of experience in actual work, and can perform visual performance to a certain extent. However, the ability to understand and propose information plans is still lacking, and it still stays satisfied with the important content on the prototype map, and cannot provide more suitable insights.
Although it can be done beautifully on the screen, because it does not have a unique understanding of the information as a designer, it cannot meet the expectations of the prototype creator or the customer. It is just a kind of repeated feedback.
Well, use this for the time being, thank you!
C with five years of experience
Graphic expressiveness ◎ Information understanding and proposal ability ◎
From the many design forms, choose the most appropriate UI expression and design a beautiful interface. Not only can you accurately understand the elements of the prototype diagram and their importance, but you can also identify whether the product is clearly communicated to the user. Content to make a design that best suits the user.
Even if the prototype diagram cannot be expressed in detail, it can be well reflected in the design, and explore methods other than the prototype diagram from the perspective of information planning to flexibly respond to changes in the actual situation, thereby greatly improving the overall quality of the proposal.
thank you very much! That's it!
Comparison of three people's abilities
With the improvement of the two capabilities like this, you can flexibly cope with a series of issues such as what information should be extracted from the prototype diagram and how to behave at design time. Good designs are often not the same as copying prototype drawings.
However, these two abilities are not mastered in a short time, but need to be gradually accumulated through solid accumulation of experience. Although we presuppose "no shortcuts", we also want to understand what issues we usually pay attention to and how we can do it to master these capabilities faster.
图像表现力 STEP 1 Improving image expression
Both of these capabilities are very important, and the first thing a designer must master is the expressiveness of the image. It is important to apply the basic principles of design repeatedly and thoroughly, and thoroughly grasp the UI expressions that often appear in web design. Either one will take a long time to reach, the following points will be introduced to the missing points to master this ability faster.
1.Freely determine the size and position of detail elements
The prototype diagram is to determine the location and order of large modules such as navigation, and most of them have not yet considered the layout within the module. How typography can be more convenient for users, designers should have their own considerations when designing. The first thing to do is not to lay out the prototype diagram as it is, but to try a typographical way to better communicate the information on paper first.
The location of the NO GOOD design drawing, the title and icon, and the dimensions of each element are basically the same as the prototype drawing. The GOOD design, the phone and the mail are arranged side by side, reflecting the sense of balance. The mail appears in the form of a button, which shows the priority of the information.
The NO GOOD design drawing arranges all the elements in the center. Although it looks neat, its horizontal arrangement is exactly the same as the prototype drawing. The GOOD design drawing divides the elements into layers, and changes the layout and font size. The layers are clear and easy to understand.
NO GOOD design drawings, typesetting according to the prototype drawings, are not attractive in any way. GOOD design drawing boldly enlarges the English language, showing visual impact, removing the style of the button, giving a sophisticated impression. Changes like the prototype can achieve better results.
2.Be sure to find multiple references
There are more than one interface and typography. The important thing is not to immediately adopt the way you can think of at once, but to persist in finding a performance that better meets the overall style and needs. Use the site navigation or Google search to find a way to approach your project as a reference when making it. The point is, don't limit yourself to one way, look for two or more as a reference, this will help to think about the performance of the design from more angles.
Even a label has various expression methods such as a wire frame and a color block, and it should be positioned according to the overall style of the project.
There are five circular business diagrams that are interconnected. There are product expression methods that add product pictures as in Reference 1, and there are simple expression methods that use semi-transparent circles overlapping each other, as in Reference 2. Which method can produce a higher effect for the user, think carefully about a different way of expression before production.
3. Organize design references by module every day
Related to the topic of finding more references above, no matter what methods are found, the references must be organized in modules. You can organize your screenshots into Pinterest or Tumblr, or you can organize your URLs in a table. Accumulate materials every day and save a lot of time to find references when doing design.
For example, I have compiled a table of dynamic performance that I can refer to.
4. Copy a well-designed website every week
It is most effective to accumulate more performances in order to accumulate more expressions. Instead of copying the screenshots of the reference website and directly copying them on the screen, the goal is to completely reproduce the elements such as texture and font size. One observation, one measurement, and try to make exactly the same content. Although it is a waste of time, if you persist for three months, you can obviously find that you have accumulated a lot of performance techniques. The important thing to say again is that this method is very, very effective.
This is a webpage I copied before, and the picture replaces the similar picture found on the material website. You can learn a lot in actual operation.
STEP 2 Understand explanatory information and provide + α insights
After mastering the expressive power of the image, it is necessary to understand and explain the information and put forward the + α opinion. + α refers to a proposal for a design that goes beyond the responsibility of making an image, or a proposal for an interaction problem. The ideal proposal is based on a series of questions that explain the information in the prototype picture, who the target user is, what they want to communicate, how they want to communicate, and what effect they want to achieve. There are many ways, here are three easy-to-use examples.
1.The content of the image is up to you
People who make prototypes want images to better complement the content of the article, so they often use graphic languages. At this time, we must first thoroughly understand the content of the article. It is also a good choice to replace the photos that show the atmosphere and actual appearance with graphics that make the correlation and value more easily to the viewer. Which one is more appropriate requires the designer to judge the content carefully after reading it.
What this content wants to convey most is the question of "Sales First or Purchasing First" as stated in the title. Using abstract house photos is also a method, but the relationship diagram using icons can better convey the content of the article than the icon.
2. Adjust the copywriting that has been decided
Although there is also a case that the Chinese case of the project cannot be modified in a single word, when this is not the case, it is good for the designer to actively submit comments on the article. Because language is also a very important interface expression. It is important to know that the representation used in the prototype is not necessarily the most suitable.
It is important to note that the title conveys the conclusion. The user chooses whether to read the content in the future based on whether the conclusion is his own point of interest. When the prototype diagram cannot meet this condition, the designer should actively submit opinions.
Reading the content of the article described in the prototype map, and directly extracting the conclusion as the title can greatly improve the ease of information transmission.
Even if it is a lengthy article, reading the content to extract subtitles can greatly reduce the burden on the reader.
3. Actively put forward the most appropriate interactive opinions
In the part of how to convey information, an important responsibility of the designer is to come up with interactive ideas. Since the prototype map mainly represents information such as elements and importance, the research on interaction may not have been particularly deep. In this case, it is better for the designer to actively propose a presentation method.
At this time, don't use this expression because it is very interesting, but use this expression as the starting point for the user to be easier to use, easier to understand, and more friendly. Think about the way of interaction. There is no value to the user. Don't satisfy the designer's performance desires, but satisfy the users.
The above example is an interactive form in which the trivial description text is omitted, the color of the photo changes when the mouse is hovered, and a layer of mask is added to explain the text immediately slide in from below.
to sum up
For the problem of copying the prototype, this time I introduced a variety of techniques and examples of proposals. At the end of the article, there is nothing to do immediately and effectively, but to accumulate expression methods daily, read the content carefully, and work hard.
From the designer's point of view, corresponding to the accusation that "this is not a copy of the prototype drawing", there are many people who cannot judge whether they can or cannot be changed. It is not unreasonable for designers who are unable to participate in the customer's demand meeting and get caught up in the already-designed prototype diagram.
Although it is better to confirm the change, it is still a dilemma for the designer. The most important thing is that based on the user's self-confidence, think deeply about how to make it easier for users to understand and use. With such a height, it's good to say that even if the prototype is completely changed.
Because these are not skills that can be mastered in a short time, there are still many people who are struggling in the usual design work. However, just like baseball, when the designer receives the prototype drawing, it is like the moment he enters the batting area. If you haven't gone through all kinds of hard training before, you can't make a gorgeous blow.
From now on, everyone can take the goal of not being accused of "copying the prototype picture". With reference to the methods introduced here, it is my pleasure to study steadily.