Critique de conception Web # 30: Gray Ang
Bienvenue dans notre 30è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 fournir vos propres commentaires.
Le site d'aujourd'hui est Gray Ang, le portfolio personnel d'un concepteur de sites Web en Malaisie.
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 Gray Ang
«Je m'appelle Gray et je suis concepteur Web et développeur front-end basé à Kuala Lumpur, en Malaisie. Je recherche, planifie, conçois et code des sites Web. Je suis de bons amis avec Photoshop et HTML / CSS / jQuery, et je rends les clients, les utilisateurs et les machines heureux. »
Voici une capture d'écran de la page d'accueil:
Comme vous pouvez le voir, le site est construit sur un fond de spectre coloré avec un nuage de tags à opacité réduite contenant des éléments tels que «conception Web» et «CSS3». Ce que vous ne voyez pas dans la capture d'écran, c'est que l'arrière-plan contient également un élément animé. Il y a plusieurs cercles flous qui flottent et s'élancent derrière le contenu. Cliquez sur l'une des captures d'écran ci-dessous pour vous arrêter sur le site et le voir en action.
Ce site est en fait assez petit et simple, donc nous allons jeter un œil à chacune des pages et analyser comment l'esthétique affecte l'expérience utilisateur.
Accueil
J'apprécie vraiment le travail qui est entré dans l'esthétique du site. Le cadre ambiant est assez beau. Cependant, le problème avec la création d'un arrière-plan aussi complexe est que vous devez éventuellement placer du contenu dessus, et cela peut être une tâche très difficile.
Les gros mots décolorés en arrière-plan réduisent la lisibilité du texte sur la page d'accueil. Le paragraphe principal n'est en aucun cas impossible à lire, mais la conception est assez occupée dans le domaine du texte, forçant les utilisateurs à travailler un peu plus dur qu'ils ne le feraient normalement.
De plus, le rouge utilisé comme couleur de vol stationnaire et point d'accentuation a tendance à se perdre à l'arrière-plan. Cela est compréhensible car il n'est tout simplement pas facile de trouver une couleur qui contraste bien avec un fond multicolore. Cependant, vous voulez toujours éviter la dissonance visuelle.
La solution la plus simple à tous ces problèmes, et en fait la plupart de ceux que nous allons discuter aujourd'hui, pourrait être de simplement placer un fond noir légèrement transparent derrière tout le contenu. Cela donnera au contenu plus d'un terrain solide sur lequel se tenir et permettra au concepteur de conserver l'arrière-plan actuel.
Vous pouvez également envisager d'ajouter une sorte de graphique d'en-tête à cette page. J'ai vraiment aimé la façon dont la photo sur la page «À propos» s'est démarquée et je pense que cette idée pourrait être reproduite ici.
À propos
Ici, nous voyons une autre page qui est assez attrayante, mais souffre des mêmes problèmes mentionnés ci-dessus. J'aime bien la disposition intéressante à l'œuvre ici. La navigation reste fixe tandis que l'autre contenu défile et la page est divisée en colonnes clairement séparées et bien organisées.
La page À propos se divise en trois sous-pages distinctes: introduction, résumé et «choses que je fais». Cela permet au concepteur d'intégrer un peu de contenu tout en gardant la navigation principale super simple.
Travaux
La page «Works» est un superbe arrangement de miniatures et de texte qui à son tour conduit à des pages de projet dédiées comme celle illustrée ci-dessous. Les miniatures ont un joli traitement de bordure épaisse qui les aide à se démarquer de l'arrière-plan et la citation en haut à gauche est suffisamment grande et audacieuse pour être lisible.
Je trouve cependant que le bon alignement de la grande citation est un peu gênant. Tout sur la page est fortement aligné à gauche, et bien qu'il soit souvent efficace de violer intentionnellement une règle comme celle-ci, je ne pense pas que cela fonctionne ici. La forme générale du paragraphe est irrégulière, ce qui la rend assez difficile à lire avec un alignement correct.
Contact
La dernière page du site est la page «Contact». Celui-ci contient quelques paragraphes de texte et un formulaire de contact simple mais élégant. La première chose que j'ai remarquée ici, c'est que la citation en haut de la page semble un peu décalée. Vous pouvez essayer de l'aligner à gauche indépendamment des guillemets afin que le «T» dans «Le» et le «m» dans «miles» forment une ligne dure. Cela devrait aider l'alignement gauche à se sentir un peu plus fort qu'il ne le fait actuellement.
De plus, les champs du formulaire sont si transparents qu'ils sont presque invisibles. Encore une fois, cela peut sembler agréable, mais la convivialité en souffre. N'oubliez pas que l'esthétique d'une page a un objectif principal: mettre en valeur le contenu de manière attrayante. Votre conception devrait servir à augmenter la convivialité, pas à la sacrifier au nom du style.
Lorsque vous cliquez sur un champ pour commencer à taper, l'opacité augmente et elle devient beaucoup plus visible. Je suggère de définir cette opacité à l'état par défaut et de l'augmenter encore plus lorsqu'elle est sélectionnée.
À 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.
