Designing a website: Wireframes and mockups

Posted by Libby Fisher on Thursday, February 24th, 2011 in Web Design

Good afternoon friends! I apologize for the delay in writing this next post in our series – The 5 Major Phases of a Web Design Project. I have been busy actually designing websites and haven’t had much time to write. :)

Today we are talking about the third phase of  a web design project – creating wireframes and mockups and presenting them to your client. Hopefully you have already collaborated with your client and spent some time researching your web design project to get a good idea of which elements and features you want to include in the site. Now it is time to start sketching out and deciding on the layout of the site and then the basic design of the site.

Wireframes

What is a wireframe?

A wireframe is a skeleton “graph” of a website that shows navigational concepts and some of the basic page content. A wireframe looks a lot like if you sketched out the basic layout of a website on paper with no (or very few and subtle) colors.

The purpose of a wireframe is to help you and the client decide and agree on the layout and navigation that the website will have.

Why should I use a wireframe?

The reason I use  wireframes is to save time in the long run and to avoid miscommunications with my clients. Even after talking with them about what they want their site to look and work like, it is easy to still have a very different image in your mind than what they have in mind. By creating wireframes before ever starting the design or the coding of the site, you can make sure that you and the client are on the same track.

Sometimes, depending on the project, you and the client will go back and forth several times on the wireframes, but even still – it is easier to modify wireframes than it is to modify the entire site once it is coded!

How do I create and use a wireframe?

You can create a wireframe in a few different ways. There are a lot of online resources available that make it fairly quick and easy to put together wireframes. The website that I generally use is mockingbird.

You could also sketch out a wireframe in PhotoShop or Fireworks if you wanted to. All you are trying to do is get a good idea of how the website will be layed out and what content (images, navigation, text, etc.) will go where.

Oftentimes, you can create two or three different wireframes for a client each showing different layouts and navigation options. The client then can choose the one they want to start with and you can make modifications to it (as outlined in your contract) until both you and the client are satisfied with it. Once the layout and navigation scheme has been approved by the client, you can move on to creating mockups.

Mockups

What is a mockup?

I would describe a mockup as the “decorated” version of a mockup. It is based off the wireframe that the client approved but has colors and other design elements (such as the fonts you will use in the website, background images, etc.).

Here is an excerpt of the definition of a mockup, taken from an excellent article at PSDFanExtra.com:

You could say that a wireframe is more about the physical layout, and a mockup is more about the design. You may build on the wireframe with dummy text, color, graphics and polish, and may adjust layout slightly but stays within the general guide of the wireframe.  A mockup is usually a full graphic composition that has used the afforementioned wireframe as a template for the Photoshop beautifying that has created the mockup.

Hopefully that makes the difference between a wireframe and a mockup clear – a wireframe is used to portray the layout of the website and a mockup is used to portray the graphical elements and look of the website.

Why to use mockups

The reason I use mockups is exactly the same reason that I use wireframes – to save myself time in the long run and to avoid potential miscommunications with my client. By deciding with the client what the finished site will basically look like before you start coding it, you will save the time of having to rewrite your codes. Changing a color or adjusting the size of an element in PhotoShop is significantly easier and faster than making those changes to the actual website.

How do I create and use mockups?

Personally, I prefer to create mockups in PhotoShop or Fireworks. There are probably several other ways to do it (if you have another way you prefer, please share it in the comments!), but I have always done it in a photo editing program and don’t see a need to change that now. :)

How in-depth and detailed you are in designing the mockup is up to you and may depend on your client and the project at hand. I am not usually quite as detailed in the design of the mockup as I am when I design the finished site, but again – it depends on your client and the project at hand.

Note: When using both wireframes and mockups in your design process, I highly recommend that you outline in your contract how many different original wireframes or mockups you will create, how many revisions you will make to the one the client approves, and how much time the client has to make changes or approvals.

So there you have it, a fairly quick overview of the difference between wireframes and mockups and the reason why you should use both of them in your web design and development projects.

I would love to hear your opinions on why you do or don’t use wireframes and mockups and how you create them. Just leave a comment below and we’ll discuss. :)

Make sure you check out the next post in this series – coding the new website.

0
Shares

17 Comments

  1. annmark says:

    I found your post a source for info ..Today i learned many new things about Wireframes and Mockups which is a good addition in my knowledge,…Thanks for the accurate info on both .

    http://www.istartus.com

  2. Aaron Dodson says:

    Mockups are a crucial part of design! It helps a ton to cut down of edits further down the design road. I use http://builds.balsamiq.com/b/mockups-web-demo/ to get my first wireframes out to clients.

    Great post!

    • Libby Fisher says:

      Hey Aaron,

      Thanks for commenting! I couldn’t agree more on the importance of mockups, and wireframes. :) And I will definitely check out the link you mentioned, thanks for sharing it! :)

  3. Etienne says:

    Great post that clarifies blurry concepts.

    To “wireframes” and “mockups” i’d add also “prototypes”. Actually i’d class it in this order:

    1. Wireframe (layout)
    2. Mockup (design)
    3. Prototype (interactions)

    all these steps are necessary to think and build the right products.

    Softwares like Justinmind or iRise let you go all the way, from rough wireframes to dynamic prototypes without any coding.

    http://www.justinind.com

    • Libby Fisher says:

      Hi Etienne,

      Thank you for commenting. I have never used either of the software programs that you mention, I will have to check them out. :)

  4. Gabi says:

    I’ve never done a design without drawing it out on paper first.
    Great article. Thanks :)

    • Libby Fisher says:

      Hi Gabi,

      I too am a big fan of sketching things out with good old paper and a pen. :) Thanks for commenting!

  5. Beth says:

    Would you use wireframes and/or mock-ups to give to your web developers when adding a new product/feature to an existing website? Does the business owner create the wireframes and the graphic designer create the mock-ups?

    • Libby Fisher says:

      Hi Beth,

      In my experience, I (as the web designer/developer) usually create my own wireframes. Of course they are often based off of how the client has told me they want the website to be set up. If the client doesn’t have a preference for the layout, I design the wireframe in a way that I believe will be best for the client’s website and then send it to them for their approval.

      If you (as the web developer) are working with a graphic designer, then how involved they are in all the different phases of the web design project depends on the project at hand and the people involved. Sometimes, a graphic designer does handle all the wireframes and mockups and then hands the mockups to the developer to code. Other times, the developer handles the wireframes and layout of the site and uses a graphic designer simply to create the images and other design elements for the site.

      Does that answer your question?

      Thanks for commenting, let me know if you have any more questions!

  6. Good information. Wireframes and Mockups are good, but I ‘m still in the process of learning it because it finds me interesting and I want to learn it. Thanks for sharing this good information.

  7. Igor says:

    Good article. Thnx.

    I see that there wasn’t any comments for sime time now, so I hope I’m not too late. I try to make a sitemap first and then in the next step a wireframe. Content is the king, so I like to start there.

    For sitemaps and wireframes I use an online service: cacoo.com.

    Regards!

    • Libby Fisher says:

      Hi Igor,

      I think that is a great system – I too like to start with a sitemap so I know what I am working with and from there I go about organizing the way the site will be set up and then designing it once I have it laid out the way I want.

      Thanks for commenting!

      ~Libby

  8. Leave a response

    Current ye@r *