Adephwerk case study to Re-look / Re design website Speaking For You executive training : http://www.speakingforyou.com
The design process of Ardephwerk - Rachael Hampton
1. CASE STUDY - Recherche
Nancy Ann Norton
speakingforyou.com
Septembre 2007
2. Brainstorming – research iconography
Brainstoming speech
marks, icons that
indicate speech.
interrogation point
quotation marks
Guillemets
Guillemets, also called angle quotes, are line
segments, pointed as if arrows (« or »), sometimes
forming a complementary set of punctuation marks
used as a form of quotation mark. The symbol at
either end — « or » — is a guillemet. They are used in
a number of languages to indicate speech.
A guillemet is sometimes used to indicate direction,
for example:
* fast forward button on a media player, or fast
rewind indicated by the complementary guillemet
* a chevron on road signage to show road
direction, or multiple chevrons pointing in the same
direction for emphasis
* as an alternative to an ellipsis in a document, for
example to indicate additional content.
The guillemet is balanced in the spine height of the
line for most fonts, so it is more visible than an ellipsis.
3. Research color gamme ( 3 colors ** )
Research 3 color max. 60 % ACID GREEN / BLUE 20 % / brown 20 %
I found that the brown did not go well with the Acid Green nor did it give a
feeling of Fun - Pop - Young.
Here are 4 choices of Punchie colors with the Acid green :
1 2
3 4
4. Research color gamme ( 6 colors ** )
If you want a website that is Punchie, Fun & young you will need more than 3 colors.
Here are 3 Choices :
1
2
3
5. Research Graphic Identity 1
Redesign a play button
on a media player into a
monogramme.
This indicate start speaking
and direction.
Use colors from :
Research color gamme ( 6
colors ** ) # 2
6. Research Graphic Identity 2
More of a Modern, Fun, pop
culture Identity.
Combining
quotation marks, Guillemets
,Fonts to indicate speech and
direction
Use colors from :
Research color gamme ( 3
colors ** ) # 3
7. Research Graphic Identity 3
More of a Modern, Complementary Identity.
Combining quotation marks, Sound waves
into a monogramme to indicate speech and
Sound.
8. Research Layout design 1
USING
Graphic
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
Identity 1
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
Intérieur of website ( When you change to pages in the
Home page with 6 menus of navigations website the logo & title of the pages changes color ) This
indicate that the person is looking at different infomation.
Intérieur of website ( When you
change to pages in the website the
logo & title of the pages changes Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
color ) This indicate that the person nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
is looking at different infomation. hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
With a photo or without nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
9. Research Layout design 3
USING
Graphic Lorem ipsum dolor sit am
amet, consectetuer adipiscing elit, sed diam
er ,
nonummy nibh euismod tincidunt ut laoreet dolore m gna aliquam erat
tinci reet magna erat
volutpat. Ut wisi enim ad minim v veniam, quis nostr
, nostru exerci tation
nostrud
strud
Identity 3
ullamcorper suscipit lobortis nisl ut aliquip ex ea commod consequat
aliquip commodo consequat.
odo t.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
e hendrer
r rit v
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
feu
feu
u
ugiat facili
et accumsan et iusto odio dignissim qui bland praesent luptatum zzril
m blandit
a
an
delenit augue duis dolore te feugait nulla f cil
ue ulla fac
a facilisi.
Lorem ipsum dolor sit amet, consectetuer ad
m adipiscing elit, sed diam
dipiscing
d
nonummy nibh euismod tincidunt ut laoreet d lore m gna aliq am erat
ibh et dolore ma
re magna aliquam
e
volutpat. Ut wisi enim ad minim veniam, quis nostrud e
quis d exerci tation
tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
mm onseq
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
hendr t vu ta te
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
eugia n la faci is
giat
giat v
et accumsan et iusto odio dignissim qui blandit p
im it praesent luptatum zzril
um
delenit augue duis dolore te feugait nulla facilisi.
gait lisi.
si.
si
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d
nsec diam
nonummy nibh euismod tincidunt u laoreet dolore magna aliqua erat
nt ut eet aliquam
volutpat. Ut wisi enim ad minim ve
m veniam, quis nostrud exerci ta on
tation
ation
n
ullamcorper suscipit lobortis nisl ut aliq p ex ea commodo con
sl aliquip consequat.
nsequ t.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
r hend rit sse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
olore giat
et accumsan et iusto odio dignissim qui blandit praesent l
ssim it luptatum z
um zzril
delenit augue duis dolore te feugait nulla facilisi.
ugait
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nsec iam
nonummy nibh euismod tincidunt u laoreet dolore magna aliquam erat
nt ut olore liquam
volutpat. Ut wisi enim ad min
minim veniam, quis nostrud exerci tation
ni
nim veniam, quis
iam
ullamcorper suscipit lobortis nis ut aliquip ex ea commodo co sequ
tis nisl quip consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
i nd erit sse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
olo eugiat ver
et accumsan et iusto odio dignissim q blandit praesent luptatum zzril
ssim qui landit
m luptat m
Intérieur of website ( When you change to pages in the
Home page with 6 menus of navigations website the logo & title of the pages changes color ) This
indicate that the person is looking at different infomation.
Intérieur of website ( When you
change to pages in the website the
logo & title of the pages changes Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
color ) This indicate that the person nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
is looking at different infomation. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
With a photo or without Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
delenit augue duis dolore te feugait nulla facilisi.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
delenit augue duis dolore te feugait nulla facilisi.
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
delenit augue duis dolore te feugait nulla facilisi.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
delenit augue duis dolore te feugait nulla facilisi.
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
10. Research Layout design 2
USING
Graphic
Identity 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
Intérieur of website only 3 basic colors
Home page with 6 menus of navigations
Intérieur of website
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
With a photo or without volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
11. Rachael HAMPTON
c/o ardephwerk (artdeisgnphotographie)
www.ardephwerk.fr // rachael@ardephwerk.fr
T. +33 1 43 57 20 04 // + 33 6 62 46 25 76
24, rue de Lappe 75011 Paris FRANCE