Archive pour la catégorie ‘Graphisme’

Guide à destination de nos amis graphistes… vu par un développeur

Publié le 19 December 2011, par Babozor

Oui ami graphiste, tu es beau svelte et musclé, tu manie la tablette graphique comme personne et tout ta famille te surnommes “photoshop”… mais voilà, parfois quand tu nous transmets tes jolis PSD et ben ça va pas.
Voici donc un petit guide pour calmer la guerre Dev VS Graphiste et te permettre de connaître les attentes des devs, les trucs qui vraiment nous énervent ou juste nous font perdre un temps infini.

Vilain psd

Design Général
Tu es plein de bonnes idées et c’est tout à ton honneur, mais autant cela semble un concept original et novateur, autant à mettre en place c’est juste un cauchemard…

Pleins de typos pas système
Oui certes cette police rend très bien sur tous les titres de tes créas, cette variante de “stencil” lui donne un air très martial, mais tu dois aussi prendre en compte que ce n’est pas un police système, donc il faudra soit créer physiquement les images et les inclure dans le site web, ou alors tenter de faire monter cette police de caractères dans les navigateurs nouvelle génération. Dans les deux cas une galère qui pourrait sans doute être évitée avec un peu de créativité et sans tomber dans la facilité d’une police bien funky mais qui n’est pas un standard

Des designs ronds
Peu importe la spécialité, si quelqu’un a déjà monté une page web, il te dira que la pire des chienlit est de tenter de monter un design bourré de courbes et de ronds. C’est certes esthétiquement très plaisant, mais vraiment galère à mettre en place. Si vraiment c’est “indispensable” penses à le rendre un minimum flexible, en le collant plus ou moins en image de fond, ou un truc du genre (ou même tentes simplement de laisser tomber cette idée lamantable)

Des câlages bizarres
Le langage utilisé sur le web est interprété, c’est à dire que le moteur de rendu le lit ligne après ligne et le rend au fur et à mesure. Cela rend le câlage de certains éléments dynamiques en hauteur pour le moins compliqué. Penses donc soit à limiter ou à fixer la taille en hauteur, soit à en discuter directement avec un dev si tu a un doute sur la faisabilité de ton design.

Ne pas penser et designer dans le sens inverse
C’est plus ou moins le même thème, mais par exemple faire un slider en jquery de haut en bas nécessite 2 includes et un appel… ultra simple. Tenter de faire ce même slider de bas en haut complique beaucoup les choses… donc penses-y au moment où tu design l’espace et les mouvements.

Les images en fond d’écran “fullsize”
C’est certes très joli (je connais quelques exemples qui rendent super bien) mais cela pose pleins de problématiques qui parfois peuvent emmener des tas d’emmerdes, en fonction de la taille du navigateur, de la hauteur du contenu, etc… et passer d’un dev trivial à un dev chaud avec plein de code javascript bizarre qui risque de ralentir de façon considérable le projet

Mettre le design dans son contexte
C’est très souvent oublié par beaucoup de graphistes, on nous rend un projet, une page, mais qui n’est pas remis dans son contexte. Quand le navigateur est très grand (1600 pixels de large par exemple) comment viens se câler le design de 990 pixels de large? Centré, câlé à gauche, à droite? Avec une marge sur le côté, en haut? Pensez-y…

Les PSD
Tel un gros orc bourrin ton arme favorite est le PSD de 40 Mo, voici donc quelques tips pour ne pas te faire haïr par les devs avec qui tu risque de travailler

Anti aliasing

un PSD fourre-tout
On y trouve tout et surtout n’importe quoi, des calques non utilisés ou vides, qui ont tendance à nous embrouiller lors des tentatives de découpage et d’export… j’ai déjà vu plusieurs version de design sur le même PSD, bref un galère pour savoir quoi garder et quoi mettre à la poubelle

les calques pas nommés ou avec des nommages inutiles
Je pense qu’on a tous vécu ça, un PSD de 30 Mo, avec 200 calques, aucun groupe et surtout des claques qui s’appellent de façon très originale “calque 1″, “calque 2″, etc.. Allez retrouver le bon morceau du design à exporter avec ça.
Comme pour les dev qui mettent des variables “prout” dans leur code, le mieux (même pour toi ami graphiste) pour s’y retrouver est encore de tenter de nommer les calques de façon correcte et compréhensible par tous.

