When building my original website i began with the content first. I looked at several cognate websites for insipration. 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.
Once i had all my content, i began to code and design my site. My website was coded in HTML and CSS but one of there were issues with my code:
- One of my HTML pages was invalid
- It lacked semantic markup
- I had unused classes in my css
One of my pages being invalid and a lack of semantic markup can have an imapct on my SEO as search engines may have trouble understanding the structure and content of my page due to improper markup. It also has implications for accessibility as assistive technologies, like screen readers, rely on well-structured HTML to convey the content accurately. Invalid HTML can break the accessibility of the page for users with disabilities. The unused classes has an imapct on my the sustainability of my site as it can increase the file size and loading time.
For the design considerations, 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. I felt this choice softened the boldness and made the tone of the website feel more inviting. This was important was I am designing for a website for small business, that is family-run and located in a small town, not a big name brand. In hindsight i felt i couldve picked fonts that had a bit mor contrast to them, rather than fonts that too look similar.
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.
- 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.
Revisited Website:
When editing my code i started by reading through my HTML and identifying where changes needed to be made. I started by making my markup more semantic, this involved changing my divs for sections that had meaningful classes, which makes it easier for users who assitive technology. I also created two seperate navigation bars, one for mobile and one for larger screens. This was done as my last site had only one nav that was a hamburger menu for all screen sizes, this is not the best in terms of UX. I place a hamburger menu for screen less than 600px and added a horzitonal nav for screens over 600px. I also added margins and widths and more media queries around my sections and text to ensure the text remained readable as the screen size increased. A skip to main link and aria tags were also added to my site for accessibility and UX reaseons, e.g. aria-hidden was added to stop screen readers from reading out repeated classes to users.
For the design of my revisited version i decided to redo it as i felt i had learnt a lot over the months and i wanted an opportunity to showcase before the majot project. To plan my design i made an ‘mood board’ were by i put together images of websites and posters that i liked the design of and wanted to recreate. For the images i went on behance and pinterest, i mainly focused cheese and general food websites and posters to get an idea of what i would want the site to look like. This is the board i created:
For the typography of my site i used Inter tight for heading font, Montserrat for the body text and Source Serif for the keywords. This was because i wanted the site to have a clean, modern yet approachable feel. I wanted my heading text to be large and bold but readable, hence why i chose inter as it does not distort the text, even at bigger font weights. For the colour scheme i used a bright orange for the heading and some UI components, a soft black for the body text, and and ivory for the background. I used orange as it reminded me of the colour of cheese and passed accesibility testing for large fonts on the colour contrast app. However, it didn’t pass for smaller text so i opted for a soft black to meet accessibility requirements. For my images, i changed my formats from jpg and png to svgs for the hero and header section for better scalability, png for the product section for transparent backgrounds and webp for my about, events and offers section for better performance.