At Sparkbox, we are always excited to work on a website that we love to visit ourselves. So when Farnam Street, “an online intellectual hub that helps you get an edge, avoid problems, and live a smarter life,” asked us to help build its online brand through a custom microsite, we jumped at the chance. We were tasked with taking their current microsite from a generic template to a classic, timeless design that would serve as a foundation for their overall brand. Because Farnam Street is a heavy text-based site without many existing identity elements, we knew creating a recognizable experience would take considerable thought and craft.
Farnam Street offers readers tools, ideas, and frameworks “to help you go to bed each night smarter than when you woke up.” The goals of the redesign, as Farnam Street Founder Shane Parrish put them, were: “Improve the aesthetic—the look and the feel of the website, advance the brand without abandoning long-time readers, and give Farnam Street readers a better overall experience delivered on the platform of their choice.”
We were immediately drawn to Shane’s desire to prioritize his readers throughout the process. And so, we began work.
Our Design Approach
Since one of the goals of the project was to establish the look and feel for the entire brand family, we went to work on crafting a strong visual identity for the Productivity Webinar site. Whatever we created needed to be flexible enough to seamlessly apply across all Farnam Street’s current and future products while maintaining a cohesive brand experience. And the identity had to accomplish the overall goal of feeling timeless and classic while also identifying reusable design patterns for future Farnam Street web properties.
Creating a Classic and Cohesive Brand Experience
Farnam Street dedicates itself to quality, engaging content, so we began by exploring typography—a critical part of the brand. Super font families were on our radar because they offer a wide range of weights and styles that look great individually but pair together nicely as well. We settled on Freight, a family of fonts with just the right mix of modern aesthetic and classic readability for this project. Further, all the styles and weights in the Freight family were created to be paired together, which gave us ultimate flexibility for future sub-brands while also allowing for variations and complexities to our font combinations.
Our first designs revolved around a lockup of the Farnam Street name and a specific sub-brand, in this case the Productivity Seminar. From a brand perspective, we felt we needed a visual way to communicate that each product was related to the Farnam Street brand.
We continued to tinker in Sketch, building and iterating on individual content modules, and intentionally not spending time designing the entire page so that we could get feedback quickly before we moved on.
We had great affinity for the chunky look of Freight Sans Pro Bold when used as pull-outs or quotes to interrupt content and as headlines to identify sections of content—another unique detail.
Eventually, we had assembled a series of individual modules—an element collage—that established a distinctiveness and outlined how we intended to use typographic hierarchy. The collage also included a color palette and some variations on article listing styles. Before proceeding to design an actual page, we presented the design direction to Shane for feedback.
“Jeremy did an amazing job with a conceptual design. I’m so happy to have had him working on this. Most web designs don’t take the end-user into consideration. What Jeremy did was the opposite of that. In giving Sparkbox the freedom to do what they do best, we were able to prioritize the user and create a site that was inviting for our readers.” —Shane
With a few minor iterations, additions, and tweaks to the element collage, we moved on to the page layout.
Applying Custom Features to Build a Strong Page Layout
Since the site we designed was a single-page product site, we needed to present the information in a clear but interesting way and make it easy for users to buy the product. One of the ways we did this was by fashioning a stand-alone module style that could house highlighted content. This way, the reader would be able to scan the page for these modules and have a high-level idea of what the product was and quickly dive into the more detailed copy if desired.
“You can have a website with almost no information and it feels cluttered. Conversely, you can have a website with a ton of information and it doesn’t feel cluttered at all. The way we were able to balance typography, color, space, and imagery allowed us to create something with the right amount of information and not feel cluttered.” —Shane
We began to develop a system of two main columns of content, and we created a grid system to house the individual modules. Sometimes, side-by-side modules would be 50/50 in width; other times, 70/30 to add some variance based on the type of content and hierarchy that made sense. We were careful to maintain a good amount of white space so that the content was easily accessed and the layout felt uncluttered.
We wanted to add finishing touches to the design to create visual interest and reinforce the brand in subtle ways, which we did through the drop shadow. We applied the drop shadow to the pull-out modules, including those that housed a way to purchase the product, giving a custom touch that became a small but prominent element we used throughout the site to help define the brand look. The shadows are filled with a repeating pattern of diagonal lines—one of the small details that contributed to the overall brand look and feel for Farnam Street.
Another step we felt worked well on this project was having our Creative Director, Jeremy, code the HTML and CSS for the site himself. In our typical process, Jeremy will pair with a developer throughout a site build, but because of the simplicity of this site’s design, we tried this alternate approach. Having Jeremy build out the site allowed him to focus on completing the design in-browser without having the additional step of communicating the detailed, interactive polishes not represented in an early static design comp. Because the proportions, spacing, and polish were so core to the site experience, it was best that they be built in from the beginning. Not only did this help carry the design intent throughout the project, it meant Philip, one of our frontend designers/developers, could jump right into completing functional templates. And after some refactoring, we had a beautiful site built in just a short amount of time.
CSS Fine Details
Because the look of the site was very simple, we wanted to incorporate some animations and transitions to add personality and finish off the site with delightful detail. To achieve this, we had some fun with custom CSS drop shadows and viewport units.
The custom diagonal line drop shadows had Philip giddy from the start, to push CSS in an exciting way. The diagonal lines are actually a CSS
linear-gradient background on an
:after pseudo element. The placement of the drop shadow is done using
position: absolute and viewport units on
left properties, so the shadow’s distance grows with the screen size.
The drop shadow isn’t the only place viewport units popped up. The textual content actually scales with the screen size. Media queries were used to essentially create a
min-font-size and a
max-font-size, and the text scales in size between those queries. This was a rather fun approach that is essentially a CSS-only version of Paravel’s FitText jQuery plugin.
Optimizing for Performance
With the site in place and assets built for production, we measured performance using one of our favorite tools: WebPageTest. This led us to improve the cache headers on the servers. Updating our
.htaccess file resulted in our speed index dropping from 2168 to 1397. Speed Index golf hole-in-one!
“Because we have a trust-based relationship, we were able to come up with something better than either of us could have created independently.” —Shane
We’re so pleased with the approach and collaboration of this Farnam Street redesign project. Much like the blog’s mission of self-improvement and learning, this was a learning exercise for us. We explored new elements and approaches to advance the Farnam Street brand and create a memorable experience for long-time readers.
“It’s beautiful! When you look at it, you just want to be immersed in it.” —Shane