des groupes de groupes de groupes, de groupes…
Grouper les calques c’est bien, en faire trop, ça ne sert pas à grand chose et cela à même tendance à compliquer le tout. Si un groupe a un seul calque, ce n’est plus un groupe (puisque la définition d’un groupe c’est que y’a plusieurs éléments à l’intérieur), donc tentez là aussi de grouper les calques sous un même thématique. Pas besoin de grouper comme des psychopathes, si les calques sont bien nommés ils parleront d’eux même.

Le web c’est 72 dpi pas 300
je sais que ça peut paraître bizarre, mais il m’arrive encore de temps en temps de recevoir des fichiers conçus en centimètres ou en pouces avec un définition print pour un montage web. Cela peut paraître anodin et vous allez me dire “Oh arrêtes de faire ta chochote t’a juste à le redimensionner”… certes, mais toutes les tailles des typos, les espacements, etc… s’en trouvent chamboulés, et puis c’est le travail du graphiste de nous remettre un fichier exploitable.

Penser à l’antialiasing
Le Gaming OldSchool j’adore ça, j’aime aussi beaucoup l’art 8bit, mais sorti de son contexte c’est moyen. Faites donc attention à l’antialiasing, sinon toutes vos polices, dégradés, ombres ou courbes risquent de rendre super moche, voir juste inexploitables.

Fournir les polices manquantes (ou pas système)
Si vous utilisez des polices non systèmes (qui ne sont pas inclus dans les principalement plateformes) ou exotiques, vous avez deux choix: rasteriser toutes les polices (si les textes ne changent pas) ou nous fournir des fichiers exploitables pour pouvoir utiliser correctement vos PSD. Si ce n’est pas le cas, vous courrez le risque de voir vos polices substituées par des polices système et donc votre design être dégradé.

Penser au découpage et à l’export
Vous savez utiliser des fonctions super funky de masquage de calque sur Photoshop c’est très bien, mais moi je sais pas l’utiliser, et ce que j’ai besoin c’est de pouvoir exporter votre travail en optimisant le temps passé dessus. Pensez donc qu’il peut y avoir deux versions de votre fichier: celui sur lequel vous travaillez (avec vos masques et tous vos trucs bizarres de graphistes) et la version pour export, plus simple et beaucoup plus basique.

Non mon but n’est pas ici de relancer la sacro-sainte guéguerre Dev contre Graphiste, mais justement de donner des clefs aux uns et aux autres pour comprendre pourquoi les graphistes râlent sur les Dev qui eux même râlent sur les Graphistes (et les Chefs de projet, les marketteux et globalement tout le monde)

Quelques conseils pour finir:
– n’hésitez pas à poser des questions à votre dev préféré: il n’y a aucune honte à poser des questions, aucune question n’est idiote, surtout si ça vous fait économiser du temps (ainsi qu’au dev) donc n’hésitez pas. Est ce que c’est faisable, chiant à monter, est ce que tu es capable de le faire, est ce que ça va pas nous mettre hors-budget? Just ask (damn it!)
– nettoyez vos PSD: rien n’est plus insupportable pour un dev que de devoir passer une demi journée à nettoyer le PSD qu’un graphiste viens de lui remettre (c’est d’autant plus désagréable quand il s’aperçoit que ce n’est pas la version finalisée du projet). L’état de votre PSD est très caractéristique de l’estime que vous avez de lui… faites un peu le ménage et il vous en sera très reconnaissant.
– demandez ce que le dev a besoin: sans tomber non plus dans l’exagération, vous pouvez échanger un peu sur les préférences sur le nommage des calques ou les éléments à exporter, cela facilitera la vie à tout le monde.

Voilà j’espère que nos joyeux amis graphistes ne se seront pas offusqués, et je suis sûr que pleins de dev ont des histoires de psd horribles à raconter, donc je vous laisses les commentaires pour le faire.

Des photos sans les payer?… ouh c’est vilain!

Publié le 2 July 2009, par Babozor

istock_pirate.jpg

Et oui, certains ne prennent même pas la peine de renommer les photos qu’ils ont acheté sur divers sites (les vilaines feignasses!)…
et ils sont trouvable sans watermark visible un peu partout, juste ne faisant une recherche via google

Je ne justifie pas cette pratique (loin de là, si c’est pour une utilisation commerciale en particulier), mais étonnant que les éditeurs de ces sites ne fassent rien pour protéger leur catalogue…

La checklist ultime de lancement de site web

Publié le 24 February 2009, par Babozor

Suite à mon article… et à vos commentaires, voici donc une version traduite de The Ultimate website Launcg Checklist

