Week Six: Rationale

This project responds to the aspects of Kaitiakitanga, the guardianship of resources and ethical considerations, where we have created a video, and designed a website that promotes the concept of “Small action, big impact.” Within this we have focused on the concept of sourcing your produce locally by skipping the Supermarket.  The direction we have chosen for our video is a compare and contrast between the markets and the supermarket, where the footage depicts the over-arching idea that the markets are the superior choice of the two.  The website compliments this, where it is entirely based on the markets. Both the video and the website visually highlight an overall theme that is both organic and natural looking, whilst providing additional information to increase the participation in sourcing from the local markets.

Within the film, it is through body language, including facial expressions and body posture and through adjusting the colour of the footage that we have achieved this direction. To convey the markets as the superior choice we have used body language that is welcoming and appealing, where the experience looks enjoyable. Furthermore, we increased the saturation very marginally, as it was already very bright and colourful. In contrast, the body language used within the supermarket footage demonstrates boredom and confusion, where the experience looks displeasing. The saturation for this footage was decreased to give emphasis to this. Additionally, we also used background music to give further prominence to this contrast, where for each, the background music is used to compliment the two atmospheres of the locations. For the market, we have an up beat, guitar instrumental and for the supermarket we have used muzak, accompanied by the generic checkout ‘beep’. Within the film we chop and change between the two, to again, show the contrast of the two locations.

It is through visual language that we achieved an organic and natural theme within the website, with the use bright colour choices, and market related imagery, where visually the images used within the site reflect a natural and organic appearance that is clean cut, yet not commercial looking. Within the site we used colour to provide visual emphasis toward our theme, so that the web user would get a sense of it before they read into the body copy. The use of repetition in images and colour was also utilised in order to create a website that visually worked together as a whole. In terms of the interaction of the site and web user, we utilised the aspect of a navigational menu and the use of buttons to create an interesting a responsive site. Our typographic approach reflected our theme, where the font we used for our headers reflects an organic, playful feel. For the body copy we kept it refined and simple, this was it would not compete with the heading and would be easily read and processed by the reader.

The video and the website follow a narrative to engage, inform and provide a call to action for our audience. Our narrative is about the task of grocery shopping, where we cover the experience of shopping at the super market in contrast to shopping at the markets.  To inform and provide a call to action we have presented the markets as a superior choice, to encourage people to source locally, justifying this with information and statistics within the site.  

Throughout our design process we learnt that you can never have enough trial and error moments, where through trialling numerous design choices and techniques we were able to determine what we did like and what we didn't.  Through this process we were able to critique our own work to ensure that we were creating a design and video that was to the best of our ability. Furthermore, we learnt that our ability to work well as partners, where we were both on the same page and both worked fast, enabled us to make changes and alterations in short spaces of time. This resulted in taking our work from a mediocre standard to a higher standard in a short amount  of time.  If we were to work on one thing for a future project that included web design, we would look into the concept of learning responsive website techniques, we would also look toward planning out the measurements better within our css. 

Week Six: Final Screenshots of each page

Below are the final screenshots of each page that we created in the site. 

Note: Due to the differing size changes in computers, we have included these screenshots to show the lecturers how the site is intended to look. It may be a matter of zooming in, or altering the size of the window for the lecturers to view it like this.

Each page:

A few screenshots of the scrolling process:

Week six: Implementing the video into the site

Once we were happy with the look of the site and had finished the video, we then put it into the site. 

Week Six: Testing the website on other computers

Today in class we tested the site on one of the big computers in class, where we ran into a few problems. Firstly we found that the window size was too big, and aspects of our site did not fit to it, leaving a lot of empty space. We talked to the lecturers in response to this problem, where we were informed that they would be able to just fit the window to suite, as we were not taught how to make a site that was responsive to various screen sizes. In future web designing we would look into and learn about creating a site that is responsive to all screen sizes, but as for now, fitting the window suite.

Another problem we ran into was the fonts that we had been using, and how they were not recognised by the computer due to the fact that the computer did not have them. In order to fix this we had to do some coding in the css called @font-face, where we put the fonts in our website folder and then through the @font-face tag we linked the url of them. This fixed the problem. 

Week Five: Further refining

Screenshots of further refining of the site.  Firstly we looked at creating more of a margin at the top of the "further sources" page to create more balance. Next we altered the buttons in the "where to buy local" section to make them more of a prompt and easier to navigate.

Week Five: Website pages refining

After making some refinements, as shown in our last post, with our pages, we wanted to do a bit more finessing and create some more interest to the site. One thing that we were not so happy with was the "further sources" page. It didn't quite have the same standard and finished look like the rest of the pages. So we decided to have a look for inspiration toward how we could display the sites in an interesting/unique way rather than just a list that opened up new windows.

We found a site that had created icons, which had an area within them to click the link. So, drawing inspiration from this, we decided to create some icons for each of the links on the page. The screenshots below show the process.

Here are the finished icons:

Once the icons were made, we placed them into the further_sources.html and started to have a play with how we wanted them to work with the text. We found that because the icons relate back to our header, we would follow the same theme that the header does, using a centered alignment.

From here we then coded each of them to be a button that would take you to the external link that it is associated with. This became a little fiddly and is still a work in progress, but the buttons all work currently which is the main thing, we just need to work with the css a bit to get the final look we want.  

Week Five: Website pages

Within the site we originally had our index.html page which had most of our elements within a scroll and you could 'jump' to them through our navigation menu up the top. We then had  our further_sources.html page that was not a part of the scroll, but was instead only a part of the navigation menu, where it jumped to a whole new page. We did this because we see it as 'additional information' therefore it doesn't need to be apart of the initial scroll on the index.html page. 

Throughout our development we decided that by putting the buttons in that take you to the larger map in the "where to buy local" section of the scroll,  having the full size map straight underneath in the scroll was just repeating information. So we decided to take it out of the index.html page and create its own page that was not a part of the scroll, like "further_sources_page.html.

This meant that the map would not be a part of the scroll, however it will still be abled to be located through the buttons in the "what to bring" section and through the navigation menu at the top (which takes the web user to the new page we created just for the map).

As this can be quite confusing for the we user, we made sure that we changed the title of each page to suit as well. 

Below are the screenshots for this process. 

Week Five: Further Advancements

Here are some further developments the website undertook through our design process.

Due to the new style of the logo/header we decided to adapt some our infographics to suit it. Below is a simple screenshot process, where we measured out an exact graph and masked it within the orange to create the shapes.

Further advancements include the implementation of images into the "where to buy local" section. In this spread we have body copy of where two markets are so we thought it would be effective to have small maps next to them that act as buttons to a larger map. We created this in the html file, where we made the button link to our "map" section and also made mouseover text over the button saying "click to enlarge" to prompt the web user and let them know that a larger map is offered through clicking the button/smaller map.

Furthermore, additional graphic images were added to the sections to add more detail and interest. These are each of the sections currently.

Week Five: Refined Website Pages/Links

These images show some of the more refined different sections of our website with the links in the top bar being used (and working successfully). This is close to what we want our website to look like when it's finished but are still exploring different visual options at this stage.

Week Five: Website development and coding

This is a brief screenshot story outlining the different stages the blog has gone through so far, with shots of the coding alongside to show how we've used it to make the different changes.

Here we've got screenshots showing the different stages the website has gone through, with the adjusted banner, website sections and arrangement, colour scheme, and working the different links on the website.