PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Der Homepage-Guide: Arbeitsschritte und Designtipps


RMC
2005-07-20, 18:17:55
Ich wollte mal einen kleinen Guide für ein gutes Design geben, da vermehrt Fragen in diese Richtung aufkommen. Natürlich ist das nur ein kleiner Auszug, wer sich in bestimmte Themen vertiefen will, wird damit nicht auskommen ;) Aber ich geb mal die Grundzüge und die wichtigsten Eckpunkte.

Ich dachte es wäre vielleicht ganz nützlich und es gibt ja auch viele Interessierte :)


Arbeitsweise (bitte beachten: Dieser Workflow ist kein MUSS, wird aber als gute Arbeitsweise von professionellen Webdesignern als effizient angesehen und ist auch in anderen Bereichen wie Logoentwurf, Grafikdesign (Plakate, Inserate etc.) einsetzbar):

1. Die Homepage braucht ein Thema. Ohne Thema verliert man das eigentliche Ziel aus den Augen und man hat nichts, das man dem User anbieten kann. Hat man ein Motto, eine Idee gefunden, geht es weiter mit den Inhalten. Man sollte sich die Frage stellen: "Was will ich eigentlich vermitteln, wen will ich damit erreichen?" Es gibt schon genug unsinnige Personal HPs im Internet, man sollte sich also wirklich mal Gedanken machen ;)

2. Die ersten Skizzen folgen: auf Papier! Da wird einfach alles aufgeschrieben was wichtig ist. Das wären: Menüpunkte, Inhalte, Struktur und Design. Die ersten „Screenshots“ werden ebenfalls auf Papier gemacht. Dabei darf nicht nur, nein es SOLL sogar experimentiert werden. Wie könnte das Menü aussehen? Wie sieht ein Menüpunkt im Detail aus, welche Form hat er? Welche Farbe setz ich wo ein? Welche Elemente bring ich wo ein? Wo wird der Text stehen? Wo genau befindet sich der Suchen-Button? Etc… . Die Reihenfolge ist dabei egal, Hauptsache die Ideen werden visualisiert. Das sollte man für jeden Bereich der Homepage durchgehen.
Nicht schrecken vor Papierarbeit ;) Es werden bestimmt einige A4 Zettel dafür verwendet, aber je mehr desto besser. Keine Idee darf unausgesprochen bleiben! Möglichst alles festhalten und gute Ideen weiterentwickeln.

Vorteil: Bei Papierskizzen fließt die Idee besser, schneller und ungehinderter als am Computer, es gibt keine Barrieren. Man kann immer auf seine Ideen zurückgreifen, nachvollziehen, weiterentwickeln und gegebenenfalls sogar auf neue Möglichkeiten draufkommen.
Wer das noch nicht kennt, sollte es mal ausprobiern :). Es hilft enorm bei der Ideenentwicklung.

3. Jetzt folgt die digitale Umsetzung der besten Papier-Version in einem Grafikprogramm (möglichst Vektorgrafik!), um das Ganze zu visualisieren und um einen ersten Eindruck von Farbe und Form zu bekommen. Wichtig ist hier auch, sich schon möglichst vor dem Umsetzen mit allen Bereichen der Homepage auseinander zu setzen. Jede Seite sollte gestaltet werden. Mehrere Versionen sind kein Problem, manchmal sieht sie am Bildschirm besser aus als zuerst auf Papier. Die subjektiv beste Version wird gewählt.

4. Anhand dieser Vorab-Screenshots wird jetzt umgesetzt. Diese Screenshots sollten immer vor Augen gehalten werden. Am besten ausdrucken und als Vorlage nehmen.
Bei der Umsetzung kann dann auf bereits bestehende Vektorformen und RGB Farbwerte zurückgegriffen werden.



Designtipps:

Farbe

Welche Farbe gewählt wird, hängt prinzipiell vom Thema ab. Grundsätzlich sollten auf einer Seite aber nie mehr als 3 unterschiedliche Farbtöne verwendet werden, aber mindestens 2 (Ausnahme sind Farbvorgaben zb von Firmenlogos). Somit vermeidet man kunterbunte Seiten und langweilige Designs.
Nicht jede Farbe eignet sich überall! Von der Farbpsychologie her kann man die Wichtigsten Farben wie folgt betrachten:


Rot zB ist agressiv, lebendig, erotisch, extrovertiert, emotional, dynamisch
Blau ist zurückhaltend, ruhig, friedlich, introvertiert
Grün ist natürlich, frisch, konservativ und ausgleichend
Braun ist vital, passiv, vertraut und stabil
Gelb ist modern, zielgerichtet und steht für Zufriedenheit und Glück
Weiß ist rein, einfach, steril
Schwarz ist klassisch, mysteriös und kräftig
...


