Le projet

Le web de Zeldman

Objectifs

  • – se documenter sur Jeffrey Zeldman;
  • – retracer les étapes de sa carrière;
  • – valoriser ses travaux par un texte promotionnel;
  • – relever quelques critiques et controverses sur Zeldman;
  • – rédiger un avis personnel sur le designer Zeldman;
  • – concevoir le site web en s’inspirant du style graphique de Zeldman pour les parties carrière et texte promotionnel.

Rédaction

Mes recherches ont été passionnantes, et j’ai été captivé par le parcours et l’ingéniosité de Zeldman. J’ai choisi un ton dynamique et concis pour mettre en lumière les moments clés de l’histoire de ce designer de génie, surnommé « le parrain du Web ». L’objectif était de créer un site explicatif clair et agréable à lire, en évitant les détails superflus et en se concentrant sur les dates importantes, illustrées par quelques photos de l’artiste.

Typographie

TITRE Exemple de la typographie Pramukh Rounded pour les titres PRAMUKH ROUNDED CORPS 266 #FFFFFF BOLD
SOUS-TITRE Exemple de la typographie Pramukh Rounded pour les sous-titres PRAMUKH ROUNDED CORPS 150 #FFFFFF BOLD
SOUS-TITRE SECONDAIRE Exemple de la typographie Pramukh Rounded pour les sous-titres secondaire PRAMUKH ROUNDED CORPS 112 #FFFFFF BOLD
TEXTE SECONDAIRE Exemple de la typographie Didact Gothic pour les textes secondaire DIDACT GOTHIC CORPS 27 #FFFFFF REGULAR
TEXTE & NAV Exemple de la typographie Didact Gothic pour les textes et la nav DIDACT GOTHIC CORPS 20 #1E2022 #D2422B #FFFFFF REGULAR
TITRE Exemple de la typographie Nunito Sans pour les titres NUNITO SANS CORPS 160 #1E1E1E BLACK
SOUS-TITRE Exemple de la typographie Nunito Sans pour les sous-titres NUNITO SANS CORPS 113 #1E1E1E REGULAR
TEXTE Exemple de la typographie Nunito Sans pour les textes NUNITO SANS CORPS 20 #1E1E1E REGULAR

Pramukh Rounded

J’ai choisi cette typographie pour les titres de la première partie de mon site afin de marquer cet esprit du web déjanté que Zeldman donne à ses images pas tout à fait droites et son utilisation des couleurs vives.

Didact Gothic

Elle est simple à lire et se marie bien avec Pramukh Rounded.

Nunito Sans

Pour la deuxième partie du site, j’ai opté pour une typo qui est radicalement différente, plus géométrique et anguleuse mais tout aussi travaillée.

Exemple de la mise en page du site Le web de Zeldman Exemple de la mise en page du site Le web de Zeldman

Couleurs

FOND & LOGO
#D2422B
TEXTE
#FFFFFF
SECONDAIRE & CTA & FOOTER
#000000
FOND & TEXTE
#FFF5EB
TEXTE & NAV & FOOTER
#1E1E1E

Partie 1

J’ai mis peu de couleur dans la première partie car le rouge vif du fond suffisait à avoir une identité graphique forte, ainsi j’ai voulu calmer ce rouge avec une composition plus travaillée et un texte blanc pour une lisibilité parfaite.

Partie 2

Pour faire l’exact opposé de la première partie, j’ai choisi des tons plus doux et calmes pour la seconde partie.

Exemple de la nav partie 1 de Le web de Zeldman Exemple de la nav partie 2 de Le web de Zeldman

Composition

RAPPORT HIÉRARCHIQUE UTILISÉ 1.333 Lettres de plus en plus petite montrant l'exemple de la hierarchie sur la typographie de Le web de Zeldman
RAPPORT HIÉRARCHIQUE UTILISÉ 1.414 Lettres de plus en plus petite montrant l'exemple de la hierarchie sur la typographie de Le web de Zeldman

Partie 1

Puisque j’ai 5 rapports hiérarchiques différents dans la première partie, j’ai choisi un nombre faible pour pouvoir plus facilement choisir mes tailles de texte.

Pour la page carrière, je me suis inspiré directement de son site web afin de créer une fiche de présentation de qui il est, en quelques lignes, avec une feuille qu’on aurait pu retrouver sur son bureau. J’ai également fait une ligne du temps qui retrace sa grande carrière.

Partie 2

Pour la page critique, je compte intégrer différents commentaires reprenant un avis critique mais nuancé repris sur Amazon au sujet de son livre.

💀💀💀

Complication

Réaliser ce site en m’inspirant du style graphique de Zeldman a été un exercice difficile, car son esthétisme est à l’opposé de ce que je produis habituellement.

Résultat

Projets précédents

4e projet

CodeKit/CodeKit+

Un ensemble de modules qui me sert pour mes différents sites web.

5e projet

Képos

Avec mon équipe, nous disposions d’une semaine pour lancer une entreprise bénéfique à la société.