Wireframe examples

[emp]

So...

A lot of you might have seen me mention wireframes every once in a while.
Truth be told, I think they are the best way to quickly plan and execute on websites.

Information Architecture, Usability, User flow, monetization, design, it can (and should) all start with a wireframe.

So here is some examples:
http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches/

And some more (hover over images)
http://www.wireframeshowcase.com/

::emp::

 

[Romac]

The showcase site is really cool. I've never used wireframes but I'll keep it in my back pocket thanks for the share.

 

[Ryuzaki]

I hand-drew a wireframe of my recent homepage design. Most of it stayed, some of it just wasn't feasible when it was time to actually build it on the screen. That's one of the flaws of wire-framing. However, it was great to dump thoughts onto paper as I sat on the back porch. I sketched for about an hour, combined things from various attempts, then hit the computer and made it happen and STILL ended up discarding some things and banging my head on the desk to figure out how to fill the space. Pro's and Con's.

I generally will just sit down to some HTML and CSS and bang out the header and footer, then start fleshing it out from there, letting one thing lead to another versus trying to have a total vision at once. Which I dislike doing. I want to be creating Design Guides first, then hand drawing a wireframe, and then building the code. That'd lead to a much more unified end product with far more sensible CSS code.

 

[emp]

I generally will just sit down to some HTML and CSS and bang out the header and footer, then start fleshing it out from there, letting one thing lead to another versus trying to have a total vision at once. Which I dislike doing

Yeah, unless you already have a very good idea of where you are going, this is not what you wanna do.

I want to be creating Design Guides first, then hand drawing a wireframe, and then building the code.

OK, this is all upside down. Here is what the process should look like (IMHO)

1. Think of all the information you want to display on the different pages of a site
2. Sketch wireframes
3. Give to designer
4. Design and content guidelines
5. Code

A wireframe is a very quick sketch of a site. Sadly, I did not pay enough attention with the sites I posted.
Mea culpa!

THIS is NOT an effective wireframe:

THIS is:

OK, let me flesh this out a bit and go through the steps outlines before:

1. Think of all the information you want to display on the different pages of a site

Normally, you will only have very few distinct page types on a site.
You'll encounter a variation of these 4:

1. Homepage
Because - let's face it - the homepage is different from all the other pages.
http://www.bbc.com/

2. Section Overview
A category overview, outlining what you got in a specific category and maybe highlighting some articles.
http://www.bbc.com/sport/0/

3. Detail page
An individual article, shop item, etc.
http://www.bbc.com/sport/0/football/34507539

4. List page
Lists of articles / etc... also SERPs
http://www.bbc.co.uk/search?q=blatter

Even with VERY big and diverse pages, I never found more than 7 really different page types.
(For example, the BBC has a rolling commentary about the day in sports)

2. Sketch wireframes

A wireframe is NOT design!
It's not even a sketch of a design, it is just a sketchy view of all the info you want to display and how the layout may work.

This here is where wireframes shine.
You can quickly sketch the 3-5 page types you need and lay them out flat on a tabletop.
Take a step back and see how the layout flows.
You'll quickly be able to see breaks/mistakes/errors
"Oh, the picture is on the right on the section page, but on the left on the article page!!!!"
or
"Why is the date on the videos page below the video, but above the picture for publications?"

3. Give to the designer
As noted, your wireframe should be loose enough to allow the designer to design.
Yes, things will get thrown around and overboard, but usually not too many.

4. Guidelines
If you must / for big projects.

5. Code
Yes, this is actually the first time code rolls around.

hope I was able to better localize where wireframes fit into the whole process.
They are vital, but a layout sketch and as such only a part of the whole.

Hope that helps some people and if you have questions, shoot away.


::emp::

 

[Ryuzaki]

OK, this is all upside down.

Maybe when you're passing your wire frame off to someone who knows how to code HTML and CSS, etc.

For me, I already know the visual style of the site, even if I don't know where elements are going to lay on the screen. So I can go ahead and design pieces, set up typography, create buttons, etc.

What this does, creating a design guide FIRST, allows you to later have a consistent set of margins, paddings, white space, etc. Design guides are first and foremost for creating consistency across your own site, and then for your secondary and tertiary properties across the web. Without that, you'll find you have ridiculously inconsistent and bloated CSS code.

But yeah, wireframe or style guide first. It doesn't matter, as long as the style guide comes before you start laying down elements for real.

 

[emp]

Ah. I guess we have a different definition of style guide (might very well be a translation thing)
When I think of a style guide, it is a very, very detailed document drilling a site design down to each color code, margin, etc...

So, yeah, I guess we're on the same page... Rough sketches first, then real design and code

::emp::

 

[Ryuzaki]

I'm not big on wireframes or even the design world in terms of the agency and "professional" side of things. I just do what I do and do it good enough to earn big clients and design my own stuff. My question is... how do wireframes work NOW to accommodate fully responsive design where it flows. Not adaptive design where it breaks to the next design in stages, but a fully flowing re-painting design at every pixel width...

Do companies design the full width with a wireframe and the phone width as well and then just hope for the best in between?

 

[contract]

I'm a designer, I've never used a wireframe.

They are a huge waste of time for corporate viewing pleasure.

What works well is using your finished PSD > Marking it up with #'s 1-20; ie: If an area needs advanced functionality/code you label that area #1, and write notes for #1 on a separate document sheet. Hand it to coder, it's done.

Then split test elements blocks in the final design.

Everything else is just a biased guess.

 

[emp]

I'm a designer, I've never used a wireframe.

They are a huge waste of time for corporate viewing pleasure

Err... While these are used by big companies, these are not intended for "viewing pleasure".
Quite the opposite, I make sure they look like the sketches they are.

I found them the only way to talk with clients about basic layout and functionality without them thinking "oh, it's all done already!"
This happens anytime I show anything even resembling a design.

So basically, we'd do these before the designer gets a hand in the process, they are to discuss basic layout, functionality, flow and do it quickly.

But yeah, these are used in big projects.

In smaller projects that I did (for example restaurant sites) I don't bother if I do the design or have direct access to the designer.

::emp::

 

[superdave2u]

Do companies design the full width with a wireframe and the phone width as well and then just hope for the best in between?

In my experience it's been mobile-first then the full render is framed out with it in mind. It's much easier to add to a simple sketch than it is to reduce from a more substantial one.

I found them the only way to talk with clients about basic layout and functionality without them thinking "oh, it's all done already!"

This is worth repeating. Wireframes have a huge undertone of "unfinished" and that's important to keep expectations in line when talking about building.

The wireframe gallery is sponsored by Balsamiq, a tool I use for wireframes. I recommend anyone check it out. One of my most used features is linking. Essentially I can create a mock up of an entire site with wireframe 'buttons' that link to another mockup (home page to detail page for example) and it's pretty handy when demoing a site concept to a client before any pages are build / time wasted