Comment conserver un design réactif engageant
Le design web réactif est populaire et ce n'est absolument pas un secret. C'est ce que demandent les experts et ce à quoi de nombreuses marques se tournent. Il ne s'agit pas seulement de créer un site mobile, mais de rendre votre site visible à chaque taille de navigateur, que ce soit via un ordinateur de bureau, une tablette ou un smartphone.
La partie délicate de la conception pour la réactivité consiste à créer un site qui a l'air bon et petit. Vous devez prendre beaucoup de considération avant d'ouvrir votre programme de conception et d'aller au travail. C'est une étape supplémentaire qui finit généralement par en valoir la peine dans le produit fini. C'est très évident quand un concepteur ne prévoit pas de réactivité; les sites ont tendance à paraître vraiment nus et ennuyeux.
Il est absolument impératif que les concepteurs maintiennent leur créativité sur tous les sites réactifs. Avec plus de personnes utilisant des tablettes et des smartphones, vous voulez vous assurer que tout le monde peut voir votre site. Voici quelques conseils pour vous aider à rester créatif et efficace lors de la conception pour le Web réactif.
1. Utiliser une excellente typographie
Avec les sites réactifs, vous devez considérer ce qui va bien paraître sur un écran plus petit. Une bonne typographie est un élément essentiel de tout bon design Web, mais elle est presque indispensable dans la conception Web réactive. À mesure que les tailles d'écran diminuent, la plupart des éléments doivent se transformer et se rétrécir ou se déplacer également. Avant tout, votre typographie doit avoir cette capacité.
Deuxièmement, vous devez utiliser différentes rubriques et différentes tailles dans le texte. Maintenant, nous utilisons généralement des titres et des en-têtes de très grande taille pour nos conceptions de bureau. Cela ne doit pas être interrompu dans son intégralité car vous pensez à des tailles plus petites. Assurez-vous que vous utilisez un plugin, comme FitText, pour diminuer la taille de votre texte. CA aide.
Forgeron utilise de nombreuses polices différentes pour créer un aspect et une sensation très intéressants. Ils varient également la taille de ces polices sur l’ensemble du site. Ce qui est intéressant en mode bureau, c'est la façon dont le texte et les paragraphes sont alignés dans différentes colonnes. Lorsque la fenêtre est réduite, le texte se réduit en une colonne. Heureusement, le texte reste cohérent en conservant la même échelle et le même style.
Le magazine Smashing a tendance à faire la même chose. Ils se débarrassent complètement du côté droit du dessin (les publicités) lorsque la fenêtre est réduite. Cependant, le texte passe à l'intérieur de la fenêtre et les styles, les couleurs et les tailles restent tous cohérents.
2. Utilisez de superbes images
L'imagerie, tout comme la typographie, est extrêmement importante dans toute conception de site Web. De même que pour la typographie, dans les designs réactifs, lorsque vous visualisez un site sur des écrans plus petits, vos images doivent également apparaître plus petites ou plus petites. Il existe des tonnes de configurations différentes et de tailles d’image différentes qui peuvent être utilisées dans un design réactif. Il est important de faire attention aux images que vous choisissez et à la manière dont vous les utilisez, car elles changeront sans aucun doute. À mesure que les écrans deviennent plus grands ou plus petits, les images changent de forme et révèlent ou recadrent certaines parties de l'image.
Idéalement, vous voulez vous assurer que vos grandes images photographiques ne contiennent aucun contenu graphique pouvant être rogné lorsque les fenêtres changent de taille. De plus, lorsque vous créez des images graphiques, vous devez vous assurer de créer une image qui se charge rapidement et qui sera visible sur un écran plus petit. C'est pourquoi les concepteurs ont adopté un design plat. C'est juste plus facile.
Chez Pandiscio, vous devez d’abord remarquer comment l’image d’en-tête plus grande apparaît sur un bureau. Il est plein, s'étend sur les côtés et est de très bonne qualité. Lorsque vous réduisez la taille de la fenêtre, les images deviennent plus petites, changent de forme (de rectangulaire en carré) et sont coupées. Ils ont trouvé des images qui ont l'air bien quand l'écran change de taille.
KinHR est un site qui utilise de nombreux éléments graphiques ainsi que des photographies. Notez que lorsque les images sont grandes et petites, les images d'en-tête deviennent plus petites, comme sur le site Web de Pandiscio. Cependant, avec les éléments graphiques dans le corps, les images deviennent plus petites tout en conservant leur forme et ne sont pas coupées.
3. Ne pas dormir sur la navigation
Point vide, si les gens n'ont aucune idée de la façon de contourner votre site, ils ne le feront tout simplement pas. La navigation est plus difficile en matière de conception adaptative, car nous sommes habitués à créer une navigation pour les aménagements paysagers. Maintenant, nous devons créer une navigation qui peut être facilement condensée pour s'adapter aux dimensions du portrait.
Ce n'est pas un problème énorme lorsque vous avez une poignée de liens. Vous pouvez soit rendre votre menu plus petit ou condensé près du haut, soit créer un menu déroulant pour les téléspectateurs. La manière la plus importante de gérer la navigation avec plus de sites Web contenant beaucoup de contenu.
Mashable a des tonnes de liens car ils ont des tonnes de catégories et encore plus d'articles. En plus de cela, ils ont leurs propres pages centrées sur l'entreprise qui doivent également être liées. Mashable décide de créer un menu contextuel sur le côté gauche de l'écran pour les petits navigateurs.
Monocle dispose de deux niveaux de navigation étendus pour son site. Pour les petits navigateurs, ils ont créé un menu déroulant pour le contenu le plus complet et ont condensé le deuxième niveau de navigation.
4. Rendez-le amusant à utiliser
Lorsque vous cliquez sur des liens en ligne, vous devez probablement vous asseoir et attendre que les choses se chargent avant de voir une page. Sur les téléphones, il est très ennuyeux de devoir trouver le bouton suivant avec précision pour accéder à plus de contenu. Des choses comme ça ne sont pas amusantes ni intuitives.
Faire attention aux détails et rendre votre site plus intuitif rend votre site plus partageable. Pensez à ce que ça fait d'utiliser un site sur n'importe quelle taille de navigateur. Pensez à ce que les sites Web devraient faire lorsque vous appelez à une action. Trouvez ces choses et corrigez-les pour que votre site soit facile, amusant et intuitif à utiliser. Cela le rend également un peu plus intéressant!
La boue rend leur site plus intéressant en prêtant attention à leurs transitions. Ils créent une sensation très élégante en permettant à un grand nombre de leurs éléments de glisser et de s’infiltrer au lieu de se déplacer brusquement et de se montrer. Ça fait beaucoup de différences.
Neue Yorke utilise beaucoup de mouvement pour passer d'un article de portefeuille à un autre. Encore une fois, cela crée une sensation très haut de gamme et garde les téléspectateurs intéressés par ce qui sera bientôt révélé.
5. Sortir des sentiers battus
Quand tout échoue, soyez créatif. La conception Web réactive ne constitue pas une contrainte sur la façon dont nous créons des sites Web. Il est toujours possible d'utiliser la créativité, que ce soit par le codage ou la conception.
Enso a créé un site qui n'a aucune chance d'être réactif. Remarquez comment ils ont un peu changé la disposition lorsque la taille diminue, mais ils ont conservé leur marque et leur créativité.
TBWA a un site qui a beaucoup de design. Mais ils ont aussi d'excellentes images. Et ils ont aussi une bonne typographie! Ils ont tout utilisé ici pour créer un site Web réactif très unique et intéressant.
Conclusion
Maintenir votre créativité dans un design réactif ou dans n'importe quel design web est aussi simple que d'esquisser votre concept et de le réviser pour garder vos objectifs. Les choses amusantes se produisent plus facilement lorsque vous commencez à planifier le fonctionnement et le fonctionnement de votre site Web, plutôt que de commencer par cela. La conception Web réactive ne doit pas nécessairement être une tâche énorme et puissante dont les concepteurs ont peur. C'est plutôt simple! Gardez à l'esprit toutes les choses dont nous avons parlé et créez des sites qui ne sont pas à la hauteur! Bonne chance avec votre design web réactif.
Quels conseils donneriez-vous pour que le design réactif reste engageant? Avez-vous trouvé un design réactif très créatif? Faites le nous savoir dans les commentaires.