Il y a pas mal de discussions sur les outils dans la communauté des designers. Certains ne jurent que par Photoshop, d’autres écrivent des articles opiniâtres sur le passage au nouveau concurrent, Sketch. Les applications aux grosses fonctionnalités comme celles de la suite Adobe sont en train de perdre du terrain face aux applications en ligne faciles à utiliser comme Canva.
Outils payants ou open-source ?
La vérité est que les outils ne sont pas si importants.
La plupart des styles peuvent être obtenus à l’aide d’une poignée de fonctions qui sont disponibles même dans des applications en open-source, comme Inkscape ou Gimp. La tendance actuelle du flat design rend cela encore plus facile. Avec la montée en puissance des nouvelles options CSS3, les images ne sont plus nécessaires pour créer la plupart des mises en page.
Bien sûr, certains outils peuvent améliorer un workflow de design. J’ai consacré une partie de cette série d’articles à une liste des meilleurs outils disponibles.
Vous aurez la liste à partir de la newsletter (si vous y êtes inscrit, si non, faites le dans la barre latérale).
En règle générale, lorsque vous travaillez avec des applications d’édition vectorielle, vous aurez besoin d’apprendre à utiliser les outils de forme (rectangle, ellipse, rectangle arrondi…), tracer et modifier les tracés, utiliser le pathfinder et l’outil texte.
Photoshop offre une tonne de fonctionnalités supplémentaires, mais elles sont pour les photographes, pas pour les designers.
Si vous n’éprouvez aucun intérêt à apprendre à utiliser un logiciel de design graphique, mais avez besoin de mettre vos idées sous une forme numérique utilisable, envisagez d’embaucher un designer pour transformer vos idées et croquis en fichiers prêts à l’emploi.
Formats d’image
Chaque logiciel de design a son format propriétaire, mais ce n’est pas tellement utilisé sur le web. Pour utiliser des images sur le Web, vous devrez exporter soit en png, jpg, svg ou convertir en CSS.
Les bitmap (matriciels) sont des formats qui perdent en qualité lorsque agrandis. Les exemples incluent les formats jpg et png.
En revanche, les formats vectoriels ne perdent pas en qualité, mais ne conviennent que pour des éléments plats, en couleur unie (comme les logos). Les exemples sont svg et les formes CSS.
Formats d’image – Matriciel vs Vectoriel
Différents formats d’images ont des des usages spécifiques.
Le jpg est surtout utilisé pour les photos. Il ne gère pas les pixels transparents – dans les espaces où il n’y a pas de couleur, le jpg se remplira de blanc.
Le png est utilisé lorsque vous avez besoin de transparence, et est sans perte de qualité. Cela peut rendre les images lourdes, mais il est encore très populaire pour certains éléments de l’interface utilisateur (boutons, en-têtes, …).
Chaque fois que vous le pouvez, vous devriez vous efforcer de créer avec CSS. Ceci dans le but de d’assurer de la bonne résolution des images qui composent une interface, et vous aider avec un design responsive.
Si vous avez besoin d’une solution statique et avez des formes plus complexes que les navigateurs peuvent interpréter difficilement, utilisez le format svg.
Dimensions de l’écran
À l’heure actuelle, la largeur d’écran la plus répandue est 1366px. Il n’existe pas de règle sur la largeur des sites, et vous devriez toujours designer pour votre propre audience – cependant, commencer par un document de 1366px de largeur semble raisonnable.
Responsive Design par Ethan Marcotte – A Book Apart
Pour avoir une meilleure idée de la façon dont le résultat final aura l’air, je recommande régulièrement de vérifier vos design sur des navigateurs mobile et desktop tout au long du processus de conception. Référez-vous à Screensiz.es pour commencer avec la bonne résolution et la bonne taille d’écran.
Dans le prochain et dernier article de cette série introductive, nous aborderons comment exporter vos images.
Laisser un commentaire