Propaganda Party: The Pop Stalin Design Manifesto

8 Comments | Feb 12 | Design

Why You Should Create a Wireframe First

Wireframe Example

Before I started working at my last full-time gig, anytime I would design a website I’d start off with the design and almost always found myself wondering what I would do with the navigation. The sites didn’t always provide the best user experience and I didn’t know how to go about fixing this problem. Then I learned about wireframing and everything started coming together.

What are Wireframes?

Wireframes are the blueprint of a website. Like any well-built house, the blueprint provides the framework so the house has a solid foundation. A website is very much like a house, it too needs a solid foundation so it provides a pleasurable user experience.

There are different types of wireframes you can use. One option is building what some people refer to as a “white site.” A white site is a very basic HTML document with text and bullet points to provide basic navigational browsing so the client can take advantage of experiencing the navigation.

The second type, and my wireframe of choice, is a graphical representation of the layout and navigation. The only colors that will generally be seen in a graphical wireframe are gray and black. Some people refer to it as the grey[1] box[2] method[3]. A bunch of gray boxes are used to indicate what goes where. As you can see from the varying examples given above, there are different levels of the gray box methodology.

Wireframing Is an Art

Wireframing isn’t as easy as it seems it would be. It really makes you have to think about where things should go and whether or not their placement makes sense. That’s why it’s such a powerful tool to add to your design arsenal.  

A Wireframe Template for You

Here is an Adobe Illustrator wireframe template for use—each page is on separate layers and also includes form widgets.

 

8 People Have Bloviated

  1. Anonymous | Feb 13

    Why You Should Create a Wireframe…

    Post about the benefits of using wireframes when creating a website. Includes a wireframe template for download….

  2. Devlounge | Friday Focus #18 | Feb 16

    [...] Ronalfy: I didn’t get a chance to get my feet wet with Digg this week, but I did find these links this week: Design – 8 bits of Colour Inspirations A wonderful list of color resources/inspirations for the color-challenged people such as myself. – Why You Should Create a Wireframe First The engineer inside of me loves diagrams and charts. This article talks about setting up a wireframe to assist in creating a holistic view of a site’s design. The article also has an Adobe Illustrator wireframe template for you to download. The article assumes the reader has Illustrator available, but you could create a wireframe using any diagramming (or vector) tool. – Famous Logos Converted to Web 2.0 Also from Inspiration Bit is this hilarious post about popular logos being converted over to Web 2.0. Awesome stuff. [...]

  3. inspirationbit | Feb 18

    Thanks for sharing the Wireframe template.

    Guess what? My two posts were discovered by Devlounge at the same time as yours. And just like you I couldn’t believe my eyes at first :-)

  4. Alejandra | Feb 21

    Just what I needed,
    Thanks!

    Greetings from Mexico :)

  5. mcdave.net » links for 2007-05-04 | May 4

    [...] Why You Should Create a Wireframe First | Pop Stalin Designs’ Design Blog (tags: wireframes wireframe ui layout) [...]

  6. steve | Jun 5

    Thanks for sharing your wireframe. Very helpful.

  7. Darren Hoyt Dot Com » Streamline Your Process: RSS Feeds, Bookmarks, Frameworks, Design Resources | Dec 17

    [...] More on wireframes here, here, here and here. Wireframes help clarify structural details for you and your client, thus removing some of the guesswork and streamlining what could otherwise be a bumpy process. [...]

  8. Current Web Design Resources | NerdStarGamer | Oct 20

    [...] Why You Should Create a Wireframe First [...]