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 d'aujourd'hui est Oomph. Faisons un saut et voyons ce que nous pensons!
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 Oomph!
«Oomph est le lieu incontournable pour les cartes plastiques avec aplomb. Travaillant avec certaines des marques les plus populaires au monde, nos petits bijoux en plastique ont touché plus de 20 millions de personnes, ce qui n’a pas été une mauvaise chose en cinq ans. Quelle que soit la carte que vous recherchez, nous pouvons vous aider. Et si vous ne trouvez pas le modèle de carte idéal dans notre galerie, contactez-nous. Les possibilités en plastique sont infinies et nous adorons essayer quelque chose de nouveau.
Voici une capture d'écran de la page d'accueil:
Esthétique
Tout de suite je peux voir que j'aime l'esthétique de ce site. C'est sauvage, fou et amusant tout en traduisant parfaitement l'idée derrière les cartes.
Comme vous pouvez le constater, tous ces graphiques loufoques, glacés et colorés suggèrent que les cartes en plastique sont quelque chose de cool et d’excitant. Cela aurait tout aussi bien pu être un site très propre, d'aspect Apple, mettant l'accent sur des photos de cartes dramatiques, mais cela rend le produit un peu plus personnel et abordable.
Type
Une autre chose que j'aime vraiment sur ce site est la typographie. La police de titre principale s'appelle "BrothersBold". montré ci-dessous avec WhatFont.
Il y a beaucoup à aimer ici. La police de caractères est parfaitement lisible et confère une sensation masculine audacieuse. De plus, les courbes découpées communiquent une sorte de "découpe". sentir que c'est parfait pour une entreprise qui essentiellement meurt coupe plastique.
À part cela, presque tout ce qui est sur la page est Helvetica. C’est une bonne chose, car une police de titre aussi intéressante et unique nécessite une police de caractères complémentaire si simple et claire que vous pouvez la lire sans y penser. Helvetica correspond à cette description en tant que police de caractères la plus omniprésente et peut-être la plus invisible de la planète.
La grille
La page d'accueil d'Oomph est très clairement présentée sur une grille stricte. La grille mesure 1 020 pixels de large et est assez cohérente du haut vers le bas de la page.
Comme vous pouvez le constater, la structure principale ici est la disposition en trois colonnes qui occupe le centre de la page. N'oubliez pas que trois est un nombre magique. La mise en page est donc parfaitement équilibrée et présente la bonne quantité de contenu.
Il convient de noter à quel point les espaces sont équilibrés dans l’ensemble de la conception. De toute évidence, un système de grille va vous donner un bel espacement horizontal, mais vous devez ensuite être intentionnel pour faire correspondre ce rythme verticalement.
Non réactif
Bien que le site se charge et semble chercher sur un appareil mobile, il n'est en aucun cas optimisé pour l'affichage sur mobile. Sur mon iPhone, je dois faire une tonne de pincement et de panoramique pour comprendre ce qui se passe.
Étant donné que le site adhère à une grille aussi agréable et stricte, il s'agit certainement du candidat idéal pour un design réactif. Il y a un an, je ne faisais qu'attribuer des points bonus aux conceptions réactives pour un effort supplémentaire, mais maintenant, cela commence rapidement à être quelque chose que je m'attends à voir, du moins à un certain niveau.
La conception réactive est une tâche délicate, mais les véritables problèmes viennent des sites de publication à fort contenu. Pour un site statique comme celui-ci, une conception réactive, ou du moins optimisée pour les appareils mobiles, est moins exigeante qu’attente.
Hiérarchie de communication
La structure de la communication et sa présentation sont tout aussi critiques que le design visuel de la page. En fait, c’est vraiment le cœur de la conception et des raisons pour lesquelles nous l’avons. Un bon design structure l’information de manière logique et attrayante.
Le site Oomph a une communication très bien structurée. Tout de suite, lorsque je charge la page, voici le premier titre que je vois:
Notez qu'il y a un joli petit tour visuel ici. Le titre dit? Fantastique en plastique. Cartes par Oomph ,? mais en un coup d'œil, le mot que je vois regrouper est «Cartes en plastique». C’est exactement ce qu’est Oomph. C’est donc une véritable affaire de conception de la communication.
Questions posées
Une fois que vous avez eu votre premier regard autour et que vous avez eu l’idée que c’est une compagnie de cartes plastiques, votre première envie sera de passer à quelques questions:
- Quels types de cartes font-ils?
- Combien coûtent-ils?
- Qui est Oomph? Quelle est l'histoire là-bas?
Vous allez répondre à toutes ces questions en premier lieu: la navigation principale.
C'est de manière critique important pour votre conception. Essayez toujours de prévoir les questions que vos utilisateurs auront et ensuite de décider du premier endroit où ils chercheront pour les trouver.
Expérience de magasinage
L'expérience de magasinage ici est vraiment lisse aussi. Le site ne ressemble pas du tout à un magasin en ligne typique et encombré. C'est comme si je parcourais simplement l'offre de produits et, avant de le savoir, je suis à la deuxième étape du processus d'achat. Le chemin de l'achat est si naturel et tout est présenté si bien: pas de secrets, pas de prix ou coûts cachés, etc.
Avis généraux
Dans l’ensemble, je pense que Oomph a un site vraiment solide. L'esthétique visuelle est magnifique, la mise en page est parfaite et la hiérarchie de la communication est de premier ordre. Le seul reproche que je puisse avoir est le manque d'optimisation mobile. Autre que cela, c'est certainement l'un de ces sites que je passe l'article complet complétant plutôt que de critiquer!
À 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.