Initial Website Wireframe Options for Geek Build 2012 – Feedback Wanted
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 committee. Read 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.
Daniel Bacon
Posted at 09:15h, 27 MarchGreat start Drew. I personally prefer a simple Quick Search box on the home page, I think http://msqrealty.com/ nailed it really well. Also, as far a the main area I’m not sure about the “Detailed Search.” It seems if that is just a button its taking up a lot of space?
Love the “Explore” areas. Side-by-side is great, and if these rows were expandable you could feature as many areas as needed.
Great idea to have the area below that to talk about the area.
Footer looks great, but maybe the social links will get lost down there? What about putting them unobtrusively in the header with the phone under or over?
In the second wireframe, if it to be just search based, it seems to me the post boxes are too big. One idea would be to use much of that space to break out properties in many different to make things easier to find, by area, prices, type, etc.
Menu options look good, but I wouldn’t include a listings item unless I had a lot of them. I might add a Resources item.
John_Stegner
Posted at 06:07h, 28 MarchDaniel, I really like the M2 Real Estate Site you mention above. I think that for either option 1 or 2 above, the opportunity to subscribe should be in the header such as on their site. With respect to the two options (Thanks Drew for you hard work on this!) I like option 1. I might like the seo text at the very bottom and the footer moved above it. I think if it is written correctly and then there are some site credits below it, that it will look fine and more visitors will see the navigation in the footer. In option 1, if you do plan to do a lot of blogging, it might be nice to have the “blog roll” or “recent posts” more accessible/visible. Some visitors will be coming for information first and searching for homes second….I do like option 1 for these reason as it offers both at first glance with the “explore communities” section as well as the search options front and center….would just love to see the blog roll a little more visible to encourage those “research” focused visitors to dive in. So, my vote is option 1 with minor tweaks. Drew, if you e-mail me your
Balsamiq file, I could try to see if I could mock up a 3rd option with these thoughts as well as those from above my post. Sounds like option 1 is in the lead, aye?
Drew Meyers
Posted at 09:27h, 31 MarchIn my opinion, the social links should be findable to someone who wants to find them. But not divert focus away from anything on your page. You don’t really WANT your traffic to click on social media icons…you want them to search or read articles.
Greg Fischer
Posted at 20:41h, 27 MarchDrew, great post. You rocked it out. I am a fan of the first design, I think it covers all of the important things that a first time user would want to see when arriving on a real estate site. Search leads the way and then immediately below are highlights of community pages. Right below that – 3 different calls to action. I’d probably use one of the 3 boxes for a “latest news” for the blog.
I agree with Dan, maybe small social links at the top or side, just to ensure visitors can find the links. Overall it looks like enough interesting content for people who come to the page, but not too much – it avoids feeling cluttered. Thanks Drew.
Drew Meyers
Posted at 10:52h, 28 MarchJohn Stegner is going to take a crack at revising these per the feedback..
Steven Hong
Posted at 11:30h, 28 MarchI like the first one better as well. I also think the 2nd one’s post boxes are too large, and not enough on why the customer came to the website in the first place.
Propertystr
Posted at 04:18h, 30 MarchI loved your
article…..very infomative. Thanks
Jason Richards
Posted at 11:47h, 30 MarchProbably chiming in too late here but wanted to throw in 10 cents… I agree that catering more to why the user is there rather than blog posts on display. What are thoughts on calls to action linking to a sellers landing page and a buyers landing page, prob where the 3 calls to action are in option 1. Each of those landing pages would then provide more relevant info and calls to actions thus making the users experience more relevant along the way. In additon we would have great landing pages for other linking and SEO purposes… thougths?
Drew Meyers
Posted at 09:20h, 31 MarchThat would be in the nav if you wanted it to be.
Buyers…want to search.
Sellers…just need a landing page outlining your value proposition and, ideally, showing the homes you’ve sold.
Drew Meyers
Posted at 02:17h, 01 AprilOn the topic of simple…I think it’s worth noting what Zillow has done with their home page – http://www.zillow.com/
Everything centers around getting someone straight into the search experience. There are really no other calls to action aside from the small mortgage rate one in the lower right.