You are on page 1of 8

London Metropolitan University

Postgraduate Studies

MA Digital Media
Module CUP002N: Design for the Internet

Critical Report
by

Mickael Abensur
1004448

26.01.2011

Mickael Abensur Module: CMP002N Jan 2011   1  


Introduction

My first ambition when drafting ideas of a website, was to create a very


slick and neat interface that will differ from the majority of websites found on
the Internet. I attempted to dissimulate the buttons into the background as if it
was one single element. From this approach I hope to create uniformity
throughout the various pages and consolidate my message.

Then I looked for a useful topic, which will expose my person in an


original way. The first convincing sketch of a smooth and uncluttered interface
made me think of a hospital and because a substantial number of my relatives
are dentists, it was easy for me to embody the character.

My project is about a unit of researcher that develops a complex


machinery to unveil the mystery of science. As a leader, I propose to train any
dentist willing to learn my new dental treatment techniques.

By creating a story line with a precise goal, I strived to catch the


attentions of Internet users. I also integrated on each page a “call to action”
illustrated by a button to click, a slideshow to navigate or pictures to unroll. I
aimed to apply the basic rules of a good website, engage the user and then
convert their enthusiasm into action. Obviously due to a lack of resources and
time, there are a very limited number of possibilities, but enough to give some
concrete example of the principle.

The site structure is very simple, it is made of shallow pages that each
links mutually to the others. I decided at a later stage, always in the purpose
of adding drama and raising interest, to give a corporate aspect to the
website. Instead of interpreting the brief literally, with different pages
corresponding at a different time of my life, I have chosen to promote an
imaginary company called Novadis. Similar to the classic “before” and “after”
comparison, I have compared old methods to Novadis new methods of
treatment.

Eventually, the website aims to praise Novadis technical achievements


and change the working habits of professional dentists at an international
level.

Main Analysis
I began to work on my website in Photoshop. What will be the first
impression of the user when he lands on my homepage? Photoshop is an
intuitive tool for designer, and translate quickly your ideas on paper. I came up
with nice gradients and soft shadows but I did not have any clues on how to
convert the image in a webpage at this stage.

Once I laid out the look, I have used Fireworks to cut through my page
in order to convert certain parts of the page in interactive elements. This step

Mickael Abensur Module: CMP002N Jan 2011   2  


was crucial to maintain a seamless transition between buttons, the active
page and the graded background.

I was faced with an issue, how could I possibly keep the gradient intact
on my menu if I needed to modify their appearance on a hover of a mouse. I
found the solution in sprites. After an intensive Photoshop work I came up
with a simple image that displays the different status of my main menu
buttons (still, hover & onclick):

Figure1. The main CSS sprite menu bar.

This simple representation allowed me to keep the gradient running


through the different buttons, and could be easily modified. Also because all
the buttons are centralized under one image, it helps you keep an eye on the
overall consistency.

Regarding the navigation, I have chosen to split the page template in


two parts. One will be green with white text, and the top one will be white with
grey text. The green part is often called a footer, and does not change in the
entire website. But because my website is minimal, I decided to centralize all
the possible actions, except the menu, in the lower part of the page. This
navigation routine makes the site more intuitive to the user.

I have used for the menu, a Mootools script to fade in the shadow of
the letters/buttons as the mouse rolls over them (c.f. Figure1) A tutorial helped
me to understand the functioning od sprites. The sprites work together with a
CSS file that indicates the window position of your displayed button (Rubio,
2009).

In another instance, I have used a jQuery plugin called “Easy Slider


1.7” to embed a slideshow of 7 pictures. Added to the jQuery script, a CSS file
was made available (Grakalic, 2009) and gave me the possibility to modify the
slideshow aspect. Always with a jQuery script and an other CSS file, I have
integrated two sliding menus that reveal two pictures (Resig & Grakalic,
2008). By hiding extra content, I increase the legibility of the page.

Except for the slideshow, I have kept the style sheets in a single CSS
file. This method helps you not to loose track of a particular element style, as
they are regrouped in only one file. Furthermore, the method fastens the
loading time of the webpage due to a limited number of files to call.

Mickael Abensur Module: CMP002N Jan 2011   3  


