SVG Summit 2016: plein feu sur le format vectoriel ouvert SVG

Affiche Web du SVG Summit 2016Le SVG est une bibite rare! À la fois code et image, il peut être léger (comme le logo de Google dont une variante mobile ne pèse que 305 bytes!) mais aussi très chargé, soit plusieurs Mo. Il peut être interactif ou statique et n’a pas de résolution fixe. On peut le visionner dans un navigateur ou dans un logiciel graphique… On en vient à se demander ce que ça mange en hiver!

En janvier dernier, pour en savoir plus, j’ai assisté à la toute première conférence en ligne sur le sujet, organisé par Environments for Humans  : Le SVG Summit 2016. La liste des présentateurs était un heureux mélange d’illustrateurs, d’animateurs et d’intégrateurs. Ils ont tous parlé de l’usage qu’ils font du SVG dans le cadre de leurs pratiques respectives.

▶ Suite : Introduction au SVG


Conclusion

Après 15 ans d’existence, le SVG reçoit enfin l’attention qu’il mérite. L’avenir de cette technologie aujourd’hui implémentée dans tous les navigateurs modernes est prometteur. Elle continuera de nous en mettre plein la vue dans les années à venir.

Design web: comment tirer parti de l’innovation des logiciels libres

Émilien Edmond évolue aussi vite que le web! Designer UX/UI principal chez Savoir-faire Linux depuis bientôt trois ans, il adapte continuellement ses processus de travail. Le 18 mars dernier, il inaugurait la piste Design du Web à Québec (#WAQ) 2015 en lançant un message clair aux designers et enseignants qui utilisent encore l’arsenal logiciel classique du design propriétaire sans se poser de question. D’après lui, le moment est venu d’examiner — ou de réexaminer — de très près ce que leur propose aujourd’hui un certain nombre de logiciels libres.

Édités par des startups ou des chefs de file du secteur comme Adobe, portés ou appuyés par la communauté, ces logiciels s’adaptent rapidement aux réalités changeantes du Web et plusieurs d’entre eux arrivent aujourd’hui à maturation. En quoi leur utilisation pourrait-elle avoir un impact positif sur le travail des designers Web? Sont-ils fiables et matures? Y a-t-il encore des freins à leur utilisation? Si oui, comment les débloquer? Quelles sont les futures innovations auxquelles il faut s’attendre? Voici les principaux sujets abordés par Émilien dans cette conférence.

Sans oublier la présentation, rapide mais commentée, de plusieurs logiciels et sources d’information complémentaire:

  • Pencil: maquettes et prototypes (24’40 »)
  • Inkscape: dessin vectoriel (25’23 »)
  • Scribus: PAO (26’14 »)
  • Krita: dessin et illustration (26’31 »)
  • Gravit: éditeur graphique (27’03 »)
    NB: les sources de ce logiciel ne sont plus disponibles depuis mai 2015, mais un fork de la version GPL d’août 2014 est disponible sur Github.
  • Brackets: éditeur texte (28’05 »)
  • Framer: animation (28’57 »)

Et pour rester à l’affût de l’innovation du design libre et ouvert:

Pourquoi et comment établir un processus de design web?

Processus de design dans le cadre de projet web adaptatif

Depuis l’agrandissement du bureau Savoir-faire Linux de Québec subséquent au rachat de L3interactive, une entreprise spécialisée dans le développement web en logiciel libre, l’équipe design et, plus largement, frontend travaille et améliore son processus de design.

Ce processus est souvent passé en revue et amélioré en fonction des post-mortem ou des simples observations consignées au fil du déroulement des projets.

Pourquoi établir un processus de design?

Les raisons sont multiples mais, principalement, cela nous permet d’optimiser le déroulement du travail au cours d’un projet et de contrôler la qualité du produit livré. Les étapes de création deviennent aussi très claires pour le client.

Un processus peut-être considéré comme une feuille de route théorique des étapes et des bonnes pratiques à suivre, dotée d’une certaine flexibilité en fonction des équipes, du projet ou du client.

Le processus en détails

Pour chaque projet nous adoptons la méthodologie agile, ce qui permet principalement de voir le projet se monter au fur à mesure des itérations et de le réorienter au besoin. Chaque étape de ce processus est de plus soumise à une assurance qualité du visuel et des fonctionnalités garantissant la conformité et la qualité de nos livrables.

Processus de design - Site web responsive - Savoir-faire Linux

1. Recherche et définition

Recherche et définition en début de projet web

Un premier rendez-vous est nécessaire pour apprendre à se connaître, pour nous assurer que nous comprenons le secteur d’activité et la nature de l’entreprise cliente. Nous abordons entre autres les motifs de la refonte, les objectifs à atteindre, les cibles visées et les appareils à supporter.

Dès cette première réunion, nous établissons les protocoles de communication, les étapes, les livrables, les échéanciers, les rôles et les attentes.

Les informations utiles sont retranscrites dans la documentation.

2. Documentation

Documentation projet web

Véritable bible, le document de référence est mis à jour dès le début du mandat et jusqu’à la fin des maquettes filaires. Il permet d’expliquer, d’annoter tout ce qui est nécessaire à la bonne compréhension du projet. Chaque intervenant, chez Savoir-faire Linux comme chez le client, est ainsi à même de bien comprendre le projet. L’arborescence des sites est intégrée au document.

Exemple de documentation

3. Les maquettes filaires (wireframes)

Exemple de wireframe

Une fois que nous avons tous les éléments en main, des premières maquettes filaires (ou wireframes) cliquables sont produits. Afin de réduire le coût, nous ne produisons que celles qui sont nécessaires à la couverture de l’ensemble des besoins. Elles sont déclinés dans les deux résolutions extrêmes (ordinateur de bureau et mobile).

Même si le projet comporte la portabilité sur tablette, en règle générale, nous ne nous attaquons à celle-ci qu’à partir du prototype. Le projet ayant déjà été pensé aux deux résolutions extrêmes, nous réutiliserons alors les comportements conçu soit pour le mobile, soit pour l’ordinateur de bureau.

Exemple de maquette filaire

4. Le prototype

Exemple de prototypage rapide

Cette étape permet de projeter rapidement les wirefames et d’être sûr que tout fonctionne bien. Le prototype est un bon outil pour vérifier les hypothèses établies en phase de wireframe. Plus tôt l’on se rendra compte des ajustements à faire, moins cela aura d’impact sur le projet en termes de calendrier ou de budget.

Exemple de prototype html

Exemple de prototypage rapide (animation de jpeg) target= »_blank »

5. Les maquettes graphiques

Exemple de maquette graphiques

En accord avec la charte graphique de l’entreprise ou selon la direction que celle-ci souhaite donner à son projet web, nous développons des maquettes graphiques pour ordinateur et mobile. Toutes les maquettes filaires ne sont pas forcément déclinés. Le but consiste à couvrir les gabarits nécessaires de façon à donner une projection cohérente du futur site web. Souvent, au lieu de faire une page, nous extrayons ses composants que nous designons directement dans une page UI, composée de tous les éléments nécessaires du site web.

Exemple de maquettes graphiques

6. Le guide de style

guide-de-style

La création d’un guide de style est une pratique plutôt émergente mais nécessaire, surtout dans le cadre d’un projet adaptatif ou d’un site comportant beaucoup de contenu. Ce guide rassemble une collection de règles ou de composants définissant les conventions de style à utiliser pour le projet. En général, on retrouve les éléments de la page UI, mais de façon interactive. Cette étape est faite par un intégrateur graphique, qui retranscrit les éléments des maquettes en code pouvant être interprété par les navigateurs. On cherche ainsi à réduire le coût tout en augmentant la qualité. Le client pourra par ailleurs réutiliser ce document pour d’autres projets.

Guide de styles

7. L’intégration graphique

intégration graphique

Nous finalisons l’intégration graphique en repartant du prototype développé et y intégrant les éléments du guide de style, en commençant par la version mobile afin d’optimiser ses performances. Nous faisons en sorte que tout le contenu soit régi par la feuille de style (CSS), que son intégration soit conforme aux normes du W3C ainsi qu’aux principes d’accessibilité. Le respect de ces standards à notamment un impact positif sur le référencement.

Site web de la SSQ

8. Lancement

La récompense de tant d’efforts est arrivée. Nous avons pour coutume de dire que la mise en ligne n’est pas la fin d’un site internet, mais au contraire, son commencement. En effet, un site web est une matière vivante qui nécessite une entretien régulier afin d’être toujours à son meilleur.

Exemples de réalisation