Premier article de la série Apprendre à apprendre » Cas d’étude Comment je me suis apprise le webdesign ? Il y a deux ans et demi, j’ai échangé la nicotine pour le HTML. Moins d’un an plus tard, je créais le site de mon tout premier client. Un thème sur mesure sur WordPress. Le processus fut chaotique. J’étais seule et je devais m’occuper du projet de A à Z. Chaque problème résolu en cachait un autre. Comment installer une nouvelle police ? Ahhhh pourquoi ça marche pas sur Internet Explorer ? Comment vais-je expliquer à mes clients que ce n’est pas possible ? Est-ce d’ailleurs bien sûr que ce n’est pas possible ? Il faut bien comprendre qu’au départ, j’étais à un niveau qualifiable de nul en ordinateur, informatique ou web. Il m’a fallu des semaines pour réussir à visualiser à quoi pouvait ressembler un serveur » et à quoi ça servait. Quant à mes derniers cours d’arts, ils remontent au collège… Peut être que vous voulez changer de carrière et devenir webdesigner/front-end développer à plein temps ? Ou peut être que vous voulez apprendre les bases pour pouvoir vous occuper vous-même de vos projets personnels ? Voici un guide pour vous apprendre à coder. 1. Apprendre les bases vite fait, et pratiquer beaucoup Oui, on peut apprendre le webdesign sans apprendre à coder mais pourquoi se priver de la partie fun ? C’est juste comme apprendre une nouvelle langue, sauf qu’au lieu d’être le auditivement’ beau, c’est le visuellement beau qu’on recherche. A les bases en HTML et CSS • Head First HTML with CSS & XHTML Dès les premiers chapitres, j’écrivais déjà mes premiers codes. Et quand on débute, toutes les petites victoires rapides comptent. Rien de tel que de rafraichir la page de son navigateur pour voir » son code transformé en jolies colonnes sur son écran. Déjà, j’étais une addicte du bouton actualiser ». B et déjà la pratique et hop’ un premier site Live Avant même la fin des derniers chapitres, j’ai commencé de vrais projets’ en parallèle. Avec des compléments d’infos sur j’ai mis deux sites statiques en ligne en quelques semaines. L’un d’entre eux est toujours en ligne ICI, inchangé. Faites les devoirs, puis passer à la mise en pratique aussi vite que possible. Appliquer une compétence dans son contexte est la seule chose qui génère des résultats durables. Je n’aurais jamais appris les bonnes pratiques en terme de sécurité si mon propre blog n’avait pas été piraté et commencé à faire de la pub pour du Viagra. C’est incroyable tout ce qu’on peut apprendre en une journée quand il y a un problème spécifique à résoudre et un enjeu personnel au bout. C apprendre à voir et copier le beau L’autre site était un site pour présenter les compétences et services du Boyfriend en tant que traducteur juridique. Pour le design, je m’étais simplement basé sur le design du site 37signals. Au départ, je me pense pas qu’il faille se soucier d’être originale. Je suis convaincue que copier est la meilleure façon d’apprendre. Mes sites préférés pour nourrir mon inspiration – le blog du webdesign – – – – – Reconnaître les bons designs est un savoir en soi. Car même si on s’engage au départ sur la voie d’un travail de type créatif parce qu’on a plutôt bon goût, il y a cet écart. Les premiers temps où tu crées, c’est juste pas terrible. Ca tente d’être bien, ça a du potentiel, mais c’est pas tout à fait ça… Mais notre goût, le truc qui nous a donné envie de nous lancer, est bien là par contre, au taquet ! Et c’est parce qu’on a du goût qu’on est souvent déçu par son propre travail ». – Ira Glass Beaucoup de gens ne dépassent jamais cette phase. Ils laissent tomber. C’est pas évident. Parce qu’on sait que notre travail n’a pas ce petit truc spécial qu’on voulait qu’il ait. C’est pour tout le monde pareil… Outre le fait qu’il faut passer le cap et y passer encore quelques heures de plus, lisez The Principles of Beautiful Web Design. 2. Et pour de vrai A ce moment-là, j’ai rencontré deux agences web sur Limoges. Maintenant que je savais que j’aimais ça, mes questions étaient simples qu’est-ce que je dois apprendre en priorité ? Rien ne remplace parler avec des gens déjà dans le milieu pour comprendre les 80/20 du webdesign et des compétences requises nécessaires. A Vite vite comment ça marche le CMS WordPress ? Introduction en PHP J’avais déjà un blog sur WordPress, donc rien de plus naturel que de me former pour ce CMS en particulier en premier lieu. Pour ça, j’ai suivi le cours de Chris Coyier sur WordPress 3 Creating and Editing Custom Themes. B Obtenir un premier client Je suis à mi-chemin du cours que je reçois déjà un e-mail d’une amie qui travaille en tant qu’administratrice d’un groupe de musique argentin me demandant si je serais intéressée pour refaire leur site. C’est pour ça qu’il ne faut pas sous-estimer dire à tout le monde autour de soi ce qu’on apprend. J’ai envoyé mon devis et ma proposition ainsi qu’une autre agence web. J’ai eu le job. J’ai tout juste eu le temps de finir le cours de Chris Coyier et de créer le premier thème de que je me retrouvais à ma première réunion en tant que chef de projet, pendant laquelle on a construit l’architecture de site. Pour apprendre a construire l’architecture d’un site correctement et une navigation qui tient la route, lisez le livre de Don’t Make Me Think – Optimisez la navigation sur vos sites » de Steve Krug. Je ne l’ai personnellement lu que récemment mais juste avant la première réunion aurait été le moment idéal. 3. Fixer les lacunes et Photoshop dans tout ça ? A ce stade, ce que je savais de Photoshop, c’était du touche à tout’. Honnêtement, ça n’a pas été un problème. Je ne pense pas que la première chose à faire pour apprendre à être designer soit de s’attaquer à Photoshop. Mais mes clientes m’ont demandée de leur préparer un petit flyer pour me présenter et qu’elles pourraient joindre à l’envoi de l’e-mail d’annonce de la mise en ligne du nouveau site auprès de tous leurs contacts. J’en ai profité pour apprendre les bases de Photoshop sur avec le tuto Photoshop CS4 for the web. Ils existent des millions de tutoriels, de qualités inégales mais si vous savez bien chercher, vous trouverez à coup sûr sur Youtube ce qu’il vous faut en fonction de chacun de vos projets. Recommandation a posteriori je suis une grande fan du logiciel Sketch de Bohemian Coding qui a remplacé Photoshop et Illustrator pour pas mal de choses Avec le premier chèque, j’en ai profité pour m’acheter une tablette graphique Bamboo. 4. Monter son portfolio et continuer d’apprendre Pour monter mon portfolio, en plus de mes projets personnels, j’ai décidé de candidater pour des projets sur des plateformes comme Elance. C’est à mon avis un moyen fantastique de travailler sur de vrais projets, tout en continuant d’apprendre. Jusqu’à ce jour encore, je n’hésite pas à postuler pour un job que je pense pouvoir effectuer mais pour lequel je n’ai pas forcément beaucoup d’expérience. C’est comme une formation en apprentissage. Vous êtes payés et vous vous entrainez sur de vrais projets, avec de vrais clients. Rien ne remplace ça. Comme jusqu’à maintenant, je n’ai travaillé qu’en freelance avec des clients directs, je m’occupe des projets du début à la fin, de la conception à la mise en ligne. Devoir savoir tout faire m’a permis de toucher à tout et de développer mes compétences globales. cf article Comment obtenir ses premiers clients quand on n’a pas encore de portfolio En dessin Vous n’avez pas besoin d’être très bon en dessin. Mais c’est bien de connaître les bases pour pouvoir rapidement faire un croquis de ses idées. • You Can Draw in 30 Days, même s’il m’a fallu plus d’un mois. • Drawing on the Right Side of the Brain En design • Mock-up avec le Software Balsamiq-Mock-up • Design responsive. Cours en ligne avec J’adore leurs tutoriels de façon générale de plus en plus nombreux et pour 25 dollars/mois, c’est très abordable. • Bootstrap avec le tutoriel Up and Running with Bootstrap 3 sur En webdesign • Chris Coyier et Jeff Starr Digging into WordPress En conception-redaction J’essaye autant que possible d’éviter de remplir mes encadrés de textes avec le générique Lorem Ipsum. Un bon designer est un bon communicateur. Livre – Made to Stick Why Some Ideas Survive and Others Die J’ai aussi suivi différents cours en ligne – pour écrire mieux de façon narrative How To Write About Your Life avec Penelope Trunk – Le Boyfriend a suivi les cours de conception-rédaction sur – Conversion Copywriting Course avec CopyHackers En e-commerce • WordPress Ecommerce Core Concepts sur 5. Se spécialiser Est-ce que vous voulez vous spécialiser dans le design d’appli’ ? les infographies ? les sites internet ? J’adore toutes les questions d’UI/UX design qui tournent autour de l’ergonomie et de la psychologie persuasive. Qu’est-ce qui fait que les gens cliquent sur internet ? Parce que je crois que le design est avant tout un outil formidable pour convaincre • Don’t make me think, Steve Krug • Social Trigger, Derek Halpern • Habit and Behavior Design with Technology, BJ Fogg sur la science comportementale cette vidéo introductive • How To Get More Traffic, QuickSprout La vraie question au final n’est pas de savoir qu’est-ce qu’on sait faire ? » mais en quoi est-on disposé à s’améliorer ? » — Article 2 de la série apprendre à apprendre » Qu’est-ce qui vous empêche d’apprendre de nouvelles choses ? — Pour aller plus loin Comment devenir UI/UX designer ?