Categories
Design For Web Content

Small Business Website Report

Content Planning:

When I was creating my small business website, I looked at several cheese websites. This gave me ideas for the content I needed and how to organise it. After that, I outlined the project goal: to create a website to boost awareness and improve trade. I also listed ways to achieve this. From this, I created and categorised all my content and included it all in a word document.

Design Considerations:

  • Visual Style:
    • Typography:
      • I used Serif fonts on the website. For headings, I chose Adobe Garamond Pro. For paragraphs and list items, I used Le-Monde Livre Classic Byol. I picked Adobe Garamond Pro. It fits professional settings and gives the website a sophisticated feel. I combined it with Le-Monde Livre Classic Byol. This choice softened the boldness and made the tone of the website feel more inviting. This was important as I am designing for a website for small business, that is family-run and located in a small town, not a big name brand.
    • Colour Scheme & Logo:
      • I wanted the website to feel rustic but upscale. So, I chose two colours for the scheme: pale yellow (#f6e8ac) and dark red (#560102). I chose the yellow because it is often associated with happiness, and to mimic the colour of cheese. I paired it with the red to make the logo stand out. When I started styling the website, I added a light cream (#f6e8ac35) for the background colour to create a separatation between the high contrast colours.
      • For the logo, I used the pale yellow for the background colour and dark red for the font. I shaped the business name into an arch, but I changed it due to concerns about its readability. I made a cheese icon to fit the space in the arch. However, in the final product i placed it on top of the heading.
Draft Colour Scheme and Logo
Final Colour Scheme and Logo
  • Imagery:
    • For the images on the home, our story, offers and events webpages, I kept the dark red and yellow for consistency and to create a stronger brand image. For the our team and our selection web pages I wanted the pictures to look professional but still warm and welcoming. I used AI to generate images that were taken in a cheese shop with low contrast colours to achieve this.
  • User Experience & Accessibility:
    • When styling the website i used a mobile first approach starting at 300px wide, and added media queries at a min-width of 600px, 900px and 1200px to adjust the size of images and text. I also add media queries and a max-width at 280px and 390 px to addjust the sizing of the logo and menu toggle.
    • For the navigation I wanted to create a slide out menu to give user the option to open and close the menu as they please. I made the background slightly transparent so they could still see the content if the menu was opened. For accessibilty, I added a border and box shadow around the menu and X toogles to make it clear to users who are using anything other than a mouse to navigate that the menu and X icons have been checked.

Leave a Reply

Your email address will not be published. Required fields are marked *