The Header: Real Estate Website Theme Design Series Part One

 

Bowler-Header

We have designed a ton of real estate websites; nearly 1,000 to date.

Every one of them began with a comprehensive Design Interview between client and the Real Estate Tomato creative staff.

Each interview has us covering, in detail, several integral elements of the custom real estate website.

This multi-part blog series is an exhaustive overview of each of those elements.

Part One: The Header

It is my opinion that the header (the upper most module) should be clean, direct, conspicuous, and expected.

Typical elements we expect to be included in the header:

1. Your brand/logo/slogan

2. Your most necessary contact info (name, phone)

Additional elements that are commonly included

Headshot
Company logo
Ulterior navigation (home, about, contact, login)
Social media icons
Imagery (collage, hero image, slideshow)
A must-see call-to-action
Site content search
Content subscribe CTA (email/rss)

Common Header Types for Real Estate Websites

The Goal of the header (or website for that matter) is to make an impression that connects with the target audience. If your website’s goal is to be super clean with more-than-obvious calls-to-action then a minimal header could server you best. However if instant brand recognition is important, then a big first impression header may better suit your needs. Or maybe you need to steer your audience down an obvious path; an engaging header.

The Minimal

These headers tend to take up very little vertical real estate and include only the most basic elements.
A band of color (or white space) anchors it to the top of the viewing area.

It is my opinion that the header should be clean, direct, conspicuous, and expected.

Ex:
minimal_header
Ex:
minimal_header2

The Big Impression

The impression that you make is to be obvious:

Your location (landscape, landmark, skyline…)
Type of property/niche (luxury, first-timers, foreclosure/short-sale, architecture…)
Your personality/image (headshot, bodyshot, personal logo…)
Your brand (over-sized logo, obvious website theme…)

Ex:
big impression
Ex:
big impression 2
Ex:
big impression 3

The Engaging

When you need your audience to react to a specific call-to-action, placing it conspicuously in the header will get the job done.

Ex:
engaging_header
Ex:
engaging_header2

And of course, you could always have a combination of any of the above.

Stay tuned for Part Two where we will cover the Navigation of the Real Estate Website