Bienvenue à notre 25ème critique de design! Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous indiquerons les domaines qui sont bien exécutés et ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de participer et de fournir vos propres commentaires. Votez dans le sondage au bas de cette page et / ou laissez un commentaire avec vos pensées!
Le site actuel est Highwire.com, une plateforme de magasin en ligne personnalisée.
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 24 $ pour la critique de votre conception - beaucoup moins que le coût d'un consultant pour jeter un coup d'œil sur votre site! Vous pouvez en savoir plus ici.
À propos de Highwire
? Créer votre propre boutique en ligne n'a jamais été aussi facile et abordable. Inscrivez-vous pour un essai gratuit aujourd'hui et commencez à créer votre magasin en quelques minutes!?
Voici une capture d'écran de la page d'accueil:
Impression générale
Si vous vous arrêtez aujourd'hui pour m'entendre critiquer un mauvais design, vous serez déçu. Je pense que cela pourrait bien être la meilleure conception de site Web soumise à ce jour pour une critique de conception.
Highwire est tout simplement un site magnifique et est si bien conçu que nous serons obligés de l’utiliser comme un outil pédagogique plus positif que négatif. Continuez à lire car il y a une tonne que nous pouvons apprendre en analysant cette conception. Et ne vous inquiétez pas, il y a quelques petites choses que je suggérerais d'améliorer en cours de route.
Palette de couleurs
La déclaration la plus audacieuse faite sur ce site est la couleur. La qualité de l'image est excellente, mais c'est la couleur qui retient votre attention dès que vous chargez la page. Les couleurs de base utilisées ici ne cassent pas exactement le moule: vert, rouge, bleu, gris et un peu orange, mais elles sont mélangées de manière très attrayante.
Notez cependant qu'ils ont choisi une nuance super brillante de chaque couleur qui saute aux yeux. Un mélange de dégradés radiaux et linéaires donne aux couleurs un aspect beaucoup plus dynamique et vivant, tout en apportant une subtile suggestion de texture.
Mise en page et alignement
La mise en page de ce site est extrêmement solide et utilise réellement les espaces et la répartition visuelle du poids. Notez dans l’image modifiée ci-dessous comment des lignes verticales fortes ont été établies pour s’assurer que tout est bien ajusté.
Notez également que le concepteur a choisi un alignement à gauche et s’y est collé. Tout le texte est aligné à gauche et même les boutons sous les vignettes suivent cette tendance. Vos conceptions ont tendance à avoir l'air beaucoup plus cohérentes et cohérentes lorsque vous évitez de modifier des alignements de façon aléatoire par des variations tout au long de la conception.
Bien qu'il s'agisse de sections différentes du code, l'en-tête et le pied de page utilisent le même dégradé pour vous donner l'illusion d'un arrière-plan continu que le contenu flotte au-dessus. Cela donne l'impression qu'ils ont simplement appelé la balise body, mais qu'ils ont l'avantage de conserver un en-tête et un pied de page solides.
Ombres et Reflets
Les reflets, les dégradés et les ombres douces ont récemment cédé le pas aux couleurs unies et aux ombres souvent dures et non tachetées. Alors que nous commençons à quitter le Web 2.0 battu et maltraité pour regarder en arrière et passer à notre prochaine victime, il est toujours agréable de voir quelqu'un tirer le style tel qu'il était censé être.
Les ombres et les reflets ici sont assez subtils et ont été structurés avec le souci de paraître réalistes et tout simplement beaux. Si vous souhaitez ajouter une touche visuelle à un élément, il est utile de prendre le temps de peaufiner et d'expérimenter jusqu'à obtenir quelque chose qui ajoute vraiment de la finesse et de la brillance à une page, par opposition à une couche de maquillage négligée.
L'éclatement: évolué
Une chose que vous apprenez lorsque vous concevez pour une grande entreprise de marketing est que les spécialistes du marketing adorent les produits éclatés. Quelque chose de grand et pointu qui viole la conception et attire donc l'attention du client. Si les départements marketing, et en fait de nombreux concepteurs, réussissaient, tout ressemblerait à ceci:
Juste pour que vous sachiez, du point de vue de la conception, c’est un cliché, vilain, excessif, obsolète et tout autre adjectif négatif que vous pouvez imaginer. En règle générale, ne mettez jamais d'étoile.
Ce concepteur a heureusement compris cette règle et a proposé une solution beaucoup plus moderne et attrayante, illustrée ci-dessous. Ce ruban 3D entoure une barre décrivant la nouvelle fonctionnalité. Cela enfreint suffisamment le design pour attirer votre attention, mais pas assez pour minimiser l’aspect de la page.
Amélioration suggérée
Comme je l'ai déjà dit plusieurs fois, il s'agit d'un design tellement génial qu'il est difficile de trouver quoi que ce soit qui ne va pas avec. Cependant, il y a quelques points que je souhaiterais améliorer.
Pour commencer, le site utilise Cufon pour la typographie personnalisée. Je me suis plaint à ce sujet dans notre dernière critique et continuerai à faire valoir le même argument partout où je vois que Cufon est utilisé. @ font-face est une meilleure solution, un point c'est tout. Le texte @ font-face est entièrement sélectionnable, pas Cufon. @ font-face utilise du CSS pur, Cufon nécessite l'activation de JavaScript. Comme je l'ai souligné la dernière fois, lorsque le site Web Cufon suggère d'utiliser @ font-face à la place, vous savez qu'il est temps de jeter l'éponge et de sauter à bord.
L'autre chose qui me dérange, c'est la barre Facebook en haut. Si vous tracez une ligne au centre du texte dans cette barre, comme je l’ai fait ci-dessous, vous pouvez constater que le logo de Facebook est maladroitement décentré. Je ne suis pas sûr que ce soit intentionnel ou accidentel, de toute façon, je le rapprocherais du centre.
Autres pages
Pour terminer, nous allons jeter un coup d’œil aux autres pages du site. Comme vous pouvez le constater, ils sont tout aussi attrayants et très bien conçus. J'aime particulièrement les tableaux de prix!
À 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.