🎹Quelles sont les tĂąches du mĂ©tier Web Designer ? Formation graphiste web UI designer

Pour ceux qui souhaitent se lancer dans des études de graphisme ou directement apprendre sur le tas, j'ai rédigé dans cet article une série de conseils sur les métiers du graphisme.

Sommaire
  1. métier
  2. salariés : formations courtes
  3. salariés, demandeurs d'emploi : formation longue
  4. qualités requises
  5. graphiste, intégrateur et développeur
  6. oĂč acheter ses outils moins chers ?
  7. webdesigner ou UIDesigner
  8. oĂč acheter des images photos LDD Ă  usage commercial ?
  9. personnaliser WordPress
  10. designer de pictos graphiques
  11. UI design : concevoir des boutons
  12. livre conseillé pour débuter
  13. oĂč acheter des polices typographies LDD ?

Le métier de graphiste web, UI designer et print

Conseils débutants métier designer web mobile ux-designer graphiste indépendant
Conseils pour débutants métier designer web mobile UI-Designer graphiste indépendant

Le métier de graphiste existe dans quasiment tous les secteurs d'activités : de la CAO PAO à l'infographie 2D et 3D.

Il existe différents métiers dans le monde de la création graphique. Chacun a sa spécialité et son savoir-faire. Voici donc les principales fonctions pour exercer ce travail : UI designer, graphiste print, designer web, animateur 2D, intégrateur.

Les métiers de l'infographisme et webdesign

Profil du graphiste multimĂ©dia : ce mĂ©tier est nĂ© des dĂ©veloppements de l’informatique, des techniques de numĂ©risation ainsi que de la compression de l’image et des outils numĂ©riques, les logiciels qui ont liĂ©s l’univers de la crĂ©ation traditionnelle avec les outils classiques habituels :

  • crayon
  • aĂ©rographie
  • gouache
  • craie
  • couleurs

Qualités requises de l'info-graphiste cross média print web ou mobile

Les principales qualitĂ©s requises sont multiples, le talent d’un infographiste ne se limite pas Ă  la maĂźtrise de l’informatique. Ses premiĂšres qualitĂ©s professionnelles sont celles d’un vĂ©ritable artiste : un coup de crayon et un sens crĂ©atif sont nĂ©cessaires. Une culture gĂ©nĂ©rale Ă©tendue est un atout supplĂ©mentaire.

ActivitĂ©s : Il faut ĂȘtre crĂ©atif et rĂ©actif, pouvoir rĂ©aliser des logos, crĂ©er des illustrations vectorielles. Savoir travailler Ă  partir de photos choisies, comme des images libres-de-droits. Pour plus dĂ©tails, allez voir dans la section OĂč acheter ces photos.

Tous les secteurs sont concernĂ©s par l’infographie : publicitĂ©, design, architecture, Ă©dition, cinĂ©ma, TV, dessin animĂ©, jeux et l'animation.

Le mĂ©tier est ouvert Ă  diffĂ©rentes activitĂ©s de l’édition : illustrateur, maquettiste, opĂ©rateur PAO (publication assistĂ©e par ordinateur), photograveur (mĂ©tiers du prĂ©-presse) et aux mĂ©tiers de l’animation vidĂ©o.

Formation et missions des graphistes : qualités + activités graphiques

Trouver une bonne formation de graphiste UI designer, game designer, webdesigner, infographiste 3D, motion designer est aujourd'hui facile. Le plus dur reste Ă  choisir celle qui vous convient.

En effet beaucoup d'organismes de formation et d'Ă©coles proposent ces formations diplĂŽmantes ou certifiantes comme celles de webdesigner, UI-designer et mĂȘme UX designer.

Les budgets varient donc. Prenez le temps de choisir entre cycles courts et longs. Parfois 8 mois suffissent plutĂŽt que 2 ans. Choisissez entre :

  1. formation continue
  2. et alternance : les entreprises peuvent financer votre formation en contrat d'alternance

Formations courtes pour salariés

PS : je dispense uniquement des FORMATIONS COURTES pour débutants, niveau intermédiaire et avancé en visio_conférence en direct, financé via MONCOMPTEFORMATION, l'AFDAS ou autre OPCO

đŸ„‡Mesformations et cours-particuliers vont de la prise en main des applications de la crĂ©ation graphique (PAO) Adobe Creative-Suite :

  1. Photoshop
  2. Illustrator
  3. Indesign
  4. jusqu'à l'apprentissage du langage HTML5 et CSS3 puis la création de site internet, site vitrine avec le CMS WordPress ou SGC ou pour créer votre site ecommerce, assurer son référencement naturel SEO
  5. et la création d'animations graphiques 2D motion-design avec Animate CC ou After-Effects et le montage vidéo avec Premiere-Pro et FinalCut-Pro X.

CDUI : une formation longue en alternance

Pour des formations de 6 mois, 1 an ou 2 ans en alternance, je vous recommande chaudement le titre professionnel CDUI. FinancĂ© par la rĂ©gion, un financement personnel ou via l'alternance, ce dispositif permet d'obtenir un niveau 6, c'est Ă  dire un niveau licence - Master 1 (ancien bac + 4). Aides : FONGECIF, PÔLE EMPLOI

