Wednesday, May 27, 2020

Week Four: Wed

Website

I got my contact section sorted, and now it is a component which I am planning on having on each page.



Not so keen on the trash bag up here, I think I have a better place for it. Hmm but what should replace it? Apple core!



Repurposing trash bag to show the amount of money literally thrown away each year.


Thought about having a few other bags to show how this adds up over time but I think the message is clear enough as it is. The trash pile is just added clutter.


I really want to incorporate more humanism into everything and have some faces instead of just hands, but I haven't figured out a style that is right for this yet.


Benefits page. Decided to go with a simple layout so that it's more engaging to read rather than a boring list.



Grow basil page. I still need to add some links at the bottom where people can go for some recipes to make with their basil.





Tuesday, May 26, 2020

Week Four: Mon

Coding

Notes from lectures

Intro to Brackets

Quick edit - colour picker

<h1> top header
<h2> subheading
<head> important information that the viewer doesn't see
<body> all content in the browser window
<p> paragraph

block elements exist on their own

<em> emphasis in italics
<ul> unordered list
<li> list items
<ol> ordered list, number points 

tab to indent

<img has no end tag
src - attribute name
alt - attribute that provides information of an image for screen readers
<a> anchor element makes hyperlinks
href - attribute, set to page

put url in when linking to an external page

New Site:

1. Make a specific folder
2. Make a new document
3. Save document as html file
4. Call it index.html

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

Attach a stylesheet

<head>, <link href = "style" rel="stylesheet" type= "text/css"
no end tag

p{
color: red;
background-color: antique white;
font-family: sans-serif;
width: 400px;
}

rgba (200, 0, 200, 0.8)
a - this allows transparency to change
0.8 - this means 80% transparent

font-family: Helvetica, Arial, sans-serif;
pay attention to capitalisation
"Times new roman"

text-transform: uppercase;
- capitalisation
letter-spacing: 5px;
- tracking
font-weight: bold;
font-style: italic;

CSS Box Model
describes how much space the text takes up on the page

change size of the content area using width and height
use overflow: scroll, to stop text spilling out

- content
- padding
- border
- margin

work outside in, beginning with <div>

margin: 0 auto;
- centered on the page

nested selector
p a {}

text-decoration: none
- removes underline

li a: hover{
background-colour: yellow;
}

images
- positioning moves image around
- float moves text around the image
- clear to override float

Helpful Websites

Adobe Edge Web Fonts
- this allows anyone to see the font, follow the instructions on the website to add code into html and css pages
w3schools
MDM

The State of Interaction Design

Interactivity is not the goal. It is a means to an end.

used
usuable
useful

Responsive design means designing for all devices.

/* comment */ (command + forward slash)

Coding Exercise

Coding the page from Tim's website.




Website 

I started having a go at making my illustrations in Adobe Illustrator but I actually prefer to work straight on figma with the pen tool there because I don't have files to transfer and it somehow just takes me less time.

The first image is using an illustration I made in Illustrator, but I didn't know how to change the colour of the trolley so it was black and obviously didn't match. Therefore I re did it in figma using the right colours and the second attempt was much better.







This is my homepage so far. I'm pretty happy with it but my next steps are the contact element at the bottom and I would also like to add a human element to the basil pesto illustration to show someone making it.

Friday, May 22, 2020

Week Three: Thurs

Formative Critique

This was what I submitted for the critique today. 




Before my workgroup session, I went through everyones work in the google dropbox and made myself a list of all the things I wanted to change/incorporate based on what I saw.

My feedback to myself:

- find a colour swatch to keep myself consistent
- find a fun font for the title
- less 'stand out' content and more basic paragraphs
- decide on a website name
- home page is the same as the problem page, it needs to discuss the objective (growing herbs) more
- change homepage title 'pot it like it's hot' and make the size of this bigger
- more 'bites' of other pages on the home page (eg, I could reference a recipes and have a button to take people straight to the recipes)
- bigger dropdown menu, especially for a phone

Before my workgroup meeting I was able to resolve a couple of the things I put on my list above. Firstly, I decided on a website name. It went from 'herb garden' to 'herbs at home'. I also searched through adobe fonts to find some nice ones that I wanted to try for my titles. I tried some different ones, and so far have settled on Chantal, which is a handwritten style. I like that because it makes it seem more homemade and human, which is the whole point of the website, to grow your own herbs at home with your own hands. 

I also found a couple of colour swatches to try on Pinterest. I didn't have much time left to try these out before my critique, but I had them ready to go for when I started working on my website again.






My workgroups feedback:

