DeWyer has previously said of the UMBC chess team, “I admire their passion for their sport, the efforts they make in balancing this passion with their priority of earning a degree, and how they support one another by offering suggestions.”
The Washington Post ran two articles on the President’s Cup this year, calling UMBC’s chess program “one of the oldest and most successful” and a “powerhouse in college chess.” Click to read “The other Final Four — of chess” and “Webster University wins (chess) Final Four” in The Washington Post.
]]>Ant Ozok, associate professor of information systems, visited WAMU’s The Kojo Nnamdi Show to discuss technological innovations that have transformed personal banking. Ozok, who specializes in human computer interaction, emphasized the importance of a positive user experience, saying, “Banks need to take the precautions that are necessary so that users do what they need to do in an efficient way.”
Click here to listen to “Personal Banking Technology” on The Kojo Nnamdi Show.
Last meeting was great. We had an activity, updates, and in workgroups we worked on Retriever Treasure and EcoFest. Our next meeting will the THE MOST IMPORTANT MEETING before EcoFest!
A wireframe is not the same as a prototype but even seasoned design professionals can sometimes get the two terms mixed up.
It’s time to set things straight once and for all, since (semantics aside) the difference between a wireframe and a prototype is actually quite substantial.
Editor’s note: This is an article by Marcin Treder, CEO of UXPin.
A wireframe is a low-fidelity representation of a product’s design.
It has three simple objectives; the clear presentation of:
Wireframes, if properly created, serve as the backbone of the product.
It’s just like an architectural blueprint of a house: It states plainly and clearly what should go where.
The visual characteristics of a wireframe are very limited. Usually designers just use boxes, lines, and a grayscale color palette (to represent different levels of visual hierarchy in the design).
A simple vector wireframe
The majority of the final content — images, videos, text, etc. — is left out for later stages of the process. Often, these omitted parts of the interface are represented by placeholders. Images tend to be represented by crossed boxes and text with Lorem ipsum.
Since wireframes are quick and cheap to produce — especially when you use dedicated wireframing software such as UXPin, Balsamiq, or Axure — they should be used right at the beginning of the design process.
There’s nothing better for gathering feedback early on than a solid wireframe.
Why?
Because people can focus more on function, information architecture, UX, user flow, usability, user interactions, and so on, rather than having these foundational aspects of a design being overshadowed by its aesthetics.
In addition, any required changes can be done quickly without too many tedious code and graphics-editor adjustments.
This video that my startup put together shows how easy wireframing can be.
Sometimes designers like to increase the fidelity of their work a bit to stress the importance of certain parts of the UI, as well as to present and quickly test the soundness of interactions between elements. A very popular way of doing that quickly is the creation of an interactive wireframe, also known as a clickable wireframe.
A more sophisticated wireframe designed using UXPin, a specialized wirefaming/prototyping tool
Interactive wireframes might be very helpful on the first presentation of a design to a stakeholder or client. If you’ve ever heard the classic question "What happens if I click this button?" you will have the answer right on your interactive wireframe. It’s impressive and engaging.
To a layman, e.g. our project clients or non-technical managers/employers, looking at a wireframe might be perplexing because wireframes might not have any resemblance to the final design at all.
Quick hand-sketched wireframing of an app’s user flow by Fernando Guillen
That’s why we need to take some time to explain what a wireframe is — and, more importantly, its significance within the design process — before we show it to individuals that are uninitiated to the concept of wireframes.
A prototype is a mid- to high-fidelity representation of the final user interface.
The goal of a prototype is straightforward: Simulate the interaction between the user and the interface.
Whenever a button is clicked, the appropriate action must occur, mimicking the experience of a full product.
When it comes to aesthetics, a prototype may closely resemble the final version of the product.
Basically, a prototype looks like the final product, but it just doesn’t have the nuts-and-bolts yet (i.e. HTML, CSS, JS, server-side programming, databases, etc.)
Interactive prototype designed in UXPin
Primary colors should be all set, key content (at least the essential pieces) must be present, IA should be demonstrated, and typography should, to a reasonable extent, represent the final version. Clicking on an interactive object should demonstrate its subsequent response.
Why is prototyping important? Because prototypes are typically for testing a product with real users. Early testing of prototypes can save tons of money and time that would have gone toward developing the wrong interface and back-end product architecture. It is a good validation tool for the design and development of the product.
In addition, showing a prototype to users and asking them to go through some basic use-cases is amazingly insightful and inspiring for the entire team.
Instead of spending time coding the prototype, designers today can engage in a rapid and cost-effective prototyping process using software that I’ll talk about in a bit.
Any changes you need to make after user-testing can be implemented more quickly, without wasting the time of your engineers.
Understanding the very nature of design, and the difference between wireframes and prototypes, is really just the entry point to the world of user experience design.
The magic happens when you’re able to combine the many pieces of the process into a cohesive, effective, and efficient workflow.
When I was managing a UX design department a few of years back, the biggest mistake I saw in our process was this: We treated wireframes as disposable and non-essential. So we would rush the process and we wouldn’t give the wireframing process the time and effort it deserves. They were too sketchy and messy to be used as a blueprint — the foundational backbone — of a solid prototype and the final product.
I’ll end with a list of tools you can use to make wireframing and prototyping easier.
Below you’ll find some of the most popular wireframing and prototyping tools, including the one my company has developed.
Test them (most have some sort of free trial) and choose the weapon that fits you and your team best!
We have over 900 UI elements ready to be used on wireframes and prototypes. Please feel free to ask me questions about it in the comments.
A very robust prototyping tool that can output HTML/CSS and demonstrate touchscreen interactions. Prototypes can be tested in actual devices.
A very popular, longstanding, and easy to use wireframing app. Limited to static wireframing only though.
Allows for wireframing in the browser.
A simple wireframing tool. Product development stopped in 2010.
A wireframing and prototyping app that’s popular in the enterprise software sector.
Wireframing and prototyping in the browser.
Allows you to build functional prototypes using your existing designs. You can’t draw anything, but you can add links between screenshots.
Marcin Treder is a UX designer, the CEO of UXPin, and author of several UX design books (such as UX Design for Startups).
The post Wireframes vs. Prototypes: What’s the Difference? appeared first on Six Revisions.
]]>