A New Visual Experience

It feels as though ten years have passed since we launched the first version of nclud.com, but it was only two years ago that it went live. As we mentioned before not only has our portfolio and team grown in those two years, more importantly “we” as professionals are now more experienced; our new web presence needed to reflect this.

In this article I will give you a bit of insight into some of the details of the nclud.com re-alignment.

The Goals

From a visual perspective the goals were simple:

• The new web site needed an aesthetic refresh
• It needed to accommodate for more content
• It needed to stay true to the nclud brand

Content First

As with any other project the first step was to analyze what was already in place. There wasn’t much that needed to be done here, we were pretty happy with the content and its structure. We had a few ad-hoc meetings where we jotted down notes and from that I was able to obtain an outline of the content with changes/additions.

Straight into Photoshop

You read it right. I’m usually the one to suggest to at least sketch your ideas, however, I was pretty confident in the direction the new design should head in. Having designed nclud’s brand Identity and previous website gave me an advantage as the lead designer,  I knew the cons and pros of the previous design and from that I was able to formulate solutions and ideas which had been cooking in my head for a while.

The Grid

There were couple of requirements the grid needed to accommodate. It needed to be at least 990 pixels wide (for 1024x768 screen resolutions) and it needed to have at least four main columns (the grid had to be divisible by 4) in order to have more flexibility when laying out the content.

For a while having a design laid out in three columns seemed like the standard, three was the magic number and in the days of 800x600 screen resolutions this seemed like the perfect solution. I believe those days are gone, 4 columns is now the new 3 columns. Four is the magic number, not three.

With that in mind, I chose a grid of sixteen columns of 40 pixels each separated by fifteen gutters of 20 pixels each, making the total width 940 pixels wide.

Dividing the page in this manner helped me in making logical decisions. Every item on the page is aligned to a column edge or a gutter or centered within one of the main columns.

Typography

For this design I wanted to bring in the beautiful Avenir typeface used in our logotype, and use that for main headings in the content. This was a no brainer, by doing this we would be making a tighter connection between the web site design and our marketing material like business cards, and presentations. Nowadays there are some advanced and stable text-replacement techniques like Face Lift which allows us to use any typeface we like and we wanted to take full advantage of that.

For the body copy we stuck with the Lucida font family, specifically “Lucida Grande” which is a nice legible font and ties in well with the use of Avenir.

Images, color & mood

One of the main changes you will notice from our previous design is the slight shift in color. This was no mistake, one of my main goals for this design was for it to portray a feeling of elegance and seriousness. This was accomplished by choosing a darker hue of the nclud blue. Not only does that feeling come across, but the design manages to stay true to the overall nclud brand.

To complement the use of the darker blue I set out to create a feeling of “depth”, this is accomplished by the use of subtle gradients and shadows. Some of gradients also help by giving visual structure to the design and bring to the surface the underlying grid, the four main columns.

The green color as in our previous design is mainly used as an accent, used in iconography, buttons etc; consistent with how the use of green happens in the logo.

The display of imagery has also improved much since the last version, choosing a four main column grid allowed us in some instances to assign a specific column for the use of photography or screenshots, this helps breaking up the content in content-heavy sections and also adds visual structure to the design.

And that’s a wrap

A lot of hard work went into bringing the site to fruition and none of it could’ve happened without the amazing collaboration between our team members. The goal was not only to design something that fits our current state as a company, but to design something that we could all be proud of. I think it’s safe to say we’re all extremely proud and happy with the result.