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.

uxuiguy

To Be An Advanced UX Designer, What’s Your Next Step ?

Since Donald Norman put forward the term of “user experience” in the 1990s, but if you want to be an advanced UX designer, you have many to do. The UX design industry is still a new area worthwhile to explore and learn, and the market demand for the UX designer continues to increase at nowadays. So today we will introduce the user experience related to the design and use of interactive products, and list the best learning UX design resources to help you advance to be an advanced UX designer.

We Fix UX

The blog designed and run by Paulina of Rome and Pauline Makuch. You will find a lot of case studies and topics here.

What’s Your Next Step to Be An Advanced UX Designer?

UXkwadrat

Articles about UX are divided into categories: analysis and research, research, design and interesting facts. Just getting started!

What’s Your Next Step to Be An Advanced UX Designer?

UX Recipe

A checklist, through it, you can see how you stand with the project, and even calculate the cost.

What’s Your Next Step to Be An Advanced UX Designer?

DT Telepathy

If you are not totally Greens of UX, we encourage you to review the blog team from DT Telepathy, the Topics about-Uxowe.

What’s Your Next Step to Be An Advanced UX Designer?

Usabilla Blog

It’s a pretty good blog, although it still at the beginning stage and we cannot sure whether they call themselves Usabilia or Usabilla, or due to the selected font. There are a lot of texts about UX, as well as digital marketing.

What’s Your Next Step to Be An Advanced UX Designer?

UX Intern

Monthly podcast interviews with UX designers.

What’s Your Next Step to Be An Advanced UX Designer?

UX Checklist

This is a very helpful UX checklist, which will carry you through the entire process and all the steps in the creation of User Experience.

What’s Your Next Step to Be An Advanced UX Designer?

UX Booth

A professional blog that covers many articles about UX. You can read about the UX analysis, and the story about the philosophy of usability and research.

What’s Your Next Step to Be An Advanced UX Designer?

Mockplus Blog

Popular design tools, the latest design trends, popular shared design skills, and the classic design books, etc, all you can find here.

What’s Your Next Step to Be An Advanced UX Designer?

UX Movement

Do you want to know why Hamburger menu will help you increase conversion? Are you looking for a variety of well explained examples of how to design buttons, navigation and how to decide grid? UX Movement is best for you.

What’s Your Next Step to Be An Advanced UX Designer?

Design Talks – UX

On this site, you will find more than 350 talks about design, including almost 50 of UX design. By subscribing to their newsletter, you will receive 1-2 the best design speeches of the conference from all over the world on each email.

What’s Your Next Step to Be An Advanced UX Designer?

UXPin – Ebooks

UXPin is not only launched one of the most popular tools for prototyping, but also pushing about the free eBooks to designer on UX, information architecture, flat design, mobile typography, usability testing, design, responsive design, etc. There you will find some of the best e-books available online for free, with a mass of useful links, examples and case studies. Check out the UXPin blog-a mine of knowledge on strategies, the interdepartmental cooperation, design, ux.

What’s Your Next Step to Be An Advanced UX Designer?

Udemy – UX Course

On the popular learning platform Udemy, you will find more than 60 courses about the User-Experience (including 6 totally free) at different levels.

What’s Your Next Step to Be An Advanced UX Designer?

UX Mastery

This site dedicated to the whole User Experience. In here you will find articles, sources (books, podcasts, courses, conferences, technology, tools, etc.) . And there is a forum where you can exchange ideas and comments with other designers.

What’s Your Next Step to Be An Advanced UX Designer?

UX Design

The blog was run by Matt’s July of K2’s UX department. He has written articles about user experience, service design, interaction design, information architecture, usability, and HCI (Human Computer Interface), which allows people to interact directly with computers directly through the user interface.

What’s Your Next Step to Be An Advanced UX Designer?

What is UX? Infographics

This article is about the differences between User Experience and User Interface. With the help of inforgraphics, you will understand what is ux more intuitively.

What’s Your Next Step to Be An Advanced UX Designer?

UXbite

UXBite, which is the tasty morsels about UX prepared by 3 UX Designer. In this site, the articles are categorized from the usability testing, interaction design, usability, and design patterns. These will take you to understand the UX. In the downloads section, you will find other content about the career Report in UX or checklist test with users. The blog has stop update for a long time, but you can also find many helpful things.

What’s Your Next Step to Be An Advanced UX Designer?

c0c8b9e7-cf46-4ac6-963f-fb0bebfe23ac