Aber das ist nur der Ton (Mischungen ausgeschlossen). Durch Helligkeit und Sättigung ergeben sich wieder unterschiedliche Eigenschaften.


Gesättigt ist aufmerksamer als Ungesättigt
Sehr Hell/Sehr dunkel ist aufmerksamer als mittlere Farben
Rein ist aufmerksamer als Getrübt.



Die Aufmerksamkeit bestimmt die Farbgebung bei Vordergrund und Hintergrund.
Farben gleicher Sättigung oder gleicher Helligkeit sowie im Farbkreis „nebeneinander“ liegende Farben (zb Orange und Gelb, Orange und Rot) oder gegenüberliegende Farben (Komplementärfarben) harmonieren miteinander und können zusammen eingesetzt werden.

Der Kontrast zwischen 2 Farben bestimmt die Wahrnehmung (und die Lesbarkeit beim Text), deshalb ist Farbe nicht gleich Farbe. Die Umgebung spielt eine wesentliche Rolle. Ein helle Farbe (zb Gelb) wirkt neben einer hellen Fläche (Mittelgrün) viel dünkler als auf einer dunklen Fläche (Blau). Also Aufpassen bei Vorder- und Hintergrund sowie bei nebeneinander liegenden Flächen.
Prinzipiell gilt: je höher der Kontrast, desto besser die Lesbarkeit. Allerdings wirkt ein zu hoher, extremer Kontrast (Schwarz auf Weiß) zu stark und ermüdet die Augen. Eine bessere Kombination wäre Dunkelgrau auf Weiß oder einem sehr hellen Pastelton.


Schrift:

Schrift sollte auf einer Seite nicht unterschätzt werden. Da Information durch Schrift übertragen wird, spielt sie eine wesentliche Rolle.


Nie mehr als 2 oder 3 verschiedene Schriftarten mischen
Serifenschriften sind für Fließtext in Webseiten prinzipiell ungeeignet, immer serifenlose Schriften verwenden (zb Verdana, Arial, Tahoma).
Für die Überschrift/Menü kann aus Designgründen auf eine Serifenschrift zurückgegriffen werden
Unterschiedliche Wichtigkeit von Text kann durch Farbe, Größe, Schriftart und Hervorhebung erreicht werden.


Wichtig ist auch die Textformatierung. Lange Sätze mit mehr als 10 Wörtern lassen das Auge am Bildschirm schnell ermüden. Deshalb sollte Text in eher kurzen Spalten verfasst werden und nicht über die ganze Seite. Mehrere Absätze gliedern den Fließtext und lassen immer wieder kleine Portionen von Information zu, so vermeidet man dass man im Text "verloren" geht.
Ein Satzspiegel zur Einteilung von Text auf der Seite hilft besonders bei inhaltsstarken Homepages, die zB Artikel anbieten.


Form

Form ist ein wichtiges Gestaltungselement. Rund, Eckig, Kreis, Oval, oder doch lieber digital genau genau mit Rechteck und Quadrat? Manches lässt sich einfacher umsetzen, aber erfüllt nicht immer denselben Zweck.


Quadrat: statisch
Kreis: gleichmäßig, konzentriert auf den Mittelpunkt
Dreieck: extrovertiert, nach außen gerichtet, Aufmerksamkeit liegt auf den Ecken.


Mischformen sind natürlich möglich.

Durch Hervorhebung kann aus mehreren gleichen Formen (zB lauter Kreisen) eine Wichtigkeit, eine Rangordnung entstehen. Dies kann passieren durch:


verschiedene Größe (größer = wichtiger)
verschiedene Sättigung (gesättigt = wichtiger)
Lage (nebeneinander liegende Formen gehören zusammen, bilden eine Einheit; vorne liegende Elemente sind „wichtiger“ als dahinter liegende)
Richtung (aufsteigend = positiv, absteigend = negativ)



Informationsträger

Information muss nicht immer durch Schrift übermittelt werden. Ein Bild sagt mehr als tausend Worte heißt es so schön. Und mit dem richtigen Symbol an der richtigen Stelle mit der richtigen Aufmerksamkeit gibt der Seite mehr Benutzerfreundlichkeit. Wo es auch immer sinnvoll ist, sollten diese eingesetzt werden. zB: Statt „Kontakt“ könnte ein Brief-Symbol stehen, statt „Download“ einfach eine Festplatte mit Pfeil, statt „Galerie“ einfach ein Bilderrahmen mit Bild drin.
Den höchsten Grad an visueller Information erreicht man, indem man beides zusammen kombiniert.


Navigation

