1.Créer un site web

apprendre la conception de sites web
La meilleure façon de commencer à apprendre la conception de sites web est de commencer à le faire. C’est le conseil de David Kadavy, auteur de Design <for> Hackers.

Je vous recommande de créer un blog. J’ai commencé un blog juste pour avoir un terrain de jeu en matière de web design, et 7 ans plus tard, j’ai lancé un livre à succès sur le sujet. Avoir un projet personnel, tel qu’un blog, vous donne un endroit où vous pouvez essayer de nouvelles choses, et votre patron ne vous virera pas si vous vous plantez.

Vous n’avez pas besoin de commencer avec un site web massif ou un design fou ; commencez petit. Jouez avec le site web, trouvez ce qui fait que les choses fonctionnent. (Et n’oubliez pas d’inspecter le code, pour que vous puissiez commencer à vous familiariser avec ce qui fait fonctionner votre site web).

Vous voulez commencer rapidement ? Un créateur de site web comme Wix peut vous aider à prendre une longueur d’avance en vous proposant un design de site web élégant, alors que vous commencez à apprendre les concepts et les éléments de base de ce qui entre dans un site web.

2.Lisez tout ce que vous pouvez

apprendre la conception de sites web
Commencez à lire. Parce que vous êtes sur ce blog, vous êtes probablement habitué à suivre ce qui se passe dans le monde du design. Continuez à lire. Lisez tout ce que vous pouvez sur la conception de sites web, les tendances, les techniques et les meilleures pratiques. Suivez les designers que vous admirez sur les médias sociaux. Lancez également un vaste réseau de lecture sur la conception de votre site web. Lisez les bases pour apprendre du code, lisez la théorie du design et lisez les tutoriels et les articles actuels.

3. Soyez un communicateur efficace

Si vous n’êtes pas la personne qui s’exprime le mieux, rafraîchissez vos connaissances. Une grande partie de la conception d’un site web est consacrée à la communication.

Les concepteurs de sites web doivent communiquer régulièrement avec leurs clients pour déterminer les problèmes que la conception doit résoudre ; ils doivent communiquer ces solutions et les mettre en œuvre également.

4. S’abonner à Tuts+ & Envato Elements

Envisagez un abonnement à Envato Elements, qui vous donne également accès à l’excellente ressource pédagogique Tuts+.

Tuts+ publie régulièrement des cours sur la conception graphique et web, des techniques de base aux dernières approches et développements avancés. C’est un cours entièrement autodidacte, dispensé par des instructeurs experts. Vous aurez également accès à Envato Elements, qui est une excellente ressource pour trouver des graphiques, des modèles et d’autres éléments à intégrer dans votre travail de conception web.

5. Penser en HTML

Le HTML, ou langage de balisage hypertexte, est une pierre angulaire de la conception des sites web. Le HTML est le squelette qui permet de créer la structure d’un site web et, une fois que vous pouvez lire le langage, le monde de la conception de sites web prend beaucoup plus de sens.

Le W3Schools propose un excellent tutoriel de démarrage HTML avec des centaines d’exemples de HTML avec lesquels vous pouvez jouer sur l’écran pour voir ce qui se passe et comment cela fonctionne exactement. (Vous le trouverez peut-être plus intuitif que vous ne l’imaginiez).

6. Jouer avec le code à la Codeacademy

apprendre la conception de sites web
Bien que le HTML soit un bon début, vous pouvez apprendre presque tous les langages de programmation à la Codeacademy. Cet ensemble d’outils gratuits vous apprend à coder à l’aide d’activités et de jeux interactifs.

Vous pouvez suivre un cours de la Codeacademy où et quand vous en avez besoin, et commencer et arrêter selon vos besoins. Choisissez un sujet à apprendre – développement web, programmation, science des données – ou un langage sur lequel vous concentrer – HTML & CSS (un excellent point de départ), Python, Java, SQL, Ruby, et plus encore.

7. Apprendre à comprendre le CSS

Les CSS, ou feuilles de style en cascade, définissent la présentation d’un document écrit en HTML, ou en XML et SVG.

Selon la définition de Mozilla

Le CSS décrit comment les éléments doivent être rendus à l’écran, sur papier, dans la parole ou sur d’autres supports.

Mozilla dispose également d’une grande collection de ressources CSS pour démarrer, avec une solide introduction sur le fonctionnement du CSS, y compris les sélecteurs et les propriétés, l’écriture des règles CSS, l’application du CSS au HTML, la façon de spécifier la longueur, la couleur et d’autres unités dans le CSS, la cascade et l’héritage, les bases du modèle de boîte et le débogage du CSS. Les modules passent ensuite à l’explication du style du texte et des boîtes.

8. Appliquez vos compétences en matière de conception au Web

Si vous travaillez déjà dans un domaine créatif ou graphique, pensez aux choses que vous savez déjà et que vous pouvez également appliquer à la conception de sites web. Les principes qui rendent quelque chose visuellement attrayant ne changent pas en fonction du support et toute cette théorie du design sera également utile dans l’espace numérique.

Même si des éléments tels que l’apprentissage du code ne semblent pas naturels, le fait d’avoir une formation en design est un énorme avantage. À quoi sert un site web magnifiquement codé si l’on ne veut pas interagir avec lui ?

9. Faites attention aux sites web que vous aimez

Prenez note des sites web que vous aimez. Qu’est-ce qui vous attire chez eux ? (Et comment pouvez-vous apprendre à reproduire ces éléments ?) Soyez attentif :

Typographie
Navigation
Utilisation des images et de l’espace
Conception des formulaires
Animation et effets de défilement
Couleur

10. Dessiner un cadre métallique

apprendre la conception de sites web
Le Wireframing est un brainstorming de concepteurs de sites web.

Dans sa forme la plus pure, un wireframe est une esquisse de ce que sera le site web. Il ne s’agit pas d’une esquisse d’éléments esthétiques, mais plutôt d’un plan du site web. Le dessin d’un wireframe ne concerne pas vraiment l’aspect de ce design, mais la structure de l’information qu’il contient.

Vous ne savez pas comment créer un wireframe ?

La télépathie numérique propose un guide des meilleures pratiques pour vous aider à apprendre.

11. Prenez le temps d’apprendre le croquis

apprendre la conception de sites web
Sketch est un outil de dessin vectoriel pour Mac qui permet de créer facilement des éléments de conception. De nombreux concepteurs se tournent vers Sketch pour créer des éléments d’interface utilisateur et répéter des blocs de conception.

Il est bourré de plugins et permet d’exporter du code pour une utilisation et un accès faciles. C’est l’un des outils les plus puissants et les plus populaires depuis la Creative Suite d’Adobe et il vaut la peine de s’y attarder.

12. Restez à jour avec la technologie

AI, VR, AR, vidéo à 360 degrés, robots.

Il peut être difficile de suivre autant de nouvelles technologies et de tendances. Mais vous devez vous efforcer de rester au fait de ces changements.

Attaquez-les un à la fois et commencez par les technologies qui sont les plus directement liées à votre travail. Si vous avez un site web avec un chat en ligne, commencez par vous renseigner sur les robots. Ou si vous utilisez beaucoup de contenu vidéo, jouez avec la vidéo à 360 degrés.

Des éléments tels que l’intelligence artificielle et la réalité virtuelle ou augmentée sont encore plus complexes, mais ils sont susceptibles de faire partie intégrante du paysage de la conception de sites web à l’avenir. Vous devez au moins savoir ce qu’ils sont et quelles sont leurs utilisations potentielles.

13. Soyez à l’aise avec le référencement

apprendre la conception de sites web
Alors que de nombreux concepteurs de sites web pensent qu’un spécialiste du référencement peut se charger de préparer un site web pour qu’il soit lisible par les moteurs de recherche, il y a beaucoup de travail de conception qui est lié au référencement.

De la manière dont les images sont téléchargées à la création d’un code propre et rapide à l’inclusion de méta descriptions sur les pages et les éléments, le concepteur doit intégrer la réflexion sur la recherche dans son flux de travail.

Pour les indépendants, c’est aussi d’une importance vitale pour vous. La plupart des clients sont assez avisés pour demander un site web optimisé pour le référencement. Si vous travaillez seul, vous devez en savoir suffisamment pour créer un cadre solide que Google puisse lire (et pouvoir orienter le client vers un spécialiste en référencement si un travail supplémentaire doit être effectué).

14. Jouer avec un créateur de site web

Un créateur de site web peut être un excellent moyen de se familiariser avec les meilleures pratiques et de savoir comment commencer à construire et à concevoir des sites web.

La plupart de ces outils disposent de nombreux modèles et vous permettent de personnaliser les éléments et même d’ajouter des bribes de code. Pour les sites simples, de nombreux créateurs de sites web disposent également d’un plan gratuit qui vous permet de créer une page de portfolio personnelle ou un site web de base qui vous sert de terrain de jeu.

Ensuite, vous devrez démonter les pièces du site. Regardez comment ils sont conçus et codés pour vous faire une idée de la façon dont tout cela s’assemble. Vous serez étonné de ce que vous pouvez comprendre en choisissant un autre design.

15. Trouver un mentor

Y a-t-il une personne avec laquelle vous travaillez que vous admirez en tant que web designer ? Emmenez-les déjeuner et faites-leur réfléchir l’industrie.

Trouver un mentor qui soit prêt à travailler avec vous et à vous aider à réfléchir sur le domaine et sur la façon d’apprendre le web design par vous-même peut être inestimable. Et si vous pouvez probablement trouver un mentor dans une communauté en ligne, rien ne vaut une personne vivante que vous pouvez rencontrer en personne périodiquement. (Peut-être vaut-il la peine d’avoir des mentors en ligne et en personne).

16. Rejoignez la communauté CodePen

apprendre la conception de sites web
Une fois que vous commencez à vous familiariser avec le code et la programmation, vous souhaitez rejoindre la communauté CodePen. La communauté open-source vous permet de partager et de modifier des extraits de code dans une sorte de réseau social.

Voici un peu plus d’informations des fondateurs du site : « Le CodePen est un environnement de développement social. Il vous permet d’écrire du code dans le navigateur et d’en voir les résultats au fur et à mesure que vous construisez. C’est un outil utile et libérateur pour les développeurs de toute compétence, et particulièrement responsabilisant pour les personnes qui apprennent à coder. Nous nous concentrons principalement sur les langages frontaux comme HTML, CSS, JavaScript et les syntaxes de prétraitement qui se transforment en ces choses ».

17. Suivez un cours

Pour certains apprenants, il est préférable d’avoir une salle de classe plus formelle.

Il existe une tonne de cours – en personne et en ligne – pour vous apprendre les bases de la conception de sites web. Commencez par un collège local ou des centres d’apprentissage en ligne tels que Udemy ou Coursera. Choisissez un cours à votre niveau actuel et continuez à progresser.

18. Vous voulez faire quelque chose ? Google It

Pour ceux qui n’ont pas l’habitude d’apprendre, trouvez la réponse au problème de la conception de sites web sur Google. Il existe de nombreux tutoriels et vidéos qui peuvent vous aider à résoudre presque tous les problèmes.

L’essentiel est de chercher exactement ce que vous devez savoir et de vous adresser à une source fiable pour trouver la réponse. Voici un autre conseil concernant les didacticiels et les vidéos : un contenu plus récent vous donnera probablement une meilleure réponse, plus complète et plus pertinente. (N’oubliez pas que certains de ces éléments évoluent rapidement).

19. Faites attention à l’expérience de l’utilisateur

Rien ne peut faire ou défaire un site web comme la conception de l’expérience utilisateur. Vous devez le prévoir et le comprendre.

Voici comment l’Interaction Design Foundation décrit la conception des UX :

La conception de l’expérience utilisateur (UX) est le processus de création de produits qui offrent des expériences significatives et personnellement pertinentes.

Cela implique de concevoir avec soin à la fois la facilité d’utilisation d’un produit et le plaisir que les consommateurs tireront de son utilisation. Elle concerne également l’ensemble du processus d’acquisition et d’intégration du produit, y compris les aspects de la marque, de la conception, de la facilité d’utilisation et de la fonction.

Les concepteurs d’UX, ou les concepteurs qui sont conscients du processus de formation de l’expérience, cherchent à créer et à façonner les facteurs qui influencent délibérément le processus. Pour ce faire, un concepteur de UX tiendra compte du pourquoi, du quoi et du comment de l’utilisation du produit.

20. Être attentif aux tendances en matière de conception

À quoi ressemble le design d’un site web moderne ? Ce n’est pas une question piège. Pour concevoir des sites web modernes et des expériences utilisateur, vous devez savoir ce que les utilisateurs veulent et comment ils interagissent avec eux. Si la dernière fois que vous avez téléchargé une application ou consulté un site web sur votre téléphone était en 2016, vous avez beaucoup de chemin à faire.

La création de sites web qui intègrent des touches de modernité et des tendances aidera vos projets à se démarquer. Comment savoir ce qui est tendance ? Continuez à lire des sites comme celui-ci et soyez attentif à ce que font les autres concepteurs. Prenez note des couleurs, des styles et des caractéristiques des sites web que vous visitez fréquemment.

21. Créer sans couleur

apprendre la conception de sites web
Commencez chaque dessin sans couleur. Un grand designer m’a dit un jour que si votre dessin fonctionne en noir et blanc, il sera d’une couleur irréprochable.

Ce n’est peut-être pas toujours le cas, mais c’est un excellent point de départ.

En créant des dessins en noir et blanc, vous pouvez voir où les éléments contrastent et comment ils jouent ensemble. Vous avez éliminé toute association émotionnelle avec la couleur ou le mouvement des yeux qui en résulte. Cette forme de design la plus simple vous donnera une idée si quelque chose fonctionne en tant que concept avant que vous ne passiez à sa finalisation.

22. Apprenez à aimer les polices de Google

apprendre la conception de sites web
Google Fonts est votre ami.

Quelle que soit votre opinion sur Google, il est important de pouvoir naviguer, trier et sélectionner des polices de caractères dont vous savez qu’elles fonctionneront dans la conception de sites web. Vous n’avez pas à réfléchir à la question de la licence ou à celle de savoir si les polices de caractères sont compatibles ou non avec des navigateurs spécifiques.

