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 le portfolio personnel de Paul O'Rely, designer brésilien. 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.
A propos de Paul O'Rely
Concepteur interactif autoproclamé et entrepreneur Web, Paul a actuellement 28 ans, réside au Brésil et se passionne pour les choses qui sont créatives, simples et surprenantes.
Voici une capture d'écran de son site internet
Première impression
Je dirai tout de suite que j'aime beaucoup le site de Paul. C'est assez unique, il y a beaucoup de choses intéressantes à regarder et avec lesquelles interagir, et le message est limpide: voici qui est cette personne, ce qu'elle fait et comment la contacter. Honnêtement, il s’agit là des aspects les plus importants du portefeuille personnel d’un designer et je pense que Paul les a tous cloués (une petite édition peut être justifiée, mais sinon, un excellent travail).
Si je devais émettre une sorte de plainte globale, ce serait probablement l'absence d'un important? Waouh? facteur dans l'en-tête. Le site dans son ensemble est génial (il y a du bon vaudou intelligent dans le pied de page), mais lorsque je charge la partie supérieure de la page, rien ne m'attrape vraiment et m'invite à regarder plus loin. Comme je l'ai mentionné, il s'efforce de nous présenter le site avec brio, et je ne voudrais pas nier cela, mais j'ai toujours le sentiment que quelque chose de plus pourrait être fait avec cet endroit pour impressionner les visiteurs.
Maintenant que nous avons discuté du site dans son ensemble, passons à la dés et parlons des divers aspects spécifiques de la conception. La plupart de ce que j'ai à dire est positif, c'est donc l'un de ces sites qui servira davantage de bon exemple que de mauvais.
Une seule page!
J'ai entendu des gens critiquer des sites d'une seule page, mais je les ai creusés. Paul a fait pas mal de choses avec cette seule toile et pourtant elle parvient toujours à se sentir complètement débordante d'espaces.
Étant donné le but relativement simple du site, je ne vois pas vraiment la nécessité de diviser ce contenu en pages séparées. Le flux est logique et facile à suivre: vous rencontrez Paul et apprenez ce qu’il fait, ensuite vous voyez ses échantillons de travail, puis vous avez la possibilité de le contacter si vous aimez ce que vous voyez.
L'exception au paradigme d'une page est bien sûr son blog, mais cela ressemble vraiment à une entité complètement séparée plutôt qu'à une extension de ce site.
Typographie
Paul propose sur son site de superbes polices personnalisées, qui sont bien entendu fournies gracieusement par Typekit. Le serif audacieux dans le titre s'appelle Adelle, un changement intéressant du ChunkFive typique que vous voyez partout.
J'aime aussi beaucoup le choix de Paul d'associer Adelle à: Museo Sans. La famille Museo est en fait principalement constituée de empattements de dalle, mais elle n’en existe qu’une version sans empattement. C’est un choix vraiment judicieux, car Museo Sans est spécialement conçu pour être beau à côté des polices de caractères serif.
Bien que Paul se soit bien débrouillé avec les deux premiers choix de polices, malheureusement, je pense que le troisième est une grosse erreur.
Comme vous pouvez le constater, le formulaire de contact utilise du homard. Il y a trois raisons pour lesquelles je n'aime pas particulièrement ce choix. Pour commencer, le homard approche rapidement cliché? territoire juste parce qu'il est tellement omniprésent. Pour ne pas dire que vous ne pouvez pas utiliser les polices de caractères populaires, vous devez simplement le faire avec prudence et tact.
Plus important encore, vous avez déjà choisi votre police de caractères grosse, audacieuse et unique pour la page et s'écarter de celle-ci uniquement pour le formulaire de contact est un peu choquant. Les deux peuvent être combinés, mais il faut que ce soit intégré avec une hiérarchie claire comme dans l'exemple ci-dessous plutôt que par une commutation arbitraire entre eux.
Enfin, pratiquement chaque fois que vous avez beaucoup de texte, une police de script sera un choix remarquablement médiocre du point de vue de la lisibilité. En réalité, vos yeux et votre cerveau ont encore beaucoup de travail pour trier et déchiffrer un paragraphe entier rédigé dans un script en boucle et connecté.
Étant donné qu’il s’agit d’un formulaire de contact, il est possible que les clients s’adressent à Paul avec un long discours. Me forcer à écrire en homard est un excellent moyen de ne jamais utiliser votre formulaire de contact.
Couleurs
Le site de Paul utilise un jeu de couleurs de base en cinq parties. Voici un tableau rapide des couleurs que vous verrez sur la page:
Comme vous pouvez le constater, cette palette de couleurs très audacieuse a été conçue pour attirer votre attention. Pour la plupart, il utilise une balance entre le charbon, la crème et le bleu, les deux premiers étant suffisamment doux pour faire ressortir le bleu. Le vert est uniquement utilisé pour l'élément d'état en tant que violation du flux normal, ce qui attire vraiment votre attention sur ce point.
Si vous regardez assez fort, vous y trouverez également des éclaboussures de rouge. Je pense cependant que cela semble incohérent et inutile. Il serait préférable d’utiliser la répétition et de saisir cette occasion pour utiliser le vert (ou peut-être simplement utiliser le rouge sans vert).
Engagement et interaction
Une autre chose que Paul fait vraiment bien est de vous engager et d’interagir avec le site. Par exemple, l'en-tête montre une sorte de graphique à barres de ses talents, qui contient différentes catégories sur lesquelles on peut cliquer et développer une animation fluide.
Faites défiler la page plus bas pour trouver un curseur d'image verticale interactive présentant son travail.Une fois encore, nous constatons une excellente utilisation des transitions et des événements de clic, ainsi que de bons travaux d’atténuation.
Lorsque vous arrivez au pied de page, vous trouvez un lac de poissons qui nagent. Cette partie est réellement très impressionnante! Rien de tout cela ne ressemble à une animation ennuyeuse, uniforme et en boucle. Le motif du poisson et des bulles se sent aléatoire (que ce soit réellement ou non est presque sans importance).
J'aime aussi beaucoup la façon dont les poissons varient leur vitesse de manière réaliste. Ils nagent lentement, puis s’arrêtent presque pour pouvoir se faufiler et tirer en avant. Chapeau à Paul pour son excellent travail d'animation ici!
Résumé
Pour résumer, j'adore le site. C'est vraiment bien fait et je peux dire que Paul y a consacré beaucoup d'efforts. Presque tout sur le site a fière allure, de la mise en page et des polices aux couleurs et illustrations. Ma plus grande plainte est l'utilisation de Homard dans le formulaire de contact et ma deuxième préoccupation est de repenser l'en-tête pour intégrer une partie du? Wow? facteur que vous obtenez lorsque vous creusez vraiment dans le site.
À 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.