Prior to starting on the actual design, wireframing our Geek Build 2012 sites is the next step in the website building process.

What is “wireframing” you might ask? According to Wikepedia:

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.[1] The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.[2] The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.[3] In other words, it focuses on “what a screen does, not what it looks like.”[4] Wireframes can be pencil drawings or sketches on a whiteboard, or produced by means of a broad array of free or commercial software applications.

Wireframes focus on

  • The kinds of information displayed
  • The range of functions available
  • The relative priorities of the information and functions
  • The rules for displaying certain kinds of information
  • The effect of different scenarios on the display[5]

The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.[2] Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”[3] Within the process of building a website, wireframing is where thinking becomes tangible.[6]

Most websites are strategized with a wireframe prior to doing any real design work. Why? Well, it’s a lot more work to redo an entire Photoshop or Fireworks image if you decide to change your site layout than it is to move a few boxes around and change some text within a wireframe program like Balsamiq. In the end, wireframing will save you a great deal of design time and money.

I created two wireframes to see which one got a better response from the community. As you review each wireframe, remember, the goals of these Geek Build websites are as follows:

  • Maximize lead generation (signups, blog or IDX)
  • Maximize lead conversion (phone calls, requests for showings, specific property requests, track closings from site long-term)
  • Maximize time on site, page views/visit
  • Minimize bounce rate

Option 1

A mix of search, communities, 3 relevant calls to action, and some seo text near the bottom. Click on the image for a bigger version.

Option 2

This wireframe is focused entirely on Search, with some SEO components below. Click on the image for a bigger version.

I would love your feedback — on everything from exact wording on calls to action to the components of the modules to components needed in the footer. We’re going to make improvements to them and will post those revisions here.

Go ahead, rip them apart.

Note from the Editor: Not sure what Geek Build 2012 is? It’s building a few real estate websites from scratch publicly with the help of the Geek Estate Community and overseen by an experienced steering committeeRead more about Geek Build 2012 here, or view all posts related to Geek Build 2012 here.

**Geek Build logo designed by Dominic Morrocco at M Squared Real Estate.