Wantful is a beautiful, thoughtful and carefully crafted experience. The homepage immediately communicates what Wantful is, who it’s for and why it’s awesome. Artwork, photography and copy is convincing, strong and crisp. The repeated ‘Get started’ call to action at the bottom of the homepage (pictured) persuasively re-enforces the proposition and previews the product collection. Move through to the ‘mad libs’ sign-up form, the welcome page with upcoming occasions and gift selector. Note the interactions, the way the design anticipates your next step, the clear and comprehensive copy all the way through to the questions and about pages. The details are well executed and communicate care, precision, sophistication and perfection. Details matter.
I use a handful of wireframing and prototyping tools and choose specific tools depending on the job. There are dozens of UX tools available and countless blog posts comparing them.
Plenty of people arrive here by Googling things like ‘wireframing’ and ‘prototyping tools’ so I thought it’d be useful to talk about the tools I use and why I use them.
Paper. I start on paper every time. I like the design studio method and time-box paper sketching as tightly as I can – often to a few minutes. Then it’s a question of how far. After sketching and iterating sometimes I test with users on paper; rough sketches can be the highest fidelity required for validating interfaces. Solidify or UX Pin can bring paper sketches to life and stitch them together into a user journey to help with testing.
Fireworks. I find interaction design with Fireworks works best when the prototype evolves into the visual design. Files can be handed over and artwork integrated with wireframes, but this also the issue with Fireworks – it’s a fully-featured digital design tool so it’s easy to focus on the details too early. It can work ok, but I’m using it far less than I used to and generally favour Keynote.
Markup. Mocking up with markup is the best approach and always will be. Real code is unbeatable; it feels right when customers are testing it, it’s natural for testing responsive design, it’s native and it solves the big issues early. It’s the best format for eye-tracking and is re-usable (to an extent) in the final solution. If the UX requirements demand markup (big, detailed projects) I’ll do the basic thinking on paper and jump into code as early as possible. Foundation, Bootstrap and other frameworks are good places to start and sometimes building the prototype on a CMS makes sense. Divshot looks like a good way to generate responsive markup without writing it, particularly for me – my coding skills are limited and I’m generally directing other people to produce the output, so a collaborative drag-and-drop environment make sense.
People love tools like Axure, Balsamiq, Mockflow and others. I’ve tried these and plenty more and have settled on my regular workflow of paper (always), Keynote (often), Fireworks (rarely) and markup (whenever I can).
Alex Chadwick shreds guitar at Chicago Music Exchange. In this video he creates a history of rock n’ roll by playing 100 famous guitar riffs in chronological order, in one take. Nevermind that Slayer didn’t make the cut, 100 Riffs is quickly earning views and telling a story about Alex and Chicago Music Exchange. These guys know their rock n’ roll. Alex rips guitar. 100 riffs in one take is admirable and worth telling people about.
Story told, and re-told.
There are undoubtedly stories hidden in your business that your customers, potential customers and employees would be fascinated to see and hear. Where are your stories?