Loading...
 

Design oder Nichtsign

howto:web:design

Ein Design, 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 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

 

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

 


howto


Google Search