Les métiers liés au design web font appel à de multiples compétences regroupées autour de 3 capacités professionnelles :
- élaborer le design graphique d’un outil de communication numérique
- réaliser un outil de communication (fait main ou par un cms)
- contribuer à la gestion et au suivi d’un projet d’un projet numérique
Les compétences indispensables
Vous aurez à acquérir les compétences qui ont un lien direct avec la culture graphique (pratique des outils de graphisme, techniques de créativité, manier la plume et le dessin vectoriel (The Bezier Game), retoucher des images et réaliser des maquettes avec la Suite adobe ou Figma), la communication, la maîtrise d’un CMS (WordPress essentiellement).
La bonne nouvelle c’est que vous n’avez pas à maîtriser toutes les compétences pour vous lancer. Au fil du temps vous affinerez vos qualités et vos connaissances.
Les compétences transversales
Le dialogue avec les autres professionnels (développeurs, concepteurs UX, ergonomes, commerciaux, chargés du marketing, data analysts…) est indispensable pour évoluer dans les métiers du design web mobile.
Les 3 compétences les plus demandées en recrutement sont celles-ci :
- motion design
- vidéo
- UX-UI
Vous aurez aussi à assimiler les notions suivantes :
- design thinking démarche UX, usabilité
- UX Writring (écrire efficacement pour le web)
- design inclusif (accessibilité)
- brand content (contenu de marque)
Vous pourrez exercer l’activité de designer web :
- en tant que salarié dans une agence web ou de communication
- pour le compte d’une entreprise qui produit ses propres sites en interne soit en tant que salarié ou freelance
Technologies, méthodes en lien avec le Design Web
Passons en revue la liste des compétences à acquérir pour le Designer Web.
1. Maîtriser les bases du design
Cette compétence occupe 80% du programme d’une formation en design web.
Les tâches à réaliser
- réaliser un logo, des visuels qui répondent à la demande du client et aux attentes des cibles
- créer un univers graphique qui répond à l’identité de l’entreprise et aux besoins des utilisateurs
- connaître sur le bout des doigts les tendances actuelles en matière de mode, de design, d’évolutions technologiques
- développer son acuité visuelle (formes, couleurs, typographie, patterns…)
A quoi cela sert ?
Cela sert à trouver le juste équilibre, une cohérence entre le vécu des utilisateurs (veiller au message et sensations véhiculées, connaître leurs habitudes, leurs comportements et leur maturité des outils) , l’ergonomie (faciliter l’utilisation des interfaces, créer un design fonctionnel) et l’UI (l’esthétisme, l’expérience graphique).
Vous utilisez, adaptez des méthodes de travail, des processus de conception et de réalisation selon les situations.
Par où commencer ?
Apprenez à utiliser les outils Photoshop, Illustrator et Figma (tutoriel gratuit) avec une approche créative. Bien plus que la technique, c’est votre capacité d’analyse, votre façon de penser le message, la composition, les choix graphiques qui comptent le plus !
2. Développer sa créativité graphique
Les tâches à réaliser
- Créer des esquisses, dessins, croquis
- Transformer les concepts en images, transposer les idées
- Choisir les visuels et agencer les éléments graphiques pour créer du sens et transmettre des messages
- Réaliser des visuels originaux
A quoi cela sert ?
Se démarquer des concurrents, donner une identité visuelle, être force de proposition lors de briefs graphiques, identifier les clichés de conception, confronter l’imagination à la réalité, exprimer l’identité et l’originalité d’une marque.
Par où commencer ?
Benchmarker (étude des sites concurrents), analyser les styles graphiques, essayer de reproduire, simplifier des interfaces, créer des sites et application web (webapps) avec plusieurs approches (corporate, freestyle…). Faites un tour sur Dribble, Behance…
3. Créer un site de A à Z en HTML5, CSS, JavaScript
Les tâches à réaliser
- Créer une navigation intelligente et animée
- Vérifier l’accessibilité, les performances, l’optimisation des médias
- Organiser son code de façon sémantique
- Approche mobile-first, layouts Responsive Web Design
A quoi cela sert ?
- Personnaliser l’apparence d’un bloc, une région, l’apparence visuelle d’un contenu manuellement.
- Positionner des éléments de contenu sur la page
- Manipuler les éléments du modèle de document (DOM) quand les utilisateur interagissent sur le site.
Par où commencer ?
Mémoriser les principales balises du HTML bases du HTML et sélecteurs CSS. Créer un site. Reproduire des page HTML5 et des layouts de pages (How To W3schools). Prendre ensuite en main Flexbox, Grid CSS et un framework CSS (Bootstrap…)
4. Adapter l’interface d’un CMS
Les tâches à réaliser
- Transposer, adapter un site de la maquette, du HTML vers WordPress
- Utiliser un constructeur de page (Elementor Pro + theme Hello, Elementor + OceanWP ou Astra)
- Travailler sans thème avec Oxygen Builder
A quoi cela sert ?
Adapter un CMS selon les besoins du client . Selon W3techs.com WordPress fait tourner 34% des sites Web dans le monde.
Par où commencer ?
Installer WordPress chez un hébergeur (Ni-Host ou O2Switch). Installer les modules et thèmes pour créer un blog.
5. Notions de PHP et JavaScript (niveau avancé)
Utile pour le designer web freelance de profil intégrateur qui devra être autonome dans l’intégration de scripts.
Les tâches à réaliser
- Placer le code au bon endroit dans un site.
- Intervenir sur une base de données
Par où commencer ?
Il est préférable pour un Designer Web d’avoir quelques bases dans les langages de programmation dynamique et se familiariser à l’algorithmique.
A quoi cela sert ?
- Sécuriser et mieux contrôler ses formulaires
- Optimiser ses sites et applications
- Créer ses templates (gabarits de page) personnalisés
Par où commencer ?
Débuter en JavaScript par le module débutant de Jéremy Mouzin JavaScriptdeZero.
6. Maîtriser le design réactif : composants web, applications avec Frameworks (niveau avancé)
Les tâches à réaliser
- Concevoir et réaliser une application en design tactile (tap, swipe, double tap, zoom in…)
- Créer des composants autonomes web réutilisables HTML5, JavaScript
- Transpiler du code JSX
- Réaliser une application mobile hybride (Ionic, React Native…)
L’utilisation de bibliothèques et cadres de travail JavaScript facilitent la création d’interfaces utilisateur interactives.
A quoi cela sert ?
- Créer des interfaces conçues prioritairement pour les appareils mobile
- Réduire les requêtes et mieux structurer ses éléments d’interface
Par où commencer ?
Prendre en main Visual Studio Code et ses outils. Créer un projet Node.js (environnement JavaScript côté serveur). Mettre en place les packages et dépendances, outils de construction, workflow (Web Pack, Babel par CDN). Créer une application (Vue.js, React.js, Angular…).
Stéphane ARRAMI 12/10/2019