Ja, es ist durchaus möglich, sich Webdesign beizubringen. Ich habe diese Woche gefragt, wie es den Leuten gelungen ist, die Fähigkeiten zu erwerben, und ich habe versucht, mich daran zu erinnern, was für mich funktioniert hat.
Es gibt drei Möglichkeiten, wie Sie sich Webdesign beibringen können.
- Indem Sie. Menschen lernen, indem sie tatsächlich Websites erstellen.
- Mithilfe von Online-Ressourcen. Jeder findet irgendwann online Antworten darauf, wie man Websites gestaltet.
- Durch Lesen. Dieser hat mich überrascht. Die meisten Designer sagen, dass sie Webdesign teilweise durch das Lesen von Büchern lernen.
Lassen Sie uns also jede dieser Kategorien durchgehen, um herauszufinden, wie Sie sich Webdesign beibringen können.
Lernen von Webdesign durch
Der beste Weg, Webseiten zu verstehen, besteht darin, zu sehen, wie vorhandene Websites zusammengestellt werden, und sie selbst zu erstellen.
Beobachten Sie, wie andere Websites funktionieren
Zu Beginn sind die meisten Webseiten im Internet zumindest teilweise in HTML geschrieben. Um den HTML-Code zu sehen, der diese Seite erstellt, müssen Sie in dem von Ihnen verwendeten Browser „Quelle anzeigen“. Gehen Sie Cmd / Strg-U (für Firefox), gehen Sie Cmd / Strg-Alt / Opt-U (für Chrome), und wenn Sie Internet Explorer verwenden, müssen Sie sich wirklich fragen, ob Webdesign der richtige Karriereweg für Sie ist.
Versuchen Sie, den HTML-Code durchzusehen, um zu sehen, wie die verschiedenen Elemente auf einer Webseite markiert sind. Möglicherweise können Sie bestimmte Tags sofort identifizieren. Zum Beispiel <p> ist für Absatz, <h1,2,3> sind Überschriften, <img> ist für ein Bild usw. Sie werden feststellen, dass die meisten dieser Tags paarweise arbeiten, um den Anfang und das Ende des Markups zu kennzeichnen, zum Beispiel <p>Text here</p> zeigt das Öffnen und Schließen des Absatz-Tags mit dem Schrägstrich (/) vor dem schließenden Tag. Andere Tags funktionieren nicht paarweise, z. B. das image-Tag selbst schließt <img src = "https://robcubbon.com/images/rob.jpg" /> Dies weist den Browser an, ein Bild mit einer bestimmten Webadresse als Quelle anzuzeigen (src).
Eine andere Sache, die Sie möglicherweise an der HTML-Quelle bemerken, ist, dass alle HTML-Seiten eine ähnliche Struktur haben. Sie alle beginnen mit einer <!DOCTYPE> -Deklaration, die angibt, in welcher HTML-Version sie sich befindet, gefolgt von einer <HTML> -Deklaration, gefolgt von der <head> des Dokuments, die ein Container mit verschiedenen Elementen ist, einschließlich Links zu Skripten, Stylesheets, Metainformationen usw. Nach dem <head> folgt das <body>, in dem die Elemente der Webseite markiert sind.
Übung: Wählen Sie den gesamten Quellcode dieser Seite in einem Notizblock (PC) oder TextEdit (Mac) Dokument und speichern Sie es auf Ihrem Computer als „test.html“ oder so. Öffnen Sie diese Datei in einem Browser und sie sollte genau so aussehen wie die Online-Version. Schalten Sie nun Ihre Verbindung zum Internet aus und sehen Sie, wie die Testseite aussieht. Ziemlich anders, was? Versuchen Sie herauszufinden, warum.
Werkzeuge des Handels
Während Sie dies tun, gibt es bestimmte Werkzeuge, die Sie benötigen.
- Mehrere Browser und Smartphones. Testen Sie Ihre eigenen Websites auf verschiedenen Browsern und Telefonen (hier beginnen Sie eine langjährige Hassaffäre mit Internet Explorer).
- Texteditor. Sie können den grundlegenden Editor (PC) oder TextEdit (Mac) oder vielleicht Coda (Mac) oder Dreamweaver verwenden – verwenden Sie Dreamweaver nicht im visuellen Modus, sondern arbeiten Sie einfach am Code.
- Validator. Validieren Sie Ihre Webseiten mit dem HTML-Validator und dem CSS-Validator (verwenden Sie ein Browser-Plugin wie Web Developer für Chrome, um sie schnell aufzurufen).
- Chrome-Entwicklertools und Firebug für Firefox. Diese Tools helfen Ihnen, CSS und JavaScript zu verstehen, was, wenn Sie HTML für schwierig hielten, etwas Verständnis erfordert.
- Grafik- und Bildbearbeitungsprogramme. Im Mittelpunkt des Webdesigns stehen Bildbearbeitungsprogramme wie Photoshop oder Fireworks. Diese sind ziemlich teuer, aber es gibt GIMP plus eine Vielzahl von Online-Bildbearbeitungsprogrammen, wenn Sie gerade erst anfangen.
Erstellen Sie Ihre eigenen statischen HTML-Websites
Während Ihr Verständnis von HTML, CSS und JavaScript wächst, sollten Sie statische HTML-Websites entweder lokal oder auf einem Webserver erstellen. Spielen Sie kontinuierlich mit dem Code, um coole Dinge zu tun. Versuchen Sie, bestimmte Elemente auf anderen Websites neu zu erstellen, indem Sie Teile des Codes kopieren.
Obwohl die Websites, die Sie schließlich erstellen, wahrscheinlich nicht aus HTML-Dateien bestehen, ist es wichtig, dass Sie zuerst verstehen, wie statische HTML-Websites erstellt werden, bevor Sie PHP und / oder Content-Management-Systeme (CMS) zum Erstellen von HTML verwenden können.
Erstellen eigener Websites mit CMSs
Die meisten Websites werden von CMSs erstellt – Software, die HTML-Seiten innerhalb bestimmter Vorlagen erstellen kann. Die besten sind WordPress, Joomla und Drupal, aber es gibt eine Vielzahl von leichteren Open-Source-CMS, mit denen Sie experimentieren können.
Verwenden Sie MAMP (Mac) oder WAMP (Windows) auf Ihrem Computer, um diese Systeme lokal auszuführen, damit Sie ein gutes Verständnis für ihre Funktionsweise erhalten.
Verwenden von Bildeditoren
Sie müssen wissen, wie Sie Photoshop oder ähnliches verwenden. Sie benötigen dies, um Grafiken für die Site zu erstellen und vollständige Grafiken bereitzustellen, wie die Site aussehen wird, wenn sie fertig ist, um den Designprozess zu unterstützen.
Get designing
Natürlich habe ich nicht erwähnt, dass die resultierenden Websites nicht nur validieren, funktionieren, von Suchmaschinen gefunden werden, einem Zweck dienen und vermarktet werden müssen, sondern auch … sie müssen gut aussehen.
Um Ihr künstlerisches Auge zu verbessern, produzieren Sie regelmäßig Arbeiten und versuchen Sie es dann zu verbessern. Skizzieren Sie Designs auf Papier und bearbeiten Sie sie dann in Photoshop oder einem beliebigen Grafikprogramm. Übung wird Ihnen helfen, ein besserer Designer zu werden. Ich werde später weitere Ressourcen empfehlen, die Ihnen bei den Designprinzipien helfen.
Online-Ressourcen
Wenn Leute Antworten wollen, gehen sie ins Internet und „googeln“ oder suchen YouTube. Webdesign ist nicht anders. Es gibt viele Ressourcen, die Ihnen online helfen. In erster Linie gibt es W3 Schools, die Webdesigner als die beste Online-Selbstlernressource bezeichnen, es gibt auch Tizag. Einige Leute empfehlen Lynda.com obwohl ich es nicht persönlich benutzt habe.
Blogs
Es gibt eine Reihe großartiger Design-Blogs. Es gibt große, die Ihnen helfen können, wie SmashingMagazine, WebDesignerDepot, 1stWebDesigner und das Envato Network.
Ich persönlich bekomme mehr von den unabhängigen Web- und Grafikdesignern, die bloggen. Es gibt, jedoch, Lasten, die ich aus im Laufe der Jahre gelernt haben, so sind hier nur ein paar, und ich entschuldige mich für alle ausgezeichneten Blogger, die ich von der Liste weggelassen habe.
- Chris Colyers CSS Tricks ist eine großartig aussehende responsive Website, hat aber auch großartige Webdesign-Informationen und Tricks
- Veerle Pieters hat großartige Photoshop- und Illustrator-Tutorials auf Veerles Blog
- David Airey ist jemand, dem ich auf seinem eigenen gleichnamigen Blog, LogoDesignLove und IdentityDesigned, eine Weile gefolgt bin. David interessiert sich unter anderem für die übergreifende Identität von Organisationen.
- Chris Spooner hat mir viel beigebracht mit Tutorials in seinem Blog bei SpoonGraphics und plus Informationen und Inspiration bei Line25
- Fabio Sassos wunderbar gestaltete Seite Abduzeedo bietet großartige Inspiration und Verrücktheit.
- Nick La N.Design Studio und WebDesignerWall haben einige fantastische Informationen und große Inspiration.
Bitte zögern Sie nicht, Ihre Lieblings-Design-Blogs in den Kommentaren unten hinzuzufügen.
Foren
Wenn Sie Ihren Kopf gegen eine Mauer schlagen, sind Foren großartige Orte, um Antworten zu erhalten. Posten Sie eine Beschreibung Ihres Problems und die Webadresse und sehr oft wird sich jemand mit einer Lösung bei Ihnen melden. Hier sind einige meiner Lieblingsforen.
Ich mag Estetica Design Forum, DesignForums.co.uk , und Designer,s Sprechen. Dort,s Digital Point und Sitepoint für weiter reichende Anfragen, Das WordPress-Forum ist ausgezeichnet und dort,s das Warrior Forum für Internet-Marketing.
Bücher
Viele Webdesigner behaupten, dass gute altmodische physische Bücher ihnen geholfen haben, ihnen Webdesign beizubringen. Hier sind einige meiner Favoriten und einige andere, die mir empfohlen wurden. Die Links sind Amazon.com affiliate-Links.
- Erstellen Sie Ihre eigene Website mit HTML & CSS 3th (third) edition von Ian Lloyd ist ein Sitepoint-Buch, das ich vor Jahren gelesen habe. Es hat mir damals wirklich geholfen, da es sich auf Best Practices für Webdesign konzentriert. Stellen Sie sicher, dass Sie eine aktuelle Ausgabe kaufen (im Moment die dritte Ausgabe, die viel zu HTML5 enthält).
- CSS: The Missing Manual von David Sawyer McFarland enthält Erklärungen, Beispiele und Schritt-für-Schritt-Anleitungen. Dieses Buch ist besonders zu empfehlen, da es Ihnen den Hintergrund zu CSS gibt und viel über CSS3 enthält.
- Die Prinzipien des schönen Webdesigns, 2nd Edition von Jason Beaird, behauptet, dass Design eine Fähigkeit ist, die erlernt werden kann, und lehrt Sie die grundlegenden Prinzipien des Designs.
- Color Design Workbook: A Real World Guide to Using Color in Graphic Design von AdamsMorioka (Herausgeber) bietet die wichtigen Informationen, die notwendig sind, um Farbe kreativ und effektiv auf Designarbeiten anzuwenden.
- Bring mich nicht zum Nachdenken: Ein gesunder Menschenverstand Ansatz zur Web-Usability, 2nd Edition von Steve Krug ein Instant-Klassiker auf Web-Usability, mit Einblicken und praktischen Ratschlägen geladen.
- Getting Real: The smarter, faster, easier way to build a successful web application von 37 Signals kann über die Erstellung von Web-Anwendungen nicht Websites, aber es hat so eine wunderbare Möglichkeit, Web-Prozesse zu vereinfachen, dass ich fand es so eine nützliche Lektüre.
- Digging into WordPress von Chris Coyier & Jeff Starr ist als das großartige WordPress-Buch sehr zu empfehlen. Erhältlich als PDF-Version (praktisch zum Kopieren von Code) sowie als physische Version.
Es gibt viele weitere Bücher, die ich speziell über Designtheorie hätte aufnehmen können. Wenn Sie Vorschläge zu Büchern haben, die Ihnen beim Webdesign geholfen haben, teilen Sie uns diese bitte in den Kommentaren mit.
Was Sie tun können
Viele Designer behaupten, dass das Scheitern tatsächlich der beste Lehrer ist. Also geh raus und gestalte Websites! Wenn Sie, wie zweifellos geschehen wird, auf eine Mauer stoßen, können Sie einige der Online-Ressourcen hier verwenden, um Ihnen zu helfen. Und wenn Sie nicht mehr auf den Computerbildschirm schauen können, können Sie ein Buch darüber lesen!