This is a website for selling some local honey.
This website is made up of the following sections:
- Home
- Company values section
- Types of pollen in differet honeys
- Social media links section
The business goals for this website are:
- Sell honey
- Inform users of local businesses, and to promote local business
- Inform users of importance of bees in environment
- Improve the reach of the company
The user goals of this website are:
- As a first-time visitor, I want to find out about natural products in my area
- As a first-time visitor, I want to find out more about local businesses in my area
- As a first-time visitor, I want to be informed about how integral bees are to the environment
- As a recurring or first-time visitor, I want to find recommendations from a trusted source for other local natural products
Considering the core UX principles I first started to think about the strategy for this website and defined who the target users would be and what features/technologies they would want.
The Village Apiary's target users are:
- People who like honey
- People interested in shopping local
- People from the same area as the Village Apiary
What these users would be looking for:
- A local source of honey in the local area
- Information about the different types of honey stocked by the Village Apiary
- Recommendations for where else to shop local
- Recommendations for honey recipes and more honey and bee information
This website will offer all of these things whilst also allowing for intuitive navigation and comfortability of use.
As mobile phones are now often the most common computer that the average user has access to, it is important that the website is responsive in it's design.
In order to achieve the desired user & business goals, the following features will be included in this release:
- Header and menu bar, to navigate to various sections of the page
- Information section about the different types of pollen that are in the different honeys
The website is single-paged as the content is simple and not extensive. The navigation bar at the top allows for easy navigation. The flow of the web page goes from Home > Values > Types of pollen > social media links. This way of structuring the flow of the site seemed to make the most sese, for introducing the small local company, and then the different types of honey it sells. I have included different images to llustrate teh different sections of the website well. I have styled and positioned the different written sections for a clear and concise feel to the website and the information it gives.
I decided that browns and blacks would suit the honey website and would be evocative of the deeper shades that can appear in honey in certain lights. It would be ideal that the user associates the feel of the website with the smooth texture and deep colours of honey. I also tried to include some nice airy nature-focused images in order to better communicate the message of caring about nature and the local ecosystems. I have used a clear white to allow the logo and menu to stand out from the honeycomb hero image used in the header. This allows for a good contrast and a professional look, while maintaining the deeper colour tones associated with honey.
I used both the Google fonts 'Zeyada' and 'Roboto Mono' throughout the website. I thought 'Zeyada' was a simple, approachable font that was slightly relaxed and personal, yet still looked crisp and professional, especially in the black on a white background. 'Roboto Mono' is a nice clear font that capitalizes well, and is good for clearly conveying information and simple reading also.
This is a fully responsive website that is compatable with both desktop and mobile viewing. The page is divided into the four sections. It is possible to jump to each of these setions uing the navbar. A black background seemed like a good choice for a good crisp contrast against white, to break up the webpage. The logo appears in 'Zeyada', while the navigational menu is in capitalized 'Roboto Mono', along with the other headings and for any text that can be immediately noticed/scanned while travellling down the webpage. The paragraohs od text were in normal-cased 'Roboto-Mono'. This is the consistent style maintained throughout the webpage so the overall design fits together.
The navbar appears in the top right hand side of the webpage, on a white background the flows in from the side across the honeycomb background. The honeycomb fits the theme of the apiary and honey bees, and indicates the website's colour-palette from the start.
I have used several technologies that have enabled this design to work:
- HTML
- Used as reference for wiritng and structuring the project.
- CSS
- Used as reference for styling the web content throughout the project.
- Google Fonts
- Used to obtain the fonts linked in the header, fonts used were Zeyada and Roboto Mono
- Font Awesome
- Used to supply the social media icons used in the footer.
- GitHub
- Used to store code for the project after being pushed.
- Gitpod
- Used as the development environment.
- [Colours] (https://csscolor.ru/hex/ffd700)
- Used for selecting colours and getting the hex value for the corresponding colour
- W3C Markup Validation Service
- Used to validate all HTML code written and used in this webpage.
- W3C CSS Validation Service
- Used to validate all CSS code written and used in this webpage.
- Freeformatter CSS Beautify
- Used to accurately format my CSS code.
- Freeformatter HTML Formatter
- Used to accurately format my HTML code.
-
**As a first-time visitor, I want to easily find **
-
**As a first-time visitor, I want to **
-
**As a first-time visitor, I want to find **
-
**As a recurring or first-time visitor, I want to find **
-
**As a recurring or first-time visitor, **
-
**As a first-time user, **
Lighthouse is a feature of Google Chrome developer tools and is used to assess the performance of the website and its features.
As part of my testing I wanted to ensure that all of my clickable links worked & opened up in a new page.
I deployed this website by using GitPages and following the below steps:
GitHub pages deployment
- Log in to GitHub
- In your Repository section, select the project repository that you want to deploy
- In the menu located at the top of this section, click 'Settings'
- Select 'Pages' on the left-hand menu - this is around halfway down
- In the source section, select branch 'Master' and save
- The page is then given a site URL which you will see above the source section, it will look like the following:
Please note it can take a while for this link to become fully active.
Forking the GitHub Repository
If you want to make changes to your repository without affecting it, you can make a copy of it by 'Forking' it. This ensures your original repository remains unchanged.
- Find the relevant GitHub repository
- In the top right corner of the page, click the Fork button (under your account)
- Your repository has now been 'Forked' and you have a copy to work on
Cloning the GitHub Repository
Cloning your repository will allow you to download a local version of the repository to be worked on. Cloning can also be a great way to backup your work.
- Find the relevant GitHub repository
- Press the arrow on the Code button
- Copy the link that is shown in the drop-down
- Now open Gitpod & select the directory location where you would like the clone created
- In the terminal type 'git clone' & then paste the link you copied in GitHub
- Press enter and your local clone will be created.
I have used a number of resources to produce this website, where code has been used found from another sourceI have also credited it below.
The following websites/articles were used for research and guidance:
-
[Social Media links] (https://fr00tbat.github.io/love-running/)
- I used the code for social media links from this project
The below websites were used for the content:
-
I wrote most of the content but I used
-
images
I would like to thank my course mentor Harry Dhillon and Daisy Gunn for her clear README which I used as a rough guide to write my own.
I rewrote the whole thing because I realised I had meant to make more commits, but now I managed to delete it all before submission, so this is an earlier one that looks like it's a bit different now. I did try to change it. I'll try to revert the other one to before I made the last commit. It's too late to submit that now. I realise this one will look very plagiarised now from the love running project, so that wasn't intentional, but I understand you'll have to mark me down/fail me for it. Thanks.