Anfängerleitfaden: So lernen Sie Webdesign zu Hause

Wenn Sie entschlossen sind, Webdesign selbst zu lernen, sind Sie hier richtig.

Es ist wahr, dass Webdesign sehr komplex und entmutigend sein kann, aber mit den Entwicklungen in der Technologie und der Internetdurchdringung ist es zu epischen Proportionen gewachsen. Es ist nicht verwunderlich, dass das Werden eines Webdesigners in der heutigen Generation zu einem beliebten Trend geworden ist.

In diesem Artikel werde ich Sie mit Ressourcen und Tipps durch das Erlernen des Webdesigns führen. Für Anfänger, die diesen Weg einschlagen möchten, können Sie diesen Artikel als Leitfaden verwenden.

Schritt 1: Entscheide dich und mache Pläne

Das Erlernen von Webdesign ist eine langfristige Aufgabe, die voller Herausforderungen steckt. Sie müssen sich ernsthaft herausfordern. Entscheiden Sie sich jetzt und machen Sie Pläne basierend auf den Lernleitfäden, die wir in diesem Artikel vorstellen. Denken Sie daran, dass Sie es selbst schaffen werden, wenn Sie anfangen, Webdesign durch Übung zu lernen. Also sei bereit!

Schritt 2: Grundlegendes Verständnis von Webdesign

„Wie kann ich anfangen, Webdesign zu lernen?“ Das ist die Frage in deinem Kopf. Um Webdesign gründlich zu lernen, sollten Sie die Antworten auf mindestens die folgenden 2 Fragen verstehen:

Was ist Webdesign?

Menschen missverstehen oft die Bedeutung von Webdesign.

Nun, was genau ist Webdesign?

Visual + interaction = Webdesign

Beim Webdesign geht es darum, Probleme zu lösen. Es umfasst alle Aspekte einer Website – die Kunst, Fähigkeiten, Wissenschaft, und Technologie zum Erstellen des Aussehens und der Funktionalität einer Website, sowie die Art und Weise, wie Benutzer mit Webseiten interagieren.

Viele junge Designer missverstehen oft das Konzept des Webdesigns mit dem der Entwicklung.

Denken Sie daran: Beim Webdesign geht es um Design, nicht um Codierung und Front-End- oder Back-End-Entwicklung.

Natürlich ist es besser, wenn Sie einige Programmiersprachen (HTML, CSS, Java usw.) kennen.), aber Sie sollten sich nicht tief in die Front-End- oder Back-End-Entwicklung einarbeiten, wenn Sie ein fokussierter Webdesigner sein möchten. Das ist nicht der Kern des Webdesigns.

Was ist der Webdesign-Prozess?

Webdesign ist keine einfache Aufgabe. Es ist ziemlich herausfordernd und dennoch interessant, aus einer leeren Seite eine vollständige Website zu machen. Wie können Sie es tun?

Sie müssen den Hauptphasen des Webdesignprozesses folgen. Sie sind:

Festlegen eines Ziels

Bestimmen Sie, welche Art von Website Sie entwerfen möchten. Ist es für E-Commerce, ein Unternehmen, neue Produktwerbung oder ein Aktivitätsprojekt?

Wenn Sie keine Ahnung haben, dann beginnen Sie mit einem Blog. Für neue Lernende ist das Erstellen eines Blogs eine bessere Wahl als das Erstellen anderer Arten aufwändiger Websites.

Erstellen eines Zeitplans

Erstellen Sie eine Zeitleiste für die Gestaltung der Seiten. Weisen Sie allen am Webdesign-Projekt beteiligten Aufgaben zu.

Erstellen einer Sitemap und Wireframing

Brainstorming. Verwandeln Sie Ideen mit einem Stift oder Wireframing-Werkzeugen in ein Drahtmodell. Sie müssen Ihre Gedanken in etwas Greifbares übersetzen, damit Sie sie frühzeitig validieren können.

Erstellen von Inhalten

Fügen Sie Inhalte mit Designelementen, visuellen Elementen, Kopien und Interaktionen hinzu. Dies ist die Phase, in der Sie alle Ihre Design- und Entwicklungsfähigkeiten einsetzen. In dieser Phase wandeln Sie eine leere Seite in eine fertige Website um.

Testen

Testen Sie Ihre Website und sammeln Sie nützliches Feedback. Tun Sie dies, bis Sie die Qualität der Benutzererfahrung maximieren, und seien Sie dann startbereit.

