L’apprentissage des bases de la conception Web figure-t-il toujours sur votre liste « un jour”? Pourquoi tu n’as pas encore commencé ? Nous avons rassemblé 30 conseils et ressources pour vous aider à commencer à apprendre la conception Web ce mois-ci (et peut-être même vous trouver un nouveau chemin de carrière!)

Les graphistes, les graphistes et les créatifs qui cherchent à apprendre quelque chose de nouveau ou à pénétrer dans le site Web doivent cesser de tergiverser. Chaque jour que vous ne faites pas ce premier pas vous laisse un jour plus loin derrière tout le monde!

Suivez ces étapes pour commencer à apprendre à créer votre premier site Web, les meilleures pratiques de l’industrie et bien plus encore, le tout en 30 jours!

Démarrer un site Web

La meilleure façon de commencer à apprendre la conception Web est de commencer à le faire. C’est le conseil de David Kadavy, auteur de Design < pour les hackers >.

Je vous recommande de démarrer un blog. J’ai commencé un blog juste pour avoir un terrain de jeu de conception web, et 7 ans plus tard, j’ai lancé un livre à succès sur le sujet. Avoir un projet personnel, comme un blog, vous donne un endroit où vous pouvez essayer de nouvelles choses, et votre patron ne vous licenciera pas si vous gâchez.

