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.
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.
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.
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
Découvrez comment le cerveau humain interprète l’information visuelle — et comment vous pouvez vous en servir dans vos designs 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.
Chapitre 2. Théorie de la couleur
Vous avez pratiquement une palette infinie avec laquelle vous pouvez travailler quand il s’agit de couleur. Comprenez comment le faire correctement.
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.
Chapitre 3. Les fondamentaux de la typographie web
Votre introduction facile et rapide à 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.
Chapitre 4. Comment fonctionne l’espacement des éléments
L’aspect le plus important du design web vient de la compréhension de l’espacement.
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.
Chapitre 5. Les bases du design d’interface utilisateur
Mémorisez ces 9 directives si vous voulez construire des interfaces utilisateurs à la fois élégantes, conviviales et centrées 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.
Chapitre 6. Designer pour le mobile
Découvrez les différences entre le design réactif et adaptatif, en plus de création de contenu 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.
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.
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
Profitez de 5 conseils pour concevoir de meilleures interactions et animations pour votre site web
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.
Chapitre 8. Concevoir des sites web hautement performants
Le guide simplifié des designers pour concevoir les sites web les plus efficaces possible.
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.
Chapitre 9. Comment designer des pages de garde qui convertissent
Vous avez un produit ou un service mortel. Mais personne ne le saura si vous n’avez pas une excellente page de garde.
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.
Chapitre 10. Pourquoi votre processus de design devrait commencer par le contenu
Comprenez pourquoi vous devriez commencer vos designs par le contenu, ou au moins, par un peu de planification de 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.
Chapitre 11. Toujours préférer les prototypes aux maquettes
Découvrez la clé pour un flux de production et de révision plus efficace : des prototypes réactifs et interactifs.
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.
Chapitre 12. La check-list indispensable avant le lancement de votre site web
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.
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.
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.
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. 🤞🏾