Wireframes: Prepare Your Website For Design
So you want to create a new website.
The planning process is essential to make a website successful. Creating a website without a blueprint is like building a house without the plans; disaster!
Your website must provide information that fulfils the immediate needs of your site visitors. So, once you’ve determined your visitors needs, you can then proceed to plan a sitemap of how your website will provide this information.
Create a Wireframe of Your Website
A wireframe or sitemap is a simple visual guide to show you what a Web page would look like. A website wireframe should show the entire site structure – including what pages link to where.
Before you ask your web designer to create some design samples of your new website, take a few minutes to create a wireframe of your website. This will help to make sure the final product is much closer to what you were hoping for.
How To Create a Wireframe of Your Website
Here are 5 ways to quickly create a wireframe for your website:
- Draw a wireframe on a A4 piece of paper and fax it through to your website designer.
- Use iPlotz to create click-able and navigable wireframes to create the experience of using a real website. Once you’re finished, you can send it through to your website designer from within the program.
- Use the free program Pencil Project to build diagrams of how you would like your website to appear.
- Use Omnigraffle if you own a Mac. You can easily create wireframes that look professional.
- Use MockFlow to create wireframes online quickly and easily.
Your Web Designer will either kiss you or give you a big hug if you do this before you pick up the phone or send an email to your prospective web designer. In addition, all confusion will be removed and more accurate quotes with no hidden surprises, will be supplied by the best web design company.
Examples of Wireframes
I really like your post its interesting and I hv learnt so many things from your post……I knw its really helpful!!!!!!!!G8t Job
I do now. It’s much easier to spend a minimal amount of time doing a wireframe and showing the client to see if you are going in the right direction then spend hours in layout.
I use iplotz.com. It makes the process a lot easier with drag/drop.
Again I agree with April. I hadn’t tried iPlotz though, thanks for sharing that one! I usually use http://gomockingbird.com/
Thanks April, been using it all day and love it!
I do most times. It depends on the client and their budget and overall goal. For any site that will have more than 2 types of page designs, or have an in-depth process flow, there is no other way to show the client how things will work.
Great links for wireframe tools. smashing mag did an article about that a while back that had a bunch of other good ones!
http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
I plan it in the process for all web and mobile projects. It’ll speed things up once you hit development. Once you get the client or office to understand that, you’re on your way to better designing. I used Omnigraffle for a long time but now I stay mostly in Illy for all of it.
I created standardized iPhone, Blackberry and Android wireframes for mobile work and all web wireframing is based off of a template I started a long time ago. Besides helping you in the long run, you look so damned professional handing them over for review.
one of the best lists Ive read regarding a portfolio site… thank you for sharing!
I have to say there is something organic about laying out a design with pencil and paper. After the flow and structure have been developed, I often use Fireworks for second level presentation.
I’m a big proponent of using detailed Web site maps to highlight navigation and page content. I have no problem with Wireframing only if it does not dictate layout of the actual page. For Web site mapping I use Omnigraffle.
Thanks fore all the tips.. I usually use Illustrator or Photoshop to map out a wireframe. I think I’m old school with this one..
I’ll have to try Mockingbird and iPlotz.com
I’m a big proponent of wireframing and sketching, regardless of whether I’m working on a website or a logo, or any other design. It keeps the client from getting too caught up in colors and fonts and other details before we’ve even settled on the underlying structure.
I love the links! Thanks!
One thing I’ve learned is wireframing keeps the clients focus on the content and architecture of the site and not the aesthetics. If you give them colors and images they will most likely focus on those elements and not on the structure of the page. Once the architectures figured out then it’s easier to move on to aesthetics.
Absolutely, at planning stages and development meetings, clients focus on features and blocks of content. Depends on the size of the site and the client.
If you have indesign try that for wire framing, make sure to check out the library” feature where you can build a UI library of common elements, by dragging items straight.
http://developer.yahoo.com/ypatterns/about/stencils/
http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/