Le projet

Pensées

Objectifs

  • – visionner " Matthias Ott, Painting with the web ";
  • – résumer la conférence en quelques paragraphes;
  • – exprimer son avis au sujet de la conférence;
  • – mettre en forme son texte en s’inspirant du code d’une newsletter.

Rédaction

J’ai adopté un ton assez factuel dans la première partie de la newsletter. J’y ai ajouté un formulaire afin de permettre aux lecteurs de me contacter après la lecture. Cette fonctionnalité me semblait pertinente, car je pense que l’échange est primordial dans une newsletter.

Typographie

TITRE Exemple de la typographie Chillax pour les titres CHILLAX CORPS 51 #F5F5F5 #1E2022 BOLD
TEXTE Exemple de la typographie Alpino pour les textes ALPINO CORPS 20 #1E2022 REGULAR
NAV Exemple de la typographie Alpino pour la nav ALPINO CORPS 16 #1E2022 REGULAR

Chillax

J’ai utilisé la typographie « Chillax » pour son caractère fort marqué tech puisque mon site web se portait sur cet univers-là après plusieurs recherches.

Alpino

Et j’ai utilisé « Alpino » qui, pour moi, fonctionne particulièrement bien avec Chillax en étant très agréable à la lecture.

Exemple de la mise en page du site Pensées

Couleurs

TEXTE & SECONDAIRE & FOOTER
#1E2022
TEXTE & FOND
#F5F5F5
CTA
#4687FF

Cette combinaison de couleurs donne un aspect doux, réconfortant et agréable à lire en restant lisible parfaitement.

Exemple de la nav de Pensées Exemple des liens de Pensées Exemple du formulaire de Pensées

Composition

Rapport hiérarchique utilisé 1.6 Lettres de plus en plus petite montrant l'exemple de la hierarchie sur la typographie de Pensées

J’ai utilisé ce rapport hiérarchique pour donner plus de contraste entre les éléments.

J’ai opté pour une mise en page sobre, pas seulement par manque de connaissance en code, mais aussi pour éviter de surcharger mon site d’informations inutiles qui n’auraient que gêné l’expérience utilisateur.

exemple de la grille utilisée dans Pensées exemple des textes et images utilisée dans Pensées

Complication

J’ai eu le malheur de mettre mon site web en ligne seulement une heure avant la remise afin de vérifier si tout fonctionnait. J’ai donc été pris par le temps pour effectuer quelques modifications de dernière minute, et ce n’était évidemment pas une bonne idée de publier aussi tard. J’ai également remarqué après la remise que mon site fonctionnait assez mal sur le format téléphone, car je n’avais pas vu que mon header sortait du cadre car je n’avais pas importé l’image depuis le CSS mais directement dans l’HTML.

C’était le premier site web aussi abouti que je mettais en ligne et codais. Malgré les différents « échecs » rencontrés, j’ai beaucoup appris sur les points auxquels je devais faire attention lors de la création d’un site web.

Résultat

Exemple de page du site web pensées Visitez le site

Projets suivants

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é.

Mon dernier projet

6e projet

Le web de Zeldman

Site retraçant ma rencontre avec Jeffrey Zeldman et aussi mon tout premier examen.