Realigning the Folyo Blog

By Sacha Greif

The web moves fast. Trends like flat design and responsive design didn’t even exist a couple years ago. Yet some things can stay surprisingly relevant, even 10 years on.

Cameron Moll‘s article about realigning rather than redesigning is one of those things, and it immediately made sense to me when I first read it,.

After all, why throw out all the valuable lessons learned through a previous design when you can build on them and improve something iteratively instead?

So this is exactly the approach I chose when it came time to refresh and update this blog.

Compare the old design (2011):

With the new one (2014):

The overall layout and concept stayed the same, but I introduced a lot of small tweaks.

Visual Design

The most obvious change is the overall aesthetic of the blog. The original was designed before the flat design era, when skeuomorphic realism was all the rage, and it was starting to look extremely dated.

Yet at the same time, I still liked the “fake notebook” concept, and I didn’t want the design to be just one more centered column of text on a white background.

So I started looking for a different approach. I tweaked the cover of the notebook and the texture of the paper, but I hit a wall when it came to the background.

A dark texture made the site look gloomy, but a light background didn’t make the notebook pop out enough.

Mac Desks: showcasing beautiful workplaces.

The breakthrough came while browsing Mac Desks. If a texture or flat color didn’t work, I’d use a photo! This gave the design the atmospheric feeling I was looking for, and also inspired the final color scheme.

Typography

I also overhauled the typography. I was previously using Open Sans, which is a great font but didn’t really match the feeling I was going after.

Abril Text.

I wanted something elegant yet readable, so a serif font made sense. While browsing Typekit, I finally settled on Abril Text, a beautiful face which had the added advantage of being available both as a web and desktop font.

Crete

To complement it, I picked slab serif Crete Rounded for headings. I had been looking for an excuse to use it for a long time, and its solid curves seemed the perfect match for Abril Text’s lighter strokes.

Responsive Design

When I first designed the blog in 2011, mobile browsing was on the way up but still represented a minor proportion of traffic.

Now in 2014, the situation is of course vastly different. Mobile traffic can’t be ignored, and a blog needs to be responsive.

But I knew it wouldn’t be easy to “responsify” the site. Responsive design works great for simple designs, but quickly gets tricky when dealing with complex layouts and background images.

I ended up using three different breakpoints to deal with the various layouts. The result is a bunch of ugly code, but at least it works!

Simplifying

I also got rid of most of the content in the sidebar. This was both because of my own laziness (simpler is faster!), and also because I personally rarely click sidebar links.

Instead, I decided to put the focus on the newsletter. Email is still the most reliable way of building an audience, so it makes sense to promote it first.

Bye Bye WordPress

On the back-end front, I also got rid of WordPress in favor of Middleman, my static site generator of choice.

Switching to a static site greatly simplifies deployment, hosting, and scaling, and also makes development faster. These days, WordPress is probably overkill for the vast majority of blogs, especially if you’re comfortable with managing your content through version control.

Make Yourselves at Home

One thing I’ve realized over my years of blogging is that it’s very hard for me to write on a blog if I don’t like its design. So hopefully, this refreshed design will also encourage me to write more.

I’m also in the process of editing, updating, and republishing the blog’s previous articles, so stay tuned for more content soon.

In the meantime, take a look around, and let me know what you think!

About Sacha Greif...

Folyo's original founder. Now working on Sidebar and VulcanJS.

Want more? I'll send you 5 ideas for finding your next big design contract right now. Just tell me where to send them.

While it seems like implementing simple but effective ideas would be the easiest part of being a designer, this simply isn't the case. In fact, it's often the HARDEST part.

After reviewing thousands of portfolios the two most common problems designers have are:

  • "My website isn't getting me clients!"
  • "I don't know what to do to find my next client."

Sign up to get 5 simple quick start tips for finding your next client this week. You haven't heard these before.

You'll get a free "Quick Start" guide on how to find your next big design contract this week.

I sincerely value your trust in signing up.

folyo-featured-on

Or listen to my podcast...

Freelance Podcast

Freelance

Freelance is a podcast about how to be more effective at independent work featuring companies like Basecamp, ConvertKit, Beaver Builder, and more.

Listen on: iTunes | Overcast | Text me a link