J'ai regardé les directives de Google pour cette chose appelée "conception matérielle" , et je l'ai suivie. Cependant, je vois également beaucoup de sites utilisant le design plat: Twitter , Codecademy et Gitter - et ce n'est que quelques-uns. Ensuite, il y a ceux qui utilisent des dégradés CSS3, des ombres, etc. et des images détaillées pour concevoir un site qui a l'air réel (corrigez-moi si je me trompe, mais n'est-ce pas le skeuomorphisme?), Comme la page d'accueil pour Twitter Bootstrap 2 .
D'après ce que je comprends, la conception plate réduit la charge sur le trafic mobile.
Quels avantages (en termes de vitesse / UX / etc. Notamment) offrent-ils chacun par rapport à l'autre?
website-design
css
DᴀʀᴛʜVᴀᴅᴇʀ
la source
la source
Réponses:
Le skeuomorphisme est vraiment l' opposé du design plat . "Material Design" de Google est simplement leur nom de marque pour leurs interprétations spécifiques du design plat. C'est toujours un design plat. "FLat Design" a été inventé par Apple lors de la sortie d'iOS7. Il a fait son chemin parce que c'était le premier terme utilisé, il aurait pu facilement être appelé "Material Design" si Google l'avait fait en premier.
La pratique du skeuomorphisme consiste à ajouter des éléments visuels que vous attendez de voir si l'objet était physiquement réel plutôt que projeté sur un écran. Un exemple serait les ombres et les reflets. Ils existent sur tout dans le monde réel mais sur rien dans le monde numérique. L'ajout de ces éléments skeuomorphes est conçu pour que les humains se sentent plus familiers avec les éléments numériques.
Le design plat en est l'opposé. Dans le "design plat", il n'y a aucune considération pour la physique et l'éclairage "du monde réel". Les éléments numériques sont fabriqués mais le concepteur souhaite les faire sans se soucier de ce que la «réalité» ferait à l'élément si l'objet était physique.
La page d'accueil de bootstrap n'est pas un exemple de skeuomorphisme. C'est un exemple de design plat en général. Bien que l'on puisse faire valoir que le rectangle d'encart au milieu avec l'effet "embossage" d'encart est également skeuomorphique. Un "hybride" pourrait donc être la meilleure description.
En termes d'avantages / d'inconvénients techniquement - il n'y a pas de raisons solides de choisir l'un plutôt que l'autre.
Souvent, pour obtenir des images d'effets skeuomorphes crédibles de haute qualité, il est nécessaire. Les images augmenteront naturellement les requêtes HTTP et le chargement du navigateur. Si vous renoncez aux images en faveur du CSS skeuomorphique, le CSS peut être extrêmement compliqué et volumineux. Alors que la diminution des images de requêtes HTTP nécessiterait, la taille supplémentaire (Ko) d'un fichier CSS avec des éléments skeuomorphes peut compenser la réduction des requêtes HTTP (du point de vue des utilisateurs).
La conception plate est généralement facile à retirer avec CSS3 de base. Si une image est nécessaire dans une conception plate, la même image sera très probablement également nécessaire dans une conception skeuomorphique. Ils se compensent donc en termes d'avantages / inconvénients. Flat Design CSS est généralement moins complexe et plus facile à modifier, mais ce n'est pas obligatoire . Il est tout à fait possible de créer un design plat avec des propriétés CSS très complexes. La plupart des conceptions plates contiennent des dégradés - tout simplement pas des dégradés "du monde réel" basés sur ce que la lumière ferait si l'objet était réel. Chacune des icônes iOS7-8 ou Windows 8 d'Apple utilise des dégradés. Dégradés tout simplement très subtils, par opposition à des "dégradés".
En fin de compte , il n'y a pas dur raison de la conception à plat peut être techniquement meilleur ou pire que skeuomorphisme. Tout se résume à une question de préférence de la part du designer. Le skeuomorphisme et le design plat ne sont que des tendances de conception sans aucune base de raisonnement technique.
cela revient à demander "Quel est techniquement mieux un site Web rouge ou un site Web bleu?" - il n'y a pas d'autre réponse que "Quoi que vous préfériez."
la source