ui-ux-design-concept-difference-between-wireframe-and-prototype

Basic UI/UX Design Concept Difference Between Wireframe & Prototype

The terms of ‘wireframe’ and ‘prototype’ are always get confused by designers, despite the experienced designer, possibly due to the misunderstanding or some other reasons. Actually, these two UI/UX design concept difference between wireframe & prototype is quite obvious and different. Now, let’s distinguish the two terms clearly.

What is a Wireframe?

Wireframe is a low fidelity layout of the design which has 3 simple but direct targets:

1. Presents the main information group

2. Draw the outline of structure and layout

3. Vision and description of the user interface

It will be your product’s main structure after you created a wireframe correctly. Just like the blueprint of a building, it describes details clearly and specifically.

Visual features of wireframe

Wireframe exists very obvious visual limitations. In general, designers only need to use lines, boxes, and gray color (different grayscale indicates the different level) to complete.

Simple vector wireframe

The content of a simple wireframe should include pictures, video, and text etc. Thus, the omitted will be replaced by a placeholder, picture be instead by a shaded, and text will be replaced by some symbolic words according to the text layout.

Advantage of wireframe

The building of wireframe is fast and cheap, especially if you use these prototyping tools such as UXPin, Mockplus, Balsamiq, and Axure. Of course, you should use these tools to do it at the very beginning.

Compared with a complete and detailed high fidelity wireframe, gathering feedback is much more important. Why? Because people pay more attention to software functionality, information architecture, user experience, user interaction flowchart, and it’s usability, rather than considering the aesthetic characteristics of these elements. Meanwhile, in this case, you can easily modify it according to demand, but not need to adjust coding and graphic editing.

Interactive wireframe

Sometimes, designers prefer to improve the fidelity of wireframes to enhance the importance of user interface at some aspects and display the rationality of interaction between fast test and the visual elements. Program to address these problems properly is using interactive wireframe, also known as the clickable wireframe.

If you want to create such a complicated wireframe, then you need UXPin, which is a tool for wireframing and prototyping design. Interactive prototyping may be the best presentation to developing team and clients. When you came across the problem that “what it will happen when I clicking this button?’’, you just need to click and show to your clients how it works on the interactive prototyping. Indeed, it’s quite impressive and direct.

Show wireframe cautiously

You must be cautious about the guy who is totally a layman when you need to present your wireframe to him. He may be your client, also may be a non-technical manager took part in the cooperation. But he does not know the truth that the wireframe and the final product may seem unrelated. So, he may not understand the intrinsic link and operation mode between them. Thus, you need to figure out a proper decision whether you need to present and how.

This is an app user operation flow chart sketched by Fernando Guillen. Of course, it’s undoubtedly the early design version.

A wireframe is the most important part of a design. When you saw this flow chart, you’ll understand why it’s time-consuming to explain what is called wireframe and why we need to use wireframe. Or, you just skip this step.

Prototype

The requirement of a prototype is higher than wireframe/interactive wireframe, it must be a high fidelity prototype which is interactive and fit the final user interface as much as possible.

The target of prototypes is quite obvious: to simulate the interaction between user and interface as realistically as possible. When a button is pressed, the corresponding operation must be carried out, and the corresponding pages must appear, try the best to simulate a full product experience.

Visual features of prototype

Undoubtedly, the prototype must include the aesthetic features of a product that should have, and try to fit the final version. Basically, it’s a skin of a product, no HTML/CSS/JS involved, and not necessary to consider the server and database.

Advantage of prototype

Why it’s so important? Because prototype is usually used for users to test product. Prototype test at the very early stage can save a lot of developing cost and time. So that it won’t waste the effort of back-end product architecture due to the unreasonable interactive interface. So, prototype is a perfect progress to test product for designers and developers.

Besides, providing prototypes with users to collect feedback, that’s benefit to have an insight into all the details of your product, and inspire the whole team. Many of the prototyping tools can build prototypes quickly and efficiently, but no coding needed.

Design flow

After you have insight into the essence of design and known the difference between wireframe and prototype, you are standing in front of the user experience design world.

If you can concrete the series of product design into a cohesive and effective work flow, amazing thins will happen.

Tips

Try to use editable and reusable elements when make wireframe. In that case, you just continue to refine the elements to complete prototypes based on wireframes.

When you make wireframes, try to gather thoughts and opinions from your team and clients, and try to reflected them on wireframe designs.

Use your most handy tool.

UXPin

