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.

google for design illustration by derek kim

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.
  • Page ruler, pour mesurer sur 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

google image search

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.

Exemple.

Également disponible en extension pour Chrome.

Polices de caractère

logo google fontsEn 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.

google-icones-2

 

Logiciel d’animation HTML5

google webdesigner

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.

custom-google-maps-1

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

Google street view

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

Web-design

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 Analytics

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.
conversion-optimization-testing-multi-goalLe 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.

Google Resizer

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 material design layering

Le portail du design de Google est riche en recommandations de design et en témoignages.
On trouve aussi d’intéressantes guidelines pour le design interactif et l’UX design dans le portail des développeurs.
Chaque service Google communique via via des comptes Google Plus (c’est à peu près l’unique utilité de ce réseau social) et des chaînes Youtube (la principale étant la chaine Google).

Formation et certifications

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.

Le programme « Partners » permet aussi de passer les certifications Analytics, Adwords et Mobile.

Les cours de préparation sont ici :

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é.

Publié par Fred

Graphiste, webdesigner, technologue du numérique, papa. Suivez moi sur Twitter.com

Laisser un commentaire