Final Image for Open Format

This is our final open format that can be given out to the community during their time at the beach clean up, it focuses on keeping our positive safety message throughout as well as giving them something to wear and be proud of as it is letting people know they have contributed to their beach.

Open Format - Beach Bag or Hat

 Originally we decided to go with a bag to hand out at the clean up, this could be used for the collection of the rubbish and then re-used as a supermarket shopping bag at the end of the clean up. Making it recyclable.

Yet we discussed how the bag relates to our safe beach clean up and it didn't really have much of a relation other than it could be re-used. Therefore we decided that a hat would promote sun safety which all links to our safety message from picking up the pieces.

We decided on the Bucket hat as we are getting a transfer printed therefore it will be easiest, and more sun protective also.

Week 6 Summary

Monday

Today Jordyn and I discussed and showed each other the work we had done. She had made some good progress on the website and my brochure design was coming along but we decided that my brochure was a little plain and needed some more detail.

Tuesday

Today we worked on turning the beach footage into an animated gif so that we were able to easily add it as our moving background on the website. We also decided that we would design a branded hat rather then a beach bag as our fourth design component. That way we are enforcing our message that a clean beach is a safe beach by providing volunteers with something to protect them from the sun. This is the simple design we want to have printed on the hat.

We have changed the wording a bit to make it relevant to wear after the event as well as during. We want the volunteers wearing this hat to feel as though they have made a difference.

Web Colour and Navigation Development

Trying the colour here without the bottom 'footer' aspect, doesn't really draw the eyes in so I have left it in once making the back transparent so we can see the ocean playing.

Deciding on the colour of the heading and footer which draws the eyes to the resources. We decided the dark blue suits the imagery best so we have matched it with the blue in the rest of our resources.

 This is the Final Material page

The home page is the most important part to the website as it is seen first so we needed to decide on whether the text was going to be centred or to the side

Centred with a larger space between the GO button and the text looks best.

Collecting Footage

Today I went to Lyall Bay to collect some footage of the waves coming in and out. We want to use this footage as a silent, looping video background on our web page.

Web Development

Trimming the footage so that it could be made into a repetitive GIF

While having trouble inserting the video to the back of the web template I used a screenshot so that I could continue working on the text.

These are the first few concepts of the Web Page 

Some errors due to Coding in HTML that we had to overcome

After talking to Gray, he suggested we take the body copy out and put that in the second page as it is too much text for a home page.

Brochure Inspiration

When looking for some brochure design inspiration I came across this.

I really like this design and follows well with our shards of glass shapes continued through our other designs. I think this triangle shape will look more organized then a shard shaped brochure which is another plus.

Week 5 Summary

This week was mostly studio work but we did receive some helpful feed back from our peers on the brochure design we had come up with. Below is the design we showed in class.

It was suggested that perhaps we play around with different shapes for the overall brochure, perhaps a shard shaped brochure? We were also encouraged by our tutors to create a bit of a storyline with our designs. For example make the poster urgent and a little dystopian and then make the brochure more of a positive thing as it is received after the beach clean up has taken place and we want people to feel as if they have made a difference and done a good thing.

Jordyn and I decided to split our tasks a little more for this week in order to get things done more efficiently. She will be focusing more on doing the website and I will be focusing on the brochure.

Web Design Concept

To start our web design we decided today what template we were going to use to best portray our website.

We decided that Template 3 would fit as our first page and then possibly use the layout of Template 1 to show all of our resources for the Beach Clean up.

The Three items we need to have on our Web page are the Poster, the Flyer and our Open Format, which we are deciding between a bag and a hat

The starting concepts of our web development is in our bookwork.

Week 4 summary

Monday

We took on board the idea of stylizing the word pieces to actually resemble shards of glass and we were happy with how it turned out.

It was also suggested that we change some of the wording on our poster because we hadn't actually mentioned anywhere what we were doing to clean the beach. We were also encouraged to not be afraid to talk about picking up rubbish on our poster. Below is our poster with the wording changes.

We changed 'preserve our beaches' to 'the big beach clean up' and we also reworded the bottom left paragraph in a way that mentions picking up rubbish, which now clarifies the event much better.

We played around some more on the poster, experimenting with different compositions. This is what we tried out.

The middle one definitely wasn't as effective, but we do quite like the composition with the tilted bottle but we are yet to make a final decision.


Tuesday

Today we started work on the flyer. We wanted to make an obvious style transition from the poster to the flyer without the designs looking too similar. We decided we would use the shard shapes and similar colour scheme as our common link between the two designs. Our brochure would be a5 and double sided. We want one side to be the 'cover' as such and would have our event name, perhaps along with some imagery. On the other side of the flyer we want to have 5 tips that people can follow to continue to protect our beach as well as a small blurb about the 'Love Your Coast' organisation and perhaps a fact or two depending on what extra space we have. Below is the first idea we came up with.

This idea is obviously still very much in the rough stage and we decided that the front cover was too plain and hadn't developed much from the poster. This is the next idea we came up with:

We both like this cover much more as it is far more visually interesting and explains a little more about the event just through the beach imagery. As for the reverse side we don't thing the shape the text is in is working at all. This is what we tried next.

We feel like this information page definitely works a lot better then the last one but it is still not quite right. Perhaps there is too much repetition of the shard shape in this design. We have decided that we like the cover in the top design best as the cover in the bottom design has a little too much white space but depending on how busy the info page turns out we could always go back to this cover design. This is where we got to by the end of the class.

We are both really happy with where this is going. From here we need to replace the fill text to the real text so we can get a better idea of how the text layout will look. We are thinking about also drawing a couple of vector diagrams and pictures to go alongside some of the 5 facts to make the information page less wordy and more playful and interesting.

Week 3 Summary

On Monday it was an interim for the development of our concept idea.

We sat in groups and showed our work to date and explained how our idea linked to the chosen topic.

We both did different visuals and presented them to the groups to see which way forward we should choose. By presenting two different visual outcomes it gave is different ways to develop our final idea/poster. Our ideas were both in poster format as it allowed us to get our poster rendered while also thinking of an overall theme for our website and other aspects we need to design.

From interim we were asked to render a further poster, based on critique, to present back on Tuesday. This allowed us to get more feed back on tuesdays class from class and teachers.

We were also asked to look at websites we thought were successful and some that weren't. This was to give us an idea of how we were going to approach making our own during the CSS tutorial and further into the assignment, a final web page.

We used the following as examples of successful websites:

http://www.wellingtonnz.com/discover

http://sustainablecoastlines.org

And this is the website we used as an example of an unsuccessful website:

http://spectrumpowderworks.com

After taking on board the feedback from yesterdays interim critique, We came back with some new work that followed the advice we had been given. We chose our favourite development and worked on refining it together in class. This is where we got to by the end of class.

Near the end of class we were given more feedback on this later development. It was suggested that we perhaps try to mirror the shattered effect of the bottle on the word "pieces" to link it further with the imagery. It was also suggested that with think about including why people should come along and why we should preserve our beaches in order to create a more powerful poster.

Having the recap talk about the grid in class today was very helpful when it came to laying out the poster as we had both kind of forgotten about it. It was especially helpful with lining up the text and imagery in a visually appealing and harmonious way.

Jordyn's Poster ideas

I wanted to focus on the broken glass aspect of rubbish and litter by chopping and cutting into different images of beach scenery, the text will need working on.

Emma's rendered posters

Today I chose two of my favourite thumbnails and rendered them on illustrator. The images below show the developments I have made. These are the two posters that I will be showing for interim tomorrow.

Imagery of Beaches and Textures