Issuu on Google+

ProJet 3 site Web

PaGe d’accueil

césar Monchablon gr02


analYse du ProJet / clientÈle cible

Le positionnement de KUMONOSU JO : Grand maître sushi qui a créé un groupe de restaurant proposant des produits hauts de gamme avec des poissons d’excellente qualité pour renouer avec les traditions du Japon. Le client cible est donc une personne avec des moyens, n’ayant pas de tranche d’âge fixe qui adore savourer des produits gastronomiques de qualité. Le design a donc été étudié pour être en adéquation avec la politique du groupe. Un design épuré avec des typographies fines sur de vieilles estampe japonaise vectorisé. L’utilisation de trame permet de garder cette simplicité dans l’image tout en apportant une petite touche artistique. La forme circulaire au centre de l’écran permet de souligner la composition du drapeau Japonais. J’ai positionné les contenus photographiques dedans pour signifier une ouverture/découverte des traditions Japonaises. Les couleurs sont quant à elle très sobre (noir/gris) mais nous retrouvons quelques petites pointes de rouge (couleur des tampons/signatures japonaise) pour éviter de rentrer dans une composition austère.


arborescence

ACCUEIL

À LA CARTE

MENUS

HOSOMAKI

SHOGUN

NIGIRI

YAKITTMOTO

SHASHIMI

MIKONY

MAKI

OSHUGA

TARTARES

TOKYO

OSAKA

LE CHEF

CONTACT

SAINTE-FOY MONTMORENCY SAINT ROCH


scénario - mobile scénario intératif interactif

Esquisse fonctionnelle

Contenu

Identification du site Loader de 30s à l’ouverture de l’application afin d’arriver sur la homepage du site mobile.

aGe

Navigation et interactivité

Visuel : Menu composé de deux traits de 1 pixel au dessus et en dessous du texte afin de garder cette simplicité dans le graphisme avec un fond composé d’une estampe Japonaise vectorisé très estompé pour ne pas gêner la visibilité. Éléments de navigation : - Menu

Éléments de navigation

- A la carte

Menu - A la carte - Menus - Le chef - Contact Intéractivité

- Menus - Le chef - Contact

- Menu : dépliage de l’onglet au clique sur la droite afin de faire apparaître le menu et naviguer sur la version mobile.

Ambiance générale : Simple épuré avec le logo du groupe au dessus du menu de navigation.


scénario - mobile scénario intératif interactif

Esquisse fonctionnelle

Contenu

Identification du site Page contact.

aGe

Visuel : Logotype de la marque dans le header du site mobile ainsi que des images de promotion en background qui passent aléatoirement apres une certains durée. Éléments de navigation :

Navigation et interactivité

Éléments de navigation Menu - Liste déroulante restaurant - Téléphoner - Itineraire Intéractivité - Menu : dépliage de l’onglet au clique sur la droite afin de faire apparaître le menu et naviguer sur la version mobile. - Téléphoner : lance une conversation téléphonique avec le restaurant. - Itinéraire : lance l’application map afin de voir le lieu du restaurant le plus proche et de créer un itinéraire.

- Menu - Liste déroulante restaurant - Téléphoner - Itineraire Ambiance générale : Simple épuré, aux couleurs de la marque. Une photo au centre de la composition permet d’avoir un aperçu du restaurant. La description en dessous nous donne les informations sur celui-ci. Les deux icons, de contacte et d’itinéraire nous permettent de lancer un appel téléphonique ou l’application map.


scénario - table scénario intératif interactif

Esquisse fonctionnelle

Contenu

Identification du site À la carte

aGe

Visuel : Photo du chef devant une table de cuisine ou nous retrouvons de chaque côtés une photo de sushi avec une decription. Éléments de navigation : - A la carte

Navigation et interactivité

Éléments de navigation A la carte - Menus - Le chef - Contact - Type sushi Intéractivité - Type sushi : navigation dans la gamme de sushi proposé par le chef à travers les catégories ainsi que les flêches de navigation.

- Menus - Le chef - Contact - Type de sushi (navigation à travers les nom et les flêches de défilement) Ambiance générale : Simple épuré avec le menu de navigation en haut de la page ainsi que des photos du chef et des produits. Nous retrouvons aussi, une estampe japonaise en background.


scénario - table scénario intératif interactif

Esquisse fonctionnelle

Contenu

Identification du site Contact

aGe

Visuel : Photo du restaurant selectionné ou nous retrouvons de chaque côtés l’adresse ainsi qu’une description. Éléments de navigation : - A la carte

Navigation et interactivité

Éléments de navigation A la carte - Menus - Le chef - Contact - Plan - Itineraire Intéractivité - Restaurant : navigation dans les différents restaurants du groupe. - Plan - Itineraire : Lien vers le plan google map ainsi que l’itinéraire pour ce rendre au restaurant.

- Menus - Le chef - Contact - Plan - Itineraire Ambiance générale : Simple épuré avec le menu de navigation en haut de la page ainsi que des photos des restaurants du groupe. Nous retrouvons aussi, une estampe japonaise en background.


esquisse de table (960) esquisse site fonctionnelle (960)

Ă€ LA CARTE

CONTACT


esquisse (320) esquisse mobile fonctionnelle (320)

MENU

A LA CARTE

MENUS

CONTACT


rendu table (960) esquisse fonctionnelle (320)


rendu table (960) esquisse fonctionnelle (320)


rendu table (960) esquisse fonctionnelle (320)


rendu table (960) esquisse fonctionnelle (320)


rendu table (960) esquisse fonctionnelle (320)


rendu mobile (320) esquisse fonctionnelle (320)

PaGe d’accueil

PaGe d’accueil

PaGe d’accueil


rendu mobile (320) esquisse fonctionnelle (320)

PaGe d’accueil

PaGe d’accueil

PaGe d’accueil


recHercHe couleurs / tYPo

TYPOGRAPHIE

COULEURS

CHRYSLER-COMPRESED

LOGOTYPE

DINCOND-LIGHT

MENU - LISTE DÉROULANTE Gris (0.0.0.80)

MERCURY DISPLAY

NOM SUSHI - MENUS

AriAl regulAr

text courAnt

ICONOGRAPHIE

Rouge (29.99.100.36)

Noir (0.0.0.100)


recHercHe couleurs / tYPo

LOGOTYPE

CHRYSLER-COMPRESED

DINCOND-LIGHT - SANS

Kumonosu jo SUSHI MASTER


Guide Site - Projet 3 - Design & Intéractivité III