02/10/ Conférences Web Design #1 Julien

Transcription

1

2

3 1.1 SE PRÉSENTER Nom Nicolas Prénom Julien Âge 29 ans Sexe Oui, s il vous plaît Titre Web designer

4 1.2 LE TAQUINER «Hey, tu vas kiffer, je t ai déjà tout converti en CMJN.»

5 1.2 LE TAQUINER «J ai fait toutes les maquettes dans InDesign et je t ai exporté des PDF avec traits de coupe et fonds perdus. Au cas où.»

6 1.2 LE TAQUINER «En ce qui concerne la résolution, je suis parti sur un format A4. 21 x 29,7 quoi.»

7 1.3 LE RASSURER «Allez, tout va très bien se passer. Je ferai ça comme un gentleman.»

8

9 2.1 AVOIR UN DOSSIER BÉTON Et bien rangé : > Arborescence logique > Préfixes numéraires > Fichiers sources > Sources nécessaires au design > Éléments du client BONUS > infos.txt

10 2.2 AVOIR UNE MÉTHODE Et un.psd propre et organisé : > Nommage de TOUS les calques > Dossiers logiques et structurants > Code couleur Privilégier : > Fonts web > Formes vectorielles > Objets dynamiques

11 2.3 AVOIR SES RÈGLES Des repères bien placés Une grille de mise en page intelligente > Grid systems (960, ) Pixel perfect > S inspirer du barbier de Ludacris (photo ci-contre)

12 2.4 AVOIR DU STYLE Règles typographiques > Recenser les styles CSS Nuancier > Lister les couleurs principales Interactions > état de survol, état actif...

13

14 3.1 PROGRAMMER UN 1 ER RDV Autour d un verre

15 3.1 PROGRAMMER UN 1 ER RDV Autour d un verre Par téléphone

16 3.1 PROGRAMMER UN 1 ER RDV Autour d un verre Par téléphone Ou au moins par mail quoi, merde!

17 3.2 ÊTRE À L ÉCOUTE Échanger des regards complices Échanger des points de vue Peut-être même revoir sa copie

18 3.3 MAIS PAS TROP Désolé, mais il faut le dire, les intégrateurs sont paresseux.

19 3.4 LE FAIRE BOIRE L enivrer de flatteries plus ou moins bien placées exemple : «J ai adoré comment t as indenté ton CSS sur le site de sextoys là...» «T es comme Jackie Chan, tu fais des feuilles de style en cascade toi-même.» «J trouve que tu t intègres vachement bien à l équipe...»

20

21 4.1 DONNER TOUJOURS PLUS Ressources utiles / fichiers annexes > Liens web, démos, documentations... > Fonts en kit > Patterns utilisés > Icônes vectorielles (ex : SVG) > Penser à un favicon > JSON pour maps personnalisées (voir mapstylr.com) LE POMPON > Générer les éléments graphiques en nommant correctement ses calques (à partir d Adobe Photoshop CC) Fichier > Générer > Fichiers d image

22 4.2 MESSAGES SUBLIMINAUX Exprimer son attirance de manière plus ou moins dissimulée > Se servir des styles de texte

23 4.2 MESSAGES SUBLIMINAUX Exprimer son attirance de manière plus ou moins dissimulée > Se servir des styles de texte > Nommer ses calques avec malice

24 4.2 MESSAGES SUBLIMINAUX Exprimer son attirance de manière plus ou moins dissimulée > Se servir des styles de texte > Nommer ses calques avec malice > Faire passer son obsession par de la négligence

25 4.2 MESSAGES SUBLIMINAUX Exprimer son attirance de manière plus ou moins dissimulée > Se servir des styles de texte > Nommer ses calques avec malice > Faire passer son obsession par de la négligence > Cacher des calques bonus sous prétexte d avoir prévu un Konami code

26

27 5.1 PRENDRE UNE DOUCHE Supprimer le superflu > Dupliquer ses.psd et les nettoyer pour l intégration > Fusionner certains calques pour faciliter l export

28 5.2 VÉRIFIER SON HALEINE Petit-checkup de toutes les maquettes > Vérifier que toutes les maquettes ont le même niveau de modifications pour éviter toute confusion

29 5.3 SORTIR COUVERT Ne passer à l acte qu après la validation du client Ça vous évitera des allers-retours, à moins que ce ne soit ce que vous cherchiez...

30 nwx.fr arcangelegroupe.com lejules.fr