The Gluten Free Garden 🍰

Welcome to The Gluten Free Garden. This site is aimed towards people who are coeliac, gluten inolerant or those who chose to have a gluten free diet. We have a wide target auidence inviting all ages. This site will provide you with some of your gluten free needs. Includng information, recipes and even some masterclasses to help you from your own home.

User Experience:

Project Goals:

The goal of this project is to provide information about being being gluten free. We offer users information about who we are, offer education on being gluten free, gluten free recipes and an option to sign up to our masterclass.

Target Audience Goals:

A website that is easy to navigate on mobile, tablet and desktop.
A website that is appealing and unique.
Understand who we are and our journey being gluten free.
Educate on what being gluten free means.
Follow our recipes easily from their own home.
Contact us to join our Masterclass and learn new recipes.

Site Owner Goals:

Educate and raise awareness about being gluten free.
Encourage users to sign up to our Masterclass to increase revenue.
Increase traffic on our social media accounts.
Have users using our own recipes at home.
Create loyal users.

User Stories:

As a site owner:
- I want a site that is user friendly and easy to navigate.
- I want users to understand who we are.
- I want users to have more information on being gluten free
- I want users to have gluten free recipes available to them.
- I want to be able to update recipes and facts regularly.
As a site user:
- I want to know about the site owner and what they have to offer.
- I want to be educated on being gluten free.
- I want to access recipes.
- I want to be able to make contact to be educated further.

User Requirements and Expectations:

A gluten free diet has become extremly popular in recent years. Users need easy access to educate them on what this means and how to maintain a gluten free diet. Users will expect beneficial information within a small amount of content. To be provided with a great user experience and a site that is easily navigated.

Requirements:

Consume beneficial information on being gluten free and why.
Easily follow recipe recommendations.
A site that is easy to navigate and appealing.
A site that can be accessed on multiple devices.
Allow users ability to contact us for more information.
Access our social media accounts.

Expectations:

The site will not be overloaded with information and the information provided is beneficial.
Find out information about the site owner and they journey.
A navigation bar to easily access different sections of the site while giving you an insight on what to expect.
The site will be appealing with images to reflect the content.
To view simple and tasty recipes that can be implemented in a diet to help the journey of being gluten free.
To ensure contact is available.

Design Choices:

The design of the site needs to draw the user in to ensure they stay and view what we to offer. The colours need to be appealing with relevant images to compliment them. The content must not overload the user and be educational. The design will ensure the site is easily navigated which will result in users returning.

Fonts:

Roboto

I chose this font for the webste as it is easily readable and compliments the color scheme and content well.

Icons:

I have used icons from font-awsome. I used these for my social media links as they are visually appealing and simple.

Colours:

I chose the colours below because they suit the theme of the site, food and a garden. They compliment themselves, the content and the images well. The content is clearly readable and the site navigates well due to the colours. It increases the appeal of the wesbsite and UX.

Primary Colour: #fff - White, This colour was used for the nav bar, the logo, the landing text, the fun facts texts, form text and footer icons.
Secondary Colour #000 - Black, This colour was used for the about us text and the recipes text.
Tertiary Colour: #4d6472 - A Blue/Grey, This colour was used for the fun facts and form background colour.
Quaternary Colour: #9B6A6C - A Dusky Pink, This colour was used for the nav and footer background colour. It was also used under each h2.

Images:

The images i used on the website complimented the content and the colour. The images were in contrast with the theme of food and a garden. The images were sourced from Unsplash and Pexels, which are high quality and completely free stock photos.

Wireframes:

The wireframes were created in balsamiq. This helped me to plan the visual look of the website. I created wireframes for mobile, tablet and desktop.

Desktop Wireframe | Tablet Wireframe | Mobile Wireframe

Features:

Features that have been developed:

A navigation bar to easily access each section.
A find out more button to bring you to the about section of the website.
Induvidual section for the website.
A contact form to allow users to sign up to a Masterclass.
A footer with links to social media.

Features that will be implemented in the future:

