Comment Devenir Webdesigner En Autodidacte - Caro Hardy

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 W3Schools.com, 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 – OnePageLove.com – siteinspire.com – land-book.com – dribbble.com – behance.net

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 Linda.com : 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 carohardy.com 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 Linda.com 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 TreeHouse.com. 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 Linda.com

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 Copyhour.com. – Conversion Copywriting Course avec CopyHackers

En e-commerce :

• WordPress Ecommerce : Core Concepts sur Lynda.com

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 ?

Partager :

• Tweet