Brief
The assignment for our MDIA 1106 – Design Fundamentals class at BCIT focused on the process of developing the branding for a fictional small business and building a website design from the wireframe stage to the high-fidelity mockup.
I decided to choose a coffee shop as my small business idea as I was inspired by my favorite local coffee shop in Vancouver (Kings Cafe, I love you). The thing that I love most about coffee shops is how one place can bring together a diverse community ranging from caffeine enthusiasts, bookworms, and designers (like myself!).
This assignment was divided into three parts:
- Create a sitemap and wireframe layouts for your small business site using Balsamiq
- Develop the branding and create the brand style guide
- Complete the high-fidelity mockup of the website design
Brand Style Guide
My favorite aspect of the overall assignment was being able to design The Collective logo and creating a comprehensive style guide that would dictate the entire look and feel of the brand to ensure its consistency.
High-fidelity Mockup
The high-fidelity mockup was created using Adobe Illustrator and features a carefully curated selection of photos that best complemented the brand imagery of The Collective.
As we were taking a web development course alongside this one, we had the option of coding out the website design using HTML and CSS. With only 1 term of coding knowledge, I decided to challenge myself and attempted to recreate the web design. (Please bare with me as it’s not responsive!)

