Webdesign – Guide für Anfänger

Webdesign Guide für Anfänger

Webdesign ist eine entscheidende Komponente des Webentwicklungsprozesses. Wenn Sie sich für Webdesign interessieren, vermuten wir, dass Sie eine kreative Ader haben. Und wie könnten Sie nicht begeistert sein, Ihre erste Website zu erstellen? Beim Webdesign geht es darum, ein funktionales Kunstwerk zu gestalten – aber wo fangen Sie an? Wenn Sie sich fragen, was Sie wissen müssen, bevor Sie beginnen, wird Ihnen dieser Leitfaden helfen.

Wählen Sie etwas Grundlegendes für Ihr erstes Website-Design

Das scheint eine Selbstverständlichkeit zu sein, oder? Aber manchmal werden wir zu ehrgeizig und lassen uns am Ende entmutigen. Für Ihr erstes Projekt ist es eine gute Idee, etwas Einfaches zu wählen, das Spaß macht. Eine E-Commerce-Seite ist komplizierter und sollte besser in Angriff genommen werden, wenn Sie mehr Erfahrung haben.

Ein Blog ist ein guter Anfang. Es ist eine gute Design-Übung und Sie lernen, wie ein Content Management System (CMS) funktioniert, was für zukünftige Website-Designs wichtig sein wird. Das Beste von allem – Sie müssen nicht bei Null anfangen. Es gibt jede Menge Blog-Vorlagen, die es einfach machen, einen Blog zusammenzustellen.

Vorlagen sind ein wertvolles Lernwerkzeug. Wenn Sie beobachten, wie HTML-, CSS- und JavaScript-Elemente gestylt und zusammengefügt werden, erhalten Sie einen tieferen Einblick in das, was ein Design ausmacht. Sie können Vorlagen als Grundlage verwenden, um Änderungen und Anpassungen vorzunehmen.

Vielleicht möchten Sie keinen Blog starten – versuchen Sie es mit Ihren kreativen Aktivitäten oder Hobbys. Wie wäre es, wenn Sie ein Schaufenster für Ihre fotografischen Fähigkeiten oder für Ihre Sammlung von Kurzgeschichten erstellen? Ein Design zu erstellen, das eine Ihrer Leidenschaften zeigt, ist ein unterhaltsames erstes Projekt.

Lassen Sie sich von anderen Designern inspirieren

Sicherlich sind Sie schon auf Websites gestoßen, die Sie mit ihrem atemberaubenden Design begeistert haben.

Legen Sie eine Inspirationsdokumentation mit Links zu Websites an, die Ihnen gefallen, oder setzen Sie ein Lesezeichen für sie. Pinterest ist ein großartiger Ort, um großartiges Website-Design zu finden – Sie können Illustrationen, Buchcover, Poster, Blogs und andere Arten von Designarbeiten finden und anpinnen, um sich darauf zu beziehen. Designer verwenden den Begriff „Moodboard“ für diese Sammlungen. Moodboards sind ein schnelles Nachschlagewerk, wenn Sie einmal nicht weiterkommen. Und das werden Sie.

Abgesehen von den Entdeckungen, die Sie selbst machen, gibt es einige kuratierte Kollektionen, die Sie sich ansehen sollten.

  1. Awwwards hat immer neue und frische Arbeiten und eine Vielzahl von Themensammlungen
  2. Behance ist eine fantastische Zusammenstellung von Webdesign-Arbeiten, bei der der Fokus auf Qualität und Kreativität liegt
  3. Dribbble konzentriert sich auf einzelne Designer und bietet ein Forum, um Feedback zu erhalten und mit anderen über ihre Arbeit zu kommunizieren

Schauen Sie außerhalb des Webs nach Inspirationsquellen

Webdesign ist von einer visuellen Sprache geprägt, die überall zu finden ist, wie z.B. auf dem Cover eines Graphic Novels oder dem digitalen Kiosk in Ihrer Bank. Entwickeln Sie ein Auge dafür, gutes Design zu erkennen, und beginnen Sie zu analysieren, warum etwas funktioniert oder nicht funktioniert, egal in welchem Medium.

Achten Sie auf die Typografie

Wir lesen oft, ohne uns der Schriftarten bewusst zu sein. Achten Sie auf den Effekt, den die Schrift hat, wenn Sie Inhalte konsumieren. Ist die Schrift auf der Speisekarte lesbar? Was macht das handgeschriebene Schild für das örtliche Geschäft so gut? Schriftzeichen sind überall. Notieren Sie sich sowohl gute als auch schlechte Verwendungen von Typografie.

Typewolf ist eine exzellente Quelle, um sich über beliebte Schriftarten zu informieren. Es gibt viele Listen, die Sie durchstöbern können, eine „Website des Tages“ und Lookbooks mit spektakulären Schriftkombinationen. Es ist hilfreich, tatsächliche Beispiele für den Einsatz von Typografie zu sehen, und Websites wie Typewolf sind ein großartiger Ort, um ihre praktischen Anwendungen zu sehen. Sich mit verschiedenen Schriften vertraut zu machen, wird Ihnen helfen, die richtige Schrift für Ihr erstes Website-Design auszuwählen.

Recherchieren Sie verschiedene Arten von Design

Es gibt so viele Disziplinen des Designs, mit denen man vertraut sein sollte. Ein 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 sich um Plakatkunst, Gepäck oder Möbel handelt, Sie werden fantastische Beispiele für richtig gemachtes Design 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 schult die Intuition.

Halten Sie Content bereit, bevor Sie beginnen

Den Content an die erste Stelle zu setzen, bedeutet, dass Sie Inhalte bereit haben, mit denen Sie arbeiten können, bevor Sie mit dem Design Ihrer ersten Website beginnen.

Er muss nicht perfekt sein. Sie können ihn später immer noch bearbeiten und für Google SEO (Suchmaschinenoptimierung) optimieren. Aber wenn Sie zumindest einen groben Entwurf dessen haben, was live gehen soll, können Sie sicherstellen, dass das Design darauf abgestimmt ist. Das Entwerfen mit echten Inhalten gibt Ihnen eine bessere Vorstellung davon, wie die Website aussehen und funktionieren wird. Es gibt Ihnen auch die Möglichkeit, Änderungen früher im Designprozess vorzunehmen.

Für Blogs müssen Sie einen Beitrag zum Testen im CMS bereit haben. Wenn Sie bereits vor dem Start ein paar Beiträge geschrieben haben, ersparen Sie sich die Mühe, etwas im Nachhinein zu schreiben.

Halten Sie Ihr Design einfach und intuitiv

Ob es sich um die Schrift, die Navigation oder die CTAs handelt, niemand möchte sich mit Ihrem Design herumschlagen.

Ihr Designansatz sollte auf Einfachheit und Ordnung beruhen. Die Logik sollte jemanden mit Leichtigkeit durch die Seite führen. Und da wir hier über die Menschen sprechen, die mit dem interagieren, was Sie erstellt haben, ist dies ein guter Ort, um UX einzuführen.

Verstehen Sie die Grundlagen der User Experience (UX)

Eine Website ist mehr als nur schwebender Text im Raum. Das Farbschema, der Inhalt, die Typografie, das Layout und die Bilder kommen alle zusammen, um Ihrem Publikum zu dienen und Emotionen zu wecken. Jemand, der durch den digitalen Raum wandert, den Sie geschaffen haben, sollte einen klaren Weg ohne Hindernisse haben.

UX konzentriert sich darauf, Ihr Publikum zu verstehen. Wonach suchen sie – und wie wird Ihr Design es ihnen leicht machen, es zu finden? Bei UX geht es darum, sich in die Köpfe Ihrer Zielgruppe hineinzuversetzen und Ihr Design mit deren Augen zu sehen.

Wenn Sie Ihre erste Website erstellen, sollten Sie diese UX-Prinzipien im Hinterkopf behalten:

  1. Machen Sie die Dinge einfach und intuitiv
  2. Kommunizieren Sie Konzepte in einer logischen Abfolge
  3. Erfüllen Sie die Bedürfnisse Ihrer Zielgruppe und widerstehen Sie der Versuchung, Ihre Fähigkeiten auf Kosten der Benutzerfreundlichkeit zur Schau zu stellen

Wenn Sie Ihre Zielgruppe kennen, können Sie ein Design entwerfen, das auf ihre Wünsche und Bedürfnisse zugeschnitten ist. In unserem Leitfaden für Einsteiger in die Benutzerforschung finden Sie weitere Informationen zu diesem Thema.

Verstehen Sie die Grundlagen der Benutzeroberfläche (UI)

Wenn Sie neu im Webdesign sind, verwirrt Sie vielleicht der Unterschied zwischen UI und UX. Die meisten von uns waren das. Sie sollten wissen, dass es sich um zwei unterschiedliche Konzepte handelt.

Während es bei UX um das allgemeine Gefühl eines Designs geht, geht es bei UI um die Besonderheiten. Wenn Sie sich in einem Aufzug befinden würden, wäre UI die Größe und Anordnung der Etagenknöpfe, während UX die Farben, Texturen und andere Einrichtungsentscheidungen des Aufzugsraums umfassen würde. Bei der UI geht es darum, jemandem die Werkzeuge an die Hand zu geben, die er braucht, um Ihre Website ohne Komplikationen zu erleben.

Wenn Sie Ihre erste Website erstellen, sollten Sie diese UI-Prinzipien im Hinterkopf behalten:

  1. Die Funktionalität der interaktiven Elemente sollte offensichtlich sein
  2. Einheitlichkeit muss die Benutzerfreundlichkeit leiten – Aktionen sollten logischen Mustern folgen
  3. Design-Entscheidungen sollten mit einem klaren Ziel getroffen werden

Nutzen Sie die Designprinzipien als Leitfaden für Ihren Webdesign-Anfängerprozess

Effektives Design unterliegt bestimmten Regeln, und es ist wichtig, dass Sie die grundlegenden Webdesign-Fähigkeiten verstehen, bevor Sie beginnen. Es gibt Standardverfahren, die den Prozess vereinfachen und für ein raffiniertes Endprodukt sorgen.

Layout

Wenn Sie Websites entwerfen und erstellen möchten, ist das Verständnis für ein gutes Layout der Schlüssel. Wir empfehlen, die Dinge minimal zu halten und mit nur wenigen Elementen zu arbeiten, um sich auf die perfekte Platzierung zu konzentrieren.

Wenn Sie mit dem Design beginnen, denken Sie an Raster. Raster richten Elemente, wie z.B. Div-Blöcke und Bilder auf einer Webseite, in einer Weise aus, die Ordnung schafft.

Die Struktur eines Layouts sollte einer visuellen Hierarchie folgen. Was sind die wichtigen Ideen, die Sie den Leuten zeigen wollen, und in welcher Reihenfolge? Die visuelle Hierarchie muss sich an die üblichen Muster halten, die Menschen beim Lesen verwenden. Es gibt zwei Pfade, denen die Augen von Menschen im Web im Allgemeinen folgen: das F-Muster und das Z-Muster. Wenn Sie wissen, wie diese Muster funktionieren, können Sie Ihre eigenen Inhalte besser organisieren.

Das F-Muster wird eher bei Designs mit dichten Inhaltsblöcken verwendet. Die Augen der Benutzer scannen die linke Seite eines Layouts ab, bis ihnen etwas auffällt, und lesen dann von links nach rechts. Stellen Sie sich vor, Sie schauen sich die Speisekarte in einem Restaurant an – Sie werden vielleicht die fett gedruckten Namen der Gerichte auf der linken Seite überspringen, bis Sie auf etwas stoßen, das Ihre Aufmerksamkeit erregt, was Sie dann dazu veranlasst, die ergänzenden Details zu lesen, die dieses spezielle Gericht erklären.

Die meisten Leute werden sich so etwas wie einen Blogbeitrag in diesem F-Muster durchlesen. Machen Sie sich diese Designtechnik zunutze, indem Sie den Text linksbündig ausrichtet und die Sätze mit Aufzählungszeichen versehen, sodass Ihre Beiträge leicht zu navigieren und zu verfolgen sind.

Farbe