Die Navigation ist DAS wichtigste Element. Über sie findet sich der User zurecht und steuert die Seite. Sie sollte deshalb:


Klar und nachvollziehbar sein
Schnell zu finden, einfach zu bedienen und logisch sein.
Sie muss nicht immer zwingend über reinen Text erfolgen! Siehe dazu „Informationsträger“. Aus Designgründen ist auch eine Navigation rein durch Formelemente möglich, siehe dazu „Form“.
Sie darf den User nicht verwirren und sollte ihn so schnell wie möglich zu seiner gewünschten Information bringen. Mehr als 2 Navigationsebenen sind zu viel, auch bei viel Content. Viel Information muss nicht heißen: große, unübersichtliche Navigation!



Fotos und Grafiken

Fotos (von der Digitalkamera) auf der Seite sollten eigentlich hauptsächlich in JPG angeboten werden (gängigstes Format). Verlustfrei ist zwar PNG, ist für Fotos aber nicht so gut geeignet. Andere Formate wie BMP etc. eigenen sich überhaupt nicht.
Die maximale Größe sollte bei 800x600 – max. 1024x768 liegen, optimal wäre bei Galerien ein Download aller Bilder in mehreren Größen (sofern es der Webspace zulässt).

Für höhere Benutzerfreundlichkeit sollten IMMER ausnahmslos Thumbnails angeboten werden, die eine Vorschau für die Fotos bieten. Sie sollten nicht zu groß sein (~5-7 kB) aber genug Bildinformation erkennen lassen.

Für Grafiken (=Icons, Rahmen, Balken, Hintergründe etc.) wird meist GIF verwendet. Bei mehreren Transparenzstufen ist PNG die erste Wahl für kleine Grafiken. Die Dateigröße selbiger liegt meist unter 1kB, max. bei 2-3kB.


Animationen

Sollten weise eingesetzt und auf keinen Fall übertrieben werden. (zB hauptsächlich um komplizierte Vorgänge, Mechanismen und Abläufe zu visualisieren, wo ein Standbild nicht mehr aushelfen kann). Dafür eignet sich meist ein professionelles Produkt wie Macromedia Flash. Sowas sollte aber nicht für kleine Buttonanimationen (zb Farbwechsel) missbraucht werden ;)

Für design-künstlerische Animationen wie Button-Animationen (wenn sie unbedingt sein müssen) eignet sich auch Javascript.


Browser und Auflösungen

Eine Homepage mit fixer Auflösung hat einen wesentlichen Vorteil gegenüber einer mit variabler Größe: sie sieht überall auf jedem Bildschirm gleich aus. Bei variabler Größe kann das Problem von zuviel ungewolltem Leerraum entstehen, wenn man eine zu hohe Auflösung hat. Wenn jemand eine zu niedrige Auflösung hat, enstehen ungewollte Scrollbalken.
Es ist quasi eine Kunst für sich, Seiten so zu designen, dass sie komplett ohne Scrollbalken auskommen können. Manchmal schwer, aber dennoch machbar bei Personal Homepages.
Ausnahmen sind Seiten mit viel Text und Inhalt (zb Foren, Webseiten mit Artikeln etc.) dort empfiehlt es sich die Höhe der Seite variabel zu halten, um so zuviele einzelne Seiten zu vermeiden.
Ansonsten kann bei weniger Text selbst auf variable Höhe verzichtet und somit auf ein Design komplett ohne Scrollbalken gesetzt werden.

Es sollte immer auf eine gängige Auflösung optimiert werden, wie zB 1024x768. Ist heute immernoch bei Laptops weit verbreitet, wird aber allmählich von höheren Auflösungen verdrängt. Da die gängigen Browser unterschiedlichen Platz wegnehmen, muss dies mit eingerechnet werden. Somit bleibt eine maximale Höhe von knapp 580 Pixeln übrig.

Die Kompatibilität zu vielen gängigen Browsern (IE, FF/Mozilla, Opera, Safari, NN) sollte beachtet werden, schließlich möchte man sich nicht mit Darstellungsfehlern rumärgern, was die Seite weniger attraktiv macht. Heute nutzen längst nicht alle mehr den IE! Auch wenn es zeitraubend ist, sollte ein Test auf diesen Browsern gemacht werden (Ausnahme sind bei kommerziellen Projekten die Angaben im Pflichtenheft).

Die Kompatibilität kann unter anderem durch eingehaltende Standards (wie vom W3C vorgeschlagen) wie zB durch die Verwendung von Layern und CSS erreicht werden.


Absolute Fehlgriffe

Vermieden werden sollten um jeden Preis:


