When I first set out to write about what I learned over 3 fabulous days at the HOW Interactive Design Conference in Chicago, I realized (as I sifted through pages and pages of notes) that what’s needed here isn’t another recap of sound bites from the event. What I usually hear from design conference attendees is “it was good but I was expecting more” or “I had a great time but it only reinforced what I already knew.” If you’ve scoured hundreds of articles, blogs, and books about how to be a better designer then you don’t need to learn more, you need to do more. So, with this article, I figured you’d want tools to get the job done.
I’ve put together the tools and resources that the speakers shared at HOW, some of which are free.
PROTOTYPING & WIREFRAME TOOLS
Make interactive wireframe and prototypes without writing code.
Build fully-interactive prototypes from your UI Stencil Sketches.
Design working mockups for mobile and tablet apps in the browser to share instantly.
Quickly share a mockup or demo a mobile app with this prototyping and collaboration tool for designers.
Make your designs interactive. Create iOS prototypes with your rough sketches or final mock-ups. This tool adds interactivity by linking screens so you can quickly share with your client.
Send pixel perfect previews from your Mac to as many devices as you like. And if you’re working in Photoshop CS5 or higher, you can preview as you edit.
A cloud-based drag-and-drop mobile interface builder. Import your own code or choose from their JQuery powered library of components.
Convert any web page into a wireframe. The PRO version lets you export and edit the wireframes into a variety of formats.
A vector graphics app (Mac only) for web and UI design. Render text, create artboards, and use its adjustable 960 grid for wireframes. Using Sketch Mirror, you can preview your work on your iPhone and tablet over Wi-Fi.
Usability testing software for designers and developers. Screen capture, record live video & audio of your users testing your website.
Website Optimization and A/B Testing
Mobile Website Testing for iOS
DESIGNING & BUILDING
Tired of designing in Photoshop and Illustrator? This web design tool writes code as you draw it.
A web design and development blog that publishes articles and tutorials on the latest trends and techniques.
Adobe Generator for Photoshop CC
Create image assets in real time.
Adobe Edge Reflow
Design responsive CSS layouts for all screen sizes and export to an HTML code editor with Adobe Edge Reflow CC.
BOOKS, BLOGS, AND MORE…
Want to know more? Here are some books from the HOW speakers themselves. If I hadn’t brought all carry-on luggage, I might have bought every one of these. Thank goodness for the internet.
Associate Professor, Millersville University
Session: Interdisciplinary Approach to Interactive Design
Book: Interdisciplinary Interaction Design
Todd Zaki Warfel
Co-Founder, Nimbly App
Session: Interactive Prototyping & Exploration of Standard Prototyping Tools
Book: Prototyping A Practitioner’s Guide
Terry White, Sr.
Worldwide Evangelist, Adobe
Session: Create HTML Websites, iPad Apps and eBooks Without Writing Code
Senior Designer, Bloomberg
Session: Designing Data: How to Create Meaningful Visualizations – Presentation Slides
Session: Bridging the Designer/Developer Divide
David Sherwin – Blog
Principal Designer, frog
Session: Using Storytelling Techniques to Create Better Interactive Experiences
Book: Success By Design: The Essential Business Reference for Designers
Type Director, Monotype
Session: Tailored Type for Screens – Website
Want a play by play of the event? Here’s a beautiful summary of the social media from the conference as it happened.
Have you used some of these? Do you have something to add? We want to hear about them!
Jennifer Marin is the co-president of AIGA Baltimore and she clearly loves resources.