I recently contributed to an article on Mashable which focused on Essential Design Tools for Social Media Pros. I chose to concentrate on (of course) wireframing as I personally believe it’s one of the most important stages in the design process. It allows for rapid prototyping and helps me pinpoint any potential problems.
I’ve decided to expand on my points in the Mashable article and write an in depth walkthrough of my wireframing process.
I generally use the Grey-Box Method to create wireframes in Photoshop, though for larger projects or applications I use Mockflow (Premium). Personally the Grey-Box method acts as an intermediary phase between initial sketches and the actual design phase.
My workflow when wireframing usually consists of the following:
- (1) Pen & Paper
It’s the fastest way to brainstorm and convey as many ideas as possible with the least amount of effort. Sketching enables me to break down ideas and fully explore UI options and I find putting it down on paper tends to raise questions and ideas and leads to changes. I use the Sketch Sheets supplied with the 960 Grid System which display a browser frame and grid lines.
- (2) Grids
Using a Photoshop Action that recreates any of the 960 templates, I start creating the wireframes using the grid as a reference point for positioning elements (Cmd + H to toggle the handy guide visibility). As a side note, Grids aren’t for everyone but I do feel they help give structure and a solid foundation to build my designs upon.
I should note I don’t use Grids on every single project nor do I always stick rigidly to them as I find on certain projects they act more as a foundational guideline.
- (3) Creation
Using this method is essentially designing with spacial relationships and focuses on creating a functional layout without getting hung up on fonts, textures and other design elements. Wireframing is concentrated on functionality not design so I try to avoid anything that could be construed as design as it almost certainly ends up distracting the client.
I use the wireframe to layout the actual dimensions of the page so that once it’s approved it’s just a matter of applying the design treatment (see step 5). I also keep things very simple and limit the ‘color’ palette to: #dadada, #f2f2f2 and of course #000000.
- (4) Feedback
I use Notable for feedback on projects, so a workspace is setup for the project and the wireframe (JPEG) is uploaded, along with any necessary annotations with feedback then requested.
Notable is superb and is ultimately built to allow quick and easy collaboration. It’s helped me streamline my feedback process and keeps all parts of a project organised using sets and workspaces.
- (5) Design
Once the wireframe has been finalized, I can go straight back into Photoshop and actually ‘build upon’ the wireframe itself which makes the process that much more efficient as the starting blocks are already in place right down to the grid! It also means the design process is more in touch with my initial wireframes.
Using Photoshop and in particular the Grey-Box Method may sound like a waste of time when you can just move onto a full color comp but it allows you to spot potential problems early, make adjustments quickly and cuts down dramatically on revisions later in the design treatment stage.
More importantly whatever method or tool you use, the key thing is that you take the time to plan.
That’s my process but I would love to know what tools and steps you take when wireframing for a project. Any tips or advice you can leave in the comments below would be awesome!