Les Fondamentaux du Web Design

Définition

Dans le processus de création des sites web, le Web Design est aujourd'hui une spécialité à part entière. Branche récente de la famille du design, elle est devenue un passage obligé d'une conception Internet. Le webdesign doit donc organiser l'information dans les pages du site et adapter au mieux les contenus à ce support spécifique qu'est le Web. Le visiteur du site doit percevoir clairement l'information, l'assimiler aisément et instantanément.

Dans cette page, nous allons passer par toutes les étapes nécessaires, à mon humble avis, pour devenir compétent rapidement dans le domaine du web design et avoir une vision à 360° sur tous les aspects importants du web design.

Liens et ressources liées

Le plan pour apprendre à faire une UI propre : L'idée principale serait de lire un article par point, et de bien prendre des notes sur ces informations, afin de capitaliser sur toutes ces informations.

1. Comprendre les principes de base du design d'interface utilisateur (UI) et de l'expérience utilisateur (UX)
   → Lire Refactoring UI
2. Connaître les principes de couleur et savoir comment les utiliser pour créer une identité visuelle cohérente
   → https://medium.com/free-code-camp/comprehensive-guide-for-color-usage-in-web-design-e2a9afce09fb
3. Comprendre les grilles et les systèmes de mise en page pour créer des designs cohérents et harmonieux
   → https://medium.com/design-with-figma/everything-you-need-to-know-as-a-ui-designer-about-spacing-layout-grids-2bc269e12321
4. Comprendre l'importance de la hiérarchisation de l'information pour guider l'utilisateur à travers l'interface
   → https://manvisinghwal.medium.com/6-principles-of-visual-hierarchy-25b21b63ad62
   → https://medium.com/swlh/fundamentals-of-hierarchy-in-interface-design-ui-ba8e3017dceb
5. Savoir utiliser les icônes et les images pour améliorer la compréhension et la navigation
   → https://medium.com/@desbenoit/icons-and-interfaces-bcc8e0257bc8
6. Connaître les outils et les fonctionnalités de base de Figma, tels que les calques, les formes, les images et les styles
7. Connaître les fonctionnalités de collaboration et de partage de Figma pour faciliter le travail en équipe et les retours d'expérience utilisateur (UX)
   → https://www.figma.com/resources/learn-design/
   → https://www.youtube.com/watch?v=HZuk6Wkx_Eg : Figma tutorial for Beginners: Complete Website from Start to Finish
   → https://www.youtube.com/watch?v=dXQ7IHkTiMM : Figma For Beginners: Explore ideas (1/4)
   → https://www.youtube.com/watch?v=3q3FV65ZrUs : Figma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.
8. Maîtriser l'utilisation de la typographie pour communiquer efficacement le contenu et hiérarchiser les informations
   → https://medium.com/eightshapes-llc/typography-in-design-systems-6ed771432f1e
   → https://thelogocreative.medium.com/the-rules-of-typography-in-web-design-8fad6c3b5169
   Vidéo intéressante sur la calligraphie : https://www.youtube.com/watch?v=Mqtd9OizbhE
9. Connaître les bonnes pratiques pour optimiser les performances et le temps de chargement des maquettes.
   → https://www.figma.com/best-practices/ → https://medium.com/@ajay.singh07/8-figma-best-practices-to-speed-up-your-productivity-d230accc1d25

Tous les liens ci-dessus sont utiles pour avoir des inspirations et des informations complémentaires, un coup d'œil rapide est conseillé sur "Law Of UX" pour s'imprégner des différentes règles.

Si possible, il serait top de jeter un œil sur les différentes règles sous-jacentes au design system de Google (actuellement Material 3) : https://m3.material.io/

(À savoir que https://m3.material.io/foundations est littéralement une mine d'or d'information!)

Refactoring UI

Home | Laws of UX

Général :

https://dribbble.com/
https://www.behance.net/
https://www.pinterest.fr/
https://www.deviantart.com/

les sites web / applications :
https://www.awwwards.com/
https://www.admiretheweb.com/
https://uijar.com/
https://savee.it/
https://land-book.com/
https://www.siteinspire.com/
https://godly.website/
https://onepagelove.com/

Orienté site web & landing page etc :

The Best Landing Page Design Inspiration, Templates and More | Landingfolio
5476 Landing Page Design Inspiration - Lapa Ninja
Land-book - website design inspiration gallery
CSS Awards – Recognition for Web Designers & Developers
Showcase of the best Animation Websites - landing.love

Chaîne Youtube :

https://www.youtube.com/@DesignCourse (il donne pas mal d'exemples) - EN
https://www.youtube.com/@BastiUi - FR : https://www.youtube.com/watch?v=Li1XYYqKTx4

Ma stack CSS :

Headless UI - Unstyled, fully accessible UI components Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS Templates - Tailwind UI

Les ressources alternatives :

Ressources lib : Resource Cards - Selected free resources for designers
Bootstrap : Bootstrap · The most popular HTML, CSS, and JS library in the world. Gradient : Mesh | Create beautiful mesh gradients Color tester : Happy Hues - Curated colors in context. Animation Loader css : Whirl: CSS loading animations with minimal effort!
All in one tool chrome : All Online Tools in One Box | 10015 Tools
Grid générateur : CSS Grid Generator
Bibliothèque d'icônes : Flaticon : Vector Icons and Stickers - PNG, SVG, EPS, PSD and CSS
Font awesome : Font Awesome Icon8 : Free Icons, Clipart Illustrations, Photos, and Music

Les articles complémentaires intéressants

16 UI Design Rules to Keep in Mind