View the live project here

CGBG’s is a website created to promote and share information about a coffee shop and cafe located in Bristol, UK. CGBG’s is run by a couple, Ethan and Charlotte, and combines their passions and skills for good coffee and delicious baked goods.

This is the first website created for the business, they have previously relied on social media as their digital communications channels. The site serves as an opportunity to share key practical information to prospective and returning visitors, as well as promoting the values and ethos which drive the business. The site will provide the opportunity for new customers and visitors to the city to discover the business, and for returning or regular customers to reference details such as latest opening hours and events listings.

CGBG’s follows a one-page format split into sections. This format has been selected as the site itself is relatively simple in terms of the amount and format of information it contains. This format is especially fitting as this is the first iteration of a website profiling and promoting the CGBG’s brand.

The one-page format allows the designer to take the user on a defined journey by determining the ordering of content and information, while the use of a fixed nav bar retains the freedom and control for visitors to jump to where they wish to be should they arrive with a predetermined destination or objective. As a brand driven by passion and creativity, it is desirable to showcase the visitor experience and products through the use of simple but striking photography. The one-page format allows for imagery to punctuate content, also acting as section divides when the site reconfigures for smaller screen sizes.

As a relatively new company, CGBG’s do not have an established visual identity beyond their logo and preference on imagery style. Therefore principles were defined around colours and typography to allow the site to convey a look and feel that is complementary to the brand, and which can be incorporated into the brands developing brand identity toolkit.

Fonts - Overpass and Chivo, selected via fontpair / Arial as fallback

Font colour - #343434, informed by review of colour performance of options using WAVE web accessibility tool

/b>Brand colours - Judge Gray #523F31 Vanilla #D3BBA6 Envy #88A691 Dusty Gray #A49C9C

The approach to the design of the site has been informed by reference to the five planes of user experience design. 1. Strategy -
a) For business owners - create a site that can act as an easy to manage space to share information about their business
b) For customers - act as a one-stop location to quickly and easily collect information about the business and its offerings.
2. Scope - The site is to be relatively simple. Users should be able to glance at the site and find the information that they are looking for, or find it in less than three moves/actions from arrival on the site.
3. Structure - Core reference information should be at the top of the site, to include address and opening times. Less frequently referenced information will form subsequent sections of the site and live deeper in the site’s structure.
4. Skeleton - The site’s design was drafted using Figma, producing useful visualisations for discussion with the client to review and tweak into a final design ahead of build.
5. Surface - This has been informed by the work around the brand identity, creating rules and elements necessary to build a visually appealing site which complements the brand identity.
CGBG’s Figma Mockup

Descriptions here highlight value to first-time, returning and frequent visitors to the site.

Navigation Bar - The navigation bar takes prime position at the top of the site, sitting on the right-hand side. The nav bar has been coded to be fixed, so that it remains in position as the user moves down through the site. It contains links to allow the user to easily jump to different sections of the site with ease, minimising scrolling and effort on the part of the user.

Social Links - The brand's social channels are well established and usually updated daily. The inclusion of linked social buttons at the head of the website seeks to drive traffic to these channels and grow their following. It also allows site users to access the most recent posts and updates from CGBG’s.

Hero Image - This image is included to give users an immediate sense of the CGBG’s space. Being quite a large image, it works best on desktop and laptop,it has been replaced by an image with more fitting dimensions for mobile.

Review Quote - This section gives an immediate sense of a third-party take on CGBG’s. We know that customers will be encouraged by positive reviews, and this section allows us to showcase a glowing review. The review quote section can be updated with other quotes and comments as they are published. The section can also be utilised should a special notice need to be published on the site for a temporary period eg.unexpected closure or a request to review amended or temporary opening hours.

Opening Hours - This section contains the most fundamental information that a client needs to know about the business, where to find it, when it is open and how to make contact. It is therefore given prominence as the first section. Icons have been used to assist the user in being able to find information at a glance.

Coffee & Food - This section profiles the products which the company offers. A brief introduction to the ethos behind production is accompanied by a striking image or items available in store.

Events - CGBG’s main offering aside from coffee and baked items is as a venue. The owners have established a varied programme of events taking place each week. This section includes information on upcoming events taking place this month and next, with notes on any fees to attend or take part that visitors need to be aware of.

About Us - The owners of CGBG’s, Charlotte and Ethan, are a key element to the brand identity. This section is used to profile them, their backgrounds and skills, and also to put faces to their names.

Suppliers & Partners - The owners believe that their focus on great produce is only possible due to the work and expertise of the company’s suppliers. They have therefore requested that we include a profile of some of their suppliers. The embedding of videos here means that visitors to the site are not taken off the site to consume content on another platform, they remain within the CGBG’s site and have the option to continue their journey after consuming this media.

Footer - The footer has been utilised to share information on the ownership of the site. It has also been used to share again and reiterate the key CTA for the business of driving traffic to and building the audience of their social media channels.

At launch, the site created meets all of the criteria requested by the business owners. There are some features which are to be revisited in the future:

Newsletter sign-up form - In the future, when the team at CGBG’s have capacity to administer it and the business has been running for more than one year, it is has been suggested that the site could add value by hosting a sign-up form for a monthly email newsletter. At that time, developers should review the one-page format of the site to ensure it is still fit for purpose and able to comfortably contain additional content.

Embed social feeds - Another feature for future consideration is the embedding of one of CGBG’s social media channel feeds eg. Twitter.

Code Validation: HTML - No errors were returned when passing through the official W3C validator
CSS - No errors were found when passing through the official W3C Jigsaw validator

Accessibility - Review completed via WAVE Web Accessibility Evaluation Tool As a result of this, 33 contrast errors were found and corrected by amending the site’s font colour. Redundant link alert also updated.

Mobile Optimisation - The site has been optimised to display correctly on desktop, tablet and mobile screen sizes. The key amendment to the design was the placing of blocks of content (text and images) to stack vertically when viewed on a smartphone.

User testing - As well as displaying the website on desktop, tablet and mobile screens, a third-party was requested to access and use the site. Amendments made as a result of testing and user feedback:

• YouTube videos were not displaying correctly on mobile, creating a wide hap tp the right.
• Logo appearing in the header was not clear in desktop, image file replaced with larger image to rectify this.
• Logo displaying too large on mobile screens and creating a large white space beneath it on the ride side.
• Padding was added to text content sections to make the viewing experience more comfortable.
• Navigation bar overlapping logo on mobile devices.
• Navigation bar text was too large and not in proportion on mobile devices.

All bugs discovered have been fixed ahead of deployment.

The site was deployed to GitHub pages and the live link can be accessed here - https://johnjmci.github.io/johnjmci-HTMLCSS-Project1/
The project repository can be accessed here - https://github.com/johnjmci/johnjmci-HTMLCSS-Project1

The build of this project has been informed by reference material made available in the Code Institute Diploma in Software Development.
Some limited troubleshooting has been assisted with reference to W3Schools

Website copy was written bespoke for the site
The icons in the footer were taken from Font Awesome

All images used were sourced from Unsplash and used in accordance with their standard licence - “Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.”

HTML5
CSS3

Font Awesome - Used to source icons used in site.
[GitHub])https://github.com/ - GitHub is used to store the project code.
Canva - Used to create logo and site banner.
Figma - Used to create site layout and wireframes.