Orange Wines from Friuli and Slovenia

Orange Wines is the final project of the Master of Arts in Web Design & Content Planning at the University of Greenwich.
The Web Thesis Project gave me the opportunity to research, develop and implement a live website as a practical illustration of the skills and ideas developed on the Master programme.
I chose to address this topic to raise awareness and promote abroad, in the United Kingdom, in particular, a product of excellence from my country and Slovenia, interviewing some producers.

Design

I started my design process by analysing related websites, and I found a vast number of inspirations. I went through websites of wineries, wine-magazines, especially the ones from the Collio region. I have also checked on in different social media platforms such as Pinterest and Instagram by searching related keywords. In the beginning, I struggled to build my brand identity and my design because I aimed to create something different from those. I immediately noticed the excessive use of the gold colour. I also notice the important role that images play, even though the websites I visited exaggerate with them.

The main design features for this project are:

  • Simple, clean design;
  • Design rich in images yet not overwhelmed by them;
  • Orange, Dark Green colours;
  • Animate and easy to read design.

Technologies

HTML5

This project uses ARIA rules where possible so that screen readers can read the content labels properly. It uses HTML5 tags that define the hierarchy of content and structure. I aim to follow the Web Content Accessibility Guidelines (WCAG) 2.1 from the World Wide Web Consortium (W3C) to the best of my knowledge and ability. The HTML code is 100% tested.

CSS3

I combined Flexbox and CSS Grids, two of the most powerful layout system available in CSS. In particular, I decided to use CSS Grids because it allows designing web pages without having to use floats and positioning. I also used AOS – Animate On Scroll library using CSS3, to make the website more fluid. The CSS code is 100% tested.

JavaScript

I decided to keep JavaScript and Jquery to the minimum in order not to slow down the website. I used Jquery to toggle the Hamburger Menu on mobile, and to animate the scroll down arrow on the HomePage.

Content Manager System

After some research, I decided to use Wordpress as a Content Manager System for this project, creating the theme from scratch. This allowed me to become familiar to PHP, some basic JavaScript and jQuery, to become efficient on knowing how setting up a site on localhost, install themes and plugins, access front and back-end files, create and edit WordPress core files.

Please, take a look at the full report.