L'art de construire de meilleurs sites Web

Créer des sites Web est devenu presque une compétence courante ces temps-ci, et il y a une surabondance de sites en concurrence avec les vôtres que tout ce que vous pouvez faire pour vous démarquer de la foule va être d'une aide précieuse.

Que pouvons-nous faire pour que nos sites soient remarqués, admirés et pris en compte? Cela nécessite un certain ajustement de la manière dont nous pensons à la conception du site. Dans ce court article, nous examinerons quelques éléments clés nécessaires à la création de meilleurs sites Web.

Le contenu doit avoir la priorité

En tant que designers, nous souhaitons toujours créer des designs incroyables. Bien sûr, cela ne s’applique pas à ceux qui se disent simplement designers, car ils ne laissent pas leur âme se mettre à pleurer, consacrant un moment d’inspiration éternellement dans la gloire de l’électronique.

Les propriétaires de sites souhaitent, bien sûr, que les internautes lisent leur contenu, s’y engagent et même achètent quelque chose à cause de cela. Les jolies images sont merveilleuses, mais pas si elles empêchent l'utilisateur de faire l'expérience du contenu.

Dans ce cas, ce que nous pourrions considérer comme des «améliorations stylistiques» doit certainement céder le pas à la présentation principale. Si vous avez besoin de laisser tomber quelque chose, cela devrait toujours être l'élément stylistique.

courtoisie d'image de

Un design réactif est essentiel (sauf quand ce n'est pas le cas)

Le design réactif est si important de nos jours en raison du nombre considérable de personnes utilisant leur téléphone pour la navigation Web et du fait que la plupart des navigateurs de téléphones effectuent toujours un travail de rendu médiocre en ce qui concerne le rendu des pages Web.

Il y a quelques exceptions notables, mais elles sont très rares. Ces exceptions seraient quand quelque chose Besoins à afficher sur la page pour que le contenu ait un sens, et où il doit avoir une taille définie. Certaines choses ne fonctionneraient tout simplement pas si elles étaient trop réduites.

Des cas comme celui-ci doivent être traités avec soin. Pour ce faire, utilisez une colonne réactive spéciale qui s'affiche uniquement lorsqu'une taille d'écran trop petite pour afficher le contenu est détectée, avec un message demandant à l'utilisateur d'afficher le contenu sur un moniteur plus grand.

Ce sera généralement quelque chose que vous devriez éviter de faire, mais dans des circonstances exceptionnelles, il est acceptable tant qu'il est manipulé avec tact.

illustration courtoisie de

Le contenu important doit être évident

Bien que cela devrait être évident, cela ne semble souvent pas l'être. Le design ne doit pas rendre subtiles les choses importantes. Il faut faire ressortir ce qui est important et le faire voir. dans un premier temps, et pourtant, de nombreux concepteurs essaient d’être «créatifs» et de maîtriser ces éléments importants.

Ne faites pas cette erreur. Il est possible que les utilisateurs ne restent pas longtemps sur le site. Il est donc essentiel de faire connaître la marque. Même s'ils partent rapidement, vous avez au moins laissé une impression. Plus tard, lorsqu'ils rencontreront la marque, ils la reconnaîtront comme étant familière et seront plus enclins à acheter auprès d'une marque connue (c.-à-d. «Fiable»).

Ce qui se passe est une sorte de duperie cognitive, où l'esprit conscient dit: "Si j'en ai entendu parler, ça doit être bon." C'est pourquoi les entreprises sont prêtes à dépenser des millions de dollars simplement pour obtenir leur logo sur un panneau un événement sportif.

Quoi d'autre est important cependant? Eh bien, la réponse à cette question dépend du type de site que vous construisez. Ce que vous devez faire, c'est penser à ce que vous recherchez si vous visitiez ce site. C'est généralement très différent de ce qu'un homme d'affaires dit vouloir montrer. Les choses que les gens vont rechercher sont les choses importantes à inclure et à mettre en évidence.

Les éléments stylistiques devraient se fondre facilement

Vos embellissements de conception devraient rendre le spectateur étonné dans le bon sens. Ils devraient apporter le plaisir plutôt que la contrariété. Très souvent, les concepteurs s'emballent et ajoutent des éléments à une page pour générer le «facteur waouh» sans s'assurer que ces éléments n'ont pas le potentiel d'être gênants.

Vous devez également vous assurer que ces embellissements se dégradent gracieusement. Quand ils ne peuvent pas être affichés correctement, ils ne devraient pas l'être du tout et il devrait apparaître comme s'ils n'avaient jamais été là.

gif courtoisie de

Des couches à la rescousse

Vous pouvez ajouter ces embellissements en utilisant des calques. Les personnes qui créent des conceptions réactives semblent avoir oublié qu'elles disposent d'une pile 3D, et ne disposent donc pas du véritable potentiel de la conception réactive.

Un exemple de la façon dont cela fonctionne… Imaginons que vous ayez un site avec une disposition avec plusieurs points d'arrêt. La manière conventionnelle de penser voudrait que vous mettiez tout sur une couche, ce qui entraînerait un encombrement sur des écrans plus petits, ce qui vous obligerait à laisser tomber des objets ou, comme c'est généralement le cas, à présenter un design hideux.

Ces deux derniers mots ne devraient jamais aller ensemble lorsque vous parlez de quelque chose que vous avez créé. La bonne chose est que vous pouvez réellement éviter la situation grâce à l'utilisation de couches.

En empilant les éléments stylistiques sur un calque séparé, vous pouvez les masquer ou les afficher à votre guise, indépendamment du calque de contenu, et les deux calques sont entièrement réactifs.

Supposons que l'utilisateur consulte le site sur un moniteur avec une résolution de 2560 x 1440. Notre couche de contenu inférieur couvre toute la largeur de l'écran, mais nous pouvons définir des marges qui placeraient le contenu dans une bordure décorative de la taille souhaitée.

En plaçant cette bordure décorative sur le calque supérieur sans marges, nous pouvons simplement définir une largeur égale à la taille des marges du calque inférieur.

Lorsque l'utilisateur franchit différents points d'arrêt sur l'écran, les deux couches peuvent continuer à fonctionner de la même manière, et la couche supérieure peut même afficher des bordures totalement différentes pour chaque point d'arrêt. Jusqu'au point d'arrêt final, nous éliminons entièrement la couche supérieure, simplement en la définissant comme étant masquée.

Le potentiel ici est évident. Avez-vous un grand nombre d’annonces de liens agaçantes dans la colonne de droite? Vous pouvez les masquer des utilisateurs avec de petits écrans, et vous pouvez également les rajouter à la demande en utilisant jQuery.

Enfin un moyen de séparer correctement le contenu du design

C'est ainsi que les pages Web sont censées fonctionner. En stockant vos «extras» sur un calque complètement séparé, vous séparez encore davantage le contenu de la conception, car ce calque supérieur peut être perturbé à tout moment sans affecter le calque inférieur, et inversement.

Amusez-vous à expérimenter avec la liberté que cela vous offre afin de pouvoir jouer avec toutes sortes d’idées créatives sans que le contenu lui-même ne soit affecté.

C'est exactement le même concept que l'utilisation de machines virtuelles pour le sandboxing. Quoi que vous fassiez, vous ne pouvez pas affecter le contenu de la page car il est isolé du calque décoratif.

image d'en-tête avec la permission de Matt Carlson

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.