Presentation Practice

The words we based our website around are captivating, memorable and energy. We projected these elements through the use of colour, imagery and our subtle use of pulsing lights. -Rebecca

We wanted our website to be simplistic for our users yet still be intriguing. -Richie
We wanted to have snippets that had aspects of all our website. - Sarah

For us the content is more important than the aesthetic aspect

We tried making it user friendly as much as we could For example the language options that are available for tourists and having a search bar for people that are looking for something specific.

About Us

After reading what the whole event is about, we have gone ahead and added a schedule to make it easier for the user to know whats on and plan the event.
There are aspects that are similar to the homepage leading off to the map and the light works.

Map Page

Another aspect of it being captivating is the use of an interactive map. The user is able to pick a point on the map to have an overview on the location, its work and the artist. - Rebecca

We have given an opportunity to the user to print their own schedule and map so they can plan their own journey. They are reversed so don't worry ink will not be wasted. -Richie

The schedule is another support to plan the user's journey. It informs whats on each day and at what time. -Sarah

Lightworks

The light works are separated through the locations. Its quite similar to the original lux website layout.


Feedback

Fix heirachy,
Don't need the get involved
Keep it simple, have pop ups instead of having to change pages
The grid needs to be worked on
Keep leading and spacing same between header and body text

What to do Next

- Choose display font : Open Sans 30px
- Work on light works page
- Interactive map pop-up refine. Don't have it go off to another page
- text and grid alignment.
- Colour co-ordination: Headings= pink, subheadings= yellow and clickable= blue

-Rebecca, Saran & Richie

Week 5 Critique and Reflection

This week we received feedback from out tutors and peers. We have to:
- consider our visual hierarchy in relation to the font colour and its relation to the overall site. 
- Since we have to consider that the festival is on right now then we need to change our text to 'now live'
- When looking at colour coding, we will use blue as our 'clicking' colour
- Another point to work on is that the search bar may not be needed on all pages but instead like on the pages for the
light works and searching for artists.
- We also need to work on our grid and keep it consistent yet not have the pages look so same. (Consistent yet different) 
- We will find a better display font because the one we have now doesn't flow with the rest of the font.
 - Refine our pulsing balls so they are consistent throughout all pages
Map
- change header to pink to match dots #ec00ff - change subtitle to yellow - Make map full size and add numbers - Each dot has pop up ontop
- The map becomes interactive Schedule

- We will remake the schedule
- Could have whats on today showing on the right side but on the left have the rest of the days that you click and drop down with further information
- Also colour code the headings and sub-headings
- The printable versions underneath need to be aligned left and instead of one strip, have two separate boxes so it fits in with the rest of the pages.
- We have decide to have the hover border and text become blue so it shows that it is clickable.

Lightworks

- We will add an extra box for the artist section for users who are more interested in artists and their work.
- We need to colour co-ordinate the the headings and sub-headings.
- We also had feedback that the black strips behind the light works are a waste of space, so will b working on that.
- The search bar on this page needs to be aligned accordingly
- When clicking on a location the map needs to change (remove google maps one)

About Us

- We are considering to change the whats on today layout


Social

- The consideration of our grid will be tough in this one. But we have decided to have 2 social feeds and then on the right the live tweets/feedback will be the width of the 2 social feeds.
- We will add a caption under the photograph and what social network it's from (the icon)

- Richie, Sarah & Rebecca

Week 4 Reflection

After todays lesson we have more of a clear overview on how we want our site to operate. Instead of getting caught up in all the fancy stuff we need to think more realistic and simplistic. During the critique we realised the foundation of our overall site isn't as strong as it should be. We are missing elements which is coming in-between pitching the idea to our tutors so definitely by next week we will have grasped the elements and be ready for a more refined view of our website.

We wanted a splash page but it is true that it is like a waste of time for the user who just wants to get the information. Instead of having that splash page we might incorporate our gif on the homepage as the slideshow. Along the sides we will have fixed pulses of light balls to give it more of that captivating and energetic feel.

Preparation for next class:

- Wireframing the other site pages

- Homepage conceptualisation

- Re-create the Map with the artist works.

-Richie, Rebecca & Sarah

Reflection

We had a look at everyone's work and figured that awareness is a keyword that we all need to remember. Not all demographics know that everything is clickable. We need to show that things are clickable. Maybe have some kind of sign, or have it sticking out from the rest? Shadow coming from behind?

We also discussed in our group that we might not need a separate tab for 'contact'. Since the information is very small, we could just include it in the 'about us' section. Making sure we keep everything convenient for the user.

Preparation:
-Have a look at the Invision tutorial videos on stream.
-Test the templates with our own materials.
-Another website we could consider using: wix.com

-Rebecca, Sarah

Week 3 Reflection

Discussion of layout and design plans of website

In class we looked at everyone's wireframes, sitemaps and moodboards to be able to identify the different directions for the lux site. It was helpful to see what everyone had planned for their site and it also helped us to identify some links or buttons we had missing in our own wireframe design.

We then joined another team and we discussed the personas of the target audiences we were targeting (which was narrowed down in the last lesson). I think it did help for us to put ourselves in their point of view and to check the content and pages would be useful to them and be able to guide them across the site. Moving forward, we did reevalute/change some places of where things would go on the homepage and button titles on the navigation bar to make the site easier to understand. I think this will keep changing as we incorporate a visual style for our website.

Also, from the exercise we did find that there has to be a balance in terms of visual content and informative content because of the different personas that will be using our site. We don't want any of the target audiences to have a bad experience with the site and never come back to the website.

We did narrow down colours to a point but we may be still working on the colour combinations that will work on the website. As we need to have colours that can be read by our target audiences. Sometimes white on black tends to be harder to read than black on white for some.

We did want to have our social media section figured out because it is a way of self publicity. We want people to remember the event so this will be an important aspect when moving forward with our site. Also, connecting to the word memorable ( an event to remember).

What to work towards:

-improving site map and wireframes (homepage and another page)

-visually coconceptualizing our wireframes (figuring out what the visuals will look like on the site and where. It could change the layout of wireframe.

-making wireframes for the rest of the website (try to do as much as we can to figure out how well the site will guide the user).

-refine mood-board to one page to set the mood of our site ( We need to pick an idea and go with it visually on our site because at the moment we do have a few to choose from)

-Colour palette testing, clarity of everything for users. Colours could affect readability. We were thinking of mainly navy with some other colours.

Rebecca, Richie, Sarah

Week 2- Class session

Site Map and Wire-frame

We learnt about sitemaps and wire-frames and how important it is to structure a site. The site map is used to list and plan all the different places we can click to on the site ( the pages that will appear when you click on the buttons or links on our site). The wire-frame is to plan the architectural structure of the site ( pretty much where all the imagery and buttons etc. go on our site). This will help us to figure out where content goes on our site and be able to structure the site better.

For adaptability into a smart phones or tablets, it's better to use percentages rather than pixel site so that the site will shrink accordingly (may have to make it so text may appear larger on smaller screens as it would affect readability). The other thing was having breakpoints where if the site was on a smaller screen the grid would alter to suit the screen. 

We discussed the different target audiences and decided on a clear target audience of 4. This helped us to then try and add elements to our plan so that we could design to those target audiences on our own site. I think understanding the target audience is important as we want our site to be easy to read and navigate through.

We also discussed using colour like the website we presented in class. How they use colour as a wayfinding tool (each different section is a different colour).

Also, from looking at the lux site. We found that sometimes it wasn't really clear where and how to get to some pages. So when we design our own website for lux we should consider making it clear to the user how to get to pages and what pages they are on.

After we discussed and planned out a site map and we then made a thumbnail of the homepage. We're still developing this and hopefully we can improve it further by next week. Also, a developed mood board as well relating to our words.

So by next week we'll need to:

-Develop a site map for our whole site 
-Develop a wire frame of homepage (through lots of thumbnails)
-Update mood boards on the style we are using and the words we want to portray

-Sarah

Three words and Mood Boards

Words

At first we had the words illuminating, experience and discovery but then changed to the words below. After the first session we thought to expand on those words and find something much more relevant.

This is the matching mood board with the 12 visuals matching the words above. It's still quite broad when trying to connect the imagery and the words. 

As you can see we changed the words again to suit more of what we wanted to show through our website. The idea to captivate our audience whether through the use of imagery or through colour. The works themselves are captivating and add a layer of new meaning and depth to the environment around it. That's the whole idea of Lux, to give Wellington a new essence through the winter. The concept of energy being literal for the electrical energy for the lights but also the energy around the environment and throughout the crowd that go to see the work. Energy through sound, energy through movement and energy through the light given off. The final word we decided to change last minute because even 'discover' was a bit vague. We chose the word memorable because that's what we would like the audience to feel after the actual event or even take an essence from through the website. For example having feedback posts on the website from twitter/facebook and even shared images on instagram. Memorable also through the fact that festivals and moments like these are shared between each other.

This is our proportional mood board of the six images. We chose the screaming LUX as our main image because that is what we want to give the user an essence of. In a way social media plays a big part with events like these so to make something memorable photos are shared with one another. Another persons feedback and photos may influence another individual's perspective to actually go and make their own memories. The idea of captivate is working more towards how we will captivate our users/audience and make the site appealing. The final bit is for the energy which can be seen through the images and use of colour palette and somewhat through some haptic movement. 

-Richie, Rebecca, Sarah

Week 2 - Research / Development

Throughout this week we have been ideating and researching material that would lead us to a point where we can see what we want to achieve with this website.  Choosing the three words without it being to vague or literal was tough. 

It’s always fun making a mood board but then choosing 6 out of so many is tough yet good for a sense of direction.  So far we are just gathering materials and ideas from around the web and gain a better understanding of what we would like to show through the website.

We originally went with the three words: 

-Illuminate

-Discovery

-Experience

However they were too generic and vague. We needed to find 3 specific words that can relate to the Lux Festival and also essentially be a guide for our style aesthetic. In the end we came down with:

-Discovery

-Energy

-Captivate

After trying to find some images relating to the words, we found that discovery did not fit well with Energy and Captivate. We wanted a combination of words that can cover a range of ideas yet still lead to a point of focus and give the user an essence of the experience. 
After deliberation, we finally settled on:
-Energy
-Captivate
-Memorable

- Rebecca, Richie

Week 1- Intro to brief and client briefing

We had a introductory lecture to introduce us to ideas in relation to words such as authenticity. We learnt that content is just as important as what the site will look like as it makes it more genuine and realistic.

We met with the client from lux. He told us all about the background of lux and what their direction for the light show is. This will all hopefully help us to design a well suited website.

We also had a look at everyone's website screenshots and discussed how they are either a good or bad website and how it shows authenticity. It was interesting to see how some companies integrated their product in their website such as packaging and imagery, or use subtle thing such as sound to help engage people with the website (e.g. Whittakers website included snapping chocolate sounds when you hover over their buttons to re-introduce the experience of eating their chocolate). This was a good exercise to help us start thinking on how we can approach our website.

We began to generate words that we think sums up Lux's essence.
-Captivating
-Experience
-Discovery
-Community
-Social
-Concept
-Innovative
-Interactive
-Contemporary
-Energy
-Fomo (The fear that if you miss a party or event you will miss out on something great)
-Escape

With these words in mind, we can start building our mood-boards.

- Sarah, Rebecca