30 conseils pour apprendre la conception Web en 30 jours
Est-ce que l'apprentissage des bases de la conception Web est toujours sur votre liste «un jour»? Pourquoi n'avez-vous 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 cheminement de carrière!)
Les graphistes, les graphistes et les créatifs qui cherchent à apprendre quelque chose de nouveau ou à pénétrer un site Web doivent arrêter 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!
1. 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 Hackers.
Je vous recommande de créer 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 vous trompez.
Vous n'avez pas à commencer par un site Web massif ou un design fou; commencer 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 démarrer rapidement? Un constructeur de site Web comme Wix peut vous aider à vous donner une longueur d'avance avec une conception de site Web élégante, alors que vous commencez à apprendre les concepts et les éléments constitutifs de ce qui va dans un site Web.
2. Lisez tout ce que vous pouvez
Commencez à lire. Parce que vous êtes sur ce blog, vous êtes probablement habitué à suivre ce qui se passe dans le monde du design. Continue de lire.
Lisez tout ce que vous pouvez sur la conception et les tendances du site Web, les techniques et les meilleures pratiques. Suivez les designers que vous admirez sur les réseaux sociaux.
Jetez é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 de la conception et lisez des didacticiels et des articles actuels.
3. Soyez un communicateur efficace
Si vous n'êtes pas la personne la plus éloquente, perfectionnez ces compétences. Une grande partie de la conception d'un site Web est la communication.
Les concepteurs de sites Web doivent communiquer régulièrement avec les clients pour déterminer le problème que la conception doit résoudre; ils doivent communiquer ces solutions et les mettre en œuvre également.
4. 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, des techniques de base aux dernières avancées et développements avancés. Il est entièrement autonome, enseigné par des instructeurs experts. Vous aurez également accès à Envato Elements, qui est une excellente ressource pour trouver des graphiques, des modèles, etc. pour vous connecter à votre travail de conception Web.
5. Pensez en HTML
HTML, ou langage de balisage hypertexte, est une pierre angulaire de la conception de sites Web. Le HTML est le squelette qui aide à créer la structure d'un site Web et une fois que vous pouvez lire la langue, le monde de la conception de sites Web aura beaucoup plus de sens.
W3Schools propose un excellent didacticiel de démarrage HTML avec des centaines d'exemples HTML avec lesquels vous pouvez jouer à l'écran pour voir ce qui se passe et comment cela fonctionne. (Vous pourriez trouver cela plus intuitif que vous ne l'imaginiez.)
6. Jouez avec le code à Codeacademy
Bien que HTML soit un bon début, vous pouvez apprendre presque tous les langages de programmation de Codeacademy. L'ensemble gratuit d'outils vous apprend à coder à l'aide d'activités et de jeux interactifs.
Vous pouvez prendre 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 langage sur lequel vous concentrer - HTML et CSS (un bon point de départ), Python, Java, SQL, Ruby, etc.
7. Apprenez à comprendre CSS
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 affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.
Mozilla dispose également d'une grande collection de ressources CSS pour commencer, avec une introduction solide sur le fonctionnement de CSS, y compris les sélecteurs et les propriétés, l'écriture de règles CSS, l'application de CSS au HTML, la façon de spécifier la longueur, la couleur et d'autres unités en CSS, cascade et l'héritage, les bases du modèle de boîte et le débogage CSS. Ensuite, les modules continuent d'expliquer le style du texte et des zones.
8. Appliquez vos compétences en conception au Web
Si vous travaillez déjà dans un domaine de conception créative ou graphique, pensez aux choses que vous savez déjà que vous pouvez également appliquer à la conception de sites Web. Les principes qui rendent quelque chose de 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 personne ne veut interagir avec lui?
9. Faites attention aux sites Web que vous aimez
Prenez note des sites Web que vous aimez. Qu'en est-il pour vous? (Et comment pouvez-vous apprendre à reproduire ces éléments?) Faites attention à:
- Typographie
- La navigation
- Utilisation d'images et d'espace
- Conception de formulaires
- Effets d'animation et de défilement
- Couleur
10. Dessinez un filaire
Le wireframing est le brainstorming d'un concepteur web.
Dans sa forme la plus pure, un filaire est une esquisse de ce que sera le site Web. Ce n'est pas un aperçu des éléments esthétiques, mais plutôt un plan du site Web. Dessiner un filaire ne concerne pas vraiment l'apparence de cette conception, c'est la structure de l'information qui s'y trouve.
Vous ne savez pas comment créer un filaire? La télépathie numérique a un guide des meilleures pratiques pour vous aider à apprendre.
11. Prenez le temps d'apprendre le croquis
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 rempli de plugins et vous permet d'exporter du code pour une utilisation et un accès faciles. Il s'agit de l'un des outils les plus puissants et les plus populaires proposés depuis Adobe Creative Suite et qui en vaut la peine.
12. 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 tendances. Mais vous devez vous assurer de rester au fait de ces changements.
Abordez-les un à la fois et commencez par les technologies les plus directement liées au travail que vous faites. Si vous avez un site Web avec chat en ligne, commencez par vous renseigner sur les robots. Ou si vous utilisez beaucoup de contenu vidéo, jouez avec de 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 conception de sites Web à l'avenir. Au minimum, vous devez savoir de quoi il s'agit et quelles pourraient être les utilisations potentielles.
13. Soyez à l'aise avec le référencement
Alors que de nombreux concepteurs de sites Web pensent qu'un spécialiste du référencement peut gérer la préparation d'un site Web à lire par les moteurs de recherche, il y a beaucoup de travail de conception lié au référencement.
De la façon dont les images sont téléchargées à la création de 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.
Indépendants, cela est également d'une importance vitale pour vous. La plupart des clients sont suffisamment 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 être en mesure de référer le client à un spécialiste SEO si plus de travail doit être fait).
14. 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 comment commencer à créer et à concevoir des sites Web.
La plupart de ces outils ont de nombreux 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 où vous pouvez créer une page de portfolio personnelle ou un site Web de base qui vous sert de terrain de jeu.
Ensuite, séparez les pièces dans le constructeur 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 réunit. Vous serez étonné par ce que vous pouvez découvrir en choisissant simplement un autre design.
15. Trouver un mentor
Y a-t-il quelqu'un avec qui vous travaillez et que vous admirez en tant que concepteur de sites 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 par vous-même la conception Web 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 régulièrement en face à face. (Peut-être que cela vaut la peine d'avoir des mentors en ligne et en personne.)
16. Rejoignez la communauté CodePen
Une fois que vous commencez à vous familiariser avec du code et de la programmation, vous souhaitez rejoindre la communauté CodePen. La communauté open-source vous permet de partager et de modifier des extraits de code dans un réseau social de toutes sortes.
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 que vous construisez. Un outil utile et libérateur pour les développeurs de toute compétence, et en particulier pour les personnes qui apprennent à coder. Nous nous concentrons principalement sur les langages frontaux tels que HTML, CSS, JavaScript et les syntaxes de prétraitement qui se transforment en ces choses. »
17. Prenez un cours
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 avec un collège local ou des centres d'apprentissage en ligne tels que Udemy ou Coursera. Choisissez une classe à votre niveau actuel et continuez à avancer.
18. Voulez-vous faire quelque chose? Recherche le sur Google
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 n'importe quel problème - et solution.
La clé est de rechercher exactement ce que vous devez savoir et de rechercher une source fiable pour la réponse. Voici une autre astuce en ce qui concerne les didacticiels et les vidéos - un contenu plus récent va probablement vous donner une réponse meilleure, plus complète et plus pertinente. (N'oubliez pas, certaines de ces choses changent rapidement.)
19. Faites attention à l'expérience utilisateur
Rien ne peut faire ou défaire 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 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 une conception soignée de l'utilisabilité d'un produit et du plaisir que les consommateurs retireront de son utilisation. Il est également concerné par l'ensemble du processus d'acquisition et d'intégration du produit, y compris les aspects de la marque, du design, de l'utilisabilité et de la fonction.
Les concepteurs UX, ou les concepteurs qui sont conscients du processus de formation de l'expérience, cherchent à créer et à façonner délibérément les facteurs qui influencent le processus. Pour ce faire, un concepteur UX considérera le pourquoi, le quoi et le comment de l'utilisation du produit.
20. Faites attention aux tendances de conception
À quoi ressemble une conception de 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. 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 terrain à rattraper.
Créer des conceptions de sites Web qui ont des touches et des tendances modernes intégrées dans la conception aidera vos projets à se démarquer. Comment savez-vous ce qui a tendance? Continuez à lire des sites comme celui-ci et faites attention à ce que font les autres concepteurs. Prenez note des couleurs et des styles et des fonctionnalités qui sont inclus dans les sites Web que vous visitez fréquemment.
21. Créer sans couleur
Commencez chaque conception sans couleur. Un grand designer m'a dit une fois que si votre design fonctionne en noir et blanc, il sera d'une couleur parfaite.
Cela ne tient pas toujours, mais c'est un excellent point de départ.
En créant des motifs 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 en résulte. Cette forme de conception la plus simple vous donnera une idée si quelque chose fonctionne comme un concept avant de passer à la finalisation.
22. Apprenez à aimer les polices Google
Google Fonts est votre ami.
Peu importe ce que vous pensez de Google, il est important de pouvoir parcourir, trier et sélectionner les polices de caractères qui, selon vous, fonctionneront dans la conception de sites Web. Vous n'avez pas à penser à l'octroi de licences ou si les polices de caractères sont compatibles avec des navigateurs spécifiques ou non.
La limitation est que vous ne disposez que des éléments de la bibliothèque Google Fonts. 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é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, examinez les mélanges de couleurs et l'organisation des fichiers dans Photoshop ou Illustrator.
Recherchez un kit à télécharger qui comprend des éléments dans plusieurs formats pour les écrans haute résolution. (Le téléchargement d'un tas de fichiers JPEG ne vous sera pas très utile.)
Essayez ensuite de créer ou de personnaliser un ou deux de vos éléments.
24. Devenez typographe
La conception de sites Web modernes met fortement l'accent sur la typographie… une 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 texte et de construction de blocs de texte attrayants.
Commencez avec la pensée d'Ellen Lupton avec le 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.
25. Aller dans JavaScript
Lorsque vous commencez à vous sentir plutôt à l'aise avec la conception Web, mettez-vous à nouveau au défi d'apprendre JavaScript. Après HTML et CSS, c'est la langue la plus importante du web.
JavaScript est un outil qui permet aux concepteurs d'implémenter des choses complexes et d'interagir sur des pages Web. C'est ce qui fait animer un curseur ou une animation de parallaxe.
Learn JS propose un didacticiel interactif pour vous aider à démarrer.
26. Mettez à jour votre portfolio
Une fois que vous commencez à concevoir pour le Web, assurez-vous de mettre à jour votre portefeuille avec des projets de conception Web. Cette action simple vous aidera à vous montrer… et à montrer aux autres… que la conception 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 dispositions, les couleurs, la typographie et les différentes techniques qui montrent ce que vous pouvez faire.
27. Défiez-vous
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 pour acquérir de nouvelles compétences, de nouvelles technologies et continuer à améliorer votre jeu de conception Web.
La seule chose à propos de ce domaine est qu'il est en constante évolution; il y a toujours quelque chose de nouveau à apprendre ou à essayer.
28. Maximisez votre expérience
Allez-y et concevez. Vous devez commencer à concevoir des sites Web pour être un concepteur de sites Web.
Commencez petit, mais entreprenez des projets avec d'autres. Demandez à vous joindre à un projet avec une équipe au travail. Tacle un petit site Web pour un ami. Plus vous avez d'expérience dans la création de sites Web, mieux et plus vite vous obtiendrez.
Qu'est-ce que tu attends? Arrête de procrastiner.
29. Demander des commentaires
Utilisez votre réseau pour recueillir des commentaires sur vos projets de conception de sites Web, même si vous pensez qu'ils sont petits. Écoutez ces commentaires - même si vous ne les aimez pas et voyez ce que vous pouvez apprendre.
Mis à part la préférence visuelle, la personne fournissant 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?
30. 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 que vous puissiez 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. Demandez à quiconque le fait.
