Les fondamentaux du design web par Webflow

La question des fondamentaux du design web se pose quand on souhaite réaliser de beaux sites web. Même sans coder. La preuve ? ceci est une initiative de Webflow, une plateforme de publication de site web qui ne nécessite pas de code.

Page d'accueil de Webflow
Page d’accueil de Webflow

Rassurez-vous, ceci n’est pas un article sponsorisé, puisque je ne parlerai pas de la plateforme, mais du livre en ligne qui été mis à disposition par les auteurs de la plateforme.

Ne pas savoir coder, c’est une chose. Mais ignorer complètement les principes fondamentaux du design quand on s’attaque au design d’interfaces web est de la folie pure.

La mauvaise nouvelle pour les francophones, c’est que ce cours en ligne est exclusivement en Anglais. La première bonne nouvelle est que ce cours est gratuit. Rendez-vous à la fin de l’article pour découvrir la deuxième bonne nouvelle.

Introduction

Félicitations. Le futur du web est entre vos mains.

fondamentaux du design web : introduction
Introduction du e-book

Il était une fois, le web était un domaine uniquement réservé aux experts.

  • Des personnes qui nous ont ramené aux années où lorsque vous achetiez votre ordinateur, cela signifiait que vous deviez écrire le programme vous-même.
  • Des personnes qui aujourd’hui encore, lorsqu’elles regardent une application, regardent le code qui la fait fonctionner, au lieu du bel habillage dont l’a doté le designer.
  • Des personnes qui sont plus courantes dans l’expression en code qu’en langage humain.

Heureusement, ces jours sont révolus.

Lire la suite

Les fondamentaux du design web – Partie 1 : des fondamentaux au mobile

Cette première partie couvre 6 chapitres.

Chapitre 1. Principes fondamentaux du design visuel pour les designers web

John Moore Williams

Découvrez comment le cerveau humain interprète l’information visuelle — et comment vous pouvez vous en servir dans vos designs web.

fondamentaux du design web : chapitre 1. principes du design visuel
Principes fondamentaux du design visuel pour les designers web

Tout design vise soit à créer un sens d’unité entre des éléments disparates, soit à créativement briser cette unité pour encourager une action particulière. Les principes couverts ici vous aideront à accomplir les deux.

Lire la suite

Chapitre 2. Théorie de la couleur

Neal O’Grady

Vous avez pratiquement une palette infinie avec laquelle vous pouvez travailler quand il s’agit de couleur. Comprenez comment le faire correctement.

fondamentaux du design web : chapitre 2. théorie de la couleur
Théorie de la couleur

Vous avez à votre disposition pas moins de 16,8 million de couleurs quand vous designez un site web. Et lorsque vous commencez à les combiner pour composer une palette ? Votre gamme de choix devient instantanément infinie.

Lire la suite

Chapitre 3. Les fondamentaux de la typographie web

Neal O’Grady

Votre introduction facile et rapide à la typographie web.

fondamentaux du design web : chapitre 3. typographie web
Les fondamentaux de la typographie web

La typographie compte. Dans ce chapitre, vous aborderez l’anatomie des caractères, la classification des caractères, ainsi que la hiérarchie et la composition typographique.

Lire la suite

Chapitre 4. Comment fonctionne l’espacement des éléments

David Khourshid

L’aspect le plus important du design web vient de la compréhension de l’espacement.

fondamentaux du design web : chapitre 4. espacement des éléments
Comment fonctionne l’espacement des éléments

Dans ce guide du débutant, apprenez comment l’espacement fonctionne sur le web. Les designers qui essaient de comprendre les nuances du design web peuvent énormément bénéficier en maîtrisant ce concept.

Lire la suite

Chapitre 5. Les bases du design d’interface utilisateur

John Moore Williams

Mémorisez ces 9 directives si vous voulez construire des interfaces utilisateurs à la fois élégantes, conviviales et centrées utilisateur.

chapitre 5. éléments de design UI
L’essentiel du design d’interface utilisateur

Un site web est bien plus qu’un groupe de pages connectées par des liens. C’est une interface, un espace dans lequel différentes choses — dans ce cas, une présence web d’individu ou d’entreprise — se rencontrent, communiquent, et s’affectent mutuellement. Cette interaction crée une expérience pour le visiteur, et en tant que designer web, c’est votre boulot de vous assurer que cette expérience soit la meilleure possible.

Lire la suite

Chapitre 6. Designer pour le mobile

John Moore Williams

Découvrez les différences entre le design réactif et adaptatif, en plus de création de contenu pour le mobile.

fondamentaux du design web : chapitre 6. design mobile
Designer pour le mobile

Nous savons tous que le web s’est déplacé vers le mobile. Mais il est très facile de sous-estimer à quel point cela est important.

Lire la suite

La deuxième bonne nouvelle

Vous êtes francophone et souhaitez vous former en design web ? Alors rendez-vous sur le site de Lotin Corp. Academy.

