Do you understand the past, present and future of wireframes and prototypes?

Jerry Cao, the author of this article, is a content decision-maker for Uxpin and an online content developer Uxpin This online wireframe/prototyping tool. If you want to learn how to design prototypes, familiarize yourself with the relevant tools, and complete the design process, you can download Uxpin's elaborate "ultimate Guide to Prototype Design" (English version). This article will introduce you to the development of wireframes and prototypes, to learn about their development in different historical backgrounds, and to help you design better practical wireframes and prototypes in the future. Through the development of wireframes and prototypes, you can learn about the past, present and future of user experience design from the side.

Source: What does Lean UX Have that I Don ' t?

The change of the design method directly affects the position of the prototype and the wireframe in the whole design process, so before we begin to talk about the prototype, we should first warm up the present design method.

Now: the current design method

The two most popular design approaches today are lean UX and agile UX, which is "Lean ux" and "Agility UX". Although the two sounds very close, both design methods are distinct from the design process to the scope involved. Lean UX is closer to a business approach, and agile user experience design approaches a project's execution approach.

Source: Lean UX vs. Agile Ux-is There a difference?

Once, designers only need to package the design of the content to the developer, and then leave the next "good luck" can be smart to collect money to leave, but this era is gone forever. Famous web designer, blogger Brad Frost believes that the "PSD era" has completely ended with the fragmentation of screens and devices, because the way the packaged PSD is delivered is a typical waterfall development process (waterfall model) that is no longer responding to the needs of the current market. Precisely because of the lack of design methods, lean design and agile design are the importance of the two methods are reflected. Although there are many differences between the two design methods, it is generally believed that the two design methods should be reasonably combined. Uxpin's CEO, Marcin Treder, has written about two different design methods, looking at the two differences, and you'll find that two approaches are more complementary than confrontation.

1. Agile UX

The launch of the Agile manifesto has put this new development approach in front of us, while Agile UX is unifying designers and developers into the agile development process. Usually, in this process, you will follow the following principles:

• People and interactions over processes and tools

• The software that can work is more than the comprehensive document

• Customer collaboration is more important than contract negotiation

• Responding to changes at any time is more important than following plan

Currently, several of the above rules are considered "the golden rule for digital product development".

Source: The Visual Agile Manifesto

Although the agile approach does not directly affect user experience design, it does enhance the way in which collaborative design projects work. As we have discussed in the ultimate Guide to prototype design, as in the case of designing studio and Cross-functional pairing, agile UX allows designers to replace document descriptions with meaningful interaction/action. In addition, Agile UX allows designers, developers, and product managers to communicate more efficiently and intuitively.

2. Lean UX

Based on the methodology of the initial lean entrepreneurship model, it is generally assumed that a company's published product must be researched before it is released, that its market positioning meets specific needs, and that it is released and promoted as quickly as possible, minimizing waste to ensure the survival of the enterprise and its products. Lean UX is more focused on bringing the product to market, so using lean UX to design the product will find that releasing the product is just the beginning.

Source: Lean UX Cycle

Some of the core principles of lean UX:

• Focus on solving problems and verifying customer's assumptions ("out of the Office")

• Release the smallest possible product to solve user problems

• Collaborate to quickly complete prototypes ("Learning closed loops")

• Rapid and agile prototyping based on complete wireframes and specification sheets

In the market flooded by various products, lean UX has almost become a lifeboat for the survival of its own products.

3. How to combine the two together

Agile UX is more concerned with "How to design Products", while Lean UX is more focused on "Why design this way." Agile UX can help designers transform outdated design and collaborative approaches, while lean UX identifies ways to study products and measure product quality.

Lean UX will advise you to continually research the product with A/b test during the design process, rather than doing research only before prototyping, and, similarly, customer visits and usability testing need to be ongoing during the design and development process.

Source: How Spotify Builds Products

Because Lean UX is a holistic business strategy, you can still use the Agile UX approach to build your product. Brainstorm, draw concepts and requirements analysis, build quick prototypes, and test them. Spotify is doing the same, and we have a detailed introduction to this approach in the minimum available product design Guide.

The two design approaches have a lot in common: they emphasize collaboration rather than documentation, emphasizing effective sprints rather than ambitious scheduling.

In fact, Lean UX's father, Jeff Gothelf, once said, lean UX inspiration "comes from lean mode and agile development theory", so for products and design, choose Lean UX or Agile UX is not important, the core point is "clever work, not long overtime", which is the common ground, It is also an important idea to push the rapid prototyping design into the mainstream.

Current situation: Prototype design today

While the vast majority of people are strong supporters of prototypes, more and more designers are beginning to question the actual value of static wireframe designs. More and more design teams are merging the phase diagram and prototype design to circumvent the wireframe design phase and enter the interactive design phase as early as possible.