- current dropdown menu would be good for a desktop
- bring in a human element, more humanity shown, lily liked how I had a photo of someone holding a pot plant and even though you could only see their arm, she though that it made the whole idea way more relatable
- NO right justification EVER
- NO centering of type, left justifying and giving it more room will make it look more formal
- not enough contrast between background colour and the other colours
- make the background purple more brown
- relate the facts I'm talking about to my illustrations/diagram more
- nice graphic style so far
- black text box on home page doesn't work with the vertical grid, it is the only text out of alignment
- save bright, stark white for really important information
- take black headers to 95% opacity
- trial some textures in the background, Andre suggested a site called subtletextures
- could have herbs beginning to overtake the screen as you get further into the website, eg. it starts off as a seedling but grows with each new page
- can use bold to highlight some words in a sentence

Move onto desktop before bothering to make all these edits to mobile version.

Finding a Texture

I searched on the site that Andre recommended, and downloaded a few different textures to try. All the ones I downloaded from this site didn't really work for me because as I sized them up to fit a desktop, they lost their quality and just looked bad. I actually ended up searching for textures on Unsplash. This is my favourite free photo site because all of their images are really high quality. Because of this, the image that I found didn't need to be sized up and it retained it's texture.


Grey sandbag


Sand


Vintage speckles


The image I found on Unsplash. I'm not sure what the texture is exactly, but I chose it because it seems like a very organic texture, and since my site is about planting herbs I need my texture to be organic, not some sort of digitally made pattern. 
The image can be found here https://unsplash.com/@wesleyphotography

Desktop Design

I'm working with this colour swatch.



I took design inspiration from the site WealthSimple for my home page.




Trialling colours for the title.


Trying a different, more formal font. This one is also easier to read but really boring.


Wondering how to make the image look like it hasn't just been dumped randomly on the page.


Changed the title to 'herb yourself'. This is a pun on 'help yourself' and also telling my readers to integrate herbs into their lives.


Added the 'Get Growing' button in here and trialling things such as a little line.


Really struggling with how to make my image look like it belongs. Decided to trial some an illustration I had quickly made for the problem page on my mobile site. I made it a colour from the swatch and upsized it and I think it really works. The background colour also got darker because I added in the texture.


I remembered what Lily said about liking the hand holding the basil (my photo) and decided to add a bit more humanity into the design but adding a simple little hand here. I think it makes such a difference by making the experience much more relatable.


Removing the texture here just to see what the background looks like it without it. I think the texture makes the background just a bit too dark, there's not enough contrast there, especially with the hand and the background since they are very similar colours.


I like the simplicity of my design so far, even though it is quite different from the mobile design. I'm still going to incorporate a lot of my ideas from that first design, such as the diagrams and illustrations.




Tuesday, May 19, 2020

Week Three: Tues

Photography

These are some of the photos that I took today. They give me a good starting place so I can figure out exactly what I want for the website.





Changing the Design 

Home Page

This was my starting place, the only thing I have changed here is substituting the header for one of my own photographs.










Second Page

This page was a lot easier since I had the basic idea already from the home page. I changed this page a little by adding in more basic illustrations. I know that the photograph used as the header doesn't really work here at all but until I take a better one it will do.






Writing Content


Websites for more home page and problem page content:
https://sustainable.org.nz/sustainable-business-news/five-things-you-need-to-know-about-food-waste/

Put simply, food should be in our bellies (or the bellies of many starving people around the world) instead of rotting in landfills, which releases carbon and wastes resources like the water that went into growing it.

https://lovefoodhatewaste.co.nz/helpful-tips/

New Zealanders throw away 157,389 tonnes of food a year. That is equivalent to 271 jumbo jets of food that has to go somewhere to rot, instead of being eaten. All of this food is worth about $1.17 billion each year. That amount of food could feed the population of Dunedin for nearly three years!
Nearly one-third of the food we waste is vegetables.

https://thespinoff.co.nz/food/new-world/food-waste/06-05-2019/supermarkets-create-tonnes-of-food-waste-every-week-heres-what-happens-to-it/

There are thousands of people struggling every day to make ends meet in New Zealand: 800 Aucklanders are experiencing homelessness; 254,000 kids are living in poverty nationwide; and more than 7% of households are living with insufficient food. Issues like child poverty are so dire that last year, parliament passed the Child Poverty Reduction Act in a historic show of political agreement.
In New Zealand, studies have shown that the average household throws away three shopping trolleys worth of edible food a year. That’s 157,398 tonnes (or $1.17 billion worth) of avoidable food going straight to landfill. There, it’ll decompose and release methane – a harmful greenhouse gas which by some measures is 25-30 times more potent than carbon dioxide. On a global scale, more than $1.2 trillion worth of food goes to landfill every year, contributing approximately 8% of all human-caused greenhouse gas emissions.