Although I was happy with the first version of Botticelli I knew there were some visual design things that could be improved by using the new skills I’ve been learning during my Content Management lessons.
Improvements
Here is a list of the improvements that I implemented to the site of Botticelli.
Responsive Design
Botticelli’s site was improved using a mobile-first layout as it is now a responsive design that users can see nicely on different screen sizes. Therefore the site is suitable for a different range of devices.
Visual Design
Colour Palette – Botticelli’s site lacked personality as the colour palette was flat. Therefore, the brick-red was kept, but a bit brighter (#510d0a instead of #7a331e) and hints of a bright colour was added to make the site look more vivid (#1b52d1).
Also, the background colour of the body was changed to a lighter colour, and the brownish background was removed because I considered it unnecessary as it did not complement the visual design.
Typography – A more variety of typography needed to be added to improve the user experience. I added two more fonts, “Bebas Neue” and “Lobster”, to highlight the headings and make the information more appealing.
Logo – Even though I am not 100% happy with the logo, I think it is an improvement from the previous version, as the brand is more memorable now than before; the bits of blue complement the colours of the site.
Layout – The layout was kept the same, but the header’s navigation was improved by simplifying its look and adding the bright blue to the hover. Also, placing the logo on the top instead of it being part of the header’s navigation is a good way to make the brand stand out on the site.
Modularity
I used PHP to create server-side includes for the header and footer as these were the site’s common elements. This step was very important as it makes content management easier and faster, helping me keep consistency through all the pages with not too much effort.
Also, I used PHP to add the copyright date updated at all time.
UX Features
The site did not include a custom error page, therefore customising a 404 page was very important as it can be used as a user experience tool. The 404-page was created with the site’s style for consistency, and a short paragraph was included where the user can find two useful links so they can keep navigating the site.
Behavioural layer
I added a bit of JavaScript to increase the richness of experience of the user. After the header, a short sentence can be seen where the shop let the users know if they are currently open or closed based on their opening times.
Accessibility
Special considerations such as users with complete blindness are essential as screen readers are among the most common aids for web surfing. Therefore, using Landmark Roles was important to make the site more accessible. Some of the Landmark Roles included are Banner, Main and Navigation.
Conclusion
Personally, I think the page has improved greatly by doing the changes mentioned above. Still, there were some other things that I wanted to improve a bit more as well, such as using PHP to create a CMS for the blog of the website, but because of the lack of time, it was not possible (Although, I’ll keep it in mind for practising).
The logo is not as good as I wanted it, but it’s a good improvement to what it was before, helping the brand be easier to remember.
Generally, I feel more confident now to create larger sites due to the knowledge obtained during the Content Management module.