We have received great feedback about our website, along with many emails asking us how it was built, if it use a CMS, and what tools we used.

What better way to answer these questions than with a blog post (a long one I might add). We’ll be taking a look at the processes used, how we approached the site, the selection of coding language, and other details we contemplated, such as the history of the older sites.

If you’re not interested in the details of how our business was born and its evolution, you can click here and skip to the new site development.

History

The Alonso Creative website has been evolving for some time: it started as a flash portfolio 7 years ago. Why flash? Because it offered the best solutions for image slideshow management and for delivering the optimum interactive experience. This was before the javascript frameworks era.

In version one I showcased only my work, with all the information on one page, and a small contact form that slides from the top (an idea we still continue to use and has yielded good results).

+ Click image to enlarge +

Visit v.1 of our website.

This site was live for 4 years, and I always had great feedback from clients and the design community, where it was featured in many galleries.

From the beginning the idea was clear: create a simple interface where the content was the most important asset. We wanted to apply the KISS approach (Keep It Simple Stupid) and be more of a gallery than a showcase of trendiness or baroque design.

When I relocated to San Diego in the summer of 2007 it was my goal to turn Alonso Creative from a freelance venture to a solid business, based on a creative collaboration model with the client as a central partner.

By doing so we needed to re-evaluate our web approach, and get a new site up ASAP to start doing business development.

SEO as a strategy

When planning the new site we wanted a site that would be fast to develop, and would take into consideration new emerging technologies, accessibility and SEO. We migrated away from a full flash approach, using flash only as content delivery, and used XHTML, CSS and Javascript.

+ Click image to enlarge +

Visit v.2 of our website.

This version of the site got really good traction. It achieved a more established presence and better SEO rankings, putting us on the map in San Diego. This happened due to three reasons; A) Most studios where still using flash, B) Semantic coding and structure gets you a long way when doing organic SEO and, C) The site was submitted and featured in several online showcases, generating a good injection of links and traffic to the site.

This is great, right? No. While it achieved a strategic goal, it went against our principals: we were focusing more on visuals for the sake of coolness than on functionality. We even went as far as to hide the navigation tools in sliding panels. What where we thinking!? We broke our own rules in order to rush the project and we did not think it through, like we do for our clients.

Another point we missed is that we didn’t have a clear message of our philosophy, our services, and what made us different from the competition. This had to change. A year after it launched, we started planning v3.

Coding tools:

Dreamweaver CS3
CSSedit
Dreamweaver Spry Javascript Framework for sliding panels
Lightbox 2.0 for image overlays
Adobe Photoshop CS3

Who said a trilogy is no good?

It was time to really represent who we were: our philosophy, and our client-centered approach. We took a look at the past sites and asked ourselves what made us different and what drives our business. And so we created the top 10 reasons why Alonso Creative should be your creative partner.

This gave us a solid foundation of the core concept of the site: a client oriented site where their needs came first and where the work is showcased and explained, making every piece a mini case study, all within an elegant, easy to navigate interface with attention to the details.

We started by applying our process: defining our objectives, doing research, concept, and exploring. This enabled our design and code to be clear and easy to execute.

We created sketched wireframes of every scenario, figured out any animated interactions, and researched the best technology to achieve our goals. This gave us a great insight as to what was going to work and what was not before we even thought of code.

+ Click image to enlarge +

We were ready. We had all the pieces in place and we collaborated with a writer to polish our message. Design and build started.

Our goal? To take the site to a new level: to increase the quality of code, standards based design, and implementation with validation and SEO as main drivers, along with smart templates for easy growth and updates. We looked at our analytics to decipher key content, visitors’ screen resolutions, keywords, etc.

Design

Messaging and the portfolio were to be the core of the site. The idea was to create a clean interface where we could differentiate types of content by using typography, design elements, and color.

For typography in titles, we selected the type we use in our identity materials: Whitney and Gotham from Hoefler & Frere-Jones. For body copy, we used Lucida Grande for the Mac and Helvetica for the PC.

To highlight different types of contents and create a visual language, we used a thick side border for each group of elements. This also helped to break the horizontal nature of the site.

To give a natural, human touch, we used the wood texture (that comes from one of our furniture design projects). This gave the site some continuity from the previous design, and also provided a softness to contrast with the sterile and minimal design.

Tools for the design:

Adobe Photoshop CS3
Adobe Illustrator CS3
960 Grid System

Development

As mentioned before we wanted to create a clean, friendly, and easy to update site. We debated whether to use a CMS or not. We decided not to use a CMS due to 2 main reasons: A) we wanted to try and learn new things and, B) we wanted flexibility to evolve the site fast, experiment ,and fine tune it to the maximum (which we still do).

We used PHP to handle smart templates and navigation, as well as to update repeating content and to handle forms. We are using CSS2 and XHTML 1.0 transitional for structure and visuals.

We chose MooTools for the Javascript framework. We feel it’s one of the best and most underestimated frameworks on the web. It provides easy and fast code writing and silk smooth animations. We used it for the sub-navigation, quick contact panel, and for the forms.

To implement the typography on a standards based manner we used sIFR. No images where used for main typography.

To deliver images we decided to use flash and the SlideShowPro component. We used it so we could deliver images, video and audio from a single file and reutilize this and update it via XML. We customized the navigation for the slides and used ActionScript 3. For embedding the flash we used swfObject 2.

Tools used for development:

Panic Coda
MacRabbit CSSedit 2
PHP 5
Mootools 1.2
Adobe Flash CS3
SlideShowPro
Adobe Photoshop CS3
MAMP (to run a local web server for development)
Apple Motion
sIFR

Success

It took eight months to get it right. We feel we created a site that we are proud off and rounds up our approach to our clients, our design and our work philosophy.
The site has gotten great feedback from peers and has been showcased in the most recognized web design galleries around the world (Google “Alonso Creative”). Most importantly though, it has gotten great feedback from our clients, existing and new, and has generated good business and a good reputation for our company.

Our best advice?

Be true to your principles and core
Research, research, research!
Don’t follow design trends just for the sake of it
Don’t get discouraged by errors, learn from them
Design with strategy and your audience in mind
Don’t design for the now, design for the future as you’ll get so busy you won’t be able to update your site very often
And most importantly: Love what you do!