{"id":295,"date":"2006-04-24T14:33:29","date_gmt":"2006-04-24T12:33:29","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=295"},"modified":"2018-01-28T14:09:27","modified_gmt":"2018-01-28T12:09:27","slug":"c-r-a-p-4-prinzipien-fuer-die-gestaltung-einer-webseite","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2006\/04\/c-r-a-p-4-prinzipien-fuer-die-gestaltung-einer-webseite\/","title":{"rendered":"C.R.A.P. 4 Prinzipien f\u00fcr die Gestaltung einer Webseite"},"content":{"rendered":"<p>Eine ziemlich provokante \u00dcberschrift, denn crap hei\u00dft \u00fcbersetzt Schei\u00dfe, Mist, Schei\u00dfreck, Unsinn oder Schrott. &#8222;How crap is your Design?&#8220; ist jedoch lediglich ein Wortspiel. Die Anfagsbuchstaben stehen als Abk\u00fcrzung f\u00fcr universale Gestaltungsprinzipien, die bei der<strong> Gestaltung einer Webseite <\/strong>hilfreich sein k\u00f6nnen.<strong><br \/>\n<\/strong><\/p>\n<ul>\n<li>C = Contrast = Kontrast<\/li>\n<li>R = Repition = Wiederholung<\/li>\n<li>A = Alignment = Ausrichtung<\/li>\n<li>P = Proximity = Gruppenbildung<\/li>\n<\/ul>\n<h2>Hilfreiche Werkzeuge bei der Gestaltung einer Webseite<\/h2>\n<h3>1. | Contrast &#8211; Kontrast<\/h3>\n<figure id=\"attachment_4291\" aria-describedby=\"caption-attachment-4291\" style=\"width: 830px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4291 size-large\" title=\"Kontrast als Gestaltungswerkzeug f\u00fcr die Gestaltung einer Webseite\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/jukemedia-4-prinzipien-f\u00fcr-die-gestaltung-einer-webseite-1024x341.jpg\" alt=\"Kontrast als Gestaltungswerkzeug f\u00fcr die Gestaltung einer Webseite\" width=\"840\" height=\"280\" srcset=\"https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/jukemedia-4-prinzipien-f\u00fcr-die-gestaltung-einer-webseite-1024x341.jpg 1024w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/jukemedia-4-prinzipien-f\u00fcr-die-gestaltung-einer-webseite-300x100.jpg 300w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/jukemedia-4-prinzipien-f\u00fcr-die-gestaltung-einer-webseite-768x256.jpg 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption id=\"caption-attachment-4291\" class=\"wp-caption-text\">Kontrast als Gestaltungswerkzeug f\u00fcr die Gestaltung einer Webseite<\/figcaption><\/figure>\n<p><strong>Das oberste Ziel bei der Gestaltung einer Webseite ist Wahrnehmbarkeit, Unterscheidbarkeit und Orientierung. <\/strong><strong>Ausgewogene und harmonische Kontraste sind ein hiilfreiches Mittel um dieses Ziel zu erreichen.<\/strong><\/p>\n<p>Nicht gleiche Elemente sollten sich deutlich voneinander unterscheiden. Wenn sie sich nur ein bisschen unterscheiden, ist der Betrachter verwirrt und sieht Zusammenh\u00e4nge wo keine sind. Ein starker Kontrast erm\u00f6glicht dem Betrachters von einem Element zum anderen zu springen, den Inhalt anhand Strukturen zu scannen.<\/p>\n<p>Gute Kontraste verhelfen zu einem frischen und aufger\u00e4umten Aussehen. Kontrastarmut hingegen l\u00e4sst das Dargestellte zu einem homogenen Brei verflie\u00dfen, dessen Einzelteile nicht mehr wahrnehmabr sind. Ganz sicher mag auch eine pastellfarbene, zarte Webseite reizvoll sein, jedoch ist die Gefahr gro\u00df, dass Sie eben nur betrachtet, aber nicht gelesen wird. Das Gesamterscheinungsbild verschwimmt, ist wenig einpr\u00e4gsam, der Betrachter orientierungslos. Das gleiche Ph\u00e4nomen tritt auch dann auf, wenn die Kontraste zu stark und zu viele an der Anzahl sind. Das sind dann die ber\u00fchmt-ber\u00fcchtigten &#8222;Augenkrebs&#8220;-Webseiten, bei denen jedes Element durch Anwendung aller M\u00f6glichkeiten sich hervorzuheben, nach Aufmerksamkeit schreit. Das Ergebnis ist eine &#8222;laute&#8220; Webseite, bei der in der &#8222;Kakophonie&#8220; der Farben der Besucher nichts mehr versteht und einfach nur flieht.<\/p>\n<p>Eine zuverl\u00e4ssige Formel, wie man passende und dem Zweck dienliche Kontraste &#8222;berechnen&#8220; kann, so dass es zu dem perfektesten Ergebnis f\u00fchrt, gibt es jedoch nicht. Zwar gibt es immer wieder Versuche Farbe und ihre gegenseitigen Wechselwirkungen zu ordnen, das Verwirrende und zugleich Fasznierende daran ist f\u00fcr mich, dass es immer wieder Konstellationen gibt, in denen Kombinationen aus der Reihe tanzen und dann eben doch ein Fehlgriff sind, obwohl theoretisch eigentlich alles stimmt. Oder auch umgekehrt: Was eigentlich nicht m\u00f6glich erscheint, funktioniert am Ende doch.<\/p>\n<h3>2. | Repetition &#8211; Die Wiederholung<\/h3>\n<figure id=\"attachment_4293\" aria-describedby=\"caption-attachment-4293\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4293 size-full\" title=\"Symbolische Abblidung von \u00dcberschriften und Text\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/wiederholung.png\" alt=\"Symbolische Abblidung von \u00dcberschriften und Text\" width=\"900\" height=\"427\" srcset=\"https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/wiederholung.png 900w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/wiederholung-300x142.png 300w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/wiederholung-768x364.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-4293\" class=\"wp-caption-text\">\u00dcberschriften als konsistentes, sich wiederholendes Gestaltungsmittel in Webseiten schaffen \u00dcberschaubarkeit, Zusammengeh\u00f6rigkeit und Ordnung<\/figcaption><\/figure>\n<p><strong>Innerhalb der Gestaltung einer Webseite sollte der Style f\u00fcr ein bindiges Zusammengeh\u00f6rigkeitsgef\u00fchl wiederholt werden. Die Gestaltung der Elemente, die zu einem bestimmten Bereich geh\u00f6ren, sollten sich auch in anderen Bereichen wiederholen um Stetigkeit zu verdeutlichen.<\/strong><\/p>\n<p>In Blogs und Webseiten kommt dieses Prinzip zum Vorschein, wenn z.B. Eintr\u00e4ge chronologisch angezeigt werden oder, wenn z.B. eine Inhaltseite umfangreich ist und mehrere \u00dcberschriften hat. Die \u00dcberschrift eines Eintrags hat Signalwirkung. Sie ist wie eine Leiter, die das Auge des Betrachters Stufe f\u00fcr Stufe\u00a0 tiefer in den Inhalt f\u00fchrt. Beim Scrollen einer Seite nach unten findet sich der Leser zurecht, wenn er, ohne den Absatz in G\u00e4nze gelesen zu haben, in der \u00dcberschrift den Beginn eines weiteren Inhalts erkennt.<\/p>\n<p>Bei der Gestaltung einer Webseite sind die \u00dcberschriften zentrale Schl\u00fcsselelemente. Fehlen sie oder sind sie in der Wiederholung nicht deutlich genug als solche zu erkennen, wird der Betrachter nicht in der Lage sein m\u00fchelos zu lesen. Demzufolge wird er das Geschriebene auch nicht so gut verstehen, wie er es sollte. Die Wiederholung der Design-Elemente einer Seite nach unten verst\u00e4rkt im Auge des Betrachters deren Bedeutung als Verbindungselement.<\/p>\n<p>&nbsp;<\/p>\n<h3>3. | Alignment &#8211; Die Ausrichtung<\/h3>\n<figure id=\"attachment_4299\" aria-describedby=\"caption-attachment-4299\" style=\"width: 890px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4299 size-full\" title=\"Symbolische Darstellung von Elementen einer Webseite und deren Abst\u00e4nde zueinander\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/padding.png\" alt=\"Symbolische Darstellung von Elementen einer Webseite und deren Abst\u00e4nde zueinander\" width=\"900\" height=\"396\" srcset=\"https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/padding.png 900w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/padding-300x132.png 300w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/padding-768x338.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><figcaption id=\"caption-attachment-4299\" class=\"wp-caption-text\">Ausrichtung von Elementen auf einer Webseite. Auf den ausgewogenen Abstand kommt es an.<\/figcaption><\/figure>\n<p><strong>Die ausgewogene Ausrichtung der Elemente untereinander ist ein G\u00fctesiegel f\u00fcr eine gut gemachte Webseite. <\/strong><strong>Die Abst\u00e4nde der Elemente sollten abgeglichen werden, symmetrisch und relativ zur Gr\u00f6\u00dfe des jeweiligen Elementes sein.<\/strong><\/p>\n<p>Jedes Element einer Seite muss visuell zu etwas anderem in Zusammenhang stehen. Nichts sollte deplatziert wirken. Der visuelle Abstand darf nicht so gro\u00df gew\u00e4hlt sein, dass ein einzelnes Element \u00fcberhaupt keinen Bezug mehr zu den \u00fcbrigen Elementen hat und v\u00f6llig isoliert wird. Ein solches Element kann st\u00f6rend wirken, wenn\u00a0 seine &#8222;au\u00dferordentliche&#8220; Stellung nicht bewusst aus gutem Grund so gew\u00e4hlt wurde.<\/p>\n<p>Bei der Gestaltung einer Webseite sollte der Textinhalt entweder links oder rechts ausgerichtet werden, aber nicht beides oder mal so und mal so. Rechts ausgerichteter Text in einer rechten Seitenspalte produziert eine Flut von white spaces zwischen den zwei Spalten und sieht entsetzlich aus. Bereits vorhandene R\u00e4nder und Kanten sollen genutzt werden um Elemente daran auszurichten. Wenn z.B. eine header Grafik 5 px vom linken Rand entfernt ist, dann sollte man dem Textk\u00f6rper auch 5 px geben. Und ganz wichtig : Immer pr\u00e4szise arbeiten! 5px sind 5px und nicht 7px &#8211; die gute Gestlatung einer Webseite zeigt sich in den Details.<\/p>\n<h2><\/h2>\n<h3>4. | Proximity &#8211; \u00c4hnliche Bedeutungen zusammenfassen<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4301\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/regale.png\" alt=\"\" width=\"5276\" height=\"2199\" srcset=\"https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/regale.png 5276w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/regale-300x125.png 300w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/regale-768x320.png 768w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2006\/04\/regale-1024x427.png 1024w\" sizes=\"auto, (max-width: 5276px) 100vw, 5276px\" \/><\/p>\n<p><strong>Nah beieinander stehende Elemente erwecken den Eindruck von \u00e4hnlicher Bedeutung, deshalb sollten bedeutungsm\u00e4\u00dfig verwandte Elemente gruppiert werden. Deutlich unterschiedliche Elemente hingegen brauchen mehr Platz um sich herum damit die Unterschiedlichkeit wahrgenommen werden kann<\/strong>.<\/p>\n<p>Sind die Funktionen unterschiedlich, sollte man darauf achten, dass unterschiedliche Elemente nicht zu dicht beieinander stehen, weil sonst der Eindruck von Zusammengeh\u00f6rigkeit erweckt wird, wo gar keiner besteht.<\/p>\n<p>Das Nachbarschaftzsprinzip erlaubt es \u00e4hnliche oder verwandte Elemente zu gruppieren um ein bindendes Ganzes zu formen. Begriffe die nicht verwandt sind, sollten auch visuell von denen abgegrenzt werden, die einen inhaltlichen Zusammenhang haben. Das erm\u00f6glicht es dem Betrachter einer Seite sofort zu erfassen, welche Seitenelemente thematisch zusammengeh\u00f6ren und welche nicht.<\/p>\n<p>&#8212;<br \/>\n<em>Dieser Beitrag wurde 2006 geschrieben, Review 01\/2018 JK<\/em><br \/>\n<em> Urspr\u00fcnglich inspiriert durch:\u00a0 thinkvitamin.com &#8211; Mike Rundle (Seite existiert nicht mehr)<\/em><br \/>\n<em> Bilder:\u00a0\u00a9 Robert Kneschke | Fotolia.de, \u00a9 Jutta Kemperle | jukemedia.de<br \/>\n<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eine ziemlich provokante \u00dcberschrift, denn crap hei\u00dft \u00fcbersetzt Schei\u00dfe, Mist, Schei\u00dfreck, Unsinn oder Schrott. &#8222;How crap is your Design?&#8220; ist jedoch lediglich ein Wortspiel. Die Anfagsbuchstaben stehen als Abk\u00fcrzung f\u00fcr universale Gestaltungsprinzipien, die bei der Gestaltung einer Webseite hilfreich sein k\u00f6nnen.<\/p>\n<p>C = Contrast = Kontrast<br \/>\nR = Repition = Wiederholung<br \/>\nA = Alignment = Ausrichtung<br \/>\nP = Proximity  &#8230; <a title=\"C.R.A.P. 4 Prinzipien f\u00fcr die Gestaltung einer Webseite\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2006\/04\/c-r-a-p-4-prinzipien-fuer-die-gestaltung-einer-webseite\/\" aria-label=\"Mehr Informationen \u00fcber C.R.A.P. 4 Prinzipien f\u00fcr die Gestaltung einer Webseite\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,119,151,223],"yst_prominent_words":[],"class_list":["post-295","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-grafik-gestaltung","tag-wissen","tag-prinzipien"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":24,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/295\/revisions"}],"predecessor-version":[{"id":4305,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/295\/revisions\/4305"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=295"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}