Sie haben die Farben des Regenbogens und darüber hinaus zur Verfügung. Und wir alle wissen, dass „mit großer Macht auch große Verantwortung kommt“. Die Macht des Farbwählers kann zum Guten oder zum Bösen eingesetzt werden.

Hier sind ein paar einfache Ansätze bei der Auswahl eines Farbschemas für Ihre erste Website.

Monochrom

Verwenden Sie eine einzige Farbe als Basis, variieren Sie die Sättigung, schließen Sie Hell- und Dunkeltöne ein und spielen Sie mit verschiedenen Farbtönen, um ein einheitliches Farbschema zu erhalten. Unabhängig von Ihrer Nische ist eine monochrome Website eine kluge Designentscheidung. Und denken Sie daran, egal welche Farbe Sie für den Text wählen, stellen Sie sicher, dass Sie auf die Lesbarkeit achten.

Komplementär

Nehmen Sie Farben, die sich auf dem Farbkreis gegenüberliegen, und kombinieren Sie sie. Einfach genug, oder?

Verwenden Sie Komplementärfarben mit Bedacht. Das Design sollte die Augen nicht ermüden und der Kontrast knackig und erfrischend wirken.

Typografie

Typografie gibt den Ton an

Denken Sie an eine Hochzeitseinladung oder eine Beerdigungsankündigung. Beides sind tiefgreifende Lebensereignisse – das eine ein freudiges Fest und das andere typischerweise eher düster. Während ein verschnörkeltes, blumiges Schriftbild für eine Hochzeit gut funktioniert, ist es für eine Beerdigung nicht so gut geeignet.

Beachten Sie beim Entwerfen Ihrer ersten Website den Ton. Wenn Sie eine unbeschwerte Atmosphäre anstreben, wie z.B. bei einem Food-Blog, ist es sinnvoll, verspielte Schriftarten einzusetzen. Beim Entwerfen einer Website für eine Anwaltskanzlei, sollten Sie allerdings eine professionellere Schriftart verwenden.

Mehr zu Typografie erklären wir Ihnen in einem anderen Beitrag.

Beginnen Sie mit der Gestaltung

Tutorials und Recherchen sind von unschätzbarem Wert für Ihr Lernen, aber letztendlich müssen Sie einfach loslegen und mit dem Design beginnen. Selbst wenn Sie etwas entwerfen, das niemand jemals sehen wird, ist es immer noch eine Übung, Probleme zu lösen und das Gelernte anzuwenden. Machen Sie sich keine Sorgen, wenn es nicht umwerfend ist. Aber seien Sie stolz darauf, dass Sie die Schwelle vom angehenden Designer zum tatsächlichen Designer überschritten haben – Sie sind auf dem richtigen Weg!

Feedback einholen

Sie haben Ihr erstes Design fertiggestellt – herzlichen Glückwunsch! Sie haben hart gearbeitet und sind bereit, es der Welt zu zeigen. Aber bevor Sie auf „Veröffentlichen“ klicken, sollten Sie sich eine Meinung von außen über Ihr Werk einholen.

Konstruktive Kritik zu bekommen kann unangenehm sein. Etwas zu erschaffen, egal ob es ein Aufsatz, ein Gemälde oder eine Website ist, ist ein Akt der Verletzlichkeit. Die Dinge, die Sie in die Welt setzen, sind eine Erweiterung dessen, wer Sie sind und zu was Sie fähig sind. Wenn man Ihnen sagt, dass das, was Sie gemacht haben, besser sein könnte oder falsch ist, kann sich das wie ein persönlicher Angriff anfühlen.

Im Webdesign ist Feedback ein normaler und notwendiger Teil des Prozesses. Lernen Sie, Ihr Ego beiseite zu legen und das Feedback von Ihrem Selbstwertgefühl zu trennen. Mit zunehmender Erfahrung werden Sie in der Lage sein, praktisches, nützliches Feedback zu erkennen und umzusetzen und den Rest loszulassen. Sie werden feststellen, dass erfahrenere Designer wissen, wie es ist, ein Anfänger zu sein – sie freuen sich, wenn weniger erfahrene Designer Erfolg haben.

Andere Beiträge, die Sie auch interessieren könnten:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.