What is a wireframe?

Question

Ok. I sort of know what is a wireframe, but I still need a lot of help. The question actually wants to ask how to get started when "designing" a wireframe for an online shop. I am doing an internship at a webdesign company and my task at the moment is to design a general wireframe for an online shop that sells cars. Do you know any great examples of such websites? What are the "steps" I want to follow when I build this first wireframe?

I am going to do the wireframe in Photoshop, although I know its way too much than what I need. I did some basic wireframes with Balsamiq Mockups, which is a great program for wireframing only its not so excelent when you want to present the wireframe to the client, its not that the wireframe should look good or anything but the sketchy look of Balsamiq is a bit to rough. I don't think I'll need any tips for Photoshop when it comes to a simple wireframe cause I'll just be using the basic tools and only shades of gray, and maybe I'll also think about font-size but I don't think so. Anyway if you think you have any tips for building wireframes with Photoshop all are welcome ! Thank you

Answer 1

Well, for starters, if this is an internship, this question really should be directed to your mentors and coworkers. The point of the internship is to learn from them.

That said, a wireframe is a sketch to communicate the idea/concept. The term comes from 3D modeling where the wireframe is the basic primitives of the object to give a sense of form and scale without committing to a fully rendered model. (Which, prior to computers, had to be done manually with physical models, which often started as a 'frame of wire' that clay or other such substrate was applied to to flesh out the form).

In the context of web sites, wireframes serve various purposes depending on the context of the project. These can include:

• site flow (typically done with flow charts)
• interactions (not always easy to document in a wireframe, but its common)
• general content structure
• general page layout

I would NOT use Photoshop for wireframes at all. It will tempt you to add visual design and that is not something you want in your wireframes. Stick with Balsamiq or, even better (IMHO, of course)--stick with pen and paper.

As for a great web site that sells cars, I'm not sure I have seen one yet. ;)

But note that while looking at other car sites is important, your wireframe really needs to be built around your client's project's business objectives. Ideally, you'd already have some personas and project requirements to work off of.

P.S. this question probably should be moved to UX

Answer 2

There are already a couple of good answers to your essential questions, so I'll just add a couple of cautionary notes:

• Be wary of requests like "can you add some colour?" or "let's make it pretty". That's not what a wireframe is for. It focuses on use of the page, the concept, not the look and feel.
• Be prepared to iterate. Your first effort can be really rough - subsequent efforts tighten it up. Don't try to force everything into wireframe version 0.1.
• Ask for wireframes from previous projects to see what folks at the company have done in the past. This will give you a good handle on the companies specific use of wireframes (there's no golden standard - I've done wireframes for more companies than I care to remember and everyone had slightly different expectations).

Answer 3

A wireframe is a prototype or a quick draft of where things would be placed on a web page. A wireframe emphasizes placement and form. Some of which relate to scope of functionality.

It's overall goal is to focus on usability and user experience.

There are various tools that can accomplish this: photoshop, illustrator, indesign. There are also tools designed specifically for that purpose.

Regardless a wireframe could also be hand drawn.

More on this subject: http://wireframes.linowski.ca/ - Wireframes magazine

Example of real wireframes shown to client (Verizon wireless page)

http://boxesandarrows.com/real-wireframes-get-real-results/

Answer 4

There are two approaches to designing an ecommerce shop:

1. Start with wireframes/mockups full of 'lorem ipsum' nonsense and then have a bit of a nightmare trying to get the 'signed off' functionality to work with your chosen ecommerce solution and real product information.
2. Start with your ecommerce software default templates where the functionality/usability is all worked out (although not themed to your taste). Put some real product data in instead of 'lorem ipsum' rubbish. Now walk through the purchasing a product journey saving a few screen-grabs along the way.

The second approach when combined with a local stylesheet and some firebug css edits is going to get you a working wireframe that you can deliver, you are also not going to overlook things like the message boxes that tell your customer they have added to their cart etc. You will also not miss out things such as the account area buttons.

Balsamiq style drawings are getting a bit tedious these days - cheezier than Comic Sans. Why mock up how the wheel is to be reinvented when your cart software obeys the conventions for where the account/search/navigation HAS to go?

There is also this concept of using grids. You can spend all day in Photoshop putting stuff in your grid layouts, or you can do it with pen and paper. Get an A4 sheet, fold it in half a few times and you have a grid to layout your header, product image, description, buy now and other buttons. Implement this with some speedy prototyping with firebug/local style sheet.

Answer 5

Here's how I attempt to dumb-it-down for my friends :

1. Take any website that you like, strip it of all it's collors, then strip it of all it's content and/or digital assets (imagery, video, etc.)

2. Keep repeating this process until all you have left is a black and white page with shapes that appear to form a kind of a blueprint, which when filled with elements from #1 make up the site you started with.

Chances are - wireframes for that particular site looked pretty close to what you're envisioning.