Oui, il est parfaitement possible de vous enseigner la conception web. J’ai demandé autour de cette semaine pour voir comment les gens ont réussi à acquérir les compétences et j’ai essayé de me souvenir de ce qui fonctionnait pour moi.
Il existe trois façons principales de vous enseigner la conception de sites Web.
- En faisant. Les gens apprennent en créant des sites Web.
- En utilisant des ressources en ligne. À un moment donné, tout le monde trouve des réponses en ligne sur la façon de concevoir des sites Web.
- En lisant. Celui-ci m’a surpris. La plupart des concepteurs disent qu’ils apprennent la conception Web, en partie, en lisant des livres.
Alors, passons en revue chacune de ces catégories pour savoir comment vous enseigner la conception Web.
Apprendre la conception Web en faisant
La meilleure façon de commencer à comprendre les pages Web est de regarder comment les sites Web existants sont assemblés et de les construire vous-même.
Observez le fonctionnement d’autres sites Web
Pour commencer, la plupart des pages Web sur Internet sont écrites, au moins en partie, en HTML. Pour voir le code HTML qui crée cette page, vous devez « Afficher la source » dans le navigateur que vous utilisez. Essayez d’aller Cmd / Ctrl-U (pour Firefox), allez Cmd / Ctrl-Alt / Opt-U (pour Chrome), et si vous utilisez Internet Explorer, vous devez vraiment vous demander si la conception Web est le bon chemin de carrière pour vous.
Essayez de parcourir le code HTML pour voir comment les différents éléments d’une page Web sont marqués. Vous pourrez peut-être identifier certaines balises immédiatement. Par exemple, <p> est pour le paragraphe, <h1,2,3> sont des titres, <img> est pour une image, etc. Vous remarquerez que la plupart de ces balises fonctionnent par paires pour indiquer le début et la fin de la balise, par exemple <p>Text here</p> montre l’ouverture et la fermeture de la balise de paragraphe avec la barre oblique (/) précédant la balise de fermeture. D’autres balises ne fonctionnent pas par paires, par exemple la balise d’image se ferme automatiquement <img src = "https://robcubbon.com/images/rob.jpg" /> cela indique au navigateur d’afficher une image avec une adresse Web particulière comme source (src).
Une autre chose que vous remarquerez peut-être à partir de la source HTML est que toutes les pages HTML ont une structure similaire. Ils commencent tous par une déclaration <!DOCTYPE> indiquant dans quelle version de HTML il se trouve, suivie d’une déclaration <HTML>, suivie de la déclaration <head> du document qui est un conteneur de divers éléments, y compris des liens vers des scripts, des feuilles de style, les méta-informations, etc. Après le <head> vient le <body> où les éléments de la page Web sont marqués.
Exercice: Sélectionnez tout le code source de cette page dans un document Bloc-notes (PC) ou TextEdit (Mac) et enregistrez-le sur votre ordinateur en tant que « test.html » ou quelque chose. Ouvrez ce fichier dans un navigateur et il devrait ressembler exactement à la version en ligne. Maintenant, désactivez votre connexion à Internet et voyez à quoi ressemble la page de test. Plutôt différent, hein ? Essayez de comprendre pourquoi.
Outils du métier
Pendant que vous faites cela, il y aura certains outils dont vous aurez besoin.
- Plusieurs navigateurs et téléphones intelligents. Essayez de tester vos propres sites sur différents navigateurs et téléphones (c’est là que vous commencerez une affaire de haine de longue date avec Internet Explorer).
- Éditeur de texte. Vous pouvez utiliser le bloc-notes de base (PC) ou TextEdit (Mac), ou peut–être Coda (Mac) ou Dreamweaver – n’utilisez pas Dreamweaver en mode visuel, travaillez simplement sur le code, vous devez comprendre comment cela fonctionne sous le capot.
- Validateur. Validez vos pages web avec le validateur HTML et le validateur CSS (utilisez un plugin de navigateur comme Web Developer for Chrome pour les appeler rapidement).
- Outils de développement Chrome et Firebug pour Firefox. Ces outils vous aident à comprendre CSS et JavaScript qui, si vous pensiez que HTML était difficile, nécessitent une certaine compréhension.
- Éditeurs graphiques et d’images. Les éditeurs d’images comme Photoshop ou Fireworks sont au cœur de la conception Web. Ceux-ci sont assez chers, mais il y a GIMP plus une foule d’éditeurs d’images en ligne si vous débutez.
Créer vos propres sites Web HTML statiques
Pendant que votre compréhension du HTML, du CSS et du JavaScript augmente, vous devriez créer des sites HTML statiques, localement ou sur un serveur Web. Jouez continuellement avec le code pour essayer de faire des choses sympas. Essayez de recréer certains éléments dans d’autres sites Web en copiant des morceaux de code.
Bien que les sites Web que vous créez éventuellement ne soient pas susceptibles d’être créés à partir de fichiers HTML, il est essentiel que vous compreniez d’abord comment créer des sites HTML statiques avant de pouvoir commencer à utiliser PHP et / ou des systèmes de gestion de contenu (CMSS) pour créer du HTML.
Création de vos propres sites Web avec CMSs
La plupart des sites Web sont créés par CMSs – un logiciel qui peut créer des pages HTML dans des modèles spécifiés. Les meilleurs sont WordPress, Joomla et Drupal, mais il existe une foule de CMS open source plus légers que vous pouvez expérimenter, ceux-ci vous apprendront comment PHP, et avec d’autres CMS, ASP, sont utilisés pour assembler des sites Web.
Utilisez MAMP (Mac) ou WAMP (Windows) sur votre ordinateur pour exécuter ces systèmes localement afin de bien comprendre leur fonctionnement.
Utilisation d’éditeurs d’images
Vous devrez savoir comment utiliser Photoshop ou quelque chose de similaire. Vous en aurez besoin pour créer des graphiques pour le site ainsi que pour fournir des visuels complets de l’apparence du site une fois terminé pour faciliter le processus de conception.
Get designing
Bien sûr, je n’ai pas mentionné que les sites Web résultants devront non seulement valider, fonctionner, être trouvés par les moteurs de recherche, servir un but et être commercialisés, mais aussi they ils doivent bien paraître.
Afin d’améliorer votre regard artistique, produisez régulièrement du travail et essayez ensuite de l’améliorer. Dessinez des dessins sur papier puis travaillez dessus dans Photoshop ou tout autre programme graphique que vous avez. La pratique vous aidera à devenir un meilleur designer. Je recommanderai plus de ressources plus tard qui vous aideront avec les principes de conception.
Ressources en ligne
Lorsque les gens veulent des réponses, ils vont sur Internet et « Google it » ou font une recherche sur YouTube. La conception Web n’est pas différente. Il existe de nombreuses ressources qui vous aideront en ligne. Tout d’abord, il y a les écoles W3 que les concepteurs de sites Web appellent la meilleure ressource d’auto-enseignement en ligne, il y a aussi Tizag. Certaines personnes recommandent Lynda.com bien que je ne l’ai pas utilisé personnellement.
Blogs
Il existe un certain nombre de blogs de design géniaux. Il y en a de grands qui peuvent vous aider comme SmashingMagazine, WebDesignerDepot, 1stWebDesigner et le réseau Envato.
Personnellement, je reçois davantage des designers web et graphiques indépendants qui bloguent. Il y a cependant beaucoup de choses dont j’ai appris au fil des ans, alors en voici quelques-unes et je m’excuse auprès de tous les excellents blogueurs que j’ai laissés de la liste.
- Les astuces CSS de Chris Colyer sont un excellent site Web réactif mais qui contient également d’excellentes informations et astuces de conception Web
- Veerle Pieters a d’excellents tutoriels Photoshop et Illustrator sur le blog de Veerle
- David Airey est quelqu’un que j’ai suivi pendant un certain temps sur son propre blog éponyme, LogoDesignLove et IdentityDesigned. David s’intéresse entre autres à l’identité globale des organisations.
- Chris Spooner m’a beaucoup appris avec des tutoriels sur son blog à SpoonGraphics et plus d’informations et d’inspiration sur Line25
- Le site merveilleusement conçu de Fabio Sasso, Abduzeedo, offre une grande inspiration et une grande étrangeté.
- Le studio de design N. de Nick La et le WebDesignerWall ont des informations fantastiques et une grande inspiration.
N’hésitez pas à ajouter vos blogs de design préférés dans les commentaires ci-dessous.
Forums
Lorsque vous vous frappez la tête contre un mur de briques, les forums sont d’excellents endroits pour obtenir des réponses. Publiez une description de votre problème et de l’adresse Web et très souvent, quelqu’un vous répondra avec une solution. Voici quelques-uns de mes forums préférés.
J’aime Estetica Design Forum, DesignForums.co.uk , et Concepteur, s Parler. Là, s Point numérique et Sitepoint pour des requêtes plus larges, le forum WordPress est excellent et là, s le Forum Guerrier pour le marketing Internet.
Livres
De nombreux concepteurs de sites Web soutiennent que de bons livres physiques à l’ancienne leur ont aidé à apprendre la conception Web. Voici quelques-uns de mes favoris et quelques autres qui m’ont été recommandés. Les liens sont Amazon.com liens d’affiliation.
- Construisez Votre Propre Site Web De la Bonne Façon En Utilisant HTML &CSS 3th (troisième) édition de Ian Lloyd est un livre Sitepoint que j’ai lu il y a des années. Cela m’a vraiment aidé à l’époque car il se concentre sur les meilleures pratiques de conception Web. Assurez-vous d’acheter une édition à jour (pour le moment la troisième édition qui comprend beaucoup de HTML5).
- CSS: Le manuel manquant de David Sawyer McFarland comprend des explications, des exemples et des tutoriels étape par étape. Ce livre est particulièrement recommandé car il vous donne l’arrière-plan du CSS et comprend beaucoup de choses sur CSS3.
- The Principles of Beautiful Web Design, 2e édition de Jason Beaird, soutient que le design est une compétence qui peut être apprise et vous enseigne les principes fondamentaux du design.
- Color Design Workbook: A Real World Guide to Using Color in Graphic Design par AdamsMorioka (éditeur) fournit les informations essentielles nécessaires pour appliquer la couleur de manière créative et efficace au travail de conception.
- Ne Me Fais pas Réfléchir: Une approche de bon Sens de la convivialité du Web, 2e édition de Steve Krug un classique instantané de la convivialité du Web, chargé d’idées et de conseils pratiques.
- Devenir réel: Le moyen le plus intelligent, le plus rapide et le plus simple de créer une application Web réussie par 37 Signaux consiste peut-être à créer des applications Web et non des sites, mais il a une manière si merveilleuse de simplifier les processus Web que je l’ai trouvé si utile.
- Creuser dans WordPress par Chris Coyier & Jeff Starr est fortement recommandé comme le grand livre WordPress. Disponible en version PDF (pratique pour copier du code) ainsi qu’en version physique.
Il y a beaucoup plus de livres que j’aurais pu inclure en particulier sur la théorie du design. Si vous avez des suggestions de livres qui vous ont aidé avec la conception de sites Web, veuillez nous en informer dans les commentaires.
Ce que vous pouvez faire
De nombreux concepteurs soutiennent que l’échec est en fait le meilleur professeur. Alors sortez et concevez des sites Web! Lorsque, comme cela se produira sans aucun doute, vous tomberez sur un mur de briques, vous pouvez utiliser certaines des ressources en ligne ici pour vous aider. Et, quand vous ne pouvez plus regarder l’écran de l’ordinateur, vous pouvez lire un livre à ce sujet!