Coding

Eine HTML5-Seite erstellen

Der Aufbau einer HTML5 konformen Site beginnt mit dem Eintrag eines passenden Doctypes. Das ist so wunderbar einfach (noch besser, selbst der Internet Explorer kann damit etwas anfangen — denn der Doctype ist »gültig«. Beim IE besteht immer die Gefahr, dass er sonst in den »Quirks Mode« schaltet und Unsinn darstellt):

<!DOCTYPE html>

Was gefällt—es muss nicht mehr kompliziert auf eine DTD verlinkt werden. Damit haben wir einen Verzicht auf überflüssige XML-Funktionalitäten! Noch was nettes: das DOCTYPE-Tag ist nicht case-sensitiv. Semantik und Syntax →

Webdesign

Styling einer Site mit dem Unsichtbaren

Der Unterschied zwischen einem Webdesign-Profi und einem User liegt nicht in deren Erfahrung mit Websites. Der Profi macht die Erfahrung, indem er Websites baut, der User, indem er diese anschaut. Beide sehen demnach dasselbe mit divergentem Blick. Wie verschieden die Auf­fassung ist, wird deutlich, wenn User zu Kunden eines Web­de­signers werden und Ihre Vor­stel­lungen äussern. Der bekannteste Wunsch klingt etwa so: »Kann mein Firmenlogo nicht größer gemacht werden?«, oder: »Beim Banner oben passen doch noch ein Facebook-Likebutton, ein Twitter-Follower-Link und ein Kundenlogin hinein?«. Ich will hier kein Kundenbashing betreiben, sondern aufzeigen, wie unähnlich die Blickweise ist und sein muss, wenn man wirklich gute professionelle Sites designen will. Es kommt nicht nur darauf an, was auf eine Site rauf soll. Es braucht einen Blick für das Unsichtbare der Gestaltung. Das Unsichtbare hilft →

Typografie Webdesign

Gut Lesen mit richtiger Größe

Würde man eine Website programmieren, sich selbst über­lassen und keine weiteren CSS-Angaben zum Text bringen, dann hätte man folgende Standardwerte: 16 Pixel Schrift­grad, Times als Schrift­art, Schrift­farbe schwarz und der Zeilenabstand liegt bei mageren 120 %. Das geht natürlich gar nicht. Die Times hat echte Probleme mit der Lesbarkeit (ok, eines Tages, wenn überall Retina-Displays genutzt werden, dann vielleicht nicht), kommt also nicht in Be­tracht. Schwarz auf dem hellem Hintergrund des Bild­schirms hat allgemein zu hohen Kontrast, der Zeilenabstand ist für das Web zu gering. Nur eines kann im Grunde bleiben: der Schriftgrad. Typografie mit richtiger Größe →

Webdesign

Grid und Raster in Photoshop

Raster helfen, beliebige Elemente einer zu gestaltenden Fläche auf/an Linie auszurichten. Damit entsteht ein optischer Zusammenhang, der eine Ein­heit des Gestalteten erreicht. Raster sind im Printbereich Pflicht, im Web­design nur beschränkt umzusetzen. Möchte man die Typografie und weitere Seitenelemente einheitlich am Raster bin­den, dann wird die Erstellung des CSS schwierig. Es gibt ein paar Helferlein, die korrekte Raster­aus­­richtung wenigstens beim Design einer Site in Photoshop erleichtern. Davon möchte ich zwei Freeware-Produkte vorstellen: Modular Grid Pattern und GuideGuide. gut gerastert in PS →

Coding

Webserver zum Testen auf Mac OSX

Erste Gehversuche mit PHP, später mit komplexen Anwen­dun­gen wie z.B. Content Management Systemen müssen auf einem Webserver laufen. Kommt man auf den Geschmack, dann ist eine lokale Testumgebung auf dem eigenen Rechner besser, als auf einem Server im WWW. Sie haben auch ohne Internetzugang eine Möglichkeit, in Ruhe zu arbeiten. Sie können abgeschirmt Betaversionen (fast) ohne Sicher­heits­probleme probieren oder eigene PHP-Entwicklungen testen. Hier möchte ich die Installation und Einrichtung einer MAMP-Umgebung beschreiben. lokaler Testserver einfacher →

Webdesign

Von PSD zum HTML: Webdesign mit Photoshop

Um eine brauchbare Website professionell her­zu­stellen, sollten sie einigen grundlegenden Schritten folgen. Natürlich kann man unter Mengen an (freien) Templates und Vorlagen auswählen. Über­troffen wird die Einheitsware immer durch individuell angepassten Entwurf. Eine wichtige Station ist der Entwurf mit­hilfe von Photoshop (wird am häufigs­ten ver­wen­det—es geht natürlich auch mit Illu­stra­tor, Fire­works, Pixelmator, Gimp oder anderen Pro­gram­men, dazu später). Ich möchte auf die wesent­lichen und üblichen Stationen des Work­flows ein­ge­hen. Dazu benutze ich eine Site aus dem Tutorial von Visual Swirl (sehr lesenswert!). mit Photoshop designen →

Color Webdesign

Schwarzweiss im Webdesign

Nun wirkt schwarzweiss nicht sonderlich originell als Grundlage von Farbgebung. Und dennoch gibt es viele Designer, die diese Farbkombination für ausreichend halten, um eine interessante Site zu gestalten. Erinnerung: Farbe ist Emotion. Kann eine »farblose« Site emotionslos sein? Nur, wenn man z.B. Schwarz als emotionslos bezeichnet. Schwarz­weiss kann so verwendet werden, dass Emotionen allein durch den harten Helligkeits-Kontrast ent­stehen. Die Substraction Site (Abb. rechts) erzeugt allein durch das Motiv des großen schwarzen Hundes, dem Kreuz und den fetten schwarzen Navibalken eine starke Spannung. Schwarz als Farbe →

Marketing Webdesign

Designer Portfolio als Plakat

Gibt es eine originellere Methode, als seinen Lebens­lauf (neudeutsch: Curriculum Vitae) anders als die übliche, bürokratische Weise darzustellen? Ja, auf jeden Fall—und für Designer gilt das erst recht! Hier folgt eine Serie von »Designer Resumes« in Plakatform. In dieser Darstellungs­art wird auf einem Blick erkennbar, mit welchen Skills, Farb- und Grafikgefühl ein Designer punkten kann. Man findet in der Darstellung das gesamte Spektrum von typografisch, grafisch-technisch, handwerklich orientierten Lösungen versammelt. Nur über sorgfältig gestaffelter Darstellung kann gepunktet werden—ein Blick—ein Urteil. Hier im Vergleich werden selbst kleine Schwächen sofort auffällig. Sauber durch­strukturierte, plakative Werke mit klarer kreativer Aussage fallen umso positiver ins Gewicht. Urteilen Sie selbst! Lebenslauf anders →

Typografie Webdesign

Kerning ausprobieren

Die Schrift wird von uns fast sorglos verwendet. Man benutzt sie und kümmert sich nicht groß um Details, da das Schriftaussehen festgelegt ist. Schrift in großen Graden offenbart allerdings eine Problem­stelle: den Buchstabenabstand. Dieser wird in der Regel durch die nummerische Fest­legung (über Kerningpaare) des Schriften­her­stellers geregelt. Das reicht nicht immer, um einen harmonischen Aus­gleich zu schaffen. Besonders deutlich wird es bei Zier­schriften, die nicht immer mit voller Sorgfalt produziert werden. So ist man häufig gezwun­gen, die Buchstabenabstände manuell auszu­gleichen (=Kerning). Mit Anspruch an Quali­täts­typografie wird man auch die kleineren Schrift­grade ausgleichen. Im Webdesign sollte man die durch automatisierte Erzeugung von Übergangspixeln verschobenen Buchstaben richten. Kern me→

Webdesign

Kreisrund

Die erste Generation Websites kam hardgecodet in das Internet. Bald entwickelten sich die Content Management Systeme und verbreiteten sich zu­neh­mend. Firmen namen für ihr Web­schicksal den Kommunikationsprofis die Site­kontrolle aus der Hand und nutzen begeistert die neue Software. Nun entstehen Tausende von Websites mit dem­selben sche­ma­ti­schem Muster: rechteckige Strukturen, Content schachtelweise angeordnet. Die Krönung aller Neuerung ist der all­gegen­wärtige Topslider. CMS werden bleiben, aber muss deren Verwendung gleich zu erkennen sein? Der Bruch der Formgebung kann über dekorative Elemente erfolgen. Hier geht’s um den Kreis, den man immer häufiger sieht. Er ist der neutrale Nachfolger des Badges mit zackigem Rand. runde Sachen drehen →

QR Code Business Card