Überinterpretiert

tempa wrote this 00:19:
Rechte und linke Gehirnhaelfte
  • 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.

Der Klassiker unter den Template-Rastern

tempa wrote this 14:04:

klassisches Raster eine Website

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

klassisches Raster eine Website mit Headerbild

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

klassisches Raster eine Website mit farbigen Flächen

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

klassisches Raster eine Website mit farbigen Flächen und kleinen Bildern
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.

klassisches Raster eine Website mit farbigen Flächen und kleinen Bildern
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:
Klassiches Templateraster mit Würfelchen

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:

Farben definieren die Stimmung einer Website

tempa wrote this 05:12:

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.

Klassische Einteilung eines Webdesigns
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.
Klassische Einteilung eines Webdesigns

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

Siehe auch

Grundlage eines Templates für die Monitor-Ausgabe

tempa wrote this 03:37:

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

Ä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.

Din A4-Raster — Übertagbarkeit auf den Bildschirm

tempa wrote this 17:34:

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 …
Raster und der Bildschirm

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

Typo für die Website

tempa wrote this 11:55:

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.

   

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM