Note: Heidi writes this series of professional articles, does not mean that the current Heidi do how good, on the contrary, whenever I found that I did not good enough or encountered problems, like to reflect and summed up, but because of the bad habits of the past, resulting in my final writing things are always like a professional tutorial, This also leads to some children mistakenly think I am a professional, in fact, it is not so, I write out is not necessarily a professional article (sometimes just like this), I just think this topic is worth exploring, worth sharing, and worth the effort to continue. So, also please do not reprint everywhere.
-————————————————————— a low-key split line ——————————————————
Wireframe is an essential output of interaction designers, and it plays such an important role in the work of interaction designers that interaction designers are often considered to be a wireframe, but the meaning of the existence of wireframe is not necessarily sufficiently understood by both the designer and the project team members.
- Why does the project need a wireframe?
- Why not shorten the cycle, jump directly to the visual design?
For designers, the same questions exist:
- What's the value of wireframe?
- When we want to do wireframe training, the questions are:
- Isn't it just a sketch? Still need to learn?
If we all think of wireframes as "sketches", then, according to normal logic, the output of the sketch must be faster than the visual manuscript, not slower, but in many projects, why does the time frame of the wireframe cost more?
This is often confusing because, in most people's opinion, the wireframe is a simple, crude, rough draft that has no visual processing, and I have repeatedly claimed that the tool that makes the wireframe is 10 minutes to get started with the Super idiot tool that can be used to build a wireframe, and the wireframe itself does not need to be carefully crafted, Why do you stay on the block for so long? What are the other people doing? Where do you spend all your time?
When I look back at my past projects or see my own projects, I also find out why the past wireframes are longer. and currently in the project, because resources by themselves to arrange, their own pre-scheduled resources, such as only 3 days, the implementation process found too tense, far from enough?
Think again, and found that maybe in these three days, I spent 1 days and a half to build a wireframe that meets the basic needs (in terms of business requirements, this is the main page that everyone can expect, but after 1 and a half days, I started exploring and creating a variety of scenarios, and then found more branching processes and exception handling pages, and then I have absolutely no time left for the discussion and confirmation of wireframe!
And, if the wireframe does not let everyone to argue and confirm, but only to do out for everyone to look over the handover, basically, the wireframe has lost its original value.
Where did you spend your time?
Not all projects need wireframe, but if you need a wireframe, the wireframe needs to stay a little longer and not simply evaluate how much resources are needed from the final wireframe output.
The number of pages to evaluate the workload, in the visual designer may be applicable-based on the product visual style to determine the premise.
(visual designer Resources also need to be divided into two segments, a paragraph used to do exploration, to determine product style, such as theme color, texture, graphics and text ratio and use chart style, etc., this stage also has a relatively large range of review and confirmation, so the time will be more than the specific page visual design more long), Front-end engineers can also use the number of pages and complexity to estimate how many days, but for interaction designers, this comparison is a challenge. Only the interaction designer will discuss the requirements clearly, I will be the page flowchart, the various branches to consider clearly, the brain will gradually need to form the concept of how many pages, which pages need a higher single page interaction design concept, and when he completed this step, the interaction of most of the work has been done, The rest of the simple design of each page, occupy the wireframe phase of a small amount of time. More time is spent on what?
Discussion--review--discussion--review--confirm
Yes, one of the functions of a wireframe is to quarrel with the bearer, the interaction designer for the wireframe confirms the need to convene a number of reviews (depending on the project) until everyone has reached a consensus on the wireframe, and then in some companies, there is a need to test the wireframes themselves for more problems.
80% and 20%
An interactive designer may have 20% of the energy to really spend the online block diagram itself, and he thinks it may be of little technical content. The remaining 80% of the energy, used in:
--The need for understanding and discussion, "I think this tag appears on the search results page, it may not be a reasonable scene ..." "Why only for XX member type Open this function?" "After the business initial demand is confirmed, the interaction designer and the product manager are the most closely matched two roles, they need to refine the business requirement step-by-step, implement to the concrete page and the function realization." The clearer the need is, the more efficient the future phase will be. At this stage, the interaction designer also needs to help itself and the project team understand the product requirements by using the site map, page flow, or storyboard, and so on.
Sometimes, the workload definitely doesn't want to look so little, product managers need to be clear about what to do and why, and they will talk about "how" when they "do", but many product managers are not or are asked not to delve into too many details of the solution, but the interaction designer is different, and must be from macro to detail, The product of the interactive logic seriously thinking clearly, the details of things if not concerned, to the project in the process, but also will be the development engineer to follow up the various processes in the page.
--a creative approach to exploration and experimentation, "What if I have a different way of interacting here?" "Is there a better way to achieve this?" What happens when you shorten one step? "It seems like there was a site that used a more efficient approach, I think?" "All designers have the" qualities "of excellence, or" problems ", and we need to do this brainstorming brainstorm.
Design in itself means the selection and validation of the scheme: perhaps the last designer gave only one or two options at the confirmation meeting, but most of the designers tried many programs in their own computers or in their brains.
Design itself is a kind of exploration under the expectation and limitation, and will be implemented after the exploration of the results. Interaction designers need to constantly focus on the needs and expectations, to explore and in the gradual constraints, narrow the scope of the design. He's doing what he's supposed to do, he should not pass too many question marks to visual designers, and the visual designers themselves need to explore and limit themselves, but we also expect their talents to be applied to the exploration of brand sense, quality, professionalism, and emotional design, rather than distraction to the thinking of product logic.
--the design of the evaluation and validation, as shown above, designers need to separate a lot of energy in the design of the review and confirmation. He first freed himself from his own brainstorming, screened one or two from several scenarios, and then called the needs, stakeholders, and other designers to plan. Sometimes, such confirmation will be held at least for a few rounds:
- First round, wireframe initial examination, the wireframe is basically complete, discuss with the demand side and the technology representative on the wireframe, this is not what the business side wants, it satisfies the business expectation, confirms the overall structure, the definition of the content block on the page, and the participation of the technical side can give advice on the feasibility. and can carry on the preliminary development resources appraisal according to the line diagram.
- The second round, the chart design professional review, so that more designers to participate in the discussion, from the interactive design level to give more advice. This review is a supplement to the first round of review, which is to discuss the design itself in the established business needs and to sift through the best options.
- Third round, wireframe final, the designer in the first two rounds of comments to assess, to make some adjustments to the wireframe, launch the third round of confirmation, business representatives and representatives of the designers, technical side representatives, as well as relevant stakeholders (such as customer service, sales representatives) to preach the design again, tell everyone this is final, final confirmation, Will enter the visual design phase, will no longer do the easy structure and content of the definition of the adjustment, so that we pay enough attention to the line diagram and agree.
In these rounds of review, there are a number of small discussions that need to be interspersed, such as a feasibility assessment, a resource assessment, and a product manager that repeatedly discusses the implications of requirements and requirements. It can be said that one of the functions of wireframe is to discuss, confirm, quarrel, and then in the iteration and confirmation, the final dust settles, pushing the project into the next link.
the challenge of interactive designers
The challenge is not how the wireframe itself is professional, or how fast the wireframe, but in the grasp of demand, mining and rapid presentation, in the whole process of the various ideas of absorption and management, is whether we can quickly understand the design of the cause and background, and to reach a consensus on the program.
Don't let the controversy and problems come into the real implementation, such as visual design, such as development.
Because from the input-output ratio, the frame noisy to the wireframe stage, is the most efficient and appropriate.
There are a lot of creative people that are not equal to the business needs discussion. But not good at fantasy, to the business needs of the document, can not let the creative brain cells active, we can only to the product manager of the Business Plan nod is, but to the wireframe stage, the specific product prototype will inspire more ideas, so this stage, Best suited for the second brainstorming process in product development.
is not equal to the visual design and development link, the line frame is very easy to modify the efficiency. And it deliberately made such a simple and ugly, is to put the core of the need to present to everyone, this product is this, not the product looks like this.
Because, "see", "feeling" will inevitably bring into a lot of subjective factors. The same is red, some people feel too bright dazzling some people feel enthusiastic, and just in the early stage of product planning, we do not want to pay attention to these details too early, we need to solve the most core problems. The visual manuscript is easy to start with in all directions of the discussion, some people are still thinking about whether the product needs to add a function, or in the argument that a function is enough value, already someone started to "yellow" or "red" controversy.
In addition, we have to admit that in the visual design phase, the cost of modification is very high, the visual designer is to each pixel finely crafted, product positioning changes, perhaps for them is "extinction", this may mean that many pages to restart the design, when the visual design has reached a certain point, the visual designer of " Change "slowly will become a bit of resistance, who does not like the birth of their own children?" If a visual designer doesn't like the child he's born with, he may not be a qualified visual designer. But the interaction designer is happy to explore any possibility on the online block diagram, and he will be more tolerant of any idea of the influx, because he understands that this is an intermediate product and does not look like "perfect" to be a child of his own.
To sum up a few words:
1. Wireframe can help us to specific requirements, so as to introduce more ideas, improve products;
2. Wireframe can help us to clarify ideas, how to do, and how to do with a more systematic understanding;
3. Wireframe is very easy to make, so it can help us to evaluate and sift through various programs.
4. Wireframe is used to quarrel, interaction designers need to welcome the fight to contain all kinds of ideas, more importantly, to manage the quarrel.
5.80% of the time is not to do wireframe, but to spend on the needs of understanding and discussion, a variety of design ideas brainstorming and trial, design review and validation, but this 80% of the time to put the remaining 20% more efficient.
6. As an interaction designer, the space for ascension in that 80% will be greater, and in many cases, the remaining 20% is a natural result.
There are a lot of questions to discuss about the wireframe, such as: what stage to start to do wireframe, wireframe tools and methods, the role of several different wireframes and so on, not too much discussion. The above part is also welcome to continue to explore.
