Screendesign - Odysee zwischen Geschmack & Nutzen

Bild mechanische SchreibmaschineEs ist doch wirklich wahnsinnig wie schnell die Zeit vergeht - Dinge sich ändern, anpassen oder auch nicht! Ich bin die Tage über eine Autorenarbeit von mir gestolpert in der ich das Thema "Screendesign" für ein Buch von DataBecker verfasst hatte. Da das ganze aus dem Sommer 2001 stammt weiss ich ehrlich gesagt nicht einmal mehr wie das Buch hies und ob es zur Veröffentlichung kam.

Aber, und das find ich gerade amüsant - wenn man das heute - 17 Jahre später liest - ist es schon verblüffend was sich verändert hat und was geblieben ist.

Für alle die dieses Thema evtl. interessiert - hier ein Zusammenschnitt meines damaligen Beitrages. Wie es mir die Zeit erlaubt werde ich ein paar aktuelle Kommentare in diesem hinzufügen.

Anmerkung: erklärende Screenshots etc. habe ich aussen vorgelassen - es geht eigentlich nur um die Texte.


Zusammenschnitt einiger Kapitel


Screendesign fängt schon viel früher an, als man eigentlich denkt. Bereits bei der Planung einer Webseite und der Sichtung der ersten Unterlagen sollte man mit einem Kunden genau besprechen welche Ziele er mit seiner Webseite verfolgen möchte. Gerade die Frage „Was“ für eine Art von Webseite der Kunde wünscht ist hier eine maßgebende Richtlinie für das spätere Screendesign.
Unterschieden wird im Netz zwischen einer Vielfalt von Seitenarten. Folgende Schlagwörter gliedern diese Seiten grob in verschiedene Bereiche ein:

  • Imageförderung
  • Informationsvermittlung & Support
  • E-Commerce
  • Unterhaltung
  • Allgemeinnützige / Öffentliche Seiten

Das Problem eines Screendesigners ist nun meistens, mehrere dieser Bereiche mit einem einzigen grundlegendem Design zu treffen. Und genau hier wollen wir anhand von 3 Themen zeigen wie man nun am besten an die Sache herantritt und welche Regeln man einfach befolgen sollte.

Kommentar 2018: "Das sieht heute noch so aus - wobei natürlich die Bereiche einiges an Zuwachs bekommen haben."

Odysee 1: Allgemeines & Technik


Kurz und bündig gesagt: „Eine Seite die nicht läuft, ist einfach nichts wert!“ Mit dieser Aussage möchten wir einfach darauf aufmerksam machen, daß es heutzutage einfach untragbar ist eine Internetseite zu erstellen die nicht auf allen gängigen Browsern bzw. Plattformen einwandfrei läuft.

Kommentar 2018: "Grundsätzlich stimme ich dieser Aussage zu - heutzutage ist es aber das Thema responsive Design für alle Endgeräte."

Viele fragen sich an dieser Stelle nun bestimmt was denn nun die Technik überhaupt mit dem Screendesign zu tun hat ?

Eine Antwort die schon reichen würde wäre das Schlagwort „Bildschirmauflösung“. Da dies für uns jedoch zu einfach wäre wollen wir dieses Thema kurz vertiefen.

Bevor man nun mit dem Screenentwurf anfängt, sollten man sich mit dem Kunden unterhalten auf welche „Bildschirmauflösung“ die Seite optimiert wird. Standard heutzutage ist wohl die Auflösung 800 x 600 px, welche aber bestimmt in den nächsten Jahren von dem Wert 1024 x 768 px abgelöst wird.

Kommentar 2018: "Haha, welche Auflösung hat ein iMac heutzutage oder ein iPhone oder ähnliches? - Trotzdem hatte ich Recht - es ging nach oben.."

Wieso ist es nun so wichtig diese Bildschirmauflösung zu beachten ?

Man kann hiermit von Anfang an die Darstellung von „Scrollbalken“ einigermaßen vermeiden, Grafiken optimal anpassen und Schriften planen. Folgende Standardwerte liefert das Produkt Dreamweaver mit seiner Option „Fenstergröße“.

Anmerkung: Es ist natürlich auch möglich mit gezieltem Einsatz von Frames, Tabellen und der richtigen Fertigung von Grafiken ein variables Screendesign zu erstellen. Die Optik passt sich beim Vergrößern des Browserfensters automatisch an.

Kommentar 2018: "Ui - böse Wörter Tabellen & Frames, heute würde da wohl Gridsysteme & Frameworks stehen :-)"

Nachdem Sie sich für eine Bildschirmauflösung entschieden haben können Sie eigentlich ersteinmal munter drauf loszeichnen und gestalten.

