Wednesday 13 March 2013

Responsive - Yamaha Navigational Video

This is the navigation Language icon:



 It will be located at the bottom of the page on every page  It will follow the user as they navigate downwards. It will become animated once martin has ordered the layers in the correct sequence within After Effects. The triangle will be white when that language is selected.

When we animate the sequence it will denote the page going from English to Spanish, French, Japanese and then back to English. The idea will be that because the page is changed to Spanish before they see the quote underneath this product page the viewer of the video won't be able to read it. So they  we as the real navigator scroll through the languages mentioned and then finish in English with the statement becoming legible in English - 'Harmony in Society' This is intended to create some kind of emotional response while at the same time showing the usability and multi-language feature.



The website in English


Here us as the navigator clicking on the language box and then selecting spanish.


The website in Spanish


Again we are showing that our website is multi-language at the same time as creating a dramatic effect with the quotation idea below.

Responsive - Yamaha

Ok so where are we now and what do we have left to do?

I started doing the layout for the fluid responsive website while at the same time Martin started coding it. We were constantly sharing files via Airdrop which I now realise is extremely useful and time saving. At this point in time we feel we have done enough research to coherently start designing and implementing the work in context.

We have identified that we need to start working on the navigational video. This will serve as our main final product. The video will be two minutes long and show how the website in a perfect world would work.

Navigational video

The script, storyboard.


Start on google start page, tenori-on google doodle. User clicks on tenori-on and the search term Yamaha tenori-on is entered.

*tenori-on has some kind of animation that follows the mouse, makes it interactive.

Then the browser loads and our website appears starting with the Yamaha logo – inspired state of mind. Scroll down and the logo explodes.

Next page takes you to ‘featured video of the day page’, zooms in over the words “featured pick of the day” with a definition of what the tenori-on is!

Then you see the tenori-on in action and music starts playing. On the video it says ‘innovators in technology’ or some kind of statement.

From there the angle zooms out and starts moving down the page.

*Music is still playing

Next page is a statement that says ‘investors in people’ or ‘Investors in people, creativity and artistry’, something along those lines. Something that says Yamaha is in harmony with society and valuing people.

The next page features speciality instruments and drums. After that there is a philosophy about technology and we continue to introduce Yamaha products.
At the same time as delivering products we are showing the navigation of the website and features such as multi-language, multi-device, multi-platform.

*Responsive web design needs showing off!

After the last product the next page is the Yamaha logo coming back together with the quote ‘isn’t it great when creativity and technology come together?’ Then that fades out and the kando philosophy appears and then fades out.

If we need more content it would be useful to put the website in context. Show some images of the website on different devices, maybe still images. – Tablets, phones etc.








Website layout

I began designing the original layout with a colour scheme and set typeface specifically chosen with the capabilities of web in mind. From the brief we originally wrote we said that the website had to be 'clean' and clutter free as this is what is wrong with the current Yamaha brief, so in response to these mandatories we selectively began making changes and alterations to our layout.



I designed the first layout in InDesign and it seems more appropriate to me, but for the navigational video I needed to design it in Illustrator so that Martin could format it correctly. Apparently it is easier to do with a vector. It took me longer to make finalised design decisions because of this software change, just little things such as underling text - I had to literally draw a line and use a stroke as it seems faster to do this then go into the preferences window and do it from there. 



We received some feedback on our colour scheme from a few people who suggested maybe we could investigate further into the chosen colour scheme. They were right the purple did look slightly crap with the orange and black colours we used with it. Currently we are using a background of orange with white body copy. Wen eed to experiment further with colour.














Website coding

Martin has told me about a piece of temporarily free Adobe software in Beta called Adobe Edge Animate which apparently is a replacement of flash for animators in the HTML.

It makes complex Javascript effects easy to achieve for designers familiar with the After Effects workflow.





The elements shift within defined parameters responding to changes in browser window size.



It is still unclear if we are going to use this piece of software but something to consider.

Current website design:

We coded this with the intention of this page being after the initial landing page which features pur logo exploding off the page. I coded this but it isn't responsive currently. We are finding it hard to code the website with it being fully responsive and fluid.


Second page is pretty similar to the previous. Again we want the text to reformat when the page is resized. Currently it doesn't.  


Although I have re-designed the layout we have not updated the coded website yet as it has been put on the back burner. We will continue coding the website once we have finished the navigational video. Although we will finish each task in this order we need to code the website before we can film the website in context on different devices with different resolutions.


Here you can see how the fluid design works. This is how it would appear on a mobile device. We still have some formatting to do and making sure everything is aligned properly.


The featured video page automatically resizes and tiles the videos when the dimensions of the page are changed. We will need to test the website on every device available.


Here is featured video page on a laptop. 



Illustrations

Martin sent me the new illustrations and I began working hem into the layout I designed.


Monday 11 March 2013

What is good? - Perception Research

Learning

Another heading under perception is learning. I started to quickly find methods to learning such as:

Practicing/repeating
Reading
Internet
Discussion
Experiencing first hand
Thinking + reflecting
Experimenting/play/trial + error
Academic formal classes

I also stumbled upon this TED video by Sugata Mitra. Mitra explain how he was able to teach children from poor backgrounds across India how to educate themselves using hole in the wall computers. The topics they manage to teach teaching themselves and their peers was and is well above their expected intelligence.



It is easier to understand how learning takes place as I practice learning everyday and have done since birth. I have been in academic education for about 15/16 years. It is fairly easy to understand the methodology behind learning. I will continue to research into how people learn.

Thew next heading under perception is Sensory Neuroscience, which unlike learning sounds more difficult to understand.


Sensory Neuroscience

Sensory neuroscience is a subfield of neuroscience which explores the anatomy and physiology of neurons that are part of sensory systems such as vision, hearing, and olfaction.

Ok so what does this mean to me? From this heading and found my way to Neuroscience which is the scientific study of the nervous system.

Ok, so what is the nervous systems? The nervous system is a complex network of nerves and cells that carry messages to and from the brain and spinal cord to various parts of the body.

The nervous system includes both the Central nervous system and Peripheral nervous system. The Central nervous system is made up of the brain and spinal cord and The Peripheral nervous system is made up of the Somatic and the Autonomic nervous systems.

Sensory neuroscience is a pretty complex area I can safely say. Ok so what does the  Somatic and the autonomic nervous system do? Somatic and autonomic: The somatic nervous system regulates the movement of skeletal muscles(the muscles that makes your skeleton move), and the autonomic nervous system controls involuntary actions such as heart rate, digestion, and perspiration.

Ok so this is probably the most basic understanding and probably false definition of sensory neuroscience but at-least I am trying to understand it by pieces research together.

Sensory neuroscience in my understanding is specifically the subfield which deals with specifically the understanding of the neurons that are part of the sensory system. The sensory system/senses are physiological capacities of organisms that provide data for perception. I am starting to understand how this is all linked to perception. We are getting somewhere. 

The nervous system has a specific sensory system or organ, dedicated to each sense.

A neuron is a specialized cell that transmits nerve impulses.

I think that the nervous system best relates to perception. So instead of Sensory Neuroscience I will focus on the nervous system.


Nervous System

What does the central nervous system do?

Your spinal cord receives information from the skin, joints and muscles of your body. It also carries the nerves that control all your movements. Your brain is the most complicated part of your nervous system. It receives information directly from your ears, eyes, nose and mouth, as well as from the rest of your body via the spinal cord. It uses this information to help you react, remember, think and plan, and then sends out the appropriate instructions to your body.







Tuesday 5 March 2013

What is good? - Development (Research)

5 Human Senses


Relevance?

The relevance of the five senses to my project is that they help to shape how people perceive. We are able to organise and interpret data in our environment to best understand it and function within it.

I want to also cater to the five human senses in my exhibition. I want to engage with people through their senses. I have got examples of Helmo using 3D images that are interactive. Using cyan and red you are able to see two different images that are overlaid  This is the kond of thing I am interested in, making use of what senses people have. 

When I went to Leeds city museum I witnessed the projectional speakers that are placed overhead. It made me think about people who are blind. If you were blind I think you would especially enjoy the sound installation side of an exhibition for obvious reasons. I want to provide this interaction across every human sense by featuring work thats provides this quality.


Research

Aristotle (384 BC - 322 BC) is credited with the traditional classification of the five sense organs: sight, smell, taste, touch, and hearing.

Sight

The eye is the organ of vision. It has a complex structure consisting of a transparent lens that focuses light on the retina. The retina is covered with two basic types of light-sensitive cells-rods and cones. The cone cells are sensitive to color and are located in the part of the retina called the fovea, where the light is focused by the lens. The rod cells are not sensitive to color, but have greater sensitivity to light than the cone cells. These cells are located around the fovea and are responsible for peripheral vision and night vision. The eye is connected to the brain through the optic nerve. The point of this connection is called the "blind spot" because it is insensitive to light. Experiments have shown that the back of the brain maps the visual input from the eyes.

The brain combines the input of our two eyes into a single three-dimensional image. In addition, even though the image on the retina is upside-down because of the focusing action of the lens, the brain compensates and provides the right-side-up perception. Experiments have been done with subjects fitted with prisms that invert the images. The subjects go through an initial period of great confusion, but subsequently they perceive the images as right side up.

