Final Implementation

Once the diamond prototype was completed, work moved onto the other shapes. Using a rendering work flow where only the center shape and the left reflection were rendered, then flipping and mirroring the reflection to create the right reflection, all 50 animation frames for the 8 shapes were created in the space of a week. Consolidating the three layers into one animation image also allowed the animation to run more smoothly on lower spec computers. Previously, with both reflections and the center shape being rendered individually (which meant flash had to produce 75 animation frames a second), the animation had been seriously lagging when first triggered by the user.

All hotspot and tag content was created in Photoshop, animation and symbols are consistent across all face shapes. Some shapes were forced to break the center column rule due to excessive length.

Developed during the final implementation was a way to allow all shapes to fade out at any of the three perspectives. Now, when the user clicks on a shape in the dock, it automatically animated a fade in of a blank version of the interface, by doing this the user is able to change shape at any perspective, and even during mid rotation.

In order to add more movement to the interface and leave it looking less static, hotspots now animate in one at a time, typically in a clockwise direction. When a hotspot is rolled over, the inactive hotspot's disappear, leaving the user to focus on the selected information.

A splash screen has been developed which allows for an intro transition as soon as the application is started. Code has also been applied to the application which means if the mouse is left inactive for 25 seconds, the user is returned to the splash screen. A descriptive caption has also been implemented in the splash screen - "face shape e-learning tool", this gives the user an instant inclination as to what to project entails, this should be particularly effective at the degree show.



With the degree show in mind, it was also suggested that a help screen be added, complete with a brief description about what can be learned through the application. The help screen describes how the dock, rotation buttons, and hotspots should be utilized by the user.



Basic sound effects have been added to the project, though initially intending to include a basic music loop, I have decided to restrict sounds to the dock and the hotspot's, this means it can be used in conjunction with a speaker in a lecture.

A poster has been developed to support the project at the degree show -



Final touches before assessment include the development of a dvd cover and the production of a basic slide show. The slide show will be available from the splash screen, and will include photographs and scanned images from various stages of the project development.

The project was recently featured in Web Designer magazine's graduate showcase "Creative Careers". Alongside work from four other design schools (Bournemouth, Leeds, Falmouth, Brighton and London), DDM was praised for its 'raft of great student work'. Details of the issue can be found at http://blog.webdesignermag.co.uk/?p=30 .

Week 12 & 13

With the design report complete, work on the final implementation of the project has re-commenced.

The prototype has now been developed to a stage where the rotation animated button has been fully resolved and implemented. When the user is attempting to rotate the shape, the miniature head now gives a clear representation of the intended rotation.

Implementation of the hot-spots has began on the diamond shape. When the user rolls over a hot-spot, the appropriate annotation and tag-box appears, it subsequently disappears at any point when the pointer leaves the hot-spot.

Presentation of this initial prototype to one of the main lecturers Lesley Ingram has resulted in positive feedback. Lesley was particularly impressed with the level of content detail that is aiming to be implemented. When discussing how the project could be implemented into the curriculum, Lesley suggested having it available at a computer in one of the practical labs, or using it as supporting material in lecturers through the use of a projector. Also it was suggested that development of supporting worksheets or similar paper based material could allow full use of the information made available in the application.

When conversion of paper based content notes into the interface is complete, Lesley has offered to proof read the theory in order to ensure that all information is accurate.

Week 14 will see further development towards a working prototype, the aim still is to complete the diamond face shape before beginning work on any other shapes, this will ensure that all technical hiccups are discovered at an early stage.

Week 11

As expected, week 11 has seen the full implementation of the navigation elements in the project. The dock now fully animates when rolled over, and when clicked, the user is directed to a blank section all set for the implementation of the 3d elements. The diamond shape has been fully implemented, the user can rotate the head in either direction, it also fades in and out when required.

My aim now is to create a fully working diamond section, this means the implementation of the 3d rotation button, and the animation of the hot-spots and appropriate tags. Once complete, work will begin rendering and placing the other shapes.

Week 12 and part of 13 has been set aside for work on the design report part 2.

Week 10

This week development of the logo and navigation bar began. Each letter in the logo now has an animated glow when rolled over. Similar to the logo, the navigation bar will have a drop shadow animation implemented, when the user rolls over a shape, a shadow will appear and will remain if clicked.