Step-by-Step Guide: Become an Excellent Interaction Designer

In recent years, with the rise of the Internet industry, designer quickly became a popular profession. The thriving designer career trends attract more people to join in the industry; especially the excellent designers are hot needed. According to the different job descriptions, designers are divided into several categories, such as interaction designers, visual designers, user experience designers, web designers and so on. Today, our protagonist is the interaction designer.

What is Interaction Design?

The interaction design was put forward by the founder of IDEO, Bill Mogridi, in 1984. At the beginning, it’s called Softface, and then renamed “Interaction Design”, that is what we called the interaction design today. An interaction designer is a profession that focuses on the interaction mechanism between product and the user. That means with the help of interaction designer, it will allow users to use the product simpler and easier, experience the product more intuitively, and ultimately feel the value of the product.

In the process of interaction design, designers will be responsible for creating compelling pages and UI by the consideration of logical operation and thoughtful action. A successful interaction designer is the one who good at using technology and good interaction rules to create an ideal user experience.

The Composition of Interaction Design

Bob Baxley divided the interaction design into 5 parts in his “Introducing of Interaction Design“:

Human/machine communication – the transmission and translation of information between equipment and users.

Operation and feedback – this requires the designer to understand and anticipate how interactions unfold over time, designing for the wide range of permutations that can occur.

Status – the presence of a different state to ensure users understand what is happening, and why the application gets into this state.

Workflow – let the user understand who can do what, and what will happen next.

Failure – failure is bound to occur, it must be considered within.

Abilities of Interaction Designers Needed

User research

Product (concept / function) design

Interactive Design

Visual design

Engineering technology

From the point of the current trend, interaction designers should have composite skills, not only to produce prototypes/wireframes with Axure or Mockplus. The interaction designer is a character across design, development, creative and marketing teams. He will help with these teams to build design strategies, establish key interactions for products, create the concept for prototyping test, maintain technical updates, and ensure that products keep up with the latest trends.

How to Become a Good Designer

In this so intense competition environment,have you still keeping the attitude of “Let things drift if they do not affect one personally”? The time what you only care about your own world has passed. What the interaction designers should keep in mind has been more than the basic concept of the “design”. The excellent interaction designers are standing in the user’s position to analyze problems. They know how to bring the user role into the design that can create the excellent works. Here are 4 tips for your reference.

1.Write a blog. Communicate stories with design, express emotions with stories.

2.Communicate with the users.Understand the interaction and preferences of users.

3.Communicate with peers. The power of sharing is infinite.

4.Learn some coding knowledge.Jump out your limited thinking.

Goal: to Become a Knowledgeable and Specialized High-End Designer.

If you understand the concept of the designer and know better about prototyping tools than others, such as the popular Axure, Mockplus and etc, that will much helpful to be a good designer. Moreover, with a good combination of tools and theories, your promotion will be not far away, won’t you? It’s bound to be along way to become a professional designer, just be patient, and you will gain what you want.

qq%e6%88%aa%e5%9b%be20161214194950

Mockplus Christmas Sales & Giveaways for Year End – 64% Off

The holidays are really the most wonderful time of year, and this year Mockplus wants to make them as excellent as possible for their beloved customers. As 2016 Christmas comes around the corner, Mockplus is offering up to 64% discount for its annual billing subscriptions from this page, with no promo code required. Furthermore, here is a round-up of bonus deals for folks working on creative projects. Let‘s go and see more detailed information.

Save 64% Off Mockplus on Annual Billing

Giving user experience and happiness the highest priority, Mockplus now decides to give special 64% discount to reward all existing and new customers. On the regular basis, the monthly price of Mockplus Pro version is $29; while through this promotion link, anyone will be able to enjoy the promotion price of $10.5 per month and save more than 220 bucks while purchasing. Note that, this Christmas promotion will start from Dec 14, 2016 and last until Jan 15, 2017.

qq%e6%88%aa%e5%9b%be20161214194950

 

More Offer for Some Other Offers for University & Team,  please check it at here: www.mockplus.com

 

1

Best of the Best 2016! Top 13 UI/UX Design Posts for Reference

This article curated some of the most recommended design posts in 2016, such as the principles, books, and tools helpful on UI/UX design, methods and suggestions on how to make better design, as well as the new design trends.

1

 

Design State

1. The State of UX in 2017




We are looking forward to how UX will evolve in 2017. In the meantime, here’s our take on looking at the past, understanding the present, and anticipating what the future holds for UX.

