Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

CSS3, polices web et icones

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
All About Trends in Web Design
Video in Web Design

French (Français) translation by Henri Lotin (you can also view the original English article)

Nous sommes vraiment chanceux de travailler dans une industrie comme l’industrie du web. De nos jours, nous avons tellement de nouvelles astuces, techniques et méthodes de travail de tous le temps. Aussi, nous sommes vraiment chanceux que nous sommes à une époque où, comme ces nouvelles technologies sont introduites, nos navigateurs peuvent (pour l’essentiel) être assez rapides suivre, alors nous arrivons à mettre ces nouvelles technologies dans nos designs (et le top, même dans le travail pour le client !) plus que jamais auparavant.

CSS3 est l’une des ces technologies grandes nouvelles (un peu). Avec lui sont venus une foule de choses qui rendent notre vie plus facile en tant que designers et développeurs. Comme nos navigateurs deviennent meilleurs, nous pouvons être plus aventureux avec nos idées et nos designs que nous créons.

Cependant, nous sommes également à une époque où nous faisons du design pour les plus utilisateurs, les périphériques, les navigateurs et les technologies que nous avons jamais fait auparavant. Avant l’âge du smartphone, de la tablette et du frigo connecté à internet, il n’y avait vraiment qu’une seule façon d’accéder à l’Internet ; Grâce à un ordinateur normal. Et la résolution d’écran plus courante à l'époque était 640px x 480px ou 800px x 600px !

Aujourd'hui, nous avons des milliers de périphériques différents, des tailles d’écran et des contextes que nous sommes censés gérer. Si nous considérons seulement les écrans et les tailles d’écran qu'il faut gérer, nous avons des milliers d’appareils mobiles (téléphones mobiles, smartphones, tablettes, netbooks, etc.), les écrans Retina, écrans standards, écrans haute définition, petits et grands écrans et ainsi de suite, donc bien plus encore.

Alors que c'est peut être très difficile, la quantité de choses que nous avons à gérer seulement va croissant, donc c’est quelque chose que nous devons adapter et en apprendre.


Notre processus doit s’adapter

Et qu'est-ce cela signifie pour nos processus ? C’est une tâche impossible de tester votre site web sur chaque dispositif sur lequel on pourrait éventuellement regarder votre site. Au lieu de cela, il faut effectivement changer notre processus pour le mieux. Je suis sûre qu'en tant que développeur, vous avez eu à le faire vous-même, et c’est la même chose en tant que designer.

Nous pourrions avoir à prendre des mesures supplémentaires pour améliorer notre processus de design pour le mieux. Un exemple de ceci est d'être plus à l’aise en itérant les idées de design pour la typographie (par exemple) dans le navigateur, plus rapide. Quoi qu’il en soit, je peux vous garantir que votre processus doit pouvoir s'ajuster légèrement.


CSS3

Bien qu’il semble que CSS3 est une chose plus récente, avec l’adoption d’un grand nombre de techniques populaires CSS3 étant utilisées au cours des deux dernières années, les premières ébauches pour CSS3 datent de 1999 ; Il y a quatorze ans !

Contrairement aux précédentes spécifications CSS (par exemple, CSS2), CSS3 a été divisé en plusieurs modules - et à la mi-2012 il y plus d’une cinquantaine de modules qui ont été publiés. Quatre d'entre eux en particulier ont été publiés sous forme de recommandations, où le module a fait l’objet d’une quantité massive d’examens et de tests avant d’être recommandé pour une utilisation complète. Les quatre modules W3C recommandés CSS3 sont déjà :

  • Media Queries
  • Namespaces
  • Sélecteurs (niveau 3)
  • Couleur

Autres modules, tels que les « Arrière-plan et bordures », « Mise en page multi-colonnes », « Flexible Box Layout » sont actuellement au niveau « Recommandation candidate », où le W3C est content des caractéristiques importantes de ce module.

A ce niveau, c'est au travers des implémentations (par les navigateurs, par exemple) devraient laisser tomber les préfixes de navigateur qu’ils ont en place. Autres modules qui sont à l’étude incluent « Animations CSS », « Transformation CSS » et « Effets de filtre CSS », mais ceux-ci sont tous en état de « Working Draft » (comme le sont beaucoup, beaucoup d’autres modules !) et ne sont donc pas tout à fait aussi prêts que celles ayant le statut de CR.