👍Et plus spĂ©cifiquement, cette formation entiĂšrement Ă  distance sur le TP :

Concepteur Designer User Interface avec cet organisme.

La mission de l’infographiste 2D ?

Il travaille textes et images, photos, illustrations pour composer un message clair et surtout efficace.

A noter : les compĂ©tences ne sont pas tout Ă  fait les mĂȘmes selon la spĂ©cialitĂ© 2D ou 3D. Le graphiste peut ĂȘtre amenĂ© Ă  collaborer avec un directeur artistique ou bien c'est lui mĂȘme qui exerce le double chapeau directeur artistique web-designer.

Graphiste, intégrateur et développeur

UI design pictogrammes
Design de picto, UI design

En outre, l’infographiste doit aussi savoir Ă©valuer le temps et les coĂ»ts nĂ©cessaires Ă  la fabrication de son produit, possĂ©der des base trĂšs importantes dans ce domaine, et ĂȘtre dotĂ© de qualitĂ©s pĂ©dagogiques nĂ©cessaires pour pouvoir Ă©laborer des sites internet, des schĂ©mas clairs et lisibles. Voir la page dĂ©diĂ©e aux outils matĂ©riels du graphiste.

Webdesigner ou UI designer web

Le webdesign dĂ©signe la crĂ©ation de supports visuels Ă  destination d’un site Web. Il s’agit d’une phase prĂ©pondĂ©rante dans la conception d’un tel site. L’identitĂ© d’un site Web, aprĂšs avoir Ă©tĂ© conceptualisĂ©e, sera transformĂ©e par un intĂ©grateur, puis un dĂ©veloppeur en lignes de code et images pour s’afficher dans le navigateur Web. Comme pour l’infographie et le graphisme, le webdesign n’a pas acquis son indĂ©pendance Ă  part entiĂšre comme activitĂ© artistique.

En effet à l'époque des sites interectifs comme Flash, on pouvait parler de création de sites interactifs, immersifs et de concepts novateurs. Aujourd'hui ce n'est plus le cas. Et les designers web ne sont plus à la maison de artistes. Le statut est souvent celui d'auto-entrepreneur, micro-entreprise ou EURL.

Les raisons sont nombreuses, autant que les affinitĂ©s qu’elle exige; le webdesign concerne la crĂ©ation et design de chartes graphiques, d’interfaces mobiles (applications et mobile design) et navigation du site, arborescence. Ce qui demande de nombreuses compĂ©tences en graphisme, programmation, animation ainsi qu'une bonne connaissances des contraintes techniques liĂ©es ( respect des standards W3C, accessibilitĂ© ). VoilĂ  rĂ©sumĂ© le mĂ©tier du designer web et mobile indĂ©pendant en freelance.

Je propose mes propres formations, que j'anime depuis des années en formation individuelle HTML5 (SEO).

OĂč acheter des photos LDD ?

Afin d'optimiser le coût de vos créations graphiques, il est nécessaire de trouver le bon visuel, la bonne photo de qualité en 300 dpi ou 72 dpi. Parmi les grands sites, un seul se démarque par ses prix vraiment attractifs. Difficile et impossible de faire mieux, il s'agit d'Adobe Stock, qui regroupe de nombreuses bases de données photos.

Gagnez du temps pour designer vos sites Wordpress

Afin de customiser plus facilement l'apparence des sites web et mobiles (UIDESIGN) et qu'ils correspondent aux maquettes et prototypes (Sketchs ou XD) réalisés en amont, il existe deux solutions bien pratiques. Les voici présentées ci-dessous.

Builder WordPress ELEMENTOR
Webdesign WordPress apprendre
Webdesign WordPress apprendre

Avec WordPress, ce plugin de type builder va vous faciliter la vie ! Elementor est facile Ă  utiliser et Ă©conomique. Il permet de personnaliser facilement et rapidement chaque page, Ă  l'identique de vos maquettes XD ou Photoshop.

Promotion WordPress plugin Elementor
Promotion WordPress plugin Elementor

Testez le plugin Elementor pour WordPress !

Builder WordPress DIVI
Promotion wordpress plugin divi
Promotion wordpress plugin divi

L'autre constructeur de page personnalisĂ©e est le concurrent DiVi. Cependant son usage est different, puisqu'il permet d'utiliser plus d'une 100 de templates WORDPRESS dĂ©jĂ  prĂȘts et de les personnaliser. Il est donc possible de proposer un catalogue de modĂšle au client et de lui laisser en choisir un et de le customiser et remplir avec son contenu. Il s'agit Ă  la fois d'un plugin builder et de templates dĂ©diĂ©s.

Promo DiVi.

Design création de pictos et icÎnes graphiques

UI boutons design
UI boutons design
Pictos vectoriels
Pictos vectoriels
Drapeaux pays
Pictogrammes drapeaux pays

Peut-ĂȘtre aimeriez-vous jeter un Ɠil sur ces projets.

Les pictos, abréviation de pictogrammes sont présent dans la vie de tout les jours : de la signalétique pour la circulation, les monuments historiques à celle de la navigation d'un site internet.

