{"id":3846,"date":"2017-03-13T17:35:26","date_gmt":"2017-03-13T16:35:26","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=3846"},"modified":"2021-06-11T14:45:25","modified_gmt":"2021-06-11T12:45:25","slug":"goldener-schnitt-webdesign","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign","title":{"rendered":"Der Goldene Schnitt und Webdesign"},"content":{"rendered":"<p>Sind die Proportionen aufeinander abgestimmt, wirkt das auf den Betrachter \u00e4sthetisch und harmonisch. Die Perfektionierung dieser Technik nennt sich \u201e<a title=\"Goldener Schnitt\" href=\"https:\/\/de.wikipedia.org\/wiki\/Goldener_Schnitt\" target=\"_blank\" rel=\"noopener\">Goldener Schnitt<\/a>&#8222;. Was darunter genau verstanden wird, erkl\u00e4re ich dir in folgendem Artikel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3851\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldener-Schnitt-und-Webdesign.jpg\" alt=\"Der Goldene Schnitt und Webdesign\" width=\"800\" height=\"533\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldener-Schnitt-und-Webdesign.jpg 800w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldener-Schnitt-und-Webdesign-300x200.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldener-Schnitt-und-Webdesign-575x383.jpg 575w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<h2>Goldener Schnitt<\/h2>\n<p>Es gibt verschiedenste Herangehensweisen um den Goldenen Schnitt zu erkl\u00e4ren. Dieser kann in Verbindung mit der Mathematik, der Kunstgeschichte oder der Esoterik gesehen werden. Alle drei Begriffsgeschichten hier zu erkl\u00e4ren, w\u00fcrde aber den Rahmen des Artikels sprengen.<\/p>\n<p>Als Ergebnis sollst du nach dem Lesen verstehen, was es mit dem Goldenen Schnitt auf sich hat und wie das Konzept, oder zumindest Teilbereiche davon, auch f\u00fcr deine Gestaltungen im <a title=\"Webdesign Agentur Wolkenhart\u00ae\" href=\"https:\/\/wolkenhart.com\/\"><strong>Webdesign<\/strong><\/a> Sinn machen k\u00f6nnen.<\/p>\n<h3>Der Goldene Schnitt und dessen Ursprung in der Mathematik<\/h3>\n<p>Beim Goldenen Schnitt steht vor allem das mathematische Verh\u00e4ltnis der einzelnen Bestandteile eines Elementes im Zentrum. Alle einzelnen Teile stehen in einer mathematischen Verbindung. Das Verh\u00e4ltnis des gesamten Elements zu dem gr\u00f6\u00dften Teil sollte gleich dem Verh\u00e4ltnis des gr\u00f6\u00dften Teils zum kleinsten sein. Das exakte Verh\u00e4ltnis ist dabei 1:1,618. Diese Zahl hat in der Mathematik eine ganz besondere Bedeutung. Es ist die irrationale Zahl Phi. Eine Besonderheit von Phi ist, dass die Darstellung der Zahl als Bruch mit ganzen Zahlen unm\u00f6glich ist.<\/p>\n<p>Wichtig f\u00fcr den Goldenen Schnitt ist auch die <a title=\"Fibonacci-Folge\" href=\"https:\/\/de.wikipedia.org\/wiki\/Fibonacci-Folge\" target=\"_blank\" rel=\"noopener\">Fibonacci-Folge<\/a>. Dabei handelt es sich um eine unendliche Folge von nat\u00fcrlichen Zahlen. Diese Zahlenreihe startet mit der Zahl 0, gefolgt von zwei Mal der Zahl 1. Nach der 0 hat jede weitere Fibonacci-Zahl eine exakte Logik: sie ist die Summe der beiden vorangegangenen Zahlen. Das bedeutet also, dass nach den Zahlen 0, 1, 1, die Zahl 2 folgt (1+1), danach die Zahl 3 (1+2) und dann die Zahl 5 (2+3). Diese Folge kann unendlich weitergef\u00fchrt werden.<\/p>\n<p>Was hat nun aber die irrationale Zahl Phi mit der Fibonacci-Folge zu tun? Je h\u00f6her die Fibonacci-Zahl, desto mehr \u00e4hnelt sich der Quotient zweier nachfolgender Zahlen dem Goldenen Schnitt. Der Mathematiker, der diese Zahlenfolge entdeckt hatte, Fibonacci, hatte aber keine Ahnung, dass diese Zahlen sp\u00e4ter im Zusammenhang mit der Gestaltung von Elementen verwendet werden w\u00fcrden. Sie diente ihm am Beginn des 11. Jahrhunderts lediglich dazu, die Population von Kaninchen mathematisch darzustellen.<\/p>\n<h4>\u201eDer vitruvianische Mensch\u201c von Leonardo da Vinci<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3856\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Der-vitruvianische-Mensch-von-Leonardo-da-Vinci.jpg\" alt=\"\u201eDer vitruvianische Mensch\u201c von Leonardo da Vinci\" width=\"800\" height=\"1074\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Der-vitruvianische-Mensch-von-Leonardo-da-Vinci.jpg 800w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Der-vitruvianische-Mensch-von-Leonardo-da-Vinci-223x300.jpg 223w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Der-vitruvianische-Mensch-von-Leonardo-da-Vinci-763x1024.jpg 763w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Der-vitruvianische-Mensch-von-Leonardo-da-Vinci-575x772.jpg 575w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Um dich jetzt noch ein wenig mehr zu verwirren, kam dann noch einer der bekanntesten K\u00fcnstler der Menschheitsgeschichte, <a title=\"Leonardo da Vinci\" href=\"https:\/\/de.wikipedia.org\/wiki\/Leonardo_da_Vinci\" target=\"_blank\" rel=\"noopener\">Leonardo da Vinci<\/a>, ins Spiel. Er hatte zuvor von dem Mathematiker <a title=\"Luca Pacioli\" href=\"https:\/\/de.wikipedia.org\/wiki\/Luca_Pacioli\" target=\"_blank\" rel=\"noopener\">Luca Pacioli<\/a> eine Einf\u00fchrung in die mathematische Materie erhalten. Da Vincis Illustration aus dem Jahr 1490 mit dem Namen \u201evitruvianische Mensch\u201c war dann auch der Grund, dass dieser Mathematiker Pacioli einen Text unter dem Titel \u201eG\u00f6ttliche Proportion\u201c verfasste. Diese Ver\u00f6ffentlichung sollte sp\u00e4ter viele K\u00fcnstler und Geisteswissenschaftler beeinflussen. Der Text erlangte aber erst 1854 durch den deutschen Lehrer <a title=\"Adolf Zeising\" href=\"https:\/\/de.wikipedia.org\/wiki\/Adolf_Zeising\" target=\"_blank\" rel=\"noopener\">Adolf Zeising<\/a> in dem Buch \u201eNeue Lehre von der Proportion des menschlichen K\u00f6rpers\u201c Bekanntheit.<\/p>\n<p>Der <strong>Goldene Schnitt<\/strong> war somit geboren, galt aber lange als ein R\u00e4tsel. Im Konkreten vor allem die Tatsache, dass genau diese Proportionen unabh\u00e4ngig voneinander in der Natur, im menschlichen K\u00f6rper, in der Architektur und in der Kunst vorkamen. Aus Erkl\u00e4rungsnot, wieso genau dieses Verh\u00e4ltnis immer wieder unbewusst verwendet wurde, wurde der Goldene Schnitt schlicht als Gottes Geschenk und als Teil des Bauplans des Universums bezeichnet. Daher bekam er lange Zeit \u2013 und nicht zuletzt von Pacioli &#8211; den Beinamen des \u201eg\u00f6ttlichen Schnittes\u201c. Von Gott gegeben, empfand man ihn nun als die sch\u00f6nste, existierende Proportion.<\/p>\n<p>Nat\u00fcrlich entsprach diese Erkl\u00e4rung aber nicht den Tatsachen. Viele Kunstwerke wurden schlichtweg dem Goldenen Schnitt zugeordnet, obwohl sie nat\u00fcrlich unter ganz anderen Gesichtspunkten entstanden sind und nichts mit dem vorhin erkl\u00e4rten Verh\u00e4ltnis zu tun hatten. Als bestes Beispiel gilt der \u201evitruvianische Mensch\u201c von da Vinci. Pacioli hatte zwar aufgrund dieser Illustration seine Theorie aufgestellt, da Vincis Absichten f\u00fcr die Gestaltung der Zeichnung waren aber nat\u00fcrlich ganz andere.<\/p>\n<p>Wie kam es dann aber dazu, dass der \u201egottgegebene Schnitt\u201c pl\u00f6tzlich \u00fcberall zum Vorschein kam? Damals glaubten Gelehrte fest an diese Theorie. Es war die einzig geltende Erkl\u00e4rung. Ein Objekt wurde so lange betrachtet und interpretiert, bis auch hier der Goldene Schnitt zur Interpretation angewendet werden konnte. In der Tat fand man aber nie ein Dokument, in dem ein K\u00fcnstler explizit erkl\u00e4rte, diese Proportion absichtlich verwendet zu haben.<\/p>\n<h4>Die heutige Anwendung des Goldenen Schnitts<\/h4>\n<p>Was folgten, waren K\u00e4mpfe der Ideologien. Noch heute gibt es einige Verfechter der Theorie des G\u00f6ttlichen. Fest steht bei all diesen Diskussionen eines: ein harmonisches Verh\u00e4ltnis bleiben weiterhin ein wichtiges Gestaltungsmerkmal in Designs. Daher kommt der Goldene Schnitt hier als Theorie gerade richtig. Es ist heute vor allem die Fibonacci-Folge, die ansatzweise f\u00fcr den Aufbau von Gestaltungsrastern verwendet wird. Diese Raster sind wichtig, damit ein Webdesigner seine Kreationen an Linien ausrichten kann. Die Ausrichtung der Raster auf Basis der Fibonacci-Zahlen hat den Vorteil, dass Designs sehr konsistent aufgebaut sind. Die Proportionen wiederholen sich in allen Gestaltungselementen \u2013 vom gr\u00f6\u00dften bis zum kleinsten \u2013 und das wirkt auf den Betrachter homogen und harmonisch.<\/p>\n<p>Die Diskussionen um den Goldenen Schnitt gibt es, so wie fr\u00fcher, auch heute noch. Es wird wild darauf los interpretiert, welche mathematische Formel noch mit dem Goldenen Schnitt in Verbindung gebracht werden k\u00f6nnte. Da gibt es beispielsweise die Nautilus-Spirale \u2013 sie ist nur eine von vielen Auspr\u00e4gungen. Viele Erkl\u00e4rungen wirken dabei v\u00f6llig beliebig und weit hergeholt. Meiner Meinung nach muss man sich nur eines merken: in jedem Design findet sich ein Bildteil, das den meisten Platz einnimmt und daher zum wichtigsten Element erkl\u00e4rt werden kann. In den meisten F\u00e4llen liegt dieses Element dann noch auf einer Teilungslinie.<\/p>\n<p>Das soll nun aber nicht hei\u00dfen, dass der Goldene Schnitt und eine Aufteilung von 1,618 auf ein Layout sinnlos ist. Es kann helfen, gleich zu Beginn der Erstellung ein harmonisches Seitenlayout zu schaffen.<\/p>\n<h5>Wie wird die Ratio nun in der Praxis angewandt?<\/h5>\n<p>Wenn du ein Layout von einer Gesamtbreite von 1.080 Pixel hast und dieses in zwei Spalten aufteilen willst, berechnet sich das folgenderma\u00dfen: man dividiert die Gesamtbreite durch den Ratio (1080 : 1,618 = 667). Somit ist der gr\u00f6\u00dfte Teil 667 Pixel gro\u00df und der kleinste Teil umfasst alles, was vom Seitenlayout noch \u00fcbrig bleibt (1080 \u2013 667 = 413).<\/p>\n<p>Ob du nun richtig gerechnet hast, l\u00e4sst sich schnell durch eine Gegenprobe feststellen. Dazu teilst du den gr\u00f6\u00dferen Teil, die 667 Pixel, durch den kleineren, die 413 Pixel. Das ergibt nun 1,615. Du siehst also, dass das fast dem Goldenen Schnitt entspricht, der ja bei 1,618 liegt. Dasselbe gilt, wenn du die Gesamtbreite, 1080 Pixel, durch den gr\u00f6\u00dferen Teil, 667 Pixel, teilst. Das Ergebnis ist 1,619. Nat\u00fcrlich sind solche Berechnungen nicht nur mit absoluten Werten wie mit Pixeln m\u00f6glich, auch auf Basis von <em>em<\/em> funktioniert das.<\/p>\n<h6>Die einfachere Drittelregel im Alltag<\/h6>\n<p>Das Ganze h\u00f6rt sich jetzt wahnsinnig kompliziert an und es sieht so aus, als m\u00fcsste man zu Beginn jedes Projekts komplizierte Rechnung anstellen. Zum Gl\u00fcck gibt es daf\u00fcr die vereinfachte Version des Goldenen Schnittes. Diese nennt sich dann \u201eDrittelregel\u201c. Somit wird auch ohne komplexe Berechnung eine harmonische Aufteilung m\u00f6glich gemacht. Du teilst dazu ein Bild bzw. ein Element, sowohl horizontal als auch vertikal, in neun gleiche Abschnitte. \u00dcber dem Element liegt nun ein Grid mit neun gleich gro\u00dfen Zellen.<\/p>\n<p>Nimm als Beispiel an, dass du ein Header oder Slider Grafik\/Bild vor dir liegen hast. Um die Drittelregel anzuwenden, identifizierst du die wichtigsten Elemente und positionierst sie an einem der vier Kreuzungspunkten des Rasters. Durch die nicht zentrierte Ausrichtung erh\u00e4lt das Bild automatisch einen viel lebendigeren Ausdruck. Allerdings sollte nicht alle vier Kreuzungspunkte mit wichtigen Elementen f\u00fcr die Platzierung herangezogen werden. Besser du fokussierst dich auf ein einziges Element, welches dann als Konsequenz viel mehr Aufmerksamkeit bekommt. Handelt es sich allerdings um eine Website, und um kein Bild\/Grafik etc., ist die Vorgehensweise eine andere. Anstelle \u00e4sthetische Gesichtspunkte zu fokussieren, soll hier die Benutzerfreundlichkeit und ein einfach zu verstehendes Design\/Kommunikation im Vordergrund stehen.<\/p>\n<p>Die Drittelregeln beschr\u00e4nkt sich \u00fcbrigens nicht nur auf die vier sichtbaren Kreuzungspunkte. Wer bei den Proportionen noch tiefer ins Detail gehen will, kann jede Zelle nochmals mit demselben Raster teilen und erh\u00e4lt so wieder neun neue Zellen.<\/p>\n<h6>Online-Tools f\u00fcr den Goldenen Schnitt<\/h6>\n<p>Wie du siehst, war diese Berechnung ganz ohne Fibonacci m\u00f6glich. Ist dir die Drittelregel aber zu wenig, dann gibt es einige Tools, die dir bei der Berechnung und Bewertung des Goldenen Schnittes helfen k\u00f6nnen. Einfachere Tools, die keiner Einarbeitung bed\u00fcrfen, sind die folgenden drei:<\/p>\n<h6>Golden Ratio von UXTriggers<\/h6>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3862\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Golden-Ratio-von-UXTriggers.jpg\" alt=\"Golden Ratio von UXTriggers\" width=\"800\" height=\"533\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Golden-Ratio-von-UXTriggers.jpg 800w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Golden-Ratio-von-UXTriggers-300x200.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Golden-Ratio-von-UXTriggers-575x383.jpg 575w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Mit dem Golden Ratio von UXTriggers kannst du eine Website nach dem Goldenen Schnitt beurteilen. Dazu legt sich ein goldenes Rechteck \u00fcber die gew\u00fcnschte Website. Dieses Rechteck kannst du je nach Gr\u00f6\u00dfe der Darstellung beliebig ver\u00e4ndern. Das Spiegeln ist allerdings nicht m\u00f6glich.<\/p>\n<p><a title=\"Golden Ratio von UXTriggers\" href=\"http:\/\/www.uxtriggers.com\/golden-ratio\/\" target=\"_blank\" rel=\"noopener\">Zum Golden Ratio von UXTriggers&#8230;<\/a><\/p>\n<h6>Modular Scale<\/h6>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3861\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Modular-Scale.jpg\" alt=\"Modular Scale\" width=\"800\" height=\"533\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Modular-Scale.jpg 800w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Modular-Scale-300x200.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Modular-Scale-575x383.jpg 575w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Modular Scale ist ein Web-Tool, das vor vor allem f\u00fcr die Berechnung von Schriftgr\u00f6\u00dfen verwendet werden kann. Neben verschiedenen Verh\u00e4ltnissen steht auch die Proportion des Goldenen Schnittes (1,618) zur Auswahl.<\/p>\n<p><a title=\"Modular Scale\" href=\"http:\/\/www.modularscale.com\/\" target=\"_blank\" rel=\"noopener\">Zum Modular Scale&#8230; <\/a><\/p>\n<h6>Phiculatur<\/h6>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-3863\" src=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Phiculator.jpg\" alt=\"Phiculator\" width=\"800\" height=\"533\" srcset=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Phiculator.jpg 800w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Phiculator-300x200.jpg 300w, https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Phiculator-575x383.jpg 575w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Willst du zu einer Zahl x die dazugeh\u00f6rige Zahl der Fibonacci-Folge herausfinden? Dann hilft dir der Phiculatur weiter. Dazu brauchst du einfach diese Zahl x einzutippen und du erh\u00e4lst automatisch die korrespondierende Zahl als Ergebnis. Das Tool ist kostenlos, steht allerdings aber nur f\u00fcr macOS zur Verf\u00fcgung.<\/p>\n<p><a title=\"Phiculatur\" href=\"http:\/\/www.thismanslife.co.uk\/projects\/phiculator\/\" target=\"_blank\" rel=\"noopener\">Zum Phiculatur&#8230;<\/a><\/p>\n<blockquote><p>Jetzt w\u00fcnsche ich euch einen \u201eGoldenen Blick\u201c beim \u201eGoldenen Schnitt\u201c.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Sind die Proportionen aufeinander abgestimmt, wirkt das auf den Betrachter \u00e4sthetisch und harmonisch. Die Perfektionierung dieser Technik nennt sich \u201eGoldener Schnitt&#8222;. Was darunter genau verstanden wird, erkl\u00e4re ich dir in folgendem Artikel. Goldener Schnitt Es gibt verschiedenste Herangehensweisen um den Goldenen Schnitt zu erkl\u00e4ren. Dieser kann in Verbindung mit der Mathematik, der Kunstgeschichte oder der Esoterik gesehen werden. Alle drei Begriffsgeschichten hier zu erkl\u00e4ren, w\u00fcrde aber den Rahmen des Artikels sprengen. Als Ergebnis sollst du nach dem Lesen verstehen, was es mit dem Goldenen Schnitt auf sich hat und wie das Konzept, oder zumindest Teilbereiche davon, auch f\u00fcr deine Gestaltungen im Webdesign Sinn machen k\u00f6nnen. Der Goldene Schnitt und dessen Ursprung in der Mathematik Beim Goldenen Schnitt steht vor allem das mathematische Verh\u00e4ltnis der einzelnen Bestandteile eines Elementes im Zentrum. Alle einzelnen Teile stehen in einer mathematischen Verbindung. Das Verh\u00e4ltnis des gesamten Elements zu dem gr\u00f6\u00dften Teil sollte gleich dem Verh\u00e4ltnis des gr\u00f6\u00dften Teils zum kleinsten sein. Das exakte Verh\u00e4ltnis ist dabei 1:1,618. Diese Zahl hat in der Mathematik eine ganz besondere Bedeutung. Es ist die irrationale Zahl Phi. Eine Besonderheit von Phi ist, dass die Darstellung der Zahl als Bruch mit ganzen Zahlen unm\u00f6glich ist. Wichtig f\u00fcr den Goldenen Schnitt ist auch die Fibonacci-Folge. Dabei handelt es sich um eine unendliche Folge von nat\u00fcrlichen Zahlen. Diese Zahlenreihe startet mit der Zahl 0, gefolgt von zwei Mal der Zahl 1. Nach der 0 hat jede weitere Fibonacci-Zahl eine exakte Logik: sie ist die Summe der beiden vorangegangenen Zahlen. Das bedeutet [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[275],"class_list":["post-3846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-goldener-schnitt"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Der Goldene Schnitt und Webdesign<\/title>\n<meta name=\"description\" content=\"Der Goldene Schnitt im Webdesign. Hier kannst du lesen wie das Konzept, oder zumindest Teilbereiche davon, auch im Webdesign Sinn machen k\u00f6nnen.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Der Goldene Schnitt und Webdesign\" \/>\n<meta property=\"og:description\" content=\"Der Goldene Schnitt im Webdesign. Hier kannst du lesen wie das Konzept, oder zumindest Teilbereiche davon, auch im Webdesign Sinn machen k\u00f6nnen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wolkenhart\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-13T16:35:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-11T12:45:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mika Gustavson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wolkenhart\" \/>\n<meta name=\"twitter:site\" content=\"@wolkenhart\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#article\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\"},\"author\":{\"name\":\"Mika Gustavson\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/44a7d02285c0fddf3198d98b5e792d1a\"},\"headline\":\"Der Goldene Schnitt und Webdesign\",\"datePublished\":\"2017-03-13T16:35:26+00:00\",\"dateModified\":\"2021-06-11T12:45:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\"},\"wordCount\":1574,\"commentCount\":8,\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg\",\"keywords\":[\"Goldener Schnitt\"],\"articleSection\":[\"Webdesign Agentur\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\",\"name\":\"Der Goldene Schnitt und Webdesign\",\"isPartOf\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg\",\"datePublished\":\"2017-03-13T16:35:26+00:00\",\"dateModified\":\"2021-06-11T12:45:25+00:00\",\"author\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/44a7d02285c0fddf3198d98b5e792d1a\"},\"description\":\"Der Goldene Schnitt im Webdesign. Hier kannst du lesen wie das Konzept, oder zumindest Teilbereiche davon, auch im Webdesign Sinn machen k\u00f6nnen.\",\"breadcrumb\":{\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg\",\"contentUrl\":\"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg\",\"width\":500,\"height\":334,\"caption\":\"Goldene Schnitt und Webdesign\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\/\/wolkenhart.com\/webdesignblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Der Goldene Schnitt und Webdesign\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#website\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/44a7d02285c0fddf3198d98b5e792d1a\",\"name\":\"Mika Gustavson\",\"description\":\"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.\",\"url\":\"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Der Goldene Schnitt und Webdesign","description":"Der Goldene Schnitt im Webdesign. Hier kannst du lesen wie das Konzept, oder zumindest Teilbereiche davon, auch im Webdesign Sinn machen k\u00f6nnen.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign","og_locale":"de_DE","og_type":"article","og_title":"Der Goldene Schnitt und Webdesign","og_description":"Der Goldene Schnitt im Webdesign. Hier kannst du lesen wie das Konzept, oder zumindest Teilbereiche davon, auch im Webdesign Sinn machen k\u00f6nnen.","og_url":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign","article_publisher":"https:\/\/www.facebook.com\/wolkenhart","article_published_time":"2017-03-13T16:35:26+00:00","article_modified_time":"2021-06-11T12:45:25+00:00","og_image":[{"width":500,"height":334,"url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg","type":"image\/jpeg"}],"author":"Mika Gustavson","twitter_card":"summary_large_image","twitter_creator":"@wolkenhart","twitter_site":"@wolkenhart","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#article","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign"},"author":{"name":"Mika Gustavson","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/44a7d02285c0fddf3198d98b5e792d1a"},"headline":"Der Goldene Schnitt und Webdesign","datePublished":"2017-03-13T16:35:26+00:00","dateModified":"2021-06-11T12:45:25+00:00","mainEntityOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign"},"wordCount":1574,"commentCount":8,"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg","keywords":["Goldener Schnitt"],"articleSection":["Webdesign Agentur"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign","url":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign","name":"Der Goldene Schnitt und Webdesign","isPartOf":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage"},"image":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage"},"thumbnailUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg","datePublished":"2017-03-13T16:35:26+00:00","dateModified":"2021-06-11T12:45:25+00:00","author":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/44a7d02285c0fddf3198d98b5e792d1a"},"description":"Der Goldene Schnitt im Webdesign. Hier kannst du lesen wie das Konzept, oder zumindest Teilbereiche davon, auch im Webdesign Sinn machen k\u00f6nnen.","breadcrumb":{"@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#primaryimage","url":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg","contentUrl":"https:\/\/wolkenhart.com\/webdesignblog\/wp-content\/uploads\/2017\/03\/Goldene-Schnitt-und-Webdesign.jpg","width":500,"height":334,"caption":"Goldene Schnitt und Webdesign"},{"@type":"BreadcrumbList","@id":"https:\/\/wolkenhart.com\/webdesignblog\/goldener-schnitt-webdesign#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/wolkenhart.com\/webdesignblog\/"},{"@type":"ListItem","position":2,"name":"Der Goldene Schnitt und Webdesign"}]},{"@type":"WebSite","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#website","url":"https:\/\/wolkenhart.com\/webdesignblog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wolkenhart.com\/webdesignblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/wolkenhart.com\/webdesignblog\/#\/schema\/person\/44a7d02285c0fddf3198d98b5e792d1a","name":"Mika Gustavson","description":"Hi, ich bin Mika - WordPress-Enthusiast und Webworker aus Leidenschaft. Ich bin Inhaber der Webdesign Agentur \/ WordPress Agentur Wolkenhart\u00ae und freier Dozent an der Dualen Hochschule Baden-W\u00fcrttemberg.","url":"https:\/\/wolkenhart.com\/webdesignblog\/author\/webtalk"}]}},"_links":{"self":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/comments?post=3846"}],"version-history":[{"count":1,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3846\/revisions"}],"predecessor-version":[{"id":4296,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/posts\/3846\/revisions\/4296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media\/3860"}],"wp:attachment":[{"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/media?parent=3846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/categories?post=3846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wolkenhart.com\/webdesignblog\/wp-json\/wp\/v2\/tags?post=3846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}