home

Wireframes and Concept: Planning a Website


Saturday, August 22nd, 2009

vimeo-clip-page

When planning a website the first important steps involve just a pen and a paper. It’s crucial to understand what we are creating and its nature. To list the purpose, the expected content and draw its structure will be our first concern.

What Kind of Site Do I Need?

This should be our first focus but we will probably have an answer only at the end of this article.
I mean that the nature of our site will vary in relation to the ammount of content, of our ability and knowledge of the instruments, and the characteristics we require.

For instance:

you may want a place to present your business and usually a static website is enough;
you may want to keep clients or friends updated with your activities and a good solution would be a blog or even twitter if you’re concise;
you may want to create a social network as you have seen many having success in the latest years and in that case you’ll need something powerful while also getting your hands dirty with php to deal with dynamic contents;
you may want a place to list some works you have done in your own field and you probably want to go for a portfolio.

As you see there are many possibilities which may vary even by your skills: Are you a css ninja or do you prefer to pick a free template for your blog? Are you practical with php or do you prefer to use a CMS to make your life easier?
All choices to consider before you start, but you can clear your mind following the next steps.

List Your Content

It’s really as simple as that: take a paper and write down what you want on your website.
Let’s say you are a photographer and you want your personal site. You know you will put a lot of pictures, maybe a gallery to collect them and different categories, each with its page; definetely you want to give your contact info and if you are willing to share maybe also a few words about you: what you do and anything you feel like saying.

Ok you have listed all these things on your paper but now you can decide how to organize them.
Split them into pages. For our exemple we already have enough content to create an home page, several pages of pictures divided by category, a contact page and an “about” page. Well, it is also true that nowadays are getting popular one-page sites for portfolios, so if you are fancy enough.. But for the sake of the article let’s consider our first scenario.
Good, now we have at least 4 pages. Let’s see what they really look like.

Draw Wireframes

Wireframes are small mockups of a page with a schematic represantation of its elements.
In a practical way I mean you need to draw your pages and what they look like. Start drawing a section for the header on top of the page and one at the bottom for the footer.
You can decide where to put the navigation: you want it in the header or maybe in a sidebar?
Choose where to place your text, your headings and in this case your pictures.

I usually start with something really schematic and as soon as I make up my mind about what I want I go into details and I draw all the little things as I imagine them. Take a look at these exemples of wireframes from many designers: some are quite near to the final version of the site and others are just the sketches of first ideas.Sketch1Wireframe #1 on flickr
Sketch2Wireframe #2 on flickr
Sketch3Wireframe #3 on flickr
Sketch4 Wireframe #4 on flickr
This is also the moment to build the fundaments for your information architecture by creating a small flowchart of how your pages will be connected among them and with which hierarchy.
This will help you create your navigation which is key for the usability and the information architecture of your site. Two aspects to take good care of through out the whole process of your work.

Update:I copletely forgot to add the presentation that Nick Finck, Donna Spencer and Micheal Angeles performed at the SXSW interactive 2009. Slides + audio, you couldn’t have a better help. Remember to show some love to the authors on their blogs and twitter.

That’s pretty much it for the moment.
You can draw your wireframes by hand (like I love to do even with horrible results) or there are several programs to do that professionally, generally used by designer who need to present a project to a client.
Next steps should be to write down your content and create your graphical interface. We’ll have time to talk about these topics later on. (psst, subscribe to know when)

If you have questions or you want to discuss different scenario and purpose to apply this technique we can share our ideas in the comments.
Check the related links I listed below to get to my resources or similar stuff I found around if you want to know more about the subject.
If you liked the article and you think someone else could be interested share it.

You can leave a response, or trackback from your own site.


Tags & Category




Share

  • digg
  • SFacebook
  • Twitter
  • technocrati
  • stumble
  • delicious

Comments   29rss

    1. Comment by Mohammed Mudassir Azeemi

      September 4, 2009 @ 3:21 pm


      good write and good read! thanks for sharing your thought, I am also these days working on couple of projects and thoroughly working on the Wireframes and "Inmates Running the Asylum" is kind of my bible these days :D

    2. Comment by motbones

      September 4, 2009 @ 3:45 pm


      Great article. I just sent it to my employees as a must read. It is simple to understand and really important to the creative process.

    3. Comment by Mohammed Mudassir Azeemi

      September 4, 2009 @ 4:11 pm


      That link is broken i guess:

      http://www.eng.designerbreak.com/glossary/#IA

      I think the correct one is http://designerbreak.com/glossary/#i

      Cheers

    4. Comment by admin

      September 4, 2009 @ 4:55 pm


      @motbones, thanks for the support and spreading the word! I indeed think good planning it’s a crucial step to start things right.

      @Mohammed, I’m glad you enjoyed my article and thanks for noticing the broken link, it’s fixed now! I always try to check everything but it’s easy to miss something :P
      I hope you’ll find the glossary useful, is a feature not many blogs offer and I wanted to try it here.

    5. Comment by admin

      September 5, 2009 @ 12:12 pm


      Heeeey, big update on this post!!!
      I just added Nick Finck’s presentation on how to use correctly wireframes!
      Watch it and learn :)
      Many thanks to the authors, and sorry guys for forgetting this at first.

    6. Comment by Tom Web PM

      September 6, 2009 @ 4:44 pm


      Good that you wrote that post about planning a website! It is really a such important step in the whole process. F*ck ups in that step can be so hard and annoying in further steps that it is just necessary to do the start sytematically.

      cheers,
      Thomas

    7. Comment by Michel (admin)

      September 6, 2009 @ 8:52 pm


      I agree Thomas, I see this as a mandatory step. just rushing into production without a proper planning will affect the whole process and of course the end result.
      Thanks for commenting!

    8. Comment by WD Becvar

      September 12, 2009 @ 7:29 am


      Nice to see a wireframe layout done with HotGloo *The Online Wireframe Application* (Pic: Wireframe #2 on flickr)!

    9. Comment by Michel (admin)

      September 12, 2009 @ 11:19 am


      Nice app, this week I’m starting a new project so I’m gonna try it to see if it suits me, thx

    10. Comment by cypherbox

      September 24, 2009 @ 12:06 am


      Nice post. I’m gonna try this one. Thanks for sharing!

    11. Comment by Madeline Ong

      September 27, 2009 @ 7:34 am


      Thanks for this article! What tools do you recommend that allow developers to easily make wireframes that are presentable to clients (preferably with page-linking capabilities)?

    12. Comment by Michel (admin)

      September 27, 2009 @ 12:37 pm


      Hi Madeline, I prefer to do my wireframes by hand but if you need something clean to show your clients there are many options.
      Personally if I want to get into detailed prototyping I use Illustrator, but only because I already use it for many other things. Most famous specific tools for mockups & wireframes are Visio, Axure and Omnigraffle. but they have commercial licenses and work only on some OS. If you’re looking for something free many refer to Denim http://dub.washington.edu:2007/denim/ .
      If you don’t mind working online I recently tried http://www.hotgloo.com after Becvar noticed in the comment above that it’s the app used in the 2nd screenshot of the article, and I liked it: simple, nice interface, lot of options, you can use it to collaborate online with other designers and at the end of the project you can export it as a gif.
      I’m not sure why you want to use links into your wireframes but in that case I suggest you simply start prototyping in html. I know it’s less practical and more time consuming then simply sketching things, but if you want to use links, get into details and make things interactive you should consider designing into the browser from the early stages like Andy Clarke suggests http://forabeautifulweb.com/blog/about/time_to_stop_showing_clients_static_design_visuals/ .
      However I guess there are some wireframing apps which include the link option, simply I’m not aware of.
      I hope I helped and if anyone has some more suggestions please contribute! :)

    13. Comment by AJK

      September 28, 2009 @ 11:47 am


      Some wireframes apps which Madeline can look at. Balsamic Mockups – http://www.balsamiq.com/products/mockups
      iPlotz – http://iplotz.com/

    14. Comment by Madeline Ong

      October 7, 2009 @ 10:46 pm


      @Michel, @AJK

      Thank you very much for your suggestions! I’ll be sure to try them. The reason I want to use links in my wireframes is to get a feel for how the user travels through the site.

    15. Comment by Tino

      October 8, 2009 @ 10:16 am


      You might want to check out the <a href="https://pidoco.com&quot; title="mockup creation with pidoco┬░">pidoco┬░ Wireframe Tool</a>. pretty cool features since it’s totally browser-based.
      Best,
      Tino

    16. Comment by Cristian Pascu

      October 14, 2009 @ 7:50 am


      Hey,

      Very interesting and insightful article. When trying to nail down some UI ideas, I just love using paper. I go in another room, away from the computer. Paper simply sets your mind on different coordinates and lets you focus more deeply, away form IM distractions. :-)

      Nevertheless, digital wireframes and prototypes clearly have their place and purpose. If you’re looking for cross-platfrom prototyping tool, supporting full interactivity, you may want to give a try to FlairBuilder (http://www.flairbuilder.com). It runs as a desktop application, but it also has an online demo.

      Cheers,
      Cristian

    17. Comment by skinny ties

      October 19, 2009 @ 4:06 am


      Some good information in your post. Thanks for the pleasant read!

    18. Comment by Web Design Bureau of Mauritius

      October 23, 2009 @ 9:37 am


      Hey, I just came across your article as I was searching for some information to complete my understanding of the whole web design process. As you said in the comments its good to use pen and paper and then jump to Illustrator. Actually, my idea is to jump to the tool you’re most acquainted to, mine being Photoshop.

      Your article is great and is definitely a keeper :-D

    19. Comment by Michel (admin)

      October 24, 2009 @ 6:55 am


      yeah exactly, in the end it always depends on what you’re used to. If you’re comfortable with photoshop then use that. However I thanks everyone who’s suggesting tools specific for wireframing because they obviously makes the job easier if you’re trying for the first time.

      thank you guys for the kind words and thanks everyone for suggesting useful tools.

    20. Comment by Alex

      November 11, 2009 @ 10:40 am


      A really great post. I’m sharing this with some clients, they must read this.

    21. Comment by Vance Braasch

      December 4, 2009 @ 3:15 pm


      , that was a good post. I was actually just browsing the web for some employment opportunities and come across your blog. I’m easily distracted, which must be why I can’t find a job. :) I’ll be sure to more of your blog.

    22. Comment by Dee Rehling

      December 6, 2009 @ 1:25 am


      Nice post, thanks!

    23. Comment by Michel (admin)

      December 6, 2009 @ 12:26 pm


      Hi Vance, I’m glad you liked the post, I hope you’ll find a job soon.
      don’t worry if you get distracted reading this kind of articles, I do it too surfing the web for hours and I rather call it personal training :P
      it all come back useful eventually.

    24. Comment by Ashlyn

      December 8, 2009 @ 8:37 pm


      Nice post, thanks much for sharing.

    25. Comment by Free Job Posting

      December 15, 2009 @ 3:38 pm


      That was very useful. I appreciate it. Thank you.

      I’m going to send this out to my contacts.

    26. Comment by Michael david

      January 2, 2010 @ 1:05 pm


      Hi,

      Awesome post,just found this post from my Yahoo Buzz upcomming blogpost news feed, really interesting post, keep it up.

      Michael

    27. Comment by Mobile Phone Accessories

      January 15, 2010 @ 12:41 am


      Hi,
      I appreciate your blog,and provide more information on this?
      Regards,
      Jane

    28. Comment by google games

      August 15, 2010 @ 3:26 pm


      Wow this was a great post.. I’ m enjoying it.. good resource

    29. Comment by Free Job Postings

      January 23, 2012 @ 6:40 pm


      Awesome wireframe photos! I recently came across an application that supposedly makes the mockup process easier, but I’ve yet to try it out: Balsamiq. Anyway, keep up the great work!


top