In fact, this and in recent years the popular design of new tools have a great relationship, if the design of a good wireframe only need a few clicks to generate prototype and visual manuscript, then who will be forced to divide it into 2 stages? This topic has been much discussed in the Quora, and some experts have referred to the "interactive Wireframe" ( In fact, can also be said to be the benefits of the real prototype, they say that the reasons are not the same, but probably all agree with it "one to meet the two wishes," the advantage of a reasonable combination of the prototype and wireframe.

So, with this in mind, the prototype we're talking about today is supposed to be a visual manuscript with pixel precision and interactivity. In the near future, we will see that the minimum real prototype will gradually replace the static wireframe, which will be another milestone in the history of design, while the High-fidelity prototype will continue to serve the product demonstrations and usability testing.

Past: Prototype history

Prototype design and tools are closely linked, which is why when you look back on the development of prototype design, you need to go back to the 70 's. Interestingly, the prototype design with the rapid development of computer technology, but also the high density of the iterative upgrade, and then I will list the development of the information age of the big events, they are also a major impact on the prototype design milestones.

1970--Waterfall model becomes the mainstream in software development field

The importance of 1975--information architecture was recognized and began to develop

1980--as a result of the development of programming technology, the earliest digital prototype (similar flow chart) appeared

Source: Atari Prototypes:tempest (1983)

1985--paper prototypes begin to appear and are used for usability testing and conceptual sharing

The 1985--waterfall model is modified and included in iterative development and incremental development (IID)

1986--the first visual design software was developed

The advent of 1986--adobe Illustrator

1987--Microsoft PowerPoint (should be the Macintosh family of computers for Apple)

The spiral model of 1988--software development is published and popularized

Source: Boehm ' s Spiral revisited

1990--adobe Photoshop (It's closely related to the history of film development)

1991--IBM launches "Software rapid development" (RAD) theory for software development

1992--Microsoft Visio (originally called Shapeware, eventually acquired by Microsoft in 2000)

1995--case presentation and UI design layout becomes more comprehensive

2000--in order to meet the growing demand, the prototype design software appears

2000--Famous software OmniGraffle appeared

2001--The Agile Manifesto, which is also the starting point for the Agile UX Movement

2003--axure appears, this is the most mainstream prototype design software at present

2003--irise Release

2005--Network based prototyping (SaaS) is becoming more and more common, which opens a door for the real-design app, and also becomes an opportunity for the emergence of the app for integrated collaboration and product management.

The advent of 2005--mockupscreens

The birth of 2006--gliffy

2006--cowboy coding, which is a theory of programming and modifying software development, the "20% time" strategy introduced by Google refers to allowing programmers to divide a small portion of their working hours into anything they want to do.

Source: Working Locally Instead of cowboy coding

The birth of 2007--jumpchart

The advent of 2008--balsamiq

2008--protoshare Release

The advent of 2008--justinmind

The intense competition between 2008--startups led to the lean UX movement

The development of 2010--Technology promotes the birth of non-code high Fidelity SaaS prototype

The birth of 2011--uxpin (paper, Mobile end, Web page, response type)

The advent of 2011--invision (mobile end, Web page)

2012--flinto (Mobile end)

2012--pop appears (paper prototype for mobile end)

2013--marvel (mobile end, Web page)

The future: The Age of archetype

Our guesses about the future begin with our discussion of existing prototypes and Wireframes: Wireframes and prototypes are combined in the form of a low fidelity prototype, with both an outline and an organizational function.

We will refer to 2014 as the "year of interactive design tools" and dedicate this article. In this article, Bloc's designer, Emelyn Baker, explains the causes of this interactive design tool community explosion and lists the best tools, including Uxpin. After reading this article you will find that this kind of tool is surprising, and most of them are blurred, functional drift between the wireframe, prototype and visual manuscript, in fact, you can also glimpse the future.

Source: 2014-the Year of the Interactive design Tools

The old design method is gradually replaced by new tools and new ideas, and the static design and waterfall model will become the record in Hing. New design tools carry a new design approach that takes us to a new era. As we mentioned in the ultimate guide to prototype design, a new round of design tools has brought two critical updates:

1, rapid prototyping design-in the future, you will be in the prototype design process more prototype design ideas, refinement methods, frequency changes, these changes will enhance and improve the early design phase of the function and effect. Given that many of the emerging design tools already support a full range of prototyping (from static to dynamic support), you have no excuse not to explore and practice the rapid prototyping design.

2, non-mail collaboration-more and more prototype design tools already have the function of online communication and collaboration, which effectively shortens the distance between designers, developers and related personnel. With the understanding of early design process flaws, the practitioners will collaborate and communicate more deeply, and the relevant tools will become more and more popular. (Uxpin and Invision are typical)

When discussing the future of prototype design, another hot topic that has to be mentioned is "microinteractions", or "micro-interaction". Simply put, a typical interactive use case is usually derived from a single purpose--such as unlocking a phone--that is based on the trigger mechanism, rules, and feedback required for this objective task to form a micro-interaction. Thanks to the new prototype design tool, micro-interaction will shift the design focus from the overall product to the user experience of the user experience and process to a single action, so that the product detail design to rise to a new height is possible.

Source: Microinteractions

There is a complete set of logic behind the micro-interaction. The details of each product's UI (a single detail, not the sum of all the details) is an important factor in getting different products apart, in fact many users fall in love with an app for a single detail. Fastcodesign's design-type article, John Pavlus, called the micro-interaction "the future of user experience design," which reflects the recognition of this new area from the side. Micro-interaction is the magnifying glass of interactive design, which makes the most enjoyable and memorable details a focus of attention. In order to improve the appearance and feeling of these products, the prototype design becomes the important cornerstone of creating perfect details.

Deep understanding of micro-interaction: micro-Interaction: detail Design Achievement Excellence Product

Conclusion

To move forward is not to evolve, it is to perish. Survival depends largely on the correct interpretation of the Aura and the early adaptation. The wireframe still has its use, but the current wireframes are more of a blueprint for prototype design, this is different from its position 5 years ago, when the wireframes were the important deliverables of the design process, 10 years ago, the importance of the wireframe is more important, it is almost equivalent to the product itself.

Source: The Future of UX design

And the change in prototype design over the last more than 10 years is also evident, from the early prototyping of the product, which contains small snippets of code, to the fast prototypes that can be quickly built and used for user experience testing today. Through iterations, the prototype directly overcomes the fear of design and code for us. Under such a setting, we have reason to embrace the present prototype, and its future. Similarly, we should also work more closely together, emphasizing the importance of early interaction and the flexibility of iterative implementation.