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 Snowden Industries.
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.
À propos de Snowden Industries
«Nous sommes une équipe de professionnels, chacun possédant un ensemble de compétences spécialisées unique. Nous aimons ce que nous faisons et aidons nos clients à manœuvrer dans le processus créatif de traduction d'initiatives commerciales hors ligne existantes en expériences immersives en ligne. Nous planifions, concevons, codons, construisons et critiquons nos projets 24h / 24. Nous gérons des projets avec BaseCamp, facturons avec FreshBooks et communiquons via plusieurs services de messagerie en ligne tels que Skype, AIM et Yahoo Chat. Nous sommes également toujours disponibles par téléphone et par courrier électronique pour vous aider dans la réalisation de votre projet.
Voici une capture d'écran de la page d'accueil:
Impression initiale
Ma première réaction sur ce site est simple: c'est génial. C'est attrayant, coloré, dynamique, engageant, bien organisé; Je pourrais continuer encore et encore. Les applaudissements aux gens de Snowden ont fait un travail remarquable.
Critiquer un site comme celui-ci est toujours difficile car il est si bien fait. Au lieu de mettre de côté tout ce qui a mal tourné, discutons de ce qui s'est bien passé. En cours de route, nous verrons si nous pouvons trouver des domaines susceptibles d’être améliorés.
CRAP: l'acronyme pour juger dessins par
L’auteur des dessins Robin Williams (et non l’acteur) a énoncé depuis longtemps quatre principes de conception de base que j’utilise non seulement comme guide pour mes propres conceptions, mais également comme norme permettant de juger d’autres conceptions. Ces principes sont Contraste, Répétition, Alignement et Proximité, désignés avec amour dans le monde du design par «CRAP».
Pour voir pourquoi cette conception fonctionne si bien, voyons comment elle se maintient dans chacun de ces domaines. En tant que lecteur, cela vous donnera un aperçu très important de la manière dont vous pouvez utiliser ces principes dans votre propre travail.
Contraste
Je dirais que le contraste est l’un des éléments les plus forts de ce design. C'est la raison pour laquelle la page attire vraiment votre attention et la retient lorsque vous faites défiler la page. Voici quelques exemples:
Remarquez à quel point la palette de couleurs est simple. C’est une bonne chose à propos du design que beaucoup de gens ignorent. Un des meilleurs conseils que je puisse vous donner: si vous n'êtes pas génial avec les combinaisons de couleurs, restez simple, stupide! Il y a une stratégie classique à l'œuvre ici que nous observons sur d'innombrables sites. Premièrement, deux couleurs très contrastées ont été choisies, ici le noir et le blanc. Cela ne devient tout simplement pas plus basique et plus contrasté.
Ensuite, une troisième couleur, généralement une couleur vive orange, rouge ou verte, est utilisée et utilisée à plusieurs reprises sur la page pour guider votre attention sur des points spécifiques. Cette troisième couleur est utilisée avec parcimonie et vous saisit vraiment à chaque fois que vous la voyez. Snowden a utilisé une belle orange pour y parvenir.
En tant que sujet complètement déconnecté, notez que le site ne pas ressembler à une conception de halloween. Trop souvent, j'entends des designers donner des conseils irréfléchis pour éviter les combinaisons de vacances telles que le rouge et le vert (Noël) ou l'orange et le noir (Halloween), car les spectateurs associeront immédiatement votre conception à ces vacances. L’avertissement contient une certaine part de vérité, mais si vous utilisez l’une des couleurs avec parcimonie, comme Snowden l’a fait avec l’orange, vous pouvez facilement éviter cela. Si vous êtes un designer talentueux, vous devriez pouvoir faire réfléchir les téléspectateurs à Noël uniquement quand vous le souhaitez.
Répétition
Bien que nous parlions de couleur, cette touche d’orange est également un point fort de répétition sur toute la page. Comme je l'ai mentionné ci-dessus, le concepteur essaie d'attirer votre attention sur quelque chose d'important.
Un autre point intentionnel de répétition est l'utilisation de cercles et de coins fortement arrondis. Tout au long de la page, nous voyons des cercles utilisés comme déclaration de conception. Encore et encore, ils utilisent le même élément de base pour créer une sensation esthétique forte et cohérente.
Reprenant ce thème arrondi, l’organisation sur le site est guidée par ces grandes sections en arc de cercle. Si nous supprimons le contenu, il est facile de voir la répétition ici.
Alignement
L'alignement est un aspect fondamental mais extrêmement important de votre conception. La mise en page de ce site est assez complexe, mais les arcs lui donnent un aspect un peu plus compliqué qu’elle ne l’est réellement. La nature arrondie des sections confère à la mise en page une illusion presque organique, mais si vous enlevez la conception visuelle, vous pouvez voir que la structure filaire située au-dessous est une grille solide.
Cet exemple aide vraiment à dissiper le mythe selon lequel les structures filaires vous enferment dans des structures de conception si rigides qu'elles suppriment la liberté de création. Ce site offre un attrait visuel créatif et pourtant, la structure sous-jacente est assez simple et ennuyeuse!
Proximité
Le principe de proximité est tel que, si c'est bien fait, vous ne devriez jamais le remarquer. Autrement dit, vous ne ferez jamais attention au fait que les choses qui vont ensemble sont ensemble, vous ne ferez attention qu'aux problèmes, quand quelque chose est déplacé ou difficile à trouver.
Pour cette raison, la proximité semble évidente et simple, mais c'est en réalité un point d'achoppement pour de nombreux concepteurs. Comme nous l'avons déjà mentionné à plusieurs reprises, la structure de ce site est fournie par les arcs de blanc et de noir. Cela a créé de jolis petits recoins où le concepteur a pu disposer des groupes d’informations visuels clairs.
Ne commettez pas l'erreur de penser que la mise en page doit être complètement indépendante de la conception esthétique. Cette page montre clairement que les deux travaillent en étroite collaboration et constituent un puissant outil de mise en œuvre de la proximité.
Conclusion
Il n'y a pas de formule magique que vous pouvez suivre à chaque fois pour une conception réussie, mais les principes ci-dessus vous rapprocheront. Les concepteurs de Snowden maîtrisent clairement la théorie de la conception de base et savent comment créer une page à la fois fonctionnelle et attractive.
Vous avez peut-être remarqué que je n'ai toujours pas vraiment fait de commentaires constructifs et, pour être honnête, je ne sais trop quoi dire. C'est un design solide que je serais moi-même extrêmement fier de produire. La seule chose qui me dérange, c'est l'utilisation du remplacement de la police Cufon. La police utilisée est un sans-serif assez simple et je ne suis pas sûr que Cufon vaille la peine d'être utilisé. Helvetica Neue et des solutions de rechange plus sûres pourraient vraisemblablement donner la même apparence. De plus, @ font-face fournit une alternative plus conviviale, bien que certains préfèrent le rendu visuel de Cufon. Quoi qu’il en soit, c’est une mince affaire avec ce site et il est complètement ouvert au débat.
Regarder autour
Avant de partir, arrêtez-vous sur le site et regardez autour de vous. Remarquez comment ils ont pris ces mêmes principes solides et les ont combinés avec de nouvelles présentations et idées sur d’autres pages du 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.