<style> .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { text-align: left; } .reveal h1{ font-size: 8rem; } .reveal h2{ font-size: 4rem; text-transform: initial; } .reveal h3{ font-size: 3.5rem; text-transform: initial; } .reveal h4{ font-size: 3rem; text-transform: initial; } .reveal h5{ font-size: 2.9rem; text-transform: initial; } .reveal p { font-size: 3.2rem; color: rgba(0,0,0,.8); } .reveal p strong { color: rgba(0,0,0,1) !important; } .reveal ul, .reveal ol { display: block; } .reveal li { font-size: 2.5rem; margin-bottom: 1rem; list-style-type: "→ "; } /* .reveal li ul li { list-style-type: "👉🏼 "; } */ .reveal pre { font-size: 1.5rem; } .reveal code { padding: 0 0.5rem; border-radius: 5px; font-weight: 900; opacity: 0.8; background-color: rgba(0,0,0,0.05); color: aquamarine; } /* .reveal img { max-height: 50vh; } */ .reveal .slides table { width: 100%; font-size: 18px; } .reveal blockquote { margin: initial; width: initial; text-align: left; padding-left: 16px; padding-right: 16px; } </style> # Web Design  --- **Le web design** est une compétence que l'on peut **apprendre et acquérir**. --- **Le web design** consiste à concevoir des interfaces web esthétiques et fonctionnelles pour offrir une expérience utilisateur optimale. --- - Avec la **prédominance des smartphones 📱** dans l'accès à Internet, l'approche **"mobile first"** est devenue incontournable. - Cette approche consiste à : - Concevoir d'abord pour les **écrans mobiles**, en se concentrant sur l'essentiel. - Adapter ensuite le design aux **écrans plus grands**. ---  --- - Elle assure que le site est : - **Performant** - **Accessible** - **Convivial** sur tous les types d'appareils. - Elle répond aux attentes des utilisateurs modernes qui exigent une **navigation fluide** sur mobile comme sur desktop. --- ## Le métier de WebDesigner --- Attention aux mauvaises interprétations : :::warning **design != dessin** Le design ce n'est pas du dessin. ::: ---  La plupart des gens font I'erreur de croire que le design c'est l'apparence. Les gens pensent que c'est le vernis - qu'on confie une boite aux designers et qu'on leur dit "rendez-la jolie !". Ce n'est pas ca. Le design n'est pas seulement l'apparence et le style, c'est comment ça fonctionne. --- ### Qu'est que le web design ? --- - C'est l'ensemble des réflexions et réalisations graphiques que nécessite un projet numérique. - Cela fait appel à une grande pluridisciplinarité  **webdesign = pluridisciplinarité** --- - Pour avoir une **vision globale du métier** il faut s'intéresser: - Au processus de conception d'un site - Au terminaux Web (appareils) - Aux bonnes pratiques (recommandations w3c) - Aux langages de programmations - À l'accessibilité --- Voici quelques qualités requises:  --- - Un WebDesigner est "multicasquette", son champ d'action est variable en fonction des projets. - Beaucoup de WebDesigner se spécialise. il existe une multitude de domaines d'expertises: - ergonomie - architecture de l'information - référencement - rédaction web... --- - **Le rôle** du WebDesigner est de traduire visuellement l'image et le discours d'une entité (entreprise, association, institution, ...) - Les objectifs sont variés:  --- - **La mission** du WebDesigner est de répondre aux objectifs en proposant des solutions esthétiques et fonctionnelles - Il produit des visuels à l'aide de logiciels graphiques: - Adobe Photoshop (polyvalent) - Adobe XD ou Figma (spécifique) --- - Il n'est pas nécessaire de savoir coder pour être WebDesigner - Bien sûre cela dépend aussi des compétences et des besoins... - Tout comme le dessinateur et le peintre, le WebDesigner a son style et dispose de multiples façons de s'exprimer. --- - Le WebDesigner devra **s'adapter** et **répondre** à la demande du client. Trouver des solutions cohérentes pour répondre à l'objectif initial. - Le webdesign c'est parfois faire des **compromis** avec le client. - **Il faut être force de proposition.** --- Le métier de webdesign fait face aux contraintes des projets, des clients et des techniques employées.  --- - WebDesigner est l'appelation générique de la profession - Le WebDesigner a d'autres appelations comme: - graphiste - infographiste --- ## UI vs UX --- UI|UX :-:|:-: **User Interface**|**User Expérience** Design|Ergonomie Fabrication|Mesure Conception et création d'interface utilisateur.<br>Faciliter l'intéraction et la navigation des utilisateurs au moyen d'interfaces esthétiques, ergonomiques et fonctionnelles | Analyse du parcours et de l'expérience de l'utilisateur sur un site Web.<br>Mesure de la satisfaction ---  --- Dans la théorie on dissocie ces 2 concepts mais dans la réalité ces 2 concepts sont étroitement liés. - L'UX et l'UI permettent de concevoir une interface optimisée et centrée sur les utilisateurs. - L'UX et l'UI sont indissociables et complémentaires --- Comme un Iceberg  --- ## La chaîne de production Après la réalisation des maquettes  --- - **</> L'integrateur ou developpeur front :** Il convertit les elements graphiques des maquettes en HTML et CSS, qui sont des langages interpretes par les navigateurs internet (chrome, firefox, opera...) - **L'expert SEO :** Met en place des règles et astuces pour faciliter le bon référencement du site par les moteurs de recherche (google, bing, qwant...) - **{} Le développeur :** Code et met en place le traitement informatique nécessaire suite au clic sur les boutons d'action ---- [Voir plus de détails sur la chaîne de production](https://hackmd.io/@alternative-rvb/chaine-de-production) --- ## Autres missions du WebDesigner --- **On-line**: - bannières publicitaires - réseaux sociaux - visuels promotionnels - Autres projets digital... --- **Off-line**: - cartes de visites - flyers - roll-up - Autres projets print... --- ## Qualités requises  **La page blanche** - Rassurez-vous: on s'en sort toujours ! - Dsicutez, échangez, inspirez-vous d'autre chose - Ça arrive a tout le monde --- ## Équipements