Web Design Tipps – Nummer 1

Regeln sind nicht wirklich das, was im Leben als Spassquelle Nummer Eins bekannt ist. Manchmal jedoch ist man wirklich froh darüber, denn die Regeln können auch wie bei einem Spiel, ein mal festgelegt eine wahre Spielwiese bieten und für den richtigen Spielspass sorgen (für Designer besonders wichtig).

Die folgenden 12 Design Tipps für Webseiten stehen natürlich nicht so felsenfest wie die berühmten 10 Gebote eines sehr oft verkauften und gelesenen Buches, doch sie stellen eine gute Basis für die Entwicklung gut funktionierender Webseiten. In diesem Artikel wird der Tipp Nummer 1 vorgestellt, die anderen werden folgen.

Web Design Tipp Nummer 1: „Kenne Deinen User“
Verschaffen Sie sich so viele Informationen über Ihre zukünftigen User wie nur möglich.  Daraus können wichtige Schlüsselfragen bezüglich des Designs beantwortet werden. Wie zum Beispiel das Prozentanteil der User mit einem DSL Anschluss, was wiederum bei der Entscheidung hilft, ob man große Dateien, wie viele Fotos, Grafiken oder Flashdateien  Ihre Webseite vertragen kann. Ein in Zukunft immer wichtigerer Faktor ist mit Sicherheit der Anteil der älteren Bevölkerung. Nicht nur die Schriftgröße hängt davon ab, sondern auch eine einfache Navigation mit einem klaren „Weg zurück“ und natürlich das gesamte Erscheinungsbild, bzw. die Art des Designs wird für ein jüngeres Publik ein ganz anderes Konzept aufweisen. Beim Design eines Onlineshops hat das Vertrauen schaffen gegenüber einem älteren und oft auch kritischerem Publikum einen höheren Stellenwert als es für die User der neuen, jungen Generation, die mit dem Internet aufgewachsen ist. Je mehr Informationen Sie über die Zielgruppe sammeln können umso besser!

Klickfreies Interface Design

Kann man ein Interface bedienen ohne ein einziges mal klicken zu müssen??? Diese Frage wird nicht theoretisch, sondern als pures Erlebnis auf www.dontclick.it celebriert. Alle Navigationselemente dieser Webseite lassen sich über einfaches Bewegen der Maus steuern – es reicht nur den Mauszeiger über die Links zu positionieren, damit sich dessen Inhalte angezeigt werden. Wer es nicht glauben, soll am besten es ausprobieren! Witzigerweise erscheint bei einem Fehlklick(wenn man doch aus Gewohnheit auf etwas klickt) immer eine sehr markante Meldung „Sie haben keinen autorisierten Klick ausgeführt, bitte sagen Sie warum Sie es getan haben!!! :-))) Aus Versehen oder haben Sie es tatsächlich gewollt?“ Sehr, sehr nett.

Klickfreies Interface Design

Webdesigner Top Firefox Extensions

Okay, als erstes, mit Webdesigner meine ich hier nicht die Pixelschieber im Photoshop 😉 Sondern die Jungs und Mädels die tatsächlich mit dem Frontend arbeiten und die grafischen Vorlagen mindestens in HTML/CSS Vorlagen programmieren.

Firefox bietet mit der Möglichkeit beliebige Erweiterungen zu installieren eine unglaublich große Flexibilität in der Anpassung an die Bedürfnisse der User. Und für jeden Webdesigner gibt es wirklich sehr nützliche Tools:

1. Web Developer: die Fülle an Funktionen kann man mit ein paar Zeilen Text gar nicht beschreiben. Von einem Lineal um die Elemente auf der Webseite pixelgenau auszumessen bis zu einer live editierbarkeit des HTML Codes und der CSS Stylsheets bietet diese Extension alles, was ein Webdesigner Herz begehrt. Kleiner Nachteil: eben diese große Funktionsvielfalt macht die Toolbar leider ziemlich unübersichtlich und man muss teilweise länger eine bestimmte Funktion suchen.

2. Colorzilla: nie mehr Screenshots von Webseiten machen oder im HTML Code rumwuseln, um die Farbwerte auszulesen! Mit Colorzilla hat man die gute alte Pipette, mit der man einfach von jedem Element der Webseite die Farbwerte übernehmen kann um sie anschliessend zu kopieren und im Photoshop weiterzuverarbeiten (oder etwas anderes damit zu machen).

3. Scrapbook: meines Erachtens eines der verborgenen Geheimtipps für die Entwicklung der Webseiten! Wie oft hat man eine oder mehrere nette Funktionen auf den fremden Seiten gesehen und möchte man diese so schnelle wie möglich bei sich integrieren. Doch allein das rauskopieren, bzw. speichern der kompletten Webseiten funktioniert nur in den einfachsten Fällen reibungslos. Meistens werden die CSS Stylesheets nicht richtig mitkopiert oder javascripts oder, oder… Scrapbook Extension speichert aber mit einem Klick die gesamte Webseite wunderbar ins Archiv auf die lokale Festplatte – und ermöglicht ein einfaches Erforschen der Programmierung der interessanten Elemente. Wie gesagt, ein absolutes Geheimtipp für jeden Webdesigner!

