Viele werden von Ajax vielleicht weniger gehört haben. Aber das ist die Programmiertechnik der Zukunft. Zumindest glauben das jetzt die meisten. Diese Technik hat hauptsächlich durch Google eine Wiedergeburt erfahren. Das Konzept wurde in den 90er Jahren entwickelt. Aber es fanden sich zu wenig Unterstützer. Das ist ein Grund warum sich Ajax in der Gemeinde der Webprogrammierer nicht durchgesetzt hat.

Speziell die Anwendung Google Maps hat Ajax wieder in das Gedächtnis der Programmierer gebracht und seitdem beschäftigen sich auch immer mehr Menschen mit diesem Konzept und Ajax-Anwendungen, -Dokumentationen, -Webseiten sowie -Foren schießen wie Pilze aus dem Boden.

Ajax ist die Abkürzung von Asynchron JavaScript and XML und stellt ein Konzept zur asynchronen Datenübertragung über das Protokoll HTTP zwischen einem Browser und einem Webserver dar.

Welche Vorteile bietet Ajax?

1. Kein kompletter Reload der Website erforderlich.
   - Der Browser aktualisiert automatisch gezielte Informationen.
2. Nutzereingriff für die Datenabfrage nicht unbedingt erforderlich
   - Die Aktualisierung der Website muss nicht zwangsläufig vom Nutzer durchgeführt werden.
3. Geringeres Datenaufkommen zwischen Browser und Webserver
   - Durch die begrenzten Menge an Daten reduziert sich auch das übertragene Datenvolumen
4. HTML- und XML-Daten können übertragen werden

Nachteile des Ajax-Konzepts

1. Nutzer muss JavaScript aktivieren
   - ohne JavaScript, kein Ajax
2. Browsertests zwingend notwendig
   - Ajax-Unterstützungen können bei älteren Versionen fehlerhaft sein. Daher muss man die Website auf allen gängigen Browsern testen.
3. Fehlerhafte Darstellung der Daten
   - Bei Übertragung von XML-Daten kann es zur fehlerhaften Darstellung kommen.
   - Bei HTML-Daten taucht dieses Problem normalerweise nicht auf

Drei typische Problemfelder müssen beachtet werden

• Setzen eines Lesezeichens (= Favorit) ist schwierig
• Nutzung der Historie-Funktion im Browser
• Caching-Problem beim Internet Explorer (Microsoft eben)

Für alle diese Probleme müssen Lösungen in die Ajax-Anwendung eingebaut werden. Dafür existieren aber mittlerweile Standardlösung, die auf den einschlägigen Webseiten zu finden sind.#

Internetlinks

Wikipedia - Einführung in Ajax - Allgemeine Betrachtung von Ajax

Im Teil 4 haben wir uns angesehen wie Farben die menschlichen Emotionen beeinflussen und was diese bedeuten. Farben haben 3 Grundeigenschaften. Den Farbton, die Sättigung und die Helligkeit. Um den “roten Faden” in einem Farbdesign zu behalten solle man sich auf eine Grundfarbe einigen die sich durch die komplette Website zieht. Um bestimmte Objekte oder Textteile zu betonen sollte es auch eine “Betonungs-Farbe” geben. Das verschafft nicht nur die Übersicht, sondern wirkt seriös und enthält ein Komplettes Konzept. Denn die Farben können auch Layout und Bilder beeinflussen. Komplementärfarben sind die häufigsten Farben die Verwendet werden. Durch Verwendung von zwei verschiedenen Komplementärfarben als Grund- und Batonungs-Farbe erhält man auch den sogenannten “Web 2.0″-Effekt. Jedoch gehört dazu auch ein leichter 3D-Effekt. Das ist aber wieder ein anderes Thema.

In Teil 5 sehen wir uns diesmal an wie die Farben nun konkret kommunizieren. Es ist wichtig zu Verstehen wie Farben wirkuen. Denn das kann eine Website sehenswert oder unangenehm machen. Denn ein Benutzer muss sich wohl fühlen. Da können Sie das beste Layout der Welt haben, die Farben regieren das Internet.

