hello@juliettelibotte.com

Hugo Sourdin – Site web

2020

Hugo Sourdin est un jeune photographe indépendant Normand basé à Paris. Il commence son activité en 2018 et il est spécialisé dans les portraits et les reportages.

Le contexte

Hugo commence à partager ses portraits à partir de 2018 sur les réseaux sociaux . Il continue de développer son activité en 2019 en déployant un nouveau service : les reportages.

Hugo me confie alors la refonte de son site internet et la création de son identité visuelle pour mettre en valeur son travail photographique et démarcher avec ses futurs clients.

Il a plusieurs attentes à travers cette refonte. La première est de donner une dimension professionnelle et apporter une image sérieuse à son activité photographique. La deuxième est que l’identité visuelle reflète sa personnalité tout en étant en lien avec son domaine d’activité.

Voici les quatre services proposés :

Portraits en solo
Portraits en couple
Portraits pro
Reportages

Hugo Sourdin propose des portraits individuels, des portraits de couple ou encore des portraits professionnels. Depuis 2019, il souhaite diversifier son travail en proposant un nouveau service : les reportages. Il propose de raconter à travers une série de photographies l’activité professionnelle d’artistes, artisans, commerçants ou encore libéraux sur leurs lieux de travail. 

Les besoins 

Se démarquer

👉 Un design sur mesure, sans passer par une plateforme de création de sites Web.

Être professionnel

👉 Un équilibre entre un design minimaliste et coloré.

👉 Des zones de texte pour se présenter à ses futurs clients.

Être autonome

👉 Avoir la main sur son site.

La commande

Identité visuelle 

👉 Création d’un logotype.
👉 Création d’éléments print.

Site web 

👉 Présenter son portfolio.
👉 Présenter son blog.

La méthodologie

Ma démarche de travail

1- Rencontre client 

👉 Présenter mon travail.
👉 Test utilisateur.
👉 Recueillir des feedbacks.

2- Conception 

👉 Prioriser et formaliser plusieurs solutions.
👉 Modifier les prototypes.
👉 Validation du développeur.

3- Mise en ligne 

👉 Passation de mon travail.
👉 Analyser le livrable.
👉 Organiser une maintenance.

Le test des 5 secondes

Pour ce projet, j’ai utilisé le test des 5 secondes, car 94% des premières impressions sont liées au design. Un utilisateur se construit en un instant une représentation favorable ou défavorable d’une interface et sa première impression guidera ses choix et risque de conditionner sa loyauté. Comme Hugo est dans le monde des arts, j’ai trouvé ce test pertinent et ai décidé de créer son interface en fonction des premières impressions des utilisateurs.  

L’objectif

👉 Prendre au sérieux la première impression.

👉 Valider des hypothèses de conception.

👉 Concevoir l’esthétique en amont.

Le déroulement 

En présentiel ou à distance.

Montrer à l’utilisateur les différentes solutions envisagées pendant 5 secondes .

Lui demander de répondre à un questionnaire.

Ce test m’a permis de choisir la mise en page, les couleurs ou encore les photographies. Voici quelques exemples d’écrans que j’ai présentés.

Le livrable

L’arborescence

Les wireframes

J’ai choisi une mise en page en damier, car l’écriture a une place importante dans le travail d’Hugo. Cette mise en page mêle des zones de texte avec des photographies. Il y a aussi un équilibre entre les textes et les photographies.

Accueil

Le journal

Les reportages

Les articles

Les portraits

Particuliers

À propos

Professionnels

Engagements

Menu

L’identité visuelle

#364752

#FF6B5A

#FFA49A

#BDE8FF

#739EB2

Aa

Noto sans 45 bold

Noto sans 22 regular

Noto sans 20 bold
Sed ut perspiciatis unde omnis iste
natus error sit voluptatem
accusantium doloremque laudantium.

aA

Noto sans 25 bold

Noto sans 17 regular

Noto sans 17 bold
Noto sans 15 regular

Bouton vers un article

Bouton vers une galerie portrait

Bouton vers une page

Bouton vers une galerie reportage

Les maquettes graphiques

À propos

Homepage

Les reportages

Les portraits

Les articles

Le journal