Rationale

Link to Figma Prototype:
https://www.figma.com/file/aVW4Eyxjx3gi4SQBCqTwLz/Website_VCD?node-id=182%3A0

Rationale:

My topic approached the food waste and sustainability issue of climate change by teaching university students how to grow their own herbs to minimise herb waste. I wanted to convey that it is a small easy step which anyone can do, while also making sure that they knew that this actually does make a difference. The visual language used wants to inspire the reader into action with language such as "let's go", "get involved" and  "start your garden". I used simple illustrations and only two colours (as well as tints) throughout the site to keep the information clear and easy to follow. I know that my target audience doesn't want to read so I kept the text on each page as short as possible while still saying what it needs to say. I learned that sometimes I try to work with a style that is not necessarily my strength because I think it would be best for the assignment, or because I have an idea in my mind, my very first illustrations in this instance. In the future I will spend less time trying to do something I've seen other designers do and stick to my own style, which is what I did in the end.

Week Six: Mon

Website Changes

I was trying to fix up the apple core illustration here. I went through a couple of different versions and eventually settled on the hand. Because I had the hand here too now I felt I needed to make sure each page had the hand doing something next to the title to make it the same and cohesive.

As you can see here, the benefits page was the last page I didn't have a hand on so I put this in as well as fixing up the globe to show New Zealand.

On my benefits page on mobile I had to figure out how I wanted the layout to look. I almost decided to have each different box on it's own line but felt like the user didn't want to be scrolling forever, so I put two boxes on each line.

This meant sometimes I had an odd number.

I fixed this by moving it to the right and adding a little illustration.

Deciding whether to have two lines for this title or not. Decided to keep it at one line.

Put all the instructions for how to grow basil in one heap but didn't know where to put the illustrations. Thought about removing then altogether on the mobile site.

Put the illustrations underneath each step. I think this was a good idea because it also helps to break up the information and the illustrations were definitely necessary.

Feedback from today

The only part of my website I was still working on today was deciding if I should build a whole new page to link a recipe out to, or link the recipes out to existing blogs or sites. Klaus straight away pointed out to me that illustrations will never convey food as well as an image could, and he suggested I change these to photos because it makes someone want to click on them way more if they can almost smell it.

My concern was that if I changed these, the rest of the site would begin to look less cohesive as I don't use photos anywhere else apart from the events page. Klaus said it would be okay though, and I think I will do this as I agree 100% that the illustrations don't show the food in enough detail. Because of taking images from the web, I will link out to blog posts for my recipes too. Ideally I would make a whole new page and take all my own photos, but I just don't have time now and it's something to keep in mind for future projects. I do wish I had thought of that sooner!

You can see the instantaneous difference that having an image here has made. Immediately my eye is drawn towards the photo because of the colours and the vibrancy.

Photo by Eaters Collective on Unsplash

Planning on having this link out to this site https://lovingitvegan.com/vegan-pesto-pasta-pan-roasted-cherry-tomatoes/

Photo from recipe link https://minimalistbaker.com/1-hour-vegan-shepherds-pie/

Photo from recipe link https://www.veganricha.com/vegan-fresh-spring-rolls-with-peanut-sauce/

I got the photo from https://www.yummly.com/recipe/SAUTEED-KALE-AND-BUTTER-BEANS-1493106 

I'm going to leave the last three unlinked because you get the point.

https://nourishedkitchen.com/crispy-rosemary-roast-potatoes/

https://www.loveandlemons.com/guacamole-recipe/

I do think that this looks so much more appealing. I just hope it doesn't take away visual flow from my site, when my intent was to add it.

Week Five: Thurs

Starting on Mobile

Finding it tricky to work with a smaller canvas and change my layout, but I think it's easier to go from desktop to mobile instead of the other way around, because I have had to cull some illustrations already and I would have to create more if I was working on my desktop now.

Deciding on the layout of the footer. Found it was too sparse with just the 'about us' information but too dense with the social media information. I ended up just using the social media icons instead of writing out the names. 

Figuring out a drop down menu, making this look good is hard! Still playing with this. Not sure if I need to up my font size maybe.

Critique Feedback

- move 'herb yourself' up 20px on home page

- highlight which page you are on, on the top menu so users can orient themselves

