By Design: A Peek at Our Blog Style Guide

Story by ModCloth Style Guide

One of the most exciting parts of our recent blog revamp was tackling a complete visual refresh — we knew that a new name and responsive site structure weren’t enough, and that realizing Story by ModCloth meant taking on every pixel, post, and .png. For our lead graphic designer on the project, Erynn, this meant translating the inspiration and ideas behind Story into a design style guide for Story (pictured above), and using that as the starting point for our new header, sidebar banners, post graphics, and other designs you see on the blog today.

We swung by Erynn’s desk to peek at her completed style guide, and ask her how she and the graphic designers approached reinventing the ModCloth blog.

Okay, Erynn. What does a style guide do? 
Style guides remind designers where the general aesthetic behind a brand started from. After setting up these guidelines, it’s easier to create graphics that sit next to each other harmoniously. All the content on our blog tells its own story and has its own personality, and it’s important that the design doesn’t take away from that. Instead, the design should help further connect the content back to our blog.

When redesigning series like Best Job Ever, it was nice to have this style guide to draw upon. I didn’t need to reinvent the wheel. All the parts where there, I just needed to pull them together. And, if another designer needs to pull a graphic together for the blog, they’ll have an easier time creating something that matches our look. It also pushes our brains to think about how we can mix and match all these different elements across projects.

I talked about the overall concept behind Story in our redesign announcement post, but I’m curious to know how you’d describe Story from a strictly visual point of view.
The style guide for Story by ModCloth is clean, bright, and retro-inspired. A lot of the pins on your Pinterest redesign moodboard were modern designs that had a vintage feel, bold colors paired with pastels and neutrals, and straightforward typographic lockups. The photos on the moodboard were important in the creation of the style guide. Knowing where the editorial team wanted to take its content was key; a lot of the design we do on the blog sits above or alongside photos. Additionally, the moodboard provided a lot of inspiration as to the tone Story by ModCloth should take.

Lastly, it’s important for Story by ModCloth to be inspired by ModCloth’s overall aesthetic, of course!

Any favorite parts of the style guide? 
The shapes are my favorite. I’ve been really inspired by designs that make use of geometric shapes and patterns. It seems like a very modern trend at the moment, but I’m also excited to see how we can continue to design with this in mind, down the line.

We can’t wait to see what Erynn and her fellow designers will dream up in the days ahead, can’t you?

About Jenn

Jenn's first career aspiration was to be a dinosaur. After her kindergarten teacher informed her that couldn't happen, she decided she would be the next best thing: a writer. Aside from writing, Jenn loves chambray shirts, all cacti, and good typography.

, , ,

6 Responses to By Design: A Peek at Our Blog Style Guide

  1. Eliza 05/17/2013 at 5:22 am #

    I love it! So cute and pretty…just like Modcloth. When I signed on I thought I had gone to the wrong address, but then I saw this post. Great job, Erynn and team!

    xo,
    Eliza

    • Jenn (ModCloth) 06/03/2013 at 4:03 pm #

      Aw, thanks for the super-nice words and all your support through the years, Eliza!

  2. Lee 05/18/2013 at 1:38 am #

    Oooh, so cool to see this style guide! I love the font choices, especially Museo Slab!

  3. Ann 05/20/2013 at 11:13 am #

    Beautiful job, you guys! Great style guide post, too!

  4. Alexandra 05/20/2013 at 2:45 pm #

    I saw that you use wordpress.com for your blog…what is the theme Story by Modcloth uses? I want my blog to look this pretty!!!!

    • Jenn (ModCloth) 06/03/2013 at 4:02 pm #

      Hey, Alexandra!

      Thanks for the sweet words; we’re glad you like our new look! We customized a theme by WooThemes called Canvas to create Story’s new look. Hope that helps, and happy web designing, fellow blogger!

Leave a Reply!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s