Webdesign für Entwickler

Eine Einführung

Before we begin

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”

- Antoine de Saint-Exupéry

Warum das Ganze?

• Weil das Programm an den Mann muss
• Weil man dem Programm einen Wiedererkennungswert schenken will
• Weil schlichte GitHub- oder SourceForge-Seiten was für Langweiler sind
• Weil das Auge mitsurft

Layout

• Intuitiv!
• Klassisches Layout:
• Logo links oben, Navigation rechts davon oder darunter, links vom Inhalt
• Inhalt: Hauptinhalt links, Seiteninformation rechts.
• → Blick des Betrachters in Leserichtung führen

Fallbeispiel

simplebits.com

Implementierung

#inhalt {
    float: left;
    width: 65%;
}

#info { float: left; width: 30%; margin-left: 5%; }
#footer { clear: both; }

#nav { list-style: none; margin: 0; padding: 0; }
#nav li { float: left; }
#nav li a { display: block; padding: 5px; }

Wenn IE mal wieder streikt

• Normal: Gesamtbreite: width (=Innenbreite) + padding
• IE: Gesamtbreite: width; Innenbreite: width - padding

• #foobar {
      width: 530px !important;
      width: 540px;
      padding: 5px;
  }

• <!--[if IE 6]><link href="ie.css" /><![endif]-->

Mehr Layout

• Gefahr: Starres Kastenlayout
• Weniger ist mehr: "Boxen" offen lassen
• Dynamik reinbringen: Runde Ecken, schräge Ecken, zerfetzte Boxen
• Konventionen und Struktur brechen
• Platz zum Atmen!

Fallbeispiel

lamsonproject.org

Fallbeispiel

apple.com

Farbenwahl

• Assoziationen
• Dadurch: Stimmung
• → Vermittlung von Botschaften:
  • Blau: Banken, Firmen, sehr seriös
  • Rot: ambivalent. Wut, Macht
  • Grün: Öko, Fußball, Geld
  • Orange: Warm, sonnig, heimisch
  • Gelb: Sonne, Lebhaftigkeit
• Farbenharmonie!
• ColourLovers.com

Fallbeispiel

fedoraproject.org

Fallbeispiel

chyrp.net

Schriften: Webfonts

• Times New Roman
• Arial/Helvetica
• Lucida Grande/Lucida Sans
• Georgia
• Trebuchet MS
• Verdana
• Die Unaussprechlichen

Damit ist nicht zu spaßen!

(original by XKCD)

Schriften: Linux fonts

• DejaVu Serif
• DejaVu Sans
• Bitstream Charter
• Liberation Serif
• Liberation Sans
• Linux Libertine

Grafiken!

• Unterstützende Funktion
• Setzt auch Stimmung + Stil
• Fotos als focal point
• Beispiele:
  • Apple
  • Shoooes
  • Marius Roosendaal
  • Contrast
  • ... usw.

Ressourcen dazu

• Smashing Magazine
• PSDTuts
• Gimp Tutorials

Fazit

• Raum lassen, interessantes Layout, Farben, focal point, Funktionalität
• → Gefühl dafür entwickeln
• Aber vor allem: Kreativ sein.

Fragen? Anregungen? Eigene Seiten?

Dankeschön.

Happy designing!