Attack Of Design(back to home)

Cameron Moll famously stated that “good designers redesign, great designers realign“. But what does that mean exactly? To get a better understanding of the term, here’s a real-life example.

The project in question is Timetag.it, an application for which I did the UI and homepage. It basically transforms Google Calendar into a project management app, generating stats and reports from your calendar data. So I definitely encourage you to check it out, especially if you’re already using Google Calendar.

First, here’s the obligatory before and after shots:

Before

The old Timetag.it homepage

After

The new Timetag.it homepage

You’ll notice that the main elements remain untouched, and even the basic structure of the page doesn’t change that much. But there are also some big differences, chief among them the new screenshot of the app. The page is also much shorter because most of the content has been placed in a separate “Features” page.

The new page meant that we now needed a main nav (the site was only one page before), which appears in the top left corner. We also had new content such as testimonials, latest tweet, and blog posts.

So the motivation behind modifying the home page was featuring this new content, and using the app’s visuals to generate interest instead of relying only on text.

Here are a few takeaways from the process:

1. Keep it short and simple

Realigning should not take forever. The point of a realign is to adapt quickly to changing conditions. And the more changes you introduce, the harder it becomes to see what impact each change had. In this particular case, it took me about 3 hours of work altogether.

2. Re-use, Re-cycle, Re-purpose

Try to re-use existing elements as much as possible, even if it’s for a different purpose. In this case, I transformed the header band into a nav bar. I also kept the same pie chart but used it slightly differently in the features section.

3. Be consistent

You’ll notice I didn’t change any colors, fonts, or any major elements. Once your site has an identity, it’s usually possible to preserve it even while improving the interface. In other words, don’t throw the baby (i.e. your brand) out with the bathwater (i.e. your old site).

4. But be flexible

On the other hand you also need to know when to adapt. For example, although the site is aligned on a strict grid (which was more apparent in the first version), you’ll notice that the last block (Twitter & Blog) has its own completely different grid. In most cases I would say it’s better to only use a single grid throughout a site (if only because it’s easier to code), but when the needs arise there’s no shame in deciding to break from the mold.

5. Refine your message

The great advantage of a realign over a complete redesign is that you’re building on top of something, not starting over from scratch. Take this opportunity to refine the page’s message, making it more direct and compact. Just because you’re improving a page doesn’t mean you necessarily have to add stuff to it.

Here you go, five principles for gradually improving a design. I hope they serve you well, and let me know in the comments if you’ve recently realigned a site!

Tweet