Prosopo Web Development, Branding Design, and Theming

Tags:

Project Specs

Details: Complete creation of branding, site design, unique Drupal theme, and Drupal site integration for this startup website development and design agency.

Completion Date: March, 2007

Project Scope:

Website Layout and Design

Website Development in Drupal

Theme Development in Drupal

Icon Set Design and Illustrations

Identity and Branding Design

Print and Collateral Design

Website Project Description

Prosopo is a web development agency that was being started. They needed a unique website that demonstrated their professionalism and prowess with design and development. There were numerous functional requirements for the site and it needed to be easy to update for the agency. Also, at the time I was doing lots of work for them, building numerous sites, and filled their portfolio with mostly these initial client projects.

Project Solution

The website layouts were designed in Fireworks and all branding and icon work was created in Illustrator (see the following sections). The solutions once finalized were coded in HTML/CSS and then integrated into a fully functional unique Druapl theme, which was Drupal 5 at the time. The final designs are shown on the left.

The project also involved the integration of numerous functional elements, a portfolio that required a depth of three deep for navigation. Other functional requirements included a client login area, backend client project displays, contact form, blog to promote the site, and a unique front page design that promoted their services, most prominent projects, and recent blog entries.

Project Results

The project met it's goals of being a clean web 2.0 professional design that allowed them an excellent promotional vehicle to launch more services and encourage clients to utilize the agency for website design and integrated branding development. The client has thrived with this website design, which was successfully utilized for a full year before being updated.

Post Launch

Since being updated they have added some additional illustration and style to the site, though kept much of the underlying original structure and design elements intact in their Version 2 redesign. Visit Prosopo to see the new design integrations they implemented in 2008.

I still occasionally do work with Prosopo as well, which has grown into a large distributed team of web developers and designers. You'll see numerous references to this agency throughout this portfolio, especially for work done in 2007.

Icon Designs

Below are some of the icons I designed for the site at 100% view. They were created in Illustrator as scalable vector graphics and then integrated into the website design. Being created in vector also has allowed them to be used to promote services through Prosopo's printed brochures and collateral materials as well.

Promotional Illustrations

In order to promote some of their services with more vigor, I created some banner style sidebar promotions, which function much like advertisements. This prominently promoted their website development, web hosting, and design portfolio throughout the site.

Logo, Branding, and Print Design

After numerous design solutions were reviewed the final logo was chosen for it's smooth digital communication, ease to carry it across multiple promotional types, and strength of long term brand recognition.

Following is the business card design, also notice how a brighter blue is used here. Much of the blues used throughout the brand were flexible, though we kept to a blue, white, and yellow color scheme.

Prosopo Homepage Design

The homepage has a unique layout themed in Drupal. This front page promotes their services, prominent projects, most recent blog entries, also it allows space for branding and illustrative elements. There is a large message area to communicate the companies main focus immediately with impact.

Prosopo Services Page Design

The services page is the standard two column view for the site. The blog and other pages have a similar layout. This is used for many of the static pages on the site as well. Also, notice the integrated promotional ads and icon designs. A Drupal sIFR plugin was integrated into the site to allow for a unique title font to be used.

Prosopo Portfolio Page Design

The Portfolio page introduces each section of the portfolio. A unique three column view is used for this page and the icons are presented in a larger unique way, which allows for a quick-click into the portfolio.

Prosopo Portfolio Description Page Design

The Portfolio Descriptions pages have unique three column setups and navigation runs tertiary (three deep). Each project has plenty of space to present the designs attractively and include project descriptions. A Javascript solution was integrated to allow for popup viewing of larger viewing of individual portfolio pieces.