Share
Blog Action Day 2010 est à nos portes! Cette année, Webdesigntuts + participe à un examen spécial de la conception de l’un de nos organismes de bienfaisance préférés basés sur l’eau: charitywater.org. Nous allons explorer les éléments clés qui font le succès du site Web et comment emprunter les mêmes stratégies de conception pour vos propres projets.!
En l'honneur de la Blog Action Day de cette année, nous proposons un examen approfondi de la conception du site Web charitywater.org. "organisme de bienfaisance: l'eau est un organisme à but non lucratif qui apporte de l'eau potable saine et salubre aux habitants des pays en développement".
Les sites pour les organisations caritatives sont toujours des projets intéressants car ils doivent inciter les visiteurs à l'action. Le site Web dépasse de loin ce à quoi on pourrait normalement s'attendre d'un organisme à but non lucratif; Il dispose de bases de conception solides dans tous les domaines et propose quelques astuces de conception géniales qui lui confèrent une impression de caractère et de raffinement que peu de sites Web à but non lucratif possèdent. Creuvons bien!
La première chose que vous remarquerez probablement sur le site internet de l'association: l'eau est l'utilisation disciplinée de la couleur de leur marque. Ce qui est unique ici, c'est qu'ils utilisent la couleur de la même manière qu'une marque d'entreprise peut utiliser la couleur. Notez que le bleu ne varie jamais d’une page à l’autre - que ce soit dans les tons typographiques, en passant par les couleurs de l’arrière-plan et de l’infographie, relient la «charité: le bleu de l’eau» à la conception. L'utilisation des couleurs est omniprésente sur le site. Ainsi, même si la mise en page change d'une page à l'autre, la couleur reste l'élément fédérateur constant… ce qui donne finalement au concepteur un peu plus de liberté pour jouer avec.
… En utilisant une couleur contrôlée créera une présentation professionnelle qui donnera au visiteur le sentiment que le site est crédible et digne de confiance.
Qu'est-ce que cette utilisation de couleur contrôlée fait à l'esthétique du site? Il crée une expérience utilisateur unifiée et cohérente. Plus important encore, l'utilisation de couleurs cohérentes donnera au visiteur le sentiment que le site est crédible et digne de confiance. un élément essentiel pour les organisations à but non lucratif qui doivent constamment lutter pour la confiance des donateurs potentiels.
La typographie est une de ces choses que chaque designer sait Au fond, il est essentiel de susciter l'intérêt des visiteurs, mais il est souvent négligé au profit du formatage du texte du statu quo. Le site Web charité: eau excelle à utiliser la typographie pour attirer l’utilisateur et souligner les éléments clés qui font que cette crise en vaut la peine d’être connue..
D'un point de vue technique, la typographie utilise des principes établis pour guider le regard: la navigation et la marque sont modérées mais faciles à localiser; Les "appels à l'action" et autres informations clés sont en gras et faciles à analyser. Moins de 10 secondes après votre visite sur le site, vous compreniez probablement très bien le message en balayant simplement les gros titres… voilà une typographie efficace! Au lieu d’enterrer les principaux points d’intérêt dans des blocs de texte de paragraphe, le site les met au premier plan..
Moins de 10 secondes après votre visite sur le site, vous compreniez probablement très bien le message en balayant simplement les gros titres… voilà une typographie efficace!
Bien que la typographie sur le site semble sauvage et novatrice, elle ne déroge jamais à un ensemble de règles fondamentales: les titres principaux sont placés dans une police de caractères qui attire l’attention instantanée, les titres sont définis dans une police de caractères empreinte de dignité, et les le reste du texte de la page est placé dans un simple sans-serif qui est facile à lire. L'utilisation de quelques règles simples telles que celle-ci peut aider à unifier votre conception, même si vous souhaitez être omniprésent avec vos mises en page et votre utilisation. Jetons un coup d'œil à la hiérarchie des types sur le site:
Je devrais mentionner une chose que la charité: l’eau ne soit pas tout à fait parfaite d’un point de vue technique. Si vous naviguez suffisamment sur le site, vous remarquerez de petits endroits ici et là où ils enfreignent leurs propres règles. Par exemple, dans certains endroits, le texte du paragraphe est serif, alors que sur le gros du site, il s'agit de sans-serif. Le résultat est une légère rupture dans la cohésion du site… ces incohérences sont mineures sur ce site, mais il est important de garder à l'esprit que si votre propre conception vous semble "écervelée", cela vaut la peine de prendre le temps nécessaire type-style pour réduire la variété de styles que vous utilisez.
Je vais garder cette explication courte et gentille: si vous avez des informations qui sont mieux représentées sous forme de graphique, affichez-les sous forme de graphique! Les gens sont des penseurs visuels. N'essayez pas d'expliquer quelque chose avec des mots plus faciles à décrire avec un visuel..
Cela ressemble à la troisième stratégie, mais cela justifie sa propre explication brève. Souvent, vous essayez de concevoir une page pour un contenu si complexe, si académique, si axé sur les données que l'utilisation d'un texte ou d'une infographie seule ne permet pas de diffuser efficacement le message. Dans ces cas, il est utile de réfléchir à la manière dont vous pouvez associer une image avec du texte. Le texte est toujours où les informations brutes seront, mais l'image agira comme un "adoucisseur", rendant les informations plus simples qu'elles ne le sont réellement - ce qui encourage les gens à les lire.!
C'est le "One Trick Pony" de la conception web; Le paradigme organisationnel que vous voyez lorsque vous visitez la plupart des sites est le suivant: 1 page d’accueil personnalisée, 1 page d’appel à l’action et 1 modèle pour tout le reste. Cependant, l'idée d'utiliser un seul modèle pour gérer la majorité du contenu d'un site est à courte vue! Utiliser un seul modèle pour ennuyer les visiteurs une fois qu'ils ont quitté la page d'accueil… au lieu de continuer sur cette lancée motivante, ces modèles «taille unique» invitent les utilisateurs à quitter le site dès qu'ils se sentent comme s'ils avaient compris l'idée principale..
La charité: l’eau réussit, c’est qu’ils utilisent une grande variété de configurations sur l’ensemble de leur site. Le résultat: le contenu se sent Frais sur chaque page. Les visiteurs sont encouragés à continuer à cliquer sur le site uniquement pour voir ce qui se trouve au coin suivant. Mieux encore, le design de chaque page correspond réellement au contenu de cette page (idée folle hein?). Bien que le développement d'une grande variété de modèles de page uniques puisse coûter un peu plus cher, le résultat est que le site engage réellement les visiteurs et est plus susceptible de réussir à les impliquer..
Il est important de noter qu'utiliser une variété de mises en page n'est pas toujours la bonne solution. Dans le cas de charity: water, cela fonctionne car le site contient une diversité de contenu suffisamment grande pour qu'il soit logique de donner à chaque type de contenu sa propre présentation. Cependant, sur d’autres sites, l’utilisation de mises en page radicalement différentes d’une page à l’autre peut rompre la continuité du dessin et nuire à l’expérience du site..
Il n’existe pas de règle stricte pour décider quand un modèle de page personnalisé est garanti, vous devrez donc utiliser votre propre instinct. En cas de doute, utilisez un modèle de page générique. Si le modèle générique gêne le contenu plus qu’il ne l’aide, envisagez de créer une mise en page personnalisée. Si vous décidez qu'un modèle de page personnalisé est nécessaire, veillez à conserver les informations essentielles (marque, navigation, informations de compte, panier d'achat, etc.) au même endroit sur chaque page..
Regardons les choses en face: si vous travaillez sur un site Web à but non lucratif, il y aura beaucoup de pages d'information ennuyeuses qui, bien qu'importantes, ne suinteront pas l'inspiration. Qu'est-ce que la charité: l'eau a fait avec ces pages d'information est de les afficher dans la disposition de la grille unique. En utilisant des icônes et des images avec les textes d'information, les visiteurs sont encouragés à regarder autour d'eux et à trouver quelque chose qui les intéresse. Plus important encore, cela donne à ces pages autrement ordinaires une apparence "amusante", ce qui délivre un message subtil aux visiteurs: même les parties les plus ennuyeuses du fonctionnement de cette organisation sont exécutées avec créativité et passion..
La conclusion est simple: n'ignorez pas les pages de contenu ordinaires! Bien que ces pages puissent sembler sans importance, il existe une occasion unique de surprendre les visiteurs en créant des approches intelligentes pour afficher ce type de contenu..
J'aime la charité: le site Web de l'eau… j'aime vraiment. Chaque page est fraîche et cela me donne envie de m'impliquer. Certains pourraient dire que c'est le signe d'une cause réelle - une crise tellement importante que les gens sont simplement attirés à participer. Je vais aller sur une branche si et dire que l'efficacité du site a autant à voir avec la conception que le contenu. Bien sûr, si la cause était "faites un don de 5 dollars à Steve Jobs", peu m'importe la qualité de la conception du site (certains pourraient être en désaccord avec ça, haha!), Mais c'est un de ces moments merveilleux. le design peut vraiment rendre le monde meilleur.
Merci d'avoir lu le blog Blog Post Day de cette année! Déposer quelques commentaires ci-dessous.
Accentsconagua