Hintergrundbilder oder sich wiederholende Hintergrundbilder im Fließtext
nicht lesbarer Text
schlechte Vordergrund/Hintergrund Kombination
Blinkende GIFs und andere unnötig eingesetzte Animationen
Hintergrundmusik
Flash-Intros
Unnötiger Inhalt auf Personal Homepages (auf Thema achten!)



Was kann ich an meiner Seite noch verbessern?

Wird oft gefragt. Grundsätzlich kann man schon mal die Frage selbst beantworten, indem man die folgenden Punkte durchgeht:


Passen die Farben und harmonieren sie?
Ermüdet das Auge selbst nach langem Hinsehen nicht?
Wird die Aufmerksamkeit richtig gelenkt?
Kann man den Text gut erkennen, ist er gut und schnell wahrzunehmen?
Ist die Navigation logisch und klar?
Kommt der User überall schnell genug hin?
Wird die Information klar und deutlich vermittelt?
Ist die Schriftart gut eingesetzt, kann man sie deutlich genug erkennen?




So das wars mal. Ich hoffe ich konnte einige Aspekte näher beleuchten. Gutes Gelingen :)

M@tes
2005-07-20, 18:38:04
Programmiere ja auch schon seid einigen Jahren und kann das eigentlich nur bestätigen.

Flashintros und Fehlgriffe,... Benutze zwar kein Flash, aberals Fehlgriff würd ich das nicht wirklich bezeichnen. SO ein Intro find ich eigentlich garnichtmal so schlecht, wenn man diesen überspringen kann.
So kann man in kurzer Zeit eine kleine Präsentation über die Seite bzw das Thema oder was auch immer laufen lassen.

rundsätzlich sollten auf einer Seite aber nie mehr als 3 unterschiedliche Farbtöne verwendet werden
Zählen Schwarz und Weiss für dich auch zu Farben?
Zu bunt sollte es schon nicht sein, aber 3 Farben sind auch einwenig wenig.
Die Menge machts,...
Ich bevorzuge halt Gelb, Grau, Weiss und Schwarz. Seid kurzen sogar hier und da einwenig blau.
Hier ev ein kleines Beispiel:
http://www.freefaq.ch
Hatte in letzter Zeit keine Zeit zum programmieren, drum ist da auch nich viel zu sehen, aber demnächst will ich auch mal wieder anfangen.
Das Design hab ich vom alten übernommen und passt für den Inhalt, der da gerade drauf ist nicht wirklich. Aber eben aus Zeitnot hab ichs provisorisch mal so eingeführt.
Nich das da noch irgendwelche Kritiken in die Richtung kommen ;)

PS: Papier ist das Nonplus ultra! Mögen die meisten wohl nicht glauben, aber es ist echt besser. Geht schneller und man hat mehr freiheiten.

RMC
2005-07-20, 18:47:29
hmm...

ich würde das nicht als 5-farbig auslegen: sondern als 3-farbig: Grautöne, Blau und Gelb (wobei Blau und Gelb ja fast Komplementärfarben sind) :) Aber ansonsten meinte ich nicht mehr als 3 komplett unterschiedliche Farben. So im Grenzbereich ist ja vieles möglich.


Zum Thema Intro: interssiert mich eigentlich nicht. Und ich such eigentlich immer nur den Backbutton. Ein Intro ist IMHO nur bei einer Film- oder Spielseite gut angebracht, mit einem wirklich starken Thema. Auf Personal Hompages haben die weniger was verloren, das wirkt eher so wie "He ich kann Flash, seht mal her" ;)

M@tes
2005-07-20, 19:05:17
Desshalb hab ich gefragt, ob du Schwarz und Gelb als Farbe siehst.

Wenn ein Intro gut gemacht ist, wieso nicht? Quasi als eine art Präsentation.
Das schaut man sich eh nur einmal an.
Vielmehr stört mich manchmal, dass man nciht weiss, wie lang das "Video" läuft. 5Min hab ich keine lust mir anzuschaun,...

Habe mir auch schon überlegt Flash zu lernen. Für so kleine Gimmiks oder so. Ala: 2Augen schauen sich um oder so, wenn man Minutenlang die Seite nicht wechselt.

Ansonsten würd ich noch hinzufügen:
Browserkonform programmieren *Mich gerad an den IE User bevorzugt Thread*

Aufösungen beachten. Damals war 800x600 Standard. Mittlerweile kann man glaub schon auf 1024x768 wechseln. Wobei man halt noch Scrolleisten, Bars etc pp beachten sollte.

Marscel
2005-07-20, 19:07:04
Einen Tipp für jeden Homepagebauer, der mich erfreuen will, die Priorität des Inhalts bitte höher legen als die des Schickschnacks (z.B. die von RMC als negativ erwähnten Punkte) drum herum.

