Design (UI, UX and GUI) of a portfolio website for a design agency in Nova Scotia, Canada

Project

Trampoline, a design agency in Canada, needed a cool new website that would showcase their broad range of services, setting them apart from rival agencies on a national level in Canada. Several templates were needed to profile the agency and their portfolio.

Note

All ‘portfolio’ images used in the GUI designs in this project were collated from random Behance projects to simulate real content. As an aid to creative direction for the client/agency to present and shoot their projects.

Involvement

Creative director
Wireframes
Design
Front-end build

Client

Trampoline

Date

Feb 2012

Home page

A simple, quirky, but tight, structured grid formation flows throughout each template creating a cool and contemporary look.

Imagery

The main feature image used here was collated from a Behance project to simulate actual content, and as a guide to creative direction for the client/agency to present and shoot their projects.

Navigation

Simple slide down on-rollover menu.

Our Work

A flexible grid with spoilers of each project, tempting the user in to see more. Each grid item is labeled with the project category, and on-rollover reveals the project title.

Imagery

The images used here were collated from random Behance portfolios to simulate actual projects, and as a guide to creative direction for the client/agency to present and shoot their projects.

Contact page

Probably my favourite template. I wanted to do something different to a generic contact form or map, so using the grid structure I broke up the map, overlaying an interactive Google Map.

People

Using the same grid to show the agency staff, giving prominence to the Directors. Rollover to reveal their names, click through to view their profile (see next template).

Team member

Personal profile page for each agency staff member.

Clients

The agency wanted to showcase (by way of appreciation) their existing client base using their logos. Featuring recognisable local Canadian brands, highlighting the sort of work they've done.

Case study (1)

A simple portfolio template. A feature banner, project explanation, information, tags, listing any awards/press and a gallery of print materials.

Imagery

The images used here were collated from a Behance portfolio to simulate an actual project, and as a guide to creative direction for the client/agency to present and shoot their projects.

Case study (2)

Additional galleries can be added (and titled) for projects that span different media. Stats can be included in the left column to highlight project successes (e.g. 30% increase in sales).

Imagery

The images used here were collated from a Behance portfolio to simulate an actual project, and as a guide to creative direction for the client/agency to present and shoot their projects.

Case study (2)

The agency do a lot of television and radio production. Vimeo embeds can be added, and a bespoke 'play bar' for audio content (e.g. to stream radio commercials).

Imagery

The images used here were collated from Google Images to simulate an actual project, and as a guide to creative direction for the client/agency to present and shoot their projects.

Text template

News

Article template

Variation on the text template to suit a news (blog) format.

Wireframes

Included here are a few wireframes shared with the client prior to any 'final' designs in Photoshop were undertaken, ready for build.