As a coffee lover and frequent visitor of local cafes, I envisioned a personally designed mock-up for a Melbourne based cafe. This personal project was created to develop an understanding of layout principals and displaying semantic markup effectively.
Developed the design around a section based layout with containing content elements, initialised in Adobe XD. Creating the color tonne from the raw color of a coffee bean mixed in with a warmer texture as the accent color. Below is a screenshot from the XD design.
Developing this project enhanced my color theory skills and better understanding of layout principals. The design features a mobile view and a desktop view both with responsive elements up until the screen dimensions of 3440x1440. Cafe menus and forms recieve a background color and additional properties on desktop view.
Making use of the display property "flex" in CSS to layout specific content depending on a users viewing device. Developed a better understanding of sematic markup and commenting ones code for readability. This mock up created as a personal project to a develop greater proficency in web programming languages.
Testing takes place using multiple browsers to test compatibility. Lauching on a local machine web server (local host) for development and testing purposes. Creating a live site on github to test online features & issues. Multiple devices are also used for testing to ensure there are specific media query breakpoints in place. This ensures a responsive design and layout across multiple browsers and devices.
See web development repositories, implemented designs & layouts & interactive JS projects through my Github account.
Comments
By using a coffee based color tone, I felt I captured the atmosphere and overtone colors of a cafe. This paired with the selective images that potray a similar vibe inside the cafes was a great mix of pre-selected images and color theory.
View Site