Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sketch on Rails

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.

Sketch on Rails

  1. 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. 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. 3. SketchAxure Excel Wireflows Requirements Styleguide Icon designWireframes Visual design Workflow User test
  4. 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. 5. Design for opportunity cost: efficiency is key. Design for cognitive load: ease of use is critical when people work 8 hours straight.
  6. 6. In a workshop we write out scenarios of use together with the client and turn them into wireflows, high- level sketches.
  7. 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. 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. 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. 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. 11. Styles I use HTML/CSS classes naming conventions to keep things organized. It gets messy easily so using naming conventions is quintessential.
  12. 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. 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. 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. 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. 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. 17. SketchAxure
  18. 18. SketchAxure
  19. 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. 20. Thank you All rights reserved, @pvermaer vrmrck.be

×