1. Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com
IS4445 Principles of Interaction Design Lecture 9: Sketching and Wireframing
Rob Gleasure

2. IS4445 Today’s session Online discussion Sketching and Wireframing
What
Why
How
When
Where
Exercise

3. Online discussion How did everyone get on?
What interesting storyboards went up?
Bug reports
Zooming may make pdf window disappear - outstanding
Need an option to change screen name and group name – outstanding
Uploading pdfs >2MB will throw an error – kind of fixed
Anything else weird or not working?

4. The next next impossible problem
Having told the story of the new-and-improved imagined future world, we must now figure out how the technology actually enables the new story
We need to design the interface that links user behaviour to the underlying technology
We want this stage to output something that can be implemented with actual code with little or no confusion
We want to do this in the quickest way possible
A prototype =/= an early-stage development of the system

5. Why Sketching?
Sketching is basically just the rapid construction of low-fidelity paper prototypes
These vary in terms of quality but you generally want to move as quickly as possible so you can cycle through ideas
The ultimate goal is two-part
Identify and validate an interface layout (how the items within a screen relate to one another)
Identify and validate an interface network (how items on different screens relate to one another)
Fail fast, fail early, fail better

6. What is Sketching?
Generally involves a pen and paper or something else that allows ideas to be explored and thrown away at minimal cost
May also involve large blank pages (or spaces) and post-it notes, where individual screens are likely to contain multiple different sources or categories of information
This allows parts of the page to be moved around for trial-and-error-style exploration
The idea is not to show off your drawing skills, it’s to find a structure that best matches the needs of the interaction

7. How to Create Sketches
Step 1: Divide up a piece of paper or grab a 6-up template (see next slide for example)
Take 10 minutes or so to sketch out 6 different ways an interface could work
Focus on finding different ways to handle the elements that make you least confident
Step 2: Pick the design you like most and refine it on a separate sheet
Take your time on this one and feel free to think about shapes, curves, line-weight

8. How to Create Sketches (a template)

9. How to Create Sketches (an example)
Image from

10. Why Wireframing?
Wireframing occurs as we move beyond our initial sketches to a more realistic rendering of each interface
Wireframing moves beyond the initial exploration of different layouts in sketching to something that can simulate interaction, albeit without any actual dynamic functionality or back-end
The ultimate goal is a set of interfaces that can be translated to code without any missing front-end details

11. What is Wireframing?
Wireframes are visualisations of the proposed interface that match the structure of the intended system
They may or may not also attempt to simulate the look and feel of the intended system
Wireframes can be drawn by hand, however most design teams prefer to move to some digital rendering at this point
We’re decreasingly concerned about constructing rapid alternatives and being willing to throw away ideas
We’re increasingly concerned about having a precise representation of our new system

12. How to create Wireframes?
There are many tools available
Check out Andrew Pope’s list at
One of the most common is Balsamiq
Download at
Tutorial at
Some learning overhead but very powerful once you get the hang of it
Has the advantage of looking like a wireframe

13. How to create Wireframes (continued)?
Another simple option is to build off simple static templates
Nice examples at
These can then be set as a background for something like Visio, which has many components already built in for wireframes
Go File  New  Software and Database  Wireframes

14. How to create Wireframes?
Simple background templates from smashingmagazine

15. How to create Wireframes (continued)?
If you’re looking for inspiration, you may want to have a look at some existing websites, apps, etc.
One option is to use the inspector on your browser
Another is to use something like Wirify (
Add it to your bookmark
Find a website you like
Click the bookmark while on that website

16. When to use Sketching and Wireframing?
Sketching and Wireframing are used in the advanced stages of prototyping
They allow ideas to be demonstrated and feedback to be obtained from users, who can be shown how the new system will link together different functions
This blurs the line between prototyping and testing a little
The main difference is sketches and wireframes are a disposable means of identifying whether and how something can be done, with less emphasis on whether it works

17. Where to use Sketching and Wireframing?
Sketching and Wireframing should be used to resolve all front-end ambiguities between
Members of the design team
The design team and potential users
It’s rare that at least some users aren’t a little surprised when they see the wireframes
Done well, this stage irons out the last of the ambiguity and miscommunication

18. A note on User Experience (UX) design
The field of user experience design (UX) has grown to capture important but intangible aspects of product/service design
Product boxes, animations, imagery, screen transitions, etc.
Several companies have thrived in this space, e.g. Bang & Olufsen, Apple
UX has steadily increased in importance for two main reasons
Mass consumer markets have grown for IT products and non-specialists
People use many systems because ‘they just like them’

19. Rules for UX design
In it’s simplest sense, it can be broken down into a handful of key ideas
Design for an intelligent but lazy user
Design around a goal-oriented user story (note - the whole story)
Keep it simple, life is complicated enough
Once it’s useful, make it useable. Once it’s useable, make it pretty
Design should follow the user, even it’s inconvenient
Natural textures tend to be preferred
Soft edges tend to be preferred

20. Or another way to put it…
Spirovski (2011) adapted Pixar’s 22 rules for designing a journey
You admire a designer for their iterations, rather than successes
Keep in mind what’s fun to use, rather than design
You don’t understand a user’s story until you reach the end of it
‘Once upon a time, there was ___. Every day, ___, so that ___. One day, ___. Because of that, ___. Because of that, ___. Until finally, ___.
Simplify, focus, combine features
Throw stuff at your design it’s not supposed to be able to handle
Know your product/service goals before you start
It’s never perfect – let go, make it better next time
When you’re stuck, make a list of things that wouldn’t work
Pull apart designs and experiences you like

21. Spirovski’s (2011) adapted Pixar rules (continued)
Put it on paper
Get past the obvious ideas
Give user personas and stories depth
Why is this experience so important to you as a designer?
How would you honestly feel in the target scenario as a user?
What are the stakes for a user in this scenario?
Move past ideas – it will be useful somewhere else, eventually
Avoid fussing over details if they’re not worth making work
Hypotheticals should be used to create problems, not solve them
For things you don’t like, ask yourself how could you fix them?
Identify with the context
What’s the shortest way you can describe an experience?

22. Building your report
Identify what you believe to be the most important interface of your proposed system
Working individually, take 10 minutes to each sketch out a 6-up for that interface
Working collectively, identify the version you think has most promise and create a 1-up with which everyone is happy
Repeat for the next most important interface until you run out of time
After class, render your 1-ups as wireframes using the technology of your choice and post these on a single pdf to the forum

23. Reading
Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2012). The narrative storyboard: telling a story about use and context over time. Interactions, 19(1), 64–69.
Interaction Design Foundation: The Basics of User Experience Design (
Löwgren, J., & Stolterman, E. (2007). Thoughtful Interaction Design: A Design Perspective on Information Technology. MIT Press, USA.