In terms of color range, I stood by a variation of blue-green colors with
different levels of saturation. The green was carefully selected to reflect
innovation, and safety (by reference of green lights). Indeed the subtle bluish
tint in the green makes the color unfamiliar, it might suggest an underwater
environment. The strangeness of this color indicates the novelty of the
Novadis products. (Novadis from the Spanish “nuevo” or French “nouveau”
means “new”).

On the top left corner of each page is found the corporate logo (Kohut,
2010). It is now a convention among web designers to position the logo here.
All these details makes a website understandable and facilitate the usability.

Figure 2. The company logo

The logo represents well the corporate values. It utilizes a modern font
type to express the same message of innovation; moreover the tooth
represents well the industry, and leaves a memorable impression to the user.
I have used Illustrator CS4 to create neat curvatures for the letters.

Concerning the use of text, I have taken in account the general


behavior of Internet users. Indeed, online users have a tendency to skip
through pages very quickly until their eyes are caught by. People find it harder
to read long texts online than in a newspaper article. Therefore I have
implemented a short sentence with big commas on each page to drag the
attention. This short sentence aims to give a taster of the long text and tease
the reader at the same time.

Figure 3. A punch line

The rest of the text is explicative and is written as if the doctor (me)
introduced in the first page was talking directly to the users. All in all, the text
reassures patient on Novadis expertise. The medical white blouse is a bit
“cliché” but acknowledges the position of the doctor. The images of the
uniform and the UV lamp work together with the text to create a global feeling
of professionalism.

The page that deals with the “past” drifts slightly away from my first
approach on the two other pages. I have voluntarily made a bit of humor to
create a distance between old techniques and new techniques. Obviously, if it

Mickael Abensur Module: CMP002N Jan 2011   4  


was a proper website this section would not exist. I brought into derision the
frightening side of a dental surgery; a famous horror movie called “The
Dentist” makes best use of the gloomy dentistry side.

By placing in the foreground a large active handpiece, I wanted to set a


different tone from the rest of the website and entertain the user. I have used
Flash to animate the dental handpiece. After dividing the tool into two pieces
and parented the twist drill to the main shaft, I animated in a loop of 15
images each element, frame by frame to shake the whole apparatus. I then
used Photoshop to apply a motion blur effect on the twist drill to create an
illusion of movement.

Figure 4. The motion blur Photoshop filter.

I have used different motion vector directions to simulate the fast


rotation of the twist drill with the same Photoshop motion blur filter.

Eventually, I used 3D software to create the interior of the mouth cavity


that appears in the slideshow. The Jaw, gum, teeth and muscles have been
modeled and textured in 3D Studio Max. Moreover, the mouth aperture has
been adjusted to replicate the exact position of the girl’s mouth of the
photograph. The photographs have been taken on Eduard Titov’s website
(Titov, 2010).

Figure 5. The 3D reconstruction of the oral cavity.

The use of a 3D representation helped the audience to actually


understand the underlying concept of the UV bone-generative lamp.
Currently, the pictures of the woman face are not as detailed as the 3D
images. Allowing more time would ameliorate the integration of the 3D model
with the real mouth of the photograph. The colors of the virtual images and
the photographs do not match very well and the transition is too sharp. (cf.
Figure 6)

Mickael Abensur Module: CMP002N Jan 2011   5  


Figure 6. 3D integration with the Photograph

Conclusion
Overall, my primary goal was to create a website that looks
professional, in that matter I meant to leave nothing for granted. Each single
element has been carefully designed. The color, the position, the size all finds
a justification. As a result, the website might look rigid. I also focused to have
a navigation that works, the user finds easily his way thanks to the very visible
tab menu.

As a matter of fact, each time the user clicks on a different page; he


can locate himself by looking at the color of the active menu button. A site
map is also available to browse in a single view the pages that form the
website. In general, I did not want to take any risk by having a funny
navigation system, I firstly wanted to make a website accessible to everyone.

Indeed, I tested my website on different monitor sizes, and I have


included wide margins on both sides of the webpage to cope with the different
screen resolutions.

I have learned to do a XML sitemap, to edit a CSS file easily and to use
image sprites on the purpose of creating original buttons.

With the wide range of tools available, I successfully managed to build


everything I had imagined; hence I am very surprised by the flexibility of the
web languages. Everything is possible, and web developers do not have to
restrict their creativity. There are clearly an infinite number of possibilities.

With hindsight, I realized that the website structure influences a lot the
design of the final website. I will probably start by sketching the structure map
of all the pages that I plan to integrate (all the possible links and page
parenting), before the design stage. This alternative method will allow me to
come up with a more creative and engaging way to navigate from page to
page.

Mickael Abensur Module: CMP002N Jan 2011   6  


Aknowledgments

Pictures

Davarapanah, M. Forage en profondeur à l’aide du foret de 2 mm. Forage,


Los Angeles. Web 2010. Available at: http://www.les-implants-
dentaires.com/implants-multimedia/forage/implant.htm Jan. 2011

The Gordon Museum. Jaw of ancient Egyptian showing drill holes used in
dental repair. Dental surgery, London. Web 2005. Available at:
http://www.perankhgroup.com/first_bridge.jpg Jan. 2011.

Katriin-Liivak, T. I wanna cry. Blog, Estonia. Web 2010. Available at:


http://3.bp.blogspot.com/_oe7diNfhq-k/S-
LsBs_EJuI/AAAAAAAAAbU/JgqdfXZGSIY/s1600/crying+can+u+see+me.jpg.
Jan. 2011.

Kohut, V. Concept Dental Care. Volado Design. Web 2010. Available at:
http://www.voladodesign.com/imgs/logos/logo18_lg.jpg Jan. 2011.

Компания 3Gen, LLC. Lumio Dermlite. Moscow. Web 2010. Available at:
http://dermlite.ru/wp-content/gallery/lumio/Lumio_1.jpg Jan. 2011.

Компания 3Gen, LLC. Lumio Dermlite. Moscow. Web 2010. Available at:
http://dermlite.ru/wp-content/gallery/lumio/Lumio_8.jpg Jan. 2011.

Skysea Business Co., Ltd.. Dental Handpiece Y1ABA4 Supplies. Dental


Hanpieces, Beijing. Web 2010. Available at:
http://img.alibaba.com/wsphoto/v0/345644416/Dental-Handpiece-Y1ABA4-
Supplies.jpg Jan. 2011.

Titov, E. Girl with sweet pepper. Flickr. Web 2010. Available at:
http://farm5.static.flickr.com/4078/4820846870_3cd226bb21_o.jpg Jan. 2011.

Titov, E. Portrait of beautiful girl in red dress which sits on green grass. Flickr.
Web 2010. Available at:
http://farm5.static.flickr.com/4098/4820846460_f6d01341c3_o_d.jpg Jan.
2011.

Wittchow. Cosmetic Dentist. Massachusetts. Web 2010. Available at:


http://cosmeticdentistma.com/index.html Jan. 2011

Mickael Abensur Module: CMP002N Jan 2011   7  


Software

Adobe Photoshop Creative Suite 4


Adobe Fireworks Creative Suite 4
Adobe Dreamweaver Creative Suite 4
Adobe Illustrator Creative Suite 4
Adobe Flash Professional Creative Suite 4
Autodesk 3ds Max 2011

Scripts and Tutorials

Grakalic, A. Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images
and Content. Web 2009. Available at: http://cssglobe.com/post/4004/easy-
slider-15-the-easiest-jquery-plugin-for-sliding Jan. 2011.

Resig, J and Grakalic, A. jQuery Tutorials for Designers. Web 2010. Available
at: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers
Jan. 2010.

Rubio, G aka Gonchuki. CSS Sprites2 – It's MooTools Time. Web 2009.
Available at: http://blog.gonchuki.com/archives/css-sprites2-its-mootools-time
Jan. 2011

Bibliography

Ryan, D and Jones, C (2009) Understanding digital marketing: marketing


strategies for engaging the digital generation, Kogan Page, London.

Duarte, N. (2008) Slide:ology: the art and science of creating great


presentations, O'Reilly Media, Sebastopol California.

Mickael Abensur Module: CMP002N Jan 2011   8