Behind the Scenes of the AssociaDirect Redesign

Those of you who have followed Positive Space for some time now may be aware that I am the lead Art Director for a design firm called AssociaDirect. Over the past year AssociaDirect has grown from a niche offering of its parent firm LEVEL2 Marketing Group to become an agency of its own. This growth was so profound that it affected the culture and approach of the firm. As a result, the redesign of AssociaDirect.com was not only necessary, but also an opportunity to showcase the unique experiences we have gained within the association world.

Function before Form

I will start out by discussing some of the technical changes that took place. Two distinct issues were present when approaching the redesign of AssociaDirect.com. First the site was not based on any sort of CMS and was a burden to update. Secondly our organization had become more visible within the association world. These technical concerns left me with a decision between Wordpress and ExpressionEngine. Ultimately I ended up selecting Wordpress for its powerful blog system and my personal familiarity with its templating system.

One of my personal favorite parts of the site is the new portfolio section. Custom programming was utilized in order to create a section that pulls thumbnails and information from the Wordpress outside the main blog page. This allowed us to create an interesting grid based layout that is atypical of most Wordpress sites.

Form, the fun part…

In terms of visual appearance, the approach was heavily based upon our established identity, which is minimal in nature and is heavily grid influenced. In order to inject some interest into the identity for the web, graphics that were originally static had motion applied through flash elements.

Imagery on the site is also set in a duotone of the same PMS swatch from our identity. This was done in order to create a connection between tour current printed collateral and the website.

The portfolio item pages are also presented in an atypical manner. Personally I have become board of all the stock lightbox scripts and wanted to do something more interesting than a long list of photos. Instead I chose to implement some JavaScript based on the CODA slider effect. This allowed for a some creative live cropping of portfolio shots, that reveals more of the shot after clicking the “next” button.

This project also afforded a chance to showcase some different ideas about how a blog could be designed. Instead of the typical excerpt of text on the main blog page, images and a more typographically impactful heading are used.

Similar to the tag grid on Positive Space, a custom list of tags is presented in a modal window running off of the FaceBox script. This allowed for the creation of a bar graph based information graphic rather
than the typical tag cloud.

Blog comments were also presented in a more whimsical manner by using the appearance of a speech bubble to tie a comment with the writers Gravatar.

Some things are still in progress such as new flash animations for our process, but after 4 months of fitting it in-between client work, it had to go live. But when all is said and done, I am extremely happy with the turnout of the new design. The new site has achieved each of the goals we set out with, and in my opinion stands out amongst the competitors in our niche. I would love to hear some constructive criticism, so please share it in the comments below.