Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site actuel se trouve sur Optimization-World.com, domicile de la société Optimized Cable.
Si vous souhaitez soumettre votre site Web pour qu'il soit présenté dans une future Critique de conception, cela ne prend que quelques minutes. Nous facturons 49 $ pour la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.
À propos de Optimized Cable Company
Chaque câble vendu à Optimized Cable Company est garanti à vie. Si votre câble tombe en panne, retournez-le-nous simplement pour un remplacement sans problème. Nous sommes très fiers d’offrir des câbles de haute qualité à des prix très raisonnables. Ne payez pas trop cher vos câbles dans les grands magasins. Commandez chez nous et profitez de notre offre de livraison gratuite. Nous ne vous demandons pas. Le prix que vous voyez est le prix que vous payez.
Voici une section de la page d'accueil:
Impression initiale
Il y a quelques bonnes idées à l’œuvre ici, cependant, dans l’ensemble, la conception est très proche de quelque chose qui aurait été assez courant il ya environ dix ans. Les tendances en matière de conception de sites Web doivent retenir l’attention lorsque vous concevez un site Web. Non pas pour que vous puissiez arnaquer les idées des autres, mais pour vous assurer que votre produit final semble moderne et pertinent.
En tant que concepteurs, il est trop facile pour nous de rester coincés dans notre approche d'un projet. L'effet négatif de cela est que le monde change tant que nous restons les mêmes. Avoir un site Web qui semble obsolète est particulièrement dangereux pour les magasins en ligne, car il peut être directement lié à une baisse des ventes. Les visiteurs s'arrêtent et ne savent pas du tout si le site est un endroit sûr pour dépenser de l'argent. Est-ce une société légitime qui protégera les informations de ma carte de crédit? Ou est-ce que la sécurité de leur site est obsolète? Dans ce cas, je pourrais passer à Best Buy quels que soient le coût et la qualité des produits simplement parce que le site semble plus sûr.
Certes, il est difficile de cerner exactement ce qui distingue un design moderne d’un concept dépassé. Nous allons donc aujourd’hui examiner de près la question et voir si nous pouvons identifier les aspects qui affectent directement nos impressions sur la période.
Entête
La première chose qui attire notre attention ici est le logo. Il s’agit d’un élément très brillant qui semble remonter au début de la période du Web 2.0. Si vous le faites correctement, Gloss peut toujours fonctionner dans de nombreuses conceptions Web, mais ici, cet élément en particulier ne semble pas à sa place. Pratiquement rien d'autre sur la page ne correspond à cette apparence, y compris le texte sur le logo, qui ressemble davantage à quelque chose d'une publicité de voiture ancienne (plus de confusion dans la période).
Ensuite, nous passons sur le dégradé jaune. Cette couleur viole vraiment le schéma du reste du site. Les spécialistes du marketing aiment ça parce que ça se démarque, mais du point de vue de la conception, on se sent tout faux. Les couleurs complémentaires se détachent et attirent l'attention sans se heurter. De plus, même sans tenir compte du reste du site, le dégradé de jaune est une autre chose qui ne reflète pas les tendances actuelles.
Pour voir ce que je veux dire, comparons la bannière d’expédition figurant sur le site ci-dessus au même élément figurant sur le site Web de Staples.
Nous pouvons apprendre beaucoup de cela. Premièrement, la disposition est beaucoup plus spacieuse et spacieuse, tout n’est pas aussi encombré. Nous voyons également de forts alignements à gauche, par opposition à des alignements centraux relativement faibles. Notez que la clé est ici subtilement. Il existe des dégradés et même une texture créée à partir de lignes fines, tous deux visibles sur le site Web Optimisé. Cependant, sur le site Staples, ces éléments sont beaucoup plus discrets. Les gradients et les lignes sont faciles à manquer si vous ne faites pas attention, ce qui signifie qu'ils ajoutent à l'esthétique sans être gênants.
Couleurs et Textures
Au fur et à mesure que nous avançons dans le site, nous constatons que les couleurs et les textures jouent un rôle important dans l’impression d’une période. Dans la capture d'écran ci-dessous, nous voyons ceci en jeu, ainsi que l'utilisation intensive de coins durs délimités par des traits noirs simples. Cela crée une sensation de boxe qui me rappelle un travail que j'ai effectué pour un client une fois dans un CMS appelé Plone.
Encore une fois, comparons cela à certains des traitements que nous voyons dans une zone similaire du site d’un concurrent majeur. La capture d'écran ci-dessous montre la barre latérale de la page d'accueil de Radio Shack. Cette société n’est pas exactement une image parfaite des pratiques commerciales modernes, mais elle tente de conserver à son site une apparence fraîche et pertinente.
Photos et texte
En plus des éléments graphiques de la page, vous devez également surveiller la structure de vos traitements d'image. La photo ci-dessous ne contient vraiment aucune bonne zone de couleur unie sur laquelle placer du texte; le texte a donc été traité avec un ombré fantôme fantaisiste pour le faire ressortir.
Parfois, vous avez une photo qui ne fonctionnera vraiment pas avec du texte. Plutôt que de tenter de coller les deux ensemble alors que cela ne fonctionne tout simplement pas, envisagez un autre itinéraire. Nous avons un article entier consacré à la conception avec des photos qui partage quelques astuces géniales pour combiner texte et photographie de manière lisible et attrayante.
Texte et logos
La dernière partie de cette page que je souhaite aborder est illustrée dans l'image ci-dessous. Nous avons ici toute une série de logos, dont certains sont sans doute nécessaires, mais je ne suis absolument pas convaincu qu'ils doivent tous être présents. L’accréditation du BBB est bonne, mais ai-je vraiment besoin de savoir que le site utilise le service postal américain? C’est un fait certain que si j’achète un produit en ligne, il me sera expédié d’une manière ou d’une autre et la plupart d’entre nous considérons le service postal américain comme «vieux courrier».
En outre, les logos de carte de crédit pourraient probablement être déplacés vers la page de paiement. La plupart des consommateurs assez à l'aise pour effectuer un achat en ligne vont supposer que vous utilisez les principales cartes de crédit.
Enfin, ce qui vient ensuite est un énorme bloc de texte uniforme. Il n'y a pas d'en-têtes, d'icônes, de traitements de texte différenciés (à part les liens) ou d'autres astuces utilisées pour casser cela et le rendre plus lisible. En un coup d'œil, je ne sais même pas de quoi parle ce morceau de texte, alors pourquoi prendrais-je plusieurs minutes pour le lire?
Dans la conception Web, vous ne pouvez simplement pas vous attendre à ce que les visiteurs s’attaquent à ce type de texte. Un visiteur sur cent peut en fait parcourir le premier paragraphe, mais c'est optimiste. Cela signifie-t-il que vous ne pouvez pas avoir beaucoup de texte sur une page Web? Absolument pas. Vous devez juste apprendre à le diviser en morceaux significatifs et gérables dans lesquels vous pouvez parcourir rapidement des informations pertinentes.
Les concepteurs de MailChimp sont remarquables à cet égard et je me réfère toujours à leur travail lors de la discussion sur ce sujet. La page consacrée aux fonctionnalités de leur site récemment redéfini comporte de nombreuses informations, mais découvrez comment elles ont été gérées:
Des en-têtes puissants, de courts blocs de texte et des images qui font allusion au contenu sont tous utilisés ici pour rendre tout ce contenu facilement digérable.
Recommandations
Pour amener ce site en 2011, je recommande aux concepteurs d’examiner de près les autres sites Web, dans leur domaine comme ailleurs (notre galerie de design a été créée exactement à cet effet). Enquêter davantage sur ce qui distingue les sites modernes des tendances et des tactiques observées sur le site optimisé.
Vous pouvez même envisager d’acheter un thème de magasin auprès de ThemeForest pour bien démarrer sur un bon design. Le thème ci-dessous ne coûte que 15 dollars et est superbe!
À ton tour!
Maintenant que vous avez lu mes commentaires, apportez votre contribution en donnant quelques conseils supplémentaires au concepteur. Dites-nous ce que vous pensez être génial à propos de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons d'être également respectueux du concepteur du site et d'offrir des conseils clairs et constructifs, sans aucune insulte dure.