Bienvenue à notre 30ème critique de design! 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 actuel est Grey 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 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 Grey Ang
«Je m'appelle Grey 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 constater, 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 de sites Web". et? CSS3 ?. La capture d'écran ne vous indique pas que l'arrière-plan comporte également un élément animé. Plusieurs cercles flous flottent 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, nous allons donc examiner chacune des pages et analyser comment l’esthétique affecte l’utilisateur.
Accueil
J'apprécie vraiment le travail qui a contribué à 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, ce qui peut être une tâche très difficile.
Les gros mots décolorés à l'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 le motif est très occupé dans la zone du texte, ce qui oblige les utilisateurs à travailler un peu plus dur qu’ils le feraient normalement.
De plus, le rouge utilisé comme couleur de survol et point d’emphase a tendance à se perdre en 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 à toutes ces questions, et même à la plupart de celles dont nous allons parler aujourd'hui, pourrait être simplement de placer un fond noir légèrement transparent derrière tout le contenu. Cela donnera au contenu un terrain plus solide 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é comment la photo sur le? À propos de? La page se démarque et je pense que cette idée pourrait être reproduite ici.
Sur
Nous voyons ici une autre page assez attrayante, mais qui présente les mêmes problèmes que ceux mentionnés ci-dessus. J'aime la mise en page intéressante au travail ici cependant. La navigation reste fixe pendant 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 de se divise en trois sous-pages distinctes: introduction, CV et "choses que je fais". Cela permet au concepteur d’intégrer beaucoup de contenu tout en simplifiant la navigation principale.
Travaux
Les travaux? page est un superbe ensemble de miniatures et de texte qui aboutit à des pages de projet dédiées comme celles illustrées ci-dessous. Les miniatures ont un joli traitement de bordure épaisse qui leur permet de se démarquer de l'arrière-plan et la citation en haut à gauche est grande et suffisamment audacieuse pour être lisible.
Je trouve néanmoins que le bon alignement de la grande citation est un peu gênant. Tout ce qui se trouve sur la page a un fort alignement à gauche, et bien qu'il soit souvent efficace d'enfreindre intentionnellement une règle telle que celle-ci, je ne pense pas que cela fonctionne ici. La forme générale du paragraphe est irrégulière, ce qui rend difficile la lecture avec un bon alignement.
Contact
La dernière page du site est le? Contact? page. 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 est que la citation en haut de la page est un peu décalée. Vous pouvez essayer de l'aligner à gauche indépendamment des guillemets pour que le? T? dans le? et eux? dans? miles? former une ligne dure. Cela devrait aider l’alignement de 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 paraître agréable, mais la facilité d'utilisation 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 doit servir à augmenter la convivialité, pas à la sacrifier au nom du style.
Lorsque vous cliquez sur un champ pour commencer à taper, l'opacité augmente et devient beaucoup plus perceptible. Je suggérerais de définir cette opacité à l'état par défaut et de l'augmenter encore plus quand elle est sélectionnée.
À 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.