An In-Depth Look At My Wireframing Process


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.


A wireframe I created for a client who was launching a new web app last year.

  • (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!

24 Comments

  1. @originallisa says:

    Does it ever disturb you when your designs and wireframes look too much alike? (Ex: Same layout, size, or location of elements) Doing both wireframes and design on projects myself I see this happen occasionally. I’m really not sure if I should be disturbed by it or not… :)

    • Grace says:

      Hi Lisa, I have to say that using wireframes doesn’t mean your designs will look the same just by using common elements when at this initial stage. Having a consistent approach keeps the project efficient and most clients know that a wireframe does not constitute design but planning. So there’s no need to be disturbed at all ;-)

  2. Grace, thanks for sharing your wireframe process. Always good to see what other professionals are doing.

    • Grace says:

      @Dennis Thanks for stopping by, I agree, I love it when other designers and developers share a little of their process!

      @Uncleserb 960 rocks and that photoshop action is such a time saver, make sure to check it out.

      @Burt I definitely agree design is not decoration, but this isn’t my design process, that’s perhaps a post for another day. This is how I start planning and organising the content. When it comes to design I have fairly substantial process i follow which is all about getting to the core of the project, not just adding some lovely colours and fancy gradients. To enable great design you need to first understand the project and plan properly, that’s where wireframing comes in. It’s not relegating design to last, it’s enabling me as a designer to deliver a design which truly fits the requirements and goals of the project.

      Thanks for your input as well, am always very eager to hear others thoughts and ideas, especially on design :-)

      @Trudesign No Chris you rock ;-) Always great to be able to connect with upcoming designers.

      @Doug Hey Doug, Notable truly is fantastic. I don’t recommend apps this much without good reason, it’s really changed my feedback process so definitely check it out. Have fun with the photoshop action as well!

  3. Uncleserb says:

    Thanks for sharing your experience Grace; especially the 960 action that I didn’t know of as well as for the grey-box method article that is a valuable read.

    Cheers!

  4. BurtBrumme says:

    This is a great an organized workflow. My only argument is the same one that I have with many web designers, namely the separation of ‘layout’ and ‘design’. To me, this relegates the design process to really nothing more than decoration: fonts, colours, etc. Maybe this is just a difference in terminology? Steve Jobs, from the NYT article The Guts of a New Machine said,

    ”Most people make the mistake of thinking design is what it looks like,” says Steve Jobs, Apple’s C.E.O. ”People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

    I tend to agree.

  5. @trudesign says:

    Great to know process that others use, I’m new and not very trained in web design, so reading things like this helps me build a proper process to work with. You rock Grace!

  6. Grace, I was actually looking for something to share thoughts, designs and ideas with to my team, and Notable seems to be my answer. Big props on that Photoshop Action too, will be definitely using that.

  7. As I have often shied away from wireframeing due to tight budgets. I found your method really refreshingly short and simple. This way (if done correctly) it should actually save me some time, headache and budget.

    I really should try to find my own way. I think the designs can only profit.

    Thanks for sharing.

    • Grace says:

      Marvin thanks so much for commenting. I’m honored you think my process could work for you! When it’s written down it seems long-winded (well to me anyway), but when put into practice it is pretty efficient and I know from personal experience has saved a lot of time later in the design process, by pinpointing potential problems and organising the content early.

      P.S. Love your site design ;-)

  8. Thanks for the comment on my design. Been planing an english Version for a while and the site really needs an update. Where does all the time go?

    • Grace says:

      Marvin I am the wrong person to ask, I’ve been planning a redesign of my portfolio for nearly 15 months! Have a hundred thrown out designs and scribbles/sketches, but still can’t find the time to really get it moving. I need more hours in the day ;-)

  9. @iamhenrym says:

    Nice article Grace. I usually find my self using similar methods but using Fireworks. It’s unbelievable how easy Fireworks is to use. If you haven’t tried it I highly recommend you should.

    – Henry

    • Grace says:

      Henry thanks for stopping by. Honestly Fireworks is one my least favorite apps, although i do appreciate it probably would be more efficient to create the wireframes, I just don’t gel with it’s UI. I really should give it another go though, thanks for the reminder!

  10. @poldings says:

    Thank-you for sharing your process and esp. for the heads-up on Notable.

    Some designers do get concerned that using Wireframes will add to the cost, but they can save a lot of time further down the line by first establishing how the site will actually work. Also, as you mention, the client doesn’t get side-tracked by choices of colour palette or stock images etc.

    • Grace says:

      @Poldings You bring up a great point: cost. For very small projects on a tight budget, they’re not always viable (or suitable), but for the majority of projects I find them essential. I think most client’s I’ve worked with do appreciate how effective they are and that it’s actually saving time (and don’t forget money) by not going through 5,10,15 revisions for each part of the design!

  11. I had to chime in again. I see several folks mentioning the costs/work involved. I’m currently partnering with another designer on a project. Right now, we’re going back and forth with the client on changes, additions, etc. If we had mapped out the IA and drafted up wireframes for review and sign-off, the project would likely have been more efficient. Too many people still worry about aesthetics upfront, and less about content priority and prominence. Therefore, the cost of using IA & wireframes, to me, is priceless.

  12. Eli Prenten says:

    I love this kind of posts! They hold your hand through the proscess

  13. Ben Shoults says:

    Grace,
    Thanks for mentioning my 960 photoshop action in your post. I can’t tell you how excited I am to hear about someone integrating this into their normal workflow process.

    On another note, this was a great post. I always wonder how “the other guys” do it, not just this but all aspects of the web development process. encore.

    Thanks again,
    Ben

    p.s. Still working on the Browser UI action. I have a programmer working on the install script as we speak.

  14. Bjorn says:

    Nice article, thanks for sharing. I use Omnigraffle in combination with the 960 grid.

  15. Afraz says:

    @grace

    Hi !

    I’m still unable to understand this wire framing while my client’s ask to direct give them mock up idea? what to do in this situation do you have any suggestion?

Leave a Comment