On UX, Wireframing and Prototyping (by a complete beginner)
What exactly is UX? How can one job involve everything from business analysis to visual design? And what is it’s cousin, “UI”? What about “usability”? Aren’t they all same?
User experience sounds like a simple idea, but UX designers often struggle with defining exactly what their roles encompass. As a front-end developer, this confusion can often result in our own jobs incorporating responsibilities of UX design, including creating wireframes and interpreting prototypes, without ever having this role truly explained.
So, from one beginner to another, let’s try to demystify UX, Wireframes and Prototypes.
UX vs. UI
UX is best explained when contrasted with UI
UI is short for “User Interface”. UI designers are concerned with the aesthetic design of the product. They design the icons, buttons, interactions, and create style guides for the overall appearance of the product. With it’s emphasis on visual elements and graphic design, a UI designer is much more in realm of what is traditionally thought of what a designer is.
Think about the Twitter “Like” button redesign: a UI designer designed both how the heart was shaped and the little sparkles that come from it when clicked.
So what is UX? To begin, according to this excellent article from Smashing Magazine, UX is not just about “usability”. It’s about how the user feels while using the product. Do they feel frustrated? That’s bad UX. But do they feel happy, satisfied or do they even realize they’re engaging with a process? That’s good UX.
It’s about making the experience effortless and every interaction the user has the product meaningful. UX designers identify pain points and designs the flow of interactions while using the product.
So, the TL;DR version:
In the example above, the UI design is elegant, however, the moment the user actually uses the product, they are made painfully aware of how the design works against their goals. While it’s a charming design, once the user manipulates the object, they are frustrated and the goal for which the product was made for — getting ketchup on the plate — is a painful process. This is the opposite of good UX.
The UX example, on the other hand, showcases ease of use. In re-designing the ketchup bottle, thought as gone into eliminating all pain points — the glass material, the cap on the top of the bottle — and it’s effortless on the consumer’s part to get from A to B. This is good UX.
So whenever you consider how a user would feel using the end product — frustrated or satisfied — whenever you choose ease of use from point A to B over flashy design, anticipate pain points, or add in accessibility, you are practicing good UX.
More resources:
What is UX design really? from The Next Web
What is User Experience Design? Overview, Tools and Resources from Smashing Magazine
With this is mind, what are some UX tools that front-end devs will have to (and should already) work with?
Wireframing
Wireframing is probably the tool most are familiar with when they think of UX. Wireframing is simply a very basic guide to laying out the website, using shapes, lines and often, a big black marker to draw out ideas on paper. It can be used as a blueprint or brainstorming about how the content is divided up on the page and how it will be presented, which can be subsequently disregarded or referenced constantly throughout the rest of development.
If possible, try to wireframe your site prior to writing a single line of code, even the HTML markup. This way, you can anticipate layout choices, particularly when it comes to responsive design. Wireframe proactively instead of coding reactively.
Wireframing is 2D and can be done using various programs, or with ye olde paper and pen. What is key is that the the wireframe should be chunky to prevent adding specific details in and not very aesthetically pleasing. This isn’t about what the end-product will look like: no colours, details or other visual elements should be involved at this level — these things will be done in the mockup by a designer.
Tools to use
paper and pen 👍
wireframe.cc
Mockplus (free for 3 months)
Prototypes
As the web evolves away from a static state, prototyping has become a crucial element in UX and front end development. After the wireframe and mock-up stages, prototyping will begin. Prototyping tests how the final mockup will come together, determining transitions and animations prior to writing a single line of code. This saves time in development and allows for experimentation previously impossible in situations with tight deadlines.
Part 1: Multi-page tools
Like wireframes, Prototypes are planning tools but the significant difference is that prototypes are made to simulate interactions. Multi-page tools use PSD or JPG files uploaded to the app to string together screens that simulate on-click transitions between windows on the final product. This mimics how the product flows from screen to screen.
Tools to use
Marvel
Invision (free for one prototype)
Part 2: Layer interaction tools
These tools are very similar to multi-page tools, using PSD or JPG files to emulate the final product, but layer interaction tools allow for simulated animations and other finer interactions within the prototype. Layer interaction tools can also allow for icon design, which means they are moreso used by UI designers
Tools to use
Origami
Form by Relative Wave
To see the full thought process from wireframe to interactive prototypes, check out this awesome guide by a UI/UX designer.
Thanks for reading! Please like or recommend this article if it was helpful for you and follow me on Twitter
Further Reading
The beginner’s guide to UX prototyping from the Web Design Depot
What a Prototype Is (And Is Not) by UXMag
10 Tools for Prototyping on a Budget by Prototypr.io
