Last week I walked through some of my thinking about why it was time to redesign this site as well as the business goals that helped shape the redesign. Today I want to talk about the goals and constraints I set for the design itself and then offer some thoughts about the aesthetic concept for the design.
As a reminder there were 3 things that led me to thinking it was time for a redesign and helped shape it.
- Get the design more inline with my current skills and style
- Refocus the services I’m offering
- Begin the transition from services to products
Much of this post will focus on the first and last items above. I’ll talk more about refocusing services next week.
The first item above suggested the new design come from a place of solid design principles. This wasn’t going to be a design heavy on graphics or in some trendy style. The goal was to put in practice more of what I’ve been writing about the last few of years.
I want visitors who understand design principles to visit and notice that some effort has gone into things like typography and grids. For those not as well versed in design, I want the content on the site to be readable and legible with a simple organization so people could more easily find what they’re looking for.
Some of the words I used to describe what I wanted include
The idea to transition to products suggested a few things as well. To scale a product based business you need more sales, which naturally suggests increasing traffic, keeping that traffic here, and convincing everyone to come back.
While I won’t know how successful the new design is for a little while there are specific goals I set where success will be measured through a change in analytics.
Increase subscribers — To help encourage people to subscribe I placed an rss button in the navigation and another (along with email signup) in the footer. The footer now also shows the subscriber count for social proof. It would probably make sense to add a call-to-action link at the end of posts too.
The goal is to get more people here, get them to stick around longer, share what they find, and subscribe before leaving.
Increase time spent on site and page — Ideally the more professional and less trendy design will convince people to stay longer on a site about design. Having content that’s easier and more desirable to read should also keep people on the site longer.
Increase page views — In line with the above goal I’ve tried to make better use of categories, tags, and series links (some of which still needs to be incorporated). I’ve also tried to make it easier for people to explore the archives with plans to make it easier to quickly filter and find what you’re looking for.
Decrease bounce rate — Again similar to the above goals. Here I’ve made post headings the most dominant element on the page so visitors can instantly decide if they’re in the right place. Ideally the lack of cruft around the headings and the strong vertical channel of space will draw readers further into posts.
Increase traffic — Always a goal that requires the best content I can produce along with offsite promotion. In regards to the design itself this suggested keeping social sharing buttons below posts.
Remove, remove, remove — The last time around I included lots of things because they were supposed to help in one way or another. I think they only made the design more crowded. This time around I wanted to remove as much as I could and allow design elements more space to breathe.
Ultimately the goal is to get more people here, get them to stick around longer, share what they find with others, and subscribe before leaving.
I struggled a lot with the decision to reserve a space for advertising. If I’m going to transition the business to products the ads serve a purpose in hopefully freeing up a little time. As I mentioned last week I don’t expect they’ll lead me to an early retirement, but they can provide a source of revenue that frees up some time that would otherwise go to a client project.
In wanting to keep the design clean I compromised and moved the ads to the footer. The trade off is the space is probably less desirable to advertisers.
The goals above help set a direction for the design. In addition I gave myself a few specific constraints.
- html5 — I want to make use of html5 where appropriate. I started with the html5 boilerplate and made greater use of semantic tags.
- Responsive — It no longer makes sense to me not to think responsively even when you plan on developing a separate mobile site.
- Grid-based layout — A stronger organization suggests a grid, but mainly I wanted to practice some things I’ve learned.
- Serif font for the main copy — This was somewhat arbitrary, but having used sans-serif for so long I wanted to change. I’ll discuss type choices in more detail in a future post, but it started with the decision to go serif.
- Minimize global nav links to 4 or 5 — More goal than constraint, I did want to keep the navigation links to a minimum. I’ll talk about this more next week.
As soon as I made the decision to redesign the site I started collecting aesthetic inspiration and settled on 3 main areas of focus.
- Bauhaus — It made sense to draw inspiration for the source of many of the design principles I wanted to use in the design.
- Sumi-e (Japanese Ink Painting) — I’m attracted to things like wabi-sabi and Zen philosophy and they help form the person I am.
- The Renaissance — The men and women of the Renaissance were the first to impress me and led to my early interest in art and design.
Of the three, it was ultimately the Renaissance that led the design concept. I thought Bauhaus might come across like I was trying too hard and potentially lead to some design cliches. I don’t think my existing skills would have allowed me to get across sumi-e in a way I wanted.
There were a few things that led me toward the Renaissance as well. I felt I owed the time period a debt of gratitude. Also when I renamed the business Vanseo I tried to think what a vanseo might be. When I say it aloud it sounds Italian.
Being more of a generalist I also felt a connection to how Renaissance men and women seemed to live along the crossroads of different disciplines.
I’ll hold off on the details till the appropriate posts, but as I began exploring typefaces and color schemes the Renaissance kept getting reinforced and ultimately it’s behind the aesthetic concept for what you see.
I realize you may not look at the site and instantly think of Michelangelo, Leonardo, Raphael, Donatello, or Ninja Turtles in general, but the Renaissance guided me in several ways as the design came together.
This post and the one from last week are the backdrop for everything that follows. What I’m hoping you take away from both posts is that before I started sketching and wire framing and designing, I spent a lot of time thinking.
I thought about my business and the goals I have for it and how those goals suggested a direction for the design. I’ve been walking you through some of the higher level thinking that led my design decisions.
Next week I’ll begin sharing more of those specific decisions and walk you through the process of designing the site as I talk through the information architecture and setting up the navigation on the site.