Final Video for Presentation

Emma

Hi Jason and Nanz!

Just thought we would link you to our facebook page if you wanted to see us chatting away constantly posting developments and discussing our work here.

Rationale

A key differentiation of Lux apposed to other light shows is its over all professional nature. We felt it was important to emphasise this in our website to create a strong brand for Lux by working from a deluxe perspective. This was created using a simple grid, effective white space and contrast in our text. The reverse brief asked for an image based website, so we used the majority of our imagery as the photos of the actual light works to get the public excited for the actual show. We have created a stimulating environment and placed emphasis on the imagery by using gifs. These gifs play with light, creating movement and luminous lighting in the works. 
Our website is a single scrolling page, we thought this would be a lot more user friendly rather than clicking though multiple pages. Here all the information is together so you know your looking at everything and you won’t miss info on hard to find pages. We have also used filters to cater towards the mass target audience of this event to please everyone, these are the same for both the Lightworks page and Map to keep familiarity for ease of use. Overall our website functions well and is easy to navigate for any type of audience.


Annabel

Final App

The final app homepage and menu.

The last edits have been bringing the menu forward so it's in front of the homepage image. Then changing out the About icon so it looks different enough from the menu icon.

Annabel

Final Feedback

-make filter smaller + add drop shadow so it looks like a drop down/separate from the body

-highlight map filter options first before clicking to disappear (like they are for the lightworks option, I have the image files for these ones but not for the map ones)

-add text underneath to say the journey options will take you to another site

-change footer, extra menu unnecessary - social media/contact instead, something that people would expect to find at the bottom of a site

-make search icon smaller!

-make all highlights/hovers orange

                'plan your journey' ones are dark grey

                schedule ones are light grey

-reduce space between heading/filter/content

-move home page image up, reduce space between nav and image

-typography on home page isn't working well

App Homepage

First iteration of the app, after discussion we decided that there was too much green making it difficult to read the text and too different from the website.

2nd iteration, we thought there was not enough distinction between the menu and the homepage. And I forgot to add our highlight orange colour so it developed onto this:

Annabel

Refined Mobile Wireframe

Menu slides in from the left and pushes the content over (menu button should be on other side for the home page)

Pop Ups for Lightworks

The new pop ups of the individual Lightworks pages. The new maps have been added with the new colour scheme. 

Homepage development

Trying different ways of laying everything out + new colour scheme and added 'free event' to info.

Schedule Loading Effect

We have decide to have the schedule load up like this to keep the overall load time of the website down to a minimum.

Emma

Homepage Final!

I decided to have a go at the homepage layout after the group having a few struggles in terms of getting it right. We wanted the homepage to sum up the whole website but this was difficult to do without making it look to busy and trying to fit everything onto one page for the sake of it. After making a couple of iterations this was the final result produced.

New iteration of website Headings and colour scheme.

Here is a further development of the website since we have made progress on the colour scheme and headings. The headings wear made to feel deluxe by having contrast. They also add personality into the website again using our first font Boysen and adding our newly found font Farnham. Putting them together creates an interesting header to define each page. This is especially important in our scrolling website because the headers need be similar enough so you know when you have reached a new page on the website. They also need to be distinguishable from the rest of the text. This we have created by using scale and colour as the blue is barly used through the rest of the website. We have also added lines which surround the heading to make the website feel slightly more 'print' which based on inspirations we have looked at is what we have seen.

I have also started making the website in mind with the final outcome so hiding the filters and making sure everything is on the same file and aligned.

Below I have not put in Emmas final #wgtnlux yet but the map has changed. It is now the green with the filter added.  Then we have added a 'Plan your journey function' this links you to the Wellington Met website via the icons to find a way to get to the lightworks and the Parking emoticon links you to carparks in wellington via google earth. Then next to it we have the download button for the map.

The event schedule is looking tidy and put together, linking in with the rest of the website now that we have a finalised colour scheme. Here the links are all in green so you know what s clickable and what is not.

Annabel

Final Final Colour Scheme

Annabel was struggling with the previous colour palette to make the website look like a light show. To counteract this, we needed to have a colour more focused around night and one representing the bright lights. Hence, we made the blue slightly darker and also more toward the purple end of the spectrum to relate back to deluxe. The lighter blue is now more green and fluro but is still legible as text. 

Final Homepage Gif

Text used for the title is just a filler for now but the gif used had been completely finalised. Only using the turquoise and orange, which is also lighter, instead of switching. Less flashy and crazy and more subtle but still stimulating. 

Emma

Lightworks Hover state

I have created subtle hover states for the lightworks page. When you hover your mouse over the different images each picture changes slightly in terms of the different lights. This is an important aspect to our website adding subtle movement throughout the website in response to keeping our website stimulating. Together flashing like this they do look like quiet a bit of movement however when you only have one moving at once it barely looks like a movement. It is meant to be a movement where you have to do a double take to see if the image did actually move or not. Slowly building up excitement. We like the idea that once a person notices that one picture moves they would hover over all of them to see what each light does! 

Annabel

Final Colour Scheme

Bringing some personality back

Experimenting with colours and fonts, trying to bring a bit more personality back to the website. None of these work particularly well but experimenting with serif fonts gave us an idea of where to take the visual direction.