Case Study (qu’esss tu dis ? Caisse tu dis ?…) IOLCE 2016

Conférence : Val Head 
Designing Meaningful Animations

La première chose à faire comme dans tous les projets c’est de s’informer et/ou regarder la conférence. Nous avons reçu une conférence par groupe et nous nous sommes empressés de la regarder. Un premier coup d’oeil pour comprendre les grandes lignes, puis une seconde fois pour prendre des notes de manière individuelle.

S’en est suivi un google doc en commun et un spreadsheet (spride chit ? spray de chite ? c’est de la drogue non ?) pour permettre de structurer tout ça.

Voilà un court résumé :
C’est une conférence basée sur l’animation, ne pas en abuser et comment la rendre utile en plus d’être esthétiquement sympa. Elle apporte une information complémentaire à l’utilisateur, comme le fait qu’une action soit “friendly“ ou plus sérieuse et stricte.

Atelier 1 : Contenu, Wireframe et maladie…

“Nous sommes au premier atelier, nous nous sommes replongés sur le contenu, nous attendons l’avis d’un professeur, mais pour ce qui est de nos ressentis, l’équipe est d’accord, le contenu à l’air complet.”

Après passage du prof, il faut revoir toutes les tournures de phrase, c’est lourd, long, un peu bateau (Titanic ?). Du coup nous nous sommes réunis pour revoir tout ça efficacement.

Cet après-midi, j’avais l’idée d’attaquer les wireframes, mais notre contenu n’est pas totalement fini.

Des tournures de phrase, des répétitions, des phrase inutiles ou incomplètes… On travaillera ça jusqu’à la fin de la journée, puis on prendra des images en rapport avec le contenu pour clôturer cette partie.
Le contenu est finalisé, nous avons tout. Maintenant c’est recherche d’images et code d’animation pour compléter le texte.

Atelier 2 : Wirefrime

Notre contenu commun est complet, il a été validé par notre prof référent. (Merci Sherif !)

Aujourd’hui on est posés devant nos ordinateurs pour bosser les wireframe.

J’ai cherché sur internet des idées et mon “petit font-pairing des familles”…. Bon changement de programme, on a fait une “to do list” (tout doux liste ? trop d’eau liste ? j’aime pas l’anglais…) et ma mission est de créer des images ou un graphique pour expliquer le timing/spacing.

Après avoir revu la vidéo de Val Head j’ai repris son slide pour en faire une image simplifiée.

Il nous reste quelques images/vidéos de contenu à faire ou à trouver…
J’ai fait ma part du boulot, je dispose de mon font-pairing (thanks ! Euh… Merci web typo !) je vais donc pouvoir m’attaquer aux wireframe.

Après avoir terminé le wireframe, j’ai pu identifier la hiérarchie de mes titres, je me suis donc attaqué à mon Style Tiles (style ti… ok j’arrête…) pour avoir une idée de graphisme.

Style Tiles final, les rapports de proportion et les typo avaient une taille plus petite (16px de base)

Une styles tiles, un font-pairing et un wireframe avec une contrainte de colonne… Journée terminée… (click click boom !)

Non-Atelier 1 : Design

J’ai profité de mon avancement dans d’autres cours pour commencer un design, j’avais déjà mon Style Tiles donc j’ai simplement réutilisé son contenu. Le problème c’est que par rapport à mes proportions, mon confort de lecture risque d’en pâtir (c’est bien en deux mots non ?). Enfin bon… je vais proposer le design comme il est, j’ai joué sur le déstructuré, sur l’effet un peu fou fou et déjanté de Val Head, des couleurs, des formes et des nuances de couleurs.

Atelier 4: Feedback

“Je le savais que mes colonnes n’allaient pas plaire, je ne suis pas les contraintes données en cours, mais du coup maintenant je dois revoir quelques styles et surtout mes rapports de proportions.”

J’ai testé de nouveaux rapports de proportions avec un texte plus grand et un écartement plus grand du coup… Ma grille a été changée, mais cela a arrangé le problème.

Une partie du problème est réglé en faite… Mais ma typographie a augmenté de taille, je suis passé de 16 à 18 avec un plus gros interlignage, mais…(Et le numéro complémentaire !) ma typo fera 24px de base. Du coup j’arrive à compléter mes espaces et je rentre dans les contraintes.

Après plusieurs critiques, mon design a pas mal changé, j’ai changé la disposition de certains blocs (texte > image). J’ai hiérarchisé mes titres avec des chiffres également.

“Mon design est validé, je vais attaquer les animations en After Effect, car les animations en CSS me sont encore inaccessibles par rapport aux contraintes du projet.”

Non-Atelier 2 :

Le jour avant la deadline, j’ai fini le design et tout est bon, je passe donc au codage. Là encore rien de bien compliqué, l’alignement se fait simplement. Je vérifie mes proportions, ainsi que la taille de mes éléments. Je prends le temps de rendre mon HTML/CSS le plus propre possible.

Le print est envoyé il ne me reste plus qu’à mettre les éléments en place ainsi que la décoration (les fonds en CSS c’est la peste noire !) et le projet sera terminé.

Mon site est accessible à cette URL: http://stevenberquez.fr/projets/iolce/

Amour, tendresse, web design et animations “j’vous z’aime putain”

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Remarques d’autres personnes:

Étudiant 1:
Typographie et couleur agréable à lire.
Les formes apportent une direction de lecture et amènent l’oeil de l’utilisateur naturellement sur les textes.

Peut-être essayer de disposer les textes dans le même style que les formes, de gauche à droite.

Étudiant 2:
Couleurs “cool”

Titre aligné avec les textes, même si le titre va sur 2 lignes.
Plus d’espacement, de padding entre les éléments.
Rajouter les sources vidéos (oublie dans le smaller).
Alignement mauvais dans les crédits.

En global, plus d’espace.

Étudiant 3:
Couleurs agréable et disposition bonne

Étudiant 4:
Couleur fraiche, aéré, ça donne envie de rester.
Taille et style de la typographie bien adapté au contenu, à l’univers.
Texte aéré, taille des vidéos bien adapté

Espacement des titres et contenu plus grand.
Forme de fond ne doivent pas être collé aux titres, laisser les titres aérés.
Taille des légendes à unifier.
L’image du footer perturbe la lecture, explication du IOLCE pas visible et lien DWM dans le smaller à changer de couleur.

Global, site frais !