Greve - Medien

Web 2.0 – Webdesign

Thomas — Tue, 28 Sep 2010 11:50:47 +0000

Im letzten Beitrag hatte ich anhand einiger Beispiele versucht, zu erklären, was organisches Webdesign ausmacht.

“Web 2.0″-Webdesign ist eine ganz andere Stilrichtung, die sich vor ein paar Jahren entwickelt hatte und sicher zu einem guten Teil mit der Website von Apple begründet wurde. Dabei hat das Design selbst wenig mit dem Attribut “Web 2.0″ zu tun, welches als Schlagwort für eine Reihe interaktiver und kollaborativer Elemente des Internets verwendet wird und inzwischen schon fast vom Begriff “Social Media” abgelöst wurde. Da dieser Designstil aber in etwas zeitgleich entstanden ist, wurde er mit den neuen Funktionalitäten und deren Synonym gleich gesetzt.

Web 2.0 Webdesign beinhaltet meist:

Reflektionen von Bilder, Logos und Elementen der Seite
Lichtreflektionen um Glasflächen zu simulieren
Farbverläufe
diagonale Linien in Hintergrundflächen, teilweise auch verlaufend
“Soft-Fokus-Effekte”, meist als subtiler äußerer Schein bei den Kanten von Flächen
starke Farbkontraste
knallbunte Angebotsbuttons
abgerundete Ecken

Hier zwei typische Beispiele dieser Stilform:

Farbverlauf im Hintergrund, “Glasflächen”-Effekt im Kopfbereich, kräftige (laute) Farben und stark gerundete Ecken.

Typischer Button im Kopfbereich, “Glasflächen”-Effekt im Menü incl. Schraffur, gerundete Ecken, Verläufe, Schraffur in den Blocküberschriften, Schein nach außen bei den Blocküberschriften.

All diese Effekte hatten durchaus einen bleibenden Eindruck hinterlassen, weshalb sie auf vielen Seiten gerne und umfangreich eingesetzt wurden. Genau darin besteht inzwischen aber auch das Problem mit diesem typischen Look. Es wurde einfach übertrieben und genießt speziell bei den Webdesignern, die sich täglich damit auseinander setzen müssen, keinen besonders guten Ruf mehr.

Trotzdem können diese Effekte, sofern sie nicht übertrieben werden, zu einem ansprechenden Erscheinungsbild der Website beitragen. Auch ich konnte mich bei meiner Website nicht zurück halten und habe einige dieser Effekte verwendet, gleichzeitig aber versucht, durch Verwendung anderer Effekte (siehe organisches Webdesign) einen eigenen Stil zu erzeugen.

Organisches Webdesign

Thomas — Sun, 26 Sep 2010 09:28:18 +0000

Jede Seite einer Website besteht aus einem oder mehreren Rechtecken, die die dargestellte Fläche des Webbrowsers ausfüllen. Innerhalb dieser Rechtecke wird dann der sichtbare Inhalt dargestellt. Meist gibt es eine horizontale Kopfleiste, mehrere vertikale Spalten und abschließend eine horizontale Fußleiste.
Diese grobe Grundstruktur hat sich inzwischen bewährt und kommt wohl bei den meisten Websites zum Einsatz. Damit nun aber nicht alle Websites gleich aussehen und damit sehr langweilig wirken würden, bemüht man sich um eine individuelle Note innerhalb dieser Aufteilung. Dies wird zum Teil durch eine unkonventionelle Aufteilung innerhalb der Grundstruktur erreicht, häufiger aber durch geschickten Einsatz von Hintergrund-Mustern und -Farben. Hierbei haben sich bestimmte Stile entwickelt, die teilweise schon einen eigenen Namen erhalten haben. Eine Stilrichtung ist das “Organische Webdesign” für das ich hier ein paar Beispiele aufführen möchte.

Creativepayne

Hier wird mittels Zeichnungen, Hintergrundmustern und Schreibschriften eine optische Anmutung wie bei Prospekten aus den 60er Jahren des vorigen Jahrhunderts erzeugt.

Spring

Auch hier werden Zeichnungen in einem typischen Stil verwendet, den man z.B. aus Lehrbüchern früherer Zeiten kennt. Durch die Wahl des Hintergrunds entsteht der Eindruck, die Seite wäre auf sehr grobem Papier gedruckt.

Josh-Sullivan

Und wieder Zeichnungen aus einer anderen Epoche als Stilelemente dieser Website.

Ndesign

Zeichnungen, Hintergrundmuster und Überschriften ergeben hier den ganz eigenen Charakter der Website.

Web-Designer-Wall

Auch hier sind es in erster Linie die Zeichnungen, die den Charakter der Website bestimmen.

LivingDesign

Die Header-Collage in Übergröße bestimmt hier den Stil der Website.

BornLiving

Groß, schräg, skizziert, so erscheint diese Website.

JESUS-RODRIGUEZ-VELASCO

Ähnlich wie das Beispiel zuvor.

Morphix-Design-Studio

Ein Kinderbuch könnte hier Pate gestanden haben.

Kulturbanause

Auch hier bestimmt wieder die Grafik das Aussehen der Website.

David-Hellmann

Ein übergroßes Selbstportrait, große Schriftzüge und feine Hintergrundmuster bestimmen den Charakter dieser Website.

SimpleBits

Farben und Hintergrundmuster sind hier bestimmend für den Charakter.

Wing-Cheng

Eine ganz raffinierte Website, bei der fast nur Handskizziertes und Handgeschriebenes zum Einsatz kommt – wirklich unverwechselbar.

CSS3-Transforms

Eine Demonstration einiger der vielen Möglichkeiten von CSS3. Aufgrund der schrägen Darstellung der Elemente und des geschickten Einsatzes des Hintergrundmusters ergibt sich auch hier ein handgearbeiteter Stil.

In einem weiteren Artikel möchte ich als Kontrast zu den obigen Beispielen Seiten zeigen, die unter dem Begriff “Web 2.0 Look” eine ganz andere Richtung einschlagen.

Der Weg zur eigenen Website — Teil 5: Die Schriften

Thomas — Sun, 05 Sep 2010 12:54:30 +0000

Außer den Farben haben auch die verwendeten Schriften einen großen Einfluss auf die Wirkung einer Website.

1. Charakter

Jede Schrift hat einen eigenen Charakter. Der Charakter jeder dieser Schriften muss zur Aussage der Website passen, ansonsten riskiert man, dass die Website unprofessionell oder unglaubwürdig wirkt.
Manche Schriften sind auch durch geschichtliche oder öffentliche Erfahrungen besetzt und können deshalb nur eingeschränkt verwendet werden. Andere Schriften gelten als laut oder leise, dick oder dünn, faul oder lebendig, lustig oder düster. Derartige Schriften müssen mit Bedacht verwendet werden.

Verschiedene Charaktere der Schriften

2. Schriftkombination

Bei der Verwendung mehrerer Schriften auf einer Website muss man die Kombination sehr sorgfältig auswählen, damit die Charaktere auch gut zusammen passen. Damit die Kombination stimmt gilt: genügend Unterschiede, ähnliche Strukturen innerhalb einer Schriftfamilie, aber nicht innerhalb einer Schriftklasse. Zwei, maximal drei Schriften pro Website sind genug, ansonsten wirkt die Website unprofessionell und unentschlossen.

3. Lesbarkeit

Die Lesbarkeit von Fließtext auf dem Bildschirm ist nicht vergleichbar mit der Lesbarkeit auf Papier. Während bei Druckwerken Serifenschriften als augenfreundlich und weniger ermüdend gelten, sind auf dem Bildschirm die serifenlosen Schriften meist besser lesbar. Dies gilt umso mehr, je kleiner die Schrift dargestellt wird. Die Schriftgröße sollte jedoch nicht zu klein gewählt werden, 12 bis 14 Pixel sollten es schon mindestens sein.

Times New Roman vs. Verdana

Schriftgröße 10px vs. 12px

4. Rechtliches

Es gibt inzwischen mehrere Verfahren, wie man Schriften, die möglicherweise nicht auf dem Rechner des Besuchers der Website installiert sind, trotzdem nutzen kann. Texte können als Bilder eingebunden oder mittels Flash, JavaScript oder CSS mit der gewünschten Schrift dargestellt werden.
Bei den drei letztgenannten Verfahren ist jedoch zu beachten, dass der gewünschte Font hierbei teilweise oder ganz auf den Rechner des Besuchers herunter geladen wird. Daraus ergeben sich rechtliche Konsequenzen, die es zu beachten gilt.
Die Lizenzbedingungen der verwendeten Schrift können eine Verwendung im Web explizit verbieten, wodurch die Schrift dann für das Web unbrauchbar wird, möchte man keine Abmahnung riskieren.
Die Nutzung der Schriften kann auch entsprechend dem Traffic der Domain kostenpflichtig berechnet werden. Die Schriften werden dann direkt vom Server des Anbieters geladen und nach Nutzung abgerechnet.
Glücklicherweise gibt es auch freie Fonts, die ohne Einschränkung für die eigene Website verwendet werden können. Die Auswahl ist hier nicht so groß wie bei den kommerziellen Fonts und manchmal ist die Qualität etwas schlechter. Dennoch lohnt sich ein genauerer Blick, möchte man nicht ausschließlich mit den Standard-Schriften arbeiten.

Alle Teile dieser Serie:

Teil 1 – Recherche
Teil 2 – Struktur und Navigation
Teil 3 – Wireframes
Teil 4 – Die Farben
Teil 5 – Die Schriften

Der Weg zur eigenen Website — Teil 4: Die Farben

Thomas — Wed, 01 Sep 2010 13:57:48 +0000

Mit Hilfe der Farben wird das Erscheinungsbild einer Website mit am stärksten beeinflusst. Falls die Farben nicht schon aufgrund der Corporate Identity Ihrer Firma festgelegt sind, hat man hier viele Möglichkeiten die Stimmung der Seite zu beeinflussen.
Je nach Zielsetzung und Branche wird man sich für helle oder dunkle, monochrome oder bunte Farbzusammenstellungen entscheiden. Gerade bei der Kombination mehrerer Farben ist ein gutes Gefühl für die Harmonie der Farben wichtig. Hier hilft die Farbenlehre weiter, über die es zahlreiche Bücher gibt und die bereits Goethe intensiv beschäftigte.

Mit Hilfe des Farbkreises und speziellen Farbschemata kann man angenehme Kombinationen recht leicht erstellen. In obiger Abbildung sind sechs Schemata dargestellt:

monochrom — eine einzelne Farbe und hellere oder dunklere Abstufungen
analog — eine Gruppe von Farben, die im Farbkreis benachbart sind
komplementär — Farben, die sich im Farbkreis direkt gegenüber stehen
teilkomplementär — eine Farbe und die zwei benachbarten Farben ihrer Komplementärfarbe
triadisch — drei Farben, die im Farbkreis jeweils gleich weit voneinander entfernt sind
tetradisch — vier Farben, die im Farbkreis zwei komplementäre Farbenpaare bilden

Von Adobe gibt es das sehr gutes Online-Werkzeug “kuler” zur Erzeugung von Farbpaletten nach obigen Schemata.

Hier können Sie auch Farbpaletten anderer Besucher und deren Bewertungen anschauen oder selbst erstellte Paletten zur Bewertung frei geben. Somit sieht man auch in etwas, was aktuell im Trend ist.

Eine weitere Methode ist natürlich, das Internet aufmerksam in Hinsicht der verwendeten Farben zu durchstöbern. Wenn man von den Seiten, die einem gefallen Screenshots fertigt, kann man sie später miteinander vergleichen um sich letzten Endes für die Variante zu entscheiden, die am besten gefällt. Ich verwende seit einiger Zeit auf dem Mac das Tool “LittleSnapper” von Realmacsoftware , mit dem man sehr bequem Snaps von Browserfenstern incl. Link zur Seite speichern, verschlagworten und sortieren kann.

Der nächste Artikel wird den Einsatz der Schriften auf der Website behandeln.

Alle Teile dieser Serie:

Teil 1 – Recherche
Teil 2 – Struktur und Navigation
Teil 3 – Wireframes
Teil 4 – Die Farben
Teil 5 – Die Schriften

PNG-Bilder optimieren

Thomas — Mon, 30 Aug 2010 19:04:57 +0000

Einstellungen bei Fireworks Version 4

Im Internet gibt es aktuell eigentlich nur drei verbreitete Formate zur Darstellung von Bildern: JPG, GIF und PNG.

JPG wird in erster Linie für Fotos verwendet.
GIF für einfache Grafiken mit Indextransparenz.
PNG32 oder PNG24 für Grafiken mit Alphatransparenz.
PNG8 mit Indextransparenz.

