Design-Elemente für eine Website

Möchten Sie die Design-Tricks für sauber strukturierte Website-Layouts und ‑Elemente kennenlernen? Dann sind Sie hier genau richtig!

Adobe Illustrator bietet Ihnen eine pixelgenaue Designumgebung, um flexible und frei fließende Web-Elemente zu erstellen. Es bietet Ihnen alles, was Sie brauchen, um ein sauberes und klares Weblayout zu erstellen – Vektorgrafiken, responsive Mediensymbole, skalierbare Komponenten, CSS-Generierung, SVG-Export, Wireframes und wiederverwendbare Symbole.

Website-Design

Unbedingt ausprobieren

Adobe XD – Adobes neueste vektorbasierte UX/UI-Komplettlösung zum Designen von Websites, mobilen Apps und mehr.

Fünf Prinzipien für effektive Web-Layouts

Um ein hochwertiges Weberlebnis zu erstellen, sollten Sie den folgenden Aspekten des Webdesigns auf jeden Fall besondere Aufmerksamkeit schenken:

  • Einfache Navigation mit weniger Klicks
  • Optimale und ausgewogene Nutzung der Bildschirmfläche, geräteunabhängige Anzeige
  • Minimale und saubere Struktur – Einsatz von Rastern, Kacheln, Registerkarten
  • Visuell ansprechende und interessante Grafiken
  • Klare und doch kunstvolle Typografie

Bevor Sie beginnen

Bei jeglichem Bildmaterial, das Sie in Illustrator entwerfen, geht es normalerweise um die folgenden Design-Themen:

  • Formen und Pfade
  • Farben und Muster
  • Text und Schriftarten
  • Bilder und Spezialeffekte

Möchten Sie mehr erfahren? Siehe Wesentliche Komponenten einer Website.

Einrichten eines Web-Dokuments

Einrichten eines Web-Dokuments:

  • Wählen Sie Datei > Öffnen. Klicken Sie im Dialogfeld „Neues Dokument“ auf die Registerkarte Web. Wählen Sie in der Liste der Vorgaben einen Web-Dokumenttyp aus, der Ihren Anforderungen entspricht.
  • Vorschau und Herunterladen einer Beispielvorlage. 
Auswählen eines Web-Dokuments
Auswählen eines Web-Dokuments

Entwerfen eine responsiven Web-Seite

Mit der ständig wachsenden Technologie ist es wichtig, eine Website zu entwerfen, die auf jeder Betriebssystemplattform, Bildschirmgröße und Geräteausrichtung zuverlässig reagiert.

Um ein responsives Weblayout zu erstellen, sollten Sie die folgenden Elemente berücksichtigen:

  • Flexible Raster und Layouts zur Gestaltung eines Website-Layouts, das sich auf jede Bildschirmbreite skalieren lässt, z. B. Desktop, Tablet, Mobilgerät.
  • Skalierbare Medien, die Bilder, Videos und ähnliche Formate enthalten.
  • Dynamische Medienabfragen zum Hinzufügen bestimmter Styles für Web Browser und Geräte.

Erstellen eines Website-Wireframes oder einer Struktur

Eine saubere und strukturierte Website zieht mehr Besucher an. Wenn Sie ein Website-Layout entwerfen:

  • Beginnen Sie mit dem Entwurf des Website-Wireframes, um verschiedene Bildschirmelemente zu visualisieren und sie in organisierter Weise auf Ihrer Webseite zu platzieren.
    Tipp: Für die einfache Navigation und einen modernen Look können Sie Kacheln oder Registerkarten hinzufügen.
  • Wenn die oberste Ebene der Benutzeroberfläche fertig ist, fügen Sie Inhalte und weitere gestalterische Elemente hinzu.
Website-Struktur
Einige Website-Vorlagen für verschiedene Bildschirme

Tipps und Tricks für ein organisiertes Web-Layout

  • Für ein besseres Look-and-Feel unterteilen Sie die Website in entsprechende Abschnitte. Wählen Sie Objekt > Slice.
  • Verwenden Sie Lineale, Raster und Hilfslinien, um Referenzbereiche zu überprüfen und zu testen und Bildschirmelemente anzupassen.
    • Wählen Sie Ansicht > Hilfslinien.
    • Wählen Sie Ansicht > Raster einblenden.
    • Wählen Sie Ansicht > Lineale.
  • Um eine präzise sichtbare Umrandung zu erstellen, platzieren Sie rechteckige Objekte oder Textkomponenten auf der Webseite, um den Bildschirm in die entsprechenden Abschnitte zu unterteilen.
  • Während Sie sich auf den Hauptinhalt der Webseite konzentrieren, vergessen Sie nicht, ein kreatives Logo hinzuzufügen, ein inspirierendes Heldenbild, eine Tagline, ein Leitbild, usw.
  • Um die Websitestruktur zu speichern, wählen Sie Export > Für das Web speichern (Legacy). Sie können auch die Slices auswählen, die in der gespeicherten Datei angezeigt werden sollen.

Verwandte Themen:

Slices und Imagemaps

Entwerfen eines Webbanners

Führen Sie eine Marketing-Kampagne durch, um Produkte oder Dienstleistungen auf Ihrer Website zu bewerben? Erstellen Sie innerhalb weniger Minuten ein auffälliges Banner!

Gehen Sie wie folgt vor, um ein Webbanner zu erstellen:

  • Wählen Sie die richtige Dokumentgröße aus, in der Regel ist für Banner ein A4-Dokument gut geeignet.
  • Erstellen Sie mithilfe des Rechteckwerkzeugs eine Banner-Umrisslinie und geben Sie die entsprechenden Bemaßungen an.
  • Fügen Sie auf kreative Weise Grafiken, Text, Farbverlauf hinzu.
Webbanner

Verwandte Ressourcen

Adobe-Logo

Bei Ihrem Konto anmelden