Cependant, aux côtés de quatre modules principaux W3C recommandés, il y a beaucoup de techniques CSS3 populaires que l'on voit souvent dans nos sites web aujourd'hui. Il s’agit :

  • CSS Gradients
  • Border-radius
  • Box-shadow
  • Multiple Backgrounds
  • Opacity (rgba)
  • Animations & Transforms

Penchons-nous sur chacun d'entre eux un peu plus en détail.

CSS Gradients

L’introduction des CSS Gradients signifie qu’au lieu d’utiliser un fond d’image pour créer une apparence particulière sur un site web, pour les navigateurs modernes vous pouvez utiliser CSS3 à la place.

css3-gradients

C’est très bien car il économise le poids de la page et assure également que vous conservez la performance à un minimum en ne demandant pas autant d’images.

Border Radius

Border radius, signifie que nous pouvons maintenant inclure des coins arrondis pour les navigateurs modernes dans nos designs sans avoir à recourir à l’utilisation d'images pour chacun d’eux. Et imaginez si vous aviez une image d’arrière-plan qui avait une bordure, coins arrondis, dégradé et une ombre - ces sortes de choses ont été un cauchemar dans le passé, alors qu’elles sont maintenant plus faciles à mettre en œuvre pour les navigateurs qui les prennent en charge.

css3-border-radius

Si vous êtes chanceux, vous aurez des clients qui comprennent également l’amélioration progressive, et si ce n'est pas le cas, alors vous pouvez le leur expliquer et les éduquer. Dans un monde où beaucoup de gens possèdent des smartphones, tablettes et ordinateurs (ou une combinaison de cela et plus encore) ils devraient s’attendre et comprendre que les sites web ne sont pas tous faits pour fonctionner pareils sur chaque appareil ou écran sur lesquels on le regarde. Dans une certaine mesure, ils comprendront pour une certaine esthétique visuelle qui se dégrader avec élégance pour les autres navigateurs. Les coins arrondis étant l’un de ceux là !

Box-shadow

Avec l’introduction de box shadow CSS3, nous pouvons maintenant avoir des ombres pour nos éléments de boîte. Il y a aussi une version texte, que nous pouvons utiliser (text-shadow, si vous ne pouvez pas deviner) pour notre contenu.

css3-box-shadow

Vous avez également le choix d'avoir à la fois un dégradé lisse et un set standard de dégradé ou plus, ce qui signifie que nous pouvons - Eh oui, vous l’aurez deviné - abandonner l’utilisation des images pour ces styles une fois de plus.

Multiple Backgrounds

CSS3 nous a également donné la capacité de faire référence à plusieurs images d'arrière-plan dans notre code. C’est super, car cela signifie que nous pouvons avoir plus de plaisir avec des éléments d’arrière-plan qui se superposent les uns sur les autres pour créer des effets de fantaisie que nous pourrions autrement avoir de la difficulté à recréer en CSS ou avec une image d'arrière-plan.

Opacity (rgba)

Enfin - de IE9 en montant et avec tous les autres navigateurs modernes, nous n’avons plus à créer une image d’arrière-plan petite, reproductible et transparent !

css3-opacity

Cela seul était suffisant pour me faire aimer l’utilisation de CSS3, et  signifie tout simplement nous pouvons être libres d’utiliser la transparence dans nos conceptions où nous sentons que c'est approprié.

Animations & Transforms

Animations et transformations sont superbes​ ; aux côtés des transitions, elles nous aident à ajouter beaucoup plus d’interactivité dans nos sites web. Tandis qu'elles peuvent être difficiles à afficher dans nos designs, c’est certainement une façon dont nous pouvons utiliser CSS3 à notre avantage pour faire vivre des sites web.


Web Fonts (@font-face)

L’inclusion de la règle @font-face pour CSS3 a été brillante pour les designers, car cela signifiait que nous pouvons être un peu plus expérimentaux dans la typographie que nous utilisons dans nos créations. En substance, l'usage de polices web a donné beaucoup plus de liberté aux designers d'exprimer leur créativité par le biais de leur travail.

Pourquoi les polices web sont superbes

Les polices web sont superbes, car elles nous offrent une nouvelle façon de créer des sites web visuellement époustouflants. Il y a une telle variété de choix pour les polices que nous pouvons maintenant utiliser dans nos sites web, voire des centaines, très certainement des milliers.

Toutes ne seront pas extraordinaires et il n’y a certainement que quelques favoris pour la plupart, mais il y a tellement de gemmes que vous pouvez trouver à utiliser dans vos créations qui ont l’air tout simplement agréable par rapport à certaines des plus anciennes, polices web sécurisées.

webfonts-coastalconservationleague

Les polices web nous offrent également un moyen plus sûr de travailler de manière responsable avec nos designs responsive. Vous rappellez-vous le jour où les titres « fantaisies » étaient créés avec des polices alternatives (qui n’ont pas été jugées web sécurisées​) et étaient placés comme des images ou des images d'arrière-plan ? Les polices web signifient que nous pouvons abandonner cette pratique et en toute sécurité la laisser derrière nous, sachant que nous aurons de beaux​ sites avec des polices entièrement accessibles et évolutives.

Comment puis-je utiliser les polices web ?

Avec l’introduction de polices web et @font-face, quelques services sont apparus, pour nous aider à mettre en œuvre des polices web dans nos sites web. Ces services incluent :

  • Typekit
  • H&FJ cloud.typography
  • Fontdeck
  • Fonts.com
  • Google Fonts

Et même avec tellement peu de services, il y a plusieurs façons de les mettre en œuvre dans votre processus de développement. Certains utilisent JavaScript et d'autres utilisent du pur CSS pour charger les polices. Mais qu’en est-il du workflow des designers ; comment travailler avec des polices web peut-il fonctionner dans des maquettes statiques ?

C’est un peu délicat, vraiment, comme il n’existe pas plusieurs façons d’intégrer les polices web que vous utilisez avec les logiciels graphiques que vous pourriez utiliser. Typekit a récemment annoncé son intention d’intégrer une synchronisation Desktop avec Adobe Creative Cloud et a commencé à la mettre en place pour des utilisateurs triés sur le volet.

En raison du fait que Typekit à été racheté par Adobe, ils ont maintenant cette possibilité d’être parfaitement synchronisé avec Photoshop et Illustrator et tous les autres produits Adobe, ce qui est une excellente nouvelle pour les designers.

webfonts-edenspiekermann

Au-delà de cela, il n’y a pas d’autre moyen que nous ayons de pouvoir facilement intégrer les polices web que nous choisissons d’utiliser dans nos maquettes, à moins que nous le fassions en achetant séparément la version « desktop » standard de la police, des polices web. Si vous ne courez pas après la marque pour un site web, alors cela pourrait commencer à devenir un peu cher et difficile à gérer.

Une autre option que vous avez lorsque vous travaillez avec la typographie est de passer au navigateur assez rapidement ; soit en travaillant avec un service tel que Typecast, comme cela est expliqué dans les sections précédentes de typographie de cette série, ou en achetant les polices web sur votre service préféré et voir comment ils réagissent avec votre contenu dans une version prototype de votre design.

Toutefois, si vous décidez de travailler avec des polices web dans votre design, vous pouvez être assuré que vous aurez un résultat final plus créatif, plus beau pour vos utilisateurs, qu'ils apprécient et dont vous pouvez être fier.


Icones

Les icones sont une grande chose pour le moment ; une bonne chose qui se passe dans le monde des « tendances ». Selon moi, icones et images qui peuvent tomber sous ce pavillon, par exemple un logo, sont un excellent outil pour aider à guider vos utilisateurs à travers un site web. Utilisé avec le texte, ils peuvent être une grande aide visuelle.

Toutefois, dans un monde où il faut s’assurer que les images et les mises en page fonctionnent bien dans l’ensemble sur autant de dispositifs et de tailles d’écran, il faut s’assurer que nos icones et images fonctionnent bien dans tous les domaines et sont plus évolutifs. Heureusement, il y a quelques options disponibles pour nous aider à nous assurer que nous faisons cela.

