Developed and designed as part of Milestone Project 1: User Centric Frontend Development module.
Please view the live project here
Mockup responsive image was created with Techsini.
This is a website for Amaris Chocolate, an existing small producer of handcrafted bean to bar dark chocolates from Croatia. Their chocolates are made with the high percentage of cocoa parts (70% or more). Bean to Bar chocolate production is a specific method of chocolate crafting practiced by chocolate makers that are involved at every stage of the process that the cacao bean goes through.
The main goal of the website is to build and promote Amaris Chocolate brand awareness, expand the existing market and to increase the sales.
Amaris Chocolate website was created as a Milestone Project 1 as a part of Diploma in Full Stack Software Development with Code Institute. The project is developed primarily using HTML and CSS programs, with a small amount of JavaScript implemented for additional functionality.
- As a site visitor, I would like to learn more about the company and what products the company offers.
- As a site visitor, I would like to easily navigate through the site and find what I'm looking for with an ease.
- As a site visitor, I would like to contact the company if I might have any enquires.
- As a site visitor, I would like to have an option to order the products the company offers.
- As a site visitor, I would like that the website is responsive on all screen sizes.
- As a site visitor, I would like to be able to easily find and navigate to the company's social media.
- As a business owner, I would like to have the website that is elegant, simple and easy to use.
- As a business owner, I want the website users to be able to find information about our company and products easily.
- As a business owner, I would like to expand our existing market.
- As a business owner, I would like for the users to have an option to order our handcrafted chocolates.
- As a business owner, I would like to increase the sales.
Amaris Chocolate website is designed to be effective, consistent and user friendly.
-
Interaction Design
- Consistent design will be used throughout the website to maintain a good UX.
- The simple navigation bar with effective jumbotron background image will make the website look elegant and attractive.
- The navigation links when hovered over will provide a visual indication to the site visitor what she/he is selecting.
- Animation effect will be used on some page headings to create more engaging website.
- Consistent color scheme will be used to let visitors focus on the chocolate and for increasing product sales.
-
Information Architecture (IA)
- The project was conceptualized to consist of a home page and equally important three sub-pages. This structure was used because it is simple and familiar to the site visitors and it is sufficient for most user cases.
- On the home page which consists of three main sections, the visitor will have a brief review of the entire webpage. From each section, the user can easily navigate to other sub-pages by clicking the button/s which are conveniently located at the centered bottom position of each home page section. In this way the user will never have to make more than three clicks to access the information she/he is looking for.
- The content is organized and categorized by importance from top to bottom (home page and sub-pages) and left to right (navigation).
The initial webpage layouts were sketched on the paper. Upon agreement of the layout and hierarchy, the wireframes were created in Balsamiq. Please view the wireframes for desktop, tablet and mobile screens on the following link: Amaris Chocolate wireframes.
-
I used three main colours for this project with the main focus on shades of dark brown colour to represent the feel of luxurious organic dark chocolate. According to the Color Psychology shades of brown (chocolate) evoke the sense of strength, warmth and comfort. Also, since the dark brown colour is represented in Amaris Chocolate's logo, the shades of dark brown were emphasized throughout the website.
-
A Caput Mortuum colour (#5C3324) was used for navigation and footer sections. Fot the text, I used Dark Sienna colour (#38160D) and for the headings, Black Bean colour (#411D13). For the background I used Linen (#F5E8E1) colour which I alternated with the white colour to create defined sections when scrolling through the website. Furthermore, the light background works well with the dark brown text due to its contrast.
-
For the buttons I used Coffee (#774936) colour and for the button hover effect I used Liver Chesnut (#916750) to indicate the user that the element is clickable and for the better appearance.
-
Coolors was used to create a colour palette.
-
I used two fonts throughout the project, Merriweather Sans and Merriweather. Both were used with
sans-seriffont as a fallback. Merriweather Sans was used for the navigation and main headings and Merriweather was used for the paragraph sections and footer. -
These fonts are used because of the excellent readability and appearance on screens of all sizes. These fonts were designed to be especially pleasant to read at very small sizes and both harmonize well with one another.
-
Both fonts were imported from Google Fonts.
-
For the website I used impactful images with chocolate and cocoa beans motives to promote Amaris Chocolate brand & products, to attract the user's attention and to try to influence the need to make a purchase.
-
I paid attention that the images match the captions and are labeled with keywords important to the website content to improve onsite SEO.
-
All images are sized and compressed for the best user experience.
- I used several icons to improve the website's UX from:
Amaris Chocolate is built to be fully responsive mobile-first website. This was primarily achieved by utilizing the Bootstrap's grid system. The website consists of four pages: 'home' (landing), 'our chocolate', 'our story' and 'contact us' page. All website pages have a fixed navbar and footer, with Back to top arrow button ('arrow 2 top') button which allows the user to easily navigate to the top of each page. Bellow I describe features in more details.
- Navigation bar
- The navigation bar is fixed on top on all website pages and it allows the users to easily navigate throughout the website.
- It is fully responsive, and it collapses to navbar-toggler-icon (hamburger menu) on medium and small devices.
- Responsive
- By using the mobile-first design, the website is built to be fully responsive.
- Jumbotron
- It is used with the background cover image and heading to gain instant user attention.
- Interactive
- Text animation added to 'our chocolate' and ' our story' page headers.
- Drop-down navbar on medium and small devices.
- Back to top arrow button appears on the lower right of the page when the user starts to scroll down a page.
- List of chocolate bars
- It allows users to learn about the company's products and have an option to order the same via contact form.
- Contact information
- Contact form allows users to contact the company and make an order by filling the provided form.
- Footer
- Allows users to contact the company via email or phone.
- Social media icons with links allow users to find more information about the company on social media.
- Creating 404 error page
- Contact form processing
- Website version in Croatian language
- Expand chocolate products selection
- Adding the payment methods to order products and collect the payment
- Subscription option
- HTML5 was used as the main language to complete the structure of the website.
- CSS3 was used to style the website.
- JavaScript was used to create 'Back To Top Arrow' button functionality.
- Bootstrap v.4.5. was used to create the navbar and contact form as well to make the website responsive.
- Favicon was used to create the favicon for the website.
- Font Awesome icons were used in footer section for design features and better user experience.
- Flaticon was used to download several icons for 'Our Chocolate' page.
- Google Fonts was used to import the fonts to the website.
- Balsamiq was used to create the wireframes for the website.
- CSS Tricks was used as a general source.
- W3School was used as a general source as well as to create 'Back to Top Arrow' button using JavaScript.
- Stackoverflow was used as a general source.
- GitHub was used for repository hosting and for storing the source code.
- Gitpod was used as the development environment for writing the code.
- Git was used as version control system to add, commit and push code to GitHub.
- Adobe Photoshop Express was used for resizing and cropping the images used on the website.
- Can I Use was used as a general resource.
- TinyJPG was used for compressing images while preserving transparency.
- Techsini was used to create the responsive mockup image.
- Shutterstock was used to download the images for the site.
- Unsplash was used to download the images for the site.
- Flaticon was used to download icons for the site.
- Animate.css was used as a source for adding CSS animation on headings.
- Coolors was used for colour palette used on the website.
- Google Chrome Developer Tools was used to test and debug the code.
- BrowserLing was used for cross-browser testing.
- CorelDRAW Graphics Suite 2020 was used to edit CDR files and convert them to JPG images.
- CSS Autoprefixe was used for adding CSS vendor prefixes.
- W3C Spell Checker was used to check the spelling of the webpage.
- W3C Markup Validation Service was used for Markup validation.
- W3C CSS Validation Service was used for CSS code validation.
- JavaScript validator was used for JavaScript code validation.
Testing process was written in a separate file. Please click here for the full testing process.
The project deployment to GitHub Pages is explained in the below steps:
-
Login into GitHub, locate and select Amaris Chocolate from the list of Repositories.
-
At the top of the Repository page, under the sub-headings, select "Settings" button.
-
Scroll down the page until you reach "GitHub Pages" section.
-
Under the "Source" sub-section, select "master" branch.
-
Click "Save" button.
-
The page will refresh. To locate the link to the published site, scroll down again to the "GitHub Pages" section. Your link will be highlighted in the green box per screenshot below.
- W3School was used:
- to create 'Back to Top Arrow' using JavaScript - credit was given in scroll.js file
- for Badge creation and placement - credit was given in style.css file
- as a general resource
- Animate.css was used for CSS animation of heading in 'Our Chocolate' and 'Our Story' pages.
- Coderwall was used for media queries for iPhone 5 - credit was given in style.css file.
- The logo was provided by the business owner
- Chocolate bars were provided by the business owner in CDR format
- dark-chocolate-amaris.jpg and owner-amaris-chocolate.jpg were provided by the business owner
- Jumbotron background image, credit: "Sea Wave/Shutterstock.com"
- cacao-pods.jpg was sourced from Unsplash
- superfoods-dark-chocolate.jpg was sourced from Unsplash
- dark-chocolate-on-paper.jpg, credit: "Aleksandrova Karina/Shutterstock.com"
- bean-to-bar-chocolate.jpg, credit: "beats1/Shutterstock.com"
- melanger-making-chocolate.jpg, credit: "Max4e Photo/Shutterstock.com"
- Social media icons were sourced from Font Awesome
- Icons on 'Our Chocolate' page were sourced from Flaticon
Below websites were used for a general layout inspiration:
- HOLY CACAO
- JOJO's
- The text for Our Chocolate was adapted from green to bar chocolate.
- My mentor, Mr. Spencer Barriball, for the helpful feedback and guidance.
- Code Institute for all course materials and ongoing support.
- Fellow Code Institute students for their feedback and suggestions.
- My family and friends for testing and useful feedback.
The information provided on this website is for educational purposes only.