- fill trolley in (up to me)

- move plants inline with text at bottom of home page, where I talk about basil pesto

- add more personality to plant pot images

- trees and apple core illustrations need refining

- don't need button on second page to go back to the home page

- on the globe, should I have New Zealand (up to me)

- illustrations need personality, makes images relatable not generic, kiwiana perhaps

- link recipe page out or design whole new page (up to me, but if I don't make a whole new page then my site won't feel as cohesive)

- say Aotearoa, make the site more about New Zealand

- for everyone: check that your colour contrast is readable - the image below is the contrast on my website

Desktop Changes

While looking through the websites in the dropbox, I came across something I really liked. This is Kerryn Owen's site, and I thought the way they laid out the sign up aspect really professional looking. I attempted to implement this in my website.

Week Five: Mon

Website

Texture

My website was looking a little plain and boring so I decided to have another go at finding a texture. I looked on unsplash again and found this one by Augustine Wong. I think this is absolutely perfect and it's exactly what I wanted! I put it behind the rectangle of colour and lowered the opacity to 15% to get the faint shadowy look. It definitely adds so much interest to my website immediately.

News/Events Page

I began to plan for a news page but I changed my mind, and made it an events page. This was mainly so there wasn't as much text on the overview page.

This was the layout I decided on, but I really felt like there was too much text and it was hard to read in the 2 column paragraphs.

Trying out the photograph in the layout. I feel like it doesn't really work because I have no other photographic elements in the rest of my site. I got the idea from typographic systems to try putting a duotone on the image to make it fit in more with the colours of the website.

Figuring out a layout for the page which the story/event expands to.

Putting the duotone on all my images. These images were sourced from the internet. I came up with the events separately and then found images that worked for them.

Working on an illustration to go next to the title.

Felt like the duotone images were just too much. Changed them back to their regular selves. This works way better as you can actually tell what the image is.

https://www.goodgraphics.co.nz/new-page-1

https://www.waterbourne.co.nz/blog/wellington-beach-clean-up-eastbourne

Photography

Because I was feeling like the event photos didn't match with anything, and that my illustrations were too boring, I decided to play around with some photographic elements. I grabbed a photo that I had taken a few weeks ago when I was thinking of using photography in my website, and made this into a duotone. I also cut around my hand so it was just my arm and the plant pot.

I felt like this was quite successful and I wanted a hand that was tightly grabbing something so I did the exact same thing to another photo I had taken of me holding a bunch of rosemary.

I'm pleased with how this turned out. I think it adds a second much needed graphic element to the site. I didn't actually realise I needed this until I used these arm photos and saw how much of a change it was. It's a breath of fresh air to see something different to simple, monotone vector images of pot plants!

Contact Page

I didn't feel like I really needed this page because of my big footer that has nearly all the contact information on it already, but I realised this was one of the compulsory pages. I made the social media icons by looking at what they were, finding out what font the facebook 'F' is (Lucida Grande on apple computers), and I also used the pen tool in Figma to trace the twitter bird because there was no way I would've got that right from sight.

Grow Page

I also added a start your garden page because I realised there was nowhere for people to go to learn to grow. My site jumped straight from the benefits of growing herbs, to growing basil and I was planning on having options for people to choose from, like oregano and mint. And besides, if I didn't have this page, it would be the basil at home site instead of herbs at home.

Recipe Page

I also changed the recipes page so that there is a sign up area where you can sign up to the mailing list to receive new recipes, otherwise there are only 6 that would be on the site at one time, mainly to push the point that this is not a cooking site but a site to learn to grow herbs. Cooking with them is just a great plus.

Last Steps

From here I needed to link everything together and I'm done. I'm sure I'll get some feedback of things to change in the critique on Thursday, but I'm really hoping that they will just be details as I don't think I have time to do a big change around this last in the assignment. I also need to start working on my mobile site, and then think about which page I'm going to code. 

My only issue with my site is that you can't actually submit your email in any of the places where it says you can, but I don't think this will matter. I couldn't figure out how to do that. 

I'm also wondering if I need to give credit to the person I got the texture background from, or any of the events page photos. I will ask this on Thursday, and hopefully they will be able to give me some idea of where that copyright credit should actually be found on the site.