Die Indextransparenz vom GIF- und PNG8-Format ist nur dann geeignet, wenn es keine Verläufe von Nichttransparent zu Transparent gibt, da es nur ein Farbwert für die Transparenz gibt.

Die Alphatransparenz ist für saubere Überlagerung halbtransparenter Grafiken unabdingbar.

Leider sind die damit einhergehenden Dateigrößen ein mehrfaches so groß wie z.B. beim GIF-Format. Bei Photoshop kann man nur zwischen obigen Möglichkeiten entscheiden aber mit Fireworks gibt es seit der Version 3 eine gute Alternative, die selbst bei erfahrenen Webdesignern oftmals nicht bekannt ist.

Fireworks bietet unter dem Punkt “Optimieren” für den Export die Einstellung PNG8 mit Alphatransparenz an. Somit kann man das kompaktere Format PNG8 mit der Alphatransparenz kombinieren und hat das jeweilige Optimum von beiden Formaten vereint.

WordPress Themen

Thomas — Sat, 28 Aug 2010 15:17:27 +0000

Wer WordPress-Templates selbst erstellen oder bearbeiten möchte, muss sich mit diesem Thema natürlich vertraut machen. Die Dokumentation von WordPress ist sicher recht gut, befasst sich aber kaum mit dem Thema Templates.
Von den beiden unten dargestellten Büchern, die sich intensiv mit diesem Thema befassen, gibt es einige Kapitel im Internet zu lesen. Die Links zu den verfügbaren Texten habe ich unten aufgelistet.

“PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull, erschienen im Franzis-Verlag.
Es kann hier bestellt werden.

“WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen, erschienen im Franzis-Verlag.
Es kann hier bestellt werden.

Viel Spaß beim Lesen

Der Weg zur eigenen Website — Teil 3: Wireframes

Thomas — Sat, 28 Aug 2010 13:37:43 +0000

Der letzte Artikel befasste sich mit der Struktur der Website und mit den sich daraus ergebenden Möglichkeiten der Navigation. Wireframes befassen sich dagegen mit der Struktur der einzelnen Seiten. Mit einem Wireframe wird jede einzelne Seite im Detail entworfen um die Wirkung zu testen und die beste Anordnung der Seitenelemente fest zu legen.

Auf jeder Seite gibt es Elemente, die bei allen Seiten an der selben Stelle platziert sind. Hiermit bekommen die Website ein Grundgerüst und eine einheitliche Linie. Je nach Funktion der einzelnen Seite gibt es hierfür unterschiedliche Elemente, deren Anordnung in dem individuellen Bereich der einzelnen Seite festgelegt wird.

Die nachfolgenden Abbildungen sollen dies am Beispiel unserer Website verdeutlichen:

Start- und Service-Seite

Portfolio und Blogroll

Kontakt und Impressum

Die Größen und Proportionen der einzelnen Blöcke in den Wireframes sind nicht so konkret, wie das obige Abbildungen vermuten lassen könnten. Bei der Umsetzung der Seiten und entsprechend dem gewählten Design ergeben sich die Größen und Proportionen meist zwangsläufig. Wird z.B. eine feste Seitenbreite von 960 Pixeln gewählt, so ergeben sich die Breite der Blöcke aufgrund der Teilungen und Zwischenräume. Die Höhe wird bei den meisten Blöcken durch den Inhalt dynamisch ermittelt.

Der nächste Artikel wird den Einsatz der Farben auf der Website behandeln.

Alle Teile dieser Serie:

Teil 1 – Recherche
Teil 2 – Struktur und Navigation
Teil 3 – Wireframes
Teil 4 – Die Farben
Teil 5 – Die Schriften

8 Faces — neues Typographie Magazin

Thomas — Fri, 27 Aug 2010 16:51:24 +0000

»Wenn Sie für den Rest Ihres Lebens nur noch acht Schriften verwenden dürften, welche würden Sie wählen?«

8 Faces ist ein neues Magazin für Liebhaber der Typographie, welches diese Frage – und viele mehr – pro Ausgabe an acht führenden Designern aus den Bereichen Web-Design, Print Design und Illustration stellt.

Die erste Ausgabe ist bereits vergriffen, jedoch als PDF-Version für 3,00£ auf 8faces.com zu bekommen. Ich habe leider auch nur die PDF-Datei erwerben können. Trotzdem ist das Lesen und Betrachten des Magazins ein einziger Genuss

