Week Four: Thurs

Buddy Session

The feedback I received in my buddy session today was:

- The very first piece of information on the homepage has a button for people to click to grow their own herbs, but that takes them straight to the end of the website and they miss all the important information about food waste. I could have a couple of buttons on that first page, one that says "scroll to find out why this is important" and keep the "get growing" button. I just need to make sure that most people will be progressing through the website and not skipping through.

- I need a link at the bottom of each page to take the viewer to the next page I want them to see, otherwise the website has no flow and the viewer might be confused about where they should go next.

- Illustrations look simple/naive which is fine if everything else is smooth, perfect and professional. If not, the illustrations and the website can look juvenile and poorly put together. I need to focus in on all my spacing, paragraph widths, text alignments, and make sure everything is lined up with something else. I have also been using a grid with rows and columns but Tim said that usually web designers only use columns and manually adjust the spacing in between elements.

- Could bring the use of overrules into every page as this is a good way of demonstrating how wide the paragraph is.

How I have been using the grid with rows and columns.

Website

Benefits page:

Figuring out how to make this page more measured and aligned, as well as making the paragraph styles the same width as all the others. In the picture below, the paragraphs are 2 columns, rather than 3 columns.

Using an overrule to show that the paragraphs are 3 columns wide. It looks really squished and close to the edge on the right as well as all the other paragraphs. I also changed the opacity of the background colour to make it even lighter. This has changed on all pages.

Going back to 2 column width as I couldn't make the 3 column work. Now trying to get all the illustrations in order and alignment. Using a box to anchor them.

Though the outline on this box was too light so tried filling the box in.

I think the outline was better than block colour boxes, I tried a thicker outline and I'm reasonably happy with the result.

How the illustrations look now that they have been centered within the box.

Growing basil page:

I worked on this page before I changed the background colour, but now it is just as light as the images above. I did this so that the information was more clear, and there was more contrast between the background and the text. This is important for readability.

The first image is the yet unchanged page that I'm working on.

First things first I tried overrules, seeing as I had them integrated on all my other pages. I tried an overrule on each new step (this idea I definitely sourced from how we were making calendars like this in typographic systems).

The overrule didn't work on all paragraphs, so I tried it on just the top one.

I also put rules on both of these lists down the bottom of the page. As well as this I bolded the first line, seeing as I had done the same on all my other pages. Writing this out I have just realised that I haven't bolded the first line in the text above. I need to do that. Actually I haven't done that either in the benefits page!

Here I implemented buttons to take you to the next page and the previous page. I borrowed this idea from many websites I have visited in the past, specifically blog sites. It seems that bloggers like to use this idea as a way for people to keep reading what they have to say, but I think it works here. I will get feedback on this though as I have a feeling that Tim/Andre will think that it's not obvious enough and I should implement the button further up the page or something.

I used the same template from the homepage to design this button.

Home page:

I haven't changed much on the home page, apart from rewording the paragraph below 'herb yourself' to include that growing herbs helps the food waste issue. I also haven't figured out the perfect phrase for the button. I basically want it to say 'discover why this is important' or 'learn about this'. So far I've got 'find out more' but I definitely want to change this.

News page:

Now I am trying to figure out how I want my news page to look. The images supplied are photos and I'm not quite sure how to approach this. I could use them but then this page might feel disjointed from the others as none of the others have photos. Or I could illustrate the photos but I have no idea if this would work.

I am also tossing up between different layouts. I want the vertical, 3 column layout to work as I have used this on two pages already, but the horizontal layout is much easier to read. The downside is I haven't used this layout before though, and with photos added on top, this page won't feel like it belongs at all! I will have to keep playing and hopefully find a happy middle place.