SOUTENANCE DE PROJET « Freeride 7 » IUT de TROYES – MMI 1 Année universitaire : 2013/2014

Présentation de l’agence Enjeux et contraintes Pourquoi ce projet ? PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarits : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

PLAN SITES ANALYSES : http://sportaixtrem.com http://koakai.biz/shop/fr/ http://www.atbshop.co.uk/ http://www.boutiquesharks.com/ DIFFERENTS PERSONAS : Une jeune sportive de haut niveau Une grand-mère attentionnée Un étudiant dynamique Une mère de famille PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

PLAN Design simple, épuré L’essentiel dès la page d’accueil et accessible en 3 clics Présence importante de la couleur blanche Une certaine structure à respecter au niveau du header et du menu principal Un site qui inspire la confiance Un logo typographique Une mise en valeur des produits et des réseaux sociaux Carrousel PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Un partage des tâches Tous la même tâche au même moment entraide plus simple + concertation Plusieurs propositions selon les étapes on garde le meilleur (exemple du modèle graphique) PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

PLAN Menu déroulant Lien menu principal Pages Pages produits Page d'accueil STREET / AIR RIDE navigation primaire / lien Page des catégories Pages produits Pages et liens SNOWRIDE WATER RIDE Informations & Conseils Conseils d'utilisations Sports émergents Information sur le gérant Notre magasin Contact PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion Menu déroulant Lien menu principal Pages Pages produits

PLAN Proposition n°1 Proposition n°2 Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion Proposition n°2

Lequel choisir ? PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion Lequel choisir ?

Lequel choisir ? PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion Lequel choisir ?

PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Les langages utilisés : Programmes utilisés : PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Centrage des pages > Reprise du code par un autre membre du groupe PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Menu onglet page produit > Modification du code depuis Internet PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Problème de positionnement avec les float > Passage en inline- block PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Difficulté prévisualisation > utilisation du Jquery PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Mise en page du formulaire > Aide d’un modèle PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion

Résumé Bilan critique Apport personnel PLAN Introduction I/ Analyse et préconisations 1) Analyse sectorielle et personas 2) Rester dans la tendance : un design simple 3) Quelle organisation pour ce projet ? II/ Esquisses papier et numériques 1) Arborescence 2) Gabarit : 2 options possibles 3) Flat design III/ Après la théorie, la pratique ! 1) Codage : les outils utilisés 2) Un problème ? Une solution 3) Démonstration Conclusion