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 la page d'accueil de Ray Cheung, décrit comme un simple entrepreneur en ligne.
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 Ray Cheung
«Plutôt que de créer des sites Web pour des clients, j'aime travailler sur mes propres projets; Partir d’une idée, concevoir à partir de rien avec une inspiration en chemin, coder puis la diffuser à travers le monde me donne un grand sentiment de réussite. Actuellement, je gère des sites Web auto-lancés avec environ deux millions de visiteurs par mois, tous dans le but de partager des ressources utiles avec les gens.
Voici une capture d'écran de la page d'accueil:
Premières impressions
Ray Cheung est un homme qui a besoin de très peu d’instructions de conception. Il n'a pas un, mais plusieurs projets Web très réussis, qui ont tous fière allure et sa page d'accueil ne fait pas exception.
Le thème général est assez intéressant: un fond en bois avec une pile de papiers pour contenir le contenu. Cependant, au lieu d'utiliser une texture de papier, Ray a opté pour un fond d'étoile. Ca a l'air fou mais l'effet global est plutôt sympa! J'adore quand les concepteurs font quelque chose d'inattendu plutôt que de courir avec une tendance.
L'effet de page empilée fait penser à un thème Tumblr populaire, mais les similitudes s'arrêtent là car la présentation et le design sont assez différents.
En un coup de œil, j’aime vraiment ce que Ray a fait ici. Regardons de plus près certaines des sections.
Texture et couleur
Comme je l'ai mentionné ci-dessus, l'espace et les textures de bois sont une combinaison peu probable, mais les deux sont très bien conçus et semblent fonctionner parfaitement ensemble. J'aime la palette de couleurs sombres qui résulte des deux:
Les polices
Lorsque vous avez un thème visuel assez audacieux, il peut être difficile de le combiner avec une typographie délirante. L'idée générale est que vous ne voulez pas trop d'objets en compétition pour attirer l'attention.
À la lumière de cela, Ray a fait le bon choix en conservant ses polices. Toute la typographie est composée de caractères sans empattement et facilement lisibles. L'en-tête du site principal est en gras, suivi d'une variante ultra légère (peut-être trop légère). Ces en-têtes de section condensés et audacieux sont des images avec la copie de corps en direct dans Arial. Ce serait formidable de voir une intégration de @ font-face apporter quelques-uns de ce type en direct, mais les images sont assez minuscules, donc je ne pense pas que ce soit un gros problème (bien que fouetter un sprite ou deux ne ferait pas de mal) .
La navigation
Entre ces critiques et notre galerie de designers, j’ai examiné de près un tonne des conceptions de sites Web au fil des ans. Ce n'est pas souvent que je vois un truc que je n'ai jamais rencontré auparavant. La navigation de Ray m'a vraiment surpris. Je ne crois pas avoir jamais vu cet effet particulier.
La conception de cette section est simple et fonctionne à merveille avec la page globale. J'adore le contraste des boutons légèrement extrudés et de la section en dessous.
Lorsque vous cliquez sur l'un des deux derniers boutons, la page défile automatiquement pour vous emmener à cette section, une idée assez typique. Cependant, les deux autres boutons renvoient à deux sections qui se trouvent déjà en haut de la page. Ainsi, lorsque vous cliquez dessus, leurs sections respectives tremblent dans une animation fluide. C'est un effet assez simple qui donne l'impression que le site est plus dynamique et presque vivant et convivial.
Sections
La page est divisée en deux colonnes verticales. Ray présente divers projets sur lesquels Ray a travaillé et à gauche diverses petites sections de contenu: À propos de moi, Mes compétences, Lecture et Reconnaissance.
Chaque section est surmontée d'un en-tête et d'une petite icône, une autre petite fonctionnalité qui me fait instantanément penser à Tumblr.
Ces sections sont clairement distinctes et faciles à définir individuellement. Chacun a un design unique, mais ils sont bien liés. Une petite chose que je considérerais sur le? Mes compétences? La section colorie les barres horizontales pour qu’elles correspondent à leurs parties respectives du graphique circulaire. Cela contribuerait à la cohérence des deux graphiques et indiquerait immédiatement comment ils étaient connectés.
Défilement intelligent
Une autre chose que j’aime vraiment sur ce site est la façon dont Ray a pensé à la fonctionnalité de défilement. La colonne de gauche se termine au formulaire de contact et la colonne de droite est nettement plus longue. Lorsque vous faites défiler la page, la page entière défile de manière uniforme, comme vous le souhaitiez, jusqu'à ce que vous remplissiez le formulaire de contact. À ce stade, la colonne de gauche cesse de défiler et la colonne de droite continue.
Des touches comme celles-ci montrent simplement combien de temps a été consacré à la manière de rendre le site plus convivial.
Lumières éteintes!
Une des rares choses dont je n'étais pas tout à fait sûr sur le site était l'interrupteur près du sommet pour éteindre les lumières. Je m'attendais à ce qu'une fois que j'appuie sur ce commutateur, le thème change. Peut-être que le fond de bois s'effacerait dans le noir, révélant plus d'étoiles ou autre chose tout aussi intéressante.
Cependant, lorsque vous appuyez sur le commutateur, voici ce que vous obtenez:
Je comprends le message ici: économiser de l’énergie en éteignant les lumières. Cependant, la mise en œuvre est un peu délicate. Cette page ne vous donne aucun moyen de revenir sur le site si vous appuyez simplement sur le bouton pour voir ce qu'il a fait. Elle ne vous oriente pas non plus, comme un autre projet de Ray ou des ressources pour économiser de l'énergie.Un autre élément déroutant est que la batterie est faible. message dans le pied de page du site. Cela peut être lié au message dans l'en-tête, mais c'est assez flou.
Je pense que les intentions sont bonnes ici, mais le résultat est en train de réduire ma qualité perçue du site et je pense que si elles doivent être conservées, elles doivent être repensées.
Conclusion
En terminant, je pense que Ray a créé une page Web formidable ici pour se présenter. La page indique clairement qui il est et ce qu'il fait et a l'air génial de le faire. La mise en page est logique et facile à suivre, le design est unique et intéressant et le contenu est, pour l’essentiel, pertinent.
À 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.