SM2102 creative web design and application
Assignment 1: website critique
( www.ysl.com)
Group Member: Lai Chui Wan, Alai (50411130)
Lo Wai Keung, Jonathan (50404292)
Lok Man Lam, Blue (50387333)
Concept and theme
The concept of this website comes from a film camera. Many similarities between the
website and a film camera can be found.
1. Composition
The composition of this website is similar to the design of a camera, especially the
old-fashioned ones. (See Figure 1a and 1b) The website is divided into three rows and
five columns with a picture in the middle, while a camera is also divided in the same
way with the lens in the middle where an image is recorded.
Figure 1a
Figure 1b
2. Metaphors
In the website, components and products of a camera are also referenced.
 Lens
Every time we click on a new subtitle, there will first be a “flash” (See Figure 2a),
which is similar to the lens of a camera (Figure 2b). Moreover, the “flash” makes
people think about the operation of a camera when taking shots.
Figure 2a
Figure 2b
 Film
After the “flash”, a photo will appear and after a second “flash”, 9 small photos in
three rows and three columns will replace the photo with the top and bottom rows
having the darker colors (See Figure 3a). This design makes people think about
the developed film of the camera as images can only be seen under the support of
light.
Figure 3a
 Photographs
By clicking on the small photo, the photo will be enlarged and shown on the left
hand side of it. The ratio of the width to length of the photo is 1:1.42, which is
very near to that of a 3R photo developed by a film camera. (See Figure 4a and 4b)
Figure 4a
Figure 4b
Yves Saint Laurent, (YSL) is a famous fashion brand name in the world and its products
can always be found on the celebrities. Therefore, the concept of using a camera as the
main theme of the website is pretty suitable as its products are always found in the picture
of celebrities wearing or using them in newspapers or magazines.
Focus on Brand Name – YvesSaintLaurent (YSL)
From the view of advertising, the main purpose is let customers remember the brand
name. Therefore, it is necessary to show the brand name on web site. In this web site, we
can always see the brand name of YSL.
Figure 5
If we move the mouse into column A, the menu will appear under the brand name (Figure
5). When we move the mouse out of column A, the menu will disappear immediately and
the brand name icon moves to the centre of column (Figure 6). This animation attracts the
attention of visitors.
Figure 6
When the menu disappears, we can’t see which page is being browsed. However, the
content description will be showed in column B (Figure 7). And, if we move the mouse
into column A again, we can see the title of the page we are browsing becomes grey in
color (the original color is white, Figure 8). Therefore, we always know our location in
the web site. It is clear when browsing the web site.
Figure 7
Figure 8
Weakness
Limitation of Navigation
One of the main purposes of navigation is to provide users with a sense of place. Users
need to know where they are on the site, where they have been, and how to get to where
they want to be.
A good navigation system enables users to quickly jump between sections. It can help to
prevent users from getting lost.
For this website, it is found that it is not available to go back to the previous pages by
clicking any icons or links. Users are required to go back to the main menu and then start
the navigation they have previous done.
Besides that, it is also time consuming to load the new page when selecting particular
areas of the website. Users may feel inconvenient and impatient to browse on this website.
Improvement
It is suggested to add a short-cut on the top so that the users can be prevented to get lost.
Also they may feel advantageous to get the information from the previous pages by
clicking the short-cut only.
Present Layout
HOME / WOMEN’S ACCESSORIES / HANDBAG
Recommendation
Site Diagram
Men f/w
04-05
Men f/w
04-05
W omen
f/w 0405
W omen
f/w 0405 part 1
W omen’ s
Acc ess or ies
Men f/w
04-05
W omen
s /s 05
preview
C ol lecti on
W omen
C ruis e 05
preview
Men’s
Acc ess or ies
Men s /s 05
presentati on
Previ ew
F a shio n
Eyewear
Regist er
M a in pag e
In Love
Ag ain
Lega l
N ot ic es
B outiques
C inema
Bea uty
W omen
F ragances
Pure
Skin
Ca re
Yvr ess e
Opium
T emps
Ma jeur
Y
ysl par is
Hydr a /
Protect
B ody
Yves
Sai nt
Laurent
Nu
B aby
Dol l
Riv e
Gauch e
Kour os
Look
Les
E xpert s
C omplex ion
Men
F ragances
Lips
Yves
Sai nt
Laurent
M7
B ody
Kour os
Riv e
Gauch e
Pour
Homme
Opium
Pour
Homme
Ant i-Ag e
Make up
Liv e Jazz
Pour
Homme
Jazz
Na ils
Eyes
Content Analysis
Item
Content
Main menu
1. Fashion
2. Beauty
3. Legal
Notices
4. Register
Fashion
1. Preview
2. Collection
3. Women’s
Accessories
4. Men’s
Accessories
5. Eyewear
6. Boutiques
Function
Located in the
second column of
the website and
allow visitors to
access to other
pages at any time
Fashion- Collection
To shows visitors all
fashion products
available in this
season
Item
Content
Function
1. 3 icons
named
“Women f/w
04-05 Part
1”, “Women
f/w 04-05”
and “Men
f/w 04-05”
2. Photos and
descriptions
of women
and men’s
fall/winter
2004-05 in
store
To shows visitors
the latest women
and men’s wear
Fashion- Preview
1. 3 icons named
“Women s/s o5
preview”,
“Women Cruise
05 preview” and
“Men s/s 05
presentation”
2. Photos of women
and men’s
spring/summer
2005 in store
To give visitors a
preview of products in
the coming season
Fashion- Women’s
Accessories
1. 2 icons
including
Handbags and
Shoes
2. Photos and
descriptions of
women’s
handbags and
shoes available
Fashion- Men’s
Accessories
Photos and descriptions
of Men’s accessories
including shoes, bags
and belts etc.
To shows visitors all
women’s handbags
and shoes available in
store in this season
To show visitors all
men’s accessories
available in this season
Item
Content
Function
Item
Content
Function
Item
Content
Function
Fashion- Eyewear
2 photos of
women’s eyewear
and 1 photo of
men’s eyewear
A brief description
on eyewear
available in store
Fashion- Boutiques
List of boutiques in
all over the world
Beauty
1. Women Fragrances
2. Men Fragrances
3. Make up
4. Skin Care
To show visitors the To shows visitors all
location and
beauty products available
telephone number
in this season
of the boutiques
Beauty- Women
Beauty- Men
Beauty- Make Up
Fragrances
Fragrances
9 lines of women
8 lines of men
7 different kinds of make
fragrances
fragrances
up accessories: Look,
including Cinema, including Kouros,
Complexion, Eyes, Lips,
Opium, YSL
Yves Saint Laurent Nails, Les experts
Paris, Yves Saint
M7, Rive Gauche
Laurent Nu, Rive
Pour Homme,
Gauche, Body
Opium Pour
Doll, Y, Yvresse
Homme, Pour
and In Love Again Homme, Jazz, Live
Jazz and Body
Kouros
To describe
To describe
To lists out the make up
different lines of
different lines of
accessories available now
beauty products
beauty products
in the market according to
such as perfume,
such as natural
the needs of the visitors
natural spray,
spray, after shave
body lotion etc for lotion, shower gel
women and help
and cologne for
visitors find
men and help
products which
visitors find
suit them
products which suit
them
Legal Notices
Register
Legal Notices
A form of
including
subscription
copyrights and
trademark,
submission,
security,
disclaimer etc
To explain the
To provide a way
legal liabilities of
for visitors to
the website and
subscribe YSL
online
Composition diagram
The web site is divided into 3 rows and the row of centre is divided into 5 parts. The ratio
of these 5 parts is approximately 2:4:5:5:2 (Figure 9).
Figure 9
We decide to refer to the golden ratio (1, 1, 2, 3, 5, 8...), so that we change the ratio to be
1:2:3:3:1. And, we think the background color of the site is dull. Therefore, we decide to
change the color of the top and bottom row. Considering the makeup series of YSL
(Figure 10), bay, gold & black is the main colors. Therefore, we choose to use bay, gold
and black to bring out the image of YSL’s makeup series.
Figure 10
New Layout:
Layout of Presentation
A good site structure combined with an effective visual design enables users to construct
a mental map of the site. A good design layout will establish as a guide for the user’s
direction.
Everyone in the website is starting to get ideas, and some of them may even have a
mental image of what the site should look like. As a result, a clear, impressive and direct
creative energy and channel is necessary to turn into a productive process.
For this website, in order to list out the addresses of YSL Boutiques all around the world
clearly and directly, it is recommended to review the layout presentation.
Present Layout
If we are going to search the address of one city, we first need to click the main
navigation naming “Navigation”. After that, it is required to select the “country” followed
by the “city” from a list of text as shown below.
It may be inconvenient to the users to click several layers of links to get the final
information. Therefore it is better to change another presentation to guide the users to get
the information.
Improvement
A picture of World Map is advised to provide as a means of guiding user the address of
YSL Boutiques located all around the world.
Country Selection
Present Layout - Country and City Selection
Address
Present Layout – Address of YSL Boutique (for one city)
Recommendation – A Map listing all the YSL Boutiques located all around the world
After click the selected country, its address would be shown out.
Address of one
country