The range of perception of the eye is phenomenal. In the dark, a substance produced by the rod cells increases the sensitivity of the eye so that it is possible to detect very dim light. In strong light, the iris contracts reducing the size of the aperture that admits light into the eye and a protective obscure substance reduces the exposure of the light-sensitive cells. The spectrum of light to which the eye is sensitive varies from the red to the violet. Lower electromagnetic frequencies in the infrared are sensed as heat, but cannot be seen. Higher frequencies in the ultraviolet and beyond cannot be seen either, but can be sensed as tingling of the skin or eyes depending on the frequency. The human eye is not sensitive to the polarization of light, i.e., light that oscillates on a specific plane. Bees, on the other hand, are sensitive to polarized light, and have a visual range that extends into the ultraviolet. Some kinds of snakes have special infrared sensors that enable them to hunt in absolute darkness using only the heat emitted by their prey. Birds have a higher density of light-sensing cells than humans do in their retinas, and therefore, higher visual acuity.

Color blindness or "Daltonism" is a common abnormality in human vision that makes it impossible to differentiate colors accurately. One type of color blindness results in the inability to distinguish red from green. This can be a real handicap for certain types of occupations. To a colorblind person, a person with normal color vision would appear to have extrasensory perception. However, we want to reserve the term "extrasensory perception" for perception that is beyond the range of the normal.

Hearing

The ear is the organ of hearing. The outer ear protrudes away from the head and is shaped like a cup to direct sounds toward the tympanic membrane, which transmits vibrations to the inner ear through a series of small bones in the middle ear called the malleus, incus and stapes. The inner ear, or cochlea, is a spiral-shaped chamber covered internally by nerve fibers that react to the vibrations and transmit impulses to the brain via the auditory nerve. The brain combines the input of our two ears to determine the direction and distance of sounds.

The inner ear has a vestibular system formed by three semicircular canals that are approximately at right angles to each other and which are responsible for the sense of balance and spatial orientation. The inner ear has chambers filled with a viscous fluid and small particles (otoliths) containing calcium carbonate. The movement of these particles over small hair cells in the inner ear sends signals to the brain that are interpreted as motion and acceleration.

The human ear can perceive frequencies from 16 cycles per second, which is a very deep bass, to 28,000 cycles per second, which is a very high pitch. Bats and dolphins can detect frequencies higher than 100,000 cycles per second. The human ear can detect pitch changes as small as 3 hundredths of one percent of the original frequency in some frequency ranges. Some people have "perfect pitch", which is the ability to map a tone precisely on the musical scale without reference to an external standard. It is estimated that less than one in ten thousand people have perfect pitch, but speakers of tonal languages like Vietnamese and Mandarin show remarkably precise absolute pitch in reading out lists of words because pitch is an essential feature in conveying the meaning of words in tone languages. The Eguchi Method teaches perfect pitch to children starting before they are 4 years old. After age 7, the ability to recognize notes does not improve much.


Taste

The receptors for taste, called taste buds, are situated chiefly in the tongue, but they are also located in the roof of the mouth and near the pharynx. They are able to detect four basic tastes: salty, sweet, bitter, and sour. The tongue also can detect a sensation called "umami" from taste receptors sensitive to amino acids. Generally, the taste buds close to the tip of the tongue are sensitive to sweet tastes, whereas those in the back of the tongue are sensitive to bitter tastes. The taste buds on top and on the side of the tongue are sensitive to salty and sour tastes. At the base of each taste bud there is a nerve that sends the sensations to the brain. The sense of taste functions in coordination with the sense of smell. The number of taste buds varies substantially from individual to individual, but greater numbers increase sensitivity. Women, in general, have a greater number of taste buds than men. As in the case of color blindness, some people are insensitive to some tastes.


Smell

The nose is the organ responsible for the sense of smell. The cavity of the nose is lined with mucous membranes that have smell receptors connected to the olfactory nerve. The smells themselves consist of vapors of various substances. The smell receptors interact with the molecules of these vapors and transmit the sensations to the brain. The nose also has a structure called the vomeronasal organ whose function has not been determined, but which is suspected of being sensitive to pheromones that influence the reproductive cycle. The smell receptors are sensitive to seven types of sensations that can be characterized as camphor, musk, flower, mint, ether, acrid, or putrid. The sense of smell is sometimes temporarily lost when a person has a cold. Dogs have a sense of smell that is many times more sensitive than man's.


Touch

The sense of touch is distributed throughout the body. Nerve endings in the skin and other parts of the body transmit sensations to the brain. Some parts of the body have a larger number of nerve endings and, therefore, are more sensitive. Four kinds of touch sensations can be identified: cold, heat, contact, and pain. Hairs on the skin magnify the sensitivity and act as an early warning system for the body. The fingertips and the sexual organs have the greatest concentration of nerve endings. The sexual organs have "erogenous zones" that when stimulated start a series of endocrine reactions and motor responses resulting in orgasm.

Monday 4 March 2013

Responsive - YAMAHA, Layout

I started mocking up the new responsive website in InDesign.


These are the product pages. We are going to show 2 products on each product page. We think that the body copy will float below the products when the page size is reduced. We are working on a responsive grid so hopefully we will manage to code these features in.


Quote page. This will need formatting possibly to the right to allow space for our logo to pass down the left hand side. As I mentioned earlier we want the logo to construct as you scroll down page by page.


This is the featured video page that will allow us to feature people playing Yamaha products on a daily basis. The idea being that people will show off Yamaha products while at the same time benefitting from the exposure of being featured on a website with lots of traffic.


Sunday 3 March 2013

Responsive - FLUXX

Hopefully at the very least I will get some feedback on the designs I have submitted. I am fairly happy with the logos. For the amount of time I spent and the amount of designs I came up with the final products reflect that time investment. There is no guarantee my design will even get looked at so to spend days designing for design crowd is fairly stupid I think. If the client likes something from the work I have submitted he/she will contact me and I can make alterations and changes accordingly. 

The work I have viewed is really varying in style and taste so the concept and idea is key for this brief.






Responsive - FLUXX

Logo Design/Brand Identity Project for Bar/Nightclub

I entered this design competition for the money! 

There is a $1300 for the winner of the competition which I think is pretty decent. Worth entering for this brief and because the name is harder then it sounds to translate into a logo from the concept proposed it will throw a lot of people off.

FLUXX: The act of flowing; a continuous moving on or passing by, as of a flowing stream; constant succession; change.

The major emphasis of the brief was negative space and hidden meanings. The client posted examples of logos he was interested in.

http://shine.yahoo.com/work-money/can-you-spot-the-hidden-images-in-these-famous-logos-2528093.html 

http://www.boredpanda.com/negative-space-logos/ 

http://kungfusaloon.com/houston/


The Brief








Design sheets




My concept was fairly simple. I tried to explore the outer shapes from the characters XX. I thought these were more relevant then the U which was suggested as XX represent female chromosomes and visually they gave me more to work with. I thought the triangles above each other looked like egg timers/sand timers which was relevant.







What is good? - Primary Research

Leeds City Museum Primary Research

Yesterday I went to Leeds City Museum. Although there are differences between art galleries and history museums there are strong similarities and I found it extremely useful to visit the museum for primary research.


Images




The images are low quality as I have reduced the file size considerably. I took these images with the emphasis on the use of way finding and navigation. I was alo looking at the signage. It was ideal getting into the space and not just viewing the gallery online.

My next visit will be to the Royal Armouries and Leeds art gallery. I was originally soppose to go there instead of the city museum but it didn't work out like that in the end.

Summary

Use of speakers (directional speakers) - When you walk under the speakers that are above head height the speakers sound as if they are being played in your ear. Its a really weird sensation actually. The really useful thing about this experience is how I can use directional speakers in my exhibition as it links with perception and the human senses.

General interaction - Although the demographic for the Leeds City Museum is younger then a traditional art gallery, the ways in which the curators have tried to engage with the audience is interesting and defiantly worth considering. For example rocks that you can touch.

Layout - I need to figure out the layout of my exhibition. Am I going to propose a new exhibition space or use a gallery space that already exists.

Size - How big is my exhibition going to be.

Responsive - LA LIBRE

LA LIBRE is a cloud storage site. The brief was posted to Design Crowd and the brief was to create a logo that was minimalistic and stylish. It was fairly open to the designer to create whatever they felt appropriate.

The target audience was people who use cloud storage. They said they were looking to appeal to people aged 20-50. This wasn't really a specific audience which made it harder to interpet what LA LIBRE wanted. So I went with the space, robot idea.

I thought about space travel as the preservation of the human race, kind of deep I know. This idea came from an article I read commented on Stephen Hawkins opinion of how the human race would only survive if they explored space and left earth. I made the connection with the preservation of data and the human race.

Finished logo





The typeface is Futura medium.

I am happy with the final logo and think it could be used across both print and web fulfilling the brief. 



Digital design sheets



I was finding it really difficult to continue with this brief as the work I was producing was making me feel slightly ill. It was not my style and I just couldn't produce what I had in my head. It has made me realise I need to practice my illustration a lot more. I was good to produce so many illustrations and then a few days later look over the work and pick the a favourite. The time lapse gave me time to clear my head and detach from the brief slightly.  




This is when I got to the current final logo. I  basically simplified one concept I liked which was the A symbolising a rocket taking off. It was just a case of simplifying.




Design sheets


Robot and rocket ideas.





One concept I had was a robot USB drive.