UXPin has built more than 900 kinds of different UI elements for you to create wireframes and prototypes.

Proto.io


Proto.io is a very robust prototyping tool, and it can export HTML / CSS code based on a prototype, and interactive prototype for touch screen, which allowing users to test on actual devices.

Balsamiq

A popula,r long-lasting wireframe tool only for static wireframe.

Moqups


This tool supports to make wireframe directly online.

Mockplus

Mockplus is the all inclusive prototyping tool for fast interaction, fast design, and fast previewing. It allows to create mockups for mobile (Android & iOS), Desktop(PC & Mac) and web apps.

Axure

As a most popular wireframe & prototype design tool, do we need more introduction of this tool? I think no.

Protoshare

This tool also can make wireframes & prototypes online.

InvisionApp

This tool can help you create usable prototype, you cannot draw anything, but you can add links between different screens.

The 5 Best Free Wireframe Tools for Mobile Apps You Can’t Miss Out

The flourishing of various mobile devices stimulated the explosive growth of the mobile Apps. From the rapid development of the mobile market, we can see it’s an age of accelerating technology on mobile App design and development. One of the most important part during App development is building wireframes which can reasonably organize and simplify the content and elements.

Low fidelity is the key feature of wireframes. It will present the design idea and App prototype of the product in a more intuitive and simple way. In addition to saving time, wireframes but also provide great advantages for designers focusing on product user experience. Here is a list of the 5 best free wireframe tools for mobile apps in 2017.

1. Paper prototyping

Pricing: free forever

Pen & paper are the total free wireframing/prototyping tools, no matter from the point of time & capital cost, usability, learnability, as well as the practicability. Comparing with other wireframing tools, the most important is that the pen and paper are free and easily get. Wherever you are, you can draw a wireframe with a few lines in a short time. But personally, I think the paper prototyping is not suitable for big projects, but only the small one. The large program may cost you a lot of energy to save widgets and present the whole project.

2. Balsamiq

Pricing: Free trail -30 days

Pro version -$89

Do you like the hand-drawing of paper prototyping? But don’t want to be distressed by the pieces of paper widgets? Try Balsamiq. You can build a hand-drawing style with this wireframe design tool. One of the reason to focus on the sketch style is that it could help to make the designers and clients focusing on the function, layout, and idea of the product. So that you won’t hear the picky client say he don’t like the color of buttons or other elements.

The built-in components and icons can basically meet the drawing requirements of wireframing design for mobile App. Simply drag out an iPad, iPhone, or Andrew interface template, put the needed components in the container, you can build a mobile App wireframes fast and easily.

3. Mockplus

Pricing: Basic version -free forever

Pro version – $129/year, perpetual license – $399

Mockplus is a wireframing/prototyping tool that showed up in the recent two years. It could be the best free wireframe tool for mobile apps, because it has a perfect support on mobile App wireframing. You can find Android, iPad, and iPhone templates in each size according to your specific needs. Besides, it also supports to customize the project size. So sweet. If you need a landscape App interfaces, that’s easy!

There are 200 built-in components and 3,000 icons, no matter you need a static wireframe or interactive prototype, that’s easy to make out by dragging and dropping. Do you know how long it cost to set an interaction? Only 3 seconds! It also provides with good after service that makes Mockplus get reputation among China and other countries.

4. Wireframe.cc

Pricing: Free trail -7 days

Single user – $120/year, enterprise – $990/year

Wireframe.cc is an online static wireframe design tool. If you are a fanatical minimalist designer, then this tool should be your dish. You can easily get started on the website, even without registration. The interface is super and concise, designers will not be disturbed by the cumbersome website introduction or the boring popping box, and the maximum concentration will perfect your design.

5. Justinmind

Pricing: Free trail -30 days

Single user – $19/month, perpetual license – $495

Justinmind is a high-fidelity wireframing/prototyping tool. By contrast, it is more exclusive on mobile App design than the current mainstream design tools, due to the good support in gesture operations, transitions, interactive effects, and so on. This is also the effective grantee of its high-fidelity prototype. While the high fidelity prototype also means that you will spend more time and energy.

All the best free wireframe tools for mobile apps are listed above. Hope this list will help you choose a good design assistant. If you have any other wireframe tools recommend, please feel free to add it to the comment area. Let me see you!

featured_multitask

What is a Full Stack Designer in 2017? Will You Be One?

Compared to the Full Stack Designer, we seem to be more familiar with the Full Stack Developers. So what is full stack designer exactly? Can we simply think he/she is a versatile designer?

