Lors des premières réunions de conception d’un site internet ou d’une application, il est souvent nécessaire et plus clair de réaliser des schémas des contenus et de la structure attendue des différents écrans du projet. Cette étape de zoning ou de wireframe sert à l’élaboration des premières maquettes graphiques et techniques, ainsi qu’à l’élaboration de cartes d’expériences et de Wireflow en UX design.
Plutôt qu’une feuille blanche, il est préférable d’utiliser des gabarits. Utilisez les planches avec un seul écran à la fois si vous travaillez avec des pos-it, et celles qui regroupent 2 ou 4 écrans si vous griffonnez finement.
Avec ces feuilles, une règle et quelques bons crayons, vous pourrez créer vos wireframes à la vitesse de la pensée.
J’ai tendance à travailler de plus en plus directement avec Adobe XD, mais le papier reste pratique, tout le monde sait s’en servir. Il faut toutefois une bonne capacité d’abstraction pour valider un wireframe griffonné.
De nombreux gabarits aux formats iPhone 5, iPhone6, Galaxy Note 5, Nexus 5x, iPad, navigateurs internet desktop et mobile, smartwatch.
Pratique car utilisables immédiatement, et avec suffisamment de marge pour laisser des commentaires.
UX prototype paper kits
Des kits imprimables d’éléments d’interface standards pour prototyper rapidement sans ordinateur.
De superbes pochoirs avec des éléments d’UI pour crayonner des wireframe réguliers. Un peu cher mais un moyen classieux de gagner le respect en réunion.
À propos du dessin de wireframe
Le dessin n’est pas un talent. C’est une discipline technique. Plus on pratique, meilleur on devient. Je ne suis certainement pas le mieux placé pour en parler mais je peux vous recommander un livre.
101 Things I learned in architecture school de Matthew Frederick
Un livre court bourré de conseils technique pour faire de jolis croquis.
Une très bonne lecture, qui vous aidera aussi avec la perspective et vous donnera des notions de base en architecture.
Au delà du blogging, de nombreuses extensions permettent d’étendre les fonctionnalités de base. Tout est possible en terme de fonctionnalités.
Voici ma sélection personnelle d’extensions WordPress utiles. Ces plugins sont testés et approuvés par moi même, garantis de bon affichage sur tous les types d’écrans.
À noter : de nombreux plugins ne sont pas traduits. Retrousse tes manches et utilise le logiciel Poedit.
À noter 2 : comme on dit chez les alcooliques, ayez soif de modération. Moins de plugins = meilleure performance.
CoursePress
Module de elearning type mook, gratuit pour une formation, payant pour multiformations et meilleures possibilité de paiement https://fr.wordpress.org/plugins/coursepress/
BuddyPress
Module communautaire, avec login et page de profil utilisateur en front office, message entre les membres, mur, etc… Gratuit https://fr.wordpress.org/plugins/buddypress/
À compléter avec BuddyPress ActivityPlus pour améliorer le look des fils d’actualité, BuddyPress Activity ShortCode pour afficher les fils d’activités sur n’importe quelle page, Rendez Vous, pour avoir l’équivalent des événements de Facebook et User Menus pour personnaliser les intitulés de menu.
Booking Calendar WP Plugin
Gérer les réservations d’une ou de plusieurs salles, avec définition possible de créneaux horaires, d’un prix d’accès, d’un nombre de places maximum… Gratuit https://fr.wordpress.org/plugins/booking-calendar/
WP Serveur
Un excellent hébergeur français spécialisé WordPress avec une bonne infrastructure : création de clônes, rollback facile, sécurité améliorée, service client au top. À noter que l’hébergeur fournit gratuitement le thème DIVI à ses clients, avec un page-builder hors du commun. https://www.wpserveur.net/
Les grilles sont des guides définissant les zones d’expressions d’un espace et aidant à sa structuration, à son organisation, à son homogénéisation.
Un peu d’histoire
L’histoire des grilles de mise en page se confond aisément avec celle de la mise en scène typographique depuis l’invention de l’alphabet moderne par les phéniciens quelques 700 ans avant JC.
Les mises en pages traditionnelles reposaient sur une certaine utilisation du nombre d’or. Elles étaient adaptées aux prémices de l’affichage de l’information.
A gauche : les trois règles d’or les plus courantes à l’époque du plomb =3:4 – 1:4 / 2:3 – 1:3 / 5:8 – 3:8 ; à droite : principe de calcul de la régle d’or des 3:8 – 5:8 pour un format traditionnel A4 (une des plus généreuse ou artistique)
Les bases modernes de l’usage des grilles en mise en page ont été posée par Josef Müller Brockmann en 1961. Cela a largement participé à la formalisation du style suisse.
On pose les bases
Le rapport H / V répond idéalement au nombre d’or
Ça fonctionne aussi dans l’espace
Internet et la grille de 960 pixels
Les grilles sont un point de départ indispensable pour le design sur papier comme sur écran.
Dans le design de site Internet, il est courant de faire des maquettes de 960 pixels de large. Ceci est le fruit de la réflexion de designer cherchant la taille la plus proche de 1000 pixels (à cause de la résolution 1024×768 très répandue) offrant le maximum de possibilités graphiques.
On peut diviser 960 par 3, 4, 5, 6, 8, 10, 15 et 16.
Lors de la création d’une maquette, la réalisation de croquis permet de déterminer le nombre de colonnes nécessaires à la maquette. Les zonings, ou de manière encore plus précise les wireframes sont d’excellentes bases de travail.
On peut ainsi dans Photoshop poser les repères de colonnes et réaliser une mise en page aux proportions régulières et agréable.
Quelques conseils
Utilisez juste le nombre de colonnes nécessaires.
N’ayez pas peur de déborder de temps en temps. Les principes mathématiques de proportion (et de colorimétrie) n’exclue pas une dose de feeling.
Dans Photoshop
Une maquette Photoshop rigoureuse au niveau de la grille permet de réaliser facilement une feuille de style CSS. La taille des blocs et les marges étant régulières, la feuille de style est concise et efficace.
Dans votre logiciel de création préféré, l’usage de guides positionnés avec précision est indispensable.
Pour Photoshop, l’extension GuideGuide vous fera gagner un temps considérable.
Les grilles en HTML
Fortement liée à la vogue des contenus « responsifs » et « adaptatifs », la mise en page par grille passe par la débrouille (les styles sur la balise <DIV>).
De nombreux frameworks CSS proposent une gestion responsive des grilles, comme par exemple Bootstrap (voir en détail ici) et Flexible Grid System (plus d’info ici).
Actuellement à l’état de test, une spécification CSS « grid layout » permettra très bientôt une intégration encore plus facile des grilles dans les mises en page HTML, offrant de nouvelles possibilités techniques aux web-designers.
Un nom de domaine est un « masque » sur une adresse IP. Le but d’un nom de domaine est de retenir et communiquer facilement l’adresse d’un ensemble de serveurs (site web, courrier électronique, FTP…).
Par exemple, wikipedia.org est plus simple à mémoriser que 91.198.174.192.
Un domaine est un ensemble d’ordinateurs reliés à Internet et possédant une caractéristique commune.
Le domaine .fr est l’ensemble des ordinateurs en relation avec la France ;
le domaine paris.fr est l’ensemble des ordinateurs hébergeant des activités pour la ville de Paris.
Wikipedia
Un peu de technique
Lorsque l’internaute demande une URL, une adresse à son navigateur (ou autre agent utilisateur) ou qu’il clique sur un lien, le navigateur envoie, via le modem, une requête.
Pour trouver le serveur à qui la requête est adressée, il interroge une machine ayant la liste des noms de domaines et l’adresse IP qui leur correspond. Comme le nom de domaine est indiqué dans l’adresse, il retrouve l’IP qui lui permet de se diriger vers le serveur concerné.
Il interroge le serveur. Celui-ci lui répond et lui envoie une copie de la page demandée. La page est rapatriée sur le poste client et le navigateur peut l’afficher.
Anatomie d’une adresse
Une adresse Internet se décompose en plusieurs éléments :
Le protocole ou préfixe est le moyen technique utilisé pour se connecter à l’adresse. Les protocoles les plus fréquents sont http, https et ftp
L’extension définit le type de site. Il peut symboliser un type d’activité (.com, .org, .asso, .gov, .mil, .edu…) ou une zone géographique (.fr, .be, .uk, .us…)
Le domaine est le nom propre du site
Les sous-domaines et dossiers sont des divisions pratiques du domaine
Les extensions
Les plus classiques sont .com, .net et .org. Chaque pays dispose aussi d’une extension propre.
Les extensions par pays
Récemment de nombreuses nouvelles extensions de nom de domaine sont apparues. Plus précises dans la description de l’activité du site, plus explicites pour le référencement, mais aussi souvent plus chères.
Quelques exemples : .paris, .art, .bio, .email, .bzh, .club, .consulting, .hotel, .restaurant, .actor, .immo, .music, .xxx…
Des entreprises peuvent débloquer une extension personnalisée.
Exemples : .AMAZON, .AOL, .APPLE, .AUDI, .AXA, .HERMES, .LECLERC, .LIDL, .MCDONALDS, .MICROSOFT, .SFR, .SNCF, .TOTAL, .TOYOTA, .YOUTUBE
Coup du dépot de dossier à l’Icann : 185 000 $
Réserver un nom de domaine
Un nom de domaine ne s’achète pas, il se loue à l’année.
En 1998 est créé L’ICANN, organisme non-lucratif basé chargé d’administrer les adresses IP, les noms de domaine de premier niveau et de coordonner les intervenants techniques.
Pour réserver un nom de domaine, on passe généralement par un opérateur agréé par l’ICANN , appelé « registar ».
Le Registar est chargé de la bonne tenue de la base de donnée des noms de domaines qui sont réservés par ses soins. De ces mises à jours dépend le fonctionnement des serveurs DNS.
La location d’un nom de domaine coûte autour de 12 euros HT / an.
Un nom de domaine sert aussi de référence administrative.
Lors de l’enregistrement, il faut donner des références de contact (postales, téléphone, email). Ceci doit permettre de contacter le responsable du site.
On peut obtenir les informations relatives à un nom de domaine via une requête WHOIS (registar, adresse IP, dates
d’activité, contacts…).
Quand il arrive à expiration, le nom de domaine redevient libre à la location.
Généralement les registars préviennent leurs clients avant expiration pour qu’ils ne risquent pas de perdre leur nom de domaine par inadvertance.
En effet il est fréquent que des noms de domaine existants soient rachetés par des spéculateurs à la limite de la malhonnêteté dans le but de monnayer une revente à leur locataire initial.
On parle de « second marché » des noms de domaine.
La location d’un nom de domaine est indépendante de l’hébergement.
Ainsi un site peut avoir plusieurs noms de domaines.
Avoir plusieurs noms de domaine pour un site peut répondre à plusieurs objectifs :
Maximiser l’arrivée des internautes sur un site
Exemple : liberation.fr liberation.com libe.fr libe.com
Protéger sa marque ou son idée
Exemple : louisvuitton.com vuitton.com vuitton.org
Optimiser la visibilité par un référencement multiple
Exemple : Cmonassurance.com Mutuelle.fr
Le choix du nom de domaine principal est stratégique.
Idéalement il faut qu’il soit à la fois simple, court, descriptif et en adéquation avec les termes saisis sur le sujet concerné dans les moteurs de recherches.
Conseils généraux
Choisir de préférence l’extension .com si elle est libre.
L’extension .fr est aussi très forte sur le territoire national.
Éviter les ambiguïté : caractères spéciaux, accords grammaticaux difficiles, lettres consécutives… sont à éviter.
Ne pas concurrencer directement un domaine existant en prenant une autre extension.
Les noms de domaines peuvent donner lieu à des conflits juridiques, chaque partie revendiquant le droit d’auteur, la propriété intellectuelle ou industrielle du nom litigieux.
Vérifier le passif d’un nom de domaine pour s’assurer qu’il n’a pas mauvaise réputation sur http://www.archive.org
Ne pas réserver de noms de domaine multiple sans projet commercial ou industriel sérieux.
Attention aussi aux double-sens !
Éviter les principales arnaques au nom de domaine
Suite à la consultation d’un registar sur la disponibilité du nom de domaine, il est fréquent si la réservation n’est pas immédiate que le nom de domaine soit squatté par un « parking de nom de domaine ». Le squatteur espère que vous le contactiez pour vous le revendre cher. Il pense que vous n’aurez pas le choix et vous sentiez obligés de payer (nom brainstormé attrayant, identité visuelle déjà conçue…).
À l’approche de l’expiration de votre nom de domaine, une société inconnue vous contacte et vous propose de prolonger votre réservation à un prix plus cher que la normale.
Vérifiez bien que le courrier émane bien de votre registar.
Autre arnaque fréquente : la tentation de la gratuité.
Vous pouvez trouver dans les noms de domaine dits « gratuits » lors de recherches sur des moteurs de recherche.
Certains Registar proposent légitimement des offres hébergement + nom de domaine en « offrant » le nom de domaine.
D’autres sites proposent sans hébergement noms de domaine gratuits. C’est à éviter absolument pour deux raisons : les noms proposés ont souvent des extensions n’inspirant pas confiance aux utilisateurs, deplus les prestataires en question peuvent cesser leur activité sans préavis ou en monnayant cher le maintient du service.
Google fournit gratuitement de nombreux outils aux graphistes et aux designers
Google est actuellement omniprésent sur internet. Tout le monde utilise leurs services, volontairement ou pas.
Ces services sont nombreux (trèèès nombreux en fait), comme en témoigne la structure d’Alphabet inc.
De nombreux services ont une vie courte : ils ne rencontrent pas l’adhésion des utilisateurs, ils sont donc abandonné. D’autres changent de forme : par exemple Google Maps en passant de l’entière gratuité à une formule payante pour les sites à forte fréquentation intégrant des cartes, ou Picasa qui s’arrête net, ou encore Sketchup qui est revendu. Gardez donc à l’esprit que les outils fournis par Google pour les graphistes ne sont pas forcément très pérennes. Il existe heureusement dans de nombreux cas des alternatives aux produits Google, mais ce n’est pas l’objet de cette liste.
Illustration : Derek Kim pour Google.com/design
Navigateur Internet
Chrome est un navigateur solide, rapide et gratuit. On peut s’y connecter avec son compte Google et sauvegarder sa configuration, pratique quand on utilise plusieurs machines.
Nativement la fonction « Examine l’élément » en clic droit et la possibilité de traduire instantanément le contenu de page se montrent très utiles.
Coté extensions, je recommande :
Awesome screenshot, pour faire tout type de captures d’écran notamment capturer une page très longue d’un seul clic. L’extension inclut un outil de floutage, et un outil de commentaire.
Eye dropper, pour faire des relevés colorimétriques dans une page.
What font, pour savoir rapidement quel police est utilisé dans une page.
Web developper, pour activer/desactiver image, javascript, css, pour surligner la structure de la page, accéder facilement aux médias de la page…
Chrome est aussi une plateforme d’expérimentation WebGL, HTML5, CSS3, Javascript via le site chromeexperiments.com.
Le moteur de recherche par image
La recherche par image, accessible en cliquant dans l’appareil photo à droite du champ de recherche, permet de trouver l’origine d’un visuel, trouver des déclinaisons, vérifier qu’on vous a pas piqué un visuel.
En 2010, Google a changé la donne de la typographie en web-design. Google Fonts propose plus de 600 polices de caractère très bien dessinées en usage libre et gratuit. On peut les utiliser dans un site grâce à un appel aux serveurs Google, ou télécharger la police et en disposer sur un ordinateur.
La police officielle de d’interface d’Android est une Google Font : Roboto.
Google fourni aussi une bibliothèque d’icônes.
Logiciel d’animation HTML5
Il n’est pas parfait (nécessitant une connexion, interface un peu poussive, en beta depuis 2013) mais il est gratuit et mis à jour : Google webdesigner est un logiciel d’animation HTML5 pour faire de l’UX design, ou de la publicité en ligne.
Cette liste Youtube en anglais rassemble les démos des développeurs de l’application.
Alerte rouge sur la pérennité du service, à n’utiliser que pour dépanner, ou réaliser des projets ne s’inscrivant pas dans la durée.
La cartographie
Google Maps est un très bon outil pour obtenir une cartographie rapidement. La résolution est insuffisante pour une bonne qualité d’impression, mais en ce qui concerne le web, c’est très utilisable.
Voici deux outils de personnalisation de carte : Maps Engine de Google permet de créer des cartes avec des repères ou des itinéraires Mapbuildr.com est un site tiers qui propose de personnaliser les couleurs et les informations affichées sur les cartes Google.
Attention, si vous avez en tête un projet de site incluant de la cartographie Google Maps ne sera pas forcément gratuit. Au delà de 25000 carte affichée par jour cela devient payant.
Streetview
L’attirail complet
Petit cousin de Google Maps, Streetview est le résultat du quadrillage de toutes les routes du monde par les voitures Google et leurs caméras.
Le programme Arts et Culture permet de visiter des dizaines de musées du monde entier gratuitement, avec un niveau de zoom sur les œuvres complètement hallucinant.
Le coté business de Streetview c’est qu’on peut passer par un photographe certifié Streetview pour faire la promotion d’un endroit dans l’environnement Maps – Streetview – Places – Search. On peut aussi publier ses streetview relativement facilement avec les nouvelles caméras 360
Un bon nombre des services Google cités précédemment sont utilisables pour la construction et la gestion de site internet. Google Fonts, Google Maps et Google Streetview ont été conçus dans l’optique d’une intégration dans un site internet.
Il faut ajouter :
Google Analytics, l’outil statistique est incontournable. Il y a beaucoup à dire sur le sujet. En ce qui concerne le graphisme et le web-design en particulier, les analyses statistiques sont indispensables à la bonne évaluation d’un design et à la bonne évolution d’un site dans le temps.
Google Optimize est un outil découlant de l’usage de Google Analytics. Il permet la création et la gestion de tests comparatifs très fins, voire de servir un contenu spécifique à un utilisateur spécifique. Le split-test, test comparatif ou A-B testing, c’est le juge de paix du design numérique. Sur un site à forte fréquentation ou peut rapidement voir quelle mise en page est la meilleure, quelle accroche a le meilleur impact ou plus simplement si le bouton vert vend plus que le bouton bleu.
Les tests comparatifs sont un soulagement pour le graphiste et le designer. On peut prouver qu’une couleur, une typo ou une mise en page particulière a de meilleurs résultats. La cohorte des utilisateurs qui défilent sur les pages tels les clients dans le bazar d’Au bonheur des dames est implacable de bon sens. Avant de faire un changement, il est indispensable de le soumettre à un test grandeur nature.
Il faut aussi noter que c’est aussi que ces données sont valables si l’on a un objectif clair et quantifiable (vente, abonnement, clic…).
Google Resizer permet de voir rapidement l’apparence d’un site sur ordinateur, tablette et mobile. Attention ça ne vaut pas un test sur un vrai device.
Ma maçonnerie est responsive !
De nombreux outils plus techniques et moins graphiques sont disponibles sur un portail dédié et sur cette page.
3D
Google s’est séparé de son logiciel d’édition 3D SketchUp. J’avoue ne pas avoir compris la manœuvre.
poly.google.com est une bibliothèque de modèles 3D téléchargeables gratuitement.
Google Earth affiche une modélisation 3D mondiale, avec des détails parfois saisissants
Bureautique
Google Drive est un outil de stockage et de partage de fichier type Cloud gratuit pour le grand public. Vous disposez de 15Go et d’un système de droit d’accès et d’édition assez cool.
Pour les pros, il y a le cloud pro, qui n’est pas connecté à drive. Il fournit espace disque mais aussi temps processeur.
Photos de Google permet de stocker, d’organiser, de retoucher sommairement et de partager facilement vos photos. Le service repose sur Google Drive. Plusieurs personnes peuvent administrer et partager un album.
Google documents est la suite de bureautique maison.
Docs est le traitement de texte, Sheets le tableur et Slides l’outil de présentation.
Si fonctionnellement ils peuvent sembler limités, ils présentent 4 avantages :
Pas d’installation nécessaire, tout se passe dans le navigateur
Gratuit, il faut juste un compte Google
Travail collaboratif, vous pouvez être à plusieurs sur le même document et voir en direct sur quelle zone travaille une autre personne qui a accès au document
Et la faculté étonnante d’ouvrir des .doc ou .docx corrompus que Word ou Open Office ne veulent pas ouvrir.
Et on peut « Embed » des documents dans un site, ou les intégrer à un CMS via des plugin spécialisés comme WordPress.com for Google Docs.
Doctrine graphique, documentation et recommandations
L’entreprise a une approche graphique rationnelle : le material design, qu’elle applique à la charte graphique de tous ses produits, notamment Androïd.
Le material design :
s’appuie sur la métaphore matérielle intentionnelle pour structurer le graphisme en cartes hiérarchisées graphiquement (typographie, couleur, forme, effet d’ombre, proportion…)
utilise un graphisme simple, accessible, vivement coloré, dans la lignée du design suisse.
se sert du mouvement pour attirer l’attention sur un point particulier ou matérialiser la continuité d’une action
Google propose des formations en ligne et de événements sur son portail « Pour les pros » et sur son portail « Digital Active ».
Ces formations gratuites vulgarisent des sujets variés : référencement, Analytics, emailing, e-commerce, m-commerce, stratégie social media… et débouchent sur des certifications.
Les examens de Google sont gratuits et ont entre 12 et 18 mois de validité.
Conclusion
Quoi qu’on puisse penser de l’entreprise supra-nationale, ces outils de Google pour les graphistes sont gratuits. « Si c’est gratuit, c’est toi le produit », et c’est vrai : Google se sert de votre manière d’utiliser ses services pour en affiner la pertinence.
Si cela vous pose des soucis de conscience ou de confidentialité, utilisez plutôt des services équivalents de la concurrence. Si cela ne vous inquiète pas, profitez de ce qui vous est donné.
Lors des premières réunions de conception d’un site internet ou d’une application, il est souvent nécessaire et plus clair de réaliser des schémas des contenus et de la structure attendue des différents écrans du projet. Cette étape de zoning ou de wireframe sert à l’élaboration des premières maquettes graphiques et techniques, ainsi qu’à l’élaboration de cartes d’expériences et de Wireflow en UX design.
À propos du dessin de wireframe
Fortement liée à la vogue des contenus « responsifs » et « adaptatifs », la mise en page par grille passe par la débrouille (les styles sur la balise <DIV>).
Lorsque l’internaute demande une URL, une adresse à son navigateur (ou autre agent utilisateur) ou qu’il clique sur un lien, le navigateur envoie, via le modem, une requête.
En effet il est fréquent que des noms de domaine existants soient rachetés par des spéculateurs à la limite de la malhonnêteté dans le but de monnayer une revente à leur locataire initial.
Autre arnaque fréquente : la tentation de la gratuité.
En 2010, Google a changé la donne de la typographie en web-design.
