Aarron Walter » Tools & Utilities

The UX Sketchbook in Action at Future of Web Design

Aarron — Fri, 27 May 2011 12:00:21 +0000

I ran a day long workshop at Future of Web Design called “Interface Design Bootcamp“. In the workshop we learned how to conceptualize an app to connect people at an event like the Future of Web Design Conference using design personas and sketchboards. Ryan Carson sat in on my workshop and wrote a nice post on Think Vitamin about the sketchboarding process.

The workshop was so perfectly timed as the UX Sketchbook I’ve been working on had just rolled off the presses, and it was time to take it for a serious test drive. As I mentioned earlier here, the UX Sketchbook was really designed to support quick ideation, and specifically, sketchboarding.

I snapped a few pics from the conference to document the fun we were having with the new sketchbooks. You can view all of the workshop photos on Flickr.

get your own UX Sketchbook »

UX Sketchbook: Faster, Smarter Interface Design

Aarron — Wed, 11 May 2011 11:50:06 +0000

As the UX lead at MailChimp, I draw a lot of interface ideas, and so do the folks in my team. Sometimes we make detailed drawings of a new feature, or just a rough sketch of an idea to share with a developer or executive.

There are a lot of nice sketchbook options on the market, but nothing really fit our workflow. My colleague Stephen Martin knows a bit about how to make a good sketchbook, and together we have a lot of ideas about how we’d like a UX sketchbook to work. So guess what, we made our own. It’s called The UX Sketchbook.

view more photos on Flickr

Here’s what I like about this sketchbook. Each page has a one-up browser window with a grid on one side, and a two-up on the back. When you are at the beginning of an idea, you work through lots of concepts quickly. That’s when you want to use the two-up side. Jot notes in the margins, and even write in the URL in the browser to denote location in the site you’re designing. More refined ideas can stretch out on the one-up side, which also saves room for your notes and annotations in the margins. The perforation of each page makes it easy to tear out a sketch and share with a colleague, or post it to a sketchboard when you are collaborating. The spiral binding keeps it flat on your desk no matter what page you’ve flipped to, and the debossing on the cover adds an extra touch of elegance.

Starting Monday May 16, you can buy these lovely little UX design tools at http://uxsketchbook.com. If iOS design is your bag, you might want to check out Stephen’s iPhone and iPad sketchbooks too, which are popular with industry experts like Josh Clark.

These sketchbooks are simple, and are designed to make you work faster and smarter. We hope you enjoy them in your design practice as much as we do.

buy the UX Sketchbook

InVision: A New Way to Prototype

Aarron — Thu, 05 May 2011 20:06:00 +0000

I’m a big fan of prototyping over wireframing because there’s just so much of an interface you can miss if you don’t actually use it as you design it. I typically use simple HTML, CSS, and JavaScript for higher fidelity prototypes, and for lower fidelity stuff I use Keynote.

InVision offers a clever new way to create prototypes quickly. Design individual screens in your favorite app like Photoshop or Omnigraffle, then upload the entire batch to InVision to add hot spots to create functional workflows. It’s simple, and really fast to use.

Here are some examples of what you can create with InVision: Interactive wireframes or hi-fi prototypes

InVision is still in beta, and therefore is a bit rudimentary. But it’s quite evident that careful consideration has gone into the design of this app, so I am expecting it to evolve into something even more sophisticated very soon. Here are a few features I’d love to see in the future from this lovely little tool:

form interactions (this is a biggy as it’s har to test an app prototype without real forms)
easy methods for creating drop down menus, and other in page interactions
tools for recording usability test sessions

Links and Resources From An Event Apart Talk “Idea to Interface”

Aarron — Tue, 03 May 2011 14:30:54 +0000

Links and resource came fast and furious in my talk at An Event Apart Boston. To make your life easier, I’ve assembled all of the resources I mentioned into a handy little list. Feel free to share this with your colleagues.

Keep an eye on my SlideShare account for the slide deck from this presentation, which will be released once the AEA season has come to a close.

Books

You might also be interested in …

I compiled a massive list of handy UX resources for a workshop I did recently.

Interface Design Bootcamp: Future of Web Design Workshop

Aarron — Wed, 17 Nov 2010 12:15:29 +0000

I recently conducted a day long “Interface Design Bootcamp” workshop in New York at the Future of Web Design. We covered a lot of territory including user research, personas, wireframes, sketchboards, prototypes, and usability testing. There are so many useful resources freely available on the Web that make the job of a user experience designer easier. Here are a few of the UX resources discussed and the slides from the workshop.

View more presentations from Aarron Walter

User Research and Personas

Sketchboards

Wireframing

Prototyping

Usability Testing

Design Patterns

Essential Books

General Resources

A Modern Mobile Computing Platform With SSD and Cloud Storage

Aarron — Tue, 02 Nov 2010 23:42:25 +0000

Last week, I had my ass handed to me by what seemed like a failing hard drive, but turned out to be a dead hard drive controller in my MacBook Pro. Luckily I had backups, but a near data loss experience can put the fear of God into you, and compels a closer consideration about how your data is managed. I ended up putting a new 240 GB SSD into a different MacBook Pro, replacing my old 500 GB hard drive that was reaching its limits of storage. If you do the math there, you’ll recognize that I was left in a quandary as to how I would store and manage my gigs and gigs of music, movies, and photos.

Luckily, with the plethora of cloud storage options available these days, smaller storage capacities are not that big of a deal, and it’s a fair trade for the dramatic speed boosts you’ll see when running an SSD. Incidentally, my MacBook Pro now boots in about 14 seconds, while the hard drive it shipped with booted in about 60 seconds (see a side by side comparison). Of course, SSDs also use less power, which I know my MacBook Pro’s battery appreciates. Rather than having everything in one place, I’ve put together a simple solution to keep my data accessible no matter where I am, and redundantly backed up.

Here’s the solution I arrived at:

All work and personal documents, presentations, etc. live on DropBox, which makes them accessible on my iPhone, and other machines, and makes it easy to share with colleagues. Dropbox caches files on my MacBook Pro (it does eat into storage space), and is stored in the cloud as well so I could hop onto any machine, login to Dropbox, and have everything at my fingertips quickly.
All music, video, and photos are stored on an external, 500 GB hard drive, which gets backed up to Jungle Disk daily.
My SSD gets backed up too using Super Duper.
I take notes using a handy little app called Notational Velocity (hat tip @veen), which stores all notes in DropBox, and syncs to an iPhone app called Simple Note

Should my MacBook Pro breath it’s last breath tomorrow, I would have no trouble at all spinning up a new machine with all of my apps, docs, music, pics, movies, and more in very little time. I can sleep well tonight. Of course, a faster, more energy efficient mobile computer is not a bad outcome either.

Learn More

Dive Into the Modern Web Workshop at Web Directions USA

Aarron — Wed, 22 Sep 2010 14:48:01 +0000

I’m co-presenting with Leslie Jensen-Inman and Glenda Sims a workshop called “Dive Into the Modern Web” today at Web Directions US in Atlanta, GA. This workshop will help educators and self-guided learners get up to speed with the changing landscape of the modern Web.

I’m doing presentations on HTML5 and CSS3, which will cover a lot of ideas, technologies, and resources. Below are my slides, the exercise files, and the resources mentioned in the presentation.

The Files

The Resources

Findability/SEO Cheat Sheet: Guide to Web Standards SEO

Aarron — Mon, 28 Jul 2008 22:48:08 +0000

free findability strategy cheat sheet [PDF 200k]

When I was researching my book, I asked a group of my students at The Art Institute of Atlanta what sorts of content they’d hope to find in a book exploring findability and SEO through web standards. Thinking like students with limited time to work on their projects, they all agreed that “the book should include coverage of what needs to be prioritized, and what can be done later if you run out of time”. Brilliant idea! I never would have thought of that. Well it’s covered in chapter 9 thanks to them.

As I was running through my table of contents with them, they pointed out that it’s all useful info, but it would be nice if there were a quick reference that you could just print out and keep nearby as you start new projects. That way you don’t miss any of the important stuff you should be doing to make your site findable.

I’ve created what I think is a pretty comprehensive findability strategy cheat sheet that will guide you through all of the stuff you should be doing when creating new websites or even redesign existing ones. All of the advice follows industry best practices and web standards, and have references to the places in my book or in the 5 free online chapters where you’ll find detailed explanation and examples of how to do this stuff.

I hope you find it useful!

download free findability strategy cheat sheet [PDF 200k]

Blueprint: A Practical CSS Framework

Aarron — Sat, 11 Aug 2007 13:48:32 +0000

There’s a fair bit of tedium and redundancy that goes into the set up of a new site. Most web designers start with the same tasks like reseting all default margins, padding, and other values to a common baseline for cross-browser support, you define your layout, wrestle with type, maybe even set up a print style sheet. We often find ourselves repeating what we’ve already done many times over on other projects. Blueprint, a recently released CSS framework created by Norwegian student Olav Frihagen Bjorkoy, seeks to eliminate this common tedium by providing a concise set of style sheets that make setup and design quick and easy.

If you are unfamiliar with the concept of a framework, you can think of it as a base structure of prefabricated code utilities that function both as a toolbox and a skeletal structure for a project. Many great frameworks have been created for both client-side (Prototype, Dojo, JQuery) and server-side development (Ruby on Rails, CakePHP, Code Igniter), and have revolutionized the way web applications are built. The goal of a framework is to allow you to concentrate more on the project concept and mission rather than micro-focusing on the details of the inner pinnings of the code.

That’s exactly what Blueprint delivers for CSS design. It brings together the solutions from many recent articles on grid-based layout, page rhythm, print style sheets, and typography and packages them neatly into a practical system with a low learning curve. By default, Blueprint creates a flexible 14 column grid to guide your layout. Using very simple class combinations, you can define the size of a div to span any number of horizontal units in the grid. For example, a div like the following will span 5 units of the grid and will sit on the right side of the layout.

[source language='css']

…

[/source]

Blueprint also creates flowlines that define the type baseline, and create a uniform rhythm to the page. Background images can be turned on to draw out the grid columns and flowlines as guides while refining your layout.

Although still undergoing refinements to create consistent cross-browser support, Blueprint is in a relatively stable state for project development. If you’re curious about the story behind the project, check out Khoi Vinh’s recent blog post on the subject, which includes an interview with Olav Bjorkoy, Blueprint’s creator.

The Ultimate Web Designer's Resource

Aarron — Fri, 02 Feb 2007 01:33:29 +0000

Whether you are looking for high quality free fonts, indespensible CSS techniques, tutorials on development topics ranging from Ajax to XHTML, you will find the ultimate resource to nearly every facet of web design at Smashing Magazine. The breadth and depth of resources this site offers is staggering. They choose a topic, then find everything on the web that is worth reading about it. It’s not the indiscriminate list of everything, its the list of everything useful.

Another site that is equally as useful to any web designer is Web Design From Scratch. This site touches on each major topic of the planning, design, and development process of a professional web site, offering clear explanations and real world examples that make each point clear.