<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