In the past, designers and developers have a clear role assignment. They rarely do the both at the same time. While with the changes in product design and the evolution of team collaboration, many web designers are able to manage web developing and UX design at present.

So there comes a question: what’s the character of the so-called full stack designer? He/She is only a designer? Also coding while being a designer? Or he/she is a designer as well as a web developer?

What is a Full Stack Designer?

In fact, the concept of Full Stack Developer came out earlier than the Full Stack Designer. But full stack does not mean to do all. Specifically, it refers to a person who masters muti-skills and he can use them to independently complete a design or product development.

That means that a truly full stack designer can build a basic conception of a project, and complete the whole design and development related works. Such as the wireframes/prototypes design, visual design, and the front coding, JS / jQuery, etc.

The Emergence

The come out of the full stack designer is not accidental according to the current situation. With the outbreak of mobile Apps and the arrival of the entrepreneurship tide, there are many small development teams who cannot set full positions. That forced the team members to play multiple characters in one position. You can always see the developers not only coding but also build prototypes with the prototyping tools (Mockplus,AxureProto.io)

The Advantages

Comprehensive thinking is the biggest advantage of the full stack designers. A designer who is familiar with the product development and design process, he knows the limitation of product design. So that he can clearly control the expectation of the product design. Familiarity with the process can make the team more convenient to understand the development, marketing, and user experience details. This will make cooperation more seamless, reduce rework and unexpected situations.

The Importance

The full stack designer can analyze and customize his own “skill tree” according to his own situation. He can clearly know the structure of the product, the progress of design and development process. He is a multi-skill person who can use user experience, design patterns, techniques, and tools to complete the product development. And then, the whole progress will be more systematically, and the product will be better.

Focusing on the whole program, that is the most obvious difference between the normal designers and the full stack designer. If you are one of them, it will undoubtedly add a great value to your team. And if you are a freelance designer, it is necessary to be a full stack designer.

What Makes a Great Full Stack Designer?

However, it’s not a requirement for full stack designers to master anything perfectly. Taking the web design as an example, you will understand well about their roles:

Assist the product manager

Complete the pre-concept for the entire project, brainstorming, mood boards, basic planning

Prototype design

Wireframes, visual draft, low/high fidelity prototypes

User research

User experience

Test

Front-end development

HTML, CSS, JS, etc.

The handover with the programmer

Understand the interface and the development of the deep demand, how the front-end code will be more matching backend and the program.

Conclusion

To become a good full stack designer, you are destined to keep learning and enrich your skill-tree. But please note that you should choose a right industry and direction to follow up the design trend and technology, new pattern, and new tools.

top-web-design-trends-2017

Top 10 Web Design Trend Predictions for 2017

The innovation of information technology continuously pushing forward changes in web design. From the beginning of the 1990s, web design has undergone many changes, from the original text page to the current popular responsive web.

Under the rapid development of the design wave, the web designers are increasingly concerned about the development of the design trend. The annual web design trends forecast almost become a must-read subject for most of the web designers. Here are 10 web design trend predictions for your reference.

1. Bold Typography

More and more companies are turning to large, bold typography to anchor their home page. This style is best suited for simple page layouts, such as the following Big Youth from France.

2. Bright Gradient

The colorful gradients are always eye-catching design. Headquartered in Zurich, the agent Y7K shows a perfect example of how they use a full-screen, full-grained home page that explains how to make this two-color effect look more fresh and modern.

3. Vivid Color Layer

Staggered, overlay colors add depth and texture to simple site layouts, such as the example from the Melissa Meio-Fio team. Color wields enormous sway over our attitudes and emotions. See how to use the psychology of color to increase website conversions.

4. Conversation interface

Intelligent chatbot and conversation interface occupied the topic list of 2016. Clearleft’s co-founder and CEO, Andy Budd, believes that the rise of chat robots, voice UIs, and smart assistants will continue, but it will not last.

5. Virtual Reality

VR has become the mainstream in 2016. The VR technology could be able to experience in the browser now. Thinkbot chief design officer, Kyle Fiedler, said he wanted to see how the popularity of virtual reality grow and how the designer to fit it with the web design.

6. Micro-interaction

Kevin Ball believes that in 2017, micro-interaction will be more and more applicable into mobile applications, and become more specifically for the mobile device. Here is the methods for using micro-interaction on your site.

7. Emotional Intelligence Design

Design researcher Pamela Pavliscak thought that in 2017, we will see the web design turn to emotional intelligence design.