4. StumbleUpon: eine freie Community bewertet über diese Toolbar andere Webseiten und katalogisiert diese. Durch das häufige Ablegen der gleichen Seiten erhalten sie einen Qualitätsfaktor und so ist es möglich einfach ein Thema auszuwählen (z.B. Grafikdesign, Webdesign oder Fotografie usw.) und nur mit einem Klick richtig loszusurfen. D.h. eigentlich von einem Tipp zum Thema zum anderen zu springen. Ich habe noch nie so viele inspirierende und wunderschöne Webseiten (besonders zum Thema Grafikdesign) innerhalb kürzester Zeit gesehen. Und das Abstimmen findet auf eine denkbar einfachste Art und Weise: auf den Daumen drücken ein paar Tags eingeben, fertig!
Update Mai 2016:
Inzwischen ist aus der Toolbar auch eine tolle Webseite geworden, in der man auch nützlicherweise nicht nur die tollen Designs, sondern auch die dahinter stehenden CSS-Style einsehen kann: www.stumbleupon.com

5. Clear Cache Button: Cache ist ein natürlicher Feind jedes Webdesigners 🙂 Dagegen gibt es diese einfache Lösung, nach der Installation dieser Erweiterung kann man einen Button zum Löschen von Cache aktivieren.

CSS Layout

Einstieg in das CSS Design ist oft sehr langwierig, unter anderem weil man man die Syntax sich nur schwer merken kann. Es gibt aber ein erstaunlich übersichtliches CSS Layout „Cheat Sheet“ kostenlos zum Download oder Ausdruck:

http://lesliefranke.com/files/reference/csscheatsheet.html

Auf einer einzigen DIN A4 Seite ist es dem Autor gelungen die allerwichtigsten CSS Style Elemente und Syntax als eine Art Spickzettel zusammenzufassen. Das ganze ist sehr übersichtlich strukturiert.

Spiegelung der Grafik (oder Logos)

Die schicke Spiegelung der Grafik für das Logo oder einer Überschrift in einer Webseite oder einem Blog zu machen bedarf es nicht unbedingt einer Bearbeitung im Photoshop. Den fast schon zum Web 2.0 Standard Effekt kann man auch mit ein bisschen AJAX genau so schön hinbekommen.

Spiegelung Grafik Logo

Man bindet den javascript Code einmal in die Seite ein und ruft dann Bedarf für die zu spiegelnde Grafik sehr einfach auf: class=“reflect“ alt=“reflection.js“

Das schafft auch jeder Designer ohne allzu große Programmierkenntnisse!

AJAX Code für die Spiegelung der Grafik gibt es bei AjaxDaddy kostenlos zum Download »

Dieser AJAX Code funktioniert in allen wichtigen Browsern: ab Internet Explorer 5.5, ab Mozilla Firefox 1.5, ab Opera 9 und im Safari. Der Script ist so geschrieben, dass in den älteren Browsern die Spiegelung der Grafik einfach nicht auftaucht (keine Fehlermeldungen oder broken images). Der Code ist sehr schlank und braucht nicht einmal 5 KB.

Übersicht Banner Größen

Es gibt scheinbar ein heilloses Durcheinander bei den Größen der grafischen Werbemittel im Online Marketing. Folgende Auflistung der sich international durchgesetzten Banner Größen sollte eine wertvolle Hilfe beim Erstellen Ihrer nächsten Banner sein:

Bannergrößen Rectangles and Pop -Ups
300 x 250 – Medium Rectangle
250 x 250 – Square Pop -Up
240 x 400 – Vertical Rectangle
336 x 280 – Large Rectangle
180 x 150 – Rectangle

Bannergrößen Banners and Buttons
468 x 60 – Full Banner
234 x 60 – Half Banner
88 x 31 – Micro Bar
120 x 90 – Button 1
120 x 60 – Button 2
120 x 240 – Vertical Banner
125 x 125 – Square Button
728 x 90 – Leaderboard

Bannergrößen Skyscrapers
160 x 600 – Wide Skyscraper
120 x 600 – Skyscraper
300 x 600 – Half Page Ad

Diese Banner Übersicht können Sie gerne auch als eine PDF Datei zum Ausdrucken hier downloaden (80 KB)

Websichere Schrift – Top websafe Fonts

Die richtige Schriftart ist für jede Webseite wichtig, denn sie beeinflußt die Art und Weise, wie die Leser eine Seite wahrnehmen (z.B. ernst und formal oder freundlich und lässig). Neben diesem gibt es auch wichtige praktische Kriterien. z.B. sind manche besser lesbar als andere, und einige sind mehr vorhanden.

Die Auswahlkriterien für die passende Schrift:
1. passt zum Charakter der Webseite
2. ist einfach auf einem Bildschirm zu lesen und
3. ist auf vielen Browsern und Betriebssystemen vorhanden

Websafe Fonts

Es gibt im Allgemeinen zwei Arten von Schriften: serif und san serif. Serif Schriften sind die, die feine Querlinien an den Extremitäten des Buchstaben haben. Sans serif („sans“, das französische Wort für „ohne“) sind Schriften, die nicht serifs haben. Die wohl am meisten verbreitete serif Schrift ist Times New Roman. Arial ist eine sans serif Schrift.

Kurze Bewertung der meist verbreiteten Web Schriften nach folgenden Kriterien: ihre Verbreitung, Lesbarkeit und Design:

Arial
Verbreitung: Sehr gut. Es ist vermutlich die am meisten verbreitetste sans serif Schrift. Sie ist die Standard-Schrift für Windows (Seit Version Windows 3.1)
Lesbarkeit auf dem Schirm: Nicht die schlechteste aber definitiv nicht die beste, besonders in den kleinen Größen, wenn es zu schmal und der Abstand zwischen den kleinen Buchstaben zu klein wird.
Design: Stromlinienförmig, moderner Look aber auch normal und langweilig.
Für Mac User: Ersatz zu Arial ist Helvetica.

Times New Roman:
Verbreitung: Sehr gut. Es ist vermutlich die am meisten verbreitetste serif Schrift. Es ist die Standard-Schrift für Webbrowser.
Lesbarkeit auf dem Monitor: Annehmbar für Schriftkegelgrößen von 12pt. und größer, aber schrecklich für kleinere Größen.
Design: Ernst, formal und altmodisch.

Verdana:
Verbreitung: Eine weit verbreitete serif Schrift, Verdana wurde zuerst mit Internet Explorer 3 ausgeliefert, als das rasante Wachstum des Internets eine neue Schrift verlangte, die einfach auf dem Bildschirm zu lesen war.
Lesbarkeit auf dem Monitor: Aussergewöhnlich gut. Die breiten Buchstaben sind auch in kleinsten Größen gut lesbar.
Design: Modern, freundlich und professionell.

Georgia:
Verbreitung: Gut. Es ist ein serif Schrift, die mit Internet Explorer 4 eingeführt wurde, wenn die Notwendigkeit nach einer serif Schrift mit viel besserer Lesbarkeit als Times New Roman offensichtlich wurde.
Lesbarkeit auf dem Monitor: Sehr gut. Es ist die beste serif Schrift für das online-Lesen, da sie speziell zu diesem Zweck gestaltet wurde.
Design: Modern, freundlich und professionell.

Schließlich erwähne ich noch kurz Courier New, sie ist eine serif Schrift, die auf den alten, mechanischen Schreibmaschinen populär war. Jetzt wird sie benutzt um Computercode darzustellen (wenn man HTML Code einer Webseite darstellen muss, passt diese Schrift wunderbar).

Aus der Usability Sicht ist der unangefochtene Sieger Verdana. Wenn man unbedingt eine serif Schrift benutzen muss, ist Georgia die beste Wahl. Arial bleibt eine gute Wahl für spezifische Teile vom Text, wie Schlagzeilen und Titel, wenn größere Schriftgrößen verwendet werden können.

Spartaste mit Rabatt-Garantie

Die schönste Erfindung gleich nach der Play Taste des ersten Walkmans scheint ja nun wirklich die SPARTASTE zu sein 🙂

Gesehen auf www.bitiba.de: sie schaltet nur mit einem Klick die gesamte Navigation des Onlineshops für Haustierbedarf auf reduzierte Artikel um. Es ist keine Produktkategorie, wie es normalerweise üblich ist, sondern tatsächlich der gesamte Produktbaum wird sozusagen auf Schnäppchen gefiltert. Die Anzahl der Angebote wird in Klammern hinter den einzelnen Menüpunkten angezeigt.

Spartaste - neue Navigation

www.bitiba.de – für Haustiere sparen

Flash in xhtml einbinden

Eine ganz kurze und einfache Form eine Flash Datei (.swf) in xhtml oder html einzubinden, bieten folgende Zeilen:

<object type=“application/x-shockwave-flash“ data=“images/logos.swf“ height=“218″ width=“60″>
<param name=“movie“ value=“images/logos.swf“>

<param name=“bgcolor“ value=“#ffffff“>

</object>

Fashion Webdesign in Flash

Flash Webdesign für Fashion DesignFashion Design kann so schön sein. Und Websites in Flash auch. Leider nicht immer. Doch in diesem Fall stimmt alles: die Kleider, die Fotografie, Webdesign, Flash und sogar die Musik. Die Navigation ist sehr elegant und passt nicht nur unglaublich gut zum Gesamteindruck sondern ist ein fester Bestandteil dieser fast schon poetischer Seite. Anschauen und einfach die gelungene Gestaltung aller Elemente genießen.

www.rembo.be – Rembo Styling

Design Blog vom Designer

Offenlegung: Auf dieser Webseite finden Sie zum Teil Affiliate-Links. Das bedeutet, dass wir unter Umständen eine kleine Provision erhalten. Ohne zusätzliche Kosten für Sie. Damit helfen Sie uns weiterhin kostenlose Inhalte anzubieten. Vielen Dank!