Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

migrated from graphicdesign.stackexchange.com Jun 2 '11 at 13:05

This question came from our site for Graphic Design professionals, students, and enthusiasts.

add comment

5 Answers

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

share|improve this answer
    
ok, thx for your answer... I was thinking about UX, didn't know there was a separate site for that, i'll know in the future. –  Flavius Frantz Jun 1 '11 at 15:00
add comment

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 a case of wireframes (Verizon wireless page) http://www.boxesandarrows.com/view/real_wireframes

share|improve this answer
add comment

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).
share|improve this answer
add comment

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.

share|improve this answer
1  
These are good points and really come down to a fidelity issue. Balsamiq style drawing are SUPPOSED to be cheezy...you don't want them looking at all like the visual design of the app as they are very low fidelity wireframes. A working prototype in the chosen technology is a great wireframe, and would be considered very high fidelity...and a good idea. –  DA01 Jun 6 '11 at 18:34
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.