Et j’en ai fait aussi une version PDF téléchargeable ici: http://www.travailleursduweb.org/ultimate_todolist.pdf (et impreimable / checkable / modifiable)
Enjoy

[La traduction de temps en temps est approximative et largement perfectible]

Pré-lancement

Contenu et style
– Typographie et Design
* Vérifier les erreurs de ponctuation, particulièrement les apostrophes, guillemets, etc…
* Vérifier
* Vérifier les termes orphelins dans les paragraphes importants
– Orthographe et grammaire
– Uniformité
* Majuscules (surtout sur les titres principaux)
* Temps et style d’écriture
* Phrases récurrentes
* Variations dans les mots (exemple: WebSite vs Web Site)
* Traitement des listes (points ou virgules à chaque fin d’élément)
– Vérifier les liens en dure vers des domaines variables (vérifier que les liens redirigeront bien vers la version live au moment du lancement)
– S’assurer qu’aucun contenu de test ne subsiste
– Vérifier l’impression pour les pages importantes (et comment elles s’impriment)
– Pour les re-designs, s’assurer que les anciennes url importantes redirigent vers de nouvelles url liées, si les url changent
– Vérifier tous les textes cachés (exemple: les alt, retranscriptions, les textes dans les fonctions Javascript)

Standards et validations
– Accessibilité
– Validation HTML
– Validation Javascript
– Validation CSS

