Sunday 20 January 2013

DESIGN FOR PRINT AND WEB// Website

In the past few days I have made some major progress with the website.
 For starters the website will feature a list of the famous. These people will be selected to have a certain 'tone of voice', which could come from personality or action. When the persons avatar is clicked on by the user I wanted a window to pop up with a typeface suggestion which suits the character described. The list of people and typefaces is ongoing.

 On the left is the dreamweaver page, and on the right, firefox is open showing current progress. The trick to this site is in the lightbox javascript which will open the typeface information box (which is saved as an image) when the rollover face image is clicked on. Getting the lightbox to work on a rollover image rather than a static image was a challenge for me at first, in the end it was a simple case of entering:

<a href="../images/powerspop.png" rel="lightbox"

before the rollover image code.
I also editied a small amount of the lightbox.css file so that the website was not greyed out when the lightbox was open by changing the opacity values for various web browsers:

 ========================================================================

 I have also messed around with the header a small amount. By fattening up the '/' the whole header looks more balenced. Before the '/' looked like it was taken from a separate font.

 ========================================================================

 I have now compiled twenty (out of 25) characters to act as the 'personality' for 20 typefaces. The website looks very unconverntional so hopefully this will attract more attention. I have left it purposefully clear of instruction because I want the user to explore. The user experience should be as follows:

 User loads front page.

As the users mouses around the page the faces will light up, indicating that they are buttons to press.

On selecting one of the faces, the name of the person and their special font will appear.

Here are some other examples...






The tone of the website is 50% humour and 50% informative. Every link is in some way satirical but also factual for the user. I chose to do this because the topic could be incredibly boring without something to lighten the mood, also a lot of the characters, by their very nature, bring humour to the page.

At the moment I think the website is a success. If I were a new graphics student it would be good to know that I don't need free fonts off the internet and that there will be fonts on the college computers which have the ability to convey nearly every tone you need. Also for seasoned designers the website could be seen as a bit of work based humour, however im not going to pretend that I fully understand the subject so there could be some disagreement with some of the choices, but I would be happy to argue my decisions. For example, in reality cooper black was designed in the 20's so to some it will always be associated with the Art Deco movement, however I would argue that it connotes 60's and early 70's swinging subculture to most people today.

No comments:

Post a Comment