- About the site
- UX Design - the Five Plans method
- Testing (testing.md)
- Performance
- Issues
- Deployment (deployment.md)
- CREDITS:
- Aknowledgment
Culture Coffee cafe is a static website which is intended to promote, atract and offer information to potential and actual customers of Culture Coffee café. Since this website was build as a Milesstone Project for my course, therefore educational purposes only, please be advised that some information on the website may not accurate and are displayed for the fore-mentioned scope.
Link to live website is here
Link to this GitHub repo is here
Some sections of this documentation have been moved to a different file, specific to that content.
The reason is all that information in this docuement only woud've made navigation difficult. So for example, wireframes.md, contrast.md or testing.md, are different files and they are linked in this document.
Inside those separate files there are links back to the main readme.md file too.
The UX design and development is based on the Five Elements of User Experience we've learned on Code Institute's platform.
- Website objectives
- Planning Stage
- The idea of making this website came from a real-world need, which is to build a presentation website for Culture Coffee café located in Salisbury. From the begining I had a rough idea of the content the site will provide, but folowing the development methods learned at Code Institute, helped me organise the workflow.
- Site Objectives
- The main purpose of this website is to offer the users the information necessary so that a client could learn:
- who we are?
- what could we offer as a café shop?
- which is the café's menu?
- where are we located?
- how the venue looks like on the inside?
- if there are other clients reviews about this shop.
- if he could contact us?
- The main purpose of this website is to offer the users the information necessary so that a client could learn:
- Design Goals
- The site should be responsive on all devices.
- Offer accesibility support.
- The navigation shoud be intuitive and easy.
- Each page should keep a pleasant, neat and common design across the website.
- The information offered is enough and organized well to attract the clients.
- Planning Stage
- User needs
- User Stories
-
A first-time client, or a prospective client, may have the following user stories:
As a I want to... So that I can... Prospective Client find a café in Salisbury drink a coffee locally find café's location visit the café find contact details ask some other questions read the menu see if I can have a brunch, lunch or just a coffee download the menu print the menu find opening hours visit the café read some testimonials (reviews) see other clients' experience read the social media pages see what other clients shared see if they have accessible entryway bring my son who's using a wheelchair check if there is free Wifi do some work from my laptop hire the café have a private party -
Additionally to the user stories of a first-time client, an existing client might also have the following stories:
As an I want to... So that I can... Existing Client remember café's location visit it again find if they offer bonuses for being a loyal customer. have a coffee for free make a review show how happy I am for their coffee make a complain discuss a refund remember café's location visit it again -
As a bussiness owner the users stories are related to the purpose of the bussiness itself, but also to the intent to grow in future:
As a I want to... So that I can... Business Owner sell my products make profit create a select clientele make a target reward the loyal clients retain customers offer a good, intuitive browsing experience raise the chances the client would remain on the site implement a good site structured layout provide concise informations provide pictures gallery showcase some of the products on sale provide links to social media make a presence in the online create a positive image attract more customers
-
- User Stories
- Functional specifications:
- An user should be able achieve its goals by visiting the site's sections
- An user could understand site's structure by accesing the navigation menu bar
- In case website page address is typed wrong, the server displays the 404 error in a dedicated page.
- The user receives a status feedback as a result of its sent enquiry.
- All pages are responssive on most of the devices, from small to large screens.
- Website is well displayed on most popular browsers.
- Content requirements:
- The information provided to user needs are acomplished through:
- Navigation Menu
- Images
- Logo
- Pictures' Gallery
- Products' descriptive images
- Icons (from FontAwasome)
- Specific text information (address, phone number, email address)
- Internal links
- External links to other sites or services:
- Travel sites
tel:link to open diallling screenmailto:link to quickly open default mail client
- Information is actual.
- Information is clear and easy to understand; homogeneous base of content.
- The information provided to user needs are acomplished through:
-
Information architecture:
-
- Information available across all the pages
- Header and Footer are accesible on all pages offering quick acces to different type of information
-
- Features grouped and available only to specific pages:
- Each page's content section is specific to the page.
-
-
Design options:
- HOW:
- an user can learn some information about out cafe by reading the Landing Page content
- an user could consult the cafe's menu in two ways:
- viewing the dedicated Cafe's Menu page.
- downloading the available Cafe's Menu in PDF format.
- an user may see real pictures gallery:
- by visiting the Pictures Gallery page
- by accessing the Google Maps and TripAdvisor links available at the bootom of the Pictures Gallery's content section.
- an user may send an enquiry to the café using the Contact page.
- WHERE:
- Structure and flow (user journey) map
The flow of an user visiting the website is represented in the following diagram:
- HOW:
The skeleton plane is represented by the wireframe sketches and they're are located in wireframes.md file.
- The site's structure follows a simple linear design. From the home page you may access any other page through the navigation menu. This is a straight forward aproach. The same navigation menu is accesible on every other page, even on the 404.html one. The Form Confirmation page is displayed to confirms the form has been successfuly submited and you have the option to navigate back to the website or other internal links.
- One reason behing this aproach (of the simple linear design) is the Mental Model natural thought process, more exactly, the users build mental models and use these
"to assess relations among topics and to guess where to find things they haven’t seen before". (Site Structure theory)
The following diagram represents this structure
-
Some commonly used breakpoints are 576px, 768px, and 992px. These values should cover most of the targetted devices, like smart phones, tablets/laptops, and desktops. The layout I chose allowed me to use the 920px breakpoint for the navigation menu (when the header's width is too small and the navigation items would begin to wrap) and 992px for the general layout.
-
For responsiveness on mobile devices the minimum supported width is 300px. Using smaller resolution would make the pictures unreasonbly sized and the layout would not serve the purpose properly. That's why I decided this would be the minimum body's width.
-
Going higher in the width resolution from 991px we see a landscape and desktop view, with larger paddings and margins, with a maximum width of the main content of
1000px. On iPad Pro the layout is displayed as on desktop view, but on a Samsung Tab S4, the layout is rendered as a mobile view. -
The navigation bar has a little different responsivness than the rest of the layout because of the size of the text from navigation bar, and also because I din not want navigation's items to wrap in desktop view mode. When the width of the screen decreases and would force the navigation elements to wrap, that's the moment the header is displayed as mobile layout. Therefore the transformation of the navgation bar from desktop view to mobile view happens much earlier, going down from 920px.
-
The overall responsiveness of the site has been tested and the results can be found in the folowing section.
The general layout of the website is composed of three main areas: Header, Content and Footer. The Header (containing the Logo and the Navigation Menu) and the Footer are common to all pages, but the Content area is different for each page.
- contains the company's logo and, depending on the device's screen width, a menu navigation bar to the top right (on larger screens) or a hamburger menu button (which opens the hidden menu - in mobile view).
On screens up to 920px width (small screens)
On screens larger than 920px width (larger screens)
- contains the page's specific subjects (like some information on Langding Page, Cafe's Menu, Pictures Callery, Contact form or the 404 page).
- this area is limited to a
max-width: 1000px;there is also apadding: 0 100px;in desktop view. Also the background-color is limited to this width and this should create a delimitation between the empty space and the actual main content. - in mobile view the pading is reduced to
30pxand thewidth:100%, so that more information would fit on smaller screens.
Home page main section contains:
- a welcoming message at the top.
- some introductory information structured as Q&A form. This area contains some links to links on another pages. For example, the word "coffees", from the
What else can we offer you ?question, is a link to the Coffees category from Cafe's Menu page. This is making navigation handy. The purpose is to guide the visitor through the website's content, and describe what the company has to offer.
Mobile and desktop view:
The menu page is structured differently that the other pages, because the main purpose is to display the Café's menu, sorted in four categories: Coffees, Dishes, Cakes and Wines. For that reason I found useful to use the grid system. The same result could be obtained with just using flexbox too, but my choice was grid for this page.
-
In mobile view the layout is formed as a single column. So the categories and their content are all displayed in one columns only.
-
On larger screens (desktop view) the container is displayed in a column: inside it, the categories in this column and the the content are displayed on two columns.
-
Bellow each category group, there is a link
Back to top(... of the page), to help the user to jump to the main navigation bar area. -
I chose to create another menu specific to this page only.
- This menu only contains internal links found on the same page, to the main categories from the list, which are: Coffees, Dishes, Cakes and Wines.
- Using this menu the navigation is quicker for the user, if he's interested in a specific product and is not interested to see other items.
- It is available at the bottom of the page too.
- Since using JS is not required for this project, I needed to find a way to change the text of a specific area, when the state changes. I found out that the
<details>element can help. So when this menu is collapsed, the user is asked to acces this menu by clicking the▶️ Click to open quick menu links:
Menu closed
- The user may choose to colapse the menu by clicking again `🔽 Click to close quick menu links` area.
Menu opened
- You may notice that the text content changes from "open" to "close". The
▶️ and 🔽 icons display the status of the `details` element. - In mobile and desktop view, this area keeps the same layout, by adapting its width to the viewport.
-
Bellow, there is a linked text which, on click, it downloads the complete Café's menu in PDf format.
-
The main content of this page is composed of four categories, each with a couple of cafe's menu items, grouped acordingly.
- Each category is delimited and begins with the header.
- Under the Header there are the items displayed in a column or two columns, depending on screen size.
- At the end of each category there is a "Back to top" link.
- Just before the Footer area, there is the same Quick Menu links displayed again, to ease users's navigation.
Small screen and larger screen layout preview:
The Gallery page has only one purpose: to showoff some pictures depincting the interior design of the cafe, staff, making coffees, etc.
- In mobile view there are two views:
- One column
Mobile view: width smaller than 672px
- Two columns
Mobile view: width between 673 and 992px
- One column
- Desktop or large screen view: images are displayed on a single column, at high resolution:
Desktop view: width more than 992px
- The Contact page is structured around a form, containing multiple fields, which the user may choose to fill. The user can make a request, ask a question, propose a recommandation, make a complain and also take part to a poll by votting his favorite coffee.
Mobile and Desktop preview
Mobile and Desktop view
- The footer is composed three sub-areas, as follows:
-
ADDRESS - contains a link with the Google Maps location of the Cafe shop. Accessing the link will offer you the posibility to ask for directions towards the shop. Depending on the device used, the behaviour differs: on mobile deviced it will open the Google Maps app and on desktop device it will open a new tab with Google Maps.
-
SOCIAL MEDIA LINK - linked icons to acces the social media pages of the café shop. On hover over these icons, they grow in size to
2rem. -
CONTACT US
- The EMAIL contains the
mailto:link, so if the user want's, by pressing on the e-mail address, the default email client is opened. TheSend toandCCsection are prefilled with the right email destinators addresses.Testing on a smartphone:
- The TEL section is also a link, which, while in mobile view, is enabled and proceeds to opening the phone number in calling screen, but if viewed on a desktop, the link is disabled. As described here:
tel: support is great across mobile clients, it can be unreliable on the desktop and in webmail clients.
Preview:
- The EMAIL contains the
-
- Font families used:
font-family: 'Lato', sans-serif;font-family: 'Montserrat', sans-serif;font-family: 'Merriweather', serif;
- The fonts were chose to offer a good visual impact, but mostly to promote readability. The text being easy readable, it is more likely that users reading the content they obtain the needed information quicly and understand the message.
Choosing the site's color theme was a bit tricky for me.
I have a Moderate Deutan colour blindness. This doesn't affect me in a manner where I could not see colours, as many people might believe when they hear "colour blindness". But it more related to colour sensivity. Is just that in some specific cases (low or crepuscular light, for example) I might not perceive colours as others. For this reason I needed help from someone else, so in some moments in the development of this project I had to ask for a second opinion.
Finally, the color theme I decided to use in this project is actually is based on the colors of a coffee bean and two other complemetary colors, to create a good contrast. So I primarly used an image of coffee beans. From that, using the tools available at coolors.co I extracted the main pallete colors. The extracted color nuances were too many, so I had to finnaly decide to which basic color I'll use. After, to create an acceptable contrast, I've used the generator so that I'll will give me colors to fit one each other.
As a result, the final contrast ratio is everywhere above 9:1. All contrast test were conducted on Color Contrast Accessibility Validator and WebAIM - Contrast Checker. The result can be consulted in the dedicated file.
-
#231a19- used mainly for text color. -
#552f1e- used for:- Main navigation menu links background when hovered.
- Landing page internal links hover effect
-
#883f22- used for active page in main navigation links -
#f5f7bb- used for hover text color change in links in main navigation bar and footer. -
#ece7e1- used for:- Header background.
- Main content background color in main page.
-
The arrows used in the Quick Menu categories list in Cafe's Menu page, are blue.
- The Accessibility score of 100 in Lightroom was obtained by using the recommended landmarks or *special regions, so that screen readers and other assistive technologies can jump to different sections of the site. These improve the overal navigation experience.
- Each page has distinctly separated areas. The main content area of each page contains the right landmarks and ARIA landmarks, such as
role,aria-label. - In mobile view the main navigation bar is hidden behind an icon. The icon has normally applied a bouncing effect, but to avoid vestibular motion triggers the animation is reduced (in media queries section of the css file), when the user has disabled such effects.
This section is described in its own file deployment.md
- To improve loading speeds, I've used *.webp image format (https://developers.google.com/speed/webp) and *.png and *.jpg formats. Every image is been proccesed with Adobe Photoshop -> Export -> Save to Web -> and used low or medium presets for image quality.
- Images from Gallery page were resized to 768px for the long side. This resolution is enough to display good images for
breakpoint-md: 768px. - Images used on Cafe's Menu page were resized to small format and low quality, so it won't affect performance.
- The performance of the site was tested using the Lighthouse tool. The results were negatively influenced by two aspects (
links not crawableandpre-connect), for which I did not find a solution to fit my needs. This aspect is described more detailed in testing.md page file.
Along the development I encountered different issues. Some of them were fixed, for other I found a way around of just used a better solution.
-
When resizing the browser window to mobile view, at the left of the browser can be seen the hidden navigation bar transition effect.
-
Contact Page legend text centering: an issue I had was centering the legend element, which wasn't easy achievable through CSS, because of the cross browsers incompatibility. There, an in-line property solved it (https://www.geeksforgeeks.org/html-legend-align-attribute/). Issues discussed HERE
-
I could not find a FontAwesome icon for Tripadvisor. Issue is discussed HERE
-
While site was deployed on github Pages, the images on the site wouldn't load. Found out that I have to remove the '/' from the relative links. Example:
<src="/assets/imgs/coffees/image.jpeg>-> in this format the images wouldn't load, so I had to remove the backslash before the 'assets' folder. Found this through the Developer's Tools in Chrome. In VS Code having the/won't affect loading, but on GitHub alt-text is being shown. -
I couldn't use Extended Syntax for Markdown documents, as while I was trying to use Footnotes, for example, it wasn't rendered in my GitHub repository. Therefore I had to use links inside the content to credit the extracted ideas from the respective sources.
-
Wasn't able to use emoji in this document, because on preview they weren't rendered ar icons, but plain text.
-
Hover effects won't work properly on touch mobile devices (which are using a touch screen), so a media query for that has to be implemented.
-
The navigation menu, while in mobile view, is displayed OVER the content of the page. So opening the menu in mobile view, the actual content below the header won't go lower to make place for the menu items. I didn't want to use JS and/or Boostrap, so this was an acceptable compromise I had to accept for the purpose of this project.
-
While validating I had an error
End tag nav seen, but there were open elements.
Unclosed element ul.
but couldn't find any opened or unclosed elements. These errors dissapeared after I corrected some other errors.
- Header layout and effects
- Content flexbox cards
- Customize the details element containing the internal links to menu categories
- HR element styling
- Cafe Menu Quick Menu links with details & summary elements
- Coffee Types List
- Things All Restaurant Website Designs Need to Include: as highlithed in this article, having some specific sections on your restaurand (cafe in our case), improves a lot the customer experience and the chances of attracting new customers raises.
- Initiating Voice Calls from HTML Email Newsletters
- Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects.
- Using ARIA Landmarks
- Site structuring
- Mental model
- Font accessibility
- The Elements of User Experience, Second Edition: User-Centered Design for the Web and Beyond - Jesse James Garrett
- UX Design using the Five Planes Method
- The Five Elements of UX
- UX UI 5 Planes Overview
- User needs vs User stories
- Logo was created using Logo Maker Pro on Android
- Images used for Cafe Menu product list are all credited in the code, but also in this list:
- Coffees:
- Dishes
- Cakes
- Wines:
- Images used in Gallery page are my own, made with my dSLR, and processed with Photoshop.
- Code Validation:
- Accessibility Validation:
- Tools used:
- GitHub Flavored Markdown Spec
- Code Institute student template for Gitpod
Before finishing this project I would like to say a big "thank you!" to all of you who helped me in working on this project. Firstly, to my family who supported me all along in every aspect, especialy in being absent at some important moments, because I had to study. Of course, nothing would have been possible without everyting Code Institue offered through this course and its wonderful Slack community. Since I am officialy taking this course at City of Bristol College, a big thanks to my tutors, Pasquale F. and Ben Smith for every step they've been with me through the learning process. And last but not least, to my mentor, Adegbenga Adeye, whose insights were always very helpful and helped me shape this project.