Les tendances en matière de conception de sites Web peuvent changer et s’effacer presque aussi rapidement qu’elles deviennent à la mode. Mais jusqu’à présent en 2013, une poignée de tendances a semblé vraiment conquérir le Web, et semble s’en tenir.
Aujourd’hui, nous allons examiner dix tendances dans les éléments Web modernes et présenter quelques exemples intéressants - de la typographie et des cercles vintage aux couleurs vives en passant par les vCards pratiques. Encore mieux pour vous, tous les exemples ci-dessous sont disponibles au téléchargement (certains gratuits, d'autres payants).
1. Typographie Vintage
Le style gros et audacieux de style rétro est extrêmement populaire en ce moment. Le style convient parfaitement aux projets dans lesquels il manque des éléments visuels puissants, ou en combinaison avec des images nettes en créant un intérêt pour le lettrage.
Cette tendance existe depuis un certain temps et ne semble jamais vieillir. Ce qui change, c’est la façon dont nous voyons le style classique utilisé.
À l'heure actuelle, la typographie vintage est le plus souvent un élément central d'un schéma de design minimaliste. En outre, les concepteurs jouent vraiment avec le type vintage et très peu de couleurs, telles que les palettes noir et blanc ou une poignée de couleurs en sourdine. (Il y a quelques années, la typographie vintage était populaire avec des couleurs vives.)
Insignes et insignes typographiques rétro: Avec six styles, tous utilisant des polices de caractères gratuites, créer un look vintage n’a jamais été aussi simple. Chaque style est également associé à une image d'arrière-plan coordonnée. (5 $)
2. Effets réalistes
Alors que le débat sur le plat contre le skeuomorphism continue de faire rage, les concepteurs continuent à adopter des effets tridimensionnels et réalistes. Des ombres aux coins levés, en passant par les textures, de nombreux concepteurs utilisent encore ces techniques. (Bien que la conversation soit davantage axée sur les avantages du design plat.)
La clé d'un bon ensemble d'effets réalistes est la subtilité. Les effets devraient refléter la réalité. Les ombres doivent suivre les modèles de lumière dans la conception, les biseaux doivent ajouter de la texture et les dégradés doivent servir à quelque chose.
Ombres Web réalistes modernes: Ce kit contient des éléments à bords relevés, ombres et effets 3D. (6 $)
3. couleur vibrante
Le design plat a inspiré de nombreuses tendances secondaires, y compris l'utilisation de palettes de couleurs vives avec plus de teintes que certains concepteurs. Les tendances actuelles sont les palettes de couleurs super brillantes, vibrantes et saturées pour la conception Web et les applications. Au lieu de choisir deux ou trois couleurs sur lesquelles s'appuyer, les concepteurs créent de larges palettes de couleurs comportant jusqu'à cinq couleurs.
Ces palettes sont généralement utilisées de deux manières différentes: beaucoup de couleurs vives tout au long du dessin. Pensez à une teinte rouge, jaune, orange, bleue, verte et violette, en plus du noir et du blanc. Ou ces palettes se concentrent sur des teintes d'une seule couleur vibrante. Les deux options sont particulièrement populaires.
Les couleurs vives dégagent un ton que les concepteurs doivent connaître. Beaucoup de couleurs vives peuvent sembler légères et amusantes, et pourraient ne pas fonctionner pour certains types de projets. La couleur vibrante de style monotone est plus atténuée.
Couleurs uiGo: Le kit d'interface utilisateur iOS à plat contient une variété d'éléments du style à plat, utilisant beaucoup de couleurs. (8 $)
4. rubans
Les rubans sont un élément que les concepteurs utilisent depuis longtemps. Mais ils semblent faire un retour en force. Particulièrement populaires dans les conceptions de sites d'une page, les rubans sont l'outil par excellence pour les annonces simples, telles que? Coming Soon? - ou pour présenter un prix ou une reconnaissance.
80 rubans Web Premium: Ce kit de rubans contient des rubans de presque toutes les formes, formats et directions que vous pouvez imaginer, avec des options de couleur personnalisables. (2 $)
5. icônes plates
Avec à plat la tendance de facto de 2013, la plupart des designers sautent sur l'occasion de l'utiliser. Les icônes sont l’un des choix les plus populaires en raison de leur flexibilité. Un concepteur peut utiliser des éléments plats en combinaison avec d’autres? Moins plats? éléments de la conception globale du site, ce qui devient de plus en plus courant car la conception à plat s’étend à «une conception presque plate».
En plus des icônes plates, les boutons plats sont également populaires pour les concepteurs qui souhaitent intégrer une touche de tendance aux projets. Même Yahoo inclut des boutons et des icônes de style plat dans son cadre de site, qui n’est pas naturellement plat.
Icônes météo plat: Neuf icônes météo simples et bien dessinées. (3,99 $)
6. Logos ou insignes d'époque
Les logos et les badges vintage accentuent la tendance du type vintage avec une couche supplémentaire de style. Les badges sont particulièrement à la mode lorsqu'il s'agit de sites utilisant des outils de gamification et des effets. Non seulement ces logos simples semblent classiques, mais leur style simple peut être facile à créer et à reproduire de différentes manières. Il suffit d'une poignée de polices de caractères et de formes simples.
La tendance actuelle - comme la typographie vintage - met l'accent sur des effets minimaux pour ces badges avec peu de couleur ou un style supplémentaire. Les formes fortes et les caractères gras sont populaires.
Vintage Logo Badges Set: Ce pack contient huit logos bicolores de style vintage. La variété de styles inclus offre beaucoup de flexibilité. (4 $)
7. cartes
Bien que beaucoup de cartes ou de tuiles de sites Web que nous voyons ne soient pas nécessairement conçues dans le style plat, elles ont évolué à partir du concept de design plat et métropolitain.
Ces simples boîtes sont utilisées de différentes manières. Les cartes ou les mosaïques sont également une technique populaire pour organiser le contenu dans des projets de conception adaptative, car elles rangent et s'empilent bien dans différentes tailles.
Une fois qu'un style est conçu, il est facile de l'utiliser d'une autre manière. Cartes pour les informations de contact (presque avec un look de carte de visite numérique), cartes pour les liens ou autres informations, cartes pour mettre en valeur des portefeuilles ou des images. La tendance fonctionne parce qu'elle est très flexible
Interface vCard: Ajoutez une biographie, un travail, des informations de contact et des liens vers des réseaux sociaux dans un format de style carte.Ce kit est disponible en téléchargement PSD ou CSS. (Libre)
8. cercles
Les cercles, les boutons et les cadrans ont fait un retour en force. Bien que de nombreux concepteurs se soient éloignés des formes arrondies dans le passé, de plus en plus de cercles sont adoptés comme un moyen amusant de créer des boutons et d'autres éléments d'interface utilisateur.
Une partie de l’appel réside dans le fait qu’elles peuvent être conçues pour ressembler à quelque chose que vous êtes supposé toucher, imitant le fait d’appuyer sur un bouton. Ce concept convient parfaitement à la conception d'applications mobiles et, où les utilisateurs sont supposés toucher ou exploiter des éléments pour que quelque chose se passe. L'effet se répercute également sur des sites Web de taille réelle, axés sur les ordinateurs de bureau.
Bouton d'achat simple: Encouragez les acheteurs à effectuer un achat avec un bouton d'achat distinct. (Libre)
9. Gradients simples
L'évolution du design plat pour? Presque plat? a mis un nouvel accent sur des gradients simples. Les concepteurs veulent le changement de teinte, mais veulent qu'il soit super subtil.
Cet effet fonctionne pour les arrière-plans, les boutons, les icônes et divers autres éléments. Les gradients simples ne sont souvent pas gênants et peuvent constituer un bon moyen de créer de la profondeur.
Jeu de dégradés CSS: Ce kit contient des dégradés simples en huit couleurs prêtes à l'emploi, servant de point de départ pour de plus grands éléments ou ensembles d'icônes. Disponible en téléchargement PSD ou CSS. (Libre)
10. Curseurs
Lorsqu'il s'agit d'afficher des photographies ou un portefeuille, il est difficile de trouver un site qui n'utilise pas un type de curseur. (La vidéo devient de plus en plus populaire.) La plupart des curseurs fonctionnent avec un défilement automatique que les utilisateurs peuvent arrêter ou mettre en pause et comportent une image grand écran et des images plus petites ou des boutons permettant de faire défiler les images.
Les curseurs fonctionnent avec une variété d'autres styles de conception - le style présenté ici comprend trois versions pouvant fonctionner pour des projets plats ou skeuomorphiques. Cet outil est un moyen simple et efficace de présenter beaucoup de travail tout en maintenant une dominance visuelle.
Nettoyer les curseurs: Ce kit contient trois styles pour une utilisation facile, des curseurs de photos saisissants et l’utilisation de polices gratuites. (3 $)
Conclusion
Regarder les tendances est une excellente source d’inspiration pour la conception Web. Rien ne peut stimuler la créativité, à part voir d'autres processus créatifs en action. Quelles autres tendances émergentes connaissez-vous? Et après? Partagez vos idées dans les commentaires.