Critique de conception Web # 25: Highwire
Bienvenue dans notre 25ème critique de design! Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés en plus de ceux qui pourraient utiliser un peu de 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 d'aujourd'hui est Highwire.com, une plateforme de boutique 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 critiquer votre conception - considérablement moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de Highwire
«Créer votre propre boutique de commerce électronique n'a jamais été aussi simple et abordable. Inscrivez-vous pour un essai gratuit aujourd'hui et commencez à construire votre magasin en quelques minutes! ”
Voici une capture d'écran de la page d'accueil:
Impression générale
Si vous vous êtes arrêté aujourd'hui pour m'entendre déchirer un mauvais design, vous allez être déçu. Je pense que cela pourrait être la meilleure conception de site Web soumise à ce jour pour une critique de conception.
Highwire est tout simplement un site magnifique et est tellement bien fait 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 proposerai 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'imagerie est excellente, mais c'est la couleur qui attire vraiment 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 d'orange, mais elles sont mélangées de manière très attrayante.
Notez cependant qu'ils ont choisi une teinte super brillante de chaque couleur qui saute vraiment directement de la page. Un mélange de dégradés radiaux et linéaires donne aux couleurs une apparence beaucoup plus vibrante et vivante tout en apportant une subtile suggestion de texture.
Disposition et alignement
La mise en page de ce site est solide comme le roc et utilise vraiment la bonne utilisation des 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 et serré.
Notez également que le concepteur a choisi un alignement à gauche et y est resté. Tout le texte est aligné à gauche et même les boutons sous les vignettes suivent cette tendance. Vos conceptions ont tendance à être beaucoup plus cohérentes et cohérentes lorsque vous évitez de commuter les alignements à des intervalles aléatoires tout au long de la conception.
Bien qu'il s'agisse de différentes sections du code, l'en-tête et le pied de page utilisent le même dégradé de sorte que vous obtenez l'illusion d'un arrière-plan continu que le contenu flotte au-dessus. On dirait qu'ils ont simplement stylisé la balise body mais ont l'avantage sémantique de maintenir 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é la place à des couleurs unies et souvent à des ombres dures et sans plumes. Alors que nous commençons à quitter le web 2.0 battu et abusé et à passer à notre prochaine victime, il est toujours agréable de voir quelqu'un tirer le style comme il était censé être.
Les ombres et les reflets ici sont assez subtils et ont été structurés avec soin pour être réalistes et tout simplement magnifiques. Si vous voulez ajouter une touche visuelle à un élément, cela vaut la peine de prendre le temps de modifier et d'expérimenter jusqu'à ce que vous obteniez quelque chose qui ajoute vraiment de la finesse et de l'éclat à une page, par opposition à une couche de maquillage bâclée.
The Burst: Evolved
Une chose que vous apprenez lorsque vous concevez pour une grande entreprise de marketing est que les spécialistes du marketing adorent les explosions. Quelque chose de grand et pointu qui viole le design et attire donc l'attention du client. Si les services marketing, et en fait de nombreux designers, avaient tout ce qu'il fallait, tout ressemblerait à ceci:
Juste pour que vous sachiez, du point de vue du design, c'est un cliché, moche, exagéré, obsolète et tous les autres adjectifs négatifs que vous pouvez imaginer. En règle générale, ne mettez jamais d'étoile sur quoi que ce soit.
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 s'enroule autour d'une barre décrivant la nouvelle fonctionnalité. Il viole considérablement le design suffisamment pour capter votre attention, mais pas assez pour minimiser l'apparence de la page entière.
Amélioration suggérée
Comme je l'ai déjà dit à plusieurs reprises, c'est un design tellement génial qu'il est difficile de trouver quoi que ce soit de mal à cela. Cependant, il y a deux ou trois choses que j'envisagerais d'améliorer.
Pour commencer, le site utilise Cufon pour la typographie personnalisée. Je m'en suis plaint dans notre dernière critique et je continuerai à faire le même argument partout où je verrai Cufon utilisé. @ font-face est une meilleure solution, point final. 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 est la barre Facebook en haut. Si vous tracez une ligne à travers le centre du texte dans cette barre, comme je l'ai fait ci-dessous, vous pouvez voir que le logo Facebook est maladroitement décentré. Je ne sais pas si c'était intentionnel ou un accident, de toute façon, je le cognerais près du centre.
Autres pages
Nous terminerons en vous donnant un rapide aperçu de certaines des autres pages du site. Comme vous pouvez le voir, ils sont tout aussi attrayants et tous très bien conçus. J'aime particulièrement les tableaux de prix!
À ton tour!
Maintenant que vous avez lu mes commentaires, lancez-vous et aidez-moi en donnant au designer quelques conseils supplémentaires. Faites-nous savoir ce que vous pensez de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons également d'être respectueux envers le concepteur du site et d'offrir des conseils constructifs clairs, sans insultes.