Farben kommunizieren Welche Farben Sie auch immer als Grund- und Betoungs-Farbe wählen, Sie kommunizieren immer damit. Gestalten Sie eine Website, wie in unserem Beispiel in Teil 4, in Schwarz-Weiß, sagen Sie dem Benutzer damit “Wir geben uns ganz klassisch. Nur nicht auffallen. Design ist nicht so wichtig.” Das hat negative Wirkung. Durch verschiedenste Grau-Stufen an Betonungen haben Sie dann schon bessere Wirkungen.

Gestalten Sie Ihre Website in Rot, Grün und Gelb sagen Sie damit “Hey! Aufgepasst! Das hier ist wichtig! Und zwar alles!”. Das hat genauso schlechte Wirkungen. Denn es ist nie alles wichtig. Sie überfordern den Benutzer, dieser fühlt sich nicht wohl und das Design schlägt fehl. Und wenn wir ehrlich sind, es wirkt unseriös und billig. Wenn dazu noch kleine Blinkende Bilder kommen und Texte in allen Farben gestaltet wurde, wird man die Website nie mehr besuchen wollen. Farben wirken viel weniger bewusst als geschriebene oder gesprochene Worte, aber der Vergleich ist für den Designbewussten Webdesigner sehr hilfreich.

Zu schwache Farben oder Bilder mit zu wenigen Kontrasten wirken wie ein sehr leise und sehr schüchtern. Ruhige Farben mit starken Kontrasten wirden seriös und professionell. Wie ein ruhiger Mensch mit kräftiger Stimme. Sehr starke Farben mit sehr kräftigen Kontrasten wirden wie ein sehr unruiher Mensch der sie Anbrüllt. Ein lauteres Wort kann unsere Aufmerksamkeit wecken, doch schreit jemand mit uns. Das ist unangenehm. Schreien Sie die Benutzer nict unnötig an. Verwenden Sie Kräftige Farben mit Bedacht. 

Seien Sie also Vorsichtig bei den Primärfarben Rot, Grün, Blau. Auch Gelb sollen Sie mit Bedacht verwenden. Sethen Sie diese Farben in voller Sättigung nur ein, wenn Sie etwas wichtiges hervorheben wollen. Diese Farben als Grundfarbe zu Verwenden ist der größte Fehler den man machen kann. Im Normalfall genügt es auch, die Grundfarbe mit einer etwas stärkeren Sättigung zu Verwenden um etwas zu betonen. Setzen Sie daher BITTE diese Farben generell nur gezielt ein:

Eine Farbe hebt hervor.

Mehrere Farben nebeneinander oder große Farbflächen wirken schreiend. Gedeckte Farben (also Pastelltöne) eignen sich für größere Flächen viel besser. Farben eignen sich im Akzente zu setzen. Sie können beispielsweise die Funktion eines Wiedergabe-Buttons deutlicher machen, indem Sie ihn Grün hinterlegen. Sie sollten jedoch nicht nur die Farbe einsetzen, um ihn vom Stopp Button zu unterscheiden.
Farbe und Symbolik
Tests haben gezeigt, dass Benutzer sich schwerer tun, Dinge nur aufgrund von Farben zu unterscheiden. Deshalb sollten Sie immer zuerst mit der Unterscheidung durch Form, Größe oder Position arbeiten und diese erst im zweiten Gestaltungsschritt durch die Farbgebung unterstützen.

Es gibt allgemein zwei Regeln:

1. Ein gutes Design funktioniert auch in Schwarz-Weiß. Verwenden Sie hierbei viele Grautöne um auch klassische Seiten aufregender zu machen. Es wirkt dadurch sehr seriös und professionell.
2. je länger die Teste auf der Seite sind, desto zurückhaltender sollten die Farben sein. Oder wie lange können Sie lange Texte lesen, die sich auf einem roten Hintergrung befinden lesen. Es wird auf dauer sehr unangenehm. Pastelltöne sind hier die Lösung.

