WEB design. Pierre Chassany Comstone.ch vocables.com

Transcription

1 WEB design Pierre Chassany Comstone.ch vocables.com

2 graphisme Méthodologie(s) «Nomadisme» Responsive web design Techno tendances design 2

3 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 3

4 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

5 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

6 Méthodologie(s) 6

7 Le Travail d équipe webdesigner Chef de projet Développeur(s) 7

8 * 8 * Le recettage d un projet web consiste a tester les fonctionnalités du produit livré

9 9

10 10

11 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

12 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

13 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

14 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 ing? 14

15 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

16 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

17 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

18 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

19 Le Zoning et le storyboard 19

20 «Nomadisme» 20

21 21

22 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

23 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

24 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

25 Application native nécessitant une mise à jour permanente des données

26 Site mobile - Templates web dédiés

27 Lancy.ch Modèle responsive design 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

28 Lancy.ch Modèle Site mobile 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 << < > >> 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 << < > >> 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

29 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. * 29

30 Responsive web design «Design réactif» 30

31 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 32

33 Adaption dynamique 33

34 34

35 35

36 36

37 37

38 38

39 39

40 Responsive web design - Contenus complexes 40

41 Responsive web design - Mobile first 41

42 Responsive web design - Contenus complexes 42

43 Techno 43

44 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

45 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

46 CSS3 46

47 Les avantages d une Web App développée en HTML5 et CSS3 47

48 HTML5 / CSS3 > Compatibilité des différents navigateurs > IE = encore un problème 48

49 Ecran retina 49

50 Ecran retina 50

51 L ergonomie des écrans nomades 51

52 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

53 Les polices de caractères: des solutions 53

54 Les polices de caractères: des solutions 54

55 Les polices de caractères: compatibilité limitée Compatibilité des différents navigateurs : 55

56 Font icônes 56

57 57

58 58

59 59

60 tendances design 60

61 Une structure de page... fréquente et donc commune... mais efficace 61

62 Une structure de page

63 Une structure de page

64 L extrême simplicité 64

65 L extrême simplicité «flat design» 65

66 «flat design» 66

67 «flat design» 67

68 Boxes et images

69 Boxes et images 69

70 Le full screen avec background photo t h i t h/d /h 70

71 Le full screen orienté outil local.ch 71

72 Le full screen avec background vidéo f i i / 72

73 Le full screen avec background vidéo t t ti / 73

74 Parallaxe 74

75 La navigation en colonne de gauche 75

76 Polices XL 76

77 Mobile first - structure 77

78 Mobile first - Accès simplifiés 78

79 Mobile first - images

80 Navigation spécial tablette 80 /

81 81

82