Tutoriel décalé pour séduire par son travail et réconcilier designers et développeurs grâce à une suite de conseils et bonnes pratiques simples.

1. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

2. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

3. 1.1 SE PRÉSENTER
Nom Nicolas
Prénom Julien
Âge 29 ans
Sexe Oui, s’il vous plaît
Titre Web designer
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

4. 1.2 LE TAQUINER
« Hey, tu vas kiffer,
je t’ai déjà tout converti
en CMJN. »
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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ù. »
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

6. 1.2 LE TAQUINER
« En ce qui concerne
la résolution, je suis parti
sur un format A4.
21 x 29,7 quoi. »
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

7. 1.3 LE RASSURER
« Allez, tout va très bien
se passer. Je ferai ça
comme un gentleman. »
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

8. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

11. 2 .3 AVOIR SES RÈGLES
Des repères bien placés
Une grille de mise en page
intelligente
> Grid systems (960, 1200...)
Pixel perfect
> S’inspirer du barbier de Ludacris
(photo ci-contre)
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

12. 2 .4 AVOIR DU STYLE
Règles typographiques
> Recenser les styles CSS
Nuancier
> Lister les couleurs principales
Interactions
> état de survol, état actif...
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

13. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

14. 3.1 PROGRAMMER UN 1ER RDV
Autour d’un verre
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

15. 3.1 PROGRAMMER UN 1ER RDV
Autour d’un verre
Par téléphone
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

16. 3.1 PROGRAMMER UN 1ER RDV
Autour d’un verre
Par téléphone
Ou au moins
par mail quoi, merde !
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

17. 3.2 ÊTRE À L’ÉCOUTE
Échanger
des regards complices
Échanger
des points de vue
Peut-être même
revoir sa copie
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

18. 3.3 MAIS PAS TROP
Désolé,
mais il faut le dire,
les intégrateurs
sont paresseux.
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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... »
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

20. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

22. 4.2 MESSAGES SUBLIMINAUX
Exprimer son attirance
de manière plus ou moins
dissimulée
> Se servir des styles de texte
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

26. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

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...
02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules

30. 02/10/2014 - Conférences Web Design #1 Julien Nicolas @lejuuules nwx.fr | arcangelegroupe.com | lejules.fr