My UX / UI Design Process
1 CommentThe first thing to note here is that everyone’s process is different. There is no one size fits all here and there likely never will be. Even though we are designing user interfaces we are still creating art. Creativity and inspiration sit at the core of UX and UI design which makes design processes subjective.
That being said, here’s what my typical design process looks like..
Thinking
When I’m faced with a design challenge, the first thing I do is sit and think. I don’t open Photoshop, I don’t break out the sketch pad.. I just sit and think about what it is that I’m building. I try and wrap my head around the value of the interface, what the most important parts might be and how the user flow might feel.
It’s sometimes enough to simply sit in front of my computer and reflect on the experience I am about to build, but often great ideas come to me when I am taking a shower in the morning or laying in my bed at night. So, if I’m feeling blocked on a design and not sure where to begin, sometimes I’ll just leave it for tomorrow. I usually find that I start the next day full of ideas and ready to start sketching.
Sketch it out
After I feel like I have a good mental handle on what it is I’m trying to build and I have thought of some fun interaction experiments to try out, I take to my sketch book and just start drawing.
I often find myself initially leaving out or forgetting UI and interaction elements that were in my head but that’s alright. Sketching is a process and doesn’t have to be perfect. Start with a simple outline and iterate on it until you have something more encompassing.
Keeping your sketches low fidelity is key.. It’s easy to get caught up in the details but do yourself a favor and save all the beveled edges and drop shadows for Photoshop. Jason Fried of 37signals recommends sketching with a sharpie since it’s relatively impossible to sketch in detail.
Sketching Tools
At the very least you’ll need a pencil and some paper, but there are some other neat tools out there that can make sketching user interfaces a bit easier.
UX Sketchbook – This is one of my favorite tools. It’s a perforated, bound book of paper with pre-printed browser boundaries. It even leaves room for writing notes. There is also an iPhone App Sketchbook to help with crafting mobile interfaces.
UX Sketchbook
Ruler – You also can’t go wrong with a nice ruler. It helps when you need to make a sharp boundary line or guide.
Pencil – Right now I’m primarily using the GraphGear 500 for my sketches. I prefer a mechanical pencil since I don’t have to deal with sharpening and they last longer than a normal pencil. I do, however, sometimes prefer the softer lines of a classic #2 so I’ll make sure to keep that in my pencil cup.
Drawing Table – I snagged this basic drawing table from Amazon which makes it a bit easier on my back and neck when I’m sketching for extended periods of time. I highly recommend a drawing table if you find yourself sketching often.
The drafting table I use
Designing
Once I feel like I have a visual representation of what it is I’m trying to build, I immediately take to Photoshop while it’s all still fresh in my mind and I’m feeling excited about pushing some pixels around.
Design Tools
Photoshop – This is pretty much a necessity for any UI designer, though there are alternatives like Gimp, Pixlr or Sketch. Feel free to suggest others in the comments section below.
Template Starter Kit – I personally recommend using a Photoshop starter template since it just speeds things up. It’s easy to build your own but I use a pre-made one called “Quommunication Starter Kit”. Their website is no longer available but you can download the starter kit here. If this starter kit doesn’t suit you then a quick Google search will uncover some other great options.
GuideGuide – GuideGuide is a free photoshop extension which I use to manage and generate guides in different column layouts. Honestly, I don’t know how I ever designed without it! I highly recommend giving this extension a try.
Common design process mistakes
Think before you design
Instead of just jumping into Photoshop or breaking out the sketch pad, next time try sitting and reflecting on the design problem that you are solving. Brainstorm fun new types of interactions to try out. Look around on similar websites or services and observe the design decisions they made.
For some this might be a 10 minute process and for others it might be an hour or more. In either case I believe it is an important step in the process.
Sketch it out!
Even if you are taking a sharpie to a post-it note, it is almost always beneficial to draw things out before opening up Photoshop and moving around pixels. Pencil and paper is much more pliable and disposable than Photoshop document. Use that to your advantage.
User-centered design is the idea of keeping the user in mind while designing an interface and also involves testing the validity of design assumptions against real-world users. In other words.. if you have a user-base, take advantage of them by running A/B tests and seeing how different interfaces perform.
Not every designer is in a position to attain real user feedback on new designs but, if you are, I highly recommend taking advantage of it so that you can build a system based more on data than assumptions.
Conclusion
So that’s a quick peek into my design process. What does your design process look like? Do you have a way to improve mine? Let me know in the comments section below. Thanks for reading!
