Symbolik und Einsatzmöglichkeit von Kreisen im Webdesign

Nachdem wir im vorigen Artikel jede Menge innovative Webseiten mit Kreis-Elementen gesehen haben, möchte ich heute den Kreis als Form noch einmal genauer unter die Lupe nehmen und seine Bedeutung und Symbolik analysieren. Außerdem gibt es etliche Inspirationen, wie du Kreise auch in deinen Webdesigns verwenden kannst.

1. Die Symbolik von Kreisen

Die Menschen beschäftigen sich seit jeher intensiv mit der faszinierenden Form des Kreises. In jeder Religion und Kultur wird dem Kreis eine besondere Bedeutung zugetragen, und er wird als einheitliche Form und Symbol der Vollkommenheit und des Ganzen verehrt.

Leonardo Da Vinci zeichnete 1492 seinen vitruvianische Menschen mit ausgestreckten Gliedmaßen in einem Kreis und einem Quadrat gemeinsam. Die Theorie dabei ist, dass der menschliche Körper sowohl aus der Grundform Kreis, als auch aus einem Quadrats vermessen werden kann.

Auch in östlichen Kulturen wird der Kreis geehrt. Im japanischen Zen-Buddhismus ist es zum Beispiel üblich den Kreis »Ensō« als meditative Übung immer und immer wieder zu malen.

Symbolik von Kreisen im Webdesign
(Foto-Kredit: KayVee.INC)

Ein Ensō (das jap. Wort für Kreis) zu malen bedeutet in der japanischen Kultur, dass der Geist frei ist und nur der Ausdruck des Moments zählt.

Mandala (Sanskrit für Kreis, Zentrum) symbolisiert im tibetischen Buddhismus die physische und spirituelle Einheit. Tibetische Mönche legen in stunden- oder wochenlanger Arbeit aufwendige Sand-Mandalas (in Kreisformen oder Quadraten), die nach der Fertigstellung als Symbol der Vergänglichkeit des Lebens wieder verwischt werden.

Symbolik von Kreisen im Webdesign
(Foto-Kredit: S C Hargis Photography)

2. Kreise in Kunst und Architektur

Auch Künstler und Architekten sind vom Kreis fasziniert und greifen die Form immer wieder in ihren Werken auf. Ein wichtiger Meilenstein für die moderne Kunst war z.B. die Auseinandersetzung des russischen Künstlers Kasimir Malevich, der sich 1913-15 in seinem berühmten Werken »Black Square« und »Black Circle« mit den Grundformen Quadrat und Kreis auseinandersetze und mit seinen Arbeiten die damalige Kunstwelt revolutionierte.

Eine spannende Auseinandersetzung mit der Kreisform kann man auch in den Arbeiten des Land Art Künstlers Richard Long beobachten. Long Kunstwerke entstehen meist direkt in der Natur, während oft tagelanger Wanderungen. Der Künstler nennt diese Vorgehensweise »art made by walking«, und erstaunlicher Weise stellen seine Arbeiten immer wieder geometrische Grundformen, meist Kreise dar, die der Künstler aus Steinen und anderen Naturmaterialien auf die Erde legt.

Symbolik von Kreisen im Webdesign
Richard Long, Sea Lava Circles, 1988 (Foto-Kredit: ydhsu)

Auch in der Architektur gibt es jede Menge spannende Ansätze, Kreise als Grundform zu nutzen. Tulou sind beispielsweise traditionelle Kreisrunde chinesische Häuser, die von der Hakka-Volksgruppe in Südostchina seit dem 12. Jahrhundert gebaut werden. Ein solches Tulou ist aus hohen Lehmmauern gebaut und kann bis zu 800 Menschen beherbergen.

Symbolik von Kreisen im Webdesign
(Foto-Kredit: kudumomo)

3. Kreise im Webdesign

Gerade im Webdesign bieten Kreise eine erfrischende Abwechslung, da bedingt durch die HTML/CSS-Programmierung eigentlich eckige Formen vorgegeben sind. Natürlich macht es für die meisten angewandten Designs keinen Sinn, nur Kreisformen zu verwenden, aber gerade dezent eingesetzt können Kreise ein Raster-Design angenehm auflockern.

Derzeit sieht man die Kreis-Formen in den unterschiedlichsten Bereichen einer Webseite im Einsatz. Ich habe einige Bespiele für den Einsatz von Kreis-Elementen im Webdesign zusammen gestellt.

3.1. Als Menüpunkte

Symbolik von Kreisen im Webdesign
Auf der Webseite von David Hellmann sind Kreise als erfrischende Menü-Punkte im Einsatz.

3.2. auflockernde grafische Elemente

Symbolik von Kreisen im Webdesign
Bei MIX Online kommen jede Menge Farben und Kreise als auflockernde, grafische Elemente zum Einsatz.

3.3. Webseiten-Logo

Symbolik von Kreisen im Webdesign
Das Logo von Trent Walton ist wunderschön schlicht und zeigt seine Initialen auf einem Kreis.

3.4. Elemente wie Datum, Nummern, Icons

Symbolik von Kreisen im Webdesign
Ismael Burciaga setzt auf seiner Webseite Kreise für Daten, Nummerierungen und Social Media Icons ein.

4. Kreise mit CSS3 Border-Radius

Um deine Webseite in allen Browsern kompatibel zu gestalten, kannst du natürlich mit Hintergrund-Bildern arbeiten, um Kreise in deinem Webdesign zu realisieren. Doch auch der Einsatz von CSS3 Border-Radius wird immer beliebter, und wird in fast allen Browsern (eine Ausnahme bildet mal wieder der Internet Explorer) unterstützt.

