Création de l'identité visuelle, de la maquettte, du zoning, du wireframe, du trendboard, de la page d'accueil et d'une rubrique pour une compétition d'offshore, ainsi que sa mise en situation sur Desktop. Logiciels utilisés : Illustrator, Photoshop, Indesign

1. 1
ATTUIL MICKAEL | ITECOM ART DESIGN | WEB DESIGN 2015
PARTIEL N°2
CONCEPTION DESIGN
Sujet choisi :
OFFSHORE
LA ROCHER RACE

2. 2

3. 3
SOMMAIRE :
Arborescence du site.............................4
Maquette home et rubrique.................. 5-6
Zoning et wireframe..............................7
La navigation...........................................11
Identité visuelle....................................12
Trendboards...........................................13-21
Mise en situation....................................22

4. Arborescence du site
4

5. Maquette home
5

6. Maquette rubrique
6

7. Zoning
7

8. Zoning
8

9. 9
WIREFRAME

10. WIREFRAME
10

11. Le site se compose d’une navigation principale située dans
une barre latérale fixe.
La page d’accueil est composé de 6 visuels principals cor-
respondants à chacune des rubriques de la navigation.
NAVIGATION
11

12. composition du logo :
Ce R en italique a ete choisi pour représenter la vitesse et le dynamisme de la course, mais aussi pour donner une liai-
son entre le «rocher» (de monaco) et le race (de la course de offshore)
Le Rouge ru R correspond à une couleur dynamique et le symbole de la principaute de monaco.
La couronne au dessus du R rappelle le lieu prestigieux de la course.
Le choix du gris apaise le dynamisme du jaune et l’agressivite du rouge.
IDENTITE VISUELLE
ocher
ace
12

13. TRENDBOARDS
couleurs
13

14. Couleur dominante Couleur secondaire
Couleur secondaire (bis)
couleur tonique
R V B : 255 255 255
CMJN : 0 0 0 0
L a b : 100 0 0
T S L : 255° 0% 0%
EXA : #FFFFFF
R V B : 200 46 24
CMJN : 14% 95% 100% 5%
L a b : 100 0 0
T S L : 255° 0% 0%
EXA : c82e15
R V B : 187 187 187
CMJN : 27% 21% 22% 0%
L a b : 76 0 0
T S L : 0° 0% 73%
EXA : #bbbbbb
R V B :255 205 37
CMJN : 1% 18% 100% 0%
L a b : 85 7 88
T S L : 46° 85% 100%
EXA : #FFCD25
TRENDBOARDS
couleurs
14

15. 15
La Police principale du site :
pour la navigation et
les titres des rubriques
TRENDBOARDS
typographies

16. 16
La Police secondaire du site :
pour l’éditorial.
TRENDBOARDS
typographies

17. 17
TRENDBOARDS
L’architecture du site est inspiré directement de
http://www.whitefrontier.ch/experience ;
En effet, on retrouve la barre latérale de gauche ou se situe le logo, la navi-
gation, et les réseaux sociaux ; mais aussi un visuel plein page contenu sur la
droite.
architecture

18. 18
TRENDBOARDS
Le fond représentant la mer en arriére plan provient du site : http://www.oparacing.org
architecture

19. TRENDBOARDS
ambiance
19

20. 20
TRENDBOARDS
20

21. 21
TRENDBOARDS
21

22. 22
mise en situation
22