Nouvelles idées de mise en page Web pour 2015

Quatre tendances émergentes de la disposition du Web en 2015: écran partagé, disposition sans conteneur, grille de blocs et sites Web à écran unique

Points clés:

• L'article souligne les quatre principales tendances de mise en page Web qui ont émergé en 2015: écran fendu, disposition sans conteneur, grille de blocs et sites Web à écran unique.
• La disposition d'écran divisée est utilisée pour mettre en évidence deux fonctions tout aussi importantes ou des concepts express de dualité, tandis que la disposition sans conteneur se concentre sur le contenu, en utilisant la couleur et la typographie pour créer des hiérarchies plutôt que des structures elles-mêmes.
• Block Grid est un outil polyvalent pour créer des sites Web réactifs, avec des modules qui peuvent être ajustés en fonction de la taille de l'écran. Cependant, l'utilisation de cette disposition pour distinguer le contenu peut être un défi.
• Les sites Web à écran unique sont principalement adaptés à l'image d'arrière-plan de l'écran, généralement avec une conception minimaliste et pas de barres de défilement. En raison de l'espace limité, cette disposition nécessite une hiérarchie de contenu claire.

Les nouveaux concepts de conception Web apparaissent chaque année, tandis que certaines anciennes tendances disparaissent progressivement. Au cours des prochains mois, nous verrons sans aucun doute une augmentation temporaire de la popularité des antécédents vidéo, des carreaux et des livres de contes animés, pour n'en nommer que quelques-uns.

En revanche, il est presque certain que la conception Web réactive qui a émergé dès 2010 restera au cœur de notre conception pendant un certain temps à venir.

Bien sûr, cela ne signifie pas que toutes les pages Web doivent se tourner vers une structure standardisée commune. Au contraire, il peut y avoir plus de place pour la différenciation, la flexibilité et l'expérimentation qu'auparavant.

Nous avons identifié quatre tendances ou plans globaux qui, selon nous, domineront la conception de la disposition au cours de l'année à venir. Vous pouvez vous inspirer de ces modèles, mais le meilleur design est généralement produit lorsque vous utilisez l'inspiration comme point de départ pour votre créativité.

Voici ces tendances.

Disposition de l'écran divisé

Lorsque nous appelons "Split Screen" est un site Web où les écrans sont généralement divisés en deux parties (généralement de la même taille).

Il y a deux raisons principales de diviser les pages comme ceci:

1. Afficher deux fonctionnalités importantes.
2. exprimer le concept de dualité.

La première situation se produit généralement lorsqu'une entreprise doit promouvoir un produit ou un service avec deux caractéristiques ou variantes tout aussi importantes. Étant donné que les sites Web empilent souvent des éléments par ordre d'importance, une disposition plus traditionnelle peut ne pas être appropriée dans ce cas.

D'un autre côté, diviser l'écran en deux colonnes peut être le meilleur moyen de présenter deux aspects différents du même système (par exemple, un système de publication qui est bénéfique pour les éditeurs et les lecteurs).

De cette manière, il n'est pas nécessaire de faire la distinction entre les caractéristiques majeures et mineures, et les lecteurs feront immédiatement attention à un contenu important.

La deuxième raison découle du fait que parfois les concepteurs doivent transmettre le concept de dualité. Dans ce cas, la division de l'écran en deux parties crée deux espaces où vous pouvez vous concentrer sur des sujets différents, voire deux produits différents. De plus, ce style vous permet de mettre en évidence les caractéristiques opposées d'une certaine réalité.

Desktime https://www.php.cn/link/d45b6d92e35ff59d3f5a1861e431d581

Le premier exemple que nous verrons est la page d'accueil de Desktime, une entreprise opérant dans le domaine du partage de bureaux. Ils divisent la page en deux parties pour répondre aux besoins de ceux qui possèdent déjà le bureau et ceux qui le recherchent.

Par conséquent, ils utilisent la "segmentation verticale" pour passer le même temps que deux fonctionnalités tout aussi importantes de leur service. Le style qu'ils adoptent est efficace et pratique, et est très concis et clair. bien joué!

Remarque: huit et quatre ont été repensés depuis que j'ai pris cette capture d'écran.

huit et quatre https://www.php.cn/link/ad100897c6f809081d942836af421f86

Le deuxième exemple provient de huit et quatre, une société de marketing numérique. Leur page d'accueil est également divisée en deux parties, avec la conception basée sur le contraste entre les couleurs blancs et plates. La division ici est utilisée pour exprimer toutes les différentes fonctions de l'entreprise.

Le style de "segmentation verticale" dépend également de l'existence de "&", ce qui affaiblit l'effet de segmentation.

Disposition sans conteneur

Presque depuis le début de la conception, les concepteurs utilisent des éléments tels que des boîtes, des formes et des lignes à diviser et inclure du contenu dans la conception. Par exemple, considérez comment le titre ou le pied de page est toujours conçu pour être visuellement séparé du reste du contenu.

Une nouvelle tendance émerge, avec l'idée principale de supprimer toute structure graphique et de se tourner vers un style plus libre et ouvert.

Cette tendance a un certain point commun avec le minimalisme, mais elle va plus loin. En fait, le minimalisme utilise généralement des structures simples et linéaires, et ce nouveau style "sans conteneur" dépouille complètement tout emballage visuel.

Le contenu lui-même devient le centre d'attention, et la hiérarchie de l'information est déterminée par la sélection des couleurs, l'emplacement et la typographie réfléchie, plutôt que par les cadres et la structure.

Avant-propos https://www.php.cn/link/93bb49ede783ed9c09b650c9234be21a

Comme vous pouvez le voir depuis la page d'accueil, la préface est une agence interactive basée à New York et à Paris. Leur site Web annule tous les éléments contenant, et l'attention de l'utilisateur est axée ici par les couleurs et les polices.

En particulier, ils utilisent habilement la typographie pour fournir les informations les plus importantes de l'entreprise. Les couleurs sont principalement utilisées pour mettre en évidence d'autres sons cliquables. Il est évident que ce site Web est incroyablement concis en plus d'être réactif à tous points de vue.

Block Grid

Nous n'avons pas besoin de souligner ici que les structures de grille peuvent être un moyen très efficace de créer des sites Web réactifs. Dans ce cas, chaque module contiendra un contenu spécifique, tel qu'un titre, une image ou un texte.

Les modules

sont généralement utilisés sur la page d'accueil d'un site Web, mais peuvent être développés dans d'autres pages pour répondre aux besoins.

Chaque module est conçu pour être flexible et s'adaptera à la taille de l'écran. Cela fait d'une puissante «disposition de grille» un outil très polyvalent qui peut être utilisé également efficacement sur les sites Web et les applications mobiles.

Cependant, l'un des défis avec cette approche est que si vous créez de nombreux modules de la même taille, il peut être difficile de distinguer le contenu le plus intéressant des projets plus anciens et moins importants.

En fait, si de nombreux blocs sont de la même taille, l'attention de l'utilisateur peut ne pas être attirée par un élément particulier. Pour éviter ce problème, une nouvelle approche consiste à créer des modules de différentes tailles en fonction de ce que contient le module.

Remarque: les grands ont également été repensés depuis que j'ai pris cette capture d'écran.

GreatS https://www.php.cn/link/2fe37bd25993870f5a38563dd25b1d05

GreatS est une entreprise basée à New York qui vend des chaussures pour hommes principalement via son site Web. Leur site Web est leur fenêtre d'affichage, donc chaque détail a été soigneusement étudié et considéré.

"Grands" choisit le praticité de la disposition de la grille. Ils empilent leurs pages d'accueil en lignes de modules, chacune contenant une paire de chaussures. Tous les modules sont de taille similaire, et leurs formes sont implicites et ne sont pas strictement marquées. En fait, les utilisateurs sont encouragés à ignorer autre chose que des écrans de chaussures.

Site Web à écran unique

La dernière tendance que nous avons vue au cours des 6 derniers mois sont les sites qui se concentrent sur les réactifs, s'adaptant toujours à l'image d'arrière-plan de l'écran. Souvent, ces sites sont très concis et tendent certainement vers une sensation de conception minimaliste.

Cependant, la caractéristique emblématique de cette tendance de conception est leur manque de barres de défilement: en d'autres termes, ces sites adoptent presque toujours une approche "application à une page" de leur interface utilisateur.

En raison de l'espace de contenu disponible limité, les concepteurs doivent garder à l'esprit une hiérarchie de contenu très claire et devraient être particulièrement exigeants lorsqu'ils incluent des informations moins pertinentes.

Dans la plupart des cas, les images (ou même les vidéos) dominent la conception, laissant un espace très limité pour d'autres idées de conception. Il peut présenter des produits ou simplement être utilisés pour évoquer une atmosphère cinématographique émotionnelle.

Shamballa Jewels https://www.php.cn/link/885ca3d99fd35f509a2aa0130e8bf64f

"Shamballa Jewels" est une entreprise qui vend une gamme de bijoux. Le site Web a une page d'accueil, composée d'une page unique qui affiche une partie de leur travail. Il n'y a pas de barres de défilement et la navigation du site Web est fournie par le menu en haut de l'écran.

Ce que j'aime vraiment dans ce site, c'est que l'arrière-plan change tout le temps. En fait, les images adaptées à l'ensemble de l'espace apparaissent alternativement avec des écrans divisés verticaux.

L'exemple ci-dessus montre qu'une conception excellente et efficace n'a pas besoin d'être liée aux modèles de mise en page les plus courants que nous voyons. Chacun résiste à l'envie de commencer par la familiarité et la sécurité des grilles / cadres populaires que nous voyons - et obtient d'excellents résultats en conséquence.

Cela signifie-t-il que les dispositions Web plus courantes ne fonctionnent pas?

Bien sûr que non. Mais comme l'a dit Mark Twain, "Pour la personne qui tient le marteau, tout ressemble à un clou."

Assurez-vous de voir des ongles.

(Ce qui suit est une œuvre pseudo-originale dans la partie FAQ d'origine, qui maintient la signification d'origine, et a fait des ajustements de déclaration et des remplacements de mots)

Les questions fréquemment posées sur la conception de la mise en page Web

Q: Quelles sont les tendances de la conception de la disposition du Web moderne?

A: La tendance de la conception de la disposition du Web moderne évolue et change constamment. Certaines tendances populaires incluent la conception minimaliste, la disposition asymétrique, la disposition à écran partagé et la conception mobile. Ces tendances se concentrent sur la création d'expériences conviviales qui fournissent une navigation simple et un contenu engageant. Ils mettent également l'accent sur l'attrait visuel, en utilisant des couleurs audacieuses, une typographie unique et des images et vidéos de haute qualité.

Q: Comment rendre la disposition de mon site Web plus attrayante?

A: Pour rendre la disposition de votre site Web plus attrayante, veuillez faire attention à l'expérience utilisateur. Cela peut être fait en s'assurant que votre site Web est facile à naviguer et a des menus et des liens clairs. Utilisez des images et des vidéos de haute qualité pour attirer l'attention des utilisateurs. Assurez-vous également que votre contenu est pertinent et amusant pour votre public cible. L'intégration d'éléments interactifs tels que les quiz ou le vote peut également augmenter l'engagement.

Q: Quelle est l'importance de la conception mobile d'abord dans la disposition du Web?

