OUGD504 - Studio Brief 2 - Initial Digital Eco Design

Experimentation with Eco Design Idea

Common colours that are seen on a variety of books about both upcycling and recycling, were used within the design to evoke a sense of environment and eco friendliness. 

The use of the typeface for the logotype creates a sense of friendliness and reflects the cyclical nature of upcycling through geometrically rounded counters, curved finnials and the use of all lowercase letters. The use of this colour scheme will be familar to the user making the the subject matter of the website clear.

After producing the wireframes for the different aspects of the design this grid system of 3 x 5, to reflect the 5 stages of waste hierarchy and the 3 R's (Reduce, Recycle, Reuse) was transferred over to a web document. When this was adapted to fit the artboard it was found that the grid system had been elongated which didn't look right. To counteract this a border on either side was created and the grid system was created within this area. This brought the whole design inwards and allowed it to be in proportion as well as creating a sense of space around the design. Also instead of having 3 x 5 images on the screen as shown in the wireframes which would not fit on the current grid system, this was adjsuted to reduce the amount of images but still allow for the positioning of five rows and three columns of content. This would allow all the elements to be placed within the homescreen without the need for scrolling through information. The five areas of content included the title and buttons at the top, the search bar, the category bar, call to action banner,  trending ideas and trending products. 

Instead of having a box of trending idea tags it was considered that these could be change to products and the hashtag that had been used for them e.g wood image with #woodworking. This would create another layer of interactive imagery and make it cohesive with the featured product section making the design homepage look more visually engaging.

Initially all the images were center allingned within the grid system which created space on either side of them. Having the background to the trending sections as a whole bar made the images look to spaced out and part of the same section.

By adding boxes for each listing this separated the information up making it clear they were different listings and creating a boundary for text. 

Working within smaller areas for the listings made it easier to place the imagery and text for each listing. 

Having a lighter colour for the background allows the other elements within the site to stand out better. If using a darker background then the boxes could be lighter to create better contrast, making the images pop more. Allowing the images to sit on the green background, although minimalist and contemporary does not allow the images to be shown off and may create too much negative space.

It was said in feedback that having circular images could be an interesting way of presenting the images and make it different from other websites, whilst linking well to the cyclical nature of upcycling. When the images were circular this meant a lot of the imagery was cropped away, which was effective in creating interesting textures however not useful for the viewer to get a sense of the product. Perhaps if this was to be used the images could be made larger when clicked on to allow the whole image to be seen. In order to place text alongside the circular imagery within the box this would mean the image would have to be left or right aligned to allow space for the text. 

Adding a light grey colour around the boxes created a shadow effect that elevated them from the background. Within feedback it was suggested that the corners of images could be rounded slightly to create a curved appearance whilst still allowing the images to be fully visible.  

Using the curved edged idea this was used to create some designs for the pop up screens within the design. Varying sized boxes would have to be made as some parts of the website have more information within them. The use of the boxes creates a frame for the rest of the elements to fit within and forces the design to be as simple as possible, which is what is wanted to enable the site to be easy to use for the user. The use of the pop up boxes means that the user can easily navigate back to the main pages within the site and not get confused as to where they are. It was considered that the image section within the listing could show parts of the next images, however this was found to look to busy and not fit with the clean and simple idea of the rest of the design. The use of curved buttons to scroll through the images allows fro consistency within the design and the opacity allows the element to use the same colour scheme however in a subtler way.

To create contrast within the pop ups as well as creating a clean and fresh feel to the design, white was used for the text boxes. Making the text white aswell allowed the writing to be legible on the coloured background at different scales. The 'X' was made to be rounded to tie in with the box shapes. To create distinction between text areas and where images can be uploaded  it was considered using a muted green to make these different types of content visually different. Outlining the image boxes was too subtle and did not make it obvious that they were to be filled whereas a filled box suggests that something needs to be put within it and defines the area better. 

Overall the use of rounded corners within this design is effective in creating a friendly feel to the site. Also the rounding of imagery is more practical than the circular imagery because of more of the image is available for the user to see making it easier to browse and find what they are looking for. The overall colour scheme for this design however I feel is potentially a little obvious and cliche for the subject however this does allow the use of the website to be clear and recognisable for users. The use of the typeface with open counters and curved finials creates a colloquial and friendly feel to the site however looks a little childish which possibly is not suitable for the target audience of designers and creatives.