Est-ce que l'apprentissage des bases de la conception Web est toujours sur votre? Un jour? liste? Pourquoi n'avez-vous pas encore commencé? Nous avons rassemblé 30 astuces et ressources pour vous aider à commencer à apprendre le web design ce mois-ci (et peut-être même à vous trouver un nouveau cheminement de carrière!)
Les concepteurs graphiques, les concepteurs d'impression et les créatifs qui cherchent à apprendre quelque chose de nouveau ou à percer dans un site Web doivent cesser de procrastiner. Chaque jour où vous ne faites pas ce premier pas vous laisse un jour de plus derrière tous les autres!
Suivez ces étapes pour commencer à apprendre à créer votre premier site Web, les meilleures pratiques de l'industrie et bien plus encore, 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 l'avis de David Kadavy, auteur de Design Hackers.
Je vous recommande de commencer 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 best-seller 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 licenciera pas si vous vous trompez.
Vous n'avez pas à commencer avec un site Web massif ou un design fou; commencer petit. Jouez avec le site Web, déterminez ce qui fait que les choses fonctionnent. (Et assurez-vous d'inspecter le code afin de pouvoir vous familiariser avec ce qui fait fonctionner votre 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 de sites Web, les tendances, les techniques et les meilleures pratiques. Suivez les créateurs que vous admirez sur les médias sociaux.
Jetez un large filet pour la lecture de votre site Web. Découvrez les bases pour apprendre le code, la théorie du design et les didacticiels et articles en cours.
3. être un communicateur efficace
Si vous n'êtes pas la personne la plus articulée, améliorez 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 le problème que le design doit résoudre. ils doivent communiquer ces solutions et les appliquer é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 la conception Web, des techniques de base aux dernières approches et développements avancés. Il est complètement autonome, enseigné par des instructeurs experts. Vous aurez également accès à Envato Elements, une excellente ressource pour trouver des graphiques, des modèles et plus encore, à intégrer à 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. Une fois que vous pourrez 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 que vous pouvez utiliser à l’écran pour voir ce qui se passe et comment il fonctionne. (Vous trouverez peut-être plus intuitif que vous ne l'aviez imaginé.)
6. Jouer avec le code à la Codeacademy
Bien que le HTML soit un bon début, vous pouvez apprendre presque tous les langages de programmation de Codeacademy. L'ensemble d'outils gratuit vous apprend à coder à l'aide d'activités et de jeux interactifs.
Vous pouvez suivre un cours Codeacademy où et quand vous en avez besoin et commencer et vous arrêter au besoin. Choisissez un sujet à apprendre - développement Web, programmation, science des données - ou un langage sur lequel vous concentrer - HTML et CSS (un bon point de départ), Python, Java, SQL, Ruby, etc.
7. Apprendre à comprendre le CSS
CSS, ou feuilles de style en cascade, définissent la présentation d'un document écrit en HTML, XML ou SVG.
Comme défini par Mozilla
CSS décrit comment les éléments doivent être restitués à l'écran, sur papier, en langage ou sur un autre support.
Mozilla possède également une excellente collection de ressources CSS à démarrer, avec une introduction solide au fonctionnement de CSS, notamment des sélecteurs et des propriétés, la rédaction de règles CSS, l'application de CSS au HTML, la spécification de la longueur, de la couleur et d'autres unités en CSS, en cascade et l'héritage, les bases du modèle de boîte et le débogage de CSS. Ensuite, les modules expliquent le style du texte et des zones.
8. Appliquez vos compétences en conception sur le Web
Si vous travaillez déjà dans un domaine de création ou de design graphique, réfléchissez à ce que vous savez déjà que vous pouvez également appliquer à la conception de sites Web. Les principes qui rendent quelque chose d’attrayant visuellement 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, le fait d'avoir un arrière-plan de conception est un atout supplémentaire. À quoi sert un site Web magnifiquement codé si 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 les attire? (Et comment apprendre à reproduire ces éléments?) Faites attention à:
- Typographie
- La navigation
- Utilisation d'images et d'espace
- Conception de formulaires
- Animation et effets de défilement
- Couleur
10. Dessinez un fil de fer
Wireframing est un brainstorming de concepteur de sites Web.
Dans sa forme la plus pure, une structure filaire est une esquisse de ce que sera le site Web. Ce n'est pas un aperçu d'éléments esthétiques, mais un schéma directeur du site Web. Dessiner une structure filaire ne concerne pas vraiment l'aspect de cette conception, mais bien la structure de l'information qui s'y trouve.
Vous ne savez pas comment créer une structure filaire? La télépathie numérique contient un guide des meilleures pratiques pour vous aider à apprendre.
11. Prenez le temps d'apprendre l'esquisse
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 contient de nombreux 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 qui existent depuis la suite Creative Suite d’Adobe et qui vaut vraiment la peine.
12. Restez à jour avec la technologie
AI, VR, AR, vidéo à 360 degrés, bots.
Il y a tellement de nouvelles technologies et tendances qu'il peut être difficile de suivre. Mais vous devez vous efforcer de rester au fait de ces changements.
Abordez-les un à un et commencez avec les technologies les plus directement liées au travail que vous effectuez. 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 une 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 feront probablement partie intégrante du paysage de la conception de sites Web. Au minimum, vous devez savoir ce qu’ils sont et quelles en sont les utilisations potentielles.
13. Soyez à l'aise avec le référencement
Alors que de nombreux concepteurs Web pensent qu'un spécialiste du référencement peut préparer un site Web pour qu'il puisse être lu par les moteurs de recherche, de nombreux travaux de conception sont liés au référencement.
Que ce soit pour la manière dont les images sont téléchargées, pour créer un code propre rapide et pour inclure des 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.
Indépendants, c’est d’une importance vitale pour vous aussi. 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 assez pour créer un cadre solide que Google peut lire (et être en mesure de renvoyer le client à un spécialiste en référencement si davantage de travail doit être effectué).
14. Jouez avec un constructeur de site Web
Un constructeur 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 comportent 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 constructeurs de sites Web ont également un plan gratuit dans lequel vous pouvez créer une page de portefeuille personnel ou un site Web de base servant de terrain de jeu pour vous.
Ensuite, choisissez les pièces du constructeur de sites Web. Regardez comment ils sont conçus et codés pour avoir une idée de la manière dont tout cela se met en place. Vous serez surpris de ce que vous pouvez comprendre simplement en choisissant un autre design à part.
15. Trouver un mentor
Y a-t-il quelqu'un avec qui vous admirez en tant que concepteur web? Emmenez-les déjeuner et choisissez leur cerveau au sujet de l'industrie.
Trouver un mentor disposé à travailler avec vous et à vous aider à réfléchir au domaine et à apprendre à concevoir vous-même la conception de sites Web peut s'avérer inestimable. Et même si vous pouvez probablement trouver un mentor dans une communauté en ligne, rien n’est meilleur qu’une personne vivante que vous pouvez rencontrer en personne périodiquement. (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 certains codes et programmes, 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, par exemple.
Voici un peu plus des fondateurs du site: «CodePen est un environnement de développement social. À la base, il vous permet d’écrire du code dans le navigateur et d’en voir les résultats au fur et à mesure que vous le construisez. Un outil utile et libérateur pour les développeurs de toutes les compétences, et en particulier pour responsabiliser les personnes qui apprennent à coder. Nous nous concentrons principalement sur les langages front-end tels que HTML, CSS, JavaScript et les syntaxes de prétraitement qui se transforment en ces choses.
17. prendre un cours
Pour certains apprenants, une salle de classe plus formelle est préférable.
Il existe 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 un centre d’apprentissage en ligne tel que Udemy ou Coursera. Prenez un cours à votre niveau actuel et continuez d'avancer.
18. Voulez-vous faire quelque chose? Recherche le sur Google
Pour ceux qui ne sont pas si traditionnels, trouvez la réponse au problème de conception de sites Web sur Google. Il y a tellement de tutoriels et de vidéos disponibles qui peuvent vous aider à résoudre presque tous les problèmes - et solutions.
La clé est de rechercher exactement ce que vous devez savoir et de rechercher une réponse fiable. Voici un autre conseil en matière de didacticiels et de vidéos: un contenu plus récent vous apportera probablement une réponse meilleure, plus complète et plus pertinente. (N'oubliez pas que 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 planifier et comprendre.
Voici comment Interaction Design Foundation décrit la conception UX:
La conception de l'expérience utilisateur (UX) est le processus de création de produits offrant des expériences significatives et personnellement pertinentes. Cela implique une conception minutieuse de la convivialité d'un produit et du plaisir que les consommateurs retireront de son utilisation. Il concerne également l'ensemble du processus d'acquisition et d'intégration du produit, y compris les aspects de la stratégie de marque, de la conception, de la convivialité et de la fonctionnalité.
Les concepteurs UX, ou des concepteurs 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 examinera les raisons, utilisations et raisons de l’utilisation du produit.
20. Faites attention aux tendances de la conception
À quoi ressemble la conception de sites Web modernes? 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 l'interagissent. 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 encore beaucoup à faire.
Créer des conceptions de sites Web qui ont une touche moderne et des tendances intégrées dans 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 inclus dans les sites Web que vous visitez fréquemment.
21. Créer sans couleur
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 impeccable.
Cela n’est peut-être pas toujours vrai, 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 le finaliser.
22. Apprendre à aimer les polices Google
Google Fonts est votre ami.
Indépendamment de ce que vous pensez de Google, il est important de pouvoir naviguer, trier et sélectionner des types de caractères que vous savez utiliser pour la conception de sites Web. Vous n'avez pas à penser aux licences ou aux polices compatibles ou non avec des navigateurs spécifiques.
La limitation est que vous ne pouvez utiliser que le contenu 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. Choisir un kit d'interface utilisateur
Téléchargez une interface utilisateur ou un kit d'icônes et sélectionnez-les.
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 la manière dont les fichiers sont organisés dans Photoshop ou Illustrator.
Recherchez un kit à télécharger qui inclut des éléments dans plusieurs formats pour des affichages haute résolution. (Le téléchargement d'un fichier JPEG ne vous servira pas très bien.)
Ensuite, essayez de créer ou de personnaliser un ou deux éléments de votre choix.
24. Devenir un typographe
La conception de sites Web modernes est fortement axée 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 l'association des éléments de texte et de la construction de blocs de texte attrayants.
Commencez par Ellen Lupton, Thinking with 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. sauter dans JavaScript
Lorsque vous commencez à vous sentir très à l'aise avec le design Web, relevez le défi d'apprendre le JavaScript. Après HTML et CSS, c'est la langue la plus importante du Web.
JavaScript est l'outil qui permet aux concepteurs d'implémenter des éléments complexes et des interactions sur des pages Web. C'est ce qui anime une diapositive ou une animation de parallaxe.
Learn JS propose un didacticiel interactif pour vous aider à démarrer.
26. Mettez à jour votre portefeuille
Une fois que vous commencez à concevoir pour le Web, veillez à mettre à jour votre portefeuille avec des projets de conception Web. Cette action simple vous aidera à vous montrer? et d'autres? cette conception Web fait partie de votre répertoire.
Un portefeuille mis à jour peut aider les clients potentiels à voir quel est votre style. ressemble à. Assurez-vous de mettre en valeur les dispositions, les couleurs, la typographie et les différentes techniques montrant ce que vous pouvez faire.
27. Relevez le défi
Avec autant de raccourcis et d'extraits de code pour vous aider à résoudre presque tous les problèmes de sites Web que vous rencontrez, ne soyez pas paresseux. N'oubliez pas de vous mettre constamment au défi 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.
28. 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'occuper d'un petit site Web pour un ami. Plus vous avez d'expérience dans la création de sites Web, plus vous obtiendrez de meilleurs résultats.
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, peu importe leur taille. Écoutez ces commentaires - même si vous ne les aimez pas et voyez ce que vous pouvez apprendre.
Outre les préférences visuelles, la personne qui a fourni les commentaires a-t-elle formulé des suggestions pour améliorer le fonctionnement du site Web? Pourraient-ils facilement comprendre l'objectif de la conception? Ont-ils connecté avec la messagerie?
30. Continuez à apprendre de nouvelles choses
Pour être un excellent concepteur de site Web, il vous suffit de continuer à jouer, d'essayer et d'apprendre de nouvelles choses. Rendez-vous au réseau et communiquez avec les autres sur le terrain pour rester au fait des techniques et des changements visuels en demande.
Si vous cherchez à apprendre la conception de sites Web, vous le faites probablement déjà déjà. Mais il s’agit d’un domaine en évolution, qui change presque tous les jours. Il suffit de demander à quiconque le fait.