Webdesign ist eine entscheidende Komponente des Entwicklungsprozesses.
Wenn Sie neu im Webdesign sind, ist der schwierigste Teil zu wissen, worauf Sie sich zuerst konzentrieren sollten. Diese Webdesign-Tipps für Einsteiger:innen behandeln die Bausteine, die eine Website ausgefeilt wirken lassen: Planung rund um echten Content, klare Navigation, UX- und UI-Grundlagen, und ein paar Design-Prinzipien, die Sie auf jeder Seite wiederverwenden können.
Sie brauchen keinen perfekten Geschmack am ersten Tag – Sie brauchen einen wiederholbaren Prozess und ein paar verlässliche Checks.
Checkliste für Webdesign-Tipps für Einsteiger:innen
Diese kurze Checkliste destilliert den Rest des Leitfadens auf sieben Schritte, die Sie auf jedes neue Projekt anwenden können. Überfliegen Sie sie jetzt, und kommen Sie zu jedem Punkt zurück, während Sie gestalten.
- Definieren Sie den Zweck der Website, die Zielgruppe, und eine einzige Erfolgskennzahl.
- Sammeln oder entwerfen Sie echten Content, bevor Sie Ihr Design-Tool öffnen.
- Kartieren Sie eine einfache Seitenhierarchie und erstellen Sie ein Wireframe der primären Nutzerflüsse.
- Beginnen Sie mit einer sauberen, responsiven Vorlage als strukturelle Basis.
- Begrenzen Sie die Farbpalette auf zwei oder drei zugängliche Farbtöne mit ausreichendem Kontrast.
- Wählen Sie zwei gut lesbare Schriftfamilien und wenden Sie konsistente Schriftgrößen-Skalen an.
- Testen Sie auf mehreren Geräten, fügen Sie beschreibenden Alt-Text hinzu, und sammeln Sie Feedback von mindestens fünf Nutzer:innen.
Wählen Sie etwas Grundlegendes für Ihr erstes Website-Design
Das scheint wie eine Selbstverständlichkeit, oder? Doch manchmal können wir zu ambitioniert werden und am Ende entmutigt sein. Für Ihr erstes Projekt ist es eine gute Idee, etwas Einfaches und Unterhaltsames zu wählen. Eine E-Commerce-Website ist komplizierter und wäre besser anzugehen, sobald Sie mehr Erfahrung haben.
Ein Blog ist ein großartiger Startpunkt. Es wird eine gute Design-Übung sein und Sie werden lernen, wie ein Content-Management-System (CMS) funktioniert, was wichtig zu wissen ist für zukünftige Website-Designs. Am besten – Sie müssen nicht von Grund auf beginnen. Es gibt viele Blog-Vorlagen, die es einfach machen, eine zusammenzustellen.
Vorlagen sind ein wertvolles Lernwerkzeug. Zu beobachten, wie HTML-, CSS-, und JavaScript-Elemente gestylt werden und zusammenkommen, wird Ihnen tiefere Einblicke geben, was ein Design funktionieren lässt. Sie können Vorlagen als Fundament nutzen, um Änderungen und Anpassungen vorzunehmen.
Vielleicht möchten Sie keinen Blog starten – versuchen Sie, aus Ihren kreativen Bestrebungen oder Hobbys zu schöpfen. Wie wäre es, eine Vitrine für Ihre Fotografie-Fähigkeiten oder Ihre Sammlung von Kurzgeschichten zu bauen? Ein Design zu erstellen, das eine Ihrer Leidenschaften zeigt, macht ein angenehmes erstes Projekt aus.
Finden Sie Inspiration von anderen Designer:innen
Sie sind zweifellos auf Websites gestoßen, die Sie mit ihrem atemberaubenden Design beeindruckt haben.
Erstellen Sie ein Inspirationsdokument mit Links zu Websites, die Sie lieben, oder speichern Sie sie als Lesezeichen, während Sie weitermachen. Pinterest ist ein großartiger Ort, um großartiges Website-Design zu finden – Sie können Illustrationen, Buchcover, Poster, Blogs, und andere Arten von Design-Arbeit als Referenz finden und pinnen. Designer:innen nutzen den Begriff „Mood Board" für diese Sammlungen. Mood Boards sind eine schnelle Referenzressource, wenn Sie feststecken. Was Sie werden.
Neben den Entdeckungen, die Sie selbst machen, gibt es einige kuratierte Sammlungen, die Sie sich ansehen sollten.
- Awwwards hat immer neue und frische Arbeiten und eine Vielzahl thematischer Sammlungen
- Behance ist eine fantastische Zusammenstellung von Website-Design-Arbeit, bei der der Fokus auf Qualität und Kreativität liegt
- Dribbble fokussiert sich auf individuelle Designer:innen und bietet ein Forum, um Feedback zu erhalten und mit anderen über deren Arbeit zu kommunizieren
Und natürlich schauen Sie bei Made in Webflow vorbei, um die Vielfalt zu sehen, wie Menschen unsere Design-Plattform nutzen. Es gibt so viel coolen Content zu entdecken und so viele Vorlagen, die zum Klonen als Ihre eigenen verfügbar sind.
Suchen Sie außerhalb des Webs nach Inspirationsquellen
Webdesign wird von einer visuellen Sprache geprägt, die überall zu finden ist, wie das Cover eines Graphic Novels oder der digitale Kiosk bei Ihrer Bank. Entwickeln Sie ein Auge für das Erkennen guten Designs und beginnen Sie zu analysieren, warum etwas funktioniert oder nicht, egal welches Medium.
Achten Sie auf Typografie
Wir lesen oft, ohne uns über Schriftarten bewusst zu sein. Achten Sie auf den Effekt, den die Schrift hat, während Sie Content konsumieren. Ist diese Schriftart auf der Speisekarte lesbar? Was macht dieses handgeschriebene Schild für das lokale Geschäft so gut funktionierend? Buchstaben sind überall. Machen Sie sich Notizen zu sowohl guten als auch schlechten Nutzungen von Typografie.
Typewolf ist eine ausgezeichnete Ressource, um bei beliebten Schriftarten auf dem Laufenden zu bleiben. Es hat viele Listen zu erkunden, eine hervorgehobene Website des Tages, und Lookbooks mit spektakulären Schriftkombinationen. Es ist hilfreich, tatsächliche Beispiele von Typografie in Nutzung zu sehen, und Websites wie Typewolf sind ein großartiger Ort, um deren praktische Anwendungen zu sehen. Sich mit verschiedenen Schriftarten vertraut zu machen, wird Ihnen helfen, die richtige Schrift für Ihr erstes Website-Design auszuwählen.
Lassen Sie sich von den schönen Künsten beeinflussen
Ach, haben wir erwähnt, dass es eine ganze Geschichte der Kunst gibt, aus der man schöpfen kann? So viele Bewegungen und Künstler:innen prägen immer noch die Arbeit heutiger Kreativer – besonders Webdesigner:innen. Schlendern Sie durch unseren Beitrag zu Webdesign und Kunstgeschichte, um viele monumentale künstlerische Errungenschaften zu entdecken. Nicht nur ist er voller wertvoller Informationen, er ist auch ein ausgezeichnetes Beispiel dafür, wie Content und Kunstfertigkeit zusammenkommen können, um eine Geschichte zu erzählen.
Recherchieren Sie verschiedene Design-Arten
Es gibt so viele Design-Disziplinen, mit denen man sich vertraut machen kann. Wissen über Produktdesign, Illustration, und sogar Branding kann Ihre kreativen Sinne weiter entwickeln.
Für Inspiration, die über Webdesign hinausgeht, bietet Abduzeedo brillante Beispiele. Ob es Poster-Kunst, Gepäck, oder Möbel ist, Sie werden fantastische Beispiele richtig gemachten Designs sehen. Seien Sie offen für verschiedene Arten von Design und suchen Sie aktiv nach Inspiration. Je mehr Wissen Sie haben, desto einfacher wird es sein, Ihre erste Website zu gestalten. Bildung informiert Intuition.
Haben Sie Content bereit, bevor Sie beginnen
Content an erste Stelle zu setzen bedeutet, Content bereit zu haben, mit dem Sie arbeiten können, bevor Sie beginnen, Ihre erste Website zu gestalten.
Er muss nicht perfekt sein. Sie können später immer bearbeiten und für Google SEO (Suchmaschinenoptimierung) optimieren. Doch mindestens einen Rohentwurf davon zu haben, was live gehen wird, wird helfen sicherzustellen, dass das Design so angelegt ist, ihn aufzunehmen. Mit echtem Content zu gestalten, gibt Ihnen eine bessere Vorstellung davon, wie die Website aussehen und funktionieren wird. Es gibt Ihnen außerdem die Gelegenheit, früher im Design-Prozess Änderungen vorzunehmen.
Für Blogs brauchen Sie einen Beitrag, der bereit ist, im CMS getestet zu werden. Ein paar Beiträge geschrieben zu haben, bevor Sie starten, erspart Ihnen das nachträgliche Hektisch-etwas-schreiben-Müssen.
Halten Sie Ihr Design einfach und intuitiv
Ob es das Schreiben, die Navigation, oder CTAs sind, niemand möchte mit Ihrem Design zu kämpfen haben.
Ihr Design-Ansatz sollte in Einfachheit und Ordnung verwurzelt sein. Logik sollte jemanden mit Leichtigkeit durch die Website führen. Und da wir über die Menschen sprechen, die mit dem interagieren werden, was Sie erschaffen haben, ist dies ein guter Ort, um UX einzuführen.
Verstehen Sie die Grundlagen der Nutzererfahrung (UX)
Eine Website ist mehr als nur schwebender Text im Raum. Das Farbschema, der Content, die Typografie, das Layout, und die Bildsprache kommen alle zusammen, um Ihre Zielgruppe zu bedienen und Emotionen zu wecken. Jemand, der durch den digitalen Raum wandert, den Sie erschaffen haben, sollte einen klaren Pfad frei von Hindernissen haben.
UX konzentriert sich darauf, Ihre Zielgruppe zu verstehen. Was suchen sie – und wie wird Ihr Design es einfach machen, es zu finden? UX geht darum, sich in die Köpfe Ihrer Zielgruppe zu versetzen und Ihr Design durch ihre Augen zu sehen.
Wenn Sie Ihre erste Website bauen, behalten Sie diese leitenden UX-Prinzipien im Kopf:
- Machen Sie Dinge einfach und intuitiv
- Kommunizieren Sie Konzepte in einer logischen Abfolge
- Erfüllen Sie die Bedürfnisse Ihrer Zielgruppe und widerstehen Sie der Versuchung, Ihre Fähigkeiten zulasten der Benutzerfreundlichkeit zu präsentieren
Etwas über Ihre Zielgruppe zu lernen, wird Ihnen helfen, ein Design zu erschaffen, das auf ihre Wünsche und Bedürfnisse zugeschnitten ist. Schauen Sie sich unseren Einsteiger:innen-Leitfaden zur Nutzerforschung für weitere Einblicke an, wie das geht.
Verstehen Sie die Grundlagen der Nutzeroberfläche (UI)
Wenn Sie neu im Webdesign sind, könnten Sie über den Unterschied zwischen UI und UX verwirrt sein. Die meisten von uns waren es. Wissen Sie dies – sie sind zwei distinkte Konzepte.
Während sich UX mit dem Gesamtgefühl eines Designs beschäftigt, geht es bei UI um die Details. Wären Sie in einem Aufzug, wäre UI die Größe und Anordnung der Stockwerktasten, während UX die Farben, Texturen, und anderen Innenausstattungsentscheidungen des Aufzugsraums umfassen würde. Bei UI geht es darum, jemandem die Werkzeuge zu geben, die er/sie braucht, um Ihre Website ohne Komplikationen zu erleben.
Wenn Sie Ihre erste Website konstruieren, behalten Sie diese UI-Prinzipien im Kopf:
- Die Funktionalität interaktiver Elemente sollte offensichtlich sein
- Einheitlichkeit muss die Benutzerfreundlichkeit leiten – Aktionen sollten logischen Mustern folgen
- Design-Entscheidungen sollten mit einem klaren Zweck getroffen werden
Schauen Sie sich unsere grundlegenden UI-Design-Tipps für einen tieferen Einblick in UI an.
Gestalten Sie für Mobile und Barrierefreiheit
Über die Hälfte des Web-Traffics kommt jetzt von Handys, und Barrierefreiheit ist nicht optional. Bauen Sie beide Anliegen von Anfang an in Ihren Prozess ein, damit jede/r Besucher:in eine nutzbare, angenehme Erfahrung erhält.
Gewohnheiten für responsive Layouts
Beginnen Sie mit einem flexiblen Raster, fügen Sie logische Breakpoints hinzu, und prüfen Sie Designs auf tatsächlichen Geräten. Flexbox, CSS-Grid, und prozentbasierte Breiten halten Content fließend, während Bildschirme schrumpfen oder wachsen.
Lesbare Schrift & starker Kontrast
Nutzen Sie eine Basis-Schriftgröße von mindestens 16 px. Kombinieren Sie das mit Farbkombinationen, die WCAG-AA-Kontrast bestehen (4,5 : 1 für Fließtext), damit Text lesbar bleibt bei heller Sonne, im Dark Mode, und überall dazwischen.
Nützlicher Alt-Text
Beschreiben Sie, was jedes Bild zeigt und warum es für den umgebenden Content wichtig ist. Guter Alt-Text hilft Screenreader-Nutzer:innen, Kontext zu verstehen, und steigert SEO, indem er Suchmaschinen mehr Hinweise gibt.
Design-Prinzipien für Einsteiger:innen
Effektives Design wird von bestimmten Regeln geleitet, und es ist wichtig, wesentliche Webdesign-Prinzipien zu verstehen, bevor Sie beginnen. Es gibt Standardpraktiken, die den Prozess vereinfachen und zu einem ausgefeilteren Endprodukt führen.
Layout
Wenn Sie Websites gestalten und bauen möchten, ist das Verstehen guten Layouts entscheidend. Wir schlagen vor, die Dinge minimal zu halten und nur mit ein paar Elementen zu arbeiten, um sich auf die perfekte Platzierung zu konzentrieren.
Wenn Sie erstmals mit dem Gestalten beginnen, denken Sie an Raster. Raster richten Elemente, wie Div-Blöcke und Bilder auf einer Webseite, auf eine Weise aus, die Ordnung schafft.
Die Struktur eines Layouts sollte einer visuellen Hierarchie folgen. Was sind die wichtigen Ideen, die Menschen sehen sollen, und in welcher Reihenfolge? Visuelle Hierarchie muss den häufigen Mustern folgen, die Menschen beim Lesen nutzen. Es gibt zwei Pfade, denen die Augen der Menschen im Web generell folgen: das F-förmige Scan-Muster und das Z-Muster. Sich mit der Funktionsweise dieser Muster vertraut zu machen, wird Ihnen helfen, Ihren eigenen Content zu organisieren.
Das F-Muster ist häufiger für Designs mit dichten Content-Blöcken. Die Augen der Menschen werden die linke Seite eines Layouts nach unten scannen, bis etwas ihre Aufmerksamkeit erregt, und dann von links nach rechts lesen. Stellen Sie sich vor, Sie schauen sich die Speisekarte in einem Restaurant an – Sie könnten die fettgedruckten Namen der Gerichte links ausgerichtet überspringen, bis Sie zu etwas kommen, das Sie packt, was Sie dazu veranlasst, die begleitenden Details zu lesen, die dieses spezifische Gericht erklären.
Die meisten Menschen werden etwas wie einen Blogbeitrag in diesem F-Muster durchlesen. Mit linksbündigem Text und Aufzählungssätzen nutzt Nelson Abalos diese Design-Technik, was seine Beiträge leicht zu navigieren und zu verfolgen macht.
Das Z-Muster wird mit weniger textschweren Designs assoziiert. Viele Landingpages entsprechen diesem Muster. Alle Hauptelemente auf der Conservation-Guide-Website halten sich an das Z-Muster. Wenn Sie ein/e Einsteiger:in im Webdesign sind, ist dies ein einfacher Layout-Trick, der der Benutzerfreundlichkeit hilft.
Farbe
Ihnen stehen die Farben des Regenbogens und darüber hinaus zur Verfügung. Nutzen Sie den Farbwähler, um die markengerechtesten Optionen einzugrenzen.
Hier sind ein paar unkomplizierte Ansätze bei der Wahl eines Farbschemas für Ihre erste Website.
Monochrom
Nutzen Sie eine einzelne Farbe als Basis, variieren Sie den Grad der Sättigung, beziehen Sie helle und dunkle Töne ein, und experimentieren Sie mit verschiedenen Farbtönen für ein einheitliches Farbschema. Unabhängig von Ihrer Nische ist eine monochrome Website eine clevere Design-Entscheidung. Und denken Sie daran, welche Farbe Sie auch für den Text wählen, stellen Sie sicher, dass Sie Lesbarkeit bedächtig berücksichtigen.
In diesem Beispiel von Unique wird jeder Abschnitt durch ein monochromatisches Farbschema abgegrenzt. Sie müssen bei Ihren Einsteiger:innen-Designs nicht so aufwendig sein, doch es ist schön, deren Nutzung verschiedener monochromatischer Farbvariationen zu sehen. Bemerken Sie, wie jeder Abschnitt aus Farben besteht, die sich auf die hervorgehobenen Taschen bezieht? Das ist ein netter Design-Trick, der ein harmonisches Farbschema ergibt.
Komplementär
Nehmen Sie Farben, die sich auf dem Farbkreis gegenüberstehen, und kombinieren Sie sie. Einfach genug, oder?
Nutzen Sie Komplementärfarben mit Bedacht. In diesem Design unten von der Ignisis-Website nutzte der/die Designer:in Blau und Orange in verschiedenen Kombinationen zusammen mit Whitespace und Graultönen für ein Layout, das die Augen nie ermüdet. Der Kontrast fühlt sich knackig und erfrischend an.
Typografie-Grundlagen
Typografie ist zweidimensionale Architektur, basierend auf Erfahrung und Vorstellungskraft, und geleitet von Regeln und Lesbarkeit.
-Hermann Zapf
Was sind also die Regeln, die Sie, der/die neophyte/r Designer:in, wissen müssen?
Typografie informiert Ton
Denken Sie an eine Hochzeitseinladung oder eine Todesanzeige. Beide sind bedeutsame Lebensereignisse – eine eine freudige Feier und die andere typischerweise ernster. Wo eine verzierte blumige Schrift gut für eine Hochzeit funktioniert, ist sie nicht gut geeignet für eine Trauerfeier.
Wenn Sie Ihre erste Website gestalten, behalten Sie den Ton im Kopf. Wenn Sie einen unbeschwerten Vibe anstreben, wie ein Food-Blog, ergibt das Einweben verspielter Schriften Sinn. Doch wenn Sie eine Website für eine Anwaltskanzlei gestalten, bleiben Sie bei eher professionellen Schriftarten.
Serifen versus serifenlos
Ein häufiger Fehler neuer Designer:innen ist es, Serifen- und serifenlose Schriften zu verwechseln. Sie können sie unterscheiden, weil die Enden von Serifenbuchstaben eine zusätzliche Linie oder einen zusätzlichen Strich vertikal oder horizontal haben.
Schauen Sie sich die Unterschiede zwischen PT Serif und PT Sans (ohne die Serife) an.
Hier ist PT Serif:
Und hier ist PT Sans:
Serifen sind ein Artefakt aus der Zeit der Druckerpressen, als die meisten der Wörter, die wir lesen, mit Tinte auf Papier gedruckt wurden. Serifen verankerten Wörter auf der Seite und machten sie leichter zu lesen. In den früheren Tagen des Webs wurden Serifen von Webdesigner:innen geschmäht, weil niedrigere Bildschirmauflösungen sie verwaschen ließen. Jetzt, wo Bildschirme besser für Typografie mit Serifen optimiert sind, haben sie ein Comeback gemacht.
Diese kleinen Linien machen einen großen Unterschied. Sie werden bemerken, dass die obige PT-Serif-Schrift formeller wirkt und die serifenlose Version leichter und lockerer erscheint.
Da Serifenschriften komplizierter sind, werden sie am besten in Maßen genutzt. Überschriften sind ein idealer Ort für Serifenschriften, und größere Content-Blöcke profitieren von einer vereinfachteren Schrift ohne Serifen.
Verzierung versus Praktikabilität
Die Schwünge und Windungen einer verschnörkelten Schrift werden einem Design Persönlichkeit und Eleganz hinzufügen, doch übertreiben Sie nicht mit verspielten Schriften. Bei einer Website geht es darum, mit einer Zielgruppe durch Content zu kommunizieren. Wie Hermann Zapf sagte, ist Lesbarkeit eine der wichtigsten Eigenschaften einer Schrift.
Typografie-Feinheiten
Es gibt viel über Typografie zu lernen. Während Sie sich als Designer:in weiterentwickeln, müssen Sie wissen, wie man Zeilenhöhe, Unterschneidung, und verschiedene Schriftgewichte in Ihrer Typografie nutzt. Doch verlieren Sie sich nicht zu sehr im Feinabstimmen aller Feinheiten für Ihre erste Website. Konzentrieren Sie sich darauf, sicherzustellen, dass alles lesbar ist – Sie können später mit dem Feinschliff der Details experimentieren.
Beginnen Sie zu gestalten
Tutorials und Recherche sind unbezahlbar für Ihr Lernen, doch Sie werden letztendlich einfach anfangen und gestalten müssen. Selbst wenn Sie etwas erschaffen, das niemand jemals sehen wird, ist es immer noch eine Übung im Problemlösen und Anwenden dessen, was Sie gelernt haben. Machen Sie sich keine Sorgen, wenn es nicht erstaunlich ist. Doch seien Sie stolz darauf, diese Schwelle vom angehenden Designer/angehenden Designerin zum tatsächlichen Designer/tatsächlichen Designerin überschritten zu haben – Sie sind auf dem Weg!
Holen Sie sich Feedback
Sie haben Ihr erstes Design fertiggestellt – Gratulation! Sie haben hart gearbeitet und sind bereit, es der Welt zu zeigen. Doch bevor Sie auf veröffentlichen klicken, holen Sie sich eine Außenperspektive auf das, was Sie erschaffen haben. Usability-Testing muss nicht teuer sein – das Testen mit nur fünf Nutzer:innen kann die Mehrheit der Probleme aufdecken.
Konstruktive Kritik zu erhalten kann unangenehm sein. Etwas zu erschaffen, sei es ein Essay, ein Gemälde, oder eine Website, ist ein Akt der Verwundbarkeit. Die Dinge, die Sie in die Welt setzen, sind eine Erweiterung dessen, wer Sie sind und wozu Sie fähig sind. Zu erfahren, dass das, was Sie erschaffen haben, besser sein könnte oder falsch ist, könnte sich wie ein persönlicher Angriff anfühlen.
Im Webdesign ist Feedback ein normaler und notwendiger Teil des Prozesses. Lernen Sie, Ihr Ego zurückzustellen und das Feedback von Ihrem Selbstwert zu trennen. Mit zunehmender Erfahrung werden Sie in der Lage sein, praktisches, nützliches Feedback zu identifizieren und umzusetzen und den Rest loszulassen. Sie werden feststellen, dass erfahrenere Designer:innen wissen, wie es ist, ein/e Einsteiger:in zu sein – sie freuen sich, weniger erfahrene Designer:innen erfolgreich zu sehen.
Wenn Sie mit Webflow gestalten, teilen Sie Ihre Arbeit im Webflow Showcase oder bitten Sie im Webflow-Design-Forum um Hilfe. Mit zunehmendem Fortschritt möchten Sie an Orten wie Dribbble und Behance einreichen, um mehr Aufmerksamkeit auf Ihre Arbeit zu lenken. Sie werden nicht nur konstruktive Kritik erhalten, Sie werden auch Feedback darüber erhalten, was Sie gut machen – was sich immer großartig anfühlt.
Bauen Sie Ihre erste Website mit Webflow
Webflows visuelle Leinwand verwandelt HTML, CSS, und JavaScript in intuitive Drag-and-Drop-Kontrollen. Sie können frei experimentieren, wissend, dass die Plattform sauberen, produktionsbereiten Code ausgibt, während Sie sich auf Layout, Interaktionen, und Content konzentrieren.
Erstellen Sie ein kostenloses Konto, wählen Sie eine responsive Startvorlage, und veröffentlichen Sie auf einer Webflow-Staging-URL in Minuten. Wenn Sie bereit für eine individuelle Domain sind, sind schnelles Hosting und integriertes SSL nur einen Klick entfernt – sodass Sie weiter am Design iterieren können, ohne sich um Deployment-Pipelines sorgen zu müssen.