PNG

Le joli PNG (qui nous a offert un moyen d’inclure un arrière-plan transparent dans une image, qui n’était pas un GIF douteux) est un moyen infaillible pour travailler avec des icones dans vos sites web.

icons-symbolicons

Mais n’oubliez pas ; si vous êtes désireux de servir de belles images à une audience Retina, alors vous aurez besoin d’une sorte de sauvegarde CSS ou JavaScript pour vous assurer que vous faites cela.

Travailler avec des PNGs ne devrait pas souvent changer quelque chose dans votre flux de travail non plus. Simplement, vous pouvez enregistrer les images que vous avez créées à la dimension désirée et enregistrez-les directement à partir de Photoshop.

Les PNGs fonctionnent aussi bien pour la mise à l’échelle, aussi longtemps que vous réduisez. Si vous agrandissez une image (ce qui arrive parfois lorsque vous passez d’une fenêtre plus grande à une fenêtre plus petite), le PNG aura souvent l'apparence pixelisée et floue, ce qui est quelque chose que vous voudrez évidemment éviter.

SVG

Un dernier point au sujet de PNG rapidement nous amène à l’option de SVG que nous avons pour nos icones. Aussi longtemps que vous avez une image qui est à base de vecteur (créée dans Adobe Illustrator, par exemple) - et non matricielle, comme ce serait dans Adobe Photoshop par exemple - alors vous pouvez enregistrer cette image comme un SVG.

icons-sachagrief

En tant que développeur, vous êtes à même de comprendre le SVG et les différentes manières dont vous pouvez l'intégrer dans votre site web. Si ce n'est pas le cas, le SVG est une façon de mettre en oeuvre un graphique scalable dans vos designs de site web. De cette façon, vous n’avez pas besoin de vous inquiéter de la pixelisation ou du floutement lors du redimensionnement ou de la mise à l’échelle, et il s’étirera au contraire parfaitement à la taille requise dont vous avez besoin.

Cela fonctionne très bien pour les logos, icones, fondamentalement tout ce qui pourrait avoir besoin d'être mis à l’échelle que vous avez déjà dans un format vectoriel ou pouvez facilement recréer dans ce format, si nécessaire. Lorsque vous designez et enregistrez vos images SVG, je recommande toujours que vous travailliez à la taille optimale dont vous avez besoin la plupart du temps ; de cette façon, votre navigateur doit seulement faire quelques efforts pour redimensionner et adapter le logo dans des circonstances particulières et pas tout le temps.

Polices web

Comme nous le savons déjà maintenant, les polices web sont très évolutives et peuvent fonctionner parfaitement sur nos sites web dans les navigateurs actuels. Certaines personnes très intelligentes ont été capables de combiner à la fois polices web et icones pour faire des polices web icone ou symbole. Tout à fait comme Wingdings, ceux-ci ont souvent plus de sens et de contexte lorsqu’il sont utilisés comme simple icone.

webfonts-symbolset

Il existe des arguments pour et contre les polices web sous forme d’icones : certains disent que pour charger une police entière pour utiliser uniquement des ligatures n’est pas judicieux, car cela va ajouter beaucoup de poids à la page et influencer la performance.

Alors que cela pourrait être difficile d’éviter avec les polices web symbole commerciales que vous avez achetées, il existe des outils pour créer vos propres polices web, où vous pouvez éviter cela et ne créer une police qu'avec les icones dont vous avez besoin. Certains disent aussi que vous risquez de perdre tout du contexte avec des polices web qu’ils utilisent parfois seulement juste une lettre pour afficher l’icône. Cependant, certaines personnes habiles comme le mec chez Symbolset utilise des mots-clef pour les polices, permettant d’ajouter au moins un peu plus de contexte à l’icone que vous avez.

Et là, vous avez trois options pour l’utilisation des icones dans vos créations ; le choix vous appartient maintenant de le faire ! La plupart des options ajouteront un peu à votre flux de travail de design d’une manière ou d’une autre, mais c’est à vous de voir quel processus peut s’insérer le mieux dans votre flux de travail.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.