BACKGROUND / CONCEPT

Role: Front-End Developer, UI Designer, User Experience

Softwares: Bootstrap, HTML5, CSS3, Illustrator

Goal: Hand-code a responsive website using a major industry framework

Capture BC is a company that connects a like-minded community of photographers and adventurers from all over Vancouver and British Columbia. Whether you are a tourist with a camera, a hobbyist looking to get outdoors and capture the amazing views this province has to offer or a professional looking to network themselves the site acts as a hub for information and entertainment. 

Audience

Primary: Local photographers and aspiring photographers in BC

Secondary: Tourists, people looking to find new areas to explore in BC, amateur photographers looking to gain new skills and learn new tips.

PROCESS

Visual Identity

This was a passion project for me and was created and designed by my interests in a site I wish existed. Starting with a logo I wanted to create something that symbolized photography and also community. With that idea I started drawing thumbnails. And ended up with a clean and flat logo comprised of a buzz of circles that represents a hive or hub and outline that is the frame you would find in a viewfinder. 

For color and typography I felt because it was a photography based website, I didn’t want distracting colors to take away from the images being showcased but felt that using a light seafood green was a friendly tone to add to this community site. I went with Oswald and Lato (from Google Fonts) as my two font families, although both sans-serifs I think they complimented each other nicely.

capturebc thumbnails
capturebc logo
capturebc moodboard

Wireframes & Interface Design

Starting with low fidelity wireframes I had a clear idea of a simple navigation for the site already. The site was to offer a home and about page, weekly and monthly workshops and photowalks where community members could sign up with professionals on a day out. As well as a blog which would be a forum and packed full of articles related to gear, spots to shoot and tips from photographers in the industry. 

capturebc wireframe
capturebc wireframe

Next was high fidelity mockups created in Adobe XD. I implemented captivating photos found on Unsplash.com and designed the layout based on user expectations. I wanted a hero module in the header section as this is a photography based website and I want beautiful imagery to draw new users in to continue to scroll. Next was a value proposition, geometric icons I made in illustrator with inviting actions users can experience here, now that they have been drawn in, know a snapshot of what they can get, answer the question who are we and what do we do, and just before the header was a testimonial to answer the why they should care.

capturebc home mockup
capturebc about mockup
capturebc workshops mockup

FINAL

The live site can be viewed here.