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.
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.
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.
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.