Design oder Nichtsign

Ein web), so wichtig wie ein kleines Steak. Wichtig fĂŒr die organisatorische Notwendigkeit des Corporate_Design. Wie kommt man nun zu einem einheitlichen Design fĂŒr seinen ((howto:web)-content

Gut dazu Butterick’s Practical Typography

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.

''Der Anbieter will den User emotional beeindrucken. Der User aber scheißt auf emotionale Beeindruckung – er will schnell und einfach informiert werden.''via

Um dann aber mit dem kĂŒnstlerischen Konzept oder Entwurf auf griffige Ergebnisse zu kommen muss man diese (manchmal leider) definieren und fest zurren. 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 %,) * AufzĂ€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 Grundregeln 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

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 * der RGB Color Mixer * eine einfache farb-tabelle.de * das I Like Your Colors tool das alle verwendeten Farben einer Seite anzeigt.

Schrift

Noch schwieriger als Proportion erscheint mir Schrift. Typographie. Webtypografie

Mit fliptext.org kann man Schrift umdrehen ....

Medium

Print hat so seine Besonderheiten. Web halt auch. Ein gutes design muss auf recht vielen GerÀten laufen, vom TV-artigen Monsterscreen bis zum telefon. Beide extreme muss man beim design bedenken. Hinterher noch eine mobile version oder gar eine app dran zu flanschen ist aufwÀndig, unusable, teuer und falsch. Mit Responsive_Webdesign kann man sich technisch auf sehr viel einstellen, aber nur wenn das design mitdenkt:

  • Columns und flĂ€chige Elemente mĂŒssen immer auch auf eine schmale Variante gedacht werden
  • kein klickerkram wie fancybox etc
  • kein flash ;)

GefÀllt!

Projekte

*umija:design *20040019:design


howto