Work will continue in flash development into week 11 with the finalization of the navigation bar and the beginning of face shape implementation.

Week 9

In week 9 final tweaks were carried out on the layout of the interface. The logo has been moved slightly upwards so that the bottom of the text lines up with the tag boxes on either side, and 2 of the corners on each tag box have been feathered. It was also suggested that the tag boxes should line up with the mirrors, but experimentation with this lead to the interface becoming to visually shallow. The final layout solution can be seen below -



Completion of the pear shape layers means that two of the heads are now complete to begin prototyping. In week 10, concept and development of the animation elements will be carried out, with basic testing beginning in flash. This is likely to include the animation of the logo, the transitions required for elements to appear in the scene, and the initial composition of the interface on startup.

Week 8

Extended discussion regarding the visual hierarchy of the interface has lead to another rethink regarding the orange curve. It was decided that the curve should become more of a background element so that there is less conflict between it and the master head when rotation occurs. By doing this, it was hoped that the positioning of the tag boxes would also become more natural and clear.



As seen in the above image, the interface is now separated into four distinct layers of depth. The logo has more room to breathe and the tag boxes now sit naturally in a symmetrical layout. Increasing the size of the tag boxes has allowed an increase in the font size. Also seen here is a prototype of the dock system to allow navigation between the different face shapes.

Week 9 shall see the finalization of the remaining elements and layout, then work shall begin completing the other 7 shapes leading up to the final implementation in flash.

Week 7

In week 7 I developed the rotation buttons and the hot-spot animations.

I decided that the rotation button should be a mini version of the master head with arrow heads either side of it. When either of the arrows are rolled over, the mini head rotates to appropriate direction to simulate the master head rotation. The mini head was created using contours through mental ray -



The hot-spots are to be circular orange circles similar to a cross-hair, this is intended to attract the user to interact with them. When the user rolls over the hot-spot it will rotate in a direction relating to where the corresponding tag will appear.

Also this week, time was spent making sure that the alignment of elements in the interface is perfect. In particular, making sure the tags sit in the same position when the interface is divided into 4 corners leaves the interface looking more professional.

Work has now began creating all the content for the final implementation, a sample of the diamond shape at -45 degree's, complete with tags, can be seen below -



In week 8 I will continue making content and perhaps begin testing of the animated elements.

Week 6

Week 6 has seen the finalized logo for within the interface being implemented. An outer glow has been applied to mimic the lighting of a dresser, this also opens up possibilities for animation -



Initial testing has began to create the symbols and shapes that will appear on the models at different rotations. After working through the amount of tags for each model, I have decided to only include tags on the front view, and at 45 degree rotation in either direction. Experimentation with basic solid shapes to correspond with the heads has lead to the realization that only outlines will provide the imagery without competing with the 3d shapes in the visual hierarchy. Black dotted lines and arrows were tested first, but the use of a black looked out of place, instead, white dotted lines with drop shadows shall be implemented. Experimentation with basic text tags has began, the font I have chosen to use is Verdana due to its clarity at small size -


In week 7 I will be developing all tags and imagery for the heads and the basic interaction buttons, this will lead up to the creation of a prototype.

Week 5

Week 5 was spent with the continuation of model alterations, 5/8 of the models are now completed and have been placed within the interface scene -





Slight changes were also made to the logo with the ends of the "Style" letters being squared off to add even more contrast to the work "Design" -

In week 6, the models will be finished and work will begin on the symbols and transitions for a test scene.

Week 4

In week 4 experimentation with the interface continued. After dropping the back mirror, changing the perspective and adding the central curve, the following images were created so show possible color schemes -



It was decided that the orange curve with the grey background would allow the best contrast on the models, further experimentation with curve being wider and at different angles lead to this image -



Here, the interface has been split into 3 at the top to make it more graphically sound, through careful manipulation of the curve, the corners still meet at the bottom. The mirror frames have been changed to white.

Development of the logo also took place in Week 4. Replacement of the "D" in design lead to the following concept -



The head in the mirror image has replaced the D, this helps relate the logo to the product.



From there, the frame was flipped round to look more like a natural "D" shape, but the logo still appeared too wirey, and at a small scale, the head appeared as an indistinguishable blob.



