Slides from my talk at UX Scotland, with added notes to help you create your first UX comic.
How to make your first
UX comic / storyboard
With added commentary! #uxscot
What is a comic?
“Comics have a vocabulary that
doesn't even require language. In
fact, many of its symbols could be
considered a language of their own
that requires no teaching or
Kevin Cheng, ‘See what I mean’
the power of
Even without using any words, an image can
communicate an awful lot about how people use a
service or device, with very few details.
For instance, what do you think these two are doing?
...And what about now??
And what about this man?
Even with very few clues in an image can
communicate a whole narrative to the viewer -
which they will do the work to fill in, even though
you’ve not written anything!
THE PROBLEM WITH
Don’t get me wrong, I love UX, but it’s not perfect.
DEATH BY DOCUMENTATION
We like ‘deliverables’
Deliverables don’t make the
We can bore stakeholders
How often do you think clients read ALL of the
documents you produce?
Most documents don’t help team
members to emphathise with users
- instead they create abstraction
Where as comics can create empathy, thank
Comics can help
Sequential art gives us a means to
express changing time, space and
emotion in a succinct way
It also allows us to explore and
visualise ideas without significant
Check out Will Eisner’s books about comics to learn
more about sequential art.
COMICS CAN BE USED IN MANY
WAYS throughout a project
To show how things are now
To show how people would like
things to be
To review how things could be
Plus comics are quick to create once you’ve had a bit
When to use comics
When to use comics
Feel free to use them whenever you need to - there
aren’t any rules.
More effective communication tool
than standard documentation
Sharing within organisations
Less about the interface, more
about the tasks people do
Using very few details, XKCD explain the problem of
Another xkcd classic
This XKCD bit of brilliance only has one panel, yet can
still communicate so much!
This is part of a comic series I made for an
automotive finance company - its based on task
based personas and depth interview research.
What goes on between the panels in a comic is just
as important as what goes on in the panels!
Gutters can be used to show the passing of time.
Even with very few details, combined with the
gutters, we can string together narratives.
Even when speech bubbles are left empty, they still
communicate with readers.
Its really not *that* difficult! Honest!
why you don’t need to be an
The simpler you keep characters, the easier it is for
the reader to empathise with them. Too much detail is
Using guidelines to help you place your character’s
features, you can ensure you draw them consistently.
It’s all in the face
Note how the curved lines
make the face look more 3D.
Looking at things
Eyebrows and mouths are incredibly powerful tools to
If you add too much detail, your characters will stop
being so easy to empathise with...be careful you don’t
Body language can be used to communicate a hell of a
lot of emotion in your characters - you don’t need to
draw much to get the effect.
developing your style
Once you’ve experimented a bit you can create your
own set of characters - as simple or detailed as you
The narrative of your comics must
demonstrate how people do or
could use a service
Creating your plot
Personas are really useful starting
Refer to research to pull out
behaviours and stories that could
bring the comic to life
lets make a
This is a little 30 minute exercise to give you some
Flowers for someone special
Imagine you’ve got a new client called ‘Mister
Flowers’. They sell flowers online, but they want new
ideas about how to help their customers find and
send the best flowers to their loved ones.
Your challenge is to consider the two personas on the
next page, and decide on which one you’d like to make
a comic about. Use about six panels to tell your story
about how Mister Flowers could help this customer.
Consider the entire flower purchase process: where is
the character? Who are they with? What’s the
occasion? What device are they using? etc...
•Always forgets birthdays and special
•Very busy lifestyle juggling
commuting and a packed social life
What they want:
•Improve their reputation with friends
•Make their loved ones feel special
•Get a gift sent on time!
•Likes planning and researching
gifts for friends and family
•Has a limited budget, but likes to
do as much as possible with it
What they want:
•To get the ‘perfect’ gift for their
•Get everything sorted in advance
•Maintain their reputation as a great
Time saving tips
Time saving tips
Draw out devices and other ‘props’ on a master sheet
to trace from - this speeds up drawing comics.
You can trace photos too.
I like to use Adobe Illustrator and Comic Life to create
Here’s a view of one of my Adobe Illustrator
documents I use to store all the different assets I use
and re-use within the comics I make.
This is a view of the AWESOME Comic Life! It makes
producing comics wonderfully easy.
Remember the UX
Scotland discount code!
Feel free to contact me with any questions - or if
you’d like me to send you come blank comic layouts to
practice on. Have fun!