Die Praxis zeigt, das auch in unserem elektronischen Zeitalter der gute alte Bleistift trotzdem nicht fehlen darf. Gehen Sie daher wie folgt bei Ihrem Grundentwurf vor:

    • Zeichnen Sie sich im Skizzenstil auf DIN A4 das geplante Rohgerüst Ihrer Websei-te auf. Mit einer anderen Farbe zeichnen Sie sich eine evtl. Frameaufteilung ein.
    • Bestimmen Sie die Plätze für Grafiken wie z.B. ein immer sichtbares Firmenlogo
    • Legen Sie eine Navigationsstruktur fest. Schauen Sie nach wie lang z.B. das längste Wort in einem Menüpunkt sein kann, um später nicht noch einmal das komplette Design abändern zu müssen.
    • Vergleichen Sie grob das CI (Corporate Design) des Kunden mit der Ausrichtung des von Ihnen gefertigten Screenentwurfs. Nehmen Sie sich z.B. das Briefpapier oder eine andere gedruckte Vorlage Ihres Kunden als Beispiel und vergleichen hier, ob Inhalte mehr vertikal oder horizontal dargestellt werden.
    • Halten Sie diesen Vorentwurf wirklich einfach und gehen nicht zu stark ins Detail, denn Änderungen von Kundenseite wird es immer geben.
    • Achten Sie darauf das Sie nicht gezwungen sind pixelgenau zu arbeiten. Dies kann später bei der Umsetzung von Frames zu Schwierigkeiten im Abgleich zwischen Netscape und Internet Explorer führen.
    • Spätestens jetzt steht fest wie die grobe Optik der geplanten Webseite aussehen soll.

Kommentar 2018: "Uiiiii - fragt heute mal nen Jugendlichen was der Netscape Navigator war... - da kommt bestimmt die Anwort: Ein Spiel für die Playstation!."

Tip: Halten Sie spätestens zu diesem Zeitpunkt erneut Rücksprache mit dem Kunden, damit Ihnen Änderungen an der Struktur erspart bleiben. Nachdem Sie nun die Seite strukturiert haben beginnen Sie sich einen „Schlachtplan“ für das „Frontend“ bzw. endgültige Design der Seite zurechtzulegen.

Odysee 2: Farben, Schriften und vieles mehr ...


Für diesen Vorgang benötigen Sie meistens folgende Angaben vom Kunden:

  • Entscheidung ob Schriftarten aus dem CI verwendet werden, d.h. wo diese eingesetzt werden sollen, in welcher Größe (Angabe in Punkte „pt“ oder Pixel „px“. oder ob generell die bekannten Systemschriften (z.B. Arial, Verdana etc.) ausreichen. Weisen Sie den Kunden hier gleich darauf hin, das bei Mengentexten auf jedenfall auf die Systemschriften zurückgegriffen wird. Ein Einsatz von Schriftbildern aus dem CI ist meist nur in Form von Grafiken (z.B. Überschriften) möglich, was aber für Sie als Screendesigner einen haufen Mehraufwand bedeutet.
  • Besprechen Sie mit dem Kunden welche Farben auf der Seite eingesetzt werden sollen. Auch hier empfehlen wir Ihnen aufgrund von „Darstellungskonflikten“ der unterschiedlichen Plattformen und Bildschirmeinstellungen weitreichendst auf die 216 websicheren Farben zurückzugreifen. Diese Palette wird von Macromedia Produkten weitestgehendst als Standard eingesetzt solange Sie dies nicht anders definieren. (s. Abbildung Farbpalette)

Tip: Beschränken Sie sich soweit es geht auf eine „handvoll“ Farben für das Grundlayout . Eine klar ersichtliche farbliche Trennung der Navigation und Inhalte der Webseite werden Ihnen bzw. Ihrem Kunden die Besucher der Seite danken. Verwenden Sie stets angenehme Farbkontraste, zumindest keine Farben die sich „beissen“.

Kommentar 2018: "Schön das man heute fast alle Schriften einbetten kann - wenn man dann das Geld dafür ausgibt."

Odysee 3: Schönheit versus Schnelligkeit


Ihre Webseiten sollten immer so ausgelegt sein, daß Sie auch auf nicht sehr komfortabel ausgerüsteten PCs laufen. Maßgebend ist hier halt auch sehr oft die Anbindung an das Internet. Datenübertragungszeiten zu beachten und Grafiken in der richtigen Größe, Qualität und Format zu hinterlegen ist für Sie als Webdesigner das A und O der Optimierung einer Webseite.

Wie optimiere ich nun eine HTML-Webseite schon beim erstellen ?

Hier ein paar Faustregeln welche Sie immer anwenden können:

  • wählen Sie für jedes grafische Element Ihrer Seite das richtige Dateiformat.   Damit Sie jedoch nicht jedes Bild in jedem Format testen müssen, können Sie sich hierzu folgendes merken: Je mehr Farben ein Bild enthält, wählen Sie das Format .JPG bzw. .JPEG. Je weniger Farben ein Bild enthält, wählen Sie das Format .GIF. Eine Ausnahme hierbei sind z.B. größere Fotos welche nur in „Graustufen“ dargestellt werden. Hier wählen Sie auch das Format .JPG.

    Kommentar 2018: Naja - heute wohl eher die PNGS nachdem Sie sich in allen Browsern durchgesetzt haben."

  • Jedes Bild sollte genau in der richtigen Größe angelegt werden. Geben Sie den Bildern gleich bei der Erstellung die richtigen Pixelmaße und definieren Sie die Größe nicht über HTML.
  • Scannen Sie Vorlagen soweit wie möglich nur mit 72 dpi ein. Diese Größe reicht immer dann aus, wenn Sie das Bild 1:1 im Internet verwenden wollen.
  • fertigen Sie „eckige“ Designelemente z.B. Boxen mit Textinhalten evtl. über das Tabellenlayout und erstellen nicht jedesmal eine Grafik dafür.
    Kommentar 2018: "Naja - wohl eher über das Grid bzw. die Divs :)"
  • vermeiden Sie weitgehendst die Verwendung von „animated Gifs“ (animierte Einzelbildsequenzen. Dies hat nicht nur den Vorteil der Dateioptimierung sondern fördert zudem auch das professionelle Aussehen Ihrer Webseite.
  • Hintergründe sind zwar schön, dürfen aber die Vordergrundinformation nicht zu stark stören. D.h. wenn Sie eine Hintergrundbitmap einsetzen wollen, setzen Sie diese so weit es geht nur als „Muster“ ein. Zudem sollte dieses Muster in einem „weichen Farbton“ bzw. als leichte „Schattierung“.
  • große Bilder in Form eines gezeichneten Menuesystems zerschneiden Sie bitte in einzelne Bildteile. (s. Kapitel 4)
    Kommentar 2018: "Kratz am Kopf - oh ja damal noch alles im Photoshop kleingeschnitten was man heute mit transparenten PNGs, CSS & Co erledigt."
  • Legen Sie Buttons und Informationen in Bildern in einer angemessenen Qualität an. Achten Sie darauf das gerade im Format .jpg die Komprimierung des Bildes nicht zu hoch eingestellt und somit „unscharf“ wird.
  • Wie Sie bei Screendesign mit Schriften umgehen sollten, lesen Sie am besten im Kapitel 13 ~ Tücken der Typografie.

Um die oben genannten Punkte auch einmal visuell zu verdeutlichen folgen nun ein paar Kritiken anhand von aktuell erstellten Screenshots. Wir möchten an dieser Stelle darauf hinweisen, daß diese nur ein „Beispiel“ geben sollen und nicht die Arbeit von den Herstellern der Seite beurteilen soll.

Odysee 4: Screendesign mit Flash


Flash bietet Ihnen nahezu unausschöpfbare Möglichkeiten was das Screendesign angeht. Jedoch gibt es auch in Flash viele Dinge zu beachten. Gerade die Grafiken schlagen oft in der Performance einer Webseite zu Buche. Planen Sie auch hier Ihre Webseite genauso sorgfältig wie die Erstellung einer HTML-Seite.

Kommentar 2018: "Grübel - Flash war doch ne ganz schöne Bla....äh meine Phase :)."

Um nicht noch einmal alles von vorne zu erklären steigen wir direkt beim Punkt der Grafikformate von Flash ein.

Beim Planen von Flashseiten müssen Sie dringend darauf achten, ob Grafiken innerhalb Ihres Flashfilms skaliert werden sollen oder nicht! Folgende Grundregel sollten Sie sich diesbezüglich merken:

„Grafik soll skalierbar sein = Vektorgrafik“

Vermeiden Sie weitestgehend das Hoch- und –Runter skalieren von Bitmapformaten wie *.jpg *.gif *.bmp *.gif etc. da diese evtl. zu einer Pixelbildung führen können. Weiterhin sind diese Skalierungen sehr speicherintensiv und vergrößern meistens unnötig die Größe Ihrer SWF-Datei.

Tip: Vermeiden Sie auch die Bewegung von „großen Bildern“, da diese meistens von Rechnern mit kleineren Prozessoren sehr „ruckelnd“ dargestellt werden. Nutzen Sie diese Bilder soweit es geht nur für stehende Teile Ihres Flashfilms wie z.B. Hinter-gründe oder Fotos die eingeblendet werden.

Mit Flash ist auch das Grafikformat PNG dazugekommen, welches wohl neben den Vektorgrafiken in Flash das am meisten eingesetzte Format ist. Gerade die Variante PNG im 24-Bit Modus bietet Ihnen hier die Möglichkeit einen „Alphakanal“ für die transparenten Bereiche Ihrer Grafik anzugeben. Dies eignet sich hervorragend um Grafiken mit jeder Kontur und transparenten Bereichen zu platzieren.

Beachten Sie aber auch das dieses PNG-Format auch ein speicherlastiges Format ist und nur dort eingesetzt werden sollte wo Sie es auch wirklich benötigen!

Um Ihnen den Einsatz der einzelnen Grafikformate noch zu verdeutlichen folgen nun ein paar Studien anhand von Screenshots internationaler Seiten. Sie sehen hier die Technik und die Wahl des Grafikformates in Perfektion eingesetzt.

Tip: Benutzen Sie während dem Betrachten der Flashseiten die Funktion der rechten Maustaste „Vergrößern“ um teilweise erkennen zu können an welcher Stelle es sich um Bitmapgrafiken und wo es sich um Vektorgrafiken handelt.


Drucken   E-Mail