Loading...
Anatomie einer Webseite
Work in Progress

Anatomie einer Webseite

Wie setzt sich eine Webseite zusammen? eine Übersicht über die Struktur und die Namenskonventionen von Elementen.
Atomic Design Theory

Atome, Moleküle und Organismen

Ein cleverer Ansatz um die Anatomie von Webseiten zu erklären ist mit die Atomic Design Theory.

HTML-Tags sind die Atome, welche zusammen zu Molekülen geformt werden und diese zu Organen zusammenwachsen. Mit dieser Logik lässt sich der Webseitenaufbau sehr gut beschreiben. Alle Webseiten-Seiten und Komponenten können so in ihre Bestandteile zerlegt werden.

Code ist verschachtelt geschrieben, so ergibt diese Analogie doppelt Sinn.

© Tall Tale Digital
Elemente oder Atome

Modularer Baukasten

Oft wird statt den Atomic Design Namen, andere Begriffe verwendet. Sie meinen aber das Gleiche.

Atome sind Elemente, Moleküle sind Komponenten und Organismen werden als Module bezeichnet. Oft ist der Unterschied zwischen grösseren und kleineren Komponenten oder Modulen fliessend und wird für jedes Projekt neu definiert. Ganz grosse Module werden auch als Apps bezeichnet.

Die Benennung ist von Agentur und Entwickler unterschiedlich. Aber die verschachtelte Bauweise bleibt. Die Module werden kombiniert und daraus Templates von Seiten und Seitentypen erstellt.

Die Verschachtelung der Elemente anhand der Navigation. Das Suchfeld ist eine Komponente der Navigation. Der Button ist ein Element der Suchfeld Komponente.
© Webdesign Essentials
Die Verschachtelung der Elemente anhand der Navigation. Das Suchfeld ist eine Komponente der Navigation. Der Button ist ein Element der Suchfeld Komponente.
2
Wiederholen statt neu erfinden

Repetition

Die Repetition durch die Verschachtelung ermöglicht eine modulare und skalierbare Webseitenentwicklung.

Die FrontEnd Programmierung, die Webseiten-Anatomie, alles baut sich analog einer strukturierten Anatomie auf. 

Komplexe Webseiten brauchen eine konsistente Designsprache.

Was im CSS gilt, trifft auch auf die Module & Komponenten zu.

Developer lieben repetitive Elemente in einer Webseite, da sie nur einmal definiert werden. Jede Abweichung wird zusätzlich definiert. Gleiche Modul-Typen in verschiedenen Style-Variationen brauchen eine gute Argumentation.

© Webdesign Essentials
3

Video-Info

CSS-Selektor (z. B. HTML-Class) lassen sich spezifisch stylen. Aber jede Class repetiert seinen Style in all seinen Anwendungen.

Hierarchische Struktur von Elementen

Sitemap

Um den Baukasten zu planen und die Module und Komponenten zu definieren wird eine Sitemap des Inhalts erstellt.

Eine Sitemap ist die hierarchische Inhaltsstrukturierung nach Seiten und Unterseiten. Visuell wird es als gerne Baumdiagramm dargestellt.

Sitemaps geben eine erste Idee, welche Seitentypen gebraucht werden. Die Module spezifischer Seitentypen definieren sich teilweise bereits aus ihrem Namen.

Der Blog oder die Agenda sind solche Seitentypen. Kontaktseiten oder Team-Seiten deuten auch bereits auf gewisse Standard Module hin.

Die Inhaltsthematik wird aber im Kapitel Inhaltsstrategien genauer angeschaut.

Ein Schema einer Sitemap als Baumdiagramm.
© Webdesign Essentials
Ein Schema einer Sitemap als Baumdiagramm.
Das Grundgerüst

Page Types

Jede Webseite besteht aus einer definierten Anzahl von Seitentypen (Page-Types). Zu vergleichen ist es mit den Musterseiten im InDesign.

Diese Seitentypen oder Seiten-Templates muss man sich als Container vorstellen, worin die Module eingefügt werden. Es definiert die Bereiche, die auf allen Seiten repetitiv vorkommen können: Header, Side-Navigation, Content-Area, Footer.

Seitentypen sind in die Anatomie übersetzt das Skelett, worin die Organe zu liegen kommen.

Zwei Wireframes die zwei mögliche Seitentemplates zeigen.
© Webdesign Essentials
Zwei Wireframes die zwei mögliche Seitentemplates zeigen.
5

Info

Im englischen sind web sites und web pages logisch von einander getrennt. Im deutschen sind beides mal Webseiten. Daher ist es im Deutschen noch sinnvoller, die Page Types zu klassifizieren.

Klassische Seitentypen

Home page

Die Startseite. Die erste Seite einer Domain (index.html). In den meisten CMS oder Site-Builder kann man die Home page speziell markieren als solche.

Landing page

Die Seite, welche durch einen Externen Link erreicht wird. Die erste Seite, die ein User in seiner Session sieht. Im Marketing wird gezielt genutzt.

Content page

Eine Inhaltsseite. Wird als Standard-Container für Unterseiten verwendet.

Detail page

Unterseite mit Inhalt. Analog zur Content-Page.

Overview page

Übersichtsseite, welche zu weiteren Unterseiten führt. Oftmals automatisch generiert durch ein CMS.

One Pager

Eine sehr häufige Form von Webseiten. Dabei wird alles auf einer Seite dargestellt und mit scrollen zugänglich gemacht. Für kleinere Webseiten eine praktische Wahl.

Intro page

Eine Seite, welche vor der Homepage kommt. z. B. für den Sprach- oder Länderwechsel.

Webseiten Komponenten

Namens-Konventionen

Schauen wir uns ein paar Webseiten Komponenten oder Module an, die auf gängigen Webseiten zu finden sind.

Es lohnt sich konsistente Namen zu nehmen. Es ermöglicht über Projekte, Teams und Agenturen hinweg von den gleichen Dingen und den gleichen Funktionalitäten zu sprechen.

Wir arbeiten uns nun von Oben nach Unten durch eine Webseite durch und benennen die Komponenten.

© Webdesign Essentials
Der Kopf der Seite

Header

Der Header-Bereich hilft mit seinen Komponenten der Orientierung.

Die Navigation, meist die Main-Navigation ist dort zu finden sowie auch das Logo des Unternehmens.

Grössere Webseiten haben oftmals eine Meta-Navigation über der Main-Navigation um weitere spezifischere Inhaltlinks anzubieten.

Wireframe eines Browser mit dem Standard Header Setting.
© Webdesign Essentials
Wireframe eines Browser mit dem Standard Header Setting.
8
Header Komponenten

Logo

Standardmässig mit der Homepage verlinkt. Standardmässig oben Links.

Navigation

Main Navigation

Die Hauptnavigation um sich in der Seite zurechtzufinden. Meist Horizontal.

Sub Navigation

Die Zweite Navigationsstufe nach der Hauptnavigation. Sub-Sub ist die Dritte. Meistens erst durch Hover oder Klick erreichbar.

Side Navigation

Für Webseiten mit vielen Inhalten lohnt sich eine vertikale Side-Navigation.

Meta Navigation

Navigations-Elemente, die speziell sind. Meistens ist die Sprachwahl, Suche sowie übergeordnete Seiten da zu finden.

Dropdown

Ein Menu, welches aus dem Button herausfährt.

Fly-Out Navigation

Grossflächige Navigation, welche durch Hover oder Klick zum Vorschein kommt.

Sticky Navigation / Sticky Header

Eine Navigation oder ein Header, der am Browser-Rand kleben bleibt.

Additionals

Breadcrumb

«Brotkrumen» Um wie Hänsel & Gretel den Weg zurück zur Startseite zu finden. Es hilft sich in all den Unterseiten zurechtzufinden.

Language Switch

Sprachwechsel. Die Sprachwahl wird zwar bei vielen grösseren Webseiten automatisch über die vom User vordefinierte Browser-Sprache eingestellt. Aber dennoch oft im Header-Bereich zu finden.

Searchfield

Für die Eingabe des Suchbegriffes. Neu ohne Button nur mit Icon, da man «Enter» drückt.

Die Suchergebnisse sind meistens auf einer neuen Seite.

Der Stimmungsvolle Einstieg in eine Seite.

