A Web Design Case Study - Real Estate Company

A Specific Target Audience Requires a Fine Tuned Approach

Welcome to the real estate case study. This fictional company and website were created to, firstly help me continue training my abilities, and second, to provide you with an example to help you visualize the potential power held by your company’s website.

Quick Note Before You Get Started:

The company model is all imagination, this means the website strategy does not present the same level of research and discovery that a real business deserves. The project’s purpose is to practice and present design skills.
All the names and/or places presented are fictional.
All images are free stock, available photo credits are found at the bottom of this page.
You may notice pieces of text missing from the website, some content, for example about sections or profiles, are specific to the company; this makes any content created without a company unrealistic.

View Prototype

Featured Design Objectives

Targeting the Desired Audience

To begin with, the target audience must be considered in all aspects of the website, in the images, in the text, in the look and feel of the website.

How was this put in practice for this example? Well first, I had to come up with a target audience! In a real project we’d spend time together first examining your company’s audience and who you want to target going forward, these may be the same or different.

The Real Estate Company’s Target AudienceAudience Profile:

Families
Individuals in their mid 20 - 40s
Busy lives that crave peace and relaxation when at home
Working to provide

What are their concerns and worries?

Is their dream home feasible at their time in life? Many think this is a goal for retirement.
What time and effort will it take away from their loved ones?
Buying/selling is such a stressful process!

The content of the website addresses the audience's worries and appeals to their desires. “Fulfill Your Family’s Dream Home Without Sacrifice” this hero statement effectively addresses all the likely concerns in one shot, while also presenting the company's service; providing individuals with their dream home. The short paragraph below takes the concerns and presents a valuable solution, the Real Estate company.

The content continues to enforce these concepts. The about section builds further trust, the ‘buy’ section exprecesses interest in their family and its specific needs. The ‘sell’ section sympathizes with their concerns. So, for this example, the friendly yet professional tone I created helps the viewer feel seen and comfortable while also presenting the company in a professional, trustworthy manner.

Now, how do the images play a part? What does the viewer want their life to look like? Well, there's how you choose images. The photos in the hero section were chosen for their calm and comfortable feel. Together they create an image of beautiful moments in a beautiful home. The ‘about’ section image was chosen because of the couple's comfortable joy in a professional setting. Of course, choosing stock images that accurately communicate the desired thoughts and feelings while also maintaining consistency can be a challenge. That's why real world projects have an advantage, your company can procure photos tailored to your brand and the website's needs.

Consistency Creates a Trustworthy Brand Image

Notice the images again. Is there a theme? Do you notice the color pallet? Yes, there are a lot of images with the right subjects I could have chosen, instead I took the time to curate a set that are consistent. This small detail takes a website design to the next level.

It creates brand authority. Consider someone you’ve hired in the past, a professional, if they didn’t know who they were as a person how would that affect their performance? They’d be uncertain, without confidence, would you be inclined to hire someone like that? Probably not, the same can be said for companies. Businesses who know their identity, what their principles and values are, builds trust. Along with content, this is also communicated on the website by consistency, identity. Colors, images, layouts, type. Every detail plays a part. When this is achieved the experience is seamless and makes the content shine.

Featured Design Principles

Hierarchy in Practice Guides Viewers

What is hierarchy? It is the organization of elements on a page in a way that the visitor's eye is guided through each element in an intended order. This is a very important concept in web design. Often websites must feature a great deal of content, but what should be read first? What's most important? If this isn't established in the design the content often ends up leaving the visitor with information overload. Frankly, the website ends up being so overwhelming they leave without answers.

How can hierarchy be attained? By use of color, contrast, scale, and grouping. Let's look at the ‘about’ section for this example. My goal in creating this section was to have the viewer read the quote first, but then give the heading authority as just that, the main heading for the section. I did this by using the scale and contrast of the type. The quote is small in size, but bold giving it a higher contrast that stands out. While the heading is bigger, giving it authority, but lower contrast so the eye is drawn to is second. The fact that it is the heading is also established by grouping it with the rest of the text while the quote is off to the side.

This is just one small example of how hierarchy is used to guide a viewer. In reality this principle is used in every section and every layout on a website.

Creative Layouts Help a Brand Stand Out as Different

Layouts, the foundation of a website's design. The web is a big place, because of this there are rarely ‘new’ ideas for layouts that still facilitate usability. For example, you’ll see websites with navigation bars on the side or even the bottom, in many cases I find such a change to the norm just plain confusing, and I am sure many would agree with me.

How can a website be different while maintaining a structure that is user friendly? It’s not always easy, but instead of crazy ideas, I try to apply simple details that alter a ‘typical’ layout and make it visually interesting.

Typical is straight and plain, but though much the same, small changes make a website unique. I changed image sizing, used asymmetrical lines, broke up the text, the result? Well you tell me, wouldn’t you agree it outshines the alternative.

The end result is a website whose layout gives the content the spotlight in a way that captures attention and leaves the visitor with a feeling of quality and forethought.