Die schönst gestaltete Seite bekommt von mir Verachtung, wenn ich die gesuchten Informationen einfach nicht mit ein paar Klicks finden kann.
Es sei denn, es ist die Intention der Seite, einfach nur hübsch auszusehen.

Ich habe sehr, sehr lange über meine Homepage nachgedacht, bis ich etwas geeignetes gefunden habe (Signatur).

darph
2005-07-20, 19:31:16
Was ich persönlich für wichtig halte, ist bei inhaltsbasierten Seiten, vorher die logische Struktur (XHTML) zu bauen und dann darum das Design zu basteln.

Die Website muß ohne CSS und ohne JavaScript funktionieren (nicht schön aussehen, aber funktionieren). Tabellen als Designelemente kann man für designbasierte Websites (Show-Offs) machen, aber nicht in einer ernsthaften, schlicht, weil die logische Struktur der Website vor dem Design da ist. Darum greift man hier auf divs zurück und verwendet die als Rahmen für Inhalte - ähnlich wie bei objektorientierter Programmierung Klassen andere Klassen kapseln, werden hier div-Rahmen verwendet.

Erst wenn das steht, kann man damit anfangen, ein Design zu basteln. Dann kann man auch JavaScript verwenden, um hover-effekte zu basteln. Dann ist eigentlich auch schon sicher gestellt, daß die Seite auch ohne JS funktioniert. Darum ist CSS und (X)HTML Validierung so wichtig.

Was bei Softwareengineering für OO-Programmierung gilt, kann man teilweise auch für die Erstellung einer Website sehr gut hernehmen. Kapselung, Austauschbarkeit etc. Die logische Struktur einer Website hat nichts mit dem Design zu tun. Ich muß in der Lage sein, einfach durch den Austausch der CSS Datei ein neues Design drüber ziehen zu können. JS sollte nur für Gimmicks verwendet werden (Natürlich kann man auch überprüfen, ob nicht ein Formularfeld nicht ausgefüllt wurde, das entbindet aber nicht das PHP/CGI/JSP/Sonstwas Script davon, die Formulardaten nach dem Abschicken trotzdem nochmal auf Konsistenz und Korrektheit zu prüfen - es muß halt auch ohne funktionieren).

Man entwirft nicht für Auflösungen, Farbtiefen oder Browser. Okay, 16 bit Farbtiefe kann man heutzutage als gegeben Vorraussetzen, aber eine Website für 1024er Auflösung zu entwickelt ist zum Beispiel wenig sinnvoll, da das ja vorraussetzt, daß jeder mit einem maximierten Browserfenster surft. Das ist unsinnig.

Kurze Zeilen und lange Spalten lesen sich besser als lange, aber wenige Zeilen. Bestes Beispiel hier im Forum. Sucht Euch einen beliebigen längeren Post und betrachtet ihn einmal im kleinen Fenster und einmal maximiert. Je länger die Zeile, desto größer die Chance, daß das Auge abrutscht. Nicht umsonst sind die allermeisten Zeitungsartikel Spaltenorientiert verfaßt. Lieber die maximale (!) Breite der Website limitieren und einen dezenten (!) Hintergrund wählen. Damit macht man das auch Fenster-kompatibel.

Das sind natürlich meine persönliche Meinungen. Keine Dogmen.

---
Marscel deine Seite (pcreact) finde ich - persönlich - von einem designtechnischen Aspekt her nicht sooooo toll, obwohl ich Minimalismus schon bevorzuge. Sie ist aber funktional, das reicht - der Rest ist Geschmack.

RMC
2005-07-20, 19:40:22
So...ein paar Infos geaddet.

Gast
2005-07-20, 20:20:43
Anmerkungen:
Ich wollte mal einen kleinen Guide für ein gutes Design geben
Darauf hinweisen, daß sich die Anleitung wirklich um das *Design* dreht und technische Aspekte außen vor läßt. Ansonsten entsteht der Eindruck, daß es sich hierbei um einen kompletten Leitfaden von der Idee bis zum Abschluß handelt.

Die Homepage braucht ein Thema. Ohne Thema verliert man das eigentliche Ziel aus den Augen und man hat nichts, das man dem User anbieten kann. Hat man ein Motto, eine Idee gefunden, geht es weiter mit den Inhalten. Man sollte sich die Frage stellen: "Was will ich eigentlich vermitteln, wen will ich damit erreichen?" Es gibt schon genug unsinnige Personal HPs im Internet, man sollte sich also wirklich mal Gedanken machen ;)
Das kann gar nicht genug herborgehoben werden. Ich würde schreiben: "Das wichtigste an einer Seite ist der Inhalt. Danach kommt der Inhalt, dann der Inhalt und noch einmal der Inhalt".
Eine der meistbesuchten Seiten ist beispielsweise Google, eine sehr schlichte Seite. Welcher Unterschied würde sich ergeben wenn Google auf serife Schrift setzt, das Textfeld an den Rand verschiebt, das Logo schwarz/weiß färbt oder ähnliches? Keiner, die Seite wäre immer noch eine der meistbesuchten.