Create a products page where users can browse available goods.
A shopping cart where users can purchase gluten free food cooked in The Gluten Free Garden.
A review section so users can leave their feedback on our recipes.
A "My Journey" section where users can talk about their own personal journey being gluten free and what tips or suggestions they may have to offer.

Planning and Testing:

Planning:

The planning began by sketching the website on paper and then led to creating the wireframes. Creating the wireframes really helped me plan this project. It layed out what I wanted to achieve and you could visually see what would work and what wouldn't work.

I started my project by creating the nav bar and the footer. I then continued onto each section seperatly using a check list to make sure I was making progress and not vering from the overall objectives.

A part of my planning was using coolors to chose the correct colour palette.

I used w3schools to help with the basic structute of my nav and footer.

Planning the content prooved to be relativly easy due to my experience being gluten free myself.

Feature Testing:

Testing

The testing carried out on this project was conducted using google chrome dev tools and basic user testing by myself to verify functionality.

I originally built this project to be on a desktop screen and then tablet and mobile. This was my first time attempting to build my own project and I heavily relied on dev tools to assist with the styling and media breakpoints.

The areas this project should be most visible on are as follows.

Iphone 5 s/e
Iphone 6/7/8
Iphone 6/7/8 plus
Iphone x
Ipad
Ipad pro
small laptop 1280x 802
24 inch screen - 1920 x 1080
1440p screen 2560 x 1440

All testing was validated when each feature was added to confirm the functionality had not changed after a significant piece of code or change was added.

The user testing that was conducted during the development of this project were as follows:

As a user who lands on the main page, I click a nav anchor link. I expect the navigation to bring me to where It says it will bring me. This test has passed as it brings me to the section related to each anchor tag.

As a user I click on the logo on the navbar. I expect something to happen, It does and it reloads the index.html page. This test passes.

As a user who is curious about the button on the landing page. I click it and I expect for something to happen. This test passes as the button brings me to a new section as expected.

As a user who wants to submit my details to the masterclass. I fill out the details and click submit, the page reloads and I asume it has taken my information. This test passes as it reloads the page and my details are no longer in the fields. This indicates to me something positive has happened.

As a user who wants to click the social media icons. I click the icons and I am brought to an external site as I would expect. This test has passed.

This project was validated using a HTML and CSS validator. An additional Lighthouse audit was conducted via chrome dev tools. This helped to improve best practices and performance.

You can find an image to the html validation conducted Here

You can also find the css validation Here

Bugs

A bug that I spent some time on and difficult to resolve was within my form. The issue was within the input fields, when google chrome would prompt auto-fill, it would impact the background colour. I spent time attempting to debug this issue in dev tools with no resolution. I began to google this issue and found a potential solution on stack overflow. The styling that was needed was,

input:-webkit-autofill

input:-webkit-autofill:hover 

input:-webkit-autofill:focus

this resolved the issues when setting the box shadow to transparent.

During the process of making this application I ran into a number of issues that proved to be very difficult for me to resolve due to me being new to html and css.

The first major issue I ran into was with the Recipe section. I wanted to have the section spread out into 3 div's, Ingredients, image and then the steps. I used the love running project as a base to work off and began to highly modify the code to suit my needs, but I found it extremely difficult to perfectly contain all the content. There was a lot of overflow issues. In the end after spending a lot of time on this and being unable to resolve the issue, I reverted back to 3 divs containing each element, adding a container to the 3 divs and displaying them as flex. This gave me more control although it is still not perfect or how I had envisioned it. It fits the purpose and displays the information necessary.

Know Bugs

A current bug to highlight is the recipe section. It visually looks good however it is not entirely optimised. With more experience in the future I would expect it to be better.

References

The images used throughout the website are from https://unsplash.com/ and https://www.pexels.com/

Th recipes used within the recipes section are from https://www.bbcgoodfood.com/

The icons used for the social media links are from https://fontawesome.com/

The colours used from the website are from https://coolors.co/

Acknowledgements

I would to say a big thank you to my mentor Gerry McBride, for his support and constant feedback throughout developing the website.

This project is for educational purposes only. It was created as a first milestone project for Code Institutes full stack web development course.

code-institute-submissions / the-gluten-free-garden Goto Github PK