Screen Resolution

I have designed the web page layout that perfectly fits the screen resolution of 1440x900. The web content is not responsive to other screen resolutions. Therefore, the flash animations will not appear correctly on loaded on different screens.

Inspiring Website Layout

This website inspired my website design idea.

Health and Safety Laws

Working with visual display units (VDUs), can cause headaches and pain in the arms, wrists and fingers because of the following reasons: screen glare, poor image quality, a need for different spectacles, stress from the pace of work, anxiety about new technology, reading the screen for a long period of time, poor posture or a combination of these. To avoid potential health problems, people have to set up the workplace properly:

Working with visual display units (VDUs), can cause headaches and pain in the arms, wrists and fingers because of the following reasons: screen glare, poor image quality, a need for different spectacles, stress from the pace of work, anxiety about new technology, reading the screen for a long period of time, poor posture or a combination of these. To avoid potential health problems, people have to set up the workplace properly:

·         Adjust the chair properly and keep the forearms as horizontal as possible. The eyes keep the same height as the top of the VDU.

·         Arrange the documents, keyboard, mouse and screen in the most comfortable way. Thus, avoid making awkward eye and neck movements.

·         Adjust the desk and screen to avoid light reflections on the screen.

·         Make sure there is a space under the desk so you can move your legs freely.

·     Avoid excess pressure from the edge of your seat on the backs of your legs and knees. A footrest may be helpful, particularly for smaller users.

·     Good keyboard position is very important. A space in front of the keyboard helps the arms and wrists to rest when not keying.

·     Try to keep the wrists straight and do not overstretch the fingers during keying.

·     Sit upright and close to desk so you do not have to stretch the arm while using the mouse.

·     Support your forearm on the desk and do not grip the mouse too tightly.

·     Rest the fingers on the mouse when you do not use the mouse.

·     Do not press the buttons of the mouse too hard.

·     Adjust the contrast and brightness of the screen.

·     Make sure the screen is clean.

·     In setting up the software, make sure the size of the text is readable and the colours are set appropriately.

·     The characters on the screen have to be sharply focused and not flicker or move.

·     Do not sit in the same position for a long time. Change your posture as often as practicable.

·     Do frequent short breaks rather than fewer long breaks.

Designing Process of My Website

I have built my website using technology such as Adobe Dreamweaver, JavaScript, HTML, jQuery, CSS, Adobe Flash, Adobe Director, Autodesk 3ds max, Adobe Illustrator and Final Cut Pro.  

The website incorporates assets such as vector graphics, 3d animation, 2d animations and a sound.

Home Page

I have built the website layouts in Adobe Dreamweaver using vector graphics, created in Adobe Illustrator. I have used three kind of fonts: Verdana, Georgia and Gabriola for every web page. Each layout incorporates the same logo, navigation menu and a copyright text. The logo represents me as the author of the website, game pitch and animation. It incorporates Georgia font. The body text incorporates Gabriola 14px font. 

Demo Page

The demo page incorporates not only the vector graphics, but also 2d Flash animations and a shockwave file. I animated the 2d Russian dolls from my game pitch in Adobe Flash. Firstly, I have created them in Illustrator and then, imported them into the Flash library.

Illustrator 

Main Character & Sailor

Sailor Animation in Flash

Main Character Animation in Flash

 I have used techniques in Flash such as shape and classic tweening. I also used a new technique which involves using shape hints. They helped me to control complex changes of shapes. I saved my animations as SWF files which I embedded into the game pitch pages. These files require a Flash player
in order to be viewed in the browser.

This is the second part of the Demo page which includes a shockwave file of the game demo.  I have created the game demo in Adobe Director. Then, I exported it as a shockwave file. It is a 2d interactive animation which graphics are created in Illustrator. This file requires a Shockwave player in order to be viewed in the browser. 

The body text is Verdana 14 px. The line space is 19.8 px. 

Game Gallery Page

I have created the gallery using jQuery script, CSS and HTML.

Animation Page

This is an animation page which presents my 3d animation created in Autodesk 3ds max and edited it in Final Cut Pro. I exported the video as m4v file and embedded it into the web page. The web page, also, incorporates two 2d animations of the main characters of the story. The video requires a QuickTime Player to be installed.

Illustrator 

Wasp & Bear

Firstly, I have created the wasp and bear in Illustrator. Then, I imported them into the Flash library. I used the same animation techniques such as classic and shape tweening.

 Wasp Animation in Flash

 Bear Animation in Flash

Faces' animations reveals characteristics of each of the characters. 

Animation Gallery Page

I used the same script for the gallery as for the demo page. 

Gallery issues

From the image above, you can see the first design of the gallery buttons. I rejected that idea because they did not match the visual style of the logo design. Instead, I created another buttons, whose design incorporates curves and match the visual style of the logo.

The gallery images incorporate both images and text which explains the design process of the game and  

animation. 

 CSS script places the images one on top of the other. This way, they fade in and fade out when the user click the back and forward buttons. When I saved images as PNG files, the images behind the first one were shown. Therefore, the text was not readable. You can see it on the image above. 

The other issue was with the correct slicing of the images in Adobe Illustrator. Firstly, I did not take into consideration the size, top, left, right and bottom position of the images. I saved them as each of them was with different properties. When I tested the gallery, I found out that the images fade in and fade out, changing their location up, down, left and right randomly. This would cause ambiguity  to the viewer. 

Then, I used a ruler to save the images with the same properties. 

Web Page Layouts issue

Firstly, I was trying to create the web page layout using a table in a Dreamweaver. Because of my complex logo shape, I could not insert a rollover image into its cells as the images can have only a rectangular shape which would cause another issues for the website layout. Then, I decided to use both the table and rollover images with absolute position which I placed on top on the table. Therefore, scaling the browser window caused responsive scaling of the table content, while the rollover images did not change their location on the web page. I found the solution of removing the table and place all of the page elements using absolute position.

Sketches of the Website Layouts

Sketches of the Website Layouts