Saffron8 CMS-based Website

Project Description

When our long-time partner came to us to help them rebrand their company, we were ecstatic as we both wanted to create something bold and powerful for the new brand: Saffron8. The resulting site does not disappoint! Based on Django, this site not only looks great but has powerful CMS capabilities to help the company present its work to new prospects quickly and beautifully. Each visit offers an ever-changing fresh look designed to entice the viewer deeper into the site.

Information

Completion Date: Saturday 01 Dec 2012
Website Address: http://www.saffron8.com/

Credits

Graphic Designer: Andrea O'Neill
Frontend Developer: Martin Koistinen
Backend Developer: Martin Koistinen

Form, Function & Performance Features

Front
Solutions Diagram
Clients
Blog
Solution
Portfolio Piece
Inverse Color Scheme

Dynamic "Anything" Banners

The dynamic, auto-rotating, banners can be anything, HTML, Images, Flash, etc. as required.

Deep-linking for Tabs

Tabs or any other place where content is hidden/revealed on the same URL is deep-linked allowing the viewer to bookmark or share the state with others in the normal fashion.

Dynamic Content Grid

Each visit presents the viewer with a different mix of project and blog tiles in hopes that the viewer sees something enticing enough to click deeper into the site.

Very High Performance

This site scores 95% and 98% respectively when measured with PageSpeed and YSlow respectively. These are tremendous scores considering the amount of content and level of interactivity each page delivers.

Legend:

Form
Function
Performance

Beautifully Designed Site

This is a very beautiful site with a strong sense of structure and organization. This is very important as this represents the company itself, which offers design services, including web-design.

Ever-present social links

Each page has context-sensitive social links and other utilities available. The social links dynamically refer to the shown page.

Animated Solution Map

Beautiful and interesting map of all the services offered by the company. This is presented in an animated build and links to all of the solutions deeper in the site.

Legend:

Form
Function
Performance

Animated presentation

This solutions diagram (shown here fully displayed) assembles itself as the viewer scrolls the page down to see more adding a lot of interest to this already interesting graphic.

Highly Optimized

Despite the large size for this graphic, it is highly optimized and engineered to display quickly and consume the fewest amount of the browser’s resources.

Active Filtering

The initial display of the matrix is very long to convey the depth of the company’s experience.

However, each of the groups on the left are filters which serve to limit the amount of clients/projects that appear in the matrix and allows a visitor to quickly see work related to their field, requirements or a particular company.

Legend:

Form
Function
Performance

Animated and Engaging Matrix

Changing views are animated to provide a playful, engaging interface.

Legend:

Form
Function
Performance

Tight MailChimp Integration

Almost every page presents a form allowing the user to subscribe to the company mailing list. This is done with a massup with MailChimp which puts the new subscribers directly where they need to be and automatically sends a confirmation to their inbox.

Legend:

Form
Function
Performance

Auto-advancing Carousel

Project images are shown in an auto-advancing carousel, but there are controls which are revealed when the user hovers into this area with their mouse.

Legend:

Form
Function
Performance

Powerful Hyperlinking

Everything is highly inter-linked. Here a particular portfolio piece is linked to a number of related solution lines and blog posts.

Legend:

Form
Function
Performance

Alternate "Light" Theme

Some viewers may prefer a lighter theme and we’ve got them covered. Press the theme button in the bottom toolbar and the site toggles from light on dark to dark on light.

Theme switch

The selected theme will remain even on subsequent visits.

The lighter theme is also used as the basis for print stylesheets to conserve black ink.