Webdesign

Le/la webdesigner a pour rôle de créer des sites web qui sont visuellement attrayants et fonctionnels.

Webdesign

• Maîtrise des outils de webdesign, tels que Photoshop ou Illustrator

• Notions de base en langages HTML, CSS et JavaScript

• Compétences avérées en typographie et iconographie

• Un savoir-faire en hiérarchisation de l'information

• Compétences en ergonomie et interactivité

• Connaissances sur les contraintes techniques inhérentes au web

Compétences pour concevoir une interface web efficace et aboutie

• L'équilibre des espaces et des textes

• Cohérence des couleurs et de la typographie

• Pertinence de l'iconographie

• Hiérarchisation de l'information

Mettre en place un esthétisme / une harmonie

Bonne pratiques visuelles

À faire

• Définir un style

• Créer un logo

• Trouver les bonnes illustrations ( pictogrammes, images, etc...)

• Faire preuve de cohérence (typographies, couleurs, illustrations)

• Ne pas surcharger ses pages

Bonne pratiques techniques

À faire

​

• Mettre ses idées sur papier pour organiser le contenu

• Créer une arborescence

• Avoir une navigation simple et ergonomique ET fonctionnelle

• Structure et contenu

  • Un en-tête qui permet d'identifier la thématique

  • Une partie corps dont le contenu texte est structuré par des titres et des paragraphes.

Bonne pratiques techniques

À faire

​

• Facilitation de la navigation

  • Une navigation trop compliquée fera fuir les internautes

  • Être pertinent et retracer le parcours que peuvent emprunter les utilisateurs étape par étape.

  • Organiser de manière simple et logique

Outils

3 plateformes à consulter pour obtenir des photographies et des illustrations de qualité professionnelle :

• Unsplash

• Pixabay 

• Incones8

Voici 4 plateformes à consulter pour télécharger gratuitement des pictogrammes de qualité professionnelle :

• Flaticon

• Icon Icons

• Freepik

• The Noun Project

Organiser et hiérarchie visuelle

​

• Utiliser des codes couleur

• Utiliser des typographies différentes et des graisses différentes

• Jouer sur la taille des éléments

• Jouer sur la taille du texte

• Jouer sur le colonage d'une page ( colonnes )

Faire des recherches visuelles

​​Il est important de faire des recherches de design avant de se lancer. Les tendances du webdesign changent au fil des années.

Par exemple: créer un document de 10 sites web proche de notre thématique afin de s'aider dans l'inspiration.

Faire des recherches visuelles

Voici quelques sources d'inspiration pour un webdesign créatif.

• La boutique e-commerce Kitelement.

• L'expérience utilisateur de Grand Tour de Suisse.

• La navigation originale de Securinvest.

• Les micro-interactions de Femme & Fierce.

• L'arrière-plan interactif de Année All Inclusive.

• Le site One Page du Café du Trocadero.

• Le webdesign monochromatique de Dot to Dot.

• Le site portfolios de design Dribbble

Outils

• Code Couleur pour créer des associations de couleur harmonieuse.

• Befunky pour créer et retoucher des visuels (photos et illustrations).

• Typecast pour tester l'association de deux typographies.

• Google Font pour télécharger gratuitement des typographies.

• Balsamiq pour créer des mockups et des maquettes de pages.

• Marvel App pour créer des prototypes d'applications mobiles.

Sources et crédits

https://blog.hubspot.fr/website/site-web-design

https://www.yumens.fr/expertise/ux-design/web-design/definition/

https://www.blogduwebdesign.com/le-webdesign-definition-et-objectifs/

https://www.francenum.gouv.fr/guides-et-conseils/developpement-commercial/site-web/comment-faire-un-bon-site-internet#:~:text=Incitez%20vos%20prospects%20%C3%A0%20passer,en%20contact%20avec%20votre%20audience

Image:

https://www.pexels.com/photo/person-sitting-facing-laptop-computer-with-sketch-pad-57690/