Ein
Design, so wichtig wie ein kleines Steak. Wichtig für die organisatorische Notwendigkeit des
Corporate_Design. Wie kommt man nun, entweder als Person oder als Gruppe zu einem einheitlichen Design für
Web, Print, Öltanker und von mir aus Klamotten.
Vor aller Umsetzung steht der
Entwurf. Eine Person die ein Auge dafür hat und Design auch gelernt hat sollte einen Entwurf machen, egal ob universitär oder Autodidakt, wichtig ist nur das Ergebnis.
Webseiten, natürliche auch Buchseiten oder Zeitungen sind durch einfache wenige Bereiche gekennzeichnet. Ein Überladen mit 100 Sternen und Buttons verstört jeden Konsumenten.
Entwurf
Ein Entwurf soll frei von jeder technischer Assoziation sein, aber immer für den Anwender, und dessen Auge, dessen Einfachheit.
Um dann aber mit dem künstlerischen Konzept oder Entwurf auf griffige Ergebnisse zu kommen muss man diese (manchmal leider) definieren und festzurren. Ein Scribbel ist in der
Druckersprache ein eine skizzenhafte Zeichnung, auch erstes Layout.
Das beste in diesem Fall ist immer noch das klassische Stück Papier. Dieser sollte enthalten:
- Elemente wie content, headers, menus etc
- Proportion der Elemente untereinander
- Farbe
- Schrift
- evtl. Dokumentenstruktur (z.B wo steht die Überschrift, und was macht ein Zitat)
Neben der Skizze sind aber auch Formate, vor allem im typographischen Bereich nicht trivial, denn auch hier muss die Umsetzung aus einem definierten Baukasten schöpfen können.
Eine
Musterseite aller verwendeten Schrift und Gestaltungsarten hilft auf jeden Fall das Design zu beschreiben.
Allgemeines Layout
zum Thema
Webtypografie
- zentriert oder nicht, beeinflusst .css immens
- Hauptschrift Art, Farbe, Größe,
- wie soll Fettschrift und kursiv aussehen
- Für (hyper)Links Art, Farbe, Größe, TextDecoration (Unterstrichen etc) und das Verhalten bei Hover und Active (auf klick und evtl. visited, active)
- mindestens 4 Überschriften (in html h1 - h6) auch wenn nicht alle gebraucht werden (Farbe, Größe %,)
- Aufählings- und nummerierte Listen (mit/one bullets)
- Bilder mit oder ohne Rahmen, Standardgröße
- besondere Bereiche
- Zitate
- Programmiercode
- Gedichte
Dann können sich die EntwFrickler an die Umsetzung z.B.einer
Webseite begeben, das am besten mit
css.
Elemente und Proportion
Proportion an sich ist schon eine Wissenschaft. Angefangen von Grundreglen wie dem
Goldener_Schnitt kann man sich darüber trefflichst streiten, nur sollte man es auch tun.
Jede dieser Elemente können sich im (kommunikations)designkonzept wiederfinden.
Selbst Spezialseiten wie das tabellarische
doodle.com Kalender oder Soziale Netzwerke, Videoplattformen haben Inhalt und menu
Inhalt
Klassische Inhaltswebseiten sind meistens aufgetrennt in Menü und Inhalt.
- Der Hauptinhalt gliedert sich klassische in Überschriften und Text (mehr siehe Allgemeines Layout)
- Zusatzinhalt wie Aktuelles oder eine Shoutbox sind zwar geekig, verwirren den Leser aber leicht.
Menü
Menüs zeigen den Weg zu den tiefen Inhalten der Webseite. Die Inhalte und auch Funktionen können dabei auf verschiedneen Ebenene durch verschiedene Menüs dargestellt werden. Denn neben dem klassischen
Hauptmenü das meist den Inhalt strukturiert gibt es noch
- persönliches wie eigene Nutzerseite, Einstellungen etc
- Werkzeuge zum Inhalt, Bearbeiten bei Wikis, Bookmarkbutton,
- Suche
- unterschiedliche Sprachversionen
Der Form, Anordnung und das Design des Menüs sind eigentlich keine grenzen gesetzt, dennoch sollte ein Menü nicht verwirren sondern dem Nutzer helfen intuitiv seine Ziel zu finden. Es gibt sehr viele kreative Ansätze, aber meiste haben sich 2 Formen herauskristallisiert
- das klassische Sidebar-Menü links oder auch rechts neben dem Inhalt, wie hier auf umija.org, Wikipedia etc. Meist werde die einzelnen Oberpunkte zur tieferen Strukturierung nach unten aufgeklappt. Diese Form hat den Nachteil das sie den Inhalt verdrängt und dann aber weiter unten oft Platz verschwendet
- das Balkenmenü das über oder auch unter dem Inhalt die Navigation in einer waagerechten Zeile darstellt und eine tiefere Struktur in einer neuen Balkenzeile oder auch in einer ausgeklappten Liste. Eingesetzt bei vielen Zeitungen (zB spon), corporate sites w3design.de aber auch Funktionsseiten wie Facebook
Man kann auch beide gut kombinieren (
premium-cola.de) oder viel Inhalt im Menü aufnehmen (
otto.de ).
Header
auch
lustig
Farbentwurf
Wenn man nicht schon in historischen Zwängen liegt, dann kann man ja versuchen
augenfreundliche Farben zu verwenden.
Weiter sind zu ein paar
Regeln zu beachten.
Bei der Farbbearbeitung helfen
Schrift
Noch schwieriger als Proportion erscheint mir Schrift. Typographie.
Mit
flippinsticky.com kann man Schrift umdrehen ....
Bilder
Zweck
Neben hübsch aussehen sollen Bilder
- zusätzliche Information vermiittlen
- Emotion
- idenifizieren
- Aufmerksamkeit lenken das lernt jeder
Webdesigner bildenden Künstler in der 1 Stunde, die Blickrichtung einer Person auf einem Bild hilft die Blickrichtung des Betrachters und damit dessen Aufmerksamkeit auf etwas Bestimmtes zu richten. Allerdings find ich manchmal krass übertrieben.
Quellen
Bilder kann man selber machen oder frei Bilderdatenbanken verwenden:
man beachte immer die Lizenz
Bewerten
Der
Designbewerter sagt "Designqualität ist messbar!" und überprüft eine Wenbsite nicht nur auf ein valides CSS sonder auch ob es zuviele Schrift gibt und wie die Farben harmonieren.
Gefällt!
Projekte