Pictos NF
Pictogrammes site web Nouvelles Frontieres

Le pictogramme sert Ă  illustrer une action, reprĂ©senter une idĂ©e ou encore symboliser un danger. Sur un site web, le picto remplace le bouton et son design doit ĂȘtre minimalise. En terme de design on parle alors de pixel art : l'art du design pixel par pixel. Il existe plusieurs solutions logicielles de crĂ©er des pictos au pixel prĂšs : Icon Forge ou Photoshop. De vĂ©ritables oeuvres d'art sont rĂ©alisĂ©es et exposĂ©es, mais elles ne trouvent pas leurs places sur le web.

Lecture recommandée

SĂ©lection de livres utiles

Ces deux livres sont Ă  mon avis utile pour apprendre ou se lancer comme graphiste. J'ai pu les consulter et leurs commentaires sont trĂšs positifs.

Les 365 lois du design graphique

Une source d'idée pour tous ceux qui travaillent sur Illustrator, Photoshop ou InDesign. Il s'agit d'un trÚs bon livre de conseils qui aborde les thÚmes suivants :

  • la relation client
  • la couleur
  • la mise en page
  • la typo

Il est écrit par 4 graphistes et directeurs artistiques américains reconnus. Points forts

  • Ce livre s’adresse Ă  tous les professionnels et Ă©tudiants du graphisme, mais aussi des mĂ©tiers de la communication et de la crĂ©ation architectes, community manager, Ă©diteurs
  • 384 pages
  • traduit en français 🙂
Livre conseils graphiste débutant métier communication client
Livre conseils graphiste débutant métier communication client

PS : Les délais de livraison sont rapides Livraison gratuite en ce moment avec Prime

PROFITEZ-EN dÚs aujourd'hui !

Design de boutons graphiques UI-Design responsive tablette web mobile

Set de boutons d'action UIDesign
Set de boutons d'action UIDesign

Lors de la création d'une charte graphique afin d'améliorer l'apparence des boutons il faut réaliser leur habillage graphique. Le design et les couleurs de chaque boutons doit s'intégrer en symbiose avec le design de la charte graphique, mais aussi remplir pleinement son rÎle : attirer l'oeil de l'internaute. Exemple : validation d'un message, action d'identification.

La taille de la typo doit ĂȘtre lisible, ni trop grasse ni trop petite, Ă©viter d'utiliser des typo flash "patte de mouche" ou pixel-font partout. L'ajout d'interactivitĂ© au survol de la souris est une Ă©tape importante dans la sĂ©lection des couleurs et des Ă©tats du bouton.

Le bouton peut ĂȘtre accompagne d'"un tool tip", une Ă©tiquette explicative afin d'informer l'internaute si le nom du bouton n'est pas explicite afin d'ajouter des informations complĂ©mentaires quant Ă  sa fonction. Le bouton peut prendre l'apparence d'un picto pour que son aspect et sa fonction soit facilement identifiable.

OĂč acheter les plus belles polices pro ?

Il existe beaucoup de sites de polices gratuits. Elles sont utiles pour vos gros titres, des boutons et des Ă©vĂ©nement thĂ©matiques, pour les fĂȘtes d'Halloween ou NoĂ«l par exemple. Le reste du temps pour une communication professionnelle, vous aurez besoin de typos pro.

Un seul site au monde, Linotype, le créateur et vendeur des typo en ligne ! Vous y trouverez notamment sur ce site des variantes de la célÚbre Helvetica, la police la plus utilisée dans le monde du graphisme. Pour vos flyers, livres et autres supports de communication.

Metier-infographiste

JE RECOMMANDE LES PRODUITS OU APPLICATIONS QUE JE JUGE QUALITATIF. SANS AUCUN COUT SUPPLEMENTAIRE SUR VOS ACHATS, EN TANT QUE PARTENAIRE AMAZON, JE REALISE UN BENEFICE SUR LES ACHATS REMPLISSANT LES CONDITIONS REQUISES. IDEM POUR LES AUTRES PARTENARIATS.

TERMES :

Application recommandéelogiciel PAO photoshop
formateur graphiste motion designer

Je m'appelle Fabien LESBORDES, formateur digital et graphiste professionnel diplomé et spécialiste certifié ADOBE avec plus de 20 ans d'expérience. Mes formations et cours particuliers portent sur la création et la conception graphique PAO avec la suite Adobe (Photoshop, Illustrator et Indesign). J'interviens également en animation 2D ou motion-design ainsi qu'en apprentissage des langages HTML5 et CSS3, jusqu'à l'apprentissage du célébre CMS Wordpress et le SEO (référencement naturel). Ces formations sont destinées à un public débutant, intermédiaire et avancé. Il s'agit de graphistes et photographes essentiellement. Ce sont des cours particuliers en vidéo FOAD, en visio-conférence ou à domicile et des formations collectives ou individuelles en entreprise.

🎹QUELLES SONT LES TÂCHES DU MÉTIER WEB DESIGNER ? FORMATION GRAPHISTE WEB UI DESIGNER