SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pre-created wireframes for popular layouts?

    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

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)

  8. #8
    SitePoint Zealot iScrawl's Avatar
    Join Date
    Mar 2009
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Hanan Moiseyev
    Online games and Videos - http://www.playwithroger.com
    Share your art - http://www.iscrawl.com

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    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

  10. #10
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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.

  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •