OUAN503 - UCC Coffee, Website Design

The design for the website fell into place quite easily as it was based on the other promotional material and packaging that had been made up to this point. Again, the typeface I had made was used for titles and for any font that needed to be added. Overall I wanted to keep the webpage design simple and elegant, using photographs I had taken and imagery from this project as itself as the background of pages, whilst containing information as necessary. I'm essentially replicating quite a generic website layout from what I've seen online. But I think this kind of elegant and simplistic layout looks the best, and quite importantly makes it easier for an audience to view what they need to view and navigate around with website with ease. Below is a basic layout that I planned on a whiteboard detailing the location of important items such as menus, banners and essentially the main sections of the site. From this I could then take the format and replicate it with the different pieces I've worked on such as the logo and text. I also wanted to include arrows so that users can scroll to the left or right and view high quality images that represent the brands ethos and ways of working. Mapping everything out like this really helped me when I was designing the layout on photoshop as you essentially gather a sense of how everything will work when it's implemented and the amount of space you'll have. Also, since this was for a webpage the dimensions of the design would have to be 1920x1080, the size of a standard screen. Once you know the ratio, everything else becomes fairly easy to estimate and design around. From the plan I laid out I knew where things like arrows, photographs, text, buttons and other important aspects of the design would be, and if I needed anything to change or move I could simply erase it and redraw what I needed. This is an advantage of designing something such as a webpage on a whiteboard, it can be rough and changed at a moments notice - this was something I hadn't done before but made the process of designing the webpage layout a lot easier than it would have been otherwise in the early planning stage.



The home page if the website is the best example of my initial planning and design put into practice. It's a very simply layout with obvious navigation but also holds a certain level of visual appeal due to the high quality images or photographs that take up the middle of the screen. I included various brand slogans or important sections of text over the top of the photographs so that additional information representative of the brand is on show all the time with the photographs. It's a small detail but I think it adds to the clean and direct approach the website takes. I like that I was able to utilise the type face I created again with the website, keeping a consistent style through all of the products I made, from logo to packaging and the brands website too. I wanted to keep the number of webpages in the website as low as I could, to do this everything had to be concise and information that people would have been looking for should be available. In total I designed four pages to cover all of the different aspects of the brand. Aside from the home page, there is a page 'about' the company, a 'contact' page and finally, a 'products' page. I felt like this covered everything that customers and other visitors to the site would need.

As an additional idea, I thought it would be good to have the promotional video I'm creating on the about page. I plan to make the video focus on the story behind the brand the types of work they promote in a sustainable and responsible way. It also talks about the process from where the coffee is sourced to when its served through images and text - so this would be quite a good addition to the about page. Finally, I wanted to see the pages I'd made presented in a professional way by adding a web browser template and also a Macbook template so it can be viewed as if it was on screen. This adds to the presentation but it also has the advantage of giving me an idea of what it will look like on the screens of people that visit the site. The templates were easy to find, and free online so there was no real trouble in creating them. The web browser is also a vector version of safari, so it can be scaled up to fit any size template that's needed.

Overall I'm pleased that I was able to carry the designs, colour schemes and overall aesthetic that I had created to this point on to the web pages. I was also able to keep them simplistic and stick to the original plan I drew up regarding layout. I would have liked to use better quality imagery for the products and about pages instead of recycling images of the packaging. This is the first time I've done web design and looked into webpages but I think it was quite successful overall as I paid attention to the dimensions and made sure to include things like the scroll bar to make sure the design would work in practice and remain functional.