11
PROJET 2 ADAPTATION MOBILE - http://www.structube.com/ César Monchablon GR002

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

Embed Size (px)

DESCRIPTION

Guide site mobile de mon projet 2 en Design au Cegep de Ste-Foy

Citation preview

Page 1: Guide Site - Projet 2 - Design & Intéractivité III

proJet 2adaptation moBile

- http://www.structube.com/

César MonchablonGR002

Page 2: Guide Site - Projet 2 - Design & Intéractivité III

analYse du site “nom du site”

Quel est à votre avis l’objectif de ce site? Quel besoin de l’utilisateur vient-il combler?

Présenter le catalogue produit de la marque a travers les différentes pièces du logment du client. L’intête de ce site est que le client à la posibilité de parcourir la totalité des produits vendu par la marque directement sur internet avec des photos de mise en scene, les dimenssions et caractéristique du produit, des produits similaire etc....

Par la suite il peut donc ce déplacer en magasin afin de regardé le produit qui l’a séduit sur intenret. Nous avons aussi des liens de partage email ou réseaux sociaux afin de déployer les fiche produit dans tous le carnet d’adresse de l’utilisateur et donc de toucher plus de monde qui pourrait etre des futurs client.

-

Quels éléments faudrait-il retirer, ajouter ou réorganiser pour rendre le site utilisable sur un appareil mobile? Expliquez le contexte d’utilisation du site mobile. Décrivez la tâche que viendra réaliser le mobinaute dans le site Web mobile.

L’interet d’un site mobile pour ce produit est que l’utilisateur trouve rapidement les magasins proche de lui avec les pro-duits disponible en stock. Il faudra donc la liste de catégorie des produits avec des fiches lui permettant d’avoir les infor-mation éssentiel sur le produit.

Cependant, toute la partie “SERVICE À LA CLIENTÈLE”, “SITE WEB”, “À NOTRE SUJET” sera supprimer car l’application est principalement orienté clientele et le client cherche avant tout à trouver des produits à acheter et à savoir ou les acheter.

Page 3: Guide Site - Projet 2 - Design & Intéractivité III

arBorescence moBile

AccuEil

REchERchE cAtAloguEtRouvERun mAgAsincollEction

pRomotions position ActuEllE visionnEusEcAtAloguE

sAllEà mAngER

nouvEAutés REchERchE

cAtégoRiEs fichE pRoDuit DétAils

AchAts

chAmbREà couchER

luminAiREs

sAlon

buREAu

AccEssoiREs

photos similAiRE

Page 4: Guide Site - Projet 2 - Design & Intéractivité III

scÉnario interactif / accueil

Esquisse fonctionnelle

Navigation et interactivité

Contenu

age

Éléments de navigation

- Recherche - Collection- Notre catalogue - Trouver un magasin

Intéractivité

- Recherche : dépliage de l’onglet au clique sur la gauche afin de faire apparaître le champs de saisie.

Identification du site

Homepage du site mobile.

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 :

- Recherche- Collection- Notre catalogue- Trouver un magasin

Ambiance générale :

Simple épuré, aux couleurs de la marque. Des icons accompagnés de textes sur un fond rouge identifient les boutons de navigation.

Page 5: Guide Site - Projet 2 - Design & Intéractivité III

scÉnario interactif / niveau

Esquisse fonctionnelle

Navigation et interactivité

Contenu

age

Éléments de navigation

- Recherche - Collection- Promotions - Détails

Intéractivité

- Recherche : dépliage de l’onglet au clique sur la gauche afin de faire apparaître le champs de saisie.

- Détails : dépliage de l’onglet au clique qui fait apparaître les informations sur le produit.

Identification du site

Fiche produit.

Visuel :Logotype de la marque dans le header du site mobile ainsi qu’une image du produit sélectionné avec un onglet de détails dépliable.

Éléments de navigation :

- Recherche- Collection- Promotions- Détails

Ambiance générale :

Image prenant une grande partie de l’écran pour augmenter la visibilité du prou-duit.

Page 6: Guide Site - Projet 2 - Design & Intéractivité III

esQuisses fonctionnelles moBile / accueil

AccuEil pRoDuitscollEction fichEpRoDuit

ficheproduit

DétAils

cheminement vers une fiche produit

Page 7: Guide Site - Projet 2 - Design & Intéractivité III

esQuisses fonctionnelles moBile / accueil

AccuEil REchERchEmAgAsinlocAlisAtion

cheminement vers une recherche de magasin

Page 8: Guide Site - Projet 2 - Design & Intéractivité III

esQuisses fonctionnelles moBile / accueil

AccuEil cAtAloguE

cheminement vers le catalogue

Page 9: Guide Site - Projet 2 - Design & Intéractivité III

recherche couleurs / tYpo

coulEuRstypogRAphiE

iconogRAphiE

DINCoND-BolD tItre oNglets

DINCoND-LIgHT TITRe PRoDuITS / DéTaILS

Calibri Position pages

Noir (0.0.0.100)

Rouge (14.100.89.4)

gris (0.0.0.60)

Page 10: Guide Site - Projet 2 - Design & Intéractivité III

maQuettes finales (aussi disponible en format psd ou ai)

paged’accueil

paged’accueil

Page 11: Guide Site - Projet 2 - Design & Intéractivité III

maQuettes finales (aussi disponible en format psd ou ai)

paged’accueil

paged’accueil