Greve – Medien

Organisches Webdesign

26. September 2010   Webdesign, Website HowTo Keine Kommentare

Jede Seite einer Website besteht aus einem oder mehreren Rechtecken, die die dargestellte Fläche des Webbrowsers ausfüllen. Innerhalb dieser Rechtecke wird dann der sichtbare Inhalt dargestellt. Meist gibt es eine horizontale Kopfleiste, mehrere vertikale Spalten und abschließend eine horizontale Fußleiste.
Diese grobe Grundstruktur hat sich inzwischen bewährt und kommt wohl bei den meisten Websites zum Einsatz. Damit nun aber nicht alle Websites gleich aussehen und damit sehr langweilig wirken würden, bemüht man sich um eine individuelle Note innerhalb dieser Aufteilung. Dies wird zum Teil durch eine unkonventionelle Aufteilung innerhalb der Grundstruktur erreicht, häufiger aber durch geschickten Einsatz von Hintergrund-Mustern und -Farben. Hierbei haben sich bestimmte Stile entwickelt, die teilweise schon einen eigenen Namen erhalten haben. Eine Stilrichtung ist das “Organische Webdesign” für das ich hier ein paar Beispiele aufführen möchte.

Hier wird mittels Zeichnungen, Hintergrundmustern und Schreibschriften eine optische Anmutung wie bei Prospekten aus den 60er Jahren des vorigen Jahrhunderts erzeugt.

---

Auch hier werden Zeichnungen in einem typischen Stil verwendet, den man z.B. aus Lehrbüchern früherer Zeiten kennt. Durch die Wahl des Hintergrunds entsteht der Eindruck, die Seite wäre auf sehr grobem Papier gedruckt.

---

Und wieder Zeichnungen aus einer anderen Epoche als Stilelemente dieser Website.

---

Zeichnungen, Hintergrundmuster und Überschriften ergeben hier den ganz eigenen Charakter der Website.

---

Auch hier sind es in erster Linie die Zeichnungen, die den Charakter der Website bestimmen.

---

Die Header-Collage in Übergröße bestimmt hier den Stil der Website.

---

Groß, schräg, skizziert, so erscheint diese Website.

---

Ähnlich wie das Beispiel zuvor.

---

Ein Kinderbuch könnte hier Pate gestanden haben.

---

Auch hier bestimmt wieder die Grafik das Aussehen der Website.

---

Ein übergroßes Selbstportrait, große Schriftzüge und feine Hintergrundmuster bestimmen den Charakter dieser Website.

---

Farben und Hintergrundmuster sind hier bestimmend für den Charakter.

---

Eine ganz raffinierte Website, bei der fast nur Handskizziertes und Handgeschriebenes zum Einsatz kommt – wirklich unverwechselbar.

---

Eine Demonstration einiger der vielen Möglichkeiten von CSS3. Aufgrund der schrägen Darstellung der Elemente und des geschickten Einsatzes des Hintergrundmusters ergibt sich auch hier ein handgearbeiteter Stil.

---

In einem weiteren Artikel möchte ich als Kontrast zu den obigen Beispielen Seiten zeigen, die unter dem Begriff “Web 2.0 Look” eine ganz andere Richtung einschlagen.