Behance Twitter LinkedIn
Page d'accueil Portefeuille Contact

Conception d'un site web et construction d'un prototype pour un photographe indépendant

Résumé de l'étude de cas

On m'a présenté un logo (une ouverture de caméra en forme de symbole féminin), quelques images pour la galerie et une courte bio pour travailler. Le client avait les demandes suivantes :
  • Le design devait être à la fois audacieux et simple.
  • La page d'accueil devait être très différente de ce que vous voyez habituellement, elle devait contenir un message clair sur le type de travail que la cliente faisait, qui était orienté vers le féminisme.
  • La galerie d'images peut être conventionnelle et conviviale.

Solutions

Conception visuelle

Conception de sites web mobiles

Conception de sites web pour les ordinateurs de bureau

Prototype pour les appareils mobiles

Prototype pour les appareils de bureau

Détails du projet

Conception de la page d'accueil d'un bureau

L'idée derrière un énorme œil féminin était de transmettre le concept de ce que fait le photographe ou un artiste : voir le monde à travers l'objectif de leur propre expérience de la vie, façonnée par leurs vues et parfois obscurcie par leurs propres idées préconçues si vous voulez, et le partager avec nous exactement comme ils le voient. Il se peut que nous ne puissions pas le voir de la même manière que l'artiste et que nous ne comprenions pas l'idée de ce qu'elle essaie de nous dire, mais nous avons la possibilité de le faire.
Comme Dorothy est une féministe convaincue, j'ai décidé de mettre son logo en forme de symbole féminin dans la pupille de la femme. J'ai décoloré la peau et j'ai laissé l'iris de l'œil garder sa belle couleur. J'ai pensé qu'il serait assez cool de transformer l'ouverture du logo en un lien qui, d'un simple clic, ouvrirait sa lentille et amènerait le spectateur à la galerie d'images, en d'autres termes, transférerait le spectateur dans le monde de l'artiste. Malheureusement, cet effet ne fonctionne que hors ligne en raison d'un bug dans la fonction de partage en ligne d'Adobe XD, cependant la séquence de prototypes ci-dessous peut aider à visualiser la transition.
J'ai choisi une police de caractères à la fois arrondie et nerveuse qui, selon moi, reflétait bien le caractère de Dorothy. La page d'accueil s'est avérée être assez audacieuse, mais féminine, et c'est ce que Dorothy voulait.

Different dvices screens displaying Inspires marketing's services, testimonials and expertise sections
Phone and ipad screens showing the front page and the gallery of a photographer's web design

Conception de mobiles

J'ai dû faire un compromis pour les écrans mobiles car l'orientation du portrait ne permettait pas à l'image de l'œil de prendre tout l'espace de l'écran. J'ai réussi à donner à l'image et au message de la mission de Dorothy l'attention qu'ils méritent en utilisant toutefois la mise en page et les couleurs.
La galerie est très simple et minimaliste et assez identique sur un mobile et sur un bureau avec des flèches de navigation très fines et un fond blanc ou noir.

Les prototypes

J'ai créé deux prototypes distincts : un pour un ordinateur de bureau et un autre pour les appareils mobiles. Tous deux utilisent la transition temporelle pour obtenir l'effet de l'ouverture de l'objectif de la caméra au centre de la pupille de l'œil par un clic ou un tapotement. À l'origine, j'ai utilisé 7 tableaux pour rendre la transition plus fluide, mais Adobe XD ne pouvait pas traiter ce nombre de transitions temporelles et a gelé, si bien que j'ai réduit le nombre de tableaux à quatre (trois sur un mobile). Mais pour l'instant, il ne fonctionne que hors ligne et l'équipe d'Adobe essaie de résoudre le problème.
J'ai utilisé la transition par glissement pour une galerie mobile.

desktop prototype for a photographer's website design mobile prototype for a photographer's website design