Project: 2018 Industry report for Inman.com
Company: Inman.com
My Role: Visual designer
Duration: 2 weeks
Date: Jan 2018
Inman.com is the largest online real-estate magazine. The opportunity came to provide a sample of my work to their design team, a "try out" for an upcoming project. They accepted, and I spent two weeks creating a visual design for their report. This was a great opportunity to gain experience and credibility as a visual designer.       
Final result
Here you can download the full report or click to expand the selected images below.
Download the full PDF
Click to expand:
Colors and fonts
I made some quick design choices and sent a sample to Inman: 
I was interested in using violet because, according to Pantone, it was the 'color of the year'.
Next I used Google Fonts to sample through dozens of potential font choices. Eventually I narrowed it down to several options: 
The choice to use Montserrat came from its similarity to Inman's brand font Proxima Nova, and that it offered many different weights. It was a popular, modern font, too. Here you can see how many options Montserrat has on offer:
Making a mini design system
Early in the process, I spent some time collecting examples of great document design. These became a way for me to both find inspiration and to make braver design choices.

Creating an sample design in order to create a design system
To get a system in place, I made some examples of pages to get a cohesive visual look. Here is an example page that utilized elements that would become the design system for the document:

Creating a ledger of Fibonacci measurements
One new tactic I wanted to try was revolving the entire spacing of the document around Fibonacci ratios. In order to do that I needed to create a reference table of all of the horizontal and vertical pixel amounts which mapped to Phi, or the golden ratio of ~.618. Once I had the document dimensions settled at 2456 x 3476, all I needed was a calculator to create the following table:
With these numbers in hand I could make decisions about font sizes, font spacing, margin/padding around various elements. That way, the sizes on the page would be harmonious.

I found Sketch plugin for adding fibonnacci grids to aid with layout: 
Creating custom images
Following the theme of standardization, I decided to give the images within the document an expensive and unique look that would also be an anchor of consistency. That the images were real-estate themed was a given, so I started with free but high quality images of houses and buildings. From there I covered the images in semi-transparent purple, and erased the aspects that were not buildings, i.e. bushes, sky, cars, using various tools in Photoshop.
Making the graphs
The graphs that came with the other documentation for this project were multicolored and not suitable to put in my purple themed document. So I made each of the graphs using Sketch, not only with the correct colors and fonts but also Fibonacci proportions:

Takaways
Since my primary job is interface design, I'll miss having the fixed proportions of a document which allow for such a system, where all of the spacing is controlled and mathematical. Still, the work was certainly a good way to practice visual design, and I'm glad I had the opportunity.
-More Projects-
Life insurance calculator and quote tool
Multiple iterations and three rounds of testing + a great development team resulted in big gains in leads and overall sales of life insurance.
Preference testing
Results
Multiple iterations
Revitalizing the shopping list
A comb through web data reveals the hidden potential for a feature which might otherwise be marginalized due to low total visits.  
Mobile
Web analytics
Multiple iterations
A carousel across the uncanny valley
State of the art web personalization would require a hefty commitment, but there might be some low hanging opportunities for us along the way.
Personalization
Results
Web Analytics
< Home