Les meilleurs designs de sites Web de 2021
Page 1 sur 3: The Neverlands par Active Color- The Neverlands par Active Color
- Le moulin par sortie studio
- Les meilleurs sites Web de 2020: 3-8
Toutes les expériences Web n'ont pas besoin d'être révolutionnaires, visuellement étonnantes et pleines de surprises inattendues. La plupart du temps, les visiteurs d'un site Web veulent simplement trouver les informations qu'ils recherchent, rapidement et facilement.
Mais tout comme les tenues les plus extravagantes sur les podiums de mode peuvent influencer subtilement les vêtements les plus portables que l'on trouve dans la grande rue, cela vaut la peine que les concepteurs Web gardent au moins la moitié d'un œil sur l'extrémité supérieure de la création de sites Web. Même ceux qui semblent trop flashy peuvent toujours vous donner de l'inspiration et des idées que vous pouvez intégrer, de différentes manières, dans vos propres créations.
Dans cet esprit, nous revenons sur les créations qui nous semblent vraiment repoussées. Non seulement ces sites remplissent la tâche de base de servir les visiteurs ce qu'ils recherchent, mais ils repensent également l'apparence et le fonctionnement d'un site Web, de manière fraîche, inventive et originale.
01. The Neverlands par Active Color
Lorsque vous visitez un site Web faisant la promotion d'un lieu de vie nocturne, vous vous attendez à quelque chose de flashy, bruyant, coloré et probablement un peu criard. Mais Les Neverlands - qui abrite deux des lieux de vie nocturne les plus haut de gamme de Los Angeles, The Edison et Clifton’s Republic - voulait projeter quelque chose d'un peu plus de bon goût. Alors ils se sont tournés vers Couleur active , qui a conçu pour eux un site Web tout sauf ordinaire.
Basé autour de leurs animations d'illustrations personnalisées peintes à la main par Shannon Stamey , c’est vraiment une chose de beauté. Nous avons discuté avec le fondateur et directeur créatif Damjan Krajacic pour savoir comment ils l'ont fait.
Comment avez-vous eu ce concert inhabituel?
Nous travaillons avec le client et propriétaire de The Neverlands, Andrew Meieran, depuis qu'ils ont ouvert le premier lieu au centre-ville de LA. L'Edison est vraiment un lieu de nuit spectaculaire, construit dans le sous-sol du bâtiment historique LA Higgins, et préservant les générateurs électriques et les éléments industriels de la centrale électrique qui ont marqué le nouvel avenir de DTLA.
Plus tard, nous avons travaillé sur plusieurs autres projets avec le même client, y compris le site Web de Clifton’s Republic. Lorsque ce projet a démarré, nous étions déjà très profondément immergés dans la marque et les lieux, mais aussi assez proches du client et de son style exceptionnel, visionnaire et excentrique.
Quel était le dossier?
Le client a toujours eu une vision fantastique de la façon de traduire ces espaces visionnaires dans un monde numérique. Ils voulaient créer un sens de l'aventure, de la curiosité, une évasion de l'ordinaire dans un monde de fantaisie enfantin. Ce projet a été un effort créatif collaboratif avec le client, sur une longue période de plus de deux ans. Même si le concept global est resté à peu près le même au fil du temps, les idées sur la façon de le mettre en pratique évoluaient continuellement, et souvent nous entrions dans les moindres détails sur des illustrations ou un type spécifique de mouvement ou d'art.
Même si nous avons généralement un processus beaucoup plus clair, stratégique et défini, dans ce cas, nous avons décidé de laisser la nature artistique du projet nous guider à bien des égards. Le client étant lui-même extrêmement créatif et artistique, nous n'avons vu aucun autre moyen de mener à bien le projet. Parfois, vous devez contourner les règles pour créer quelque chose de nouveau et d'inattendu.
Quelles ont été vos inspirations visuelles?
Le concept et les couleurs du site Web ont été principalement inspirés par les superbes intérieurs de Clifton's Republic et The Edison, qui sont littéralement ces mondes fantastiques dans lesquels vous pouvez vous immerger. , il y a une chaleur sous-jacente à chaque espace, et les tons chauds de bronze, de cuivre et d'or pénètrent les sens. Nous voulions étendre cette palette de couleurs pour qu'elle soit un peu plus appropriée pour chaque lieu ou page de destination, nous avons donc élargi la palette de couleurs pour inclure des bleus pastel, des sarcelles et une variété d'autres couleurs.
Une partie de la palette de couleurs était clairement inspirée des illustrations peintes à la main, et nous plierions la page pour qu'elle corresponde. D'autres fois, nous ajusterions les teintes et les couleurs des illustrations pour qu'elles se fondent toutes et correspondent à un style plus cohérent.
Qui a réalisé les illustrations?
Les illustrations sont l'œuvre de Shannon Stamey, qui a été commandée par le client. En collaboration avec le client et Stamey, nous avons conceptualisé les écrans d'atterrissage et les illustrations, qui ont été exécutés à la perfection par Stamey. Ce que nous n'avons pas pu faire peindre à la main, nous avons pu le trouver soit dans des images de stock, soit dans des archives du domaine public. Le client Andrew Meieran est lui-même historien, avec une connaissance et une passion incroyables pour l'art de l'époque, il a donc joué un rôle déterminant dans la recherche et la décision sur de nombreux éléments.
Comment avez-vous abordé la typographie?
C'était un équilibre entre praticité et chance. Nous n'avions pas de système d'identité visuelle avec lequel travailler ici, pas de style ou de logo prédéfini, nous avons donc travaillé à rebours pour trouver les polices qui correspondent à l'illustration. Nous voulions que les choses restent humaines, naturelles et utilisables mais en même temps un peu magiques dans nos choix.
Quelles technologies avez-vous utilisées pour créer le site?
Nous avons utilisé une installation WordPress personnalisée pour alimenter le back-end. Le site Web est entièrement codé sur le front-end avec beaucoup de JavaScript et CSS personnalisés. Nous avons modifié le formidable script de parallaxe open-source de Matthew Wagerfield en tant que moteur principal du mouvement de la page de destination. Nous avons également créé de nombreuses autres fonctionnalités personnalisées qui se produisent sur les pages des sites telles que The Edison, Clifton’s Republic et Pacific Seas lorsque les utilisateurs font défiler, ce qui donne l'impression de descendre dans la ville, dans la canopée des arbres ou dans l'océan.
Le plus grand défi était de loin de créer une expérience de navigateur fluide avec autant de PNG transparents se déplaçant en parallaxe. Beaucoup de temps a été consacré à l'optimisation des images et des scripts pour pouvoir le retirer de plusieurs navigateurs.
Les transitions sont magnifiquement efficaces: comment les avez-vous créées?
Avec beaucoup d'ajustements et d'expérimentation! Nous étions quelque peu limités dans la possibilité de demander des illustrations supplémentaires au besoin, nous devions donc parfois rapiécer les pièces ensemble, étendre l'œuvre d'art, la manipuler. Une fois que nous avons eu les actifs prêts, nous avons pris beaucoup de temps pour ajuster les transitions pour rendre le flux fluide. C'était un bon équilibre entre ce que nous voulions visuellement et ce qui était techniquement faisable dans chaque navigateur avec une puissance de rendu limitée.
Comment avez-vous fait chanter le site sur mobile?
La traduction sur mobile s'est en fait assez bien déroulée. Ce projet était lourd sur le bureau, mais nous savions que les pages de destination fonctionneraient bien sur mobile, car c'est ainsi que nous les avons conçues dès le début. Nous savions qu'en raison de la taille très réduite des images, les transitions seront fluides. Enfin, vous ne pouvez pas avoir trop de choses sur un petit écran, nous avons donc pu réduire les choses et simplifier l'interface utilisateur. Tout cela a conduit à une expérience mobile plus fluide et plus simple.
Quelle est la plus grande leçon que vous avez apprise?
Cette patience est une vertu. Nous devions certainement en avoir beaucoup dans ce projet. Le fait est que pour bien faire quelque chose, il faut être prêt à consacrer du temps et à faire des efforts, et cela demande de la patience.
Sur le plan technique et artistique des choses, le projet nous a rappelé à quel point nous aimons les sites prêts à l'emploi, remontant à des sites construits en flash que nous adorions, à une époque où Internet était beaucoup plus varié et non conventionnel. Cependant, avec les récents développements du navigateur, nous sommes à nouveau capables de réaliser des expériences exceptionnelles qui ne tombent pas dans une boîte, et nous sommes ravis d'utiliser cette conscience pour nous guider dans les projets futurs. Nous avons eu la chance que dans ce cas, nous travaillions avec un client tout à fait unique qui apprécie l'esthétique et l'originalité.
Page suivante: Découvrez la conception de site Web numéro deux de 2020 à ce jour ...
Creative Bloq a créé ce contenu dans le cadre d'un partenariat payant avec Adobe Stock. Le contenu de cet article est entièrement indépendant et reflète uniquement l'opinion éditoriale de Creative Bloq.
- 1
- deux
- 3
Page actuelle: The Neverlands par Active Color
Page suivante Le moulin par sortie studio