La limite est que vous ne pouvez travailler qu’avec les polices de la bibliothèque de polices de Google. Mais si vous essayez, vous pouvez trouver quelque chose qui conviendra à presque tous les projets. Cela vous fera gagner beaucoup de temps à long terme.

23. Choisissez un kit d’interface utilisateur

Téléchargez une interface utilisateur ou un kit d’icônes et sélectionnez-le.

Tout comme vous pouvez inspecter le code d’un site web, regardez comment les éléments de conception sont construits pour le web. Prenez note de l’échelle et de la grille, regardez les mélanges de couleurs et la façon dont les fichiers sont organisés dans Photoshop ou Illustrator.

Cherchez un kit à télécharger qui comprend des éléments dans plusieurs formats pour des affichages à haute résolution. (Le téléchargement d’un tas de JPEG ne vous servira pas à grand-chose).

Essayez ensuite de construire ou de personnaliser un ou deux éléments de votre choix.

24. Devenir typographe

La conception de sites web modernes est fortement axée sur la typographie … une bonne typographie. Des en-têtes de héros avec des mots géants aux couches de texte qui attirent l’utilisateur dans la conception, il est essentiel de comprendre les principes de la manière de coupler les éléments typographiques et de construire des blocs de texte attrayants.

Commencez par l’ouvrage d’Ellen Lupton intitulé Thinking with Type. (Il existe également un livre du même nom.) Lupton est l’autorité en matière de typographie et ses informations vous feront penser comme un typographe en un rien de temps.

25. Sauter dans JavaScript

Lorsque vous commencez à vous sentir à l’aise pour vous essayer à la conception de sites web, mettez-vous à nouveau au défi d’apprendre le JavaScript. Après HTML et CSS, c’est le langage le plus important du web.

Le JavaScript est un outil qui permet aux concepteurs de mettre en œuvre des choses complexes et des interactions sur les pages web. C’est ce qui fait glisser un curseur ou qui anime une animation de parallaxe.

Learn JS dispose d’un tutoriel interactif pour vous aider à démarrer.

26. Mettez à jour votre portfolio

apprendre la conception de sites web
Une fois que vous commencez à concevoir pour le web, assurez-vous de mettre à jour votre portfolio avec des projets de conception web. Cette simple action vous aidera à montrer à vous-même … et aux autres … que le web design fait partie de votre répertoire.

Un portfolio mis à jour peut aider les clients potentiels à voir à quoi ressemble votre « style ». Veillez à mettre en valeur les mises en page, les couleurs, la typographie et les différentes techniques qui montrent ce dont vous êtes capable.

27. Mettez-vous au défi

Avec autant de raccourcis et d’extraits de code pour vous aider à résoudre presque tous les problèmes de site web que vous rencontrez, ne soyez pas paresseux. N’oubliez pas de vous mettre continuellement au défi d’acquérir de nouvelles compétences, de nouvelles technologies et de continuer à améliorer votre jeu de conception de sites web.

Ce domaine est en constante évolution ; il y a toujours quelque chose de nouveau à apprendre ou à essayer.

28. Maximisez votre expérience

Allez sur le terrain et concevez. Pour devenir concepteur de sites web, il faut commencer par en concevoir.

Commencez petit, mais entreprenez des projets avec d’autres. Demandez à participer à un projet avec une équipe au travail. Abordez un petit site web pour un ami. Plus vous aurez d’expérience dans la création de sites web, mieux et plus vite vous vous améliorerez.

Qu’attendez-vous ? Arrêtez de tergiverser.

29. Demander un retour d’information

Utilisez votre réseau pour recueillir des informations sur vos projets de conception de sites web, même si vous pensez qu’ils sont modestes. Écoutez ces commentaires, même s’ils ne vous plaisent pas, et voyez ce que vous pouvez apprendre.

Outre les préférences visuelles, la personne qui donne son avis a-t-elle fait des suggestions pour améliorer le fonctionnement du site web ? Pourrait-elle facilement comprendre l’objectif de la conception ? Ont-ils eu un lien avec le message ?

30. Continuez à apprendre de nouvelles choses

Apprendre la conception de sites web, pour être un grand concepteur de sites web, il suffit de continuer à jouer, à essayer et à apprendre de nouvelles choses. Mettez un point d’honneur à créer des réseaux et à communiquer avec d’autres personnes dans le domaine afin de rester au fait des techniques et des changements visuels qui sont en demande.

Si vous cherchez à apprendre la conception de sites web, c’est probablement déjà quelque chose que vous faites régulièrement. Mais il s’agit d’un domaine en pleine évolution, qui change presque chaque jour. Il suffit de demander à ceux qui le font.