http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Einführung in CSS

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Design und Styling

Die beiden Bezeichnungen »Design« und »Styling« kennen wir sicherlich alle aus dem täglichen Gebrauch. Intuitiv verwenden wir das richtige Vokabular: Wir kaufen Möbel oder Geräte aus dem Bereich der Unterhaltungselektronik nicht nur deshalb, weil sie hochwertig verarbeitet und funktional sind, sondern auch, weil uns ihr Design gefällt. Jugendliche Discogänger müssen sich erst »aufstylen«, bevor sie auch nur einen Fuß vor die Tür setzen. Stars und Sternchen besorgen sich ihre Abendgarderobe beim Modedesigner, gehen aber zum Stylisten, der Frisur, Make-up und Fingernägel für ihren großen Auftritt auf dem roten Teppich richtig in Szene setzen soll.

Schwerer als ihr intuitiver Gebrauch fällt die exakte Definition der Bezeichnungen Design und Styling. Im Folgenden versuche ich, der genauen Bedeutung beider Bezeichnungen auf den Grund zu gehen.

Zum Seitenanfang

Design

Die etymologischen Wurzeln des Worts Design liegen in mehreren Begriffen. Das Substantiv »Design« entstammt sowohl dem französischen Wort »dessein« als auch dem italienischen Wort »disegno«, deren Wurzeln in dem lateinischen Verb »designare« (beabsichtigen, bezeichnen) sowie in dem lateinischen Nomen »signum« (Zeichen, Abzeichen, Kennzeichen, Signal, Bild, Siegel) liegen. Ins Deutsche ging der Begriff Anfang des 19. Jahrhunderts über, jedoch in der älteren Form »Dessein«. Seit den 1960ern verwenden wir die englische Form »Design«.

Es gibt eine Vielzahl unterschiedlicher Definitionen des Designbegriffs. Hier eine kleine Auswahl:

»Der Begriff Design bezeichnet die Gestaltung von Gegenständen aller Art nach den Kriterien von Funktionalität (zum Beispiel Ergonomie) und Ästhetik. Nicht zuletzt in Hinblick auf die Marktchancen eines Produkts zielt der Designer auf eine möglichst optimale Verschmelzung beider Kategorien. Je nach inhaltlicher Ausrichtung unterscheidet man in Display-(Verpackung), Foto-, Grafik-, Industrie-, Kraftfahrzeug-, Mode-, Produkt-, Textil-, Schmuckdesign etc.« (Designlexikon International)

»›Design‹ kann ›Entwicklung‹, ›Berechnung‹, ›Konstruktion‹ bzw. deren Ergebnis, ›Entwurf‹, ›Gestaltung‹ oder ›Konzept‹ usw. einschließen und entsprechend benannt werden.« (DIN EN ISO 9001 Qualitätsmanagementsysteme. Modell zur Qualitätssicherung/QM-Darlegung in Design, Entwicklung, Produktion, Montage und Wartung. Ausgabe 1994–08, Seite 4.)

Die Bezeichnung »Design« verweist also auf einen Vorgang wie auch auf das Ergebnis dieses Vorgangs.

»Design bedeutet meist Entwurf oder Formgebung. (...) Im Deutschen ist die Bezeichnung ›Design‹ als Bezeichnung für den Prozess des bewussten Gestaltens vor allem einer Fachszene geläufig. Im Verlauf der jüngeren Designgeschichte wurde [der Begriff] Bestandteil des allgemeinen Sprachgebrauchs. Hier dient er häufig als Sammelbegriff für alle bewusst gestalteten Aspekte eines realen oder virtuellen Objektes, einer Dienstleistung oder Marke. (...) Seine Ergebnisse sind stets vorläufig: andere Designprozesse können verbessern, überholen oder in Frage stellen.« (Wikipedia)

Besonders interessant ist die Definition des Oxford English Dictionary:

»(Design umfasst) zunächst nicht viel mehr als die einer Arbeit zugrunde liegende Konzeption. Sobald also eine planerische Absicht oder ein Entwurf einem Produkt zugrunde liegt, das arbeitsteilig hergestellt wird, handelt es sich um Design. Somit kann es im industriellen Kontext kein Nicht-Design geben, was bedeutet, dass auch das noch so schlecht gestaltete, wenig funktionsfähige Produkt Design ist. Design ist daher keineswegs eine Eigenschaft, die einem Produkt als ästhetisches Extra hinzugefügt werden kann. Design ist auch kein Attribut, das ein Produkt hat und ein anderes nicht. Design ist vielmehr ein geplanter und umfassender Gestaltungsprozess, der durch mehrere Personen und in mehreren Arbeitsschritten realisiert wird.«

Design bedeutet folglich nicht einfach nur visuelle, Form- und Materialgestaltung mit dem Ziel, ein ästhetisches Produkt zu entwerfen, sondern hat ein ergonomisches Produkt zum Ziel unter Beachtung der Funktionalität, Gebrauchstauglichkeit und (handwerklichen) Qualität. Jedes (gegenständliche) Objekt hat ein Design beziehungsweise ist Design; diskutieren könnte man lediglich darüber, ob es ein gutes oder ein schlechtes Design ist.

Zum Seitenanfang

Styling

Die Bezeichnung »Styling« entwickelte sich in den späten 1920er- und frühen 1930er-Jahren in den USA, als durch die Wirtschaftskrise der Automobilabsatz stockte. Geringfügiger äußerlicher Feinschliff sollte den Absatz wieder ankurbeln. Diese Maßnahmen hatten Erfolg, und seitdem breitete sich das Styling auf alle Produktgruppen aus.

Da die Bezeichnung »Styling« verhältnismäßig jung ist, gehen alle Definition in folgende Richtung:

»Styling bedeutet die formalästhetische Überarbeitung eines Produkts im Sinne einer Verschönerung mit dem Ziel besserer Verkäuflichkeit. Funktionale Verbesserungen werden dabei nicht angestrebt.« (Designlexikon International)

Am besten gefällt mir folgende Definition:

»Styling ist, wenn meine Teenie-Tochter sich vor dem Spiegel anmalt, bevor sie in den Club geht. Zusammenhänge zwischen Verpackung und Inhalt werden sorgfältig verwischt. Ähnlich ist es bei dem Prospekt, der kurz vor der Drucklegung einem Grafiker geschickt wird; der soll ihn noch was aufmotzen. Da ist es zum Design zu spät, das wird nur noch Styling.« (Oliver Baer in Was passiert, wenn wir Design und Styling verwechseln?)

Styling hat folglich nicht zum Ziel, schöne und gebrauchstaugliche Dinge zu erschaffen, sondern beschränkt sich lediglich darauf, schöne Ergebnisse zu erzielen. Durchsucht man Suchdienste nach der Definition von Styling, erhält man viele Treffer auf Webseiten, die sich mit Bodystyling oder Kosmetik- und Haarpflegeprodukten befassen. Der Zusammenhang zwischen Styling und äußerer Erscheinung wird dadurch sehr deutlich.

Zum Seitenanfang

Design und Styling in der Webentwicklung

Legt man die oben aufgeführten Definitionen der Bezeichnung Design zugrunde, lässt sich die Bezeichnung »Webdesign« wie folgt definieren:

Webdesign ist die Gestaltung von Webseiten nach den Kriterien von Funktionalität und Ästhetik, mit anderen Worten: die Gestaltung einer Website derart, dass sie Benutzern in so hohem Maße wie möglich zu Verfügung steht und darüber hinaus auch noch gut aussieht.

Web-Ergonomie, Zugänglichkeit und Gebrauchstauglichkeit sind wichtige Bestandteile guten Webdesigns. Dazu gehören unter anderem

  • sinnvolle Gruppierung, also eine Einteilung der Seitenelemente auf dem Bildschirm als visuell eigenständige Einheiten,
  • der Erwartungshaltung der Nutzer entsprechende Platzierung der Gruppen,
  • ansprechende Dichte der Information,
  • intuitive und konsequente Nutzerführung und nicht zuletzt natürlich
  • optisch ansprechende Gestaltung.

Das Mittel der Wahl, um Elemente zu gruppieren, zu positionieren und visuell zu gestalten, sind Cascading Style Sheets (CSS). Während eine durchdachte Informationsarchitektur den Nutzer durch die Website und logische, strukturierte Textauszeichnung per (X)HTML durch die einzelnen Webseiten führt, sorgen entsprechende CSS-Regeln für ein angenehmes Erscheinungsbild und unterstützen die Informationsaufnahme nicht zuletzt dadurch, dass sie diese visuell in Form bringen und aufwerten. Nicht zu unterschätzen ist in diesem Zusammenhang, dass Nutzer sich eher mit den Inhalten einer Website befassen, wenn sie sich wohlfühlen, also von ihr auch optisch angesprochen werden. Sorgfältiges Styling mittels CSS ist Teil des Designprozesses einer Website.