Web Development

North Shore Coffee website

North Shore web

Project Detail

The objective for this project was to come up with a website design for North Shore Coffee in collboration with the Ad.

Languages used:

HTML 5 | CSS | CSS Flexbox | CSS Grid |JavaScript


Web Developer, Graphic Designer, UI designer


North Shore Coffee

North Shore Coffee, a fictional coffee company that came to in my Video class which we also did a video AD for.

Information Archiecture

Low fidelity Wireframe

To get a better understanding of which advanced layouts/structure I would use I made a low fidelity wireframe. The low fidelity wireframe helped me figure out that I was going to use CSS flexbox and CSS grid while working with the layout of the website.

Visual Identity
north shore coffee visual

Color/Style guide

The logo was already made in the video class so following the look and feel of the ad, I wanted to bring the pure essence of the coffee into the website.

Final result

Final website

The final website follows the wireframe well and the look and feel of the website captures what the mood board set out to do.