20 steps to draw a wireframe: know when to end

The biggest mistake for any development project may be that there is no plan. Recently, some people think that without planning before the start, a good developer needs to be resourceful. I am sure that this approach is doomed to failure in the end.

Wireframe is the first and most important step in the plan. This is the first step in translating ideas into a program that customers use. This article will take you through the entire flow of wireframe, including involving participants, tools, etc., so that you can make a better plan.

1 Understand your goals

As a developer, I think we all have the urge to sit down and start coding at once. Usually the initial idea is simple, so can you really just sit down and start? The answer is no, the project is rarely that simple, and anyone with experience knows that there will be many such problems waiting for you.

A wireframe can effectively provide your productivity. It is much easier to modify the content of a plan than it is to come after the job starts.

This process also contributes to a deeper understanding of the project. Plan ahead and ask questions and comments in order to solve the problem.

Ultimately develop a work plan, planning designers, developers, engineers and project managers of their respective work content, and to ensure the coordination of all aspects.

2) heavy function, light appearance

The different effects of the plan show are mainly embodied in the diversity of the tools used. In fact, it's basically about the functional part of the application, for example, a Web page will have 3 text boxes and 2 buttons. This is a function rather than a form.

At Howard Baines we strictly follow this principle, and our wireframe includes only a few functional elements (wireframe, buttons, pull-down menus, etc.). We ignore any visual and layout things. Other people might do a little more, including the layout and other visual elements. It depends on you.

3) accumulate own experience

Does not necessarily require you to have the ability to design and develop, but need to be in the Web application or Web site experience. Of course the richer the experience the better, and you do not need to understand the relational database just draw the wireframe.

4) Determine the person in charge

Make sure someone is responsible for the whole project. They are responsible for follow-up and management of feedback, changes, etc. If a project, then usually the person in charge is the initiator, because they know the goal more clearly. If we provide services to our customers, we will be responsible for the planned process. Whoever it is, as long as someone is responsible.

5) involving everyone

Perhaps not the first meeting, a simple solution must be locked on paper and the idea of a key stakeholder is involved. Rarely, the people involved speed up the design process. At the same time, the development of wireframe involves both your team and the customer team. For example, you are consolidating your application or Web site with your existing database, and then making sure that the database owner can detect the data fields in all databases before you add them to your wireframe. Collecting the user's fax number is not good if there is nowhere to store it. The same level of designers have a good understanding of the user experience, and there are potential problems in the early flow.

6) Completion time

Pre-set time and delivery deadlines are important to keep the project running. The initial wireframe meeting can be a day or a few days, depending on the size of your application, but you need to set a period and stick to it. Follow up after the meeting to maintain the project process.

7) Keep clean

If a special Web page requires two text boxes and a button, then as long as there are these can, not much.

8 Avoid the design of the line block diagram too much

Wireframe as long as the description of how to achieve the required functions, does not include any introduction and design content. Any design-related content should be avoided as much as possible, so it is easy to distract customers. For example, to add some blue in order to be more vivid, it may take half an hour to explain the meaning of blue. The content of these designs should be the work of the designer.

9 Remember that the user interface is not a user experience

It is extremely tempting to think of some of the introduction methods used, such as Ajax. Note: A wireframe is a method of functional elements rather than a presentation or interaction of scenarios. In order to more intuitive display applications, should try to avoid Ajax, should focus on the wireframe.

10) think about the user

This is obvious, but it's easy to overlook when planning a wireframe. Our focus is on functionality, but also consider the user experience. For example, if you make a three page long registration form, you may find that many people are unable to complete it.

11) Don't be lazy

We often hear: landing page is simple, you can not write the online block diagram. Make sure that the wireframe contains all the contents of the plan. You should have a detailed description at the end of the project. Each step should not be ignored.

12) dividing the wireframe into several parts

A site map or application is often divided into several sections, such as news, products, and user accounts. This is easier to understand.

13 Number of pages

The application of a Web page often contains a number of programs; The settlement is a good example. is usually linear, but sometimes the user chooses different steps, such as skipping a step. Obviously some of the pages in your document and the tags on the page (for example, clicking the button) let the user jump.

14) repeatability

Consistency in applications can effectively help users, developers and designers. Repeating elements of a group is a good thing. For example, whichever user enters an address, it will be the same place in the same command. You can represent it when you plan a wireframe.

15) It is meaningful to check all

The final document should be easy for anyone to manipulate. If it's just a development that can understand your wireframe, then there's definitely a problem. Finally ask the people who have done nothing about the project, if they can understand it.

16) Advertising is also a function

Many websites have fee-based ads, which may be as simple as Google's ads, but they are functional rather than design, so they are included.

17 This is not just a public site

Many sites have a management area to manage content, browse registered user profiles, reset passwords, and so on. This feature is not available to many people, but it is also important. Many times this may contain some data that is not publicly available (such as the user account enabling button). This is useful for developing information that is important when designing a database.

18 know when to end

Ensure that all stakeholders have the opportunity to give feedback, but do not make this exercise a painting of the Sistine Chapel. Usually, it can be said that three steps will be able to determine the work. First, write your thoughts on paper, and second, get feedback from others, such as development and designers, and the third final.

19 Choose the right tool

Use paper and pens to capture your ideas and ideas more than you can with a computer.

Once you start designing your documents we recommend using the tools you prefer. For example, developers can use Microsoft Visio, project managers in PowerPoint, and designers with Adobefireworks.

I think the wireframe should be a document rather than just interactive (like design, which may be distracted) so designing HTML may not be the best.

There are a number of wireframe tools, such as Balsamiq, which provide an environment to help quickly add and customize universal interface elements. They can give it a hand-painted feel and provide a visual tool instead of really starting the design.

20) Consideration of dependencies

Does everyone know what the process of a shopping cart is? So it's easy to draw a wireframe and put it on one side. If you use a Third-party payment tool such as PayPal? Then it may affect some of the site's work. Study dependencies and make corresponding changes. This is easier to do at the beginning.

Hopefully this article will provide a clear picture of the frame of mind, who participate, how to complete, how to use the tool, the final output how. The final thing is that a good complete wireframe can save you time.

Do you have any other cheats that you can draw out of the block diagram faster?

Original English: carsonified.com/blog/features/20-steps-to-better-wireframing/

Article Source: ued.alimama.com