Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous indiquerons à la fois les domaines qui sont bien réalisés et 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 des ToonyTuts à venir.
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 ToonyTuts
Puisque ToonyTuts est le projet très secret de Liam McCabe, on en sait très peu à ce jour. Sur le site personnel de Liam, nous pouvons voir que ToonyTuts est décrit comme un lieu pour "des tutoriels incroyablement amusants et créatifs". Je ne peux que supposer que ToonyTuts sera un site de didacticiel superbement illustré avec beaucoup de plaisir et d’humour pour faciliter le processus d’apprentissage (bonne idée!).
Voici une capture d'écran de la prochaine page à venir:
Certains de nos sujets critiques regorgent de contenu et nécessitent un peu d'analyse, mais cette page est à la fois simple et attrayante, il n'y a donc pas grand chose à critiquer. Comme toujours, décomposons-le pièce par pièce.
Conception générale
La conception de ToonyTuts est bien? Toony. Des couleurs vives, des polices amusantes et des coins très arrondis ajoutent à ce style de bande dessinée.
Les rayons à l'arrière-plan attirent votre attention sur le logo au centre et apportent une sensation d'excitation au design.
Le logo
Le type de logo est un choix parfait pour le contenu. Notez que c’est vraiment amusant et qu’il est toujours trop lisible. La majuscule? T? les caractères sont en réalité la seule lettre qui soit considérablement déformée, les lignes verticales du haut étant inclinées en diagonale.
La partie qui attire vraiment votre attention est le trait noir épais. Cela contraste fortement avec les lettres bleues avec un dégradé subtil mais attrayant. Le trait est également fortement arrondi sur les bords, même si les lettres ne le sont pas. C'est le vrai truc pour préserver la lisibilité tout en donnant une apparence amusante, presque enfantine.
La police d’accentuation située sous le logo est beaucoup plus amusante avec des formes de lettres déformées qui ressemblent tout à fait à une caricature Dingo. Ce type est gardé petit pour que l’effet ne soit pas trop puissant, mais produit juste ce qu’il faut.
J'adore qu'un oiseau Twitter ait été jeté ici. Cela correspond parfaitement au motif du nuage et ne semble pas être une réflexion après coup. Ceux qui connaissent bien la marque Twitter reconnaîtront le symbole et cliqueront s'ils veulent suivre ToonyTuts.
Sneaky Peek
Le petit champ d'inscription est l'endroit où les coins arrondis entrent en jeu. Cette zone devait être fonctionnelle et pourtant conçue pour s’intégrer parfaitement au reste de la conception. Notez la touche de couleur utilisée pour attirer votre attention.
J'aime que le champ produise un effet d'ombre lui donnant un aspect incrusté, tandis que le bouton utilise la même ombre dans une direction différente pour donner l'impression qu'elle se détache un peu de la page. Si ces ombres étaient atténuées, elles apporteraient un réalisme qui entrerait en conflit avec le reste de la conception, mais elles ont été conservées de manière à respecter le style cartoony.
Vous voulez un coup d'oeil sournois? le texte est réellement en direct et sélectionnable. C'est une police appelée DoctorSoosBold mise en œuvre ici avec @ font-face. J'aime le choix de la police mais je n'aime pas l'implémentation de l'ombre derrière le texte. L'ombre sombre est à peine perceptible dans le texte et donne donc aux lettres un aspect un peu brouillon au lieu d'atteindre son objectif actuel, qui est d'améliorer la lisibilité.
Ma suggestion est de faire disparaître cette ombre un peu pour que le texte ne ressemble pas à de simples morceaux de noir?
Animation et musique
Lorsque vous chargez la page pour la première fois, les animations démarrent automatiquement. Les nuages montent et descendent lentement de manière décalée tandis que les rayons à l'arrière-plan tournent dans le sens des aiguilles d'une montre.
Comme la page est si simple, l'effet d'animation ajoute beaucoup à l'expérience. Si vous ouvrez le code, vous pouvez voir que les fonctionnalités de Webkit ont été utilisées pour réaliser les animations, vous ne les verrez donc pas dans les autres navigateurs.
Je ne vois pas cela comme un problème du tout. Si vous affichez la page dans un navigateur qui ne prend pas en charge les animations, elle reste parfaitement fonctionnelle et esthétique.
En plus de l'animation, il existe un clip de musique merveilleusement inspiré du cirque qui commence lorsque vous appuyez sur le bouton de lecture en haut à droite.
Il est important de noter que la musique ne démarre pas automatiquement. Des tonnes d'utilisateurs, y compris moi-même, détestent cela lorsqu'un site Web vous envoie de la musique, que vous soyez prêt ou non. Si vos haut-parleurs sont lancés et que vous êtes dans un café, la musique de ToonyTuts vous donnera sans doute des regards agacés et confus de la part des gens autour de vous.
Le petit cercle situé à côté du bouton de lecture arrête l'animation des nuages. C'est également une bonne idée pour ceux qui n'aiment pas l'apparence des nuages qui rebondissent ou qui ne veulent pas gaspiller la puissance du processeur. Étrangement, appuyer sur ce bouton n'empêche pas les rayons de tourner.
Je pense que si vous voulez donner aux utilisateurs la possibilité de cesser les animations de la page, vous devez vous assurer que tout est en ordre, sinon cela semble un peu inutile.
Dans l’ensemble, cette page est un travail impressionnant et mes critiques ont surtout porté sur des aspects extrêmement mineurs du site. C’est un excellent exemple de la façon dont vous pouvez vous amuser avec un? Prochainement? conception en raison de la fonctionnalité limitée nécessaire. Plus votre page à venir est intéressante, plus les gens sont susceptibles de la partager et plus vous gagnerez de visibilité!
À 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.
Intéressé d'avoir votre propre site critiqué? Vous pouvez en savoir plus ici.