The Fine Realty website is finally online and I thought it would be intersting to share some of the behind the scenes work that went on.

fine-main

A bit more about the project:

It’s a realestate website based on WordPress that uses a custom realestate plugin to get the MLS feed from the Florida area into the site. It was built by me, together with my sister Anda and Scott, the client.

Most of the content is raw MLS data, but Scott also has the option to add his own properties, filter the results displayed on the site by price range, zip code and other options, easily add properties to the sliders and featured areas. All the formatting is automated, so maintaing and updating the site is pretty straight-forward.

The Design Stage

When I was looking around for inspiration at other real estate websites and templates I noticed something: they were all pretty terrible.  Bad stock photos, kitschy colors and overall a very busy, cheesy,  cheap kind of look.

I thought that was the wrong image to have when the products (the houses) on sale cost sometimes in the millions, so from the start I set out to do something completely different – something clean, minimalistic almost, something that looked solid and trustworthy and memorable.

Color Scheme

I settled on a black – red – green color scheme, on a light grey background. I wanted the site to have a light feel to it, even though it currently displays more than 30,000 properties.

fine-color

Fonts

I didn’t design the logo, but from the moment I saw it I knew it would work well with what I envisioned for the website. It’s bold, clean, powerful, simple.

The font for the logo is Arial Black . I found it a bit too heavy to use on headers, so I tried Anton, a narrower font in the same style and paired it with Advent Pro, a thin, light, modern font for subheaders.

fonts

I think the contrast between thick and thin creates a good balance and gives the website a nice sophisticated look.

The body text is just plain ol’ Helvetica, to keep things easy to read and to avoid using too many custom fonts in such a database heavy website.

The Technical Stuff

After looking at several available realestate MLS plugins for WordPress, both free and paid, it became clear that to get top performance and a customized look, we’d had to build one from scratch.

All the data from the feed comes very raw and bunched up together so we had to separate it, make sense of it, style it and display it in a way that makes it easy to scan and use.

In the end we built a modular solution that is easy to adapt to other real estate websites based on WordPress.

mls

The properties in the home page slider can be changed in a few seconds by using the filters built in the MLS plugin and Scott can control what properties are displayed on the site, limiting the results to properties in only a few zip codes, price ranges or type (condos, single family). So the website can always be easily adapted to meet current market conditions.

The MLS integration came with some challenges on the design side as well. For example, the size  of the gallery and home page slider are limited by the maximum size stored in the MLS database in the LA area, which is 600×480.

Other features:

  • map integration with nearby attractions and facilities
  • social media integration, easily share properties
  • automated image galleries
  • property mortgage calculator
  • forms to request information, book a showing

map

Share this article