Designing a website: Wireframes and mockups
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.
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.
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.