Design für GLG Posts

Part 0: Columns und Elemente

Ein Column reserviert einen Berreich der Seite für seinen Inhalt.

Er kann Ränder, Hintergründe oder sogar animationen haben und enhält Elemente

Ein Element ist der Eigentliche Inhalt der Seite.

Neben Text und Bildern gibt es viele vordefinierte Elemente die sich in columns einsetzen lassen

Sowohl Columns als auch Elemente lassen sich benennen, der name ist nur beim Bearbeiten sichtbar und dient nur dazu, sie ausernanderzuhalten und wiederzufinden.

Wenn ein neues Column keinen Platz mehr in der letzten reihe findet. fängt es eine neue an.

2/5 Column

2/5 Column reiht sich an das letzte Column an

1/4 Column hat keinen Platz mehr und fängt eine neue Zeile an

In einem Coumn können beliebig viele Elemente eingefügt werden, wenn der Inhalt zu viel platz einnimmt, wächst das Column nach unten, aber niemals nach links oder rechts

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

Die Reihenfolge in der Columns oder Elemente angezeigt werden lässt sich in der Seitenleiste verändern, in dem man sie einfach anklickt und zieht. Das gleiche lässt sich auch in der Editoroberfläche machen.

Ein Padding fügt zusätlichen Platz innerhalb des Objekts ein

Eine Margin fügt zusätzlichen Platz ausserhalb des Objekts ein

Part 1: Personen Vorstellen

Part 2: Bilder und Logo

Die Drei Farben des Logos sind unter Logo Dark Blue, Logo Green und Logo Light Green in jeder Farbauswahl zu finden.
In den meisten Farbauswahlen sind sie unter den globalen Farben gespeichert, leider nicht im sidebar Texteditor.

Im Styleguide des Logos ist ein “Schutzraum” von einer Hexagonhöhe festelegt.
Das Bedeutet, dass wir um das logo mindestens diese distanz an Platz lassen sollen.

Part 3: Graphen

Die art des Graphen wird unter “Chart Type” definiert.

Die Daten in einem Graphen lassen sich unter “edit chart data table” einfügen.

Viewing Time Analysis

Data suggests that viewing a chart increases the amount of time it has been seen. Further research may be necessary to study the impact that not viewing it could have.

Part 4: Medien

In einem Post lassen sich auch verschiedene Medien einbetten.

Möglich sind zum Beispiel Videos:

Oder Musik:

Oder auch vordefinierte Container mit mehreren Bildern:

Oder Referenzen auf andere Posts:

Part 5: Text und Farben

Standartmäsig gibt es 7 vordefinierte Textsorten:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Falls diese nicht reichen, lässt sich jedes Textfeld unter “Design” weiter anpassen.

Diese Änderungen betreffen dann aber nur den Texttxp “paragraph”

Leider haben wir nur die Roboto schriftart aus dem Logo Design aber nicht die Miso Schriftarten

In Manchen Fällen kann es vorkommen, dass man auf Bildern oder ungleichen oberflächen schreibt.

Für die Lesbarkeit sollte man immer davon ausgehen, dass ein Text für den Leser noch etwas schwerer zu erkennen ist als es einem selbst vorkommt.

Texte lassen sich im Texteditor färben, im Notfall kann jeder Teil des Textes gefärbt oder vergrössert werden.

Solange sich der Hintergrund nicht in zu wenig Distanz schon zu sehr verändert, kann man ihn falls unbedingt nötig lesbar darstellen.

Part 6: Links

Links können in einem text, Bild oder einer Schaltfläche enthalten sein.

Hierbei lässt sich einstellen ob ein Link standartmässig in einem neuen Tab geöffnet werden soll oder nicht.