Utilisation du format PNG et du format GIF

Les formats PNG (Portable Network Graphics) et GIF (Graphics Interchange Format) sont des formats d’image sans perte.

Ils sont particulièrement adaptés pour les illustrations avec des aplats de couleur unie (notamment les logos) et les images sur fond transparent. L’utilisation d’une palette de couleurs indexées réduit considérablement le poids des fichiers PNG et GIF.
On privilégiera tout de même le format PNG qui gère la couche alpha (transparence partielle ou totale) et permet de stocker plus de couleurs que le GIF.

Utilisation du format JPEG

Le format JPEG est destructif et clairement dédié aux photographies. Il permet de minimiser le poids des photos en contrôlant la perte de qualité.

Son utilisation sur des illustrations est contre-productive : il dégrade le rendu des aplats de couleurs et génère des fichiers plus lourd que le PNG, pour une même illustration.

Exemple

Logo GIF 256 couleurs, 833 octets : excellent qualité, les aplats sont propres et les détails sont nets.

Logo GIF 5 couleurs, 663 octets : qualité identique au GIF 256 couleurs avec l’optimisation en plus

Logo JPEG, 892 octets : on atteint le même poids que le GIF au détriment de la qualité.

Logo JPEG grande qualité, 5.18 Ko, pour atteindre la même qualité que le GIF, on obtient un JPEG presque 8 fois plus gros.

Étonnamment, Microsoft est peut-être aujourd’hui l’acteur le plus innovant sur le Web en matière d’ergonomie et de design depuis Apple. Le géant américain réalise une convergence très intéressante entre XBox Live, Kinnect et Metro UI de Windows 8. Ces nouveautés trouvent aujourd’hui un écho inattendu dans la sphère du webdesign.

Plus gros et plus clair donc fait pour le tactile

Le texte est écrit plus gros, les pages présentent beaucoup de blancs de respiration et les interfaces sont plus grandes. On peut reprocher à cette tendance de présenter des pages très longues mais l’objectif n’est plus de faire tenir tout le contenu de la page dans une résolution 1027 x 768 pixels en disposant des colonnes côte-à-côte, objectif de toute façon perdu d’avance étant donné la diversification actuelle des devices.

Les interfaces sont plus grandes. Champs de formulaires et boutons voient leur identification et leur utilisation grandement facilitées, notamment sur les devices tactiles.

Orienté contenu

Le travail sur la typographie apporte la matière au design en remplaçant les textures, les ombres, les dégradés et les reflets caractéristiques du design « eye candy ». La mise en place d’une grille complète et adaptée permet de structurer les pages et de guider la lecture.

Le design est toujours au service de l’image, mais désormais d’avantage au service du contenu et de l’expérience utilisateur.

Plus facile à mettre en œuvre

En simplifiant son aspect, le flat design se rapproche des standards du Web et devient plus facile à mettre en œuvre dans le périmètre des normes HTML et CSS.

Responsive

En abandonnant l’organisation en colonnes style « portail », on retrouve un flux d’information plus simple à organiser, quelque-soit la largeur d’écran du device utilisé.

L’utilisation plus poussée des normes HTML et CSS permet d’adapter le design à la largeur d’écran grâce aux media queries.

Catégorie : Webdesign

PNG vs JPEG : l’éternel confusion