Einführung in CSS
Designprinzipien
Design und Styling in CSS
Design und Styling sind nicht das Gleiche. Wollen wir uns zunächst einmal anschauen, wofür diese beiden Bezeichnungen stehen und was man darunter verstehen kann.
Design
Design lässt sich mit unterschiedlichen Ansätzen definieren. Hier eine kleine Auswahl von Bezeichnungserläuterungen, auf die ich mit Hilfe von Suchdiensten gestoßen bin:
- Design ist das Erfassen einer Problemstellung und die geistige Werkschöpfungsleistung eines Urhebers.
Sie manifestiert sich in Entwürfen und Plänen, zu denen auch Konzepte und Spezifikationen zählen. (Wortgetreue Rohübersetzung der englischen Originalfassung gemäß den Empfehlungen der 2. IIID-Konferenz, 20./21. Mai 1994. Quelle:
http://www.iiid.net/Definition-d.html) - »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, S.4.)
- Entwurfsskizze zur Gestaltung eines funktional richtigen und ästhetisch schönen Industrieproduktes. Mit »Design« ist die Gestaltung von Produkten, die gebrauchsgerecht menschlichen Bedürfnissen entsprechen, gemeint, die Grafik, Fotografie, Typografie und neuen Medientechnologien einbezogen. (Definition des Instituts für Neue Technische Form e.V.)
- Das Wort »Design« heißt in der lateinischen Sprache »designare« und bedeutet soviel wie »bezeichnen«, in der englischen Sprache »design« und soviel wie »Skizze oder Entwurf«, und in der deutschen Sprache heißt »Design« einfach »Design« und bedeutet soviel wie »gestalten«. Design ist eine Industrieform, der Zweckmäßigkeit und Schönheit vereinende Formentwurf bei serienmäßig hergestellten Industrieerzeugnissen. Seit der Mitte des 19. Jh. kam es zur Massenproduktion und daraus auch zum Design. (Gefunden auf Daniels Artpage.)
- [engl. = Zeichnung, Entwurf, Muster] Dem Design liegt ein Entwurfsprozeß zugrunde, der je nach Disziplin (Mode/Grafik/Industrial Design) unterschiedlichsten Methoden und Mitteln unterworfen ist. Im Textil-Design entsteht der Entwurf textiler Flächengebilde heute in der Regel mit elektronischen Hilfsmitteln, wie Musterrechner, Koloriergerät etc. Somit ist D. sehr eng mit der Bildschirmarbeit verbunden und viele Einzelprozesse der Entwurfstätigkeit werden heute mit CAD-Programmen ausgeführt. Die Rechner ermöglichen eine rationellere Planung und Umsetzung von Entwürfen. (Aus dem Lexikon der textilen Raumausstattung von Dieter C. Buurmann.)
- Formgebung, Formgestaltung. Im Rahmen emotionaler Kundenbindung spielt Design inzwischen eine große Rolle. Neben der gebrauchstechnischen muss die ästhetische Funktion beim D. beachtet werden. Hinzu tritt in jüngerer Zeit die semantische Funktion, der Besitzer möchte sich in seiner Welt durch Produkte ausdrücken. (Aus dem Gabler Wirtschaftlexikon.)
Styling
Hier ist es schwieriger, geeignete Definitionen zu finden:
- [engl. style = Entwurf, Gestaltung] Designbegriff, wonach die Formgebung und Gestaltung eines Industrieproduktes insbesondere im Hinblick auf das funktionsgerechte und den Käufer ansprechende Äußere erfolgt. (Aus dem Lexikon der textilen Raumausstattung von Dieter C. Buurmann.)
- 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. (Aus Was passiert, wenn wir Design und Styling verwechseln?)
Durchsucht man Suchdienste nach Stichwörtern wie »Definition von Styling« oder »Was ist Styling« erhält man erstaunlich viele Treffer auf Seiten, die sich mit »Bodystyling« oder Kosmetik- und Haarpflege-Produkten befassen. Dies macht den Zusammenhang zwischen Styling und äußerer Erscheinung sehr deutlich.
Styling im Webdesign
Das Design einer Website ist abhängig von konsequenter und logischer Textauszeichnung. Logisch ausgezeichnete Elemente lassen sich mit einfachen Mitteln gestalten. Dabei beinhaltet gutes Design
- 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 und nicht zuletzt natürlich
- optisch ansprechendes Layout bzw. Styling der Seite.
Der Bezeichnung »Styling« bezeichnet hierbei hauptsächlich Maßnahmen zur Verbesserung der subjektiven optischen Wirkung einer Seite, zum Beispiel durch Bestimmung von Farb- und Schriftformatierungen. Aber nicht ausschließlich! Das Styling einer Seite hat immer eine Verdeutlichung der einzelnen Elemente zum Ziel und dient somit auch der Gliederung der Seite. Gutes Styling verdeutlicht klare Strukturen und sorgt für starke Wiedererkennungseffekte und ermöglicht somit eine intuitive Bedienung der Website. Die Bezeichnungen »Design« und »Styling« kann man im Webdesign daher nicht voneinander trennen. Schlechte Styling bedingt schlechtes Design und umgekehrt.
In dieser Einführung werden Sie die Grundlagen lernen, also den Umgang mit Cascading Style Sheets. Die Verwendung von CSS ist das geeignetste Mittel zum Stylen einer Webseite. Sie haben auf der einen Seite das Markup der Seite und den Inhalt, auf der anderen Seite unabhängig davon die optische Gestaltung. Dabei ist CSS äußerst anwenderfreundlich. Das Stylen einer Seite ist wesentlich unkomplizierter geworden. Der größte Vorteil dabei ist, dass Sie alle Layoutvorgaben in eine externe Datei auslagern können, die Sie im Dokumentenkopf eines XHTML-Dokumentes einbinden. Ändern Sie nun dieses externe Stylesheet, ändern Sie das Layout aller Seiten, in die Sie diese eingebunden haben.
