Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» Startseite » Design und Grafik - Tutorials

Webdesign: Aufteilung und Typographie

Der Eindruck einer Webseite hängt davon ab, wie dass äussere einer Webseite rüber kommt. Wie ist der Text aufgebaut, die Zwischenräume, die Auszeichnungen, welche Schriftarten wurden eingesetzt und wie sind die Grafiken platziert. Das ganze bildet ein Gesamtbild, dass durch seine Kontraste besticht.

Natürlich sollte es nicht überladen sein mit Kontrasten oder nur aus einer öden Textwüste bestehen. Hier zwei Beispiele.

Das linke Seiten-Layout ist willkürlich angeordnet. Die Texte sind nicht einheitlich formatiert und die Grafiken sind auch irgendwie platziert. Das rechte Seiten-Layout ist gut durchstrukturiert und übersichtlich.

Typ 1 Typ 2
Sehr zerstückeltes LayoutEinheitliches Layout in Blöcken


So könnte eine Aufteilung des Tabellenlayouts sein. Dies ist passend auf eine DIN A4 Druckseite. Bestehend aus einer Kopfzeile - das kann sein eine Grafik oder Text, einer Spalte mit der Navigation, eine Abstandsspalte und eine Spalte mit dem Haupttext. Unten kommt dann eine Fusszeile entweder eine Grafik oder ein Text.

Layout

Lesbarkeit:

Wichtig ist natürlich auch die Schriftgrösse eines Fonts. Zu kleine Texte ermüden beim Lesen und dann klickt der User weiter. Der normale Text sollte eine Punktgrösse von 10-12 haben. Zu beachten ist auch, dass es Fonts gibt, die von Haus aus kleiner sind und das Mac-User die Schriftarten 2-3 Punkte kleiner im Browser dargestellt bekommen.

Fonts

Der Text sollte nicht ausschliesslich in Fett geschrieben sein. Wenn alles fett geschrieben ist, hebt sich nichts mehr ab. Bitte auch sparsam mit der Grösse der HTML-Überschriften sein.

Wir lesen hauptsächlich in dem wir die Gesamtform eines Wortbildes erkennen und weniger die einzelnen Buchstaben. Bitte schreibt die Überschriften nicht einheitlich gross, dass ist ebenso schlecht zu lesen.

Capital

Der in Grossbuchstaben geschriebene Titel wirkt wie ein monotoner Block, der nur schwer lesbar ist.

Formatierung:

Der Text lässt sich in verschiedenen Ausrichtungen formatieren. Linksbündig, Zentriert, Rechtsbündig oder im Blocksatz. Wenn Ihr solche Blöcke haben wollt wie auf meiner Webseite, müsst Ihr Euren Text im Blocksatz formatieren. Beispiel:

  1.  <div align="justify"> Text Text Text Text Text </div>


Hinweis:

Bitte beachtet, dass bei per HTML eingebundenen Texten (keine Grafik), nur dann der Text mit dem gewünschten Schrifttyp angezeigt wird, wenn der User diesen auch auf der Festplatte gespeichert hat. Man sollte daher die Website mit Standartschrifttypen erstellen.

Wenn es nun aber doch mal ein anderer/aussergewöhnlicher Schrifttyp sein muss, sollte man diese als Textgrafik gestalten. Das geht freilich nur bei Überschriften, denn es macht keinen Sinn den gesamten Text als Grafik darzustellen.

Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
Videotutorial: Runder Rahmen (für Orbs usw. geeignet) mit Photoshop
Webdesign: Weniger ist mehr
Webdesign: häufige Fehler
Videotutorial: Objekte mit Photoshop umfärben
Webdesign: Userfreundliches Design


 
Anzeige