Im interessanten Blog-Artikel »The hidden power of border-radius« auf CreativityDen kannst du dir jede Menge kreative Beispiele ansehen, was alles mit der CSS3 Border-Radius-Eigenschaft möglich ist.

Zur Umsetzung in deinem CSS-StyleSheet sind auch die Online-Tools Border Radius und der CSS-Generator sehr hilfreich.

Wie gefallen dir die Kreis-Formen im Webdesign, und welche Entwicklung wird der Kreis-Trend deiner Meinung nach nehmen? Über deine Meinung und dein Feedback freue ich mich sehr!

9 Kommentare zu “Symbolik und Einsatzmöglichkeit von Kreisen im Webdesign

  1. Das der IE immer eine Ausnahmen sein muss,…
    Sehr interessanter Artikel übrigens :)

    • Hallo Chrissy,

      vielen Dank für dein Feedback zum Artikel :-) IE ist immer so ein Sorgenkind…Naja, wenn es die abgerundeten Ecken oder Kreis-Formen nicht unbedingt vom Design notwendig sind, können IE-Nutzer meiner Ansicht nach auch auf diese verzichten ;-)

      Viele Grüße
      Ellen

  2. Microsoft sei Dank (endlich!), nimmt diese Ausnahme mit dem IE9 endlich ein Ende ;o)

    • @Webstandard-Blog: Oh ja, da freue ich mich schon drauf, hoffe nur, dass alle Nutzer dann auch updaten werden :-)

      Viele Grüße,
      Ellen

  3. Ich bin ja auch immer in Versuchung, diese neuen Eigenschaften von CSS3 zu nutzen. Realistisch gesehen sind die Anforderungen der Kunden jedoch uneingeschränkte Usability/Browser-Kompatibilität. Insofern liegt das gelobte Land von CSS3 wohl noch in ferner Zukunft.

  4. @nnwebdesign
    Browserkompatibilität bedeutet nicht, dass eine Website in jedem Browser identisch aussehen muss. Ein Film auf einer Bluray Disc ist ja auch nicht schwarz/weiß und mit einer niedrigen Auflösung – nur um das Bild auf allen TV-Geräten seit den 40er-Jahren identisch aussehen zu lassen.

    Um das Web voranzubringen kann man nicht den schlechtesten Browser als Grundlage für ein Webdesign nehmen. Wichtiger ist es die besten/neusten Techniken anzuwenden und Seiten so zu schreiben, dass auch auf dem IE6 die Informationen übermittelt werden aber die Seite dann eben im aktuellen Firefox am besten aussieht.

    MS wird den IE6 wohl noch bis 2014 unterstützen, wir können definitiv nicht noch 4 Jahre auf CSS3/HTML5 verzichten:-) Wenn jemand Filme in hoher Auflösung sehen möchte muss er sich einen LCD o.ä. kaufen, wenn jemand alle Vorzüge eines modernen Webdesigns genießen möchte muss er sich einen KOSTENLOSEN modernen Browser herunterladen.

    Sinnvoll ist es natürlich auch immer den Besucher einer Homepage auf seinen veralteten Browser hinzuweisen.

  5. @nnwebdesign, @Thomas,

    alte Browser vs. neue Techniken, das ist sicher ein großes Problem, vor allem da die Entwicklung im Web so schnell geht und Regeln und Standards sehr schnell veralten.

    Meiner Meinung ist es besonders als Webdesigner sehr wichtig, sich immer an die neusten Techniken zu halten und diese zu nutzen bzw. als neue Standards zu unterstützen. Das dies nicht bei allen Kunden gewünscht ist, ist sicher Realität und auch sehr schade, eventuell kann man mit ein bisschen Aufklärung aber ja auch ein offenes Ohr bei Kunden gewinnen und diese so von modernen CSS3-Techniken überzeugen.

    Den Vorschlag von Thomas, Nutzer veralteter Browser auf die neueren Version hinzuweisen (was z.B. mit diversen WordPress-Plugins leicht möglich ist) finde ich eine gute Lösung.

    Das man gerade als Webdesigner nicht zurückhalten sollte bzw. es sich auch nicht leisten kann, die neuen Techniken (CSS3, HTML5) zu ignorieren, halte ich ebenfalls für sehr sinnvoll. Eine mögliche Option ist es vielleicht, bei der eigenen Webseite neue Techniken zu nutzen und sich so weiterzubilden :-)

    Beste Grüße,
    Ellen

  6. Oder man macht es so wie bei den neuen Umweltzonen, die in einigen Städten eingeführt wurden. Man muss ein Auto fahren, dass gewissen Standards entspricht, was Emissionsausstoß etc. betrifft – gekennzeichnet durch grüne, gelbe und rote Plaketten. Wer keine oder nicht die richtige Plakette für sein Fahrzeug erhalten hat, darf nicht in die Stadt fahren. Aufs Web bezogen: Wessen Browser nicht gewissen Standards entspricht muss draußen bleiben.

    Ich weiß, das ist unrealistisch. Aber man wird ja wohl noch träumen dürfen…:-)

    PS: http://plugins.jquery.com/project/crash :-) einfach Flächendeckend einbauen

  7. Ich möchte gerne mehr mit Symbolen für bestimmte Berufsgruppen, (Ärzte, Ingenieure, Handwerker, Lofistiker usw. arbeiten). Wer kann mir helfen?

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *