Si vous regardez des émissions de rénovation résidentielle à la télévision, la phrase la plus répétée pourrait être «disposition à concept ouvert». Saviez-vous que vous pouvez aussi créer vous-même un agencement à concept ouvert pour la conception de sites Web? Cette tendance de conception est plus qu'une simple idée d'amélioration de l'habitat.
Les concepts ouverts sont un motif visuel amusant et fonctionnel qui peut aider les utilisateurs à naviguer sur votre site Web tout en contrôlant le fouillis numérique. Voici comment procéder avec 10 mini-études de cas et exemples!
Primer à concept ouvert
Dans la conception de la maison, un concept à aire ouverte consiste à réunir plusieurs espaces de manière à créer un flux optimisant l'espace d'une pièce à l'autre, par exemple un grand plan d'étage pour une cuisine et un espace de vie.
Le flux visuel doit être évident pour les utilisateurs, afin qu'ils sachent exactement quoi faire.Dans la conception Web, le concept est à peu près le même. Une disposition à concept ouvert crée un excellent flux entre les éléments de manière claire et aérée. La conception optimisera l'utilisation de l'espace blanc et utilisera des éléments simples offrant beaucoup d'harmonie, d'équilibre et de fluidité.
L'utilisation de la couleur peut être en gras ou simplifié et les pages peuvent inclure un défilement court ou long.
Ces dispositions fonctionnent souvent mieux avec un plan et un flux détaillés pour la conception qui se termine par un seul appel à l'action. Essayer de mélanger et d'associer trop d'éléments et de morceaux peut donner lieu à un design confus. Lorsque vous travaillez avec une tendance de conception de concept ouvert, il est essentiel de garder à l'esprit que le flux visuel doit être évident pour les utilisateurs afin qu'ils sachent exactement quoi faire avec la conception et comment s'y retrouver.
GrowX
GrowX utilise une excellente combinaison d'espaces blancs, d'images et de texte nets, ainsi qu'une fonctionnalité intéressante avec un titre cintré permettant de mélanger des éléments dans un espace ouvert.
L'effet de superposition utilisé ici avec le texte et les images est une technique courante avec les conceptions à concept ouvert. L'utilisation de calques peut aider à attirer l'utilisateur d'un élément à l'autre et à maintenir le flux visuel en mouvement.
La prudence avec les conceptions ouvertes est que les utilisateurs peuvent se perdre dans l'espace. Merci à un? Astuce intelligent? et les éléments en couches, les utilisateurs savent exactement où chercher sur ce site.
NooFlow
Alors que la plupart des idées de concept ouvert vous font immédiatement penser à des espaces blancs, NooFlow prouve que la couleur peut être tout aussi magnifique.
Le design mélange des éléments avec un texte équilibré par rapport au design d'image dans une esthétique presque divisée. Ce qui réunit tout cela, c’est que bien que brillante, la palette de couleurs est simple. En éliminant les autres teintes, la conception ouverte a un flux simple et encourage les utilisateurs à se déplacer dans la conception.
Vêtements ouverts
Open Wear utilise un concept d'écran partagé complet, mais avec une imagerie directionnelle qui pousse les utilisateurs vers le contenu.
Cette conception semble encore plus ouverte grâce aux choix de photo. Le contenu ici se prête à beaucoup de blanc dans les images qui équilibrent le fond blanc. Globalement, le contour visuel est aéré et frais, même s'il y a beaucoup d'éléments et de points d'entrée visuels.
Pensez à ce même motif avec une photo de gauche plutôt sombre. Cela changerait tout le concept et le déroulement du projet.
Brightscout
Brightscout crée un écoulement diagonal allant du logo et de la navigation aux éléments de texte en passant par une image (ou inversement, selon l’emplacement de votre œil en premier).
Le concept ouvert ressemble ici et fonctionne beaucoup comme le plan d'étage d'une maison en utilisant la technique de conception du même nom. Il existe différents points d’entrée avec des lignes imaginaires qui indiquent à l’utilisateur où aller ensuite.
Et l'appel à l'action est accentué avec un gros bouton et une couleur. La fonctionnalité est évidente et facile.
Duotix
L'utilisation exagérée de l'espace est un thème commun lorsqu'il s'agit d'ouvrir des concepts. Space indique à l'utilisateur où une chose se termine et une autre commence.
Duotix utilise ce modèle d'espace tout au long de la conception pour créer une distinction visuelle entre les blocs de contenu, chacun ayant ses propres appels à l'action. De plus, sur le défilement, les fonds blancs et colorés alternent pour aider l'utilisateur à rester en mouvement. (C'est là qu'intervient le flux de concept ouvert.)
PopularPays
Avec le défilement parallaxe et une animation simple et des marges extrêmes, PopularPays crée plusieurs espaces pour le contenu tout en établissant des fonctionnalités.
Les images et le texte sont attrayants, en particulier lorsqu'ils sont associés à des effets animés.
Ce qui est bien avec ce design, c’est qu’il montre que de multiples tendances peuvent fonctionner de concert pour créer quelque chose qui n’est pas écrasant, mais qui a une sensation résolument moderne. Pour créer un design utilisant plusieurs tendances, il faut le bon type de contenu, et les plans de contenu plus simples fonctionnent généralement mieux.
Abel
Comme certains des autres exemples, Abel superpose des éléments pour que l’œil se déplace d’un élément à l’autre. Ce qui est bien avec cette version du plan à concept ouvert, c’est qu’une grande partie de l’espace se trouve en haut de la page, avec des éléments plus lourds ci-dessous.
Le même thème visuel se poursuit sur le parchemin avec un espace au-dessus et au-dessous des éléments pour créer des espaces séparés dans le concept à concept ouvert.
Cet exemple montre que, pour être efficaces, tous les sites de commerce électronique ne doivent pas nécessairement être complets et encombrés.
Hampshire Light
La beauté du design de Hampshire Light réside dans le fait qu’il utilise une disposition Web à concept ouvert pour un produit de design pour la maison. (Parlez des tendances qui passent du numérique au physique!)
Ce qui fait que cette conception fonctionne, c’est l’utilisation d’un espace asymétrique et de couleurs vives. Tout dans le design implique une sensation d’ouverture et de liberté, des accents jaunes à la typographie transparente en passant par l’image? H? logo.
Un autre détail clé de cette conception est l’espacement exagéré des lignes. La police de caractères plus légère sans empattement aurait pu être un choix risqué, mais grâce à de courtes lignes de texte et d'espacement, elle contribue à la sensation générale du concept à concept ouvert.
Hommes qui marchent
Avec une animation subtile, des couleurs douces et beaucoup d'espace, Walking Men peut vous faire penser à de hauts plafonds et à de nombreuses possibilités. La structure de conception simple comprend un élément de contenu par page avec une fonctionnalité amusante de clic-défilement.
L'esthétique est ouverte et constante et l'utilisateur a le sentiment de se déplacer d'espace en espace, même s'il reste immobile (théoriquement) dans le format d'une page.
Nœud
Crux pourrait incarner le plan d'étage à concept ouvert de ma propre maison, avec les éléments de design les plus lourds poussés vers les bords extérieurs.
Le logo du centre et l'appel à l'action constituent un élément central évident pour que les autres éléments ne semblent pas encombrés ou déplacés. La navigation en bas de page regroupe tout comme une feuille de route pour la conception du stylo, ce qui pourrait être un peu difficile pour certains utilisateurs de naviguer avec sa forme presque ronde sans points d'entrée ou de sortie distincts.
Conclusion
Il est fort probable que vous intégriez déjà des concepts ouverts dans vos conceptions. Est-ce une tendance que vous aimez?
Nous considérons que la tendance en matière de concept à concept ouvert est quelque chose de très durable, car elle est ancrée dans la théorie du design. Les mises en page qui utilisent bien l’espace ne se démoderont jamais (même si ce que nous appelons celles-ci a tendance à changer avec le temps).