Vous n’avez pas à commencer par un site Web massif ou un design fou; commencez petit. Jouez avec le site Web, découvrez ce qui fait fonctionner les choses. (Et assurez-vous d’inspecter le code, afin 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 avec un design de site Web élégant, alors que vous commencez à apprendre les concepts et les éléments constitutifs de ce qui entre dans un site Web.

Lisez Tout Ce Que Vous Pouvez

Commencez à lire. Parce que vous êtes sur ce blog, vous avez probablement l’habitude de 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 réseaux sociaux.

Lancez également un large filet pour la lecture de la conception de votre site Web. Lisez les bases pour apprendre du code, lisez la théorie du design et lisez des tutoriels et des articles actuels.

Soyez un Communicateur efficace

Si vous n’êtes pas la personne la plus articulée, perfectionnez ces compétences. Une grande partie de la conception de sites Web est la communication.

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

Abonnez-vous à Tuts +&Envato Elements

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

Tuts+ publie régulièrement des cours sur la conception graphique et web, depuis les techniques de base jusqu’aux dernières approches et développements avancés. C’est complètement auto-rythmé, enseigné par des instructeurs experts. Vous aurez également accès à Envato Elements, qui est une excellente ressource pour trouver des graphiques, des modèles et plus encore à intégrer à votre travail de conception Web.

Pensez en HTML

Le HTML, ou langage de balisage hypertexte, est une pierre angulaire de la conception de sites Web. HTML est le squelette qui aide à créer la structure d’un site Web et une fois que vous pourrez lire la langue, le monde de la conception de sites Web aura beaucoup plus de sens.

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

Jouez avec le code sur Codeacademy

Bien que le HTML soit un bon début, vous pouvez apprendre presque n’importe quel langage de programmation à partir de Codeacademy. L’ensemble d’outils gratuits vous apprend à coder à l’aide d’activités et de jeux interactifs.

Vous pouvez choisir un cours Codeacademy où et quand vous en avez besoin et commencer et arrêter au besoin. Choisissez un sujet à apprendre – développement Web, programmation, science des données – ou un langage sur lequel se concentrer – HTML&CSS (un excellent point de départ), Python, Java, SQL, Ruby, etc.

Apprenez à comprendre les CSS

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

Tel que défini par Mozilla

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 commencer, avec une solide introduction au fonctionnement du CSS, y compris les sélecteurs et les propriétés, l’écriture de règles CSS, l’application du CSS au HTML, la façon de spécifier la longueur, la couleur et d’autres unités en CSS, la cascade et l’héritage, les bases du modèle de boîte et le débogage du CSS. Ensuite, les modules se déplacent pour expliquer le style du texte et des boîtes.

Appliquez vos compétences en design au Web

Si vous travaillez déjà dans un domaine de la création ou du graphisme, réfléchissez aux choses que vous savez déjà 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.

Bien que des éléments tels que l’apprentissage du code puissent ne pas sembler naturels, avoir un arrière-plan de conception est un énorme bonus. À quoi sert un site Web magnifiquement codé si on ne veut pas interagir avec lui?

Faites attention aux sites Web que vous aimez

Prenez note des sites Web que vous aimez. Qu’en est-il d’eux qui vous attire? (Et comment pouvez-vous apprendre à reproduire ces éléments?)Faites attention à:

• Typographie
• Navigation
• Utilisation des images et de l’espace
• Conception des formulaires
• Effets d’animation et de défilement
• Couleur

Dessiner un Wireframe

Le wireframing est le brainstorming d’un concepteur de sites Web.

Dans sa forme la plus pure, un wireframe est une esquisse de ce que sera le site Web. Ce n’est pas une esquisse d’éléments esthétiques, mais plutôt un plan du site Web. Dessiner un wireframe ne concerne pas vraiment l’apparence de cette conception, mais la structure de l’information qui s’y trouve.

Vous ne savez pas comment créer un wireframe ? La télépathie numérique a un guide des meilleures pratiques pour vous aider à apprendre.

Prenez le temps d’apprendre Sketch

Sketch est un outil de dessin vectoriel pour Mac qui facilite la création d’é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 emballé avec des plugins et vous 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 suite créative d’Adobe et il vaut la peine de passer du temps.

Restez à jour avec la technologie

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

Il peut être difficile de suivre autant de nouvelles technologies et de tendances. Mais vous devez faire un point pour rester au courant de ces changements.

Abordez-les une à la fois et commencez par des technologies qui sont les plus directement liées au travail que vous faites. Si vous avez un site Web avec chat en ligne, commencez par en apprendre davantage 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 sont susceptibles de devenir des éléments intégrés du paysage de la conception de sites Web. Au minimum, vous devez savoir ce qu’ils sont et quelles pourraient être les utilisations potentielles.

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

Alors que de nombreux concepteurs Web pensent qu’un spécialiste du référencement peut gérer la préparation d’un site Web pour les moteurs de recherche, il y a beaucoup de travail de conception qui est lié au référencement.

De la façon dont les images sont téléchargées à la création de code propre qui est rapide à l’inclusion de méta-descriptions sur les pages et les éléments, le concepteur doit intégrer la pensée de recherche dans son flux de travail.

Pigistes, c’est d’une importance vitale pour vous aussi. La plupart des clients sont assez avertis 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 peut lire (et pouvoir référer le client à un spécialiste du référencement si plus de travail doit être effectué).

Jouez 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 commencer à créer et à concevoir des sites Web.

La plupart de ces outils ont beaucoup de modèles et vous permettent de personnaliser des éléments et même d’ajouter des extraits de code. Pour les sites simples, de nombreux créateurs de sites Web ont également un plan gratuit dans lequel vous pouvez créer une page de portefeuille personnelle ou un site Web de base qui vous sert de terrain de jeu.

Ensuite, séparez les morceaux dans le créateur de site Web. Regardez comment ils sont conçus et codés pour avoir une idée de la façon dont tout cela se combine. Vous serez surpris par ce que vous pouvez comprendre simplement en choisissant un autre design à part.

Trouvez un Mentor

Y a-t-il quelqu’un avec qui vous travaillez et que vous admirez en tant que concepteur Web? Emmenez-les déjeuner et choisissez leur cerveau sur l’industrie.

Trouver un mentor prêt à travailler avec vous et à vous aider à réfléchir au domaine et à apprendre la conception Web par vous-même peut être inestimable. Et bien que vous puissiez probablement trouver un mentor dans une communauté en ligne, rien de mieux qu’une personne en direct que vous pouvez rencontrer en face à face périodiquement. (Cela vaut peut-être la peine d’avoir des mentors en ligne et en personne.)

Rejoignez la communauté CodePen

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 des fondateurs du site: « CodePen est un environnement de développement social. En son cœur, il vous permet d’écrire du code dans le navigateur et d’en voir les résultats au fur et à mesure de la construction. Un outil utile et libérateur pour les développeurs de toutes compétences, et particulièrement stimulant pour les personnes apprenant à 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. »

Prenez une classe

Pour certains apprenants, un cadre de classe plus formel est préférable.

Il y a une tonne de cours disponibles – en personne et en ligne – pour vous permettre d’apprendre les bases de la conception Web. Commencez par un collège local ou des centres d’apprentissage en ligne tels que Udemy ou Coursera. Prenez une classe à votre niveau de capacité actuel et continuez à avancer.

Vous voulez faire Quelque chose? Google It

Pour l’apprenant pas si traditionnel, trouvez la réponse au problème de conception Web sur Google. Il y a tellement de tutoriels et de vidéos disponibles qui peuvent vous guider à travers presque tous les problèmes – et solutions.

La clé est de rechercher exactement ce que vous devez savoir et de rechercher une source fiable pour la réponse. Voici un autre conseil en matière de tutoriels et de vidéos – un contenu plus récent vous donnera probablement une réponse meilleure, plus complète et plus pertinente. (Rappelez-vous, certaines de ces choses changent rapidement.)

Faites attention à l’Expérience utilisateur

Rien ne peut faire ou casser un site Web comme la conception de l’expérience utilisateur. Vous devez le planifier et le comprendre.

Voici comment l’Interaction Design Foundation décrit la conception de l’expérience utilisateur :

La conception de l’expérience utilisateur (UX) est le processus de création de produits qui fournissent des expériences significatives et personnellement pertinentes. Cela implique une conception minutieuse de la convivialité d’un produit et du plaisir que les consommateurs tireront de son utilisation. Il concerne également l’ensemble du processus d’acquisition et d’intégration du produit, y compris les aspects de la marque, du design, de la convivialité et de la fonction.

Les concepteurs UX, ou les concepteurs conscients du processus de formation de l’expérience, cherchent à créer et à façonner délibérément les facteurs influençant le processus. Pour ce faire, un concepteur UX examinera le Pourquoi, le Quoi et le comment de l’utilisation du produit.

Faites attention aux tendances du design

À quoi ressemble un design de site Web moderne? Ce n’est pas une question piège. Pour concevoir des sites Web et des expériences utilisateur modernes, 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 remonte à 2016, vous avez beaucoup de terrain à rattraper.

Créer des designs de sites Web avec des touches modernes et des tendances intégrées à la conception aidera vos projets à se démarquer. Comment savez-vous ce qui est tendance? Continuez à lire des sites comme celui-ci et faites attention à ce que font les autres concepteurs. Prenez note des couleurs, des styles et des fonctionnalités qui sont inclus dans les sites Web que vous visitez fréquemment.

Créer sans couleur

Commencez chaque conception sans couleur. Un grand designer m’a dit un jour que si votre design fonctionne en noir et blanc, il sera de couleur impeccable.

Cela ne tient peut-être pas toujours, 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 supprimé toute association émotionnelle avec la couleur ou le mouvement des yeux qui se produit à cause de cela. Cette forme de conception la plus simple vous donnera une idée si quelque chose fonctionne comme un concept avant de passer à la finalisation.

Apprenez à aimer les polices Google

Google Fonts est votre ami.

Peu importe ce que vous pensez de Google, la possibilité de parcourir, de trier et de sélectionner des polices de caractères dont vous savez qu’elles fonctionneront dans la conception de sites Web est importante. Vous n’avez pas à penser à la licence ou si les polices sont compatibles avec des navigateurs spécifiques ou non.

La limitation est que vous n’avez que ce qui se trouve dans la bibliothèque de polices Google pour travailler avec. Mais si vous essayez, vous pouvez trouver quelque chose qui conviendra à presque tous les projets. Cela vous fera gagner beaucoup de temps à long terme.

Choisissez un kit d’interface utilisateur

Téléchargez une interface utilisateur ou un kit d’icônes et séparez-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 comment les fichiers sont organisés dans Photoshop ou Illustrator.

Recherchez un kit à télécharger qui inclut des éléments dans plusieurs formats pour les écrans haute résolution. (Télécharger un tas de fichiers JPEG ne vous servira pas si bien.)

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

Devenir typographe

La conception de sites Web modernes met fortement l’accent sur la typographie … bonne typographie. Des en-têtes de héros avec des mots géants aux couches de texte qui attirent un utilisateur dans la conception, il est essentiel de comprendre les principes de couplage des éléments de type et de construction de blocs de texte attrayants.

Commencez par la pensée d’Ellen Lupton avec Type. (Il y a aussi 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.

Sautez dans JavaScript

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

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

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

Mettez à jour votre Portfolio

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

Un portefeuille mis à jour peut aider les clients potentiels à voir à quoi ressemble votre « style”. Assurez-vous de présenter les mises en page, les couleurs, la typographie et les différentes techniques qui montrent ce que vous pouvez faire.

Relevez le 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 au défi continuellement d’apprendre de nouvelles compétences, de nouvelles technologies et de continuer à améliorer votre jeu de conception Web.

La seule chose à propos de ce domaine est qu’il change constamment; il y a toujours quelque chose de nouveau à apprendre ou à essayer.

Maximisez Votre expérience

Sortez et concevez. Vous devez commencer à concevoir des sites Web pour être un concepteur de sites Web.

Commencez petit, mais prenez des projets avec d’autres. Demandez à participer à un projet avec une équipe au travail. S’attaquer à un petit site Web pour un ami. Plus vous avez d’expérience dans la création de sites Web, mieux vous obtiendrez et plus rapidement.

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

Demandez des commentaires

Utilisez votre réseau pour recueillir des commentaires sur vos projets de conception de sites Web, peu importe leur taille. Écoutez ces commentaires – même si vous ne les aimez pas et voyez ce que vous pouvez apprendre.

En dehors de la préférence visuelle, la personne qui fournit des commentaires a-t-elle proposé des suggestions pour améliorer le fonctionnement du site Web? Pourraient-ils facilement comprendre l’objectif de la conception? Se sont-ils connectés à la messagerie?

Continuez à apprendre de nouvelles choses

Pour être un excellent concepteur de sites Web, il vous suffit de continuer à jouer, à essayer et à apprendre de nouvelles choses. Faites un point pour réseauter et communiquer avec les autres sur le terrain afin de rester au courant 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 c’est un domaine en évolution, et il ne cesse de changer presque tous les jours. Il suffit de demander à quiconque le fait.