Vorlagen

Sind einzelne Elemente nicht ausführlich genug erklärt oder gestaltet sich die Einbindung komplex, sollten Sie hier einige der Vorlagen herunterladen. Einzelne Bereiche des Frameworks sind hier als Demo verfügbar und können durch die MIT Lizenz für eigene komerzielle Projekte angewendet werden.


Typografie

Der Begriff kommt aus dem Altgriechischen und wird am besten übersetzt durch �Arbeiten mit Schrift�. Heutzutage ist Typografie ein wichtiger Bestandteil in jedem Design Prozess. Die richtige Schriftwahl sowie Schriftstärke sind ausschlag geben für die Informationen die übermittelt werden sollen. Zeilenabstände, Buchstabenabstände sowie Zeilenlänge sind weitere wichtige Punkte die die Lesbarkeit von Informationen verbessern. Die Templates unter diesem Punkt befassen sich der Darstellung von Informationen.

Überschriften

Um speziell auf die Gliederung von Texten einzugehen haben wir das Überschriften Template erstellt. Es soll zeigen wie Informationen aufbereitet werden sollten um Leser anzusprechen. Sowie welche Struktur Texte haben sollten um dem Leser alle wichtigen Informationen zu vermitteln.

Template Headings

Blogs verfassen

Das Template Blogs verfassen bietet dem Benutzer eine einfache Möglichkeit das Grundgerüst einer Blogseite herunterzuladen. Die Blogseite besteht aus einer Seitennavigation und einem Inhaltsbereich in dem die Blogeinträge dargestellt werden.

Template Blog

Auskunftswebseite

Die Auskunftswebseite ist das perfekte Template für jede Webseite mit viel Information. Sie ist rein dazu gedacht dem Besucher so viel Information wie möglich übersichtlich darzustellen. Das Template besteht aus einem Header, Content und Footer. Um den Besucher der Seite nicht mit Text zu überfordern wurden einige Bilder verwendet die Abwechslung in das Template bringen sollen.

Template Informationwebsite

Benutzereingaben

Die Benutzereingabe veranschaulicht wie die Eingabe Elemente des Frameworks eingesetzt und kombiniert werden können. Das Template bietet ein Standard Formular welches zum Beispiel für eine Registrierung oder einen Kaufabschluss verwendet werde kann.

Template User Input

Semantik

In diesem Abschnitt wird speziell auf die verschiedenen Layout Möglichkeiten bei der Entwicklung von Webseiten eingegangen. Außerdem wird ein weiterer wichtiger Bestandteil in der Webentwicklung gezeigt und zwar die Semantik. Sie sorgt dafür, dass die einzelnen Informationen einer Webseite besser strukturiert sind und mehr Aussagekraft bekommen.

Grundgerüste

Unter diesem Punkt befinden sich einige Vorlagen die verschiedene Layout Möglichkeiten aufzeigen um beispielsweise Graphen oder Photos darzustellen. Weiteres zeigen die Vorlagen wie die Semantischen Elemente verwendet werden sollten.

Grafik vorstellen

Template Graphic

Foto vorstellen

Template Photo

Seitennavigation

Template Sidenav

Grid System

Da unser Framework ein komplexes Grid System beinhaltet gibt es auch Vorlagen die zeigen welche Möglichkeiten es bietet und welche Layout Optionen sich damit realisieren lassen. Unter diesem Punkt wird speziell auf die Verwendung des Grid Systems für Layoutzwecke eingegangen.

Drei Boxen

Template three Boxes

Fünf Boxen

Template five Boxes

Fortgeschrittenes Grid

Template advanced Grid

Starkes Grid

Template strong Grid

Logik

Unter diesem Punkt befinden sich fertig gestaltete Vorlagen für verschiedene Bereiche. Die beiden Standardseiten Registration und Anmeldung können hier heruntergeladen werden. Weiteres gibt es ein Template um Bilder oder Fotos auf einer Webseite darzustellen sowie ein Template für den Parallax Effekt.

Benutzer Anmeldung

Die Benutzeranmeldung veranschaulicht wie das Login einer Seite aussehen könnte. Sie besteht aus einem Login Formular sowie einem Hintergrundbild. Die Eingabefelder als auch der Hintergrund können nach belieben angepasst werden.

Template Login

Benutzer Registration

Die Benuterregistation zeigt wie eine mögliche Registrationsseite aussehen könnte. SIe besteht ebenfalls aus einem Formular und einem Hintergrundbild. Das Eingabeformular als auch der Hintergrund können nach belieben angepasst werden.

Template Registration

Parallax

Der Parallax Effekt ist ein interaktiver Effekt im Webdesign. Bei diesem Effekt werden verschiedene Objekte auf unterschiedlichen Ebenen voneinander positioniert wodurch eine art Räumlichkeit und Bewegung simuliert wird. Dieses Template eignet sich perfekt wenn Sie Bewegung in ihre Webseite bringen wollen.

Template Parallax