Pre-created wireframes for popular layouts?

[RonSanSolo]

Are there any pre-created wireframes available for popular site layouts, such as e-commerce, portal, social media, blogs, etc?

For each type of site (ie. e-commerce), there would be wireframes for different variations of home pages, product pages ... based on today's popular designs.

Anything out there like that?

Thanks,
Ron

[Dan Schulz]

I've seen some, but I didn't bother to bookmark them at the time (I should have). If I find any though, I'll be sure to let you know by posting them in here.

[RonSanSolo]

Thanks, Dan.
I did some searching but couldn't find any one source for pre-created wireframes. Would be great if there was one.

Ron

[AlexDawson]

I really do not see the benefit of pre-created wireframes. Firstly wireframes are extremly easy to produce (literally you can just get a pen and paper), and as for getting insight into what conventions people use on particular pages, theres so many books, articles and material on the web about design patterns which are a lot more in-depth and explain reasoning behind what the advantages and disadvantages that may result from their implementations.

PS: As for visually seeing conventions at work, why not just visit the websites themselves rather than relying on some early mock-ups? As mentioned above the use of wireframes (for templating websites) would be a step down in terms of determining what should go into a website based on modelling structure.

[Dan Schulz]

Well, I have my own (for my personal uses), and I must say they are very useful, especially given that when I am forced to design, I do so within the browsers I use instead of a program like Photoshop. I'd rather know if a design idea is actually going to work before committing to it, rather than coming up with an idea, implementing it in Photoshop, and then finding out it won't work in Browsers X and Z while it works in Browsers W and Y.

[AlexDawson]

Dan, I think you misunderstand me, I am all in favour of creating wireframes, I use them all of the time. I just do not see a benefit in having pre-created ones, especially considering conventions are made from real-world examples and each website will be unique.

[Dan Schulz]

That's easy to explain. The code I use is far different from the code others use, and there's no way to guarantee that what I do will even work with the way I code my Web sites. If I see a feature that appears to work well, but yet was coded horribly, who am I to say that it'll work when it's forced to interact with my own code?

Having a series of wireframes (even if they're just mockups) will help me avoid that problem, and they could even be used as inspiration for new ideas. (In other words, I've gotten to the point that I'd rather reuse my own code rather than reinvent the wheel with each new Web project - if one wireframe has something I need and another has something else, I know I can take them, use them on the new project, and not have to worry about either one refusing to work.)

[iScrawl]

When I working on a new design or code, I usually open notepad (the program that comes with windows) and start typing.

After 12 years of web authoring, I find it easier to work like that.

After the programming is ready, I go to the graphic designer and let him work on the design.

A pen and a paper are a great way to work on the wire frame while you program.

[AlexDawson]

Having a series of wireframes (even if they're just mockups) will help me avoid that problem, and they could even be used as inspiration for new ideas. (In other words, I've gotten to the point that I'd rather reuse my own code rather than reinvent the wheel with each new Web project - if one wireframe has something I need and another has something else, I know I can take them, use them on the new project, and not have to worry about either one refusing to work.)

Here is where your making the mistake Dan, Wireframes are intended for simply structuring functionality or areas on the page... Think a skeletal drawing. Mock-up's or prototypes as they are more commonly known (basically structuring lumps of code or testing before implementing) are an entirely different aspect of information architecture.

This is a wireframe: http://www.uxmatters.com/mt/archives...-wireframe.jpg
This is a prototype: http://www.inspired-evolution.com/im...ebsiteComp.jpg

What you were discussing was a visual prototype, not a wireframe

[RonSanSolo]

Semantics aside, I think it would be a great opportunity for someone to create a resource offering wireframes/mockups/design patterns. I've been in web design for a long time, so creating a wireframe is no hard feat. But, it does take time to think out the functionality, structure, elements and their sizes. To have pre-created blueprints just gives us a running start.

There are millions of sites out there, many of them excellent, and, to this day, I still come across a layout that's unique and looks great. Can I duplicate the layout myself in FW? Sure. It would just be nice to have that above-mentioned running start.

Ron

[Blake Tallos]

Here is where your making the mistake Dan, Wireframes are intended for simply structuring functionality or areas on the page... Think a skeletal drawing. Mock-up's or prototypes as they are more commonly known (basically structuring lumps of code or testing before implementing) are an entirely different aspect of information architecture.

This is a wireframe: http://www.uxmatters.com/mt/archives...-wireframe.jpg
This is a prototype: http://www.inspired-evolution.com/im...ebsiteComp.jpg

What you were discussing was a visual prototype, not a wireframe

That steak in the header looked pretty good didn't it? LOL
I dont use wireframes I just code it up and see if it works or not. Lot's of testing.

[Dan Schulz]

Here is where your making the mistake Dan, Wireframes are intended for simply structuring functionality or areas on the page... Think a skeletal drawing. Mock-up's or prototypes as they are more commonly known (basically structuring lumps of code or testing before implementing) are an entirely different aspect of information architecture.

This is a wireframe: http://www.uxmatters.com/mt/archives...-wireframe.jpg
This is a prototype: http://www.inspired-evolution.com/im...ebsiteComp.jpg

What you were discussing was a visual prototype, not a wireframe

I was specifically talking about wireframes. Though I do tend to add actual content to them as I go along. In other words, I take a wireframe and then develop it into a prototype.

[AlexDawson]

Sorry but I must have misunderstood your previous post then, because when you mentioned about including code, you directly hinted towards prototypes. As I have stated wireframes explicitly do not contain any code, in terms of information architecture they are just a visual conception of how elements may be laid out (as in totally non functional - see the image I posted for an example). When you start producing something which is tailor designed for a specific purpose (EG: A prototype navigation list in preference to a box that says “navigation” it is a prototype and not a wireframe).