Wie man Webdesign lernt (in 9 Schritten)

Verstehen Sie die Schlüsselkonzepte des visuellen Designs

Linie

Jeder Buchstabe, Rand und jede Teilung in einem Layout besteht aus Linien, die ihre größere Struktur bilden. Webdesign zu lernen bedeutet, die Anwendungen von Linien zu verstehen, um Ordnung und Ausgewogenheit in einem Layout zu schaffen.

Formen

Die drei Grundformen im visuellen Design sind Quadrate, Kreise und Dreiecke. Quadrate und Rechtecke eignen sich für Inhaltsblöcke, Kreise für Schaltflächen und Dreiecke werden häufig für Symbole verwendet, die eine wichtige Nachricht oder einen Aufruf zum Handeln begleiten. Formen haben auch ein Gefühl der Emotion, mit Quadraten mit Stärke verbunden, Kreise mit Harmonie und Komfort, und Dreiecke mit Bedeutung und Aktion.

Textur

Textur repliziert etwas in der realen Welt. Durch Textur bekommen wir eine Vorstellung davon, ob etwas rau oder glatt ist. Texturen können im gesamten Webdesign gesehen werden. Von papierähnlichen Hintergründen bis hin zu den bunten Strähnen einer Gaußschen Unschärfe sollten Sie sich der verschiedenen Arten von Texturen bewusst sein, die Ihre Designs interessanter machen und ihnen ein Gefühl von Körperlichkeit verleihen können.

Farbe

Um Designs zu erstellen, die die Augen nicht belasten, sollten Sie sich in der Farbtheorie ausbilden. Das Verständnis des Farbkreises, Komplementärfarben, Kontrastfarben und der Emotionen, an die verschiedene Farben gebunden sind, macht Sie zu einem besseren Webdesigner.

Grids

Grids haben ihre Wurzeln in den frühesten Tagen des Grafikdesigns. Sie funktionieren so gut, um Bilder, Texte und andere Elemente in einem Webdesign in Ordnung zu bringen. Erfahren Sie, wie Sie Ihre Weblayouts mithilfe von Rastern strukturieren.

Kennen Sie die Grundlagen von HTML

Die Hypertext Markup Language (HTML) gibt Anweisungen, wie der Inhalt, die Bilder, die Navigation und andere Elemente einer Website im Webbrowser einer Person angezeigt werden. Obwohl Sie kein HTML-Experte sein müssen, ist es dennoch hilfreich, sich mit der Funktionsweise vertraut zu machen, selbst wenn Sie eine visuelle Designplattform wie Webflow verwenden.

HTML-Tags sind die Anweisungen, die ein Browser verwendet, um eine Website zu generieren. Überschriften, Absätze, Links und Bilder werden alle von diesen Tags gesteuert. Sie möchten insbesondere wissen, wie Header-Tags wie H1-, H2- und H3-Tags für die Inhaltshierarchie verwendet werden. Header-Tags wirken sich nicht nur auf die Layoutstruktur aus, sondern auch darauf, wie Webcrawler ein Design klassifizieren und wie es in organischen Suchrankings angezeigt wird.

Um mehr über die grundlegenden Konzepte von HTML zu erfahren (es gibt auch einen Abschnitt über CSS), lesen Sie diese Lektion, die wir in Webflow University zusammengestellt haben.

CSS verstehen

CSS (oder Cascading Style Sheets) bietet Styling und zusätzliche Anweisungen, wie ein HTML-Element angezeigt wird. Dinge wie das Anwenden von Schriftarten, das Hinzufügen von Polstern, das Festlegen der Ausrichtung, das Auswählen von Farben und sogar das Erstellen von Rastern sind über CSS möglich.

Wenn Sie wissen, wie CSS funktioniert, können Sie einzigartig aussehende Websites erstellen und vorhandene Vorlagen anpassen. Lassen Sie uns einige Schlüsselkonzepte von CSS durchgehen.

CSS-Klassen

Eine CSS-Klasse ist eine Liste von Attributen, die beim Styling eines einzelnen Elements zusammenkommen. So etwas wie Body Text könnte die Schriftart, Größe und Farbe alle Teil einer einzigen CSS-Klasse sein.

CSS-Kombinationsklassen

Eine Kombinationsklasse baut auf einer vorhandenen Basisklasse auf. Es erbt alle Attribute wie Größe, Farbe und Ausrichtung, die möglicherweise bereits vorhanden sind. Attribute können dann geändert werden. Combo-Klassen sparen Ihnen Zeit und lassen Sie Variationen einer Klasse einrichten, die Sie überall in einem Webdesign anwenden können.

Beim Erlernen des Webdesigns ist es wichtig zu wissen, wie CSS funktioniert. Wie im Abschnitt über HTML erwähnt, empfehlen wir Ihnen, zur Webflow University zu gehen, um mehr über die Funktionsweise von CSS zu erfahren.

Lernen Sie die Grundlagen von UX kennen

UX ist die Magie, die eine Website zum Leben erweckt und sie von einer statischen Anordnung von Elementen in etwas verwandelt, das sich mit den Emotionen von jemandem beschäftigt, der durch sie scrollt.

Das Farbschema, der Inhalt, die Typografie, das Layout und die Grafik kommen zusammen, um Ihrem Publikum zu dienen. User Experience Design ist über Präzision und evozieren Gefühle. Es bietet jemandem nicht nur eine reibungslose Reise, sondern auch eine Erfahrung, die ihn mit der Entität oder Marke hinter dem Webdesign verbindet.

Hier sind einige UX-Prinzipien, die Sie kennen müssen.

Benutzerpersönlichkeiten

Webdesign bedeutet, Endbenutzer zu verstehen. Sie sollten lernen, wie Sie Benutzerforschung betreiben und Benutzerpersönlichkeiten erstellen. Darüber hinaus müssen Sie wissen, wie Sie diese Informationen verwenden, um ein Design zu erstellen, das für ihre Anforderungen optimiert ist.

Informationsarchitektur

Ohne klare Organisation werden die Menschen verwirrt und hüpfen. Informationsarchitektur und Content Mapping bieten eine Blaupause dafür, wie die Website und jeder Abschnitt zusammenarbeiten, um eine klare Customer Journey zu bieten.

User Flows

Das Konstruieren von User Flows kann ins Spiel kommen, wenn Sie sich zu umfangreicheren Designprojekten hocharbeiten, aber Sie werden in Zukunft besser dran sein, wenn Sie anfangen, darüber nachzudenken und sie für Ihre frühen Designs aufzubauen. User Flows kommunizieren, wie sich Menschen durch ein Design bewegen. Sie helfen Ihnen, die wichtigsten Abschnitte zu priorisieren und sicherzustellen, dass Personen darauf zugreifen können.

Wireframes

Wireframes zeigen an, wo auf einer Webseite Überschriften, Text, Grafiken, Formulare und andere Elemente platziert werden sollen. Selbst wenn Sie ein einfaches einseitiges Webdesign erstellen, erhalten Sie durch die Zuordnung eines Drahtgitters eine solide Anleitung zum Arbeiten. Wenn Sie zu komplizierteren Websites übergehen, sind Wireframes unerlässlich, um ein konsistentes Erlebnis zu schaffen, Layouts zu strukturieren und nichts zu verpassen, was enthalten sein muss.

Prototyping

Prototypen können unterschiedliche Genauigkeitsstufen aufweisen, dienen jedoch als Darstellung eines funktionierenden Designs. Bilder, Interaktionen, Inhalte und andere wichtige Elemente sind vorhanden und replizieren das reale Design. Prototypen werden verwendet, um Feedback zu erhalten und ein Design während des gesamten Prozesses zu optimieren.

Machen Sie sich mit UI vertraut

Eine Benutzeroberfläche ist ein Mechanismus, der ein Stück Technologie in die Tat umsetzt. Ein Türklinke ist eine Benutzeroberfläche. Der Lautstärkeregler an Ihrem Autoradio, mit dem Ihr Lebensgefährte nicht aufhört, herumzuspielen, ist eine Benutzeroberfläche. Und die Tastatur, in die Sie Ihre PIN an einem Geldautomaten eingeben, ist eine Benutzeroberfläche. So wie Schaltflächen und andere Mechanismen in der realen Welt es jemandem ermöglichen, mit Maschinen zu interagieren, ermöglichen die Benutzeroberflächenelemente auf einer Website jemandem, Aktionen in Bewegung zu setzen.

Lassen Sie uns zwei wichtige UI-Prinzipien überprüfen: intuitives Design und Einfachheit.

Erstellen intuitiver Schnittstellen

Die Interaktion und Interaktion mit einer Website sollte konsistent sein und wiederholbaren Mustern folgen. Personen, die auf einer Website landen, sollten sofort die Systeme verstehen, die beim Navigieren vorhanden sind.

UI einfach machen

UI existiert, um die Benutzerfreundlichkeit zu optimieren. Dies bedeutet, dass die Steuerelemente einfach zu bedienen und in ihrer Funktionalität offensichtlich sind. Unabhängig davon, ob Sie die Anzahl der Navigationsoptionen minimieren, den Checkout-Prozess beschleunigen oder andere interaktive Elemente integrieren, die die Barrierefreiheit erhöhen, hilft Ihnen das Verständnis der Benutzeroberfläche dabei, die Interaktion mit einer Website zu optimieren.

Natürlich ist UI ein riesiges Thema, das nicht in wenigen Absätzen erfasst werden kann. Wir empfehlen Ihnen, den Blogbeitrag „10 essential UI (User Interface) Design Tips“ als Einstieg in die Benutzeroberfläche zu lesen.

Verwandte Artikel: UX vs UI: Hauptunterschiede, die jeder Designer kennen sollte

Verstehen Sie die Grundlagen des Erstellens von Layouts

Unsere Augen greifen automatisch auf bestimmte Designmuster zu, was einen einfachen Weg durch ein Webdesign ermöglicht. Wir wissen intuitiv, wo wir suchen müssen, weil wir dieselben Muster immer wieder gesehen haben, als wir unser ganzes Leben lang Medien konsumiert haben. Wenn Sie Designmuster kennen, können Sie Websites erstellen, die einen reibungslosen Ablauf für Inhalt und Grafik bieten. Zwei gängige Weblayoutmuster, die Sie kennen müssen, sind Z-Muster und F-Muster.

Z-Muster

Für Layouts mit einer Wirtschaftlichkeit von Wörtern und Bildern und großzügigen Mengen an negativem Raum, macht das Z-Muster für eine effiziente Möglichkeit, durch eine Website zu kreuzen. Wenn Sie anfangen, darauf zu achten, wo Ihre Augen ein Design durchlaufen, werden Sie sofort erkennen, wenn ein Z-Muster vorhanden ist.

F-Muster

Designs mit hohem Textanteil, wie für eine Online-Publikation oder einen Blog, folgen oft einem eindeutigen F-Muster. Auf der linken Seite des Bildschirms sehen Sie eine Liste von Artikeln oder Posts, und im Hauptteil der Seite sehen Sie Zeilen mit verwandten Informationen. Dieses Muster ist optimiert, um den Menschen alle Informationen zu geben, die sie benötigen, auch wenn sie schnell einen Blick darauf werfen.

Verwandte Artikel: Webseitenlayout: website-Anatomie, die jeder Designer lernen muss

Erfahren Sie mehr über Typografie

Schriftarten können unterschiedliche Töne oder Emotionen vermitteln und die Lesbarkeit beeinträchtigen. Wenn Sie etwas über Webdesign lernen, ist es wichtig zu wissen, wie man Typografie verwendet.

Typografie dient im Webdesign mehreren Zwecken. Erstens dient es dem Zweck, Inhalte lesbar zu machen. Es kann aber auch als Dekoration dienen, und die geschmackvolle Verwendung stilisierter Typografie kann zur Gesamtästhetik beitragen.

Hier sind drei grundlegende typografische Konzepte, die Sie kennen sollten.

Serif

Serifenschriften haben winzige Linien, die als Serifen bekannt sind und jeden Buchstaben zieren. Dieser typografische Stil lässt sich auf den Druck zurückführen.

Sans serif

Wie der Name schon sagt, fehlen serifenlosen Schriften die identifizierenden Linien von Serifenschriften. Diese Schriften finden sich im digitalen Bereich von Websites und Apps.

Display

Display-Schriften werden häufig für Überschriften verwendet und können entweder groß und wirkungsvoll oder aus scharfen, dünnen Linien bestehen. Sie haben in der Regel anspruchsvolle Buchstabenformen und sollen jemandes Aufmerksamkeit erregen.

Verwandte Artikel: Typografisches Design: Schriftstile und Ressourcen für Designer

Setzen Sie Ihr Wissen in die Tat um und bauen Sie etwas

Sie können Tutorials ansehen, Blog-Posts lesen, sich für Online-Kurse anmelden und alle Theorien und Informationen über Webdesign aufnehmen, aber der einzige Weg, Webdesigner zu werden, besteht darin, mit dem Webdesign zu beginnen.

Beginnen Sie mit einem einfachen Projekt. Vielleicht braucht jemand, den Sie kennen, Hilfe bei der Erstellung eines Portfolios oder hat einen Nebenjob, dem jede Art von Webpräsenz fehlt. Bieten Sie an, ihnen etwas kostenlos zu entwerfen.

Ein Blog ist auch ein weiteres großartiges Anfängerprojekt. Dies gibt Ihnen praktische Designerfahrung beim Erlernen der Verwendung von Dingen wie einem CMS und bietet ein Schaufenster für Ihre Schreibfähigkeiten.

Das Erstellen einer Website für ein gefälschtes Unternehmen oder Geschäft ist eine weitere unterhaltsame kreative Übung bei der Entwicklung Ihrer Design-Koteletts. Außerdem können Sie es zu Ihrem Portfolio hinzufügen.

Holen Sie sich einen Mentor

Mentoren sind wertvoll, weil sie dort waren, wo Sie sind — ganz am Anfang — und den Wunsch haben, Ihnen durch die hart verdienten Lektionen zu helfen, die sie gelernt haben. Sie haben einen tiefen Brunnen von Know-how und Wissen. Sie sind eine großartige Ressource, um Feedback zu Ihrer Arbeit zu erhalten und herauszufinden, was Sie richtig machen und was verbessert werden muss.

Stellen Sie bei der Suche nach dem geeigneten Mentor sicher, dass Sie jemanden finden, der die Art von Design macht, die Sie bewundern und der sich auf das spezialisiert hat, was Sie lernen möchten. Mentoren können Ihnen einen klaren Weg aus den Jahren in diesem Bereich geben, so dass Sie nicht durch das Erlernen von Webdesign stolpern müssen.

Kein Code bietet einen einfachen Einstieg in das Webdesign

Es gab eine Zeit, vor nicht allzu langer Zeit, als man ein tiefes Verständnis von HTML und CSS haben musste, um den Code hinter einem Webdesign manuell zu schreiben. Ohne Code-Tools wie Webflow ist es heute möglich, eine Website zusammenzustellen und in kurzer Zeit zu starten. Was Tage oder Wochen gedauert hat, kann jetzt in Stunden passieren.

Natürlich steckt so viel in der Erstellung eines guten Webdesigns. Lernen Sie die Grundlagen hinter visuellem Design, die Grundlagen von UI und UX, und zu wissen, wie das Front-End und Back-End-Funktion werden Sie ein abgerundeter Designer machen.

Egal, ob Sie gerade erst anfangen oder ein Experte sind, Webflow bietet eine intuitive visuelle Plattform, mit der Sie Ihre Kreativität verwirklichen können. Neben einer benutzerfreundlichen Möglichkeit, Websites zu starten, verfügt Webflow über eine ganze Community, die Sie berät und Ihnen hilft, Ihre Fähigkeiten zu verbessern. Wir freuen uns darauf, Sie in unserem Showcase arbeiten zu sehen.