Prototyping – wireframe and prototype Past and Present

By , October 29th, 2015 , Tags: , 0 Comments

Prototyping – wireframe and prototype Past and Present

The writer Jerry Cao is UXPin content makers, also UXPin This online wireframes / prototyping tools online content developers. If you want to learn prototype ideas, familiar with the relevant tools, and complete design flow, then you can download UXPin elaborate "Prototyping Ultimate Guide" (English). This article will introduce you to the system wireframe and prototype development process, understand their development in different historical background, can help you design better practical wireframes and prototypes in the future. Wireframes and prototypes through the development process, you can understand from the side the user experience design of the past, present and future.


Changes in design methodology a direct impact on the location of the prototypes and wireframes throughout the design process, so before you begin to talk prototype, let’s ponder what the current design.

Now: The current design methods

Design up to today, the two most popular design approach is Lean UX and Agile UX, that is, "Lean UX" and "Agile UX". While both sound very close, but two design methods range from the design process to involve all different. Lean UX is closer to the way they operate a business, and agile user experience design is a project close to the execution method.


Once, designers only need to design good content package sent to a developer, then leave a "Good luck" can be chic to leave the money, but this time has gone. Famous web designers, blog writers Brad Frost believes that with the fragmentation of the screen and the device, once the "PSD era" has completely ended, because this packaging PSD delivery, typical of the waterfall development process ( waterfall model), has been unable to cope with the current demands of the market. It is because of lack of design methods, design and agility design lean importance of these two methods is manifested. Although there are many differences between the two design methods, but in general are considered two design methods should be reasonable to combine. UXPin’s CEO Marcin Treder contrast has written over two design methods, a careful look at differences between the two, you’ll find that not so much a confrontation of two ways, as it is complementary.

1. Agile UX

Release of the Agile Manifesto make this new development methods to show in front of everyone, and agile UX designers and developers will be unified into agile development process in the past. Typically, in this process we will follow the following principles:

· And interactions over processes and tools

· Software can work more important than perfection and complete documentation

• Customer collaboration is more important than contract negotiation

* Ready to respond to change is more important than following a plan

Currently, few rules above is considered "the gold standard of digital product development."


Although agile method is not a direct effect on user experience design, but it does enhance the operational mode of cooperation based on the design of the project. In "The Ultimate Guide to Prototyping" We have explored, like this case Design Studio and Cross-Functional Pairing, agile UX designers use meaningful interaction / dynamic efficiency replacement documentation. In addition, Agile UX designers, developers and product managers to communicate more efficiently and intuitive.

2. Lean UX

Lean Startup methodology based on the original model, usually think of a company that released product, must pass before the release study to determine its market position in line with specific requirements, and publish as soon as possible, to promote the waste is reduced to a minimum The degree to ensure the survival of enterprises and products. Lean UX is more focused on the process to bring products to market, so the help of Lean UX design process will find products, publish product is just the beginning.


Some of the core principles of Lean UX:

· Focus on solving problems, verify the customer’s hypothetical ("Out of Office")

· Release to solve user problems smallest possible product

· Collaboration Rapid prototyping ("closed-loop learning")

* Based on a complete wireframe and specifications fast agile prototyping

In a variety of products flooded the market, almost became a lifeboat Lean UX their products to survive.

3, how to get the two together

Agile UX problem more concerned with "how to design products," and more focused on Lean UX "Why this design." Agile UX can help designers transform outdated design and collaborative approach, while Lean UX is specified in the study to measure the quality of products and methods.

Lean UX will advise you by means of A / B testing during the design process for the product continues to research, not only in the prototype design before doing research, empathy, customer visits and usability testing also requires the design and development process continuously.


Since Lean UX is an overall business strategy, so you can still build products using agile methods UX. Team brainstorming, draw concept map and demand analysis, rapid prototyping, and test it. And Spotify also does exactly that, we also have a detailed description in the "minimum available Product Design Guide" for this approach.

Two design methods still have a lot in common: they all emphasize cooperation rather than documented, emphasizing effective sprint rather ambitious timetable arrangements.

In fact, the father of Jeff Gothelf Lean UX once said, Lean UX inspiration "from Lean and agile development theory", so for product and design, the choice of Lean or Agile UX UX is not important, the most essential point is "subtly work, rather than extended periods of overtime," which is both common, but also to promote the rapid prototyping has become an important mainstream thinking.

Situation: Today’s prototype

Although the vast majority of people are staunch supporters of the prototype, but more and more designers began to suspect that the actual value of a static wireframe design. More and more of the design team began to merge frame diagram and prototyping, thereby bypassing wireframes design stage, and as soon as possible to enter the interactive designstage.

In fact, this and became popular in recent years, the design of new tools have a great relationship, if good design wireframes just need a few clicks you can generate prototype drawing and visual draft, then who force will be divided into two stages it? This topic has been discussed in the Quora too many, some experts also mentioned the benefits of "interactive wireframes" (in fact, can also be said to be low fidelity prototype), and they say the reasons vary, but probably are agree with it, "a satisfied two wishes," the advantages of a reasonable combination of prototypes and wireframes.

So, with this in mind, we are talking about the current prototype should say that pixel-precise visual interactive the draft. In the near future, we will see low-fidelity prototypes will gradually replace static wireframes, this will be another milestone in the history of design, and will continue to serve the high-fidelity prototype product demonstrations and usability testing.

Past: Prototype history