A: La conception mobile d'abord est une stratégie de conception qui hiérarte la conception pour les appareils mobiles, puis pour le bureau ou d'autres appareils. Ceci est important car de plus en plus de gens utilisent leurs appareils mobiles pour accéder à Internet. La conception de mobiles a d'abord garantit que votre site Web a l'air bien et fonctionne bien sur tous les appareils, offrant une meilleure expérience utilisateur.

Q: Comment utiliser efficacement les couleurs dans la conception de la disposition du Web?

A: La couleur joue un rôle crucial dans la conception de la disposition du Web. Il peut définir des émotions, transmettre des émotions et même affecter le comportement des utilisateurs. Pour utiliser efficacement les couleurs, considérez votre identité de marque et votre public cible. Choisissez une palette qui reflète votre marque et engage votre public. Utilisez des couleurs contrastées comme texte et arrière-plan pour assurer la lisibilité. De plus, utilisez des couleurs pour mettre en évidence des éléments importants ou des informations sur le site Web.

Q: Quel est le rôle de la composition dans la conception de la disposition du Web?

A: La composition est un élément essentiel de la conception de la disposition du Web. Il transmet non seulement des informations, mais donne également le ton et la personnalité du site Web. Choisissez des polices faciles à lire et reflétez votre style de marque. Utilisez différentes tailles de police et épaisseurs pour créer des hiérarchies et guider l'attention des utilisateurs. Assurez-vous également qu'il y a suffisamment de contraste entre le texte et l'arrière-plan pour assurer la lisibilité.

Q: Comment ajouter des éléments multimédias à la conception de la disposition du Web?

A: des éléments multimédias tels que des images, des vidéos et audio peuvent améliorer l'expérience utilisateur et rendre votre site Web plus attrayant. Utilisez des images et des vidéos de qualité liées à votre contenu. Envisagez d'utiliser des vidéos de fond ou des animations pour augmenter l'intérêt visuel. De plus, utilisez l'audio avec prudence et fournissez aux utilisateurs des fonctions de contrôle telles que la lecture, la pause ou l'ajustement du volume.

Q: Quelles sont les erreurs courantes dans la conception de la disposition du Web qui devraient être évitées?

A: Certaines erreurs courantes qui doivent être évitées dans la conception de la disposition du Web comprennent des dispositions désordonnées, une mauvaise navigation, des polices ou des couleurs excessives, et non optimisées pour les appareils mobiles. Évitez également des images ou des vidéos de basse qualité et assurez-vous que votre intérieur est facile à lire et à comprendre.

Q: Comment améliorer la convivialité de la disposition de mon site Web?

A: Pour améliorer la convivialité de la disposition de votre site Web, assurez-vous que votre site Web est facile à naviguer et dispose de menus et de liens clairs. Utilisez des éléments de mise en page et de conception cohérents sur tout le site Web. De plus, assurez-vous que votre site Web se charge rapidement et est optimisé pour les appareils mobiles. Fournit des fonctionnalités d'accessibilité pour les utilisateurs handicapés, tels que le texte alternatif pour les images et les sous-titres pour les vidéos.

Q: Quel est le rôle de l'espace blanc dans la conception de la disposition du Web?

A: L'espace blanc ou l'espace négatif est l'espace entre les éléments de la conception. Il peut être utilisé pour créer un équilibre, guider l'attention des utilisateurs et améliorer la lisibilité. Laisser un espace vide peut également rendre votre design simple et moderne. Cependant, assurez-vous d'utiliser stratégiquement les espaces et ne laissez pas trop d'espace pour éviter que votre conception soit incomplète.

Q: Comment garder ma conception de disposition Web Novel et à jour?

A: Pour garder le design de mise en page de votre page Web roman et à jour, restez informé des dernières tendances et technologies de conception. Mettez à jour votre contenu régulièrement pour le rendre pertinent et amusant pour votre public. Pensez également à repenser votre site Web toutes les quelques années pour le garder moderne et attrayant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!