And now, onto the website design

If you’ve been following our blog over the past few months, you’ll know that we’re planning a logo makeover and new brand roll out for The Logo Factory. In fact, we chronicled the development of our new logo starting here, continuing here, and then finishing up with the ‘final chapter’ here. Long and short of it – we’ve decided to lose the famous TLF house (even though it’s been with us for a while) and use a simple font-driven design and a cog element. Now that this process is complete, it’s time to start work on using that new logo, as part of a new website design that we hope to launch sometime early fall. And just like with our new logo, we’re going to bring you several blog posts that detail this development.

Luckily, we’re not building our new website from scratch and already have an idea of what we want the site to demonstrate, the sections that we require and how the whole thing works together. Granted, over the years our site has become a little unwieldy, as new features have been bolted and duct-taped onto old. There are a lot of redundant pages, many are way too heavy in the text department, and some pages are simply out of place. Fixing those, in terms of the site hierarchy will come later, and for now, we’re going to focus on the overall site ‘look and feel’ as well as the main navigation system. Because in those departments, our site has become positively old and tired.

Here again, we don’t have to start from scratch – we were able to look at our Google Analytics information and figure out which sections were the most traveled and seemed the most important to users. Using this information, we build several website design wire frames in illustrator. First – the header design wire frame.

This will serve as the main interface for the entire site. There’ll be varying sub-menus and what have you, but for all intents and purposes, this will work. (see full size image here). We also needed a footer design. This time around, we’re going to pay a little more attention to social media, using live-link ‘chiclets’ for services like Facebook, Twitter, RSS feed and our YouTube channel. The Logo Factory is relatively active on Twitter, and we have a fan page on Facebook, but other than our blog home page, there’s no way to access them from our site (in our defense, the latest version of our site was built a couple of years ago, before social media became the rage that it is). When building the footer wire frame in illustrator, we decided that we needed a series of gallery chiclets, small thumbnails through which users could access ten examples of our latest work. Adding to our logo design galleries is a bit of a chore, and this would allow us to add new work as it came online, rather than wait months (or even years) before we got around to updating our portfolio section (view a large size image here).

There are areas in which these gallery chiclets would be redundant (our galleries for example) and we’d need a ’stripped down’ footer design for those.

Now, let’s put them together with a roughed-in wire frame of how the page body will look like. Obviously, this will change in various locations around the new site, but it will give us a starting point from which to work. The amalgamation of the header, footer and body wire frames looks something like this (see large image here).

Now that we know how the site pages are to be structured, we can start actually designing how it will look. First thing to go on the new design is the stock photography that we are currently using in the various sections. When putting together our current site a few years ago, we tried to be too clever by half, using industrial themes and images to portray all the various sections and design services offered at the shop. As anyone that’s ever worked with stock photography will tell you, it’s a time (and budget) saving technique, but after several conceptual hits, you’re going to end up with a lot of ‘misses’. You’ll enter “that will have to do” territory and the original strong ideas will become more and more watered down. Such is the case with our themed stock images (except the spark plug idea, and we’ll talk about that later), so they’re all, save the spark plug, gone.

We are going to use cogs and gears for various backgrounds, but we set up some decent artwork using layered images, rather than one photo “out of the box” (interesting aside: when searching for photos, I couldn’t find an appropriate photo using traditional cogs and gears. We ended up using an interesting, super close-up of a watch mechanism for the header background). We added the 3D cog graphic that we used in our logo re-development phase (see large image here).

Just like our current site, the various sections will be color-coded, but rather than (often goofy) photographs, we’ll add 3D icons and logos wherever needed and if appropriate. Like in our Flash logo animation section (see large image here). In the Flash animation section, the thumbnail images will preview recent Flash animations, as opposed to various artwork examples.

That sort of theme will continue throughout the website makeover. Here’s a peek at our logo repair section.

We’ll also be redoing our blog, but the change there is pretty dramatic, so we’ll save that for another post. In the meantime, here’s approximately what the new TLF Studio Blog will look like (large picture here).

And there you have it. Keep in mind that most of this stuff is first/second stage and a long way from completion. Some things will change, but I suspect the final website design will turn out pretty similar to the images presented here.

We’ll keep you posted as the new design comes along.

Related posts:

1. The design of this blog is crap. Refocusing our brand & redesigning our blog
2. Someone copying your website?
3. Reworking The Logo Factory design (cont’d)
4. Dispatches from the design trenches – reworking The Factory logo
5. Pardon our mess

Tags: brand, design, Logos, rebranding, studio news, web, web design