8. Better Collaboration with Design and Development

In addition to the cooperation on design sprint, designers and developers will use the software to improve collaboration.

“The designer’s toolbox will continue to mature.” Fantasy’s Peter Smart predicted. Adobe’s ruling era has passed. In 2017, with better prototyping tools such as Mockplus, InVision, Webflow, we will see designers and developers break through the islands, understand each other, and greatly improve the workflow speed.

9.Merging of UX and Service Design

Andy Budd said the user experience design and the service design will eventually be combined in 2017. “Over the years, these related disciplines already have a different market and practice communities that can be understood. However, as more and more services are digitally delivered, and as more and more digital products use services as connective tissue.These two areas will begin to merge. ”

10. Credibility is the King

The content on the page is updated at millions of units per minute, and what sites are credible? What content is credible?

Jakob Nielson has listed numerous ways a website can communicate trustworthiness:

The quality of the design itself.

Basic transparency.

Comprehensive background.

What do you think is the biggest web design trend in 2017? Please put your thoughts in the comments below!

———————————-

You may also interested in:

5 UX Design Trend Predictions in 2016

ui-ux

What is User Experience? What Makes a Good UX Design?

With the development of the Internet, the term of User Experience has become a keyword of the Internet product development. The definition of the user experience is notso absolutely, and it is also not so sacred and inviolable for ordinary people. In recent years, all peoples are talking about user experience, it seems that everyone can be a UI/UX designer, as the popularity of design in the world. But what is it? What is called as a good User Experience Design?

What is the user experience?

User experience (UX) refers to a person’s emotions and attitudes about using a particular product, system or service. It includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency.

What is User Experience? What Makes a Good UX Design?

user experience

The concept of design, like the Internet, is increasingly becoming a necessity in modern life. People are increasingly talking about the user experience, and even regarded it as the most critical factor of Internet products to win the market. But when it comes to what the user experience is, people cannot give a clear expression.

People asked what’s the essence of the user experience? I have seen a very interesting answer: lazy. That is, users want to pay the minimum cost to meet their own needs.

1. The user experience is the whole process of the product.

Paul Hersey described his understanding of the user experience in his article USER EXPERIENCE FOR PRODUCT DESIGNERS: UX is a concrete, replicable process which is divided into five major steps:

Prerequisites: User stories, user traffic

Exploration: sketches, wireframes, information structures, prototyping (Axure, Mockplus, Invision)

Design: model, hand-off

Quality assurance: speed, error, details

Feedback

What is User Experience? What Makes a Good UX Design?

the 5 steps of ux design

2.UX is a specific role (function).

Catalina Rusu exposed the myth of UX in her article DEBUNKING THE UX MYTH. OVER AGAIN. She thinks the UX designer is essentially a commercial designer. “UX designers are the strategists who are building solutions for building a well – documented plan, and their thinking patterns are deep – rooted design ideas defined and promoted by IDEO.

In the article, Catalina further described her understanding of the UI designer also is UX designer. In a nutshell, unlike Paul’s point of view, Catalina argues that the user experience is a process of designing a business goal and strategy.

What is User Experience? What Makes a Good UX Design?

ui ux

3. UX is the UI

Mike Atherton thinks that the user experience is the user interface in UX IS UI. He pointed out that “UX is not a UI” from a simple distinction between interface design and ease of use.

 

What is User Experience? What Makes a Good UX Design?

ux is not ui

 

These three are different understanding about UX. What’s your understanding about it? And, how do you evaluate a good user experience?

Many people don’t know that when they evaluate the user experience, it is actually the usability of the product. Specifically, the usability of a product consists of three aspects:

The Usability: Improving the ease of use of the product is the work of interaction designers. It is including the ease of learning and efficiency.

Easy to learn refers to the user in contact with a new product, it is best to learn it easily and naturally.

The content of efficiency includes easy manipulation (Fitz’s Law), simple steps (the number of clicks to complete the task), clear navigation (always know where they are, not lost).

The satisfaction: The user’s greatest satisfaction comes from the value (usefulness andusability) provided by the product, as well as the experience in terms of performance, vision.

The Usability Assessment: There are many ways to evaluate usability: Heuristic evaluation, user testing, questionnaires, user interviews, and performance testing.

Natural UX: It is not only reflected in the interaction design, but also a way of thinking. For any interface and interaction, it suitable for the idea of “don’t make me think” or “whether everyone can use it naturally”.