Die zweite Ausgabe erscheint noch vor Weihnachten und kann Anfang ab November vorbestellt werden. Das Magazin gibt es aktuell nur in englischer Sprache, was in unserer Branche aber sicher kein Problem sein sollte.

If you could only use eight typefaces for the rest of your life, which would you choose?

8 Faces is a new magazine for devotees of typography that asks this question — and many more — to eight leading designers from the fields of web design, print design, illustration, and of course type design itself.

Extensive examples of these designers’ work and further contributions from other leading artists mean that the magazine is a beautiful artifact to behold. 8 Faces is available internationally from this website and in a few selected retail outlets in the UK.

#1 features interviews with eight incredible designers.
— Team of 8 Faces

Verwendete Plugins für WordPress

Thomas — Fri, 27 Aug 2010 15:10:34 +0000

WordPress ist »out of the Box« schon ein phänomenales System zur Erstellung von Websites, egal ob für Blogs oder seitenorientierte Sites.

Dennoch gibt es bei jeder Website Bereiche, die mit den Basisfunktionen nicht abgedeckt werden können. Hier kommen die Plugins ins Spiel, die WordPress um verschiedene Funktionalitäten erweitern.

Die nachfolgende Liste zeigt die von mir verwendeten Plugins für diese Website auf.

FD Feedburner Plugin von John Watson

Hiermit werden die Feeds zu FeedBurner umgeleitet, was unnötigen Traffic vermeidet und mehr Möglichkeiten bietet. Ich hatte bereits einen Artikel geschrieben in dem man hierzu Näheres erfahren kann.

Google XML Sitemaps von Arne Brachhold

Dieses Plugin erzeugt eine XML-Sitemap und hält diese automatisch aktuell. So hat Google immer den aktuellen Stand der Website verfügbar.

Landing Sites von The undersigned and Frank Bültge

Wennn Besucher von einer Suchmaschine auf die Website kommen, suchen sie spezifisch nach etwas. Meist durchsuchen sie nur das Suchergebnis. Mit diesem Plugin wird dem Besucher einer Auswahl an relevanten Artikeln der Website angeboten.

Math Comment Spam Protection von Michael Woehrer

Erzwingt die Lösung einer kleinen Rechenaufgabe bei Eingabe eines Kommentars . Dies ist in halbwegs wirksamer Schutz vor Spam-Robots, schützt aber nicht vor Spam, der manuell eingetragen wird.

Mit diesem Plugin kann man eine kleine Auflistung ähnlicher Artikel unter einem Artikel erstellen lassen. Das WordPress-Plugin Related Posts by Category listet ähnliche Beiträge eines beliebigen Artikels auf. Als Suchfaktor verwendet das Plugin nicht den Beitragstitel und auch nicht die Gewichtung des Inhalts. Vielmehr dient die Kategorie, die dem aufgerufenen Beitrag zugewiesen wurde, als Quelle der Übereinstimmung.

Secure WordPress von jremillard

Kleine Grundlagen für die Sicherheit der WordPress Installation. Durch gezielte kleine Modifikationen der Installation kann die Sicherheit erhöht werden.

SyntaxHighlighter Evolved von Viper007Bond

Zur Darstellung von Programmcode in Artikeln ist dieses Plugin bestens geeignet. Für gängige Programmiersprachen gibt es unterschiedliche Darstellungen.

Widon’t von Shaun Inman

Das ist eine kleine Typo-Hilfe für WordPress. Als »Witwe« bezeichnet man einen Fehler im Umbruch des Schriftsatzes. Das sieht dann so aus, dass z.B. das letzte Wort einer Überschrift allein auf einer neuen Zeile landet. Das Plugin ersetzt einfach das Leerzeichen vor dem letzten Wort durch ein »non breaking space«, wodurch die letzten beiden Wörter nur noch gemeinsam umbrochen werden können. Ein einsames letztes Wort, die »Witwe«, auf einer Zeile ist also nicht mehr möglich.

Fehlt in dieser Aufstellung noch etwas? Welche Plugins bevorzugt ihr? Über Hinweise und Kommentare würde ich mich freuen.

Der Weg zur eigenen Website — Teil 2: Struktur und Navigation

Thomas — Thu, 26 Aug 2010 11:53:16 +0000

Im letzten Artikel ging es um grundsätzliche Überlegungen zur Erstellung der Website. Mit der Recherche und der Ideen- sowie Informationssammlung beginnt der Prozess. Dann die Überlegung ob eine statische oder besser eine dynamische Website zum Einsatz kommen soll.

Mit der Sortierung und Strukturierung der Informationen, die auf der Website dargestellt werden soll, geht es weiter. Der Besucher der Website soll sich schnell zurecht finden, problemlos den Weg zur gesuchten Information finden und hierbei mit möglichst wenigen Klicks oder Eingaben zum Ziel kommen.

Die Grundstruktur kann man einfach mit Stift und Papier skizzieren:

Informationen strukturieren und zu Papier bringen

Es gibt auch Programme oder Websites, mit deren Hilfe man recht zügig die Struktur dokumentieren kann. Anwendungen wie Microsoft Visio, OmniGraffle oder ConceptDraw MINDMAP oder Websites wie writemaps.com sind einige Beispiele hierfür.

Mit writemaps.com erstellte Struktur bzw. Sitemap

Abhängig von der Komplexität der Struktur gibt es unterschiedliche Möglichkeiten, wie die Navigation der Website realisiert werden kann. Hierüber sollte man sich Gedanken machen, bevor man beginnt, das Layout der einzelnen Seiten zu planen.

In der Praxis haben sich bestimmte Formen der Navigation eingebürgert, die den Anforderungen möglichst optimal Rechnung tragen sollen.

Es gibt die Hauptnavigation, die auf allen Seiten verfügbar ist und über die alle wichtigen Seiten erreicht werden können.
Dann gibt es die Hilfsnavigation, die auch auf allen Seiten verfügbar ist, jedoch nicht das gleiche Gewicht hat, wie die Hauptnavigation. Ein Impressum oder ein Login wäre hierfür zwei Beispiele.
Die Untermenüs unterstützen die Hauptnavigation, indem sie bestimmte Teile der Hauptstrukturbereiche ansteuerbar machen.
Die lokale Navigation hilft auf Einzelseiten mit viel Inhalt, bestimmte Bereiche über Sprungmarken direkt ansteuerbar zu machen.
Mit der Brotkrumennavigation behält man in tief verschachtelten Ebenen der Struktur den Überblick und kann sich in der Hierarchie immer problemlos wieder “nach oben hangeln”.
Mit der Paginierung kann man eine große Anzahl zusammenhängender Informationen auf mehrere kleinere Seiten verteilen und ansteuern.

Hauptnavigation und Unternavigation

Bei obigem Beispiel sieht man eine horizontale Hauptnavigation. Die Unternavigation liegt als horizontale Leiste direkt unter der Hauptnavigationsleiste.

Hauptnavigation und Unternavigation

Hier wird die horizontale Hauptnavigation durch eine vertikale Unternavigation auf der linken Seite unterstützt. Es gibt in diesem Beispiel noch eine weitere Unterebene, die optisch ansprechend dargestellt wird. Zudem wird eine Brotkrumennavigation unterhalb der Hauptnavigation angezeigt.

Hilfsnavigation

Die Hilfsnavigation wird meist recht schlicht in reiner Textform im unteren Bereich der Seite realisiert. Manchmal steht sie auch ganz oben am Bildschirmrand, in die rechte Ecke gedrängt.

Lokale Navigation

Bei obigen Beispiel ist die Hauptnavigation und die lokale Navigation identisch. Der gesamte Inhalt der Website steht auf einer einzigen Seite. Per Navigation zu den Sprungmarken wird der gewünschte Ausschnitt der Seite dargestellt.
Diese Technik ist aktuell im Trend, ist aber nur bei kleinen Websites mit wenig Inhalt empfehlenswert. Bei viel Inhalt würde die Flexibilität und die Ladezeit doch sehr leiden.

Paginierung

Die Paginierung steht meist unten links oder mittig unter dem eigentlichen Inhaltsbereich der Seite.

Im nächsten Artikel wird es um die Wireframes gehen, mit deren Hilfe man das Seitenlayout planen kann.

Alle Teile dieser Serie:

Teil 1 – Recherche
Teil 2 – Struktur und Navigation
Teil 3 – Wireframes
Teil 4 – Die Farben
Teil 5 – Die Schriften