Hero

Ein Hero ist ein ganzseitiges Bild mit einem kurzen Text, welches meist die volle Browsergrösse einnimmt. Er ist ein emotionaler Einstieg in die Welt der Webseite.

Hero Teaser

Ganzseitiges Bild mit Typografie und «Call to Action Button» als Seiteneinstieg. Der Button weist direkt auf eine relevante Detail-Page der Webseite.

Hero Slider Gallery (Hero Carrousel)

Ganzseitige Bildergalerie um mehrere Inhalte einer Webseite «attraktiv» ins Zentrum zu stellen. Oftmals mit automatischem Bildwechsel. Aber ob statisch oder automatisch. Es ist aus UX-Sicht  nicht sinnvoll. Entweder kommt ein User nicht mit lesen nach oder er sieht die noch versteckten Inhalte nicht, obwohl sie Zentral wären.

Wireframe eines Browser mit einer Hero-Komponente. Darin sind angedeutet ein Hintergrundbild, Hero-Title, Hero-Description und Call to Action Button.
© Webdesign Essentials
Wireframe eines Browser mit einer Hero-Komponente. Darin sind angedeutet ein Hintergrundbild, Hero-Title, Hero-Description und Call to Action Button.
9
Die visuelle Verlinkung

Teaser

Teasing = Necken. Also Vorschau Boxen, welche Inhalte anwerben.

Meistens sind die Inhalte dieser Boxen dynamisch von der entsprechenden Detail-Page genommen. Dies vereinfacht die Inhaltsbearbeitung.

Die meisten Teaser verweisen auf eine Detail-Page, aber mit einer grösseren Seite und vielen Teaser beginnt man diese Teaser spezifischer zu klassifizieren.

Wireframe zweier Webseiten-Templates. um die Verlinkung via Teaser zu verdeutlichen.
© Webdesign Essentials
Wireframe zweier Webseiten-Templates. um die Verlinkung via Teaser zu verdeutlichen.
10

Info

Teaser sind ein extrem häufige Webseiten-Bausteine. Ihr Einfluss auf Inhalte & Text ist viel grösser als man denkt.

Teaser Komponenten

Teaser Slider Gallery (Carrousel)

Emotionaler Einstieg in die zur Zeit wichtigsten Themen der Webseite.

Automatische Überblendungen sind eine Unsitte.

Detail-Page Teaser

Eine ansprechende Box, welche erste Inhalte einer spezifischen Detail-Page zeigt. 

Product Teaser

Eine Box die Produkte einer Seite bewirbt. (Oftmals sind das Detail-Pages)

Shop Teaser

Eine Box die ein Shop oder Artikel bewirbt.

Article Teaser

Eine Box die Artikel eines Blogs oder Zeitung bewirbt.

News Teaser

Eine Box die News einer Webseite bewirbt.

Event Teaser

Eine Box die Events eines Unternehmens bewirbt.

Der Kern

Text

Text ist so allgegenwärtig, dass er oft nicht als Komponente erkannt wird.

Plain Text

Plain Text ist einer klaren HTML-Klasse zugewiesenes einfaches Textfeld.

Rich-Text

Ein  Textfeld, welches verschiedene Text-Formatierungen und Titel wiedergeben  kann. Es ist so was wie eine Word-Box. Gewisse Rich-Text Module gewisser CMS'es ermöglichen auch die Integration von Bildern oder Tabellen innerhalb des Rich-Texts.

Tables

Tabellen für Aufzählungen von Zahlen oder Dingen.

Zwei Textfelder. Plain-Text der unformatiert ist sowie Richtext, bei dem der Satz in verschiedenen Style-Ausprägungen zu sehen ist.
© Webdesign Essentials
Zwei Textfelder. Plain-Text der unformatiert ist sowie Richtext, bei dem der Satz in verschiedenen Style-Ausprägungen zu sehen ist.
11
Aufmerksamkeitsfokus

Call to Action

Jede Web-Page hat ein Dramaturgie wie der Inhalt präsentiert wird. Ein Call to Action ist die visuell ersichtliche Aufforderung für die User*in etwas zu tun.

Meist der «Höhepunkt» einer einzelnen Seite.

