WEB design Pierre Chassany Comstone.ch vocables.com
graphisme Méthodologie(s) «Nomadisme» Responsive web design Techno tendances design 2
graphisme La direction artistique pour le web n est pas une démarche d ornementation visuelle mais recouvre des enjeux aussi différents que l orientation, l identification, la hiérarchisation, la valorisation, la mise en scène de l information et des messages de communication, qui produit et renforce son sens grâce aux interactions proposées par son design. La direction artistique d un projet assure non seulement la cohérence entre des objectifs de communication et leur traduction graphique, mais l élaboration d une relation entre l interface du site et son utilisateur. Benoît Drouillat www.directeurartistique.net 3
La spécificité du graphisme web Le web est un support qui a développé ses propres contraintes en terme de dispositif visuel Première loi : l utilisateur (ergonomie, interactivité et accessibilité) Définir un résultat esthétique, original et graphiquement adapté à la cible Adapter l habillage, les fonctionnalités, les outils, etc. Faire parvenir l information rapidement La cohérence Le respect de la marque et du projet (produit/service/...) au travers des différents supports digitaux Le respect des codes de communication existants 4
La spécificité du graphiste web Culture web = Veille et curiosité (com, market, techno,...) Une oreille (l écoute et la compréhension) Une main (le savoir faire) Créer/adapter une identité visuelle Mettre en oeuvre la réalisation technique avec l équipe de développement Ne se résume pas seulement à la conception graphique mais aussi à l interaction des pages du site web Prise en compte des contraintes spécifiques au support Internet en termes: d ergonomie d utilisabilité d accessibilité 5
Méthodologie(s) 6
Le Travail d équipe webdesigner Chef de projet Développeur(s) 7
* 8 http://www.simplesquare.com/blog/infographics/a-web-site-designed/ * Le recettage d un projet web consiste a tester les fonctionnalités du produit livré
9
10
Le Brief créatif De préférence, un document écrit, et non un brief oral ou minimal... (voire un cahier de conception) qui? La Marque Identité Valeurs Positionnement Concurrence Charte graphique et éditoriale Pour qui? Le(s) Public(s) Caractéristiques Attentes Perception actuelle Perception souhaitée Quoi? Object(s) Problématique Objectifs de communication Message/promesse Dispositifs existants Autres opérations en cours ou prévues Comment? Bon à savoir Qui sont les interlocuteurs de référence? Contraintes graphiques Contraintes techniques Budget Planning Livrables... 11
Le Brief créatif Rassembler des informations institutionnelles, stratégiques, sectorielles, pratiques, et des ressources de travail Proposer des problématiques marketing et de communication à résoudre Nourrir la traduction graphique des objectifs et des messages très en amont du projet Susciter des interactions avec les créatifs mais aussi avec l équipe de développement Plus le brief contient d informations pertinentes et de ressources de travail et mieux les attentes seront formulées, plus la réponse créative sera précise et en adéquation avec les attentes. Le brief permet de faire le point sur les besoins réels et d évaluer de manière rationnelle une prestation créative. 12
Le Brief créatif 1. Définir le contexte de communication Qui est l annonceur? Le secteur d activité de la société L organisation de la société La culture de la société Son historique Son positionnement marketing (haut de gamme etc.) La concurrence directe et indirecte Axes de communication antérieurs Qui sont les cibles? Connaître les publics concernés par le message hiérarchisation motivations 13
Le Brief créatif 2. Définir les objectifs créatifs Objectifs institutionnels S agit-il de diffuser une information institutionnelle? Valoriser une stratégie de marque, la lancer, la déployer? Stratégie de recrutement? Dynamiser la réactivité éditoriale? Objectifs relationnels S agit-il de mettre en place une relation privilégiée avec la cible? Fédérer une communauté, animer un réseau? Rassembler des informations sur les visiteurs? Générer une base de contacts, fidéliser la cible? Dynamiser la chaîne marketing (dans le cadre d une action multi-supports)? Objectifs promotionnels Promotion : promouvoir un service, un produit, un événement? Se présenter personnellement? Démarcher des prospects? Mettre en place parallèlement une opération d e-mailing? 14
Le Brief créatif 3. Orienter le positionnement créatif Le ton créatif Quelques exemples de tonalité, à combiner entre elles : «Classique, sobre, institutionnel, sérieux», «Sophistiqué, haut de gamme», «Pédagogique, simple, clair», «décalé», «Editorial, informatif», «Très Graphique, élaboré», «Tendance, avantgardiste»... Les éléments de continuité visuelle Les questions essentielles à poser pour transposer efficacement une identité existante sur le web : Quelles devront être les possibilités d évolution de la charte graphique web (adaptation des gabarits, déclinaisons envisagées, flexibilité de la mise en page )? Existe-t-il une charte graphique, des règles particulières d utilisation du logo? Iconographie : la société dispose-t-elle d une photothèque utilisable pour le site? 15
Le Brief créatif 4. Anticiper les contraintes créatives Contraintes liées à la technologie de développement En raison de la multitude de contrainte, une analyse préliminaire doit être menée Du côté hébergement, développement mais aussi des internautes Les contraintes créatives liées à des interdits culturels 16
Le Brief créatif 5. Architecture fonctionnelle et éditoriale Définir un type d interface Mini site = adapté aux problématiques événementielles, ou personnelles Site portail = adapté aux problématiques éditoriales et communautaires (fédérer) Site vitrine = adapté aux problématiques promotionnelles (sites produit), ou institutionnelles (courtes présentation, volume de texte faible) Site outil ou applicatif = adapté à des institutions ou organisations désirant partager des données ou développer des savoirs Définir les critères ergonomiques Amorcer une réflexion sur la facilité d accès aux contenus dans un contexte non-linéaire (car arborescent). Etablir le plus précisément possible les spécifications fonctionnelles et l arborescence du projet, car ils sont les données de départ de l interface graphique. Estimer l éditorial Etudier les contenus prévus pour les adapter à la lecture sur écrans 17
Le Zoning et le storyboard L organisation visuelle de la page Les principes de navigation et d ergonomie Garder à l esprit que la conception fonctionnelle (zoning, scénarios) est une étape qui doit s effectuer en amont du design de l interface. L allure graphique de la maquette n est pas encore à l ordre du jour. C est le point de vue fonctionnel et ergonomique qui est important à cette étape là Le zoning Cette phase permet de bien spécifier toutes les fonctionnalités nécessaires pour répondre aux actions des internautes. Il s agit donc d un découpage de la page en autant de zones que nécessaire A réaliser pour les plus importantes pages dont les différences sont sensibles. Le storyboard Décrire les fonctionnalités Décrire toutes les étapes relatives à des (inter)actions Permettre de comprendre le chemin ou le processus d un internaute ou de plusieurs (notion de rôle) 18
Le Zoning et le storyboard 19
«Nomadisme» 20
21
site web «responsive» une compatibilité optimale du design et des contenus sur les différents supports (écrans) site web mobile «template dédié» un contenu adapté prenant en compte les caractéristiques du support mobile et de l utilisateur «nomade» Application Web (web App) site mobile enrichi ou logiciel applicatif développée à l aide des technologies du web (html5), généralement placée sur un serveur et manipulable grâce à un navigateur Web Permet le stockage de données hors ligne, en étant fonctionnel, et d agir comme une application réelle au lieu de simplement se contenter de lecture = réactivité et mode déconnecté ex: messageries web en ligne, twitter ou facebook, google documents, ou encore les systèmes de gestion de contenu, les wikis et les blogs sont des applications web. Application mobile (App) application native logiciel applicatif indépendant mais souvent limité développée à l aide de framework «universel» (Apple, Android) et distribué via des catalogues en ligne: AppStore, Android Market que l on installe sur un smartphone. Mise à jour ou d installation nécessaire 22
Comment bien choisir entre site web mobile, Application native et Application web pour proposer la meilleure expérience client? 1/2 Le choix doit être le résultat d une analyse et d un diagnostic selon: une connaissance précise des attentes et des niveaux d équipements des utilisateurs, des standards imposés par les offres concurrentes; un diagnostic SWOT (Forces/Faiblesses/Opportunité/Menaces - Strengths, Weaknesses, Opportunities, Threats) de l utilisation de chaque technologie sur un périmètre fonctionnel comparable. 23 http://marketing-webmobile.fr/2011/12/developper-une-web-app-html5-avantages-inconvenients-bonnes-pratiques/
Comment bien choisir entre site web mobile, Application native et Application web pour proposer la meilleure expérience client? 2/2 Pour choisir la solution la mieux adaptée il faut aussi se poser les bonnes questions: A quelle population je m adresse? Quels sont les besoins pour répondre aux exigences techniques? Pourquoi se lancer dans le web mobile? Quel est le positionnement de mon canal mobile par rapport à mon canal web ou mes autres canaux? Ce sont les réponses à ces questions ET une bonne connaissance des différences techniques entre Web App et natif qui permettront de faire le bon choix. Il est possible qu en fonction du contexte, plusieurs options soient envisagées. Enfin, pour avoir une présence mobile performante, il faut investir (dans des budgets, des ressources, des compétences en interne et marquer une réelle volonté) et se donner les moyens de réussir, car les utilisateurs ne se contenteront pas de compromis. http://butterflyeffect.fr/blog/application-native-ou-web-application/ - http://butterflyeffect.fr/pages/app_ou_web_app http://marketing-webmobile.fr/2011/12/developper-une-web-app-html5-avantages-inconvenients-bonnes-pratiques/ 24
Application native nécessitant une mise à jour permanente des données http://www.gva.ch http://www.atipik.ch/fr/projects/gvapp2 25
Site mobile - Templates web dédiés http://www.cooperationinternationalegeneve.ch http://mobile.cooperationinternationalegeneve.ch 26
Lancy.ch Modèle responsive design 2013.0607 Home page Ecran mobile (mini 320x480) Ecran mobile et tablette vertical (mini 480x640) Ecran tablette vertical (740 >> 800) LOGO LOGO LOGO IMAGE HEADER medium Bienvenue Bienvenue Bienvenue ImG Caroussel ImG Caroussel ImG Caroussel sur-titre titre sur 2 lignes f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf dffsdf ASFASD ASDa sur-titre titre sur 1 ou 2 lignes f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf dffsdf ASFASD ASDa L ACTUALITÉ COMMUNALE L ACTUALITÉ LACTUALITÉ T CULTURE ET LOISIRS sur-titre titre sur 1 ou 2 lignes f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf dffsdf ASFASD ASDa L ACTUALITÉ COMMUNALE L ACTUALITÉ COMMUNALE L ACTUALITÉ CULTURE ET LOISIRS CALENDRIER CALENDRIER E L ACTUALITÉ CULTURE ET LOISIRS Meteo Accès c direct Sélection de pages Bloc x1 Meteo Accès direct f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv Sélection de pages f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv f<sdva<vsdv Bloc x2 Bloc x1 Bloc x2 Bloc x3 27
Lancy.ch Modèle Site mobile 2013.0610 LOGO LOGO LOGO LOGO Bienvenue Actualités Agenda infos pratiques ImG Caroussel titre sur 1 ligne Actualités Agenda Infos pratiques Associations Découvrir titre sur 1 ligne JJ.MM.AAAA ImG titre sur 1 ligne JJ.MM.AAAA ImG titre sur 1 ligne JJ.MM.AAAA f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf Du 27 octobre au 2 novembre Culture <SDVA<VSDV SC<sda VSDV SC<sda sdasd sdf ASF ASD ASDa ffsdf ASFASD ASDa Sports <SDVA<VSDV SC<sda VSDV SC<sda sdfas Loisirs ffsdf ASF ASD SDa FsdfsfFf FaS sdf dffsdf ASFASD << < 1 2 3 4 5 > >> Votre mairie le conseil administratif f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf dffsdf ASFASD ASDa f<sdva<vsdv SC<sda <VSDV SC<sda sdfas dffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf dffsdf ASFASD ASDa f<sdva<vsdv SC<sda dffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf LOGO LOGO LOGO LOGO Bienvenue Accueil Contact Plan du site Rss ImG Caroussel titre t sur 1 ligne Actualités Agenda Infos pratiques Associations o Découvrir r Actualités titre sur 1 ou 2 lignes JJ.MM.AAAA ImG f<sdva<vsdv SC<sda f<sdva<vsdv SC<sda f<sdva<vsdv SC<sda <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf <VSDV SC<sda sdfasdffsdf ASF ASD ASDa FsdfsfFf FaS Fsdf Agenda infos pratiques Culture Sports Culture Loisirs Politique Social Du 27 octobre au 2 novembre e Cette e semaine e <SDVA<VSDV < S SC<sda VSDV V SC<sda sdasd sdf ASF ASD ASDa ffsdf ASFASD A ASDa Sports <SDVA<VSDV < S SC<sda VSDV V SC<sda sdfas Loisirs s ffsdf ASF ASD SDa FsdfsfFf f f FaS sdf dffsdf f f ASFASD << < 1 2 3 4 5 > >> Votre Mairie Votre mairie Numéros d urgence Adresses utiles Gestion des déchets Carte Interactive Travaux routiers le conseil administratif a i f<sdva<vsdv < D SC<sda <VSDV V SC<sda sdfas- s dffsdf f d ASF ASD ASDa FsdfsfFf s F FaS Fsdf dffsdf f d ASFASD A ASDa f<sdva<vsdv < D SC<sda <VSDV V SC<sda sdfas dffsdf f d ASF ASD ASDa FsdfsfFf s F FaS Fsdf dffsdf f d ASFASD A ASDa f<sdva<vsdv < D SC<sda dffsdff d ASF ASD ASDa FsdfsfFf s F FaS Fsdf 28
UI interface utilisateur UX Expérience utilisateur Même si tout cela ne date pas d hier, les concepts de mobile first*, de content first, d ergonomie et UX sur mobiles, de performances web et d optimisation, sont en pleine mutation et font l objet des principales reflexions. * https://speakerdeck.com/janimakela/modern-web-design 29
Responsive web design «Design réactif» 30
Responsive web design L idée clé du responsive design est d adapter dynamiquement le site à son contexte d exécution avec un seul code source. Ces bonnes pratiques permettent d exploiter encore plus les avantages de la séparation du contenu et de la présentation: l intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d autres critères variés pour améliorer l apparence graphique et la lisibilité (voire l utilisabilité) d un site web. Intégration de règles pour les «comportements»: 31 agrandir la taille du texte agrandir la taille des contrôles et zones cliquables (pour une utilisation au doigt) faire passer le contenu sur une seule colonne escamoter ou adapter le/s menu/s masquer ou afficher des éléments spécifiques ajuster les dimensions et marges
32
Adaption dynamique 33
34
35
36
37
38
39
Responsive web design - Contenus complexes http://www.time.com/time/ 40
Responsive web design - Mobile first 41
Responsive web design - Contenus complexes http://www.lancy.ch 42
Techno 43
L avantage majeur est une optimisation sur le temps de chargement des pages, car moins d images, moins de code, moins de fichiers flash, etc. HTML5 Pas besoin de télécharger de programmes supplémentaires. Adapté à tous les Browsers. Supporté parfaitement par l ensemble des appareils mobiles (Androïd, ios, Windows Phone) et des navigateurs (Chrome, Internet Explorer, Firefox, WebOS, Safari, Nokia, Opera) Non propriétaire. Contrairement à Flash qui par exemple se voit privé des utilisateurs d Iphone et d Ipad étant donné qu Apple ne supporte pas cette technologie. Connexion directe et rapide au serveur pour des infos à jour et réactives ntégration de Widgets HTML5 gère de façon native les vidéos et les fichiers sons MP3. Par exemple, il vous est donc possible d insérer facilement une vidéo (Youtube, Vimeo etc.) sur votre présentation et de la visualiser sur votre téléphone, tablette, PC, etc. Réalisation d éléments graphiques ou des animations (avec des scripts JavaScript). Adobe commence à proposer des plugin pour les logiciels de créations graphiques afin de convertir les éléments graphiques au «format canvas». Le travail des Graphistes Web sera donc lui aussi touché par cette évolution. Certains bénéfices pour le Référencement SEO. (Flash est limité) Un fort potentiel de progression 44
CSS3 & javascript animations et transitions d éléments visuels fluides gestion optimisée de la typographie réduction du nombre d images par remplacement d éléments codés > bords arrondis, filets, boîtes, couleurs, dégradés, ombres, multi-colonage, effets textuels etc. 45
CSS3 46
Les avantages d une Web App développée en HTML5 et CSS3 47
HTML5 / CSS3 > Compatibilité des différents navigateurs > IE = encore un problème 48 http://www.techrevolutions.fr/les-navigateurs-mobiles-et-leur-compatibilite-avec-html5
Ecran retina 49
Ecran retina 50
L ergonomie des écrans nomades 51
De nouveaux codes visuels / Les nouvelles habitudes Icône «plus» Icône «grille d mages» Icône «liste» Icône «3 lignes - Menu» Gros boutons Footer - sitemap Pied de page - Plan du site Accordéons 52
Les polices de caractères: des solutions http://lawineagency.com/ 53
Les polices de caractères: des solutions 54
Les polices de caractères: compatibilité limitée Compatibilité des différents navigateurs : 55 http://www.hutchhouse.com/blog/web-font-rendering-techniques/#.unvmvjraz78
Font icônes 56
57
58
59
tendances design 60
Une structure de page... fréquente et donc commune... mais efficace 61
Une structure de page... http://www.tilde.io/ 62
Une structure de page... http://www.causedirect.org 63
L extrême simplicité http://www.themealings.com.au/ 64
L extrême simplicité «flat design» http://www.justsmith.com/ 65
«flat design» 66
«flat design» 67
Boxes et images http://omnia.ae/ http://www.stefancoisson.com/ 68
Boxes et images http://www.bellebanne.com.au 69
Le full screen avec background photo http://stephan-siegrist.ch/de/home t h i t h/d /h 70
Le full screen orienté outil local.ch 71
Le full screen avec background vidéo http://www.lifeofpimovie.com/ f i i / 72
Le full screen avec background vidéo http://www.taginterativa.com.br/ t t ti / 73
Parallaxe http://annasafroncik.it/ 74
La navigation en colonne de gauche http://www.echodesign.com/ 75
Polices XL http://www.paradox-labs.com/ 76
Mobile first - structure http://www.uppbroadgatepark.com/ 77
Mobile first - Accès simplifiés http://thenextweb.com/ 78
Mobile first - images http://barrelny.com http://barrelny.com/recap/2012/ 79
Navigation spécial tablette 80 http://francescomugnai.com/ /
81
http://www.simplesquare.com/blog/infographics/a-web-site-designed/ http://www.pompage.net/traduction/html5-et-le-futur-du-web http://mediaqueri.es/ http://www.alsacreations.com/ http://www.intechnic.com/blog/2013-web-design-trends-you-cant-afford-to-ignore/ http://www.inspiiired.com/75-websites-featuring-full-screen-photo-backgrounds/ http://www.techrevolutions.fr/les-navigateurs-mobiles-et-leur-compatibilite-avec-html5 http://www.webdesignertrends.com/2012/12/tendances-webdesign-2013-web/ http://www.blogduwebdesign.com http://www.alliga-media.fr/site_web_mobile_ou_application_native_%3f http://www.journaldunet.com/developpeur/client-web/bataille-html5-contre-applications-natives.shtml http://blog.kinaia.fr/communication-internet/comment-choisir-responsive-webdesign-site-web-mobile-application-947 http://marketing-webmobile.fr/2011/12/developper-une-web-app-html5-avantages-inconvenients-bonnes-pratiques/ http://www.dmoz.fr/informatique/application-iphone-native-ou-webapp-embarquee/#axzz2japonuyg http://butterflyeffect.fr/blog/application-native-ou-web-application/ https://speakerdeck.com/janimakela/modern-web-design http://www.lergonome.com/ http://www.directeurrtistique.net