web design lotin corp academy

Notre formation en design web couvre l’ensemble de ces chapitres, tout en allant en profondeur !

Les fondamentaux du design web – Partie 2 : de l’interaction au pré-lancement

Dans la deuxième et dernière partie de la présentation de cet e-book consacré aux fondamentaux du design web, nous continuons avec le design efficace des interactions, jusqu’à la check-list précédant le lancement.

Chapitre 7. Comment designer efficacement les interactions

Neal O’Grady

Profitez de 5 conseils pour concevoir de meilleures interactions et animations pour votre site web

chapitre 7. design d'interaction
Comment designer efficacement les interactions

Un site web n’est pas une brochure statique. Il offre toutes sortes d’opportunités pour l’animation et l’interactivité. Mais parce que vous pouvez tout animer, ne signifie pas que vous devriez le faire.

LIRE LA SUITE

Chapitre 8. Concevoir des sites web hautement performants

Neal O’Grady

Le guide simplifié des designers pour concevoir les sites web les plus efficaces possible.

fondamentaux du design web : chapitre 8. sites web performants
Concevoir des sites web hautement performants

Avez-vous fait une pause pour réfléchir au fait que peut-être votre site web ne génère pas d’inscription parce qu’il ne se charge pas assez vite ? 47% de vos visiteurs s’attendent à ce que votre site se charge en deux secondes, et 40% d’entre eux s’en iront si cela prend plus de trois secondes.

LIRE LA SUITE

Chapitre 9. Comment designer des pages de garde qui convertissent

Neal O’Grady

Vous avez un produit ou un service mortel. Mais personne ne le saura si vous n’avez pas une excellente page de garde.

fondamentaux du design web : chapitre 9. landing pages qui convertissent
Comment designer des pages de garde qui convertissent

Vous l’avez fait. Des mois passés recroquevillé devant l’ordinateur se sont finalement terminés par un produit minimum viable. Phew. Il est temps de le déchaîner dans la nature.

LIRE LA SUITE

Chapitre 10. Pourquoi votre processus de design devrait commencer par le contenu

John Moore Williams

Comprenez pourquoi vous devriez commencer vos designs par le contenu, ou au moins, par un peu de planification de contenu.

chapitre 10. le processus de design commence par le contenu
Pourquoi votre processus de design devrait commencer par le contenu

Si vous traînez dans le monde du design web depuis un moment, vous avez déjà du entendre parler du concept « content-first ». Dans cet article, nous explorons ce que c’est, pourquoi c’est si utile lorsque vous designez avec Webflow CMS, et nous fournirons un exemple de design content-first en action.

LIRE LA SUITE

Chapitre 11. Toujours préférer les prototypes aux maquettes

Neal O’Grady

Découvrez la clé pour un flux de production et de révision plus efficace : des prototypes réactifs et interactifs.

fondamentaux du design web : chapitre 11. prototypes et maquettes
Toujours préferer les prototypes aux maquettes

Trouver des flux de production efficaces en design peut rapidement devenir un défi et parfois requiert une communication dans les deux sens significative entre les clients, les designers, et les développeurs. Mais il ne doit pas en être ainsi.

LIRE LA SUITE

Chapitre 12. La check-list indispensable avant le lancement de votre site web

Mat Vogels

Nous savons que vous êtes excités à propos du lancement. Mais avant de vous mettre en ligne, assurez-vous que vous avez couvert tous les fondamentaux.

La check-list essentielle avant le lancement de votre site web
La check-list essentielle avant le lancement de votre site web

Vous l’avez fait. Vous avez finalement terminé le site web sur lequel vous avez travaillé pendant des jours, des semaines, des mois et vous êtes prêts à le partager avec le monde. Mais ne pressez pas encore ce bouton publier.

LIRE LA SUITE

En espérant que cela vous a aidé.

Formation en Design Web [Français]

Vous êtes francophone et souhaitez vous former en design web ? Alors rendez-vous sur le site de Lotin Corp. Academy.

post-web-design-101-lca

Notre formation en design web couvre l’ensemble de ces chapitres, tout en allant en profondeur !

Les étapes de création d’un site web

La création d’un site web aujourd’hui peut se faire sans taper une seule ligne de code. Malgré le fait que les outils aujourd’hui sont démocratisés, le résultat est souvent moche.

Répondez honnêtement à ces questions :

  • Vous est-il déjà arrivé de tomber sur le template du site web de vos rêves ?
  • Après de longues heures de personnalisation vous vous retrouviez avec quelque chose de moche ?

Eh bien, vous n’êtes pas seuls. Il arrive très souvent que les clients (utilisateurs) de ces constructeurs de site soient séduits pas un template, se le procurent, l’utilisent et le rendent méconnaissable (moche ? 🤪). Ce qui finit tôt ou tard par créer de la frustration. Ce livre est fait pour que la frustration disparaisse. 🤞🏾