Die Umsetzung eines CTA (Call to Action) ist im Grunde sehr trivial.

© Sleeknote
12
gängige Call to Actions

Button

Eine visuell klar ersichtliche Interaktionsfläche mit einer Verlinkung. Buttons haben verschiedene Stati, welche sich ändern, wenn man mit dem Button interagiert.

Link

Ein klassischer Text Link. Dies kann auf eine andere URL oder eine Page innerhalb der Webseite sein. Oder zu einem PDF oder als Anchor auf eine andere Sektion der gleichen Detail-Page.

Sticky Call to Action

Der «Call to Action» welcher immer verfügbar ist. Er klebt am Browserrand. Oftmals «Feedback» oder ein «Chat-Box Service».

Next Best Click (NBC)

Eine intelligente Art eines Call to Actions, der sich dynamisch Inhalts- und User*innen bezogen anpasst.

Formulare

Form Fields

Formulare sind Eingabefelder auf Webseiten um User*innen-Informationen zu entgegenzunehmen und zu speichern.

Es wird dabei von der Art des Form-Fields und der Input Types unterschieden.

Form Elements

Es gibt das einfache Input Field oder das Select oder Multi-Select Field sowie das Text Field für längere Nachrichten.

Input Types

Es gibt eine grosse Auswahl an Input Types. Vom einfachen Textfeld über den Submit Button oder der Eingabe von Datum oder Passwort.

© Webdesign Essentials
Überblick: Input Types

Text

Einfacher Text. Einzeilig.

Password

Bei der Eingabe des Passworts wird die Eingabe durch **** ersetzt.

Submit-Button

In Formularen werden Buttons genutzt, um ein Formular zu versenden oder zu speichern.

Reset-Button

Ein Button, welche die Form Field Eingaben wieder zurück an den Anfang setzt.

Radio Button

Bei Radio-Buttons kann immer nur eine Option gewählt werden.

Checkbox

Bei der Checkbox können mehrere Optionen gewählt werden.

Range/Slider

Statt eines Dropdowns oder Select-Box kann man verschiedene Optionen auch als Regler darstellen. Es funktioniert wie der Radio Button.

Color

Gibt der User*in die Möglichkeit eine Farbe auszuwählen. Öffnet die OS unterstützte Browserpalette

Date Picker

Datumsauswahl. Es kann auch mit Zeit oder nur mit Wochen oder Monaten versehen sein.

E-Mail

Validiert, ob in der Eingabe die Syntax einer E-Mail-Adresse stimmt. Sprich Text vor dem @ nach dem @ und danach mit einem Punkt und einer Top-Level-Domain versehen: muster@muster.com

Number

Ermöglicht nur Eingabe von Zahlen. Aktiviert bei gewissen Mobilen Betriebssystemen die Nummern-Tastatur.

Search

Ein Texteingabefeld, das ein (X) am Ende hat um die Eingabe wieder zu löschen.

Tel

Eingabe der Telefonnummer mit der Syntax einer Telefonnummer.

URL

Eingabe einer URL mit der Syntax einer URL. Manche Mobilen-Betriebssysteme zeigen das .com in der Tastatur.

Inhaltsvernetzungen

Embedded Content

Das Einbinden von anderen Webseiten-Inhalten nennt sich embed. Dies sind z. B. YouTube oder Vimeo-Videos, Google Maps-Karten oder Soundcloud-Lieder.

Dies wird über oft Embed-Dienste wie embed.ly gelöst. Code Snippets «embed» statt «share» werden von vielen Diensten angeboten. Diese müssen dann aber responsive eingefügt werden. Keine einfache Aufgabe.

Verschiedene Social Media Icons die durch Linien miteinander verbunden sind. (Youtube, Twitter, Soundcloud, Pinterest, Instagram und Snapchat). Es symbolisiert die Embed-Möglichkeiten.
© Webedesign Essentials
Verschiedene Social Media Icons die durch Linien miteinander verbunden sind. (Youtube, Twitter, Soundcloud, Pinterest, Instagram und Snapchat). Es symbolisiert die Embed-Möglichkeiten.
Embeded Content Elemente

Video

Videos und Videoplayer selber machen ist trivial zudem Marketing-Strategisch nicht zwingend sinnvoll. YouTube, Vimeo und Co. lassen sich in den meisten Site-Buildern gut integrieren.

Maps

Karten werden als Elemente in eine Webseite eingebettet. Der gezeigte Inhalt kommt von der Kartenwebseite selbst. Es muss nicht immer Google sein.

PDF-Viewer

PDFs können auch mittels eines Viewer ins Netz gestellt und eingebunden werden. Issuu und Yumpu sind zwei mögliche Dienste.

iFrames

Code Snippets um ganze Webseiten in andere Webseiten zu integrieren. Meistens wird dies nicht im CMS als Modul zur Verfügung gestellt, sondern in der Entwicklung richtig implementiert.

Mehr als Tausend Worte

Images

Bilder sind fast so normal wie Texte auf einer Webseite.

Wir gehen späteren noch auf die Bildgestaltung im Web ein. Hier geht es ja um die Namenskonventionen.

Image 

Bild auf einer Webseite.

Thumbnail

Kleines Bild, welches entweder manuell oder via CMS/Server-Engine kleingerechnet wird. Durch seine Grösse lädt die Webseite schneller.

Light Box oder Fancy Box

Einen Overlay über die Seite um den gewünschten Inhalt gross zu zeigen.

Wireframes von Bildtypen. Normales Bild, kleines Thumbnail und Bild auf einem Lightbox Hintergrund.
© Webedesign Essentials
Wireframes von Bildtypen. Normales Bild, kleines Thumbnail und Bild auf einem Lightbox Hintergrund.
15
Platzsparend

Gallery

Mediengalerien sind eine gängige Art mehrere ähnliche Medien zusammenzufassen. Entweder als gekachelte Zusammenstellung oder als Slideshow.

Image Gallery

Bildergalerie um mehrere Bilder zu zeigen. 

Media Gallery

Bilder und Videos in einer Galerie. Es könnten auch Embedded Media wie Soundcloud Songs oder Karten in einer Media Gallery auftauchen.

Video Gallery

Videogalerie um mehrere Videos nacheinander zu zeigen.

Slideshow & Carrousel

Eine Galerie bei der die Medien nacheinander in den sichtbaren Bereich kommen.

Schema von vier Galerietypen. Galerie mit Thumbnails, Coverflow, Gallery Grid und Slideshow.
© Webedesign Essentials
Schema von vier Galerietypen. Galerie mit Thumbnails, Coverflow, Gallery Grid und Slideshow.
16

Achtung!

Accessibility Probleme - Slideshows oder Carrousel

Share or Follow

Social Buttons

Es gibt zwei sehr ähnliche aber grundsätzlich verschiedenen Social Media Buttons. Es ist wichtig diese sauber voneinander zu trennen. Im Netz findet man viele vertauschte Beispiele.

Social Share Buttons

Um den aktuellen Seiteninhalt auf seinen eigenen Social Media Kanälen zu teilen. Meisten sind sie links oder rechts angeschlagen. Da viele User*innen lieber die URL kopieren wird dies oftmals auch gleich in dieser Button-Kollektion angeboten.

Social Follow Buttons

Verlinkung zu den Social Media Accounts der Webseite. Also der Facebook Like oder Twitter Follow Button. Entweder wird man zuerst auf die Plattform gebracht oder kann direkt dem angezeigten Kanal folgen. Meistens im Footer zu finden.

Je dreimal ein Facebook und Twitter Sharebutton in verschiedenen Ausprägungen um der Verwechslungsgefahr von Share und Follow Buttons zu entgehen.
© Webedesign Essentials
Je dreimal ein Facebook und Twitter Sharebutton in verschiedenen Ausprägungen um der Verwechslungsgefahr von Share und Follow Buttons zu entgehen.
17
Aufklappen

Interlaced Content

Um einen klaren Fokus auf die Übersicht von Themen zu bieten, werden gestapelte Inhalts-Container genutzt. Entweder horizontal oder vertikal.

Tabs

Reiter mit verschiedenen Inhaltsboxen. Visuell an die Register eines Ordners angelehnt. Innerhalb der Reiter können beliebige Inhalte kommen. Tabs sind meistens horizontal.

Accordeon

Aufklappbare Content-Elemente. Ähnlich wie ein Tab. Innerhalb eines Accordeons können beliebige Module geladen werden. Meistens vertikal.

Der Vorteil von Accordeons gegenüber Tabs ist ihre Responsiveness. Tabs werden auf Mobile meistens in Accordeons umgewandelt.

Wireframe eines Accordeons und eines Tabs um die beiden Layoutvarianten zu zeigen.
© Webedesign Essentials
Wireframe eines Accordeons und eines Tabs um die beiden Layoutvarianten zu zeigen.
18
Journalistisches Modul

Blog / News

Blog oder News s-Seiten weisen oft ein Datum gesteuerte (chronologische) Anordnung auf. Meistens auch noch mit Autor.

Ein Blog-Artikel werden als separate Inhaltsseiten (Page-Types) in einem CMS verwaltet. Da sie über spezifische Attribute verfügen: Autor, Datum, Tags oder Kategorisierung usw.

Blog Overview

Verschiedene Blog-Artikel in einer Übersicht.

Blog Article Teaser

Ein Auszug eines Blog-Artikels als Teaser-Box. Meistens sind mehrere Blog-Article-Teaser in der Übersichtseite zu finden.

Blog Article / Blog Detail Page

Ein Blog-Artikel in seiner vollen Länge. Oftmals Richt-Text oder Bild, Video, Galerie und Text-Module.

Wireframe einer Blog-Übersichtseite sowie einer Blog-Detailseite.
© Webdesign Essentials
Wireframe einer Blog-Übersichtseite sowie einer Blog-Detailseite.
19
Events

Agenda / Calendar

Im Grunde ein sehr ähnliches Modul wie der Blog, bei einer Agenda gibt es jedoch Daten in der Zukunft und solche in der Vergangenheit. Meistens wandert ein vergangener Event dann ins Archiv.

Agenda Overview

Verschiedene Agenda-Events in einer Übersicht.

Agenda Event Teaser

Ein Auszug eines Events als Teaser. Meistens sind mehrere Event-Teaser in der Übersichtseite zu finden.

Event Detail Page

Eine Event-Page in seiner vollen Länge. Oftmals Richt-Text oder Bild, Video, Galerie und Text-Module.

Wireframe von Agenda-Events. Aufgeteilt in 3 «Upcoming Events» und 3 «Past Events»
© Webdesign Essentials
Wireframe von Agenda-Events. Aufgeteilt in 3 «Upcoming Events» und 3 «Past Events»
20
Fusszeile

Footer

Der Abschluss einer Webseite. Meist mit vielen Links. Der Sprachwechsel findet man immer öfters auch im Footer.

Meta Navigation

Oftmals ein Auszug aus den administrativ wichtigen Seiten eines Unternehmens. AGB, Impressum und Kontakt.

Kontakt

Meistens gibt der Footer eine Kontaktadresse an.

Copyright

Das Copyright wird oftmals im Footer geklärt.

Sitemap

Ein Zusammenzug aller Seiten der Webseite.

Wireframe eines Footers. Mit Social Media Buttons sowie Linklisten.
© Webdesign Essentials
Wireframe eines Footers. Mit Social Media Buttons sowie Linklisten.
25

Der Vergleich mit der Anatomie bringt uns mehr Verständnis mit welcher Logik wir unser Design planen müssen.

Wir haben nun ein grobes Verständnis über die technischen Aspekte einer Webseite. Widmen wir uns nun dem König. Der Inhalt, respektive die Geschichte die wir mit einer Webseite erzählen wollen ist das Fundament der technischen wie visuellen Erarbeitung einer Webseite.

Technik und Struktur

Nebst den physischen Elementen wie Pixel und Bildschirme sind Webseiten aus Code in Programmier- und Auszeichnungssprachen geschrieben. Diese Codezeilen sind die Bausteine der Webseiten-Anatomie. Die Anatomien von Webseiten sind oft sehr ähnlich. Die Begrifflichkeiten rund um Webdesign und der Welt, die es zu gestalten gilt, werden im Kapitel Cyberspace eingeführt.