Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be
Phase 2 (C) : Conception visuelle Facilité d utilisation: 66%; Une charte graphique adaptée Des images optimisées Organiser sa navigation, soigner sa page d accueil Bien organiser ses pages web, des textes lisibles et clairs
Tous les internautes ne naviguent pas avec la dernière version de leur navigateur préféré Tous les utilisateurs n'utilisent pas Windows comme système d'exploitation Une grande majorité des internautes ont un moniteur 17" mais il y a aussi des 15, 11, les 19 et les 21 (voire +) sans compter les tablettes et les smartphones!
Conception visuelle 1/Dimensions de pages Quelles sont Les résolutions d'écran les plus courantes aujourd hui? Les différentes versions de navigateurs utilisées et dans quelles proportions? Les systèmes d'exploitation les plus usités? Trouvez des sites proposant des statistiques à jour Elaborez une idée de base de résolution pour un site, à adapter en fonction des publics cibles, et soyez prêt à présenter vos arguments devant la classe
Conception visuelle 1/Dimensions de pages > Notre analyse L espace disponible à l écran ne dépend pas uniquement de la résolution d écran de l utilisateur interviennent également : Le navigateur utilisé, Les barres d outils affichées, La taille de la fenêtre du navigateur (pas toujours maximisée) Il faut donc s assurer que dans les contextes les plus fréquents, les internautes pourront voir les éléments principaux Ce qui compte, c est le volume de visiteurs qu elle recouvre!! Navigateurs à prendre en compte : http://www.w3schools.com/browsers/browsers_stats.asp Un site pour quelle résolution? http://www.libstat.com/pages/resolution.htm http://fr.screenresolution.org/
Conception visuelle 1/Dimensions de pages > Comment décider? Dans l idéal vos créations devraient TOUJOURS pouvoir s adapter à la résolution dans laquelle elles sont consultées : En travaillant en dimensions relatives (% ou em) En faisant flotter les blocs de mise en page En ajoutant des Media Queries (Responsive design) Si vous optez pour un design fixe, décidez de n occuper qu une partie de l écran si la résolution de celui-ci est plus grande que celle que vous avez retenue pour votre design, éventuellement en centrant horizontalement votre site Placez les éléments les moins importants à droite (zone éventuellement masquée en cas de résolution trop faible et uniquement accessible par un scroll horizontal)
Conception visuelle 1/Dimensions de pages > Navigateurs mobiles De nos jours, les dimensions d'écran ne veulent plus dire grand-chose surtout sur les navigateurs mobiles http://www.alsacreations.com/article/lire/1490-comprendre-leviewport-dans-le-web-mobile.html
Conception visuelle 1/Dimensions de pages > Navigateurs mobiles La largeur d'écran constructeur (screenwidth) correspond au nombre physique de pixels qui composent la matrice de l'écran (telle que le constructeur le décrit dans les caractéristiques) Les largeurs physiques (devicewidth) correspond au nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage La largeur du viewport est une largeur virtuelle fixée quelle que soit la largeur de l écran (de manière à pouvoir y caler n'importe quelle page web en lui affectant un niveau de (dé)zoom).
Conception visuelle 1/Dimensions de pages > Conclusions Adoptez le plus possible, quand votre design le permet, la technique du «liquidlayout» ou «mise en page élastique» Détectez la résolution d'écran de l internaute ou le type de browser et redirigez vers une page CSS adaptée Mettez en place un responsive design efficace http://www.journaldunet.com/solutions/dsi/exemples-deresponsive-design/ http://www.alsacreations.com/article/lire/930-css3-mediaqueries.html
Qu est-ce qu une grille? http://netmacom.fr/blog/webdesign/le-webdesign-selon-lesgrilles.html http://www.alsacreations.com/article/lire/1196-grillesframework-css-webdesign.html Quels sont les avantages à travailler avec une grille?
Fireworks (Adobe) Prise en main Pourquoi Fireworks? http://myclientisrich-leblog.com/2013/05/fireworks-en-5- avantages/ http://blog.gaborit-d.com/dossier-pourquoi-fireworks-estmieux-que-photoshop-pour-faire-du-web/ Interface et prise en main de Fireworks Espace de travail de Fireworks (outils, inspecteur de propriétés, menus, autres panneaux, enregistrement d un espace de travail personnalisé)
Fireworks (Adobe) Penser la mise en page d un site Nouveau document, gestion des documents, modes d affichage Utilisation des règles, des repères Créer une mise en page basée sur une grille, importer une grille dans Fireworks Importer dans Fireworks des outils de mockup, créer ses propres modèles Créer un Workflow avec Fireworks Gestion de projet avec Fireworks
Exercice évalué Déterminez la dimension de base du site de la ville de «Bled-lespins» et la disposition des éléments principaux (pages de contenus): Choisissez une grille sur laquelle baser votre design Schématisez sous forme d un wireframe les éléments placés et leurs dimensions Présentez le rendu visuel de ces éléments sous les résolutions les plus courantes Prévoyez-vous une alternative pour les tablettes et les mobiles? Si oui, laquelle? Argumentez votre réponse Solution mise en place ou non, schématisez le rendu de votre site sur les principaux supports mobiles Ajoutez cette analyse et les schémas à votre cahier des charges (début de la charte graphique)