Project Overview
Launched: June 2016
Project Type: Personal Side Project
Savvy Side Projects is a resource designed to empower web designers and developers. Specifically, it provides guidance on maximizing the potential of side projects by “working smarter, not harder.” The site is organized into five sections, based on five common reasons why web professionals pursue side projects. It also features a free eBook.
Project Breakdown
From Presentation Idea to Website
The concept for Savvy Side Projects actually came from a lightning talk idea that I submitted to a local conference. The talk, entitled “Harnessing the Power of Side Projects,” focused on approaching projects with an entrepreneurial mindset. In other words, using side projects as a natural launching pad for online courses, eBooks, templates, and other materials. The goal was to maximize each project while also aiming for passive income, a stronger personal brand, and a real edge with potential clients and employers.
Unfortunately, the talk wasn’t selected. However, a few weeks later, I was tossing around ideas for side projects of my own. It was then that I decided to turn my talk about side projects into an actual side project. And Savvy Side Projects was born!
Making it Fun
I decided to give the site a vintage + newspaper type feel. Not only would it make the site fun, but - to be honest - I wanted to play with some Hoefler & Co. typography (to which I have a subscription).
As for the layout itself, I purposely chose to keep it simple. The site includes a lot of text. And while including more images or graphical elements would have added more visual interest, I also didn’t want mobile users to be scrolling forever.
Besides, stock photos aren’t cheap! (And finding ones with a bright, vintage feel for free was next to impossible.) So I went for quality versus quantity.
To create a newspaper-type feel, I laid the content out in three columns. The headers also feature words versus an image, and I utilized drop caps within the typography where appropriate.
Sliding Menu
While I built the site with Bootstrap, I wasn’t keen on using the framework’s standard navigation. I wanted to do something different; to mix it up a bit. After researching some possibilities, I decided to implement a sliding menu via this jQuery resource.
Fun Fact - Where possible, I matched the icons on the sliding menu with the images on the homepage (which also serve as navigation).
The Content and eBook
All of the content on the site was written by yours truly. I started by listing the top five reasons web professionals tackle side projects. Then, drawing on my own experience and entrepreneurial mindset, I wrote five to seven helpful tips for each category. It was enough to launch the website as a brief - but very helpful - resource, while leaving room for additions down the road.
After launching the site, I decided to also offer the content as a free eBook. I polished the text even more, added two bonus chapters, and efficiently assembled it using Beacon.
The eBook is free and provided in .PDF format. It can be downloaded it here.
Always Looking to Improve
A few weeks after launching Savvy Side Projects, I had the pleasure of seeing Jen Simmons present her talk “Revolutionize Your Page: Real Art Direction on the Web.” Jen focused on the capabilities of Flexbox and CSS Grid; how we’ll soon be able to implement more magazine-like layouts on the web; and what components we can actually use now.
As someone who has grown bored with the same old layouts across the Internet, I found Jen’s presentation to be exciting and mind blowing. As a result, I’ve started to delve into CSS Grid in anticipation of its arrival.
And sometime in the future, I’ll revisit the design for Savvy Side Projects. I envision taking the site to an entirely different level, creating something that looks like a real vintage magazine. It’s the perfect project to test out my CSS Grid skills.
In the meantime, it’s still a wonderful resource for the web community!
The photo of the young boy was the first stock image I found. He was perfect! Also, I specifically matched the colors of the header with the photos to provide continuity.
