"SF Architecture" - Intranet | IUT de Troyes

PRJ310 / Méthodologie du Web Design / TP
Conception et Réalisation d'un Prototype Web
"SF Architecture"
En vous appuyant sur les consignes ci-dessous et les documents fournis par le client, vous réaliserez le prototype HTML/CSS de la page
d'accueil d'un site consacré à l'architecture victorienne à San Francisco, en lien avec une exposition du Museum of the Legion of Honour.
Votre travail de conception et de réalisation sera basé sur la documentation de projet comprenant un zoning, un gabarit (charte de
navigation), et un modèle graphique (charte graphique).
Vous serez amenés à effectuer ce travail dans la perspective d'un affichage sur écran d'ordinateur et sur écran de téléphone mobile. Vous
allez donc devoir mettre en application les principes du "responsive web design" dès le travail sur le zoning et sur le gabarit. Vous êtes libre
d'appliquer la règle préconisée par certains du "mobile first" qui consiste à concevoir l'architecture de la page dans l'optique du plus petit
écran, ou au contraire d'adopter la démarche inverse qui consistera à décliner pour le mobile le zoning et le gabarit réalisés pour l'écran
d'ordinateur.
Un aspect important de ce travail portera sur la mise en page des contenus à l'aide d'une grille de mise en page. Le soin apporté au choix
des polices et au traitement des différents niveaux de texte constituera un des aspects essentiels de ce travail, pour la partie conceptuelle. Il
faudra donc être particulièrement attentif aux détails parfois infimes qui relèvent de la composition des textes: contrastes de tailles, de
couleur, de graisse, interligne, crénage, approche, alignement et justification, espaces de respiration, etc. La mise en forme et la relation
entre les titres, sous-titres, chapeaux de paragraphes, paragraphes, légendes, et autre se feront à l'aide d'une grille typographique (à distinguer
de la grille de mise en page évoquée plus haut). Elle permettra de régler très précisément la taille des polices, les marges et espaces de
respiration et d'imprimer au contenu un rythme vertical cohérent (cf. TD).
L'intégration et la mise en ligne du prototype HTML5/CSS2* permettra une réactivation des deux langages et un approfondissement en
autoformation guidée. La rédaction du code, son organisation et sa facilité de lecture grâce à l'insertion de commentaires feront l'objet d'une
attention particulière lors de l'évaluation.
* CSS3: seules seront utilisées quelques fonctionnalités compatibles avec la plupart des navigateurs.
Objectifs
1.
Professionnels
Connaissance et prise en compte de la demande / Respect du planning de conception / Organisation et communication (rubriques,
des conventions de nommage, optimisation des documents, lisibilité, commentaire du code). Etre capable de s'auto-former et de
trouver des solutions en exploitant un corpus de ressources en ligne, pertinent en français et en anglais (cf. la webographie en
ligne).
2.
Compétences de conception
Etre en mesure de réaliser un gabarit et un modèle graphique aboutis et précis, respectant les grands principes de conception et
prenant en compte les tendances actuelles, notamment le responsive web design (cf. article Wikipedia et article fondateur d’Ethan
Marcotte sur A List Apart). Mise en application des TD. Savoir utiliser une grille de mise en forme et maîtriser la mise en page
pour le web. Comprendre l'importance du texte et de son traitement en termes de mise en forme (typographie) et de composition
(utilisation d'une grille typographique). Pouvoir conjuguer ergonomie, typographie, couleur, iconographie, dans un modèle
graphique cohérent, au style actuel et adapté au thème.
3.
Compétences techniques
Savoir coder une page complexe, adaptable à des supports différents (PC, mobile), en HTML5 et CSS2/CSS3. Savoir rédiger un
code lisible (organisation, emploi des commentaires en vue de la maintenance, optimisation).
Livrables
Livrables à mettre en ligne sur votre site de travail sous la rubrique PRJ310.
A / Documentation de projet
Zoning accueil / version web et version mobile (PDF optimisé) | Gabarits accueil / version web et version mobile. (PDF optimisé) / Modèles
graphiques accueil / version web et version mobile (PDF optimisé) | Fiche de conception (PDF)
Ces trois livrables (version web et version mobile) seront accompagnés d'une fiche de conception (format PDF), justifiant succinctement les
choix de conception opérés et mettant en évidence la prise en compte des tendances actuelles du web design (ergonomie, graphisme,
fonctionnalités). Vous aurez soin de citer vos sources (magazines en ligne, sites de référence, éventuellement tutoriels), en intégrant les
adresses Internet complètes.
Le zoning et le gabarit seront réalisés à l'aide du logiciel dédié en ligne MockFlow (attention au temps d'apprentissage nécessaire!), ou à
l'aide de Photoshop. L'emploi de la grille de mise en page est obligatoire dès l’étape du zoning. L'utilisation de la grille typographique
s'impose quant à elle à l'étape du gabarit. Le modèle graphique sera impérativement réalisé dans Photoshop.
B / Prototype web
Prototype interactif HTML5/CSS2/CSS3 de la page d'accueil (version web et version mobile) | Fiche de liaison (PDF)
Le prototype sera accompagné d'un schéma de mise en page et d'imbrication des conteneurs CSS indiquant les propriétés CSS de mise en
page utilisées et d'une fiche de liaison expliquant les difficultés éventuelles rencontrées au cours de l'intégration et les solutions apportées en
citant les sources utilisées (forums, tutoriels, magazines, blogs, etc.). Ces deux documents seront livrés au format PDF en même temps que
le prototype.
Evaluation
Ce travail sera réalisé en binômes ou trinômes formés à l'intérieur des groupes de TP.
Les livrables devront être disponibles sur vos sites de travail respectifs sous la rubrique PRJ310. Ils devront être directement visibles et
accessibles sous cette rubrique et également dans un dossier zippé qui sera téléchargé par les enseignants à l'issue de la quatrième et dernière
séance de Travaux Pratiques (cf. planning, fin novembre/début décembre). Ce dossier contiendra à la fois la documentation de projet et le
prototype HTML/CSS.
Un point d'avancement sera proposé en début de séance aux binômes/trinômes ayant respecté les échéances de mise en ligne des livrables. Il
vous appartiendra de solliciter les enseignants en cas de difficulté particulière.
Récapitulatif des points auxquels vous devez être particulièrement attentifs.
A - RESPECT DES CONSIGNES
¼ de la note finale
Lecture et prise en compte de la demande (contenus, fonctionnalités) / Rubrique PRJ310 et nommage des fichiers / Respect des échéances
B - CONCEPTION – ¼ de la note finale
Documentation
Ergonomie
Typographie et textes
Graphisme
Exhaustivité (tous les contenus
sont présents dans le gabarit et
dans le modèle graphique!) /
Précision / Qualité / Rédaction /
Orthographe
Organisation, structure, mise en
page / Repérage / Lisibilité /
Respect de la grille de mise en
page
Choix / Contrastes / Couleurs /
Equilibre / Espacements /
Respect de la grille
typographique
Qualité d'ensemble / Equilibre /
Harmonie / Cohérence / Identité
/ Tendances Web 2.0
C - INTEGRATION et DEVELOPPEMENT – ¼ de la note finale
Contenus et fonctionnalités
Code HTML/CSS
Validation W3C
Exhaustivité / Prise en compte des
tendances Web 2.0 et du responsive design
Organisation / Lisibilité
Validité du code HTML/CSS et
accessibilité
VERSION MOBILE – ¼ de la note finale
Points B et C (ci-dessus) appliqués à la version mobile.
Récapitulatif des livrables à mettre en ligne sur votre site de travail sous la rubrique PRJ310
Infographie / Systèmes d'information / PRJ310 / Intégration multimédia / etc. …
Zoning – accueil web (PDF) / accueil mobile (PDF) / TP1
Gabarit – accueil web (PDF) / accueil mobile (PDF) / TP2
Modèle graphique – accueil web (PDF) / accueil mobile (PDF) / fiche de conception (PDF) / TP2 et TP3
Prototype – accueil web (HTML/CSS) / accueil mobile (HTML/CSS) / fiche de liaison (PDF) / TP3 et TP4
Dossier compressé – ensemble des livrables ci-dessus (ZIP ou RAR) / TP4
NB: les fichiers PDF devront impérativement être optimisés (<10Mo)
seuls seront évalués:
les livrables mis en ligne en temps et en heure, accessibles dès le début de la séance (pas dans les 5, 15 ou 30 premières minutes, au
moment de l’ouverture de la salle!);
les livrables présents sous la rubrique "PRJ 310" (pas "web design", pas "multimédia", etc.);
les livrables respectant les conventions de nommage des fichiers ("groupe_nom1_nom2_livrable_support", ex:
"B_dupont_durand_zoning_mobile");
les livrables présents sur tous les sites de travail du binôme/trinôme.
Planning (donné à titre indicatif)
Vous vous reporterez à l'emploi du temps hebdomadaire SRC pour les dates et horaires de séances.
Vous disposez de deux semaines entre chaque séance de TP pour poser d'éventuelles questions et finaliser vos réalisations.
TP1
S2 S3
Semaine
Contenu
S1
Livrable*
TD
-----
TD1
(Tous)
---
---
Groupes TP
---
AB
CD
EF
---
S4
TP2
S5 S6
Zoning et gabarit
S7
S8
Gabarit et Modèle
graphique
---
TP3
TP4
S10 S11 S12 S13 S14 S15/S16
Prototype
Zoning
Gabarit
Modèle graphique
TD2
(Tous)
---
---
---
---
---
E
CD
AF
AB
CD
EF
B
Finalisation
du prototype
Prototype
---
---
---
F
CD
BE
A
7-I-2013**
Livraison
du
prototype /
Fin de
l'évaluation
* les livrables devront être en ligne (sur les sites respectifs des deux étudiants composant un binôme) au début de la séance fixée comme
** Lundi 7 janvier 2013.
échéance. Les livrables qui ne seront pas en ligne à la date prévue ne seront pas évalués.
TD 1 (semaine 2) – Introduction au cours de Méthodologie du Web Design (PRJ310) – Révision du processus de conception et réalisation –
Documentation et livrables de l'Architecture de l'Information – Emploi des grilles de Mise en page - Revue des consignes et contenus des
Travaux Pratiques.
TD 2 (semaine 5) – Documentation et livrables de la Conception Graphique – Emploi des grilles typographiques – Responsive Web Design,
enjeux et solutions.
TP 1 (semaines 2/3/4) – Lancement des Travaux Pratiques (10') – rappel sur le zoning et le gabarit (20') – Réalisation du Zoning et du
Gabarit (2h30) – Mise en ligne du Zoning pour le début de la séance suivante (TP2).
TP 2 (semaines 5/6/7) – Evaluation du Zoning/Point d'avancement – Finalisation du Gabarit et réalisation du Modèle Graphique (3h00) –
Mise en ligne du Gabarit pour le début de la séance suivante (TP3).
TP 3 (semaines 8/10/11) – Evaluation du Gabarit/Point d'avancement – Finalisation du Modèle Graphique et réalisation du Prototype
Interactif (3h00) – Mise en ligne du Modèle graphique pour le début de la séance suivante (TP3).
TP 4 (semaines 12/13/14) – Evaluation du Modèle Graphique/Point d'avancement – Finalisation du Prototype Interactif (3h00) – Mise en
ligne du Prototype pour le lundi 7 janvier 2013 (pour tous les groupes).
Logiciels (dans l'ordre d'utilisation)
Zoning et Gabarits: Mockflow (en ligne) ou Photoshop
Modèles graphiques: Photoshop – génération de police web: Font Squirrel (en ligne) – génération de paragraphes: Lipsum
Intégration: Dreamweaver
Langages
HTML5 – CSS2/CSS3 - Javascript
Webographie
Voir pages des TD et TP sur le site du cours.
Homepage
3 - Identification
1 – Mise en page et habillage graphique
Un formulaire d'identification (login/password), visible et intuitif sera
Ils doivent prendre en compte les tendances Web 2.0 du design des pages
présent sur la page d’accueil.
web. Les articles référencés sur le site du cours vous aideront à identifier ces
3 - Contact
tendances. Vous n'oublierez pas d'expliquer brièvement, dans la fiche de
La zone de contact avec les auteurs et propriétaires du site sera elle
conception, dans quelle mesure votre travail intègre ces tendances.
aussi facilement identifiable.
2 – Contenu et Navigation
4 - Moteur de recherche
Les menus et barres de navigation découleront de l'arborescence, elle-même
Un moteur de recherche proposera une navigation alternative basée sur
basée sur la table des matières du catalogue de l'exposition. Vous êtes libre
les mots-clés.
d'ajouter toute fonctionnalité que vous jugerez utile et susceptible d'améliorer
et d'enrichir l'expérience de l'utilisateur.
Les contenus proprement dits
(photos et textes), sont fournis par le client – cf. dossier en ligne sur la page
des TP (textes, photos, vidéo). Ils doivent être intégrés dans leur totalité dès
le stade du gabarit.
8 - Actualités
Un fil d'actualité relatif aux nouveaux contenus permettra de recevoir
les mises à jour.