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 Adminizio.
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 d'Adminizio
? Adminizio est un ensemble de modèles universels XHTML / CSS à utiliser comme interface utilisateur d’un système de gestion de contenu, d’une boutique en ligne, d’un intranet et d’autres applications en ligne. Adminizio est destiné à tous les programmeurs intelligents et concepteurs Web qui souhaitent faciliter leur travail.
Voici une photo de la page d'accueil:
Premières impressions
En un coup de œil, le design de cette page me plaît beaucoup. Le concepteur a fermement adhéré aux principes de design propres et corporatifs avec quelques touches de flair visuel.
C'est un design assez typique qui ne casse aucun moule, mais comme c'est souvent le cas pour de tels sites, il n'est pas nécessaire de créer quelque chose de radicalement révolutionnaire. Simple et familier pourrait être une expression choquante pour certains concepteurs, mais les entreprises du monde réel le souhaitent souvent.
La disposition
J'aime souvent simplifier une présentation visuelle à ses formes de base afin de pouvoir vraiment ressentir les relations d'espace et de taille sans me laisser distraire par les visuels. Voici une tentative de base avec cette page:
À partir de là, nous pouvons constater que la mise en page est plutôt solide et bien exécutée. Cependant, je détecte quelques problèmes potentiels que je considérerais aborder.
Le premier est illustré ci-dessous. Les espaces blancs piégés entre le bord de la zone de contenu principale et le conteneur vertical sont assez minuscules (environ 13 pixels) par rapport à l’espacement général observé dans le reste de la conception. Cela rend cette zone un peu claustrophobe. Il est intéressant de noter que prendre la conception jusqu'au bord serait très bien à mon avis, mais le rapprocher si près du bord sans donner suite au résultat rend cela un peu gênant.
Cette question suivante est un problème beaucoup moins important mais toujours très perceptible et qui est l’une des premières choses qui a attiré mon attention. Remarquez à quel point l’espacement à droite du paragraphe semble trop important; le bord ne s'aligne pas avec la ligne épurée créée par les objets situés au-dessus et au-dessous.
Normalement, je ne voudrais pas trop refléter l'espace de chaque côté d'un paragraphe déchiré, mais la conception de la page est si strictement justifiée que cela ressemble à une violation inutile. Étirer un peu ce paragraphe ne devrait pas être trop difficile. En fait, en jouant un peu avec Safari, j'ai remarqué que le bloc circule beaucoup mieux si vous supprimez ou augmentez la taille de ce texte de 10%.
Le dernier problème de mise en page que je vois est la limite concernant la compatibilité des modèles entre navigateurs. Ici, le concepteur a mis en place deux colonnes de contenu fortes qui adhèrent à un bloc visuel strict. Mais alors cette ligne arrive et casse la mise en page en s'étirant dans l'autre colonne.
Ma suggestion est simplement de redimensionner cette ligne ou de la diviser en deux lignes afin qu’elle ne soit pas obligée de modifier la disposition actuelle des colonnes.
Nitpicking?
Ces problèmes de mise en page peuvent sembler mineurs, mais ils me transmettent un mauvais message sur la manière dont la page a été construite. Ils donnent l’impression que la page a été conçue par une personne, puis remplie de contenu par une autre qui ne comprend pas tout à fait la mise en page. Cela communique instantanément l’impression d’un modèle préfabriqué modifié (intéressant car c’est exactement ce que vend le site). Les gabarits sont excellents, mais il est préférable d'éviter de briser les modèles établis.
Lien de téléchargement
Une chose qui a toujours attiré mon attention dans cette conception était la flèche dans le coin inférieur droit de la page. D'une part, c'est une bonne chose, mais je pense que c'est une mauvaise exécution d'une bonne intention.
Le mot? Télécharger? est si loin de la flèche qu’ils ne semblent presque pas connectés. De plus, l'image de la flèche n'est pas un lien pour télécharger quelque chose. J'ai remarqué qu'en examinant le dessin, je regardais sous cette flèche pour voir vers quoi il pointait! Les graphismes attirent en fait mon attention, mais ils restent dans le néant, ce qui peut avoir l’effet indésirable de donner aux utilisateurs le sentiment d’avoir fini avec la page.
Je suggère de placer la flèche à côté du mot? Télécharger? afin que le message soit renforcé par les graphiques, et inversement. Vous pourriez aussi envisager de créer la flèche, le mot? Télécharger? ou les deux un lien. Un appel à l'action est une chose sacrée dans le marketing et sur le Web, le mot action est souvent le lieu logique sur lequel un utilisateur peut cliquer. Donc, si un utilisateur veut télécharger quelque chose, il voudra probablement cliquer sur le mot? Télécharger? (Bien que le nom de l’objet en cours de téléchargement soit également un point d’action important, en particulier pour les utilisateurs qui numérisent la page à la recherche de celle-ci). Peut-être juste étendre le lien pour qu’il couvre? Télécharger Free Admin Template.
Oh, et corriger définitivement l'orthographe du mot? Modèle!?
Des choses bien faites
Les points mentionnés ci-dessus sont parmi les seuls problèmes que je vois avec la conception. Dans l’ensemble, c’est une exécution presque parfaite qui nécessite très peu de changements. J'aimerais terminer la critique en discutant des points forts de la conception sur lesquels nous pouvons apprendre.
Le premier est la hiérarchie visuelle. La page d'accueil utilise des graphiques et des couleurs avec parcimonie pour attirer votre attention sur quelques endroits clés. De cette façon, l'utilisateur lit cette page est en fait un chemin soigneusement construit créé par le concepteur.Depuis que cette page vend un produit, le produit est le point fort principal et les principaux points d'intérêt sont les captures d'écran des modèles.
En tant que point fort visuel, j'adore utiliser le spectre près du sommet. Cela en fait un graphique brillant qui attire vraiment votre attention. Voir notre article sur 25 brillantes utilisations de spectres colorés dans la conception Web pour plus d'exemples de cette technique.
Un autre aspect intéressant de ce graphique est qu’il a été répété avec goût dans le reste du site. Le concepteur a coupé et réutilisé la partie supérieure de cette boîte arrondie et l'a placé sur les autres pages pour assurer la continuité. Comme je l’ai mentionné dans notre dernière critique de conception, la répétition est un outil puissant (en particulier pour la stratégie de marque) correctement utilisée, c’est un exemple parfait.
À 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.