templaterie

Körpersprache – Bildsprache Intuition – Gefühl Kreativität – Spontanität Neugier – Spielen – Risiko Synthese – Überblick Kunst – Tanz – Musik… Ganzheitlich Zusammenhänge Raumempfinden	Sprache – Lesen – Rechnen Ratio – Logik Regeln/Gesetze Konzentration auf einen Punkt Analyse – Details Wissenschaft Schritt für Schritt Einzelheiten Zeitempfinden
Sekundär-Quelle: Hispanoteca: Hirnhemisphären

Jetzt muss man sich noch vor Augen halten, dass wir alles über Kreuz sehen und dann kommt man auf upuauet.com zur der Auffassung, dass die Navigation Links sein muss, weil …

Gestaltungskonsequenzen

Nimmt man diese Erkenntnisse als Gestaltungsgrundlage, so ergeben sich daraus Notwendigkeiten für die Anordnung von Navigation, Bild und Text. Da wir in unserem Kulturkreis von links nach rechts lesen, beginnt die rechte Gehirnhälfte (linkes Auge) ihre Arbeit demnach zuerst. Da diese Gehirnhälfte für die Orientierung und Bilderkennung zuständig ist, sollten sich Navigationselemente auf der linken Seite befinden.

Da wir nicht gerade mit einem Tunnelblick (krankhaft- und altersbedingt vielleicht schon) auf eine Seite blicken, wobei man selbst bei einem Tunnelblick in den meisten Fällen die die Fläche eine Bildschirms überblicken kann, ist diese Theorie a bissl … naja!

Solange die Navigation als solche ins Gesamtbild passt, darf sie ruhig links, rechts, mitte unten und oben sein, eben so wie es passt. Aber nett, dass wir es mal wieder gewahr wurden.

Filed under: Bildsprache,Form,TQM - Qualtiaet im Web,Websiteplanung
No Comments

Dieses Gitterlinienmodell eines klassischen Website-Designs füllen wir nun mit Leben.

Wer hier kein Bild einfügen will, kann auch einfach eine Fläche setzen.

Die große Fläche ist erdrückend. Wir benötigen eine Auflockerung. Fügen wir kleine Bilder ein.

Angedeutet durch die kleinen Flächen. Man könnte auch, wenn man ein Bild in diesem Bereich partout nicht will, diese Flächen lassen oder in diese Fläche den Seiten-Service einfügen.

In diesem Beispiel ist in dem Feld nun nur eine Suche, die dem farbigen Fläche die Schwere nimmt. Ähnlich wie dem Design-Layout dieser Seite.

Man kann das ganze aber auch ganz anders lösen:

Zum Beispiel in dem man die Fläche in viele kleine Flächen unterteilt. Design ist ein Spiel mit Flächen. Je nach Einteilung erhält man eine starke Konzentration auf jeweils eine Sache und einen Artikel wie hier, oder aber wie in dem letzten Beispiel auf viele Details und meist auch Unterthemen in der Seite.

Die Einteilung der Seite bestimmt, wie stark Sie einen Fokus setzen und wie viel Raum Sie einem einzelnen Aspekt geben. Wie Sie den Header (den Kopfbereich) Ihrer Seite gestalten bestimmt, wie stark man sich auf eine Seite konzentriert oder weitere Seiten mit in die Betrachtung zieht. Bei diesem Webdesign kann man feststellen, dass wer sich für das Thema interessiert auch in das Archiv klickt. Viel stärler als ich das bei anderne Webseiten-Layouts feststellen konnte. Wer weiter weitere Artikel sehen will, bekommt ein Liste aller in diesem Weblog erschienenen Artikel präsentiert.

Hierbei zeigt die Statistik, dass die Besucher sehr gezielt Schwerpunkte herausgreifen. Diesen Effekt, kann man immer wieder beobachten. Die Präsentation vieler Links in der Seitenleiste führt nicht selten dazu, dass diese vollkommen ignoriert werden. In einem Fall wurde die Blogroll auf eine separate Seite mit Linkempfehlungen gesetzt. Dies führte dazu, dass diese Links weitaus stärker frequentiert wurden. Dieses Thema erhielt in einer kleinen Auswahl prominenter Linkposition einen separaten Raum und damit eine Relevanz, die wir als Webmaster gesetzt hatten und vom Publikum angenommen wurde.

Siehe auch:

• „Templates einfach angepasst“
• Artikelserie zu Formen im Templaterie Web-Handbuch

Filed under: Aus der Werkzeugkiste,Bildsprache,Choreografie,Farbe,Form,Sprache
No Comments

Identische Templates ergeben je nach Farbklang unterschiedliche Websites. Die Farben eines Templates erzeugen nicht nur ein Stimmung, sie können auch einen Effekt der Form relativieren. Der Widerspruch zwischen Farbe und Form ergibt eine sehr energiegeladene Mischung. Die Farbwhal können ein Gleichgewicht stören.

Dies ist der Ursprüngliche Farbklang der Website. Das Raster ist stark vereinfacht. Das Original lebt auch durch die geschwungenen Linien. Das soll uns an dieser Stelle nicht interessieren.

Die Grundlage ist dieses Raster. Es ist ein Feld in der Mitte, das durch die horizontale Unterteilung noch statischer wirkt.

Die deutlich poppigere Farbvariation verändert den Eindruck. Es der grelle Balken hebt fast schon das schwere statische Panorama auf.

Siehe auch

• „Templates einfach angepasst“
• Artikelserie zum thema Farbe im Templaterie Web-Handbuch

Filed under: Aus der Werkzeugkiste,Farbe,Form
No Comments

Ein Template unterliegt wie in diesem Blog schon ausgeführt den Schranken des Monitors. Dessen Maße und die des Browserfenster bestimmen die Proportionen.

Ähnlich wie man ein DIN A4-Bogen falten kann, kann man auch den Monitor unterteilen. Basis für dieses Raster ist die Auflösung 1024×768 Pixel und im Firefox sind bei kleinen Symbolen die Tabs aktiv. Damit ergeben sich Aussenmaße von 1000×590 Pixel, wobei der Skrollbalken aktiv ist und nicht mitgerechnet wurde. Im Internetexplorer kommen i.R. noch 20 Pixel in der Höhe dazu. Eine Officeleiste rechts oder Links habe ich nicht berücksichtigt. Unberücksichtigt blieben auch alle verkleinerten Fenster. Natürlich kann jeder Nutzer ein Fenster auch verkleiner und die Maße können jedes Format annehmen, auch ein Hochformat. Auch wenn man sich dessen eingedenk ist, wir diese Tatsache einem bei der Arbeit nicht helfen. Denn ein Design orientiert sich am Portrait oder am Panorama. Nutzer, die z.B. eine Breite Todo-Liste oder die Favoriten oder die History offen haben, werden das Web anders wahrnehmen, als diejenigen, die diese Leiste geschlossen haben. Im Firefox lässt sich die Seitenleiste fast bis zur Mitte schieben oder das Fenster um ca. ein fünftel verschmälern. Im Internet Explorer ist die Variationsbreite der Favoritenleiste links von 10% zu knapp 50% der Gesamtbreite des Fensters.

Da sich diese Fenster bequem zu- und wegschalten lassen, neige ich dazu sie zu ignorieren. Wer dies nicht ignoriert, hat einen Innenbereich bei 1024×768 von ca. 600×600 Pixel der skrollfrei dann existiert, wenn der Nutzer nicht auch noch das Fenster verkleinert nutzt. Das sind soviele Varianten und Unbekannten, dass man diese schlicht auch in die Tonne geben sollte wenn man ein Templatedesign beginnt. Zumindest halte ich es so, da sich das bewährt hat und mir in all den Jahren keine Klagen kamen.

Filed under: Aus der Werkzeugkiste,Form,Microsoft IE,Mozilla FF,Photoshop
No Comments

Heute flatterte mir ein interessanter Artikel per E-Mail ins Postfach, den ich gerne zur Lektüre empfehle. Aber eines sollte man beim Lesen im Hinterkopf behalten. Der Monitor gibt ein Panorama vor, das im Verhältnis 4:3 zunächst einmal die äußeren Proportionen vorgibt. Wenn man also seinen DIN A4-Bogen hälftig und gedrittelt faltet (mit dem Monitor besser nicht probieren), dann erhält man ein sehr ausgewogenes Raster … nur DIN A4 ist ein Verhältnis von ca. 2:3 der Kanten …

Nun aber direkt zum Raster-Tutorial für Webdesigner von Mark Boulton

* Five simple steps to designing grid systems – Part 1
* Five simple steps to designing grid systems – Part 2
* Five simple steps to designing grid systems – Part 3
* Five simple steps to designing grid systems – Part 4
* Five simple steps to designing grid systems – Part 5

via Jörg Petermann

Siehe auch: Der Goldene Schnitt

Filed under: Design (CD und anderes),Form,Uncategorized
No Comments

Erste Fonts-Quellen für sIFR, die Technik mit der man Überschriften und Slogans aufhübschen kann, sind jetzt im Netz zu finden. Free Fonts als SWF für die Website gibt es auf http://www.fontsmack.com und auf http://www.sIFRFonts.com.

Damit entfällt für viele die Notwendigkeit sich Flash 2004 MX anschaffen zu müssen, um diese Technik für die eigene Website nutzen zu können. Wie so etwas aussehen kann und dass es auch mit Editland eingesetzt werden kann, kann man an dieser Stelle sehen: sIFR-Schmucktext in der Demo-Provinz Quest in der Templaterie.

Filed under: (X)HTML,Aus der Werkzeugkiste,CSS,Editland,Flash,Form,Javascript,Webtechniken
2 Comments