Skip to Main Content

Indiana University Indiana University


Wireframing for (hopefully) Better Websites

For people new to the web design game, the process can seem kind of overwhelming. After all, at various points when designing and developing a website, you need:

  1. aesthetic skills (to make things look good)
  2. information architecture skills (organizing the content in a way so that users can find what they need)
  3. interaction design skills (making sure that the paths within a website makes sense and are pleasurable for the user)
  4. technical skills (XHTML, CSS, knowing how to turn on a computer)

Many web design shops have pros who are experts in each of these areas. How can you, a smart but inexperienced person, compete with that?  You’re just trying to put together a little web site for yourself, your aunt the locally famous banjo player, or a volunteer organization…

divide et impera, or, Divide and Conquer

It is quite likely that you will go crazy if you attempt to figure out the page content at the same time you’re trying to figure out whether the color scheme should be pink with purple or tan with brown. It is my opinion that the most amazing design sense cannot overcome bad planning, so, it is my recommendation that you focus on the stuff in the site first, then worry how it looks. Decide what stuff is going where, in roughly what order, and then you can experiment with graphics, colors and typography.

Wireframes to the rescue

a wireframe example

Wireframes in the design world are very plain sketches or diagrams that show where the content, navigation, and buttons on a webpage go. Wireframes are usually in black and white, and use placeholders like

A placeholder image

to represent images that will go onto the page later. To use an analogy, wireframes are to an Amish person what a finished website is to Lady Gaga.

The nice thing about doing wireframes as part of your planning process is:

  • they’re much easier to change and modify than an actual web page
  • you don’t have to invest any time on the technical side (figuring out how to make the XHTML and CSS work together to accomplish your vision)

So, what are some tools you can use to create wireframes?

Pen and Paper

If you have some artistic skills and are working on a site by yourself, hand-drawn sketches can be a great way to go.  They get you away from the computer and can be fun to do; just grab pencil and paper.

A sketch by T. Scott Strandberg

A sketch by T. Scott Strandberg

Gliffy.com

A cross-platform, online-based tool, Gliffy is definitely not all-powerful, but it is pretty easy to usefree, and allows you to share your sketches with others. Running your ideas and sketches past other people is always a good idea, and its a lot easier to change aspects of your design at this phase than it is later on.

Gliffy-made wireframe example
There are actually quite a few tools for wireframing, but the important thing is to wireframe first, then add the design bells and whistles later. You really don’t have to learn a whole new tool just to do a wireframe.

Good luck!


12 Responses to "Wireframing for (hopefully) Better Websites" to “Wireframing for (hopefully) Better Websites”

  1. artViper Says:

    Good article – well, I guess this distinguishes real wizzes from “normal” webdesigners. I cannot state often enough that webdesign is more than clicking together a nice looking page in a wysiwyg editor. The in-depth knowledge need and the skills required to make a up-to-date page are very demanding. So either there’s a whole team behind a web project or a senior designer who knows what he has to deal with, starting from the design layout over the validitiy of the page, JS frameworks, CSS etc. Noone said, being a designer is an easy job :)

  2. mspired Says:

    Thanks for this good article , and i’m totally agree with you Wireframing helps in creating better websites , and also helps in cutting the design time (for me :) ) .

  3. Murli Says:

    Thanks for the help full tips on Wireframing to create better websites.As per my experience below points will surely help you to make your website successful from business point of view.

    1. Create unique content: – Search engines love unique content, which means that the content you feature on your website should not be anywhere else on the web.

    2. Target a certain segment: – Creating a multi-purpose website can be successful, but statistics have shown that niche websites are easier to generate revenue with.

    3. Encourage frequent visits: – Use a mailing list to capture your subscribers and be in constant touch with them.

    4. Do not over-advertise: Do not fill up your website with meaningless banners or sponsors in hopes for a quick buck. Websites which have used advertising only sparsely provide a more professional look.

    5. Base your website on an idea: I cannot state this enough. The money is not in the website itself. It is in the underlying idea. What is your idea? Do you wish to bring the guitar community together on a single platform?

  4. Amy Neymeyr Says:

    Great additional comments, Murli, especially if you’re interested in the monetization side of web site development.

  5. Ken Says:

    Great article Amy! Most web designers have never even heard of a wireframe and if they have, they think it is the shelf in their old fridge that holds their beer.

    Wireframes are valuable resources which can help lay the foundation for successful websites.

  6. How to Write Says:

    When it comes to optimizing websites it is always a great strategy to begin with a well planned layout for a site and wire framing is a great way to go on with it.

  7. Meine Fewos Says:

    I really like this post! I never heard about wireframing before but it is exactly what I was looking for. I will have a closer look at Gliffy and think it will help me to structure my newly planned website much better.

  8. web design Says:

    You have a good article, but best wireframing tools are pen and paper, especially if you meet face 2 face with your clients. I am also using axure software for design mockups. Easy to use and I have the possibility to save as pdf or jpeg.

  9. Interpix Design Says:

    Ha! People in our company use wireframes religiously and I have never seen them used elsewhere. But I get it now and I see that starting with this kind of skeleton has excellent implications for the end product. I will say that these are great for big design houses and less practical for most small websites. But then again, I could be wrong. After all, you need the skeleton before you add the meat. Thanks for explaining something other people assume.

  10. Website Designer Says:

    Wireframes are a critical component to keeping a project in scope. If you spent 10 hours designing a masterpiece only to find out the client wants something completely different, it’s back to the drawing board and a lot of wasted time for nothing. By showing them a quick low res blueprint of where everything will be, they can sign off on it and you can get to the business of design without worrying about structural changes.

  11. Web Design Dallas Says:

    Wire frames save time and money. You have to mockup sites and present to client and significant changes can effect project sales margins. Great Article.

  12. Darryl Manco Says:

    Using wireframes keep a project focused, and undergird a well thought out website. Great article!

Leave a Reply

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.