Prototyping and tool is closely linked, which is why when you look at the prototype of the development process, the need to be traced back to the 1970s. Interestingly, the prototype design with the rapid development of computer technology, but also engaged in high-density iterative upgrade, then I will list the major events shaping the information age, and they also affect an important milestone in prototyping.

1970– waterfall model of software development in the field of mainstream

The importance of information architecture 1975– be recognized, and begin to develop

1980– Since the development of programming techniques, the earliest digital prototyping (similar flowchart) appear


1985– paper prototypes began to emerge, and the concept of usability testing is used to share

1985– waterfall model is adjusted modified and incorporated into the iterative development and incremental development (IID)

1986– The first visual design software has been developed

1986 – Adobe Illustrator advent

1987– advent of Microsoft PowerPoint (which should be the home for the Apple Macintosh series of computers)

1988– spiral model of software development and promotion advent


1990 – Adobe Photoshop come out (and film history is closely related to it)

1991 – IBM introduced for software development, "Software Quick Development" (RAD) theory

1992– Microsoft Visio published (originally named Shapeware, finally in 2000 was acquired by Microsoft)

1995– Case and UI design layout becomes more comprehensive

2000– In order to meet the growing demand, the emergence of software prototyping

2000– advent of well-known software Omnigraffle

2001– "Agile Manifesto" release, which is also the starting point for later UX agile movement

2003 – Axure appear, this is the most mainstream software prototyping

2003 – iRise Post

2005– a web-based prototype (SaaS) is increasingly common, which is also low-fidelity prototyping class APP open the door, but also became the integration of collaboration and product management opportunity APP birth

2005– MockupScreens advent

2006– Gliffy birth

2006– Cowboy coding, which is set against the theory of programming and modification of software development, this made Google the implementation of the "20 percent time" policy means that allows programmers to divide a fraction of the time out to do their work Anything they want.


2007– Jumpchart birth

2008– Balsamiq advent

2008– Protoshare release

2008– Justinmind advent

2008– fierce competition between startups led Lean UX Movement

2010– technological development to promote the birth of SaaS No code fidelity prototypes

2011 – UXPin birth (paper, mobile terminals, web, responsive)

2011 – InVision advent (mobile terminal page)

2012 – Flinto (mobile terminal)

2012 – POP appear (for paper prototype mobile terminals)

2013 – Marvel (mobile terminal page)

Future: Times belonging prototype 

Our guess for the future begins with our discussion of the existing prototype and wireframe: wireframe and prototype in the form of low fidelity prototype to come together at the same time both the function and organization of the outline.

We will in 2014 as "Year of interactive design tools," and for this purpose the author. This article which, Bloc designer Emelyn Baker explains why this interaction design tool community explosive growth, and include those best tools, including the UXPin. After reading this article you will find these tools more surprisingly, but most of them have blurred the boundaries between functional wireframes alienation between the prototype and visual draft, in fact, you can glimpse from the future.


Old design method gradually by the new tools and new ideas replaced static design and waterfall model will also be recording it on paper heap. New design tools coerced new design method with us toward a new era. Just as we mentioned, as in the "prototype Ultimate Guide" in the new round of design tools we have brought two critical updates:

1, rapid prototyping – in the future, you will encounter more prototype design ideas in the prototyping process, refined manner, frequency changes that will increase and improve the function and effect of the early design phase. Taking into account the current number of emerging design tools already support the full range of prototyping (from static to dynamic support), so you have no excuse not to explore and practice of rapid prototyping.

2, non-mail collaborative – more is prototyping tools already have online communication and collaboration features, which effectively shorten the distance between designers, developers, and related personnel. With all the knowledge, related practitioners flaws early in the design process will be more in-depth collaboration, communication, and related tools will become increasingly popular. (UXPin and InVision is typical)

Discuss the future of prototyping time, another one had to mention hot topic is "microinteractions", which is "micro-interaction." Simply put, a typical use case for the interaction is usually derived from a single purpose – such as unlocked phones – based on the goals and tasks needed to trigger the mechanism, rules and feedback constitutes a micro-interaction. Thanks to a new prototyping tool, micro interaction design focus from the overall product to the user experience is transferred to a single action of user experience and process up, so that details of the design of products rose to a new level as possible.


Micro interaction behind a complete set of logic. UI details of each product (single detail, rather than the sum of all the details) is to allow different products to distance important factor, since many users will actually fall in love with a single detailed APP. FastCoDesign design articles writer John Pavlus interactive micro-called "user experience design of the future", which reflects the recognition from the side of this new field. Micro interaction is interaction design magnifying glass, so those details pleasant memorable become the focus of attention. In order to enhance the appearance of these feelings come out perfect moment, prototyping naturally became an important cornerstone to build the perfect detail.


Forward, not evolution, is destroyed. It can survive, mostly depending on the correct interpretation of aura and early adaptation or not. Wireframes still has its uses, but now more is being wireframe prototyping as a blueprint, which is different from that in the position five years ago, when a wireframe is important as the design process delivery of content, a higher 10 years ago, the importance of wireframes, and its importance is almost equivalent to the product itself.


The prototype design changes over the past decade is obvious, from early product prototypes of interactive contain small pieces of code, to now be able to quickly build and test the user experience for rapid prototyping, the change can be described as earth-shaking. By iteration, prototypes directly disposable for us to overcome the fear of the design and code. In such settings, we have reason to embrace a prototype now, and its future. Similarly, we also which should be closer cooperation, he stressed the importance of early interactive, iterative and flexible implementation will continue.

I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.