Moving Image DP2

I've very much been neglecting this form of diary keeping and feel I should make more of a disciplined use of it.
I am currently working on the last project of the term, Moving Image.
We have been given the script named 'Last Chance' and interpreted the story as a group and made changes.

The main synopsis of the story is a boy (Andy) finds himself distraught over a girl (Zara) after leaving her but he is regretting it. She also doesn't feel happy with the break up and her mate (Izzy) believes she should forget about him and is all very 'single ladies'. The boys mates (Barry and Matt) also think that he should forget about her and are sceptical when he wants to go to the shop for more beers. Some more of their friends (Amir and Matt) show up at the girls house to take them to a party. After a series of unfortunate events ( Zara leaving her phone and ignoring a text from Andy, and Andy missing his bus to the party) Andy arrives at the party to an unwelcoming friend of Zara's who tell's him shes gone out.
Outside the club Gav, Amir , a few of his mates, Zara and Izzy queue when they see Andy. Andy attempts to talk to Zara but is blocked by Izzy and Amir. He wants to explain his reasoning behind him leaving her but cannot tell her.
He leaves and is laughed at by the group. Later on when texting on his phone he is mugged and beaten up by Gav and 2 of Amir's mates. He seeks shelter in a cafe to have a late night coffee and reflect on the evening looking at his battered and bruised reflection in the window, the waiter wants to lock up so he takes his last sip.
The last scene is Andy looking at his reflection then Zara appears with a sad smile to be greeted with a big smile from Andy, roll credits.

We will change this story by emphasising the Amir character as a conniving, manipulative 3rd corner of the love triangle that is Andy, Zara and Amir. The audience will also feel negative toward Amir because we will make his friendship with Andy clear but his intentions and motive unclear.

Test

That is all.

Interactive - Digital Me - Revised Wireframes

After further creating my website and its structure in Dreamweaver I have found that the initial design was not possible due to complex shapes and a large picture which would of effected the load time of the site. Instead I have decided to follow a simpler layout similar to these wireframe structures.

This will require 2 style sheets as the main home screen is not the same as the About, Gallery, Portfolio, Contact.  This initial welcome/splash screen will welcome the viewer to the site and set the first impression and tone. I have continued the colours, style and layout in the other pages however the navigation simply moves to the top.

Interactive - Digital Me - Typography

Here are text fonts I have considered when designing my web portfolio.

When looking for appropriate fonts to use on my portfolio, I referred a lot to my mood board because this contained a feel and tone I was trying to portray. To me some colours and textures reflected a certain feel and tone so I matched the mood board to fonts. I am still uncertain to which I will use in the final site but have narrowed it down to that of a similar style and will take on board feedback to come to a final decision.

I first must decide which font to use for the different sections, for example it wouldn't look balanced if the headers title font was the same as the other headings in regards to other formatting as well as font. The header title font should reflect the overall tone of the site and the smaller text be more geared to portraying information and ease of reading.
For instance a more complicated header font can be used because the viewer of the site already knows why they are there so a title is merely a formality.

Interactive - Digital Me - Image Optimisation

As part of our research into the Digital Me project and the task to create an online portfolio I have looked at optimising images for use on the web. 

I have experimented with optimising an image for the web.

Here I have shown that in Photoshop I have compressed an image using the control,shift,alt and s key to 'Save for the Web'. This gives more control as to the type and level of compression you want to use more than using presets. Firstly when compressing the image I chose from the presets in the upper right corner of the window. These included, JPEG ( low to high ), PNG-24, GIF restricted and others. I also changed the size of the image so all the tests would be of equal size to compare the size of the file and the quality.

Here is the original image.

File Size 500x333pixels

72dpi
120kb

Same image compressed to JPEG low

File size 500x333pixels

10.2kb

Same image compressed to PNG 24

File size 500x33pixels
212kb

Images that are on the website to be viewed as work such as photographs in the gallery, I will use JPEG compression to decrease the file size of the images whereas for graphics such as a title logo I will make use of PNG compression.

This is necessary to address because if an images data is too large it may take too long to load on a standard broadband connection and require high graphics capabilities whereas if the image is suitably sized and reformatted then this will not subtract from the viewers experience.

However this is a compromise because it is a balance between the quality of the image and the file size that is right for the developer.

Interactive – Digital Me – Wireframes

When designing my wireframe for my online portfolio I attempted to balance usability and interesting design to create an experience that was displaying my work and also showing a thought out layout. Having a well-designed portfolio in itself should help when showing work as it shows diverse designing skill on a different platform to that of the work. In the wireframe I have used polygon shapes and triangles because when researching into websites I found a lot of them used boxes, rectangles and linear navigation. This was in keeping with the classic ‘F Shape’ of commercial website design that the user finds it easy to navigate round when their eye naturally leads them to the upper left corner of the page due to western literature.
Well established websites like
www.guardian.co.uk
www.amazon.co.uk
www.ebay.co.uk
These make use of the ‘F Shape’ navigation however they are commercial websites that catalogue their products and my portfolio would showcase my work in a clean simple environment.
These are examples of a photographers who use portfolios that showcase their work with a minimalist website.
http://iamjordangreen.com/
http://www.richyleeson.com/
http://markforrer.tumblr.com/
I found a few websites which didn’t use this and felt they were more dynamic, sharp and edgy. They encouraged the user to examine the site whilst browsing the content but in a way which was easy so did not cause frustration.
http://www.neotokio.it/
http://www.weareroyale.com/
http://www.wanda.net/uk
A few websites I have looked at make use of a vertically scrolling, one page layout where all the content is on one long page but however can be fast tracked to by floating navigation.
http://inze.it/
http://www.graydenpoper.com/
http://www.leaderstheconference.com/
http://www.jennyandgrayden.com/
http://willviles.com/
http://fieldnotes.iancoyle.com/
http://ryanscherf.net/
http://thisistommy.com/
http://www.kitchensinkstudios.com/
http://editsquarterly.com/
I wanted to use this in a subtle way and not to create too many shapes that were aggressive and angry looking. By using softer text I think this could be achieved. I will keep a consistent layout and character from page to page, this is important for the usability and the flow from the splash page to the rest of the site.  For the navigation I will retain the simple white polygon shapes which will fit together like shattered glass.

Interactive - Digital Me - Narrative vs Authenticity

Jool's asked we watch this video that discusses Narrative and Authenticity. This is relevant for us to examine what our own narrative is and how we want to show it through our online portfolio and what it means to be authentic. 

I thought this video was amazing. Really pushed me to think about some of the questions asked. The philosophy and philosophy of design interests me hugely and found that the video doesn't answer as near as many questions and it poses.
I took notes whilst watching the video. Here are those notes

NOTES
The main points I drew from it were...