2. Why Design

In some ways, this knowledge is bittersweet. Nothing gold can stay. You make a thing that changes the world, and before long the world has changed to the thing. It no longer inspires the same kind of wonder. Given time, we will always demand more.

3. Design Better Forms

Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don’ts of form design. Keep in mind that these are general guideline and there are exceptions to every rule.

4. Design Doesn’t Scale.

Design Doesn’t Scale is a statement that has bothered me for the last four-years. When I joined Spotify’s design team in 2012, the level of inconsistency and fragmentation shocked me. Up-close, the treatment of type, colour, imagery, layout, IA, and interactions just didn’t seem to align anywhere. And when I started talking about it, I realised the whole team was frustrated too. We concluded that the fragmentation in the product was just reflecting the fragmentation in the team, that designers spread across so many different projects, timezones and competing timetables, just didn’t stand a chance. And, after all, weren’t these factors inherent in all modern tech companies anyway? It was then that I first heard myself say, “Design Doesn’t Scale”.

Princeples

2

5. The Difference Between UX and UI Design-A Layman’s Guide (by Emil Lamprecht)




We’ve all overheard conversations, walking down hip streets of the world’s tech capitals, discussions about the great ‘UX’ of a product, or the poor ‘UI’ of a website. Is it a secret language you will never be privy to? Are these people just using slang to look cool? Well, ok probably yes to the latter, but a determinate NO to the rest. Read on to learn what these terms mean, which jobs are better paid, and how to become a UX designer or UI designer. Scroll to the middle of the post to watch a video of me speaking about this article, and giving you some extra info on what being a UX or UI Designer really means.

6. Complexion Reduction: A New Trend In Mobile Design

Over the last several months, some of the leaders of innovative design have taken ‘minimal design’ to the next level. Facebook, Airbnb and Apple have followed a similar blueprint to simplify prominent products in a way that reflects this new trend of ‘Complexion Reduction’ in mobile design.

7. UX vs UI vs IA vs IxD : 4 Confusing Digital Design Terms Defined

Once upon a time, if you said the word “design”, the odds were overwhelmingly likely you were talking about graphic design. But nowadays, the digital world is becoming increasingly more complicated and a lot of new job positions appearing, which lead to confusion for people outside or new to the design industry. Here’s a quick overview on the four different primary forms of design to help you understand what they mean.

8. Hamburger menu alternatives for mobile navigation

If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.)

9. How to apply a design thinking, HCD, UX or any creative process from scratch




This how-to article aims at providing designers, creative thinkers or even project managers with a tool to set up, frame, organise, structure, run or manage design challenges, and projects: The Double Diamond revamped.

10. Best Practices for Microinteractions

Microinteractions are subtle moments centered around accomplishing a single task. Almost all applications around us are filled in with microinteractions. Here are just a few examples:

Confirming an item is added to cart

Use pull-to-refresh to update content

Interface animation that confirms an action (e.g. toggle button)

Design Books & Tools

3

11. The Best UI/UX Design Books & Resources for Designers

Want to be an excellent designer? Looking for the best UI/UX books and resources? Nowhere to go or to gain the right and effective channel for becoming an outstanding UI/UX designer? Just follow me, I have compiled a list of high-profile UI/UX books, which are recommended by the major professional websites, and blogs.The topic is mainly covering UI design, UX design, and web design. Hope it is helpful and useful to you. Any resource you think it’s worth to be included, please feel free to give a message below the comment area or simply drop me a line on LinkedIn.

12. 12 Design Tools & Websites for UI/UX Designers

The continuous improvement of designing tools, have a positive impact on usability and user experience, that provides great convenience for designers, as well as the users. Therefore often a good web designer will try to be updated with frontier, and master the latest tools. Hundreds of design blogs and websites update design articles, share design skills, and recommend new tools today on the internet. That is the important source of information for designers.

13. Unintuitive Lessons on Being a Designer

I sometimes joke that everything I have ever learned about design, I learned from my first job. Nowadays, this first job has extended to nearly ten years, its soul consistent even as its shape unfurls in depths and colors I could never have imagined in the beginning.


You May Also Interested in:

16 Design Books Every Designer Should Read in 2017

Information Is Money: 10 Best Web Design Blogs You Must Read

Prototyping Design Tutorial Roundup: Best Video Tutorials

100 Excuses for Designers — Because sometimes you need one! (by Jon Moore)

What Kind of Prototypes and Design Tools You Need for Your Audience?