Stellen Sie Ihre Website den Besuchern zur Verfügung und verbessern Sie sie basierend auf dem gesammelten Feedback.

In diesem 43-minütigen Webdesign-Kurs erhalten Sie ein umfassenderes Verständnis des Webdesign-Prozesses.

Schritt 3: Beginnen Sie mit dem Lernen

Sobald Sie sich eingerichtet und die Grundlagen des Website-Designs verstanden haben, können Sie praktische Lernressourcen und Tipps durchgehen.

Webdesign umfasst sowohl das visuelle Erscheinungsbild als auch das funktionale Design. Das bedeutet, dass Sie lernen müssen 2 Hauptsachen:

Wie lässt man eine Website gut aussehen?
Wie stellen Sie sicher, dass eine Website gut funktioniert?

Sie müssen lernen, wie Sie Schnittstellen entwerfen (Typografie, Navigation, Bilder, Raum, Animationen, Farben usw.), wie man sie in einer Webentwicklungssprache (HTML, CSS, Python, SQL, Ruby oder JavaScript) codiert und Ihre Website für Suchmaschinen optimiert.

Lesen Sie Webdesign-Lernbücher

Eine der besten Möglichkeiten, Webdesign zu lernen, ist das Lesen von Büchern. Hier sind 5 der besten Webdesign-Bücher, die für diejenigen nützlich sind, die Webdesign selbst lernen möchten.

HTML und CSS: Entwerfen und Erstellen von Websites
Webdesign lernen: Ein Leitfaden für Anfänger
Bring mich nicht zum Nachdenken: Ein gesunder Menschenverstand Ansatz zur Web-Usability
Webdesign lernen
Entwerfen mit Webstandards

Lesen Sie Webdesign-Blogs

Wenn Sie kein Bücherwurm sind und das Lesen als mühsame Aufgabe empfinden, können Sie einigen der besten Webdesign-Blogs folgen, um Ihr Gehirn zu ernähren. Verwenden Sie Blogs als Alternative und abonnieren Sie Ihre Favoriten, um nichts zu verpassen.

Smashing Magazin
Mockplus Blog
Webdesigner Depot
Webdesignledger
WEBDESIGN BIBLIOTHEK
Hacking UI
1stwebdesigner
WEBAPPERS

Lernen mit PDF-Inhalten

Einige wirklich nützliche Inhalte stehen im PDF-Format zum kostenlosen Download zur Verfügung. Sie können es verwenden, um Webdesign Schritt für Schritt zu lernen. Dies sind einige Beispiele, die Ihre Zeit wert sind.

Webdesign – Handbuch
Lernen von Webdesign Dritte Ausgabe – Semantic Scholar
Webdesign 101 – MIT
Erstellen Sie Ihre eigene Website mit HTML richtig & CSS – X-Dateien
Eine vollständige Anleitung zum Webdesign.pdf – Online Christian Library

Lernen Sie von Profis

Folgen Sie Webdesignern, von denen Sie lernen möchten, auf Social-Media-Sites wie Twitter, Dribbble, Behance, Github und anderen Plattformen, auf denen sie aktiv sind. Lesen Sie ihre Beiträge, klicken Sie auf den Like-Button für diejenigen, die Sie schätzen, und kommentieren Sie, wenn Sie einen Punkt hinzufügen oder eine Frage stellen möchten . Wenn Sie Glück haben, finden Sie einen Mentor in einer Online-Community oder -Gruppe. Aber störe sie nicht und nimm ihre Hilfe als selbstverständlich hin.

Webdesigner, denen Sie folgen können:

Ethan Marcotte
Chris Coyier
Ethan Marcotte
Jeffrey Zeldman
Luke Wroblewski

Lernen Sie von Webdesign-Video-Tutorials

Es sind viele Youtube-Videos online verfügbar. Reduzieren Sie Ihre Zeit mit lustigen Dingen und verwenden Sie Youtube, um Webdesign zu lernen. Hier empfehle ich 5 der beliebtesten Video-Tutorials. Viel Spaß beim Anschauen.

Ein Webdesign-Tutorial für Anfänger für 2018 – Teil 1 von 2

Web Development Tutorial für Anfänger 2018 / 2019 – So erstellen Sie eine Website

Website Design Tutorial für Anfänger

HTML CSS Tutorial für Anfänger – Web-Entwicklung Tutorials für Anfänger

Die kompletten HTML- und CSS-Webdesign-Tutorials für Anfänger

Lernen Sie von Online-Kursen

Kostenlose Online-Kurse könnten einer von die besten Ressourcen. Sie können auch mit anderen Lernenden diskutieren.

Class Central

Lernen Sie Webentwicklung mit kostenlosen Online-Kursen und MOOCs von der Johns Hopkins University, der University of Michigan, der KU Leuven University, der University of California, Berkeley und anderen Top-Universitäten auf der ganzen Welt.

Coursera

Eine großartige Website für Anfänger, um Webdesign zu lernen. Sie können einen Kurs von Ihrer gewünschten Universität auswählen und sehen, wie viele Personen ihn lernen. Mit den dargestellten Daten haben Sie bei der Auswahl eines Kurses viele Möglichkeiten.

Es listet viele Ressourcen auf, um Ihre Designfähigkeiten auszubauen und Ihre Karriere voranzutreiben. Sie können Themen Schritt für Schritt mit unterschiedlichen Schwierigkeitsgraden lernen.

W3Schools

Nützlich zum Erlernen grundlegender Programmiersprachen wie HTML und CSS.

Google Code University

Erfahren Sie, wie Sie von Google-Entwicklern programmieren.

Code Avengers

Ich mag diese Lernwebsite besonders, weil sie wie ein großes Abenteuer ist, mit dem Sie an Coding Challenge-Programmen und der Fehlersuche teilnehmen können.

Weitere Plätze für Webdesign Online-Kurse：

Baumhaus
Lynda
Udemy
Coursera
Webdesign.tutsplus

HTML-Grundlagen und CSS lernen

Sie fragen sich vielleicht, warum ich HTML lernen soll? Im Allgemeinen ist die Verwendung einer Webdesign-App wie Dreamweaver in Ordnung. Derzeit basieren die meisten Websites jedoch auf HTML5, und CSS ist die Haut einer Website. Modernes Website-Design ist ohne CSS nicht möglich. Das Erlernen von HTML-Grundlagen und CSS hilft Ihnen beim Fortschritt im Webdesign.

Ressourcen zum Erlernen von HTML und CSS：

30 Tage, um HTML und CSS zu lernen
Ein Leitfaden für Anfänger zu HTML & CSS
Fürchte das Internet nicht
8 Beste kostenlose Responsive CSS-Website-Vorlagen

Sie können auch der CodePen-Community beitreten. Dies ist eine Open-Source-Community, mit der Sie Code-Snippets bearbeiten und mit anderen teilen können.

Learn JavaScript

Neben HTML und CSS ist JavaScript eine wichtige Sprache des Webs, die Sie lernen können. Es ist ein Tool, mit dem Sie erweiterte Benutzerinteraktionen wie Parallaxeneffekte und leistungsstarke Webanwendungen erstellen können.

Ressourcen zum Erlernen von Javascript:

32 der besten Orte, um JavaScript für Anfänger in der Webentwicklung zu lernen
Top 37 JavaScript-Bücher für Anfänger und erfahrene Programmierer in 2019

Erfahren Sie mehr über Webdesign-Elemente

Wenn Sie gut beobachten können, werden Sie feststellen, dass die meisten ansprechenden modernen Websites eine gute Anordnung der grundlegenden Website-Elemente haben, wie zum Beispiel:

1） Typografie

Typografie ist der Schlüssel zu exzellentem Webdesign. Es gewährleistet die Lesbarkeit von Inhalten und beeinflusst die Benutzererfahrung direkt. Typografie ist ein wichtiger Aspekt aller modernen Websites, da sie ihren Besuchern sowohl Ästhetik als auch Funktionalität bietet.

Ressourcen zum Erlernen der Webtypografie:

17 Beste Typografie-Design-Websites & Tutorials
30 kreative Websites mit wunderschönen Typografie & Farbschemata

2） Animation und Transformationen

Übergänge und Transformationen bringen den Besuchern Ihrer Website verbesserte Benutzerinteraktionen. Eine der besten Möglichkeiten, einfache Animationen zu erstellen, sind CSS-Übergänge und -Transformationen. Darüber hinaus sind Parallaxe-Scroll-Effekte und horizontaler Scroll eine gute Wahl für Websites.

3）Farbschema

Die Farbkombinationen einer Website spiegeln die ästhetischen Vorlieben / den Stil eines Webdesigners wider und beeinflussen direkt die Wahrnehmung des Betrachters. Sie müssen lernen, wie Sie Farbe im UI-Design mit Bedacht verwenden, um eine perfekte UI-Oberfläche zu erstellen.

4）Schriften

Personalisierte Schriften können Spaß machen oder ausdrucksstark sein, sind aber nicht immer praktisch. Wenn Sie möchten, dass eine Website lesbar und professionell ist, wählen Sie die am besten geeignete Schriftart dafür. Überprüfen Sie 20 der besten Google Web Fonts für exzellentes Webdesign. Sie sind kostenlos zu benutzen!

5）Layout

Web-Layout-Design konzentriert sich auf die Schnittstelle zwischen Technologie und Kunst. Web-Layout-Design bezieht sich auf die Kombination von visuellen Elementen wie Text und Bildern, um eine Seite schön und einfach zu navigieren aussehen zu lassen. Es ist eine wichtige Form der visuellen Kommunikation und ein integraler Bestandteil des Webdesigns. Hier sind 9 der besten Website-Layout-Beispiele und Ideen.

6）Grafiken

Bilder vermitteln den Menschen einen visuellen Eindruck, der intensiver ist als Text. Sie können die Chancen erhöhen, die Aufmerksamkeit der Benutzer auf sich zu ziehen.

7）Responsive Design

Responsive Webdesign ist eine Sammlung von Techniken zum Erstellen von Websites, die auf mehreren Bildschirmgrößen funktionieren. Lernen Sie es mit diesem 47-minütigen CSS-Kurs.

Lernen Sie die Grundlagen von Wireframing / Prototyping

Wireframing / Prototyping ist ein wichtiger Schritt, um die Grundlage für Ihre Website im gesamten Website-Design- und Entwicklungsprozess zu legen. Sie können ein Brainstorming durchführen, eine Blaupause erstellen und sich ein klares Bild von der Struktur der Site machen.

Verwechseln Sie die verschiedenen Begriffe nicht. Gehen Sie die grundlegenden UI / UX-Designkonzepte durch: Unterschiede zwischen Drahtmodell, Prototyp und Modell

Lernen Sie Webdesign-Tools

Photoshop – UI-Design-Tool

Mit ihm können Fotos, Illustrationen, 3D-Grafiken, Designwebsites und mobile Apps erstellt und verbessert werden. Sie können lernen, wie man durch eine der 22 besten kostenlosen Schritt für Schritt Adobe Photoshop Tutorials für Anfänger verwenden.

Dreamweaver – Webentwicklungstool

Es kann verwendet werden, um dynamische Webseiten für mehrere Plattformen und Browser zu erstellen. „Mit Dreamweaver können Benutzer Websites sowie mobile Inhalte entwerfen, codieren und verwalten. Dreamweaver ist eine integrierte Entwicklungsumgebung (IDE).“ (Wikipedia). Beginnen Sie mit dem Anfängerleitfaden für Dreamweaver.

Mockplus – Prototyping-Tool

Mockplus ist eines der besten Prototyping-Tools für Webdesigner, um ein interaktives Web-Mockup zu erstellen. Sie können Komponenten per Drag & Drop erstellen, um eine Website zu erstellen, und eine Vorschau in HTML oder anderen Formaten anzeigen. Sie benötigen nur 10 Minuten, um kostenlos mit dem Prototyping zu beginnen.

Lernen mit einem Website-Builder

Wenn Sie mit einem Website-Builder beginnen, können Sie schnell die bewährten Methoden zum Erstellen und Entwerfen von Websites verstehen. Mit den vorgefertigten Vorlagen und UI-Kits können Sie einfach Elemente anpassen oder Codeausschnitte hinzufügen, um eine Website zu erstellen, die die Besucher bewundern.

Website-Builder, können Sie versuchen:

Webhost Bewertung
Wix
ConstantContact
SITE123
Jimdo
WordPress

Lerne SEO

Es ist gut, einen SEO-Spezialisten zu haben, der sich mit dem Suchmaschinen-Zeug befasst. Das Design ist jedoch eng mit SEO verbunden, da der Inhalt Ihrer Website von Suchmaschinen gelesen wird und eine Rolle beim Ranking spielt. Wenn Sie eine SEO-optimierte Website entwerfen möchten, ist es ein Muss, die Grundlagen von SEO zu kennen. Zumindest sollten Sie über Meta-Beschreibungen auf Seiten und Elementen Bescheid wissen.

Designtrends lernen

Designtrends ändern sich schnell. Sie müssen sich der neuesten Designtrends und Webentwicklungstechnologien bewusst sein, um eine moderne Website zu entwerfen. Sie können einfach die 10 wichtigsten Webdesign-Trends und -Beispiele im Jahr 2019 durchgehen, um sich inspirieren zu lassen.