Im krassen Gegensatz dazu stehen Millionen privater Seiten, bei denen sich der Autor wochenlang Gedanken um Farben, Formen und Schriften macht, aber beim Inhalt ist dann nichts mehr übrig. Dementsprechend verirren sich dann im Monat mal zehn Leute auf die Seite.

Die Beispiele sollen nur illustrieren: Der Inhalt ist wichtiger als alles andere zusammen. Wer eine Seite zum Selbstzweck erstellt der mag das tun, der Rest braucht aber über Farben erst gar nicht nachzudenken, solange es keinen Inhalt für die Seite gibt.

Fotos und Grafiken

Fotos (von der Digitalkamera) auf der Seite sollten eigentlich hauptsächlich in JPG angeboten werden (gängigstes Format). Verlustfrei ist zwar PNG, ist für Fotos aber nicht so gut geeignet. Andere Formate wie BMP etc. eigenen sich überhaupt nicht.
[...]
Für Grafiken (=Icons, Rahmen, Balken, Hintergründe etc.) wird meist GIF verwendet. Bei mehreren Transparenzstufen ist PNG die erste Wahl für kleine Grafiken. Die Dateigröße selbiger liegt meist unter 1kB, max. bei 2-3kB.
Widerspruch!

Photos (Bilder ohne gleichfarbige Flächen): JPEG
Animationen: GIF
Rest: PNG

Darüber gabs in ausführlicherer Form schon einige Threads.

Browser und Auflösungen

Eine Homepage mit fixer Auflösung hat einen wesentlichen Vorteil gegenüber einer mit variabler Größe: sie sieht überall auf jedem Bildschirm gleich aus. Bei variabler Größe kann das Problem von zuviel ungewolltem Leerraum entstehen, wenn man eine zu hohe Auflösung hat. Wenn jemand eine zu niedrige Auflösung hat, enstehen ungewollte Scrollbalken.
Es ist quasi eine Kunst für sich, Seiten so zu designen, dass sie komplett ohne Scrollbalken auskommen können. Manchmal schwer, aber dennoch machbar.

Es sollte immer auf eine gängige Auflösung optimiert werden, wie zB 1024x768. Ist heute immernoch bei Laptops weit verbreitet, wird aber allmählich von höheren Auflösungen verdrängt. Da die gängigen Browser unterschiedlichen Platz wegnehmen, muss dies mit eingerechnet werden. Somit bleibt eine maximale Höhe von knapp 580 Pixeln übrig.
Widerspruch!
1. Eine Seite die überall gleich aussehen würde, würde dem Geist von HTML/CSS zuwider laufen. So etwas ist auch gar nicht möglich.
2. Sowohl variable als auch feste Breiten haben Vor- und Nachteile. Eine Suche nach "fixed liquid width" fördert da genug Standpunkte und Argumente zu Tage. Das zu ignorieren und schlicht feste Breiten als besser zu erklären bzw der Satz es "sollte immer auf eine gängige Auflösung optimiert werden" ist damit Unsinn.

Der Absatz sollte IMHO entfernt, da er einerseits falsch ist und andererseits hiermit ein weiteres Thema - die tehcnische Umsetzung einer Webpräsenz - angeschnitten wird.


Den Text von darf unterschreibe ich.

RMC
2005-07-20, 21:37:19
Widerspruch!

Photos (Bilder ohne gleichfarbige Flächen): JPEG
Animationen: GIF
Rest: PNG


Das seh ich aber anders, und ein Widerspruch is in meiner Aussage nicht drin, wenn dann heißt das "Einspruch". :P
Außer GIF gibts noch zahlreiche andere Animationsmöglichkeiten (und GIF ist bei weitem nicht die beste!), darauf wollt ich aber nicht näher eingehen weil es ein Kapitel für sich ist.

Für den Rest würd ich auch nicht immer PNG nehmen, GIF reicht sehr viel öfter aus! Außerdem hat der IE Probleme mit PNG, gibt aber einige Scripts die das beheben.



Widerspruch!
1. Eine Seite die überall gleich aussehen würde, würde dem Geist von HTML/CSS zuwider laufen. So etwas ist auch gar nicht möglich.
2. Sowohl variable als auch feste Breiten haben Vor- und Nachteile. Eine Suche nach "fixed liquid width" fördert da genug Standpunkte und Argumente zu Tage. Das zu ignorieren und schlicht feste Breiten als besser zu erklären bzw der Satz es "sollte immer auf eine gängige Auflösung optimiert werden" ist damit Unsinn.

Der Absatz sollte IMHO entfernt, da er einerseits falsch ist und andererseits hiermit ein weiteres Thema - die tehcnische Umsetzung einer Webpräsenz - angeschnitten wird.

CSS hat die wesentliche Funktion, Designattribute zusammenzufassen und somit die Wartbarkeit zur vereinfachen. Darüberhinaus kann eine Homepage in mehreren Designvarianten vorliegen, indem man nur das CSS tauscht. Wers braucht.
Und es ist der Sinn einer Homepage, dass sie auf allen Browsern gleich aussieht. Und sowas ist möglich.


Und mit "auf gängige Auflösungen optimieren" meine ich z.B. Menüs, die klein genug sind dass sie auch auf einer geringen Auflösung richtig angezeigt werden und nicht etwas abgeschnitten wird oder Scrollbalken erscheinen

darph
2005-07-20, 22:42:06
Das seh ich aber anders, und ein Widerspruch is in meiner Aussage nicht drin, wenn dann heißt das "Einspruch". :P
Er sagt sicht, daß deine Aussage widersprüchlich sei, sondern daß er dir widerspricht. ;)

Nase
2005-07-21, 13:59:40
Frage an RMC: Du schreibst, man soll auf jedenfall den Einsatz von (gekachelten) Hintergrundbildern vermeiden. Könntest du das begründen? Das Forum hier hat z.B. ein gekacheltes Hintergrundbild. Stört es? Beeinträchtigt es die Funktion, die Lesbarkeit, schlicht: die Usability?

Aber nochmal ein paar Anmerkungen zu den einzelnen Abschnitten:

Arbeitsweise: Das klingt fast so, als ob du es den Lesern vorschreiben willst, dass sie ihre ersten Designentwürfe gefälligst auf Papier durchzuführen haben. Ich fände es begrüßenswert, wenn du den Absatz ein wenig umformulieren würdest. Ich arbeite meistens so, dass ich direkt das umsetze, was mir in den Sinn kommt. Das ist in den meisten Fällen kein komplettes Design/Layout, sondern oftmals nur eine Navigation, ein Absatz mit Überschrift etc. Auf diese kleinen Bausteinen greife ich sehr oft wieder zurück, wenn es heisst, eine Webseite im Ganzen zu erstellen.

Schrift: Es muss nicht immer eine serifenlose Schriftart für den Haupttext sein. Selbst der Spiegel verwendet in ihrem Magazin die Schriftart Georgia für die Artikel. Also warum nicht auch im Web? Entscheidend ist hier nur die Größe der Schrift. Wenn sie zu klein wird, kann man jede Schriftart sehr schlecht lesen. Deshalb ist es auch sicherlich gut, anstatt die Schriftgröße in festem px eher in em, Prozent oder dergleichen anzugeben.
Was bei der Schrift auch sehr angenehm ist, ist ein Zwischenraum zwischen den Zeilen (line-height). Das macht das Lesen langer Texte einfacher und entspannender.
Was die Länge der Zeilen angeht ("max. 10 Worte") ... naja, ich würde mich da nicht gerade auf einen Wert festlegen wollen. Ist wahrscheinlich auch nicht möglich.

Informationsträger: Das ist eine heikle Angelegenheit. Du kannst nicht so pauschal sagen, dass du den Text einfach durch ein Bild tauschen kannst. Nicht jeder verbindet die gleichen Eigenschaften/Informationen mit einem Bild. Vor allem wird es sehr schwer, das als Designer richtig zu erkennen, da man selbst natürlich weiss, worum es sich handeln soll. Meiner Meinung nach machen Bilder nur da Sinn, wo für lange Texte wenig Platz bleibt. Und dann sollte den Bildern auch auf jedenfall sowohl das alt- als auch das title-Attribut gegeben werden.
Eine Navigation nur mit Bildern halte ich für eher schlecht, da man sich erst einmal klar werden muss, was die Symbole heissen sollen. Bei Text kann ich das sofort erkennen. Und das ist das Wesentliche bei einer Navigation, wie du auch in deinen weiteren Ausführungen selbst angibst.

Zu den anderen Bereichen wurde ja jetzt schon einiges geschrieben, das möchte ich auch nicht noch mal wiederholen.

Ansonsten aber ein gelungener Artikel. Wäre schön, wenn du auch noch mehr in die technische Umsetzung eingehen könntest.

RMC
2005-07-21, 14:46:30
Frage an RMC: Du schreibst, man soll auf jedenfall den Einsatz von (gekachelten) Hintergrundbildern vermeiden. Könntest du das begründen? Das Forum hier hat z.B. ein gekacheltes Hintergrundbild. Stört es? Beeinträchtigt es die Funktion, die Lesbarkeit, schlicht: die Usability?


So gut wie möglich vermeiden. Meistens beeinflussen Hintergrundbilder die Lesbarkeit enorm, es sei denn sie sind so transparent oder hell gestellt, dass sie fast nicht mehr erkennbar sind. Und dann stellt sich wieder die Frage, ob das sinnvoll ist im Fließtext. Aber ich könnte "im Fließtext" hinzufügen ;)



Arbeitsweise: Das klingt fast so, als ob du es den Lesern vorschreiben willst, dass sie ihre ersten Designentwürfe gefälligst auf Papier durchzuführen haben. Ich fände es begrüßenswert, wenn du den Absatz ein wenig umformulieren würdest. Ich arbeite meistens so, dass ich direkt das umsetze, was mir in den Sinn kommt. Das ist in den meisten Fällen kein komplettes Design/Layout, sondern oftmals nur eine Navigation, ein Absatz mit Überschrift etc. Auf diese kleinen Bausteinen greife ich sehr oft wieder zurück, wenn es heisst, eine Webseite im Ganzen zu erstellen.


Natürlich will ich niemanden etwas vorschreiben. Aber ich werds umformulieren bzw. einen Hinweis darauf geben.


Schrift: Es muss nicht immer eine serifenlose Schriftart für den Haupttext sein. Selbst der Spiegel verwendet in ihrem Magazin die Schriftart Georgia für die Artikel. Also warum nicht auch im Web? Entscheidend ist hier nur die Größe der Schrift. Wenn sie zu klein wird, kann man jede Schriftart sehr schlecht lesen. Deshalb ist es auch sicherlich gut, anstatt die Schriftgröße in festem px eher in em, Prozent oder dergleichen anzugeben.
Was bei der Schrift auch sehr angenehm ist, ist ein Zwischenraum zwischen den Zeilen (line-height). Das macht das Lesen langer Texte einfacher und entspannender.
Was die Länge der Zeilen angeht ("max. 10 Worte") ... naja, ich würde mich da nicht gerade auf einen Wert festlegen wollen. Ist wahrscheinlich auch nicht möglich.


Hm..bei Printmedien gibt es auch eine magische Grenze, was die Wörter pro Zeile angeht. Einige Webdesigner schlagen sogar nur 7 bis max. 8 Wörter pro Zeile vor, meistens ist es unabhängig von der Größe, es geht nur um die Aufnahmefähigkeit des Lesers. Es ist ja auch nur Pi x Daumen *g*

Zu Serifenschriften. Serifen sind meistens sehr klein. Sie erschweren die Lesbarkeit auf dem Bildschirm. Anders bei den Printmedien, dort sind Serifen erwünscht, weil sie das Lesen auf Papier "vereinfachen" und die Buchstaben dort eine Charakteristik bekommen.

Dass der Internetauftritt einer Zeitung zu einer Serifenschrift tendiert, ist wohl aus "Corporate Design" anzusehen ;)


Informationsträger: Das ist eine heikle Angelegenheit. Du kannst nicht so pauschal sagen, dass du den Text einfach durch ein Bild tauschen kannst. Nicht jeder verbindet die gleichen Eigenschaften/Informationen mit einem Bild. Vor allem wird es sehr schwer, das als Designer richtig zu erkennen, da man selbst natürlich weiss, worum es sich handeln soll. Meiner Meinung nach machen Bilder nur da Sinn, wo für lange Texte wenig Platz bleibt. Und dann sollte den Bildern auch auf jedenfall sowohl das alt- als auch das title-Attribut gegeben werden.
Eine Navigation nur mit Bildern halte ich für eher schlecht, da man sich erst einmal klar werden muss, was die Symbole heissen sollen. Bei Text kann ich das sofort erkennen. Und das ist das Wesentliche bei einer Navigation, wie du auch in deinen weiteren Ausführungen selbst angibst.


Ich hab ja auch geschrieben: mit dem richtigen Symbol an der richtigen Stelle. Klar, überall ist es nicht sinnvoll. Aber meistens macht es Sinn, bekannte Bereiche durch ein eindeutiges Symbol zu kennzeichnen.
Eine Kombination aus beiden ist meistens auch am Sinnvollsten...vielleicht schreib ich das dazu.



Ansonsten aber ein gelungener Artikel. Wäre schön, wenn du auch noch mehr in die technische Umsetzung eingehen könntest.


Könnte ich machen...aber ich glaub das würde den Rahmen sprengen :(