Realtor Website Design

The great part about the StoryBrand framework is that it always exposes the contrast in your business – and contrast makes for really great design.

Design Goals & Discussion

Based on my discussions with the owners, I knew that our contrast was a stress-free and caring feel, that’s analytical and systems-driven. This is a problem, because we don’t want it to feel robotic or too computer-y, nor do we want it to feel too stress-free that it’s careless. But, what does design do? It’s solves problems!

I brought in this feeling with a typography-driven design featuring a balance of negative space to direct the eye and tell the story. And it doesn’t break any of the rules of web design. It breaks the rules of what realtors commonly do with their websites – which is adding stress and forcing quick decisions.

Logo Re-Design

The logo is simple yet super stylish, with the K bringing in the architectural feeling of the original logo, with a nice type setting, also similar to the original. I love that it’s contained, like your business is contained/constrained by its systems. The typesetting is optically aligned, (not lined up left or right) so we have the feeling of creativity within the lines.

The headlines are the same as the current body font for consistency. And it’s a great font, a traditional serif with a tall lowercase letters to give a friendly, approachable feeling. And the italics are more styled than slanted, making it feel effortless.

The new body font is modern and consistent to carry out our analytical feel, but very stylish in its A’s, Y’s and hyphens. The two of these combined offer the continued feeling of contrast.

The buttons mimic the logo and current web trends. The uppercase I’s and G’s offer lots of style to a simple button.

I’m bringing in the green as an accent, rather than the main color – with the main colors being simply neutral and soft. The header photo is neutral and muted, to keep that calm and easy feeling. This also lets accent photos stand out, like her blue jacket. Speaking of blue, I swapped out the yellow for a navy blue. Yellow says, attention and alert, while blue captures the eye differently with feelings of trust and calmness. I tried bringing in a yellow/green gradient next to the blue to add attention to the video.

We can create some simple yet interesting design elements with the K, like in the sidebar testimonials and the blue call to action.

The overall layout of left-center-left for the text highlights the main points and makes the lesser points skim-able. If you think of these as horizontal sections, we can build any page, almost, with these same horizontal sections, or blocks.

Sarah is the best! Great design backed by expert know-how on how to make it all work online!

Kurt Frehner – Chicago