10 règles de conception Web que vous pouvez briser
Au fur et à mesure de l'évolution de la conception et de la conception Web, des règles ont été établies pour garantir la cohérence et la convivialité des conceptions.
Certaines de ces règles ont été créées simplement parce que les créateurs de sites Web ont abusé de certains principes sans égard pour leurs utilisateurs.
Mais ces règles ne sont appliquées par personne et doivent être rompues lorsque cela est nécessaire, en particulier lorsqu’elles les endommageraient.
Dans cet article, nous présentons 10 règles que vous pouvez briser si cela convient à vos besoins de conception.
Règle n ° 1: Ne pas afficher la barre de défilement horizontale
Un nombre significatif de souris n'a pas de roulette de souris horizontale. Cela rend difficile le défilement vers la gauche ou la droite lorsque le contenu d'une page Web dépasse les côtés du navigateur.
Il peut être ennuyeux de devoir déplacer le curseur de la souris vers le bas de la fenêtre et de faire glisser la barre de défilement juste pour voir un mot ou deux situés au-delà de la zone visible de la page. Cela dit, voici quelques sites bien conçus qui permettent à la barre de défilement de fonctionner de manière efficace.
Benek
Benek utilise JavaScript pour changer le sens de défilement de la molette de la souris de verticale à horizontale. Chaque article du portefeuille de Benek est séparé dans sa propre colonne. Le site a une sensation étonnamment fraîche et coule en douceur.
Gourou de la chaussure
Gourou de la chaussure s'éloigne avec le défilement horizontal, car il tire parti de la façon dont les gens regardent les chaussures. Les gens regardent la plupart des produits de haut en bas, mais les chaussures sont différentes. Les yeux des gens se déplacent généralement sur la longueur de la chaussure. Utilisant cette habitude à son avantage, Shoe Guru fait circuler le design de son site Web dans la même direction, rendant le mouvement naturel.
Stéphane Tartelin
Stéphane Tartelin utilise la barre de défilement horizontale pour que son œuvre ressemble à une galerie d'art. Bien que la molette de la souris verticale ne fonctionne pas comme dans les exemples ci-dessus, l'effet fonctionne de manière surprenante. Vous pourriez même prétendre que l'effet serait diminué si la molette de la souris était recodée pour défiler horizontalement.
Thérapie graphique
Tandis que Thérapie graphique n'affiche pas une barre de défilement horizontale sur sa page, il permet toujours le défilement horizontal en cliquant et en faisant glisser autour de l'écran. La théorie graphique utilise la navigation horizontale car toutes ses images ont la même hauteur mais pas la même largeur. La navigation horizontale contribue à la fluidité du site.
La voie horizontale
La voie horizontale est une vitrine de sites Web utilisant le défilement horizontal. Les graphiques grungy sont beaux, et ce site est unique en ce qui concerne les galeries CSS.
Règle n ° 2: utiliser un nombre minimal de faces de police
Trop de polices entrent généralement en conflit et submergent le spectateur. Chaque police a une personnalité et trop de personnalités peuvent créer un désordre.
Pour utiliser efficacement plus que quelques polices, une conception doit être très orientée texte et le reste de la conception doit être relativement silencieux. Voici quelques exemples de sites qui utilisent ce sentiment de conflit et de désordre pour engager l'utilisateur.
Liens LA
Liens LA utilise de nombreuses polices dans une mise en page non linéaire pour créer un sentiment d'énergie. La page est difficile à lire rapidement mais attire l'utilisateur. Il convient également de noter qu'aucune des polices n'est trop décorative. chaque mot est lisible, gardant le design net et propre.
Geo Elements Design Studio
L’utilisation d’une variété de polices traduit généralement un sentiment d’énergie et de chaos, mais Geo Elements Design Studio Le site web est très ouvert et propre. Chaque police dispose de son propre espace afin que le lecteur ne l'associe pas à une autre police. L'image du ciel en arrière-plan renforce le sentiment d'ouverture.
Richard Stelmach
Contrairement au dernier exemple, Richard Stelmach pousse ses différentes polices les unes contre les autres. La conception fonctionne car une seule police ne semble pas dessinée à la main et les deux autres fonctionnent bien avec l'illustration. Les polices dessinées à la main fonctionnent généralement bien ensemble, même lorsque les polices de caractères sont nombreuses.
Satsu
Satsu semble avoir beaucoup de polices de caractères différentes mais en fait seulement trois (sans compter l'élément de portefeuille Sports Council). En espaçant tout soigneusement, Satsu associe certaines lignes de texte entre elles, même si le texte peut se trouver dans des polices différentes.
Le titre du logo est dans une police et les deux sous-titres ont chacun leur propre police, mais le spectateur regroupe naturellement ces trois éléments de texte. Satsu est capable de créer de l'énergie sans submerger la page de personnalités.
Règle n ° 3: Ne pas utiliser trop de couleurs
La peur d'aller trop loin avec un design est ce qui sépare les professionnels des recrues et des recrues des inconscients. Les inconscients tentent de rendre leurs dessins aussi extrêmes que possible, avec des mots enflammés, du texte clignotant et autant de couleurs que possible.
Les rookies veulent garder leurs conceptions subtiles et faciles à regarder, mais leurs conceptions peuvent parfois sembler sans vie. Les conceptions agréables suivantes sont réalisées par de vrais professionnels qui repoussent les limites.
Matt Mullenweg
Matt Mullenweg le design magnifiquement coloré ressemble à une peinture à l'aquarelle (le site a été mis à jour depuis la rédaction de cet article). Toutes les couleurs en arrière-plan attireraient l'attention de tous.
Généralement, les bons modèles avec une tonne de couleurs auront ces couleurs en arrière-plan, avec une palette plus simple à l'avant. Lire du texte est très difficile lorsque trop de choses se passent.
Travic Isaacs
Travis Isaacs Le design a un dégradé vertical coloré en arrière-plan qui rend le design plus coloré. Ce site a un rose vif comme couleur de lien, ce qui est un excellent choix pour les concepteurs qui veulent créer un effet coloré.
James De Angelis
James De Angelis ' site Web montre que le texte peut être coloré sans se présenter comme recrue. La conception est très rare et le slogan est certainement au centre des préoccupations.
Règle n ° 4: Rendre l'objectif de votre site évident
Quelque chose qui se trouve vraiment dans les oreilles des jeunes créateurs, c’est qu’un design devrait dire instantanément aux spectateurs ce qu’ils regardent avant de lire un texte.
La reconnaissance de la marque est importante pour les grandes entreprises, mais parfois, les plus petits doivent être un peu plus intelligents pour attirer l'attention du téléspectateur. Retenir des informations peut intriguer le spectateur et "inciter" les gens à vouloir en apprendre davantage.
L'application de cette technique à la conception Web peut considérablement augmenter le temps passé par les utilisateurs sur votre site.
Cetrotrees
Sur la plupart des portefeuilles d'aujourd'hui, le pigiste ou l'entreprise se présente et explique son travail. Cerotreees place plutôt des liens vaguement étiquetés sur la gauche et des exemples de son travail sur la droite, mais rien n'explique l'idée ou la personne derrière.
L'air de mystère entourant le site incite l'utilisateur à rester.
Le dernier mélange
Le dernier mélange est un autre portefeuille qui montre son travail et rien de plus. De telles conceptions dégagent un sentiment d'extrême confiance. Ils n'essayent jamais de se vendre eux-mêmes; ils s'attendent à ce que l'utilisateur soit époustouflé et vienne demander un contrat.
Peter Pearson
L'utilisation d'un écran de démarrage est un bon moyen de ralentir le processus de réflexion des utilisateurs et de les inciter à approfondir leurs connaissances. L'objectif de la page de démarrage est généralement d'expliquer rapidement le site avec des photos ou un court texte.
Mais en Peter Pearson cas, son but est d’évoquer un sentiment. Le grand ciel et l'effet de texte éclaboussé font un excellent travail en évoquant la curiosité, car ces choses n'apparaissent généralement pas ensemble. Ce site fait également un excellent travail pour continuer l'émotion créée par la page de démarrage dans le contenu réel.
Le mouvement de défilement latéral et les lignes animées qui suivent l'utilisateur sont vraiment efficaces.
Piepmatzel
Une bonne façon de contourner la barrière de la langue est de ne pas utiliser de mots. Piepmatzel est une galerie CSS, et les personnes qui ont déjà vu une galerie CSS le reconnaîtront probablement immédiatement.
Ceux qui ne l'ont pas peuvent être assez intrigués pour donner un petit clic aux vignettes dans l'espoir de trouver le modèle. La petite quantité de texte au bas de la page facilite le tri et est superflue.
Règle n ° 5: la navigation devrait être facile à comprendre
La navigation ne doit pas être le goulot d’étranglement d’un site. Les utilisateurs doivent pouvoir trouver rapidement ce qu'ils veulent. Parfois, cependant, une navigation involontaire mais engageante peut aider l'utilisateur à se sentir connecté au site et à promouvoir ce qu'il fait.
Alvin Tang
Comme mentionné dans la section précédente, un air de confiance est transmis lorsqu'un portefeuille ne s’épelle pas. C'est le cas dans Alvin Tang's portfolio de photographie. À son arrivée sur le site, l'utilisateur ne reconnaît pas immédiatement les mots qu'il considère comme des liens.
Cette incertitude devrait les inciter à aller un peu plus loin. Déplacer la souris sur un mot révèle qu’il s’agit bien d’un lien, et en cliquant dessus, une photo magnifique se charge. La photo incitera les utilisateurs à continuer à naviguer.
Pour voir plus de photos, les utilisateurs doivent cliquer sur le bouton "Précédent" de leur navigateur (ce que la plupart des gens comprennent), puis cliquer sur un autre lien. Il n'y a pas de prise en main dans la conception, et ça marche extrêmement bien. Ce n'est pas un "design magnifique" conventionnel, mais il offre exactement ce dont il a besoin.
Kasulo
Kasulo 's la navigation n'est pas très difficile à comprendre, mais l'utilisateur moyen peut ne pas savoir exactement quoi faire en arrivant sur le site. Après le premier clic, cependant, tout devient évident.
L'utilisateur navigue dans les éléments du portefeuille dans un style 3D et les derniers éléments apparaissent les plus proches du début. Utiliser la molette de la souris est encore plus amusant.
Marcio Kogan
Marcio Kogan's site est un autre exemple de grande navigation qui n'est pas immédiatement évident. L'instruction "Drag me" est difficile à résister, et une fois que l'utilisateur fait cela, il est en train de parcourir les éléments du portefeuille. Les aperçus de la souris sont un petit détail mais vraiment impressionnant.
Ceranco
Si un client demandait à un concepteur de créer son site en 3D, comme un jeu vidéo de tir à la première personne, la plupart des concepteurs se moqueraient d'eux-mêmes, prendraient une profonde inspiration et expliqueraient lentement pourquoi ce serait une mauvaise idée. .
Alors que le site pour Ceranco Ce n'est pas exactement un jeu de tir en 3D, il pourrait facilement être confondu avec une sorte de jeu vidéo indépendant. Des sites comme celui-ci sont parfaits pour engager les utilisateurs. Bien que le long temps de chargement et la mauvaise optimisation des moteurs de recherche rendent cette solution moins qu'idéale pour la plupart des projets, cela en vaut certainement la peine.
Règle n ° 6: utiliser des couleurs différentes pour le texte et l'arrière-plan
Cette règle n'est peut-être pas écrite partout, mais de nombreuses recrues ont tellement peur de rendre le texte illisible qu'elles n'envisagent pas d'utiliser la même couleur de base pour l'arrière-plan et la police elle-même. Vous pouvez suivre quelques techniques simples pour faire fonctionner les couleurs similaires.
Linksys
le Linksys Le site est soigné car il a un bleu pour tous ses liens, même si la couleur de fond est composée de différentes nuances de bleu. Bien que ce soit un risque et peut-être pas la plus grande décision de couleur, cela fonctionne.
Brad Colbow
Brad Colbow la conception est similaire à celle de Linksys à cause du texte bleu sur fond bleu. Le bleu sur bleu est difficile à obtenir, surtout avec de nombreux bleus sur le site.
Powerset
Jusqu'à présent, dans cette section, nous n'avons vu que des sites Web bleus, car le texte bleu est le plus difficile à lire pour l'œil humain, et le type bleu lisible est toujours impressionnant. Si un effet de texte fonctionne en bleu, il fonctionnera très probablement dans n'importe quelle couleur.
Powerset utilise un style typographique pour sa police afin de créer un effet 3D qui sépare efficacement le texte de l'arrière-plan.
Artiste en design
Artiste en design non seulement le texte vert sur fond vert et le texte jaune / beige sur fond jaune, mais le texte est directement sur une photo.
Bien que certaines lettres puissent être difficiles à lire, les mots restent globalement lisibles. Ce type d'effet devrait presque toujours être au centre d'une conception.
Horacio Bella
Horacio Bella utilise un autre effet 3D sur son portefeuille. Dans ce cas, les lettres semblent apparaître plutôt que de se creuser vers l'intérieur. Sans cet effet, la lisibilité aurait été grandement réduite. Un autre bon effet utilisé ici est le crénage serré des lettres, ce qui améliore encore la lisibilité.
Règle n ° 7: Ne placez pas l'animation sur le contenu de votre contenu
Sérieusement, ne pas afficher les petites annonces Flash juste là où l'utilisateur lit. Il en va de même pour les boîtes de sondage qui apparaissent chaque fois que l'utilisateur est au milieu d'une phrase. Les utilisateurs n'aiment pas être distraits lorsqu'ils sont à mi-chemin d'une phrase. Sauf si…
Il est vraiment difficile de ne pas être captivé par la petite araignée sur ABA le site. Le design est propre et bien que l'araignée soit une distraction, ça va. Jusqu'à présent, je pense que ce site est la seule exception à la règle.
Règle n ° 8: respectez les polices Web-Safe
Bien que les techniques de remplacement du visage de police soient encore jeunes, elles font déjà sensation. sIFR était le premier et récemment Cufón et Typefasce.js ont émergé.
Diseñorama
Sur le Diseñorama site Web, le texte rouge "Recientemente" est sélectionnable. Un inconvénient est que si le site ne se charge pas instantanément, l'utilisateur verra brièvement la police d'origine.
Un autre inconvénient est que si l'utilisateur a désactivé JavaScript ou Flash, il ne verrait que la police d'origine. Tout compte fait, ça reste quand même cool. Espérons que ce sera un aperçu de ce qui va arriver dans les prochaines années.
Cactuslab
Cactuslab utilise également sIFR pour les sous-en-têtes bleus (tels que "Winter Work"). Bien que sIFR soit la plus complexe des techniques de remplacement de polices, le texte peut être copié et collé, ce qui lui donne un avantage considérable par rapport aux deux autres techniques.
Règle n ° 9: ne pas avoir de page d'accueil
Beaucoup de designers ont eu la même vieille discussion avec leurs clients pour savoir pourquoi une page de démarrage n'est pas une bonne idée. Google a tendance à classer ces pages plus bas et à ralentir l’utilisateur d’obtenir le contenu qu’il recherche. Mais ils peuvent être incroyablement beaux et inspirants s'ils sont bien faits.
Postproduction de brillance
Le but de l'échantillon de portefeuille qui apparaît sur la page de démarrage de Postproduction de brillance Le site Web doit susciter une réaction émotionnelle de la part de l'utilisateur.
A chaque visite, une photo au hasard du portefeuille est chargée. En cliquant sur la photo, vous la redimensionnez et la place à sa place parmi les autres éléments du portfolio. L'effet de mise à l'échelle et de mouvement se poursuit et permet de transmettre l'émotion de l'utilisateur au reste du travail de l'entreprise.
Issa Londres
Lorsqu'un site est complètement exécuté dans Flash, la barre de chargement peut servir de page d'accueil. Lorsqu'un utilisateur voit une barre de chargement, il ferme la page et va ailleurs ou passe à un autre onglet et navigue ailleurs pendant qu'il attend.
Une fois la page chargée, il est préférable d'attendre que l'utilisateur revienne avant de démarrer. Dans Issa Londres Le cas, la porte est une métaphore parfaite pour dire que le site est prêt et l'utilisateur peut entrer.
Lorsque l'utilisateur clique sur la porte, la porte s'ouvre et divers modèles illustrés apparaissent. L'utilisation de la porte sur la page d'accueil est une excellente idée de conception, car à l'entrée, l'utilisateur se sent engagé.
Règle n ° 10: Ne pas utiliser de tableaux
Tout concepteur Web qui utilise des tableaux dans ses conceptions sera instantanément appelé une recrue par des concepteurs expérimentés. Les tableaux ne s'affichent pas de la même manière dans tous les navigateurs, et ils peuvent rendre le code source désordonné, mais à tout le moins, vous saurez ce que vous obtenez avec eux. Voici quelques exemples de conceptions intégrant des tableaux.
Cette table est un peu difficile à voir mais se trouve entre les deux chaises. C'est une belle petite table d'appoint mais ne contribue malheureusement pas beaucoup à la conception de ce site.
Les tableaux sont bien en arrière-plan de cette conception sur Travailler en jeu , mais ils gardent facilement les ordinateurs portables et autres objets des travailleurs. Sans ces tables, la pièce serait beaucoup plus vide et la photo d'arrière-plan n'aurait pas le même effet.
Bien que cette conception comporte principalement des chaises, une belle petite table apparaît dans le coin supérieur droit de la vignette. On dirait qu'un pot est assis dessus.
En ce qui concerne les dessins avec des tables, c'est l'un des meilleurs. Avec deux tables présentées dans cette animation Flash, le design leur donne beaucoup d’attention. Ce site devrait figurer sur la liste de tous les designs de designers qui utilisent des tableaux.
Enfreindre les règles!
Briser les règles est acceptable quand un design l'exige. Bon nombre des choix de conception examinés ici ne seraient pas pris en compte par le concepteur moyen. C'est ce qui sépare les grands designers des moyens.
Ceux qui sont assez courageux pour aller à l'encontre de ce qu'on leur a appris se distinguent toujours.
Écrit exclusivement pour WDD par Eli Penner. Il dirige son propre site Web à SleepyHero.com
Est-ce que vous cassez des règles dans vos conceptions Web? Pourquoi ou pourquoi pas? S'il vous plaît partager vos points de vue avec nous ...