Visibilité moteur de recherche, SEO et Metrics
– Les titres des pages sont importants, s’assurer qu’elles aient un sens et sont représentative des mots clefs présents dans la page
– Créer des matadata description pour les pages importantes
– Vérifier les problèmes de domaines (variations entre http://www.blabla.com http://blabla.com http://www.blabla.com/index.html idéalement devraient être réduits à une seule url)
– S’assurer que le marquage du contenu respecte la sémantique HTML (h1, etc.)
– Vérifier l’utilisation des mots clefs dans le contenu
– Vérifier le format des urls (urls sympa pour les utilisateurs/moteurs de recherche)
– Configurer un outil de stat, feedburner, et tout autre outil pour mesurer votre futur succès
– Créer un plan du site en XML (XML SiteMap)
– Configurer Google Webmaster Console et Yahoo! Site Explorer

Tests fonctionnels
– Vérifier toutes les fonctionnalités complexes
– Vérifier les fonctions de recherche (ainsi que la pertinence des résultats)
– Vérifier les variations suivant les navigateurs (IE, Firefox, Safari, Chrome, etc.), versions (6, 7, 2.2, 2.3, 3.1, etc.) et plateformes (Windows, OSX, Linux)
– Vérifier avec différentes configurations de résolutions d’écran
– Tester tous les formulaires, incluant les filtres anti-spam, les réponses aux formulaires / emails, etc.
– Tester sans JavaScript, Flash et tous les autres plugins
– Vérifier que tous les liens externes sont valides

Sécurité / risques
– Configurer un plan de sauvegarde, et tester une re-mise en ligne depuis une sauvegarde
– Protégez toutes les pages sensibles (le BackOffice par exemple)
– Utilisez robots.txt si nécessaire
– Tests de sécurité / pénétration
– Configurer le serveur pour en pas afficher les alertes
– Vérifier l’espace disque
– Configurer des alertes via Email / SMS (pour les erreurs ou problèmes serveur)

Performance
– Test de montée en charge
– Vérifier l’optimisation des images
– Vérifier et mettre en place le cache quand nécessaire
– Vérifier le temps de chargement et le poids des pages
– Minimiser/Compresser les fichiers statiques (JavaScript/HTML/CSS)
– Optimisez votre CSS: utiliser des chemins courts vers les images, utilisez la nature du CSS c’est à dire l’héritage, etc.
– Vérifier que l’indexation de votre base de donnée soit faite correctement
– Vérifier la configuration à tous les niveaux (serveur web, base de données, et tout autre logiciel de gestion de contenu)
– Configurez un système de log de votre serveur (pour pouvoir comparer les log serveur/applicatifs)

Touches finales
– Créer des pages d’erreur / 404
– Créer un favicon

Après lancement

Marketing
– Marketing Social: Twitter, LinkedIn, Digg, Facebook, Stumleupon, etc.
– Soumettez votre site aux moteurs de recherche
– Mettez en place des pubs/AdWords si nécessaire
– Vérifier le format des résultats sur les moteurs de recherche

En cours
– Suivre et répondre aux retours (retours directes, sur les médias sociaux, chats via Google, etc.)
– Vérifier vos données analytics pour d’éventuels problèmes, les pages populaires et ajustez si nécessaire
– Mettez à jour le contenu

Si vous voyez des choses à rajouter ou à modifier, n’hésitez pas…

Investir… jamais un mauvais plan

Publié le 16 January 2009, par Babozor

timberland.jpg

Ma vieille paire de Timberland, qui vont avoir 10 ans, un peu ruinés mais qui fonctionnent toujours, payé l’équivalent de 150 euros (une fortune à l’époque) mais qui ont résisté à la neige, la boue, la Norvège, des coups de scie, de marteau, etc… juste super bonne qualité… prix juste, bon investissement, grôles qui durent!

Je ne cesses de le répéter, que ce soit pour du matériel, de la R&D ou encore (et surtout) un employé, investir n’est jamais un mauvais plan.

Investir? ça veut dire quoi pour toi
Investir selon les personnes peut avoir différents sens… pour moi cela veut dire investir du temps ou de l’argent dans des choses (matérielles ou non) qui vont durer et qui me permettront de gagner ou sauver de l’argent.
Matériel: un bon exemple est celui que je cite souvent… mon ordinateur, un MacBookPro blindé en mémoire, mon outil de travail (aussi bien pour le travail que pour les trucs perso). Je passes en moyenne plus de 12 heures par jours dessus (ça peut aller jusqu’à 15-20 dans mes périodes de production intensives), donc avoir une machine portable, robuste, fiable, qui bug pas trop est un bon investissement. C’est un peu cher à l’achat mais je ne perds pas (ou peu) de temps à tenter de la faire marcher, j’optimise donc mon temps de travail… et donc je gagne (ou fais gagner, ou fais moins perdre selon les points de vue) de l’argent.
Personnes: dans le web (et je sais que je me répète) la réussite ou défaite d’un projet tiens souvent à pas grand chose… principalement aux gens qui sont dessus et leur volonté de travailler en équipe et en bonne intelligence. Choisir les gens avec qui je veux ou avec qui j’ai envie de travailler est toujours un bon investissement, sur le long terme. Certains peuvent être tenté (et je le suis régulièrement) de céder aux chants de la thune et de prends un boulot très bien payé mais en contre-partie un taf pas cool ou avec des gens avec qui il n’a pas envie de travailler… mauvais investissement. Mieux vaut choisir (ou tenter de trouver) un travail plaisant dans un bon environnement, avec des gens sympas, toujours un meilleur calcul.

Payer un juste travail au juste prix
Car voilà aussi un des problèmes majeurs pour l’entreprise: trouver la bonne personne pour effectuer un certain nombre de tâches… et le tout au meilleur prix. Je reçois assez souvent des emails de personnes qui cherchent des “petits étudiants” pour faire du développement ou du graphisme “pas cher” pour un projet qui est en train de se lancer… et ma réponse est toujours la même:
Si vous êtes sérieux et que votre projet l’est aussi, investissez un peu dans un vrai professionnel qui connaît son boulot et vous fera un travail soigné (quitte a réduire le spectre du projet initial ou virer certaines fonctionnalités mineurs)… toujours un meilleur plan qu’un travail certes honorable, mais moins pro. En sommes investissez.

Ne jouez pas aux radins (histoire de karma, etc…)
Certes, c’est la crise machin truc, tout le monde essaie de réduire les coûts de production (à tort ou à raison le débat n’est pas celui du jour) mais je penses que c’est LA bonne période pour investir… investir sur des personnes qui resteront, qui eux aussi s’investiront dan votre projet et le porteront plus loin que vous ne l’imaginiez.
Je ne suis pas religieux (pas du tout), mais je penses que la vie en générale nous rend ce qu’on lui donne… vous êtes un vieux chacal des landes, peut être que tout réussit pour vous aujourd’hui mais un jour ou l’autre la bonne grosses claque viendra. Au contraire vous décidez d’investir sur des gens en qui vous croyez et vous risquez au pire une belle aventure, au mieux un réel succès.

ScrnShots: partagez votre inspiration

Publié le 17 September 2008, par Babozor

scrnshots.jpg

[Là aussi je me souviens plus de l’origine du lien… le syndrome du cerveau poreux sans doute!]

Voilà un service bien sympathique: ScrnShots qui vous permet de partager et explorer différentes captures d’écrans, par Tag, utilisateur, voir les screenshots les plus commentés, les plus vus, etc…

Une bonne source quand on est en mal (ou panne d’inspiration)
Et vous c’est quoi votre moyen pour vaincre le syndrome de l’écran blanc?