Schritt 4: Beginnen Sie mit einem Wireframe

Starten Sie den Website-Designprozess mit einem Wireframe. Wireframing hilft Webdesignern beim Brainstorming und der frühen Validierung ihrer Gedanken. Starten Sie das Wireframing mit den 10 praktischen Tipps zum Skizzieren Ihrer Wireframes.

Schritt 5: Verwenden Sie das, was Sie gelernt haben, um eine Website zu entwerfen

Jetzt testen Sie, was Sie in Schritt 3 gelernt haben. Sie müssen Webdesign lernen, indem Sie es tun. Dann wirst du wissen, was du verstehst und was nicht. Dann lerne weiter und mach weiter.

Schritt 6: Um Feedback bitten und Verbesserungen vornehmen

Wenn Sie einen Blog oder eine andere Website erstellt haben, sollten Sie Personen dazu einladen. Versuchen Sie, so viel Feedback wie möglich zu erhalten, um Verbesserungen vorzunehmen.

FAQ zum Lernen von Webdesign：

Wie lange dauert es, Webdesign zu lernen?

Webdesign Lernen ist ein kontinuierlicher Prozess, aber es kann in Monaten gelernt werden. Normalerweise dauert es 5 Monate, um HTML, CSS und die Grundlagen von JavaScript zu erlernen. Sie müssen auch Zeit für Design-Tools wie Photoshop, Sketch und Mockplus aufwenden.

Darüber hinaus sollten Sie Webstandards, Designprinzipien, UX / UI-Design, browserübergreifende Kompatibilität und Reaktionsfähigkeit verstehen. Das Erlernen all dieser Dinge dauert 3 bis 4 Monate.

Und das Wichtigste ist, dass Sie nach all diesen Lektionen gerade dabei sind, in das Feld des Webdesigns einzusteigen. Das Design ändert sich, die Technologie ändert sich, so dass Sie kontinuierlich lernen müssen.

Kann ich Webdesigner ohne Abschluss werden?

Sie können Webdesigner ohne Abschluss werden. Um ein Webdesigner zu sein, ist ein Abschluss kein Muss, was Sie haben müssen, ist ein Interesse an Programmierung, Kenntnisse des visuellen Designs und Codierung in einer Sprache der Web-Entwicklung, sowie andere Fähigkeiten im Web-Design. Aber ein Abschluss kann Ihre Chancen erhöhen, in den meisten Fällen eingestellt zu werden.

Was kann ich nach einem Webdesign-Kurs tun?

Nachdem Sie einen Webdesign-Kurs abgeschlossen haben, können Sie ein Live-Projekt aufnehmen, dann in einer Webdesign-Firma eingestellt werden oder Freiberufler sein und selbst nach Projekten und Kunden suchen.

Hat Webdesign eine Zukunft?

Wir leben in einer digitalen Welt voller Websites. Die Zukunft ist vielversprechend.

Laut dem Gehaltsleitfaden der Creative Group 2019 ist Front-End-Webentwickler neben UX-Designern, User Experience-Forschern, Textern usw. einer der bestbezahlten Jobs im Kreativ- und Marketingbereich. Laut Glassdoor werden Webentwickler zwischen $ 41.6k-78.3k pro Jahr bezahlt und laut PayScale werden ihnen $ 16.4k- 34.6k pro Jahr angeboten. Das durchschnittliche Gehalt eines Webdesigners liegt bei 49.693 US-Dollar.

Ist Webdesign einfach?

Am Anfang mag es einfach erscheinen, weil Sie die Grundlagen von HTML & CSS in wenigen Monaten erlernen können. Aber wenn Sie in dieser Branche Fortschritte machen, wird es für Sie möglicherweise schwieriger. Sie müssen ständig neue Technologien erlernen, um mit allen Änderungen Schritt zu halten. Wenn Sie jedoch daran interessiert sind, Websites und Webanwendungen zu erstellen, ist das Webdesign möglicherweise einfach für Sie.

Fazit

Wenn Sie selbst Webdesign lernen möchten, finden Sie in den obigen Informationen alles, was Sie zum Starten benötigen. Verschwenden Sie keine Zeit mehr auf Facebook oder Twitter, um „nach Antworten zu suchen“. Obwohl Sie auf diesen Plattformen eine Design-Community aufbauen können, können Sie kein Webdesigner sein, indem Sie ziellos Zeit verbringen. Also, hocke dich hin und fang an zu lernen. Gib niemals auf zu lernen und viel Glück für dich!