InVision links

Web: https://invis.io/PU8YTH7A5
Mobile: https://invis.io/JN8YVPJPG

web background

my intention for the website was for the background colours to go all the way across the screen, but I realised with screens bigger than mine, it doesn't show up that way, it looks like this:

On the other pages, I fixed this by adding a background image:

though the header does this when you scroll, but I don't think that's necessarily a bad thing.

I just need to figure out how to make the home page work like this.

Share page

I added "social media posts" on the share page, all from photos we've taken, plus two from google (that were marked for reuse with modification). I also added some little captions that show up when you hover over them (individually). If this was real, clicking on them would bring you to the actual post on whatever site it's on, but since they're fake I can't do that.

Also, I linked the twitter and facebook icon to LYC's pages, but not the instagram since they don't have one. But if this were real, they could easily make one..

on the mobile page, I made it so if you click the image it brings up a larger version with the caption underneath. I made up the names/usernames and captions, as if some a facebook, some instagram and some twitter

mobile website

Still a few things to add: the correct poster/flyers for resources page, photos on the share page

this is the menu, it drops down from the header, half the width of the screen

I only have my (very old) ipod to test it on (my phone can't do internet), and it works pretty well. I used a template with a taller screen, so the fold would be just under the learn more/get involved buttons on that. But - I tested all the buttons and being able to click things with my fingers, which all works.

More website development

webite home page development

made a better image for the home page (a rough one)

added footer, spaced out nav a little

made nav text black so it's easier to read.

playing with different ways to show which page it's on:

website development

-changed fonts

- separated paragraphs a bit more

-made resources/events/share pages separate

-added lego swimming?

updated flyer

made it bigger - unfolded it'd be about a4, 

made gaps for little icons

fixed up the cover image - removed the sane because it didn't match the rest of it, made the text red. 

possibly still need to change the type on the first page and maybe add to the smaller paragraphs so they're more of a similar size to the others. also, make the title of #5 fit on one line.

possibly flyer idea?

a little card sized folding brochure sort of thing. if it's small and easy to put in your pocket or wallet, it might be less likely to be thrown away could go on the fridge too. We might come up with a better idea for this yet.

possible text for flyer

I was thinking about using the text we were given but I decided it was too long - and also not as relevant? I found 10 smaller things you can do, directly relating to plastic, which I wrote into 1-2 sentences. it also comes to about 270 words so it's just under what we need - but adding an intro bit should be fine.

1. Don’t use plastic bagsBring your own reusable bags to the supermarket. Remember bags for produce, as well! 2. Avoid plastic packagingDon’t buy items packaged in lots of unnecessary plastic. If you can, buy items packaged in cardboard instead - this is easier to recycle and biodegrades more easily. 3. Shop in bulkMost plastic waste is generated in the kitchen. Bring your own bags and containers and stock up on bulk foods 4. Reusable food storageUse reusable food storage containers instead of plastic wrap or ziploc bags, which often get thown out after one use.5. Don’t buy bottled waterInstead, keep a reusable drink bottle handy and fill it up at home - this is much cheaper in the long run! 

6. Bring your own coffee cupOnly 1% of disposable coffee cups get recycled. Not onl are the lids plastic, but the cups themselves are generally lined with a plastic resin. Bring your own reusable cup next time you buy coffee.

7. Say no to straws!Straws, plastic spoons, and other single use plastics are often unnecessary - and if you need them, bring a reusable one from home. 8. Avoid microbeadsMany facewashes, bodywashes and toothpastes contain tiny beads of plastic, which are too small to be filtered out of water. There are many other biodegradable options. 9. CompostOver 1/3 of kerbside rubbish is food scraps - composting it means you’ll use far less plastic rubbish bags. If you don’t have room, find out if there’s a community one nearby. 10. RecycleThere’ll always be some plastic you can’t avoid, so make sure you recycle it!

website progress

I started colouring these, using the same palette from the  poster. (the image on the homepage below will have a lego person on it, this is just a placeholder)

tried a wide version - realised I need to align the nav text with everything else.

website (/flyer?) illustration ideas

updated wireframe

-having a  nav bar at the top is simpler?

-the background of the home page here will be an image similar to the poster - probably the lego person doing something different.

-these have white space on either side for background - but may consider extending the sections across the whole width?

-i arranged the information a little differently

website text

 figuring out how exactly to sort the info on the website

HOME

plastic doesn't belong here / it's not a game / another headline?

Help to keep beaches rubbish-free, the way they should be. 
When we leave litter lying around, it travels out to sea through drains, streams, lagoons, estuaries and rivers. Once in our oceans, rubbish harms and kills sea creatures, who get caught in it or mistake it for food. Toxins from plastics poison our seafood. Learn more, then get involved in hands-on solutions to this problem.

LEARN

The ocean is turning into a plastic playground.Most plastic pollution at sea starts out on land as litter on beaches, streets and sidewalks. Rain or overwatering flushes that litter through a storm drain system or directly to creeks, streams and rivers that lead to the ocean. After plastics enter the marine environment they slowly photodegrade into smaller pieces that marine life can mistake for food, sometimes with fatal results. Ocean gyres concentrate plastic pollution in five main areas of the world’s ocean and various research groups are bringing back alarming data documenting plastics impacts. 

Simple local actions can help make an impact to solve this global issue.  Join us in protecting the coast and Rise Above Plastics!  Check out the resources, then get involved to help protect the coasts and oceans. 

 Plastic—it's all around us.
It's in our homes, our offices, our vehicles, our yards, our playgrounds. We use it to package food, bottle products, bag produce, make dinnerware and utensils, make toys....Plastics have undoubtedly helped us to manufacture, package and ship goods more easily, for less money, and in some cases more safely than ever before. 

But, plastics pose a significant threat to our planet as well.Part of the problem is plastic itself. The very qualities that make it an adaptable and durable product to use, also make plastic an environmental nightmare. You see, plastics do not biodegrade. Instead they photodegrade - breaking down under exposure to the sun's ultraviolet rays, into smaller and smaller pieces. With the exception of the small amount that has been incinerated, virtually every piece of plastic that was ever made still exists in some shape or form. 

Rise Above Plastics
To reduce the impacts of plastics in the marine environment by raising awareness about the dangers of plastic pollution and by advocating for a reduction of single-use plastics and the recycling of all plastics. We encourage YOU to help address these globlal issues locally with plastic reductions at home, school, work and for your entire community:  What can we do?If we all use fewer products that create rubbish and dispose of what
we use carefully, we can keep our beaches and oceans how they should
be: litter free.
For the rubbish that is already on our beaches the answer is simple: we can pick it up! Beach clean-ups are a great, fun activity to organise for your community.

 RESOURCES / EVENTS

How can I join an event?Beach Clean-ups are a great way to learn about the issue while being part of the solution. 

poster  > 

flyer  > 

How do I organise my own event?Love your Coast  has a range of videos and downloadable documents that will help you plan, promote and run your own event. Organise your own clean-up through the free Love your Coast site. We have reusable sacks and gloves that non-profits and educational institutions can borrow for free.

Browse Love your Coast for events happening in your area. Or, you can organise your own clean-up! There are also a range of videos and  downloadable documents that will help you plan, promote and run your own event. Love Your Coast also has reusable sacks and gloves that non-profits and educational institutions can borrow for free. 

(do we need the following stuff if it's already on the lyc website?) 

Login (form)Login to your Love your Coast account here. You'll then be able to create events, view and edit your clean-ups and share your results. If you've just signed-up, please check your emails to activate your account. If you do not have a Love your Coast account, sign-up now. 

• Email

• Password

• Remember me next time?

  Customising the resources
 Fill in your event details here and we’ll customize the resources for you to download and use at your own event.
(form)

• Where (address > which beach, street )

• When (date and time)

  Share your event tell us about how your event went
 www.loveyourcoast.orgfacebook.com/loveyourcoast

 FOOTER:

Who is behind Love your Coast?

This project was started by a collaboration of New Zealand non-profit organisations, including Sustainable Coastlines, Keep New Zealand Beautiful, Sir Peter Blake Trust, Social Innovation and Watercare Harbour Clean-up Trust. The ongoing maintenance of this website and the resources on it is administered by Sustainable Coastlines. [logo]

Website concept

I based the layout of this concept on this website - with the fixed sidebar and scrolling content on the side.

I changed the placement of the header and buttons and added the columned text as well.

 the home page doesn't scroll- there's only a small paragraph and some links which go to the learn/events pages. the background would also probably be an image similar to the poster.
the ipad version would be the same, but the sidebar would not be visible unless you click a tab (in line with the logo on the top left corner) which would bring out the menu over top.

learn page - I need to sort out exactly how I divide the information. having four pararaphs in one section doesn't really work? but also it looks weird to not have a title. could possibly add a small image the size of the paragraph beside it?
also- the sidebar is fixed, and the content scrolls. the menu on the side will let you skip to a section.

 resources page - same as learn, but smaller. will have the poster/flyer as downloadable - and possibly a form in the last section to log in/make your own?

-my idea was for this to be the full screen, with the sidebar taking up the left side of the screen, but Leeland interpreted my printed versions as it just being the content - and then there'd be a background behind it? which could also work.
Might also explore having a horizontal header nav instead of the sidebar.