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, entweder als Person oder als Gruppe zu einem einheitlichen Design für Web

 
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

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.

 

Dokumente

Webseiten sind Dokumente, meist mit viel Text, wenn sinnvoll auch mit anderem, aber erst mal ist ein Website ein Dokument. Auch sogenannte Anwendungen wie z.B. Soziale Netze sind eine Ansammlung von Dokumenten. Eine Profilseite, Fotoalben, Kontaktlisten alles Dokumente. Auch das Feeds, also eine Listung der aktuellen Veränderungen, sowas wie 'Neeus aus dem netzwerk' bei xing oder dem 'News Feed' bei facbook, Recentchanges bei wikis, Dashboards, RSS-reader oder wie auch immer das heißen mag sind ein Dokumente; wenn auch dynamische.

Alles neuartigen Ansätze mit irgendwelchen zusammengewürfelten Informationsbroken sind letztlich schicke Farbspielereien

Diese Dokumente sind ja nicht einzelne und un-assoziativ, sondern haben eine gemeinsamen Zusammenhang. Zwar ist eine freie Struktur in der erste das Dokument und dann Struktur, durch Tags oder Kategorien, folgt, flexibler und sinnvoller; aber dennoch die Frage wie fängt man denn ganz oben an?

Struktur

Um die den Gesamtinhalt zu strukturieren empfiehlt sich ein Vorgehen nach den W-Fragen (Was, Wer, Wo, Wann, Wie, Warum)

Wo

Genau hier!. Die 'Position' eines Dokuments wird durch seinen Identifikator und sein Titel bestimmt. Diese sind logischerweise innerhalb einer Dokumentensammlung (Buch, Webseite) gegeneinadner abgegrenzt. Hat eine Firma nur eine Standort, genügt das Wort 'Standort' als beschreibung, hat man mehrere werden diese abgegrenzt ('Standort Oberbach' und 'Standort Unterbach')
Bei lexikas Lemma genannt.
Diese Position sollten muss, menschlich lesbar, in der url stehen. Alle index.php?id=123 Varianten sind schlechter Stil. CleanURL. Diese URL sieht man auch auch im oben im Browser.
Dieses Lemma muss zusätzlich prominent auf der Seit erscheine .Zwar könnte es genügen die Erwähnung im html title Tag und eh schon in der BrowserURL Leiste genügen, aber die meisten Nutzer nehemn diese hier nicht oder nicht so gut wahr. Das Lemma an einer prominenten Stelle hilft den Leser schenll zu erfassen wo er sich befindet. es empfiehlt sich der h1-Tag
Hierzu zählen auch metalinks auf andere Versionen wie Spracheversioen oder andere Darstellung (Druck etc)

Was

Sehr wichtig, was bitet man entweder direkt oder indirekt. Die Wikipedia bietet einzlene verknüfte beiträge zu allem, eine Firma bietet Produkte oder Dienstelistungen an.

Wer

das klassische über uns, vieleicht erzählen was die community da amch oder so und wo weiter
Wann

eigentlich komische Frage, denn planmäßig immer 8ausser man hat so eine dämliche 24 domein, dann kann man gern sagen das sein internete immer offen ist, aber natürlich auch das sich alles ädnert, das sich aber internez ändetr ist auch klar.

Wie

howto, also bei einem Hersteller wie komm ich an das Produkt, (händlerverzeichnid) oder wie 'arbeite ich bei Wikipedia mit' , oder wie werde ich mal Testkunde für eine Onlinedienstleitung
Auch Werkzeuge für die Website, sofern es sie gibt:

  • recentchanges
  • suche
  • Kommentare

Aber auch die Erklärung ob man ein fertiges Produkt verkauft und ob man es liefern kann oder bei einem daheim das Ding aus alten Möben fräst, oder einem daheim vorbeikommt und eine berät wie man ein Ding aus alten Möbeln frässt

Warum

sollte eigentlich selbst erklärend sein, die unsägliche Seitenkategorie Philosophie gehört da evtl hin, aerb eigentlich nicht wirklich. Bei einer Firma isses doch klar: die Kohle!, bei einem Sportverein ist es auch klar, der Spoocht. Allerdings wenn man einen wirklich besonderen Grund hat warum man das macht was man macht, dann gern prominent platzieren.

 
Also bleiben übrig:

  • Was
  • Wer
  • Wie

 

  • Irgendwo ein root link
  • Kontakt
  • Suche
  • Login

 
Als einzige nicht W-Frage gehört für mich Kontakt dazu. dann da aber bitte alles von Impressum, Anfahrt, und Kontaktforular oder Kundenbenutzeroberflcähe etc.

http://www.bright-it.com/blog/

Menü

Menüs sollen den Weg zu den Hauptinhalten der Webseite zeigen. Jede Seite auch in einem klappenden, oder fliegenden Menü darzustellen ist eine alte Untugend. Was bei großen Websiten (z.B. shops mit 10000 Produkten oder blogs mit täglichen Einträgen) gar nicht mehr möglich ist, ist bei mittleren Webseiten (kleinen Firmenwebseiten) auch nicht sinnvoll.

Größere sowie auch kleine Inhlate kann man viel besser mit Kategorien oder Tags strukturien. Dafür kann man mit einem sauberen Menü klare bereich abgeliedern.

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 (z.B. 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 ).

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

 

--

umija quick

Google Search