My Selected Tools for UX Design
Process is not really one of my favorite words. I often feel like a comedian getting a sense of the vibe in the room before making decisions on which direction to proceed. Some people like good information-architecture diagrams, other people hate them. Some people see wireframes and wonder why the design is so austere. It’s difficult to have a process when you approach it that way. But I’ve discovered that I’m honing in on a process and I share only the part or parts I think my audience will understand and use the rest for my own sanity.
Ideas and Notes
I’ve always loved the idea of note-taking and sketching my ideas in some cool-looking notebook but I’ve always been terrible at it. For whatever reason, I could never do it to my satisfaction and would ultimately just turn to a blank canvas on the computer instead. That is, until Paper came along for iPad. The folks at FiftyThree hit a sweet spot with their software and I’ve been hooked. I sketch every little idea that comes into my head now. I don’t know why it’s different to me, but it is. And when Pencil came along, that sealed it. I’m a sketching addict. Penultimate didn’t become useful to me until the Jot Script was introduced and now I have the perfect note-taking tool. Why is it better than physical notes? Simple. Evernote Premium. When I take notes, they’re available to read on Evernote anywhere I happen to be. And the best part is the notes are searchable like any typed note. It’s mind-boggling.
As an aside, I’d like to take a moment to ask other designers out there to chill out with their exclamations that people must sketch to be a good designer. Cameron Moll chooses to use software to iterate on his ideas and no one is claiming he’s a bad designer. Just because it works for you, doesn’t mean that’s the only way to do it. So calm down.
Wireframes and Diagrams
If I don’t create diagrams for information and workflows I’ll go crazy deep into the project. It’s sort of my guiding light as we move forward. I use OmniGraffle for all of my diagrams and wireframes. For diagrams, I can think in outline form and have the diagram auto-draw for me (although, honestly, I always go to the finished diagram and move stuff around). And for wireframing it’s almost the perfect tool. I can use shared layers that repeat throughout the document and when I make a change in one place, it’s changed everywhere. It has rudimentary linking capabilities so I can test what it feels like to jump from page to page with clicks. And, I just know this software inside and out. Not that it should make a difference, it didn’t for Adobe. I’ve been using Photoshop for nearly 20 years and know it like the back of my hand. But, as you’ll see, Adobe is nowhere to be found on this list. The giant slept.
Rapid prototyping takes place somewhere between OmniGraffle and Keynote. The thing I like about using Keynote is how quickly I can create a clickable prototype with some simple animations to show how I envision the application working in the end. I can save a lot of time if I can show the development team or the product manager how the little + button will spin 45˚ to create an x to go from add to remove. Sometimes communicating those little animations is difficult and Keynote helps me get the point across.
The new king of UI design is Sketch. I’ve used this application exclusively for mockups over the last 6 months or so and it has transformed the way I think about design. In fact, it seems utterly absurd to me that I ever did user-interface design in Photoshop or Illustrator, applications that were never designed to do those things. It’s not just that Sketch was built from the ground-up with UI design in mind, it’s that they handle the associated graphics with output in mind as well. If I have a vector object on the stage and want to export it for use in my responsive application, why wouldn’t you give me the option to export it at 2-times the size for high-resolution devices? Sure, there’s some crazy workaround for this in Adobe Photoshop CC with naming layers a certain way but I’d much rather have the vector graphic anyway. Quark, meet Adobe. Adobe, meet Sketch.
I’ll admit that I don’t do this as much as I used to and I still can only go so far as some light jQuery. But I enjoy getting to write HTML and CSS when I can and I do the best I can to stay current with the latest in responsive layouts and coding best-practices. I know some of you might feel like I could cut out all of these steps and just fire up TextMate at the beginning and work my way through. But I would have nothing to refer back to, nothing to help guide my work.
What about usability?
I didn’t touch on usability or user research because those are a different kind of workflow. They absolutely fall under the realm of User Experience (UX) but I specifically titled this post with “UX Design” to avoid any confusion. The tools listed here and the tasks I do with them are about completing a design from start to finish. Peppered throughout this process is usability. It’s just a much larger discussion and this is likely already tl;dr.
These are fantastic.
Fill A Page With Color
Fill any page with color by holding your finger on a color dot and “dragging” it onto the page. Click here for a demo.
Information I could have used a looooong time ago. So much wasted time and energy coloring the page by hand.
Apple - The CSS class for legal fine print on Apple product pages is “Sosumi.”
Have some fun.
i think my brain just exploded
science side of tumblr, please explain
Air on bottom go woosh. Air on top go woosh. Air on front go woosh. Little plane stay still.
Thanks science side of tumblr