Layout
Diese Seite verwendet ein "OnePage"-Layout. Das bedeutet alle Inhalte sind auf einer einzigen Seite dargestellt um dem Besucher die beste Übersicht zu bieten.

Der Inhalt wird mittig mithilfe eines Abstands zu beiden Seiten dargestellt. Dies stärkt die Übersichtlichkeit und richtet den Fokus direkt auf das Wichtige.
Je schmaler der Bildschirm, desto kleiner der Seitenabstand. Das erleichtert die Lesbarkeit auf kleinen Endgeräten enorm. Mehr dazu bei Responsive Design.

Das ganze Layout ist auf mehreren, in einander platzierten HTML Bausteinen aufgebaut. Diese erhalten ihre eigenen Designregeln und sind mehrfach verwendbar.
Um alle diese Bausteine sichtbar zu machen, lassen sich mit dem Button rechts Ränder zu den Elementen hinzufügen.

Responsive Design
"Responsive design" ist englisch und bedeutet ein sich anpassendes (wörtlich: antwortendes) Design. Damit ist die Anpassung des Layouts an die Bildschirmgrößen der verschiedenen Endgeräte wie Smartphones, Tablets oder Laptops gemeint.

Egal, auf welchem Gerät diese Seite geöffnet wird, sie wird immer einigermaßen lesbar präsentiert. Das liegt daran, dass hier ein Tabellen-Layout verwendet wird, das sich der Bildschirmgröße anpasst. Die einzelnen Zellen erkennt man, wenn man sich beim Abschnitt Layout die Borderlinien anzeigen lässt.
Falls diese Seite also auf einem mobilen Gerät mit einer maximalen Breite von 720 Pixeln geöffnet wird, werden die Spalten untereinander statt nebeneinander angezeigt. Beim Öffnen auf einem mittelgroßen Gerät (wie z.B. einem Tablet) ergibt sich wieder eine andere Anordnung.

Ein mobiles anpassendes (antwortendes) Design ist vor allem im Zeitalter von Smartphones und Tablets sehr wichtig, da die meisten Website-Aufrufe inzwischen von mobilen Geräten stammen.

Stylesheets
Stylesheets enthalten alle Regeln für das Design der Elemente der Homepage. Das Webdesign entsteht durch die Umsetzung der Regeln und das schlussendliche Rendern der Seite durch den Browser.

Bis vor kurzem hatten die meisten Browser verschiedene Syntaxen für die genannten Regeln. So musste das Stylesheet nicht nur eine, sondern bis zu vier Zeilen Code enthalten, die allerdings alle in der selben Funktion resultieren.
Das führt natürlich zu einer längeren Ladezeit der Website, da der Browser vor jedem Aufruf das komplette Stylesheet herunterladen muss.
Moderne Browser verwenden allerdings einheitliche Regeln, auf die diese Homepage unter anderem auch zugreift.

Der Button "Stylesheet entfernen" entlädt alle Regeln, um zu zeigen, wie diese Seite komplett ohne irgendeine Designbearbeitung aussehen würde.

Buttons & States
Buttons werden verwendet um andere Dinge, wie weitere Homepages oder Elemente der aktuellen Seite zu verlinken. Wie auch andere Elemente können Buttons bei verschiedenen Interaktionen des Besuchers unterschiedlich aussehen.

Generell existieren in der Web-Programmiersprache HTML mehrere Ereignisse (States), die Auswirkunken auf das Aussehen von Elementen haben können. Betroffene Elemente sind zum Beispiel Eingabefelder oder Buttons.
Die wichtigsten States sind im folgenden aufgelistet:

Hover State: Mit dem Hover Status ist das Ziehen der Maus über das betroffene Element gemeint. Hierbei ist es sinnvoll, dass dem Besucher durch ein anderes Styling klar gemacht wird, dass der Button über den er "hovert" eine Funktion hat
Focus State: Ein Element befindet sich im Focus Status nachdem es der Besucher angeklickt hat. Sobald etwas anderes auf der Homepage angeklickt wird, kehrt das Element zu seinem ursprünglichen Status zurück.
Visited State: Dieser Status wird häufiger bei klassischen Links als bei Buttons verwendet. Nach dem Öffnen eines Links wird dieser meist lila anstatt blau gefärbt, um dem Besucher zu zeigen, dass er ihn schon angeklickt hat. Als Beispiel dient der Link zum Impressum am unteren Ende der Seite.

Mehr zur Bedeutung der Farben und Icons (Piktogramme) ist im Abschnitt Fonts & Colors beschrieben

Pictures
Bilder und vor allem Hintergrundbilder lenken die Aufmerksamkeit vorerst auf sich und vermitteln somit dem Besucher eine gewisse Wertigkeit, die sich positiv auf die Meinung zur betrachteten Homepage auswirkt.

Das Full-Range Bild mit einer 100% Höhe am Anfang dieser Homepage täuscht dem Besucher erst vor, dass die Homepage nur aus diesem einen Bild besteht und lenkt den Fokus voll und ganz auf die Frage, welches das Thema dieser Seite ist.

Durch den hier verwendeten "Parallax"-Effekt, der das Hintergrundbild still bleiben lässt, während die restliche Homepage weiter scrollt, lässt sich eine 3D-Struktur erzeugen, die die Aufmerksamkeit ebenfalls auf die gewünschte Sektion der Homepage zieht.

Name

E-Mail

Adresse

Forms
Formulare ermöglichen dem Besucher mithilfe von Eingabefeldern Daten einzugeben, die dann z.B. durch das Klicken eines Buttons weiterverarbeitet werden können.

Um zu verstehen wie ein Formular funktioniert, können die gegebenen Felder mit beliebigen Daten ausgefüllt werden. Nach einem Klick auf "Visitenkarte erstellen", wird eine digitale Visitenkarte basierend auf den eingegebenen Daten erstellt.

Die Visitenkarte wird mithilfe eines Modals dargestellt.

Modals
Modals werden verwendet um dem Besucher eine wichtige Nachricht oder ein Kontextmenü anzuzeigen, das nicht in den restlichen Aufbau der Seite passt. Durch die Platzierung oberhalb der Homepage erlangt es sofort Aufmerksamkeit.

Ohne die Entwicklung des Webdesigns würde der Inhalt des Modals einfach am unteren Rand der Seite angezeigt werden. Erst eine Kombination aus Styling-Regeln macht es möglich, dass der Inhalt oberhalb der restlichen Seite erscheint.

Mehr dazu, wie das Styling in der Webentwicklung funktioniert und wie es aussehen würde alle Styling-Regeln zu entfernen, ist im Abschnitt Stylesheets beschrieben

Fonts & Colors
Das wichtigste der Homepage sind Texte bzw. Überschriften. Damit diese für den Betrachter interessant aber auch übersichtlich und einheitlich dargestellt werden, sind passende Schriftarten nötig.

Überschrift 1 Untertitel

Überschrift 2 Untertitel

Überschrift 3 Untertitel

Überschrift 4 Untertitel

Überschrift 5 Untertitel

Überschrift 6 Untertitel

Absatz-Text
Roter Text Gelber Text Grüner Text Blauer Text
Unterstrichener Text
Kursiver Text
Fetter Text
Durchgestrichener Text

Diese Homepage verwendet die Schriftart Roboto Condensed. Diese Schriftart wurde von Google entwickelt und wird auch im Smartphone-Betriebssystem Android verwendet. Sie fällt vor allem durch ihre horizontale Stauchung auf.

Auf der ganzen Homepage verteilt werden vier extra ausgesuchte Hauptfarben verwendet (siehe unter "Absatz-Text" oder Buttons). Diese machen dem Besucher unterbewusst klar welche Eigenschaften das Wort oder der Button hat. Folgende Farben werden verwendet:

Rot: Als Farbe für Gefahr bzw. Auffälligkeit
Gelb: Als Farbe für eine mildere Gefahr bzw. Warnung
Grün: Als Farbe für eine vollkommen legitime Funktion
Blau: Als Informations- oder Aktionsfarbe
Grau: Als Standardfarbe

Icon-Fonts, also Schriftarten die aus Piktogrammen bestehen, helfen dabei, bestimmte Funktionen von Dingen direkt zu verstehen und zeigen damit bestimmte Funktionen unbewusst intuitiver. Anwendungsbeispiele sind im Abschnitt Buttons.

Sourcecode
Die auf dieser Homepage enthaltenen Texte und sämtliche Quellcodes sind komplett selber geschrieben worden und enthalten keine fremden Inhalte. Externe Bilder und Icons zählen natürlich nicht dazu.

HTML

Jede Homepage besteht mindestens aus einem HTML Dokument. HTML ist hierbei die Programmiersprache die dem Browser sagt, welche Elemente er anzeigen soll.

CSS

Um diese anschließend zu designen und sie dem Besucher ästhetisch darzustellen ist ein weiteres Dokument nötig, aus dem hervorgeht wie das Aussehen der Elemente verändert werden soll. Wie die Seite ohne dieses CSS Dokument aussieht zeigt sich durch einen Klick auf den Button Stylesheet entfernen.

Zuletzt ist es nötig den erstellten Elementen Funktionen hinzuzufügen. Dazu zählen z.B. das Öffnen eines Modals oder das Enfernen und Hinzufügen von Borderlinien. Diese Funktionen werden in der Programmiersprache JavaScript (JS) geschrieben und in einem JS Dokument gespeichert.

Der Quellcode dieser Homepage ist öffentlich einsehbar auf dem Quellcode-Verwaltungs-Dienst "Github". Interessant sind folgende Dateien:

HTML Code: index.html
CSS Code: css / main.scss
JS Code: js / main.js
Quellcode auf Github ansehen

Layout Diese Seite verwendet ein "OnePage"-Layout. Das bedeutet alle Inhalte sind auf einer einzigen Seite dargestellt um dem Besucher die beste Übersicht zu bieten.

Responsive Design "Responsive design" ist englisch und bedeutet ein sich anpassendes (wörtlich: antwortendes) Design. Damit ist die Anpassung des Layouts an die Bildschirmgrößen der verschiedenen Endgeräte wie Smartphones, Tablets oder Laptops gemeint.

Stylesheets Stylesheets enthalten alle Regeln für das Design der Elemente der Homepage. Das Webdesign entsteht durch die Umsetzung der Regeln und das schlussendliche Rendern der Seite durch den Browser.

Buttons & States Buttons werden verwendet um andere Dinge, wie weitere Homepages oder Elemente der aktuellen Seite zu verlinken. Wie auch andere Elemente können Buttons bei verschiedenen Interaktionen des Besuchers unterschiedlich aussehen.

Pictures Bilder und vor allem Hintergrundbilder lenken die Aufmerksamkeit vorerst auf sich und vermitteln somit dem Besucher eine gewisse Wertigkeit, die sich positiv auf die Meinung zur betrachteten Homepage auswirkt.

Forms Formulare ermöglichen dem Besucher mithilfe von Eingabefeldern Daten einzugeben, die dann z.B. durch das Klicken eines Buttons weiterverarbeitet werden können.

Modals Modals werden verwendet um dem Besucher eine wichtige Nachricht oder ein Kontextmenü anzuzeigen, das nicht in den restlichen Aufbau der Seite passt. Durch die Platzierung oberhalb der Homepage erlangt es sofort Aufmerksamkeit.

Fonts & Colors Das wichtigste der Homepage sind Texte bzw. Überschriften. Damit diese für den Betrachter interessant aber auch übersichtlich und einheitlich dargestellt werden, sind passende Schriftarten nötig.