Catégories
Astuces et Design

Madeleine Dalla remporte le site du mois mars 2020

Le portfolio photographique de Madeleine Dalla par Marvin Schwaibold, Yael Bienenstock et Jesper Vos remporte le site du mois de mars 2020, merci à tous ceux qui se sont impliqués dans les votes et l'ont partagé sur les réseaux sociaux. Maintenant, nous entendons parler de la création du nouveau portefeuille élégant de Madeleine site Internet.

Madeleine Dalla est une suédoise née au Nicaragua photographe basé à New York. Pour encadrer son travail incroyable, nous lui avons construit une identité visuelle accompagnée d'un nouveau site Web élégant. Avec ce projet, nous ne voulions pas submerger son travail de direction artistique et de mouvement, mais le débarrasser de ces éléments et accentuer délicatement sa photographie.

madeleine-dalla-projects-02
Projets (Aperçu du site)

Direction artistique

Nous avons défini un style général sur tout le site avec un large aspect éditorial. Surtout dans les pages du projet, nous l'avons souligné avec des composants simples et transparents qui, dans leur simplicité, présentent le mieux le travail de Madeleine. Tout en restant à distance de tout élément inutile, il y a beaucoup à dire sur le typographie Dans ce projet.

C'est une symbiose de polices modérées et distinctives qui se réunissent en harmonie.

Utilisé dans combinaison avec Neue Haas, Saol Display – élégant, abstrait et particulier, non seulement reflète le style unique de Madeleine, mais accentue également la complexité de son travail. Par conséquent, les deux polices ont été utilisées délibérément dans les mêmes contextes et juxtaposées dans l'ensemble de la marque. Il est important pour nous de présenter la photographie de Madeleine sous le meilleur jour possible, et inspiré par les négatifs analogiques et leur développement, nous avons donné une seconde vie à son travail en inversant les couleurs et en le présentant dans un mode sombre optionnel, basculable dans le menu.

madeleine-dalla-navigation-03
Navigation dans le projet (index primaire)

Identité professionnelle

Travaillant ensemble comme un trio créatif pour la première fois, nous avons combiné nos divers horizons professionnels dans ce projet. Yael et Marvin travaillent dans l'équipe Web Concepts de Squarespace à New York et Jesper travaille au RESN d'Amsterdam. Ceci étant un projet parallèle de nous trois, une chose qui nous a profondément marqué était le fait que nous voulions lui donner notre touche personnelle tout en gardant le client à l'esprit. Nous aimons considérer cette identité visuelle et ce site Web comme un produit créatif qui, non seulement correspond parfaitement au travail de Madeleine, mais nous reflète également en tant que professionnels de la création.

Dans ce projet, nous avions tous un rôle essentiel à jouer. Chacun de nous a un ensemble de compétences et une perspective créative différents. Les idées sont très fragiles et peuvent facilement être ignorées ou oubliées, donc nous faire confiance et être égaux était important pour nous. Nous nous sommes assurés de nous donner suffisamment d'espace et l'occasion de nous exprimer et soyez fier du résultat final. Nous avons essayé de ne jamais séparer les tâches; la conception, le mouvement et le développement tous se sont réunis du début à la fin et nous pensons que c'est la raison pour laquelle le projet s'est déroulé comme il l'a fait.

madeleine-dalla-mobile-04
Mobile

Interaction et mouvement

Bien que propres et dégagés, certains détails sur lesquels nous avons passé beaucoup de temps sont les animations de titre et survols. Le mouvement de ceux-ci est élégant et délicat pour refléter la belle imagerie et élever la typographie complexe. L'expérience professionnelle de Yael apporte un style de mouvement unique au Web. Refléter son style en développement est un défi intéressant et amusant à relever.

Garder également une sensation native et réactive à l'expérience du site Web, tout en créant des interactions uniques, a été un défi que nous avons dû relever en équipe pendant le processus de ce site Web. le système de navigation double permet aux visiteurs de rechercher les projets de Madeleine par titre ou d'explorer visuellement son travail dans un carrousel à défilement infini. Pour ceux qui souhaitent visualiser toutes les photos sans interruption, nous avons rendu possible la navigation linéaire dans tous les projets en ajoutant un lien «projet suivant» au bas de chaque page. De plus, nous avons construit un page d'archive que, en utilisant un disposition de grille aléatoire, donne un aperçu des anciens projets et expériences que Madeleine veut mettre en valeur.

Les technologies

On pourrait dire que nous avons reflété l'esthétique légère de la conception du site Web dans le processus de développement. Nous avons utilisé Nuxt.js avec Prismic CMS pour générer un site Web statique très léger hébergé sur Netlify. Seuls les éléments essentiels sont préchargés, et pour de meilleures performances, presque toutes les animations sont faites avec css.

Nous avons reflété l'esthétique légère de la conception du site Web dans le processus de développement.

madeleine-dalla-archives-05
Page d'archive

Bien que ce ne soit pas un objectif principal, nous avons mis en œuvre de nombreuses fonctionnalités d'accessibilité dans le portefeuille de Madeleine. Par exemple, le balisage requis pour les animations de texte crée une situation très délicate pour les lecteurs d'écran. En utilisant le droit Attributs ARIA ces titres sont traités comme d'habitude. En prime, ce site Web peut être installé en tant que PWA. Tout en l'exécutant en mode autonome, un technicien de service interceptera et mettra en cache toutes les demandes du serveur, ce qui rendra ce portefeuille complètement hors ligne disponible afin que Madeleine puisse présenter son travail où qu'elle soit et quand elle le souhaite.

Technologies utilisées

  • Nuxt.js
  • Prismique
  • Netlify
  • Figma
  • Effets secondaires

Information d'entreprise

Nous sommes un trio de professionnels créatifs avec des antécédents professionnels divers. Marvin est designer senior dans l'équipe Web Concepts de Squarespace à New York. Yael est motion designer et travaille également dans l'équipe Web Concepts de Squarespace à New York. Jesper est un développeur interactif travaillant actuellement à Resn à Amsterdam.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *