Small business website design note
In terms of the design of my project ,I want to begin with my choice of colours. I used pale colours for the entire website because I wanted to keep my soft and friendly tone. For the body I used the colour #efe3cb which is a yellowish colour, my thought behind this choice of colour is that whenever you think about cheese the first colours that come to your mind are yellow and cream/white. So, I combined yellow and white and came up with a pale yellow colour for the body. Moreover, to have a contrast between my body and my contents container I used a more creamy colour for div elements. In addition to that, I used the colour #8BAA94 that represents freshness and nature because I wanted to reflect the organic farm connection. I used this greenish colour for the website’s navigation bar as well as the box shadows that some elements such as headings and img (Our Team) have. Last but not least, my texts have a dark brownish colour which in my opinion adds warmth and authenticity.
Talking about my choice of font, I chose “Kurale” Which is a cursive font to some extent for my heading, it adds more softness to my designs. Then, I have “Playpen Sans” for the other text elements. This font is a similar font to the font that I chose for my headings so the harmony is maintained. Also, this is a website for a small business not a brand or a big company so I chose to have a friendly tone throughout the website which affected my choice of colours as well as fonts. That is another reason why I chose these two fonts that are easily readable and entertaining at the same time.
In terms of the visual experience, there are again two images one a woman making hand-made cheeses and the other a cheese shop on the first page to help build a strong story about the business. The images that I chose for the team members are all taken in a farm to again create this feeling for the costumers that all the products are organic and hand-made by the family members. Also, I gave these photos a border radius of 50% to have circle photos which look like profile pictures.
I started my designing for the mobile responsive mode first, that is why I only had to add a few media queries to just control the font size and the width of my contents containers as the viewport gets wider. Having said that, I decided to use grids for my footer when the view port gets wider than 800px, if I did not add the grids there would be a lot of empty space in the footer.