Discussion with Cameron lead to the dropped of the head and the thickening of the font and image. The word "style" is now thicker than "design", and a gradient has been added across the logo to add an illusion of depth which is supported by the perspective of the mirror "D" shape.

In week 5 I hope to finalize all changes left to do on the logo and the interface, and work on the completion of the geometry alterations on the models. I should be starting to create storyboards for scene transitions too, and work towards a prototype that could be given to the college for testing.

Week 3

In week three I worked on developing the mirror styled interface and produced the following test images -


The image above was created in photoshop and references the shape of the apple iPhone in the mirrors. By adding an orange gradient instead of grey, the interface now looks much more dynamic.


The mirrors in this image were created in 3d studio max. By doing this i can easily manipulate the perspective of the interface. A 40 frame test animation was also created which demonstrated the smooth 90 degree rotation of the heads.

It has been decided that the back reflection is likely to be dropped and experimentation with a surface that curves from the ground into the sky between the mirrors should be carried out, this will allow a more solid visual hierarchy, and leave the interface looking less busy. It has also been suggested that the logo requires work, development should occur either this week or next.

In the end result of the interface testing phase, I hope to achieve a reflection effect in the ground as well as in the mirrors so that the surface appears shiny, which will add to the overall contemporary feel to the work.

Work on the content symbols has still to be carried out.

Week 2

This week has been spent finalizing the bullet point links to the models so that a prototype can be made and tested. After discussing with Cameron the idea of replacing the text with symbols, I am going to source a copy of an icon creating application and begin sketching symbol idea's in week 3.
Also this week, I have been sketching and developing an interface concept involving reflections of the head models. A interface set up with the layout of a typical bedroom dresser would allow multiple views of the head model to be seen at once. This effect could be achieved by rendering 4 versions of the head at once in 3ds max, and have them all linked to the master model so that the rotation movement matches. This style of layout would also lend itself to a "drawer" style navigation system, where links would appear from below the platform that the model is sitting on. I will mock this interface in week 3 hopefully.

Semester 2, Week 1, Interim Show

This week I have created the final content list for the shape section. After much deliberation, I have decided to drop all other sections so that the remainder of the semester can be spent focusing on design solutions to delivering the content, and further development of the interface. In the final solution, it is likely I will create basic branding concepts for the remaining sections, to demonstrate the thought that went into what should be included.

Due to the focus on the shape section, it is likely that I will reconsider the floating navigation system, as the use of just text is no longer appropriate. Perhaps mini versions of the face shapes should be considered.

By referencing the content list I have been able to create prototypes of the face shape models that will be used in the final solution. Created in Daz 3d using the Victoria 3 model, and then with the addition of eye textures, they were rendered as clay models in 3d studio max and can be seen below -



Week 1 was also spent developing images and text for the interim show, which will be displayed in the Grays School of Art entrance area, this will be the first chance for the public and the external examiner to learn about the project. The final design which will be printed in A2 can be seen below -


In week 2 I will be working on graphic solutions to conveying content and developing the interface to work with the shape models.

Christmas/New Year Period 3

Leading up to the first week back to official classes, I have been working on the swirling aesthetics and testing the 3d navigation system. I have also been experimenting with transparencies and working on the use of gradients to create the illusion of space, this has lead to the following iterations of the interface -



Currently, the version which I am most happy with includes the change of the title font and the exclusion of the orange outlines -



I have began working on creating drafts of the content for the "shapes" section. Knowing what I am likely to include will help with the development of idea's regarding user interaction with the interface.

Christmas/New Year Period 2

Using the theory booklets obtained from the college, combined with my own research on the subject, I have been able to finalize the content list for the project. The topics to be covered fall under the following headings -

Choice
Maintenance
Shape
Colour
Form
Lifestyle

In semester two I will begin by finalizing the interface design which will then lead onto the developement and production of the content.

Also required is the mocking of the text based content so that it can be proof read by the college.

I should be looking to source photography to support the text content if 3d is not being used.

Still to do - the developement of the swirling animated aesthetics, testing of the 3d naviation system and its related transitions, the developement of an introductory animation relating the new content list, and the testing and developement of the flash components within the interface, e.g. scrolling image boxes and text boxed, aswell as 3d element control.