Diese Regelung zur Unterstützung der Texte, Marken oder für das Design sollten Sie unbedingt einhalten. Sie fördern durch den Roten Faden der Farben (Grundfarbe, Betonungsfarbe, Logo, Schrift, Bildsprache) auch die Marke und den wiedererkennungswert Ihrer Website.
Vorschau Teil 6: Wir sehen uns in Teil 6 ein Beispiel an. Wir erstellen zusammen ein “Farbklima” mit hilfe aller Informationen die wir in den Teilen 1 bis 5 gelernt haben. Wir werden uns dann auch ansehen wie die Farben die Lesbarkeit beeinflussen.

Vorschau auf Teil 7: Da wir dann in Teil 6 ein Design mit den gelernten Informationen erstellt haben, will ich Ihnen zeigen, wie Sie dieses Design auch Umsetzen können. Dazu gibt es die “Grundregeln zur Umsetzung”. Zukünftig werden wir uns hierbei auch mit er Typographie beschäftigen, Absätzen, Seitenbreite- und -höhe, Layout, Schwerpunkte, Bilder, Buttons, Symbole, Kombinationen, Hervorherbungen, Tabellen, Listen, Schmuck und vielen mehr.

Also dranbleiben lohnt sich.
Mit freundlichen Grüßen
Markus Mörth

Endlich mal wieder ein Blog von mir. Viele haben lange gewartet und gehofft, aber jetzt hat das warten ein Ende. Denn hier ist der Vierte Teil der Reihe “Design für Nicht-Designer”. Diesmal geht es darum, wie Farben auf einer Homepage miteinander kommunizieren. Dies ist vor allem wichtig, um zu Signalisiert auf welcher Seite man steht. Es ist auch ein Wiedererkennungswert. Das einfachste Beispiel ist “Greenpeace”. Hier werden viele Grüne Farbtöne verwendet. Microsoft setzt auf Blau und Schwarz. YouTube ist auf Rot unterwegs.

Natürlich klingt das total banal. Aber wir sollten und mal Ansehen, wie Farben funktionieren. Und das aller wichtigstem was Farben überhaupt aussagen.
 

Farben haben eine Aussage
Farbe ist eine Grundlage in der Thematik der Gestaltung. Dabei ist die Wirkung von Farben sehr bedeutend für Webdesigner. Zusätzlich haben Farben eine wirkung auf Emotion. Zum Beispiel ist Rot die Farbe für Blut und damit für Gefahr – diese Emotionale Reaktion ist angeboren. Erlernte Reaktionen gibt es zum Beispiel bei der Farbe Grün. Grün ist die Ampel oder auch wenn “Alles klar” ist. Die Bewertung der Farben ist von Kultur zu Kultur anders. Das heißt, Sie brauchen hier schon eine Zielgruppe die Sie ansprechen wollen.

Sind Sie sich im Team beim Thema Farbgebung nicht einig, kann nur ein Test mit Vertretern der Zielgruppe helfen – oder finden Sie einen Kompromiss. Richtig oder falsch sind im Bereich der Farbe Schwarz schwer zu beurteilen. Aber beachten Sie folgende Regeln:

• Farbton
  Als Farbton wird das bezeichnet, was wir umgangssprachlich einfach nur “Farbe” nennen, also Rot oder Blau.
  
• Sättigung
  Die Sättigung einer Farbe ist die Intensität einer Farbe.
• Helligkeit
  Die Helligkeit oder Stärke einer Farbe bestimmt, wie hell eine Farbe wirkt.

Aber bei der gestaltung einer Website sollten Sie ein ganz wichtiges Grundkonzept haben. Wählen Sie sich nur eine einzige Grundfarbe. Als Beispiel ist meine Wiedererkennungsfarbe Schwarz. Dann muss es diesen Roten Faden geben um ein einheitliches Design zu erzielen. Verwenden Sie bei der Grundfarbe “Schwarz” also nicht alle Farben die Ihnen so in den Sinn kommen, sondern wählen Sie zum Beispiel weiß für den Text (oder Schwarz wenn der Hintergrung weiß ist) und Betonen Sie Objekte oder Textabschnitte in Grautöne. So haben Sie schon mal ein Konzept für die Farbgebung Ihrer Website.

Komplementärfarben
Zwar wissen Sie jetzt wie Sie den Roten Faden bilden. Aber es gehören immer Mindestens zwei Farben dazu. Eine Grundfarbe und eine Betonungs-Farbe. So nenne ich die beiden einfach. Am einfachsten geht dies mit den Komplementärfarben. Zwei Farben sind komplementär, wenn sie zusammengemischt grau bis schwarz ergeben. Diese Farben bilden dazu noch die Stärken kontraste die zu ermöglichen sind. In Werbung, Fotos oder eben auf Websites fallen diese Farben sehr leicht auf. Es gibt soganennte Komplementärkontraste. Die häufigsten sind diese hier:

• Rot & Grün
• Orange & Blau
• Gelb & Lila
• Gelb-orange & Blau-lila
• Magenta & Cyan

Farbwirkung
Wie wirken aber jetzt nun Farben? Genau dafür habe ich mir Rot, Gelb, Grün und Blau mal genauer angesehen:

Rot
Aktiv bis aggressiv, Warnend, Stop/Achtung (als Signalfarbe), Beunruhigend, Erotisch, Warm, Nah

Gelb
Anregend, Nervös, Heiter, Attraktiv, Achtung (als Signalfarbe), sehr Warm, Nah

Grün
Lebendig, Beruhigend, Okay/Weiter (als Signalfarbe), Neutral bis kühl, Entfernt

Blau
Seriös, Technisch, Beruhigend, Kalt, Entfenrt

Vorschau auf  Teil 5: Da wir jetzt im 4ten teil gesehen haben, wie man ein Farbkonzept entwerfen sollte und wie Farben auf den Menschen wirken, gibt es im Teil 5 nachzulesen, wie eine Farbe mit einer anderen kommuniziert. Und keine sorge, es ist viel einfacher als es klingt.
 

Mit freundlichen Grüßen
Markus Mörth

Wie Sie jetzt also wissen sind farben das eines der Ausdrucksstärksten mitteln neben den Formen.Zusammengefasst können Sie den Benutzer entweder auf das Design oder auf den Inhalt der Homepage lenken. Ein gleichgewicht zwischen beiden ist natürlich viel besser. Oder Sie wenden sich an das “Classic”-Design wenn Sie den Inhat Ihrer Seite zu 100% interessanter machen wollen. Zumindest in einer bestimmten Zielgruppe. Im Teil 3 geht es um Wirkung und Aussage.

Größe und Position
Die Größe eines Objekts verbinden wir automatisch mit seiner Wichtigkeit. Aber auch die Position zu den andeen Onjekten sagt uns etwas über seine Bedeutung. Achten Sie auch auf Symmentrie: Fällt ein Objekt aus dem Rahmen, zieht es Automatisch die Aufmerksamkeit auf sich

Leserichtung
Die Leserichtung spielt eine Rolle für Bilder, die eine Situation darstellen oder eine Geschichte erzählen. Das einfachste Beispiel dafür sind Comics. Sie erzählen Bild für Bild eine Geschichte – von links nach rechts. Auch einzelne Bilder wirken anders, wenn sie gespiegelt werden. Die Veränderung ist nicht immer klar zu beschreiben, aber es macht deutlich einen Unterschied – probieren Sie es mit einem Foto eines gesichtes aus, und spiegeln Sie das Bild aus der Mitte heraus um das Gesicht symmetrisch zu machen. Sie werden die Person kaum wiedererkennen.

Positionierung
Das menschliche Großhirn besteht aus zwei Hälften (Hemisühären), die miteinander über den so genannten Balken verbunden sind. Die beiden Hemisphären arbeiten eng zusammen, und grundsätzlich können beide Hälfte dieselben Funktionen durchführen. Dennoch herscht Arbeitsteilung im Gehirn. Jede Seite hat einen bestimmten Schwerunkt.

Die Linke Gehirnhälfte ist für die Logik zuständig. Durch diese ist auch das Rechnen möglich. Auch für die Sprache, für die Verarbeitung von abstrakten Informationen und auch für die verknüpfung mit dem rechten (!) Auge.

Die Rechte Gehirnhälfte ist für die Emotion und für das Gefühl zuständig. Es unterstützt das räumliche Sehen & Denken. Zur Verarbeitung bestimmter eindrücke und Bildliche Informationen ist es einer der wichtigsten Aufgaben. Und die verknüpfung mit dem linken (!) Auge.

Diese Darstellung ist stark vereinfacht, hat aber beipielsweise dennoch doe praktische Konsequenz, dass es uns schwer Fällt, ein Bild räumlich zu erfassen, das wir nur mit dem rechten Auge sehen. Denn die Information vom rechten Auge landen in der linken Gehirnhälfte, und die ist eher auf abstraktere Dinge spezialisiert. (Um unsere Umgebung dreidimensional wahrzunehmen brauchen wir natürlich beide Augen – aber wie gesagt, es handelt sich um eine Vereinfachung.)
Bei der Gestaltung kann mn darauf achten, dem Hirn entgegenzukommen: Die Navigation soll die Struktur der Site widerspigeln. Sie fordert damit das räumliche Vorstellungsvermögen. Also kommt ie Navigationsleiste nach links. Für Texte ist die linke Gehirnhälfte zuständig. Daher kommen Texte auf die rechte Seite. Machen Sie diese Anregung nicht zum Dogma; unser Gehirn zeichnet sich gerade durch seine Flexibilität aus. Aber als Anhaltspunkt ist sie ganz hilfreich. Es ist durch Tests erwiesen, dass Navigationsleiste links besser funktionieren als solche auf der rechten Seite. Ob das nun mit unseren Gehirnhälften zutun hat odeer einfach nur Gewohnheit ist wei man nicht. Aber es könnte auch mit der Leserichtun zusammenhängen. Aber das sei hingestellt.

Im Teil 4 unseres Tutorials zeige ich euch, wie Farben kommunizieren. Denn Sie können durch Farben einem Benutzer sagen, was Sie denken. Also hoffe ich, Sie bleiben dabei.

Mit freundlichen Grüßen
Markus Mörth (MacReal)

Im Teil 1 haben wir über verschiedene Fromen und Gestalten aus dem Auge des Betrachters gesprochen. Denn das was ein Web-designer sieht, so sieht es nicht ein Benutzer. Ein gutes beispiel sind Effekte die ein Benutzer durch das Betrachten auslöst. Der Webdesigner kennt seine Website und weiß auch wo sich die Effekte befinden und wie diese gestartet werden und wo sich die einzelnen Objekte befinden. Aber ein Benutzer ist unter umständen neu auf der Seite. Wenn Sie nichz nur für sich eine Website erstellen wollen, versuchen Sie sich in einen Benutzer hineinzuversetzen, der die Seite nicht im Geringsten kennt. Am besten wäre es wenn Sie einen Freund oder Kollegen die Seite Testen lassen und beobachten ob sich dieser leicht zurechtfindet und sich wohl fühlt. Und der Tester kann Ihnen auch Ratschläge geben was Ihm Probleme bereitet und verbessert werden sollte. Das größte Problem sind Farbkompositionen.

Wenn ein Benutzer die Farben nicht mag oder diese einfach nur Stur durchgesetzt sind oder fremd wirken, kann sich der Benutzer kaum wohl fühlen. Und wenn er sich nicht wohlfühlt, kann die Seite so übersichtlich sein wie es nur geht. Genau dieser Benutzer wird Ihre Seite nie verstehen. Und der Inhalt wirkt nicht Professionell. Das was so Irre wirkt, ist für viele Internetseiten der größte Alptraum… und Realität. Farben sind das wichtigste. Durch das Richtige Design können Sie den Inhalt spannend oder langweilig machen. Darum beschäftige ich mich im Teil 2 um sogenannte Kompositionselemente.
Kompositionselemente

Jedes Bild besteht aus einigen Grundelementen. Das wichtigste sind die Linien. Das müssen keine Striche sein, sondern können auch gedachte Linien sein wie etwa Fluchtlinien oder Linien, die durch zwei Flächen mit unterschiedlichen Farben gebildet werden. Grafiker arbeiten oft mit Gestaltungsrastern. Dazu bestimmen sie als Erstes die Aufteilung eins Screens, beispielsweise im Navigationsbereich, textbereich und Bildbereich. Diese Bereiche grenzen sie durch Hilfslinien voneinander ab. Bei der Arbeit orientieren sie sich sn diesen Linien und positionieren alle Elemente an einer Linie. Dadurch erreichen sie eine harmonische Komposition, die sich auf allen Screens wiederfindet. Bei der Wahl der Kompositionselemente gibt es eine Goldene Regel für Designer: Weniger ist mehr. Denn besser es sieht überichtlich und komfortabel aus, als komplett “überbunt” und durcheinander.

Formen (siehe Teil1) und Farbbereiche sind ein anderes wichtiges Element. Sie bilden oft den Hintergrund, vor den Text oder Bilder gesetzt werden. Die Art und Weise, wie die Elemente zueinander gesetzt sind, ist selbst ein gestaltungselement. Sie erreichen damit Effekte wie Kontrast, Spannung und Dynamik. Falls Sie sich den ersten Teil durchgelesen haben, wird es jetzt Vorteile für Sie haben.
Kontrast entsteht durch Gegensätze. Möglicg sind Kontraste von:

• hell – dunkel
• Farbe – Komplementärfarbe
• groß – klein
• nah -fern
• gerade – gebogen
• eckig – rund

Spannung wird erreicht, wenn Bildteile zu widersprechen scheinen. Auf einem Bild nimmt beispielsweise eine Farbfläche die Hälfte des Platzes ein. Daneben steht eine sehr kleine Fläche in derselben Form und Farbe.
Kontrast ist ein Mittel, um Spannung zu erzeugen, aber nicht jeder Kontrast erzeugt Spannung. Ist eine Hälfte eines Bildes rot, die andere grün, ist das sicher ein starker Kontrast. Spannung aht es aber deshalb noch lang enicht. Dynamik kommt zustande, wenn die Formen im Bild Bewegung suggerieren. Bilder mit einer ungewöhnlichen Perspektive, mit Teilen, die unscharf wie in Bewegung erscheinen, oder Linien, die auf einen Fluchtpunkt zu laufen, wirken dynamisch.
Ausgewogenheit

Für die meisten Anwendungen versucht der Designer, eine ausgewogene Komposition zu erstellen. Ausgewogenheit wird durch Symmetrie erreicht – aber damit sollte man es nicht übertreiben. Designs, die zu symmetrisch sind, wirken schnell langweilig. Feine Kontraste und etwas Spannung beleben und füren zu einem ausgewogenen Design. Es müssen nicht immer nur rechte Winkel und gerade Linien sein. Auch ein Rhytmus von prägnanten und unauffälligen Elementen wirken harmonisch und sind sehr wirkungsvoll.

Aber es gibt auch Fälle, in denen bewusst vom Prinzip der Ausgewogenheit abgewichtet wird. Starke Kontraste, Spannung und Dynamik machen Seiten interessant und heben sie von anderen ab. Nur sollte man das sparsam einsetzen, um den benutzer nicht zu ermüden.

Oder man setzt auf das sogenannte “Classic”-Design. Das noch immer sehr erfolgreiche Design ist recht Stabil und mit wenig Dynamik verbunden. Farblich auch sehr Neutral. Für Designer die den Benutzer wirklich auf das Wesentliche lenken wollen, und den Inhalt am wichtigsten sehen, ist das “Classic”-Design welches ich entwickelt habe ein kleines Aber feines Wunder.

Fragen? Kein Problem. Schreiben Sie Ihre Frage als Kommentar und ich werde Sie so schnell wie möglich beantworten, um Ihre neugier zu stillen. Natürlich Lese ich auch gerne Kritik und Anregungen zu meinem Artikel.

Mit freundlichen Grüßen
Markus Mörth (MacReal)

Das Design einer Site bestimmt den ersten Eindruck. Und genau dieser Eindruck ist der wichtigste. Gefallen dem Benutzer Farben oder Layout nicht, so wird er höchstwarscheinlich sofort wieder “umdrehen”. Denn auch das Design ist nicht nur Dekoration, sondern es unterstützt die Kommunikation. Es vermittelt Stimmung, und Sicherheit. Es verdeutlicht welche Priorität sie besitzen. Wenn ein User nur “gefällt mir nicht” sagt, dann fühlt sich dieser auch nicht wohl. Denn dann kommt er mit dem Aufbau der Seite nicht mehr klar, und es gibt fast keine Chance diesen Benutzer noch zu überzeugen. Darum hier ein kleines Tutorial zu Farben. Also Design für Nicht-Designer. Im ersten Teiljedoch beschäftigen wir uns nur mit allgemeinen Informationen zu den Wahrnehmungen der Menschlichen Psyche. Denn genau an dieser Stelle, beginnt es schon, wie interessant der Benutzer Ihre Internetseite finden kann.

1. Design für Nicht-Designer
Ich möchte Ihnen nun einige wichtige Grundprinzipien der Gestaltung zeigen. Auch Diplom-Grafikdesigner lernen das (und noch vieles mehr) als Grundbaustein für Ihr Studium. Es geht in wirklichkeit nur um die Prinzipien der menschlichen Wahrnehmung. Das komplexe Zusammenspiel von Augen und Gehirn. Es it auch Ratsam, zu wissen, warum manche Entwürfe funktionieren, und andere dagegen nicht. Um das herauszufinden, können diese kleinen Ratschläge sehr helfen.
2. Menschliche Wahrnehmung

2.1 Figur und Grund
Das Gehirn filtert aus jedem Bild die sogenannte Figur heraus. Das ist der Teil, der momentan für den Betrachter interessant ist. Darauf wird die ganze Konzentration gerichtet. Der übrige Teil des Bildes nennt sich Grund.
Im folgendem Beipiel springen Figur und Grund hin und her: Wir sehen als Figur entweder zwei Gesichter oder eine Vase.

2.2 Geschlossenheit
Das Gehirn will Ordnung. Daher siegt der Grundsatz der Geschlossenheit über den der Nähe. Linien, die eine gschlossene Form bilden, werden eher als Figur wahrgenommen, auch wenn andere Linien in der Nähe sind.

2.3 Ähnlichkeit
Elemente, die sich ähnlich sind, werden als zusammengehörig wahrgenommen. Das Hirn ist imemr auf der Suche nach Objekten, die sich ähnlich sind, weil damit Ordnung in die Wahrnehmung kommt. Sind zwei Objekte auf dem Bildschirm gleich gestaltet, werden diese als gleichwertig empfunden. Elemente, die sich deutlich voneinander abheben, fallen auf – sie sollten demnach auch inhaltlich etwas Besonderes sein.

2.4 Runde Formen
Runde Formen werden leicht als Figur wahrgenommen. Auch wenn nur ein Teil davon gezeigt wird, “ergänzt” das Gehirn den Rest der Figur. Auch wenn es keinen Anhaltspunkt gint. Das gilt im Allgemeinen auch für angeschnittene Bilder. Portais werden sogar interessanter gefunden, wenn der Kopf nicht vollständig im Bild ist, was wir aber nicht bewusst wahrnemen. Achten Sie einmal, wie Personen in einer Zeitung abgebildet sind.