I used Sketch in combination with Axure to do both the UX and visual design for a new teller system. In this talk I will give a quick look into the workflow I used and some key takeaways. Including why I started using Sketch in projects and why I still use Axure for most UX design.

1. Sketch on Rails
@pvermaer vrmrck.be
In this talk I will give a
quick look into the
workflow I used on a
recent project and some
key takeaways.

2. UX designer @namahn
Hi, I’m Peter Vermaercke
I work as UX designer at
Namahn since 2011
together with this happy
bunch. Namahn is an
agency for human-
centered design based in
Brussels, Belgium.

3. SketchAxure
Excel
Wireflows
Requirements
Styleguide
Icon designWireframes
Visual design
Workflow
User test

4. We start with the functional
requirements, these are
typically the result of an
analysis done by the client.
This is the basis of
everything: what is the
client hiring us for. We
combine this with field
studies to observe real
users. As a designer we
have to bridge both worlds.

5. Design for opportunity
cost: efficiency is key.
Design for cognitive load:
ease of use is critical when
people work 8 hours
straight.

6. In a workshop we write out
scenarios of use together
with the client and turn
them into wireflows, high-
level sketches.

7. Wireflows
We draw these wireflows in
Axure and link them
together to visualize the
flow. The level of detail is
very low, it’s mostly about
what goes on which screen
and the order of screens.

8. Wireflows
Why Axure?
- Masters in masters in masters in…: Sketch can’t properly handle objects in objects.
- Existing libraries: we have an existing library of widgets that can be used in every Axure project.
- Share quickly via AxShare: let’s you send a password-protected link to the client.
- Collaborate: work on one document with several people at the same time.

9. Style guide
We create a set of basic
styles that fit the context,
specifically suited for this
application. All of these
were custom styles with
only small elements taken
from the global company
style guide. Sketch is great
for this as it is so fast and
easy to iterate.

10. Styles
The HSBA scale makes it
super easy to make a good
color scheme. It stands for
Hue, Saturation and
Brightness and let’s you
quickly make
complementary or
analogous colors.

11. Styles
I use HTML/CSS classes
naming conventions to
keep things organized. It
gets messy easily so using
naming conventions is
quintessential.

12. Sketch Toolbox
I use a few plugins to
speed up this kind of work.
Especially the Sketch
Measure plugin is great.
https://github.com/
buzzfeed/Sketch-Toolbox
Yes, Sketch Toolbox
is made by your
favorite link bait site
Buzzfeed!

13. Visual explorations
I use Sketch to experiment with different ways of visualizing information. Why Sketch?
- Extremely powerful and flexible canvas
- Total control over looks
- Very fast way of working
- Test immediately with Sketch mirror on iOS devices

14. Icons
Keep your icons in a
separate page but as part
of the same file. This make
it more easily organizable.
You can also turn them into
symbols to use them
throughout the other
screens.

15. Wireframes
The wireframes start with
actual content but without
any styling. Gradually while
the visual design was
evolving we would add
more style to it. The
prototype influences the
visual design and vice
versa.

16. Visual design
I used one Sketch page for
all my app screens. It’s
even better to make a page
for each screen. This way
all your iterations don’t
clutter the document and
everything stays organized.
Make one page per screen
(type).

17. SketchAxure

18. SketchAxure

19. 1. Keeps UX and visual in separate discussions
2. Sketch is great for visual explorations
3. Axure is great for collaborating and testing
Separate tracks

20. Thank you
All rights reserved, @pvermaer vrmrck.be