Webdesign, handcrafted

Heath Waller Webdesign AusschnittErneut möchte ich über Heath Waller Webdesign berich­ten, um wie versprochen den aktuellen Aufbau der Site zu zeigen. Die alte Site wirkte auch auch so, weil sie mit einem deutlichen Schuss Retro­design versehen war, die neue schlägt eine ganz andere Richtung ein. Nun überrascht extreme Farbgebung statt wohliger Brauntonalität, collage­artige Elemente und harte Kontraste werben mit kräftigen Auftritt — man glaubt es nicht, denselben Designer vor sich zu haben.

Kontraste

Ich sprach über harte Kontraste, die sich auf dieser Seite zeigen. Schon auf der Homesite wird man überfallen: große Typografien (»WICKED GOOD« in Versalien), starkfarbig abgesetzte Seitenelemente. Der klare Seitenaufbau lässt das Farbenchaos ertragen. Hier ein Blick:

Farben

Hier kämpfen alle möglichen Rottöne gegen Cyanflächen. Ja sogar rotfarbige Schrift auf cyanfarbigen Hintergrund wird gewagt, weiß doch jeder, dass das dadurch verursachte Flimmern extremen Augenstress verursacht. Ein heller Monitor wird diesen Effekt durch Hinterstrahlung noch verstärken, egal, es wird riskiert. Der Content muss natürlich hinterlegt werden, sonst ist bei dem Hintergrundbild nichts davon zu lesen. Hier ist ein transluzentes Weiss eingesetzt, das dämpft das Rot und geht in Ordnung.

Hintergründe

Beim Weiterklicken wird das Muster der Site schnell deutlich. Vor einem starkfarbig gesättigtem Hintergrundbild liegen die Elemente der Site, die durch Scrollen über es hinweggleiten. Mit anderen Worten ist das Hintergrundbild per CSS-Stylesheet und position:fixed festgesetzt; der Inhalt scrollt darüber hinweg. Hier folgt das entsprechende Stylesheet (ein Blick in den blitzsauberen Aufbau des gesamten Stylesheets ist lehrreich):

body#home {
  background: #fff url(../images/flowers.jpg) no-repeat top left fixed;
  margin: 0; padding: 0;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  }

Damit bei grossen Monitoren keine peinliche Bildbegrenzung sichtbar wird, sind diese Bilder recht groß und die CSS3-Eigenschaft background-size wird eingesetzt. Wir haben Dimensionen von 1900 x 1050 Pixeln. Diese Bilder könnten als Desktop-Hintergrund verwendet werden (habe ich auch schon gemacht), sind allerdings schwergewichtig — der Alptraum für User mit langsamer Bandbreite! Sie wiegen z.B. 450 KB und sind im PNG-Format gespeichert. An sich ein brauchbares Format für Grafiken. Ich habe ein Bild heruntergeladen und in Fireworks als JPEG optimiert. Das Bild wiegt danach »nur« noch 100 KB bei unmerklicher Veränderung der Qualität. Aber eventuell braucht es noch mehr Reserven bei megagroßen Monitoren, die es dann nicht mehr hat.

Unterseiten

Portfolio-Site

Kontaktseite

Typografie

Morris Fuller BentonIm Grunde werden nur zwei Schriftarten eingesetzt, wie es sich für gute Typo gehört: in der Beschränkung liegt die Kunst. Einfacher Aufbau verstärkt die Aussage immer, keine Verwässerung durch Irrung und Wirrung. Grundschriftart ist die Arial. Als Headline­schrift dient die League Gothic. Sie kommt von: »The League of Moveable Type«. Die League Gothic ist eine Erinnerung an einen klassischen Font, der Alternate Gothic No.1. Dieser wurde von Morris Fuller Benton für die American Type Founders Company (ATF) 1903 geschnitten. Die Firma ist 1993 eingegangen. Da das Original vor 1932 entwickelt wurde, ist es jetzt Public Domain. Die League macht sich prächtig im kräftigen Auftritt der Site und verstärkt als Versalfont die flächige Wirkung. Er wird über eine weitere CSS3-Technik, dem @fontface-Tag eingebunden.

Interessante Links

Hochwertige Open-Source Fonts (unter anderem die League Gothic).

Tags: ,

Comments are closed.


QR Code Business Card