Download

Lade dazu das Plugin von hier herunter.

Gründe

Es ist einfach damit die Login-Seite nach Ihren Wünschen anzupassen. Hier ein paar Gründe wieso man dieses Plugin nutzen sollte:

1. Ein Plugin zu gebrauchen bedeutet, dass die Änderungen bei einem Update bleiben.
2. Kunden lieben es, wenn alles bis ins letzte Detail stimmt.

Dieses Plugin beinhalted auch ein PSD Template um den eigenen Login Screen zu erstellen. Es könnte nicht einfacher sein.

Screenshot

In den letzten Tagen schrieben eine Unmenge an Blogs über Photoshop Express. Photoshop Express ist die online Version von Photoshop und kostenlos nutzbar. Adobe möchte mit diesem Dienst vor allem der jüngeren Generation ihren Markennamen bekannter machen, da sich das Verwalten und Bearbeiten vermehrt ins Netz verlagert.

Das Erwachen

Der Hype um Photoshop Express dürfte etwas abnehmen, wenn die User bemerken, auf was sie sich da eingelassen haben. Wie SPIEGEL ONLINE berichtet, hält sich Adobe die Option offen, sich die gespeicherten und bearbeiteten Bildern auf ihren Servern zum Eigennutzen zu machen (ohne Anrecht auf Bezahlung). Unter Punkt 8 bin ich fündig geworden:

[...]you grant Adobe a worldwide, royalty-free, nonexclusive, perpetual, irrevocable, and fully sublicensable license to use, distribute, derive revenue or other remuneration from, reproduce, modify, adapt, publish, translate, publicly perform and publicly display such Content (in whole or in part) and to incorporate such Content into other Materials or works in any format or medium now known or later developed.

Wie auf basicthinking.de zu lesen ist, ist der Service vorerst sowieso nur für Amerikaner zugänglich.

Weitere online Berichte:

Adobe gibt Fehler zu – Grabsch-Klausel soll verschwinden - SPIEGEL ONLINE
Gratis-Photoshop: Der Haken liegt im Kleingedruckten - 20min.ch
Photoshop neu kostenlos im Internet - 20min.ch

Zwar werden die Artikel gelesen, doch nicht kommentiert - was wir sehr schade finden. Denn würde auch wir gerne Feedbacks unserer Leser erhalten. Wir hoffen, dass dies in Zukunft etwas ändern wird.

Kurz gesagt ist Web 2.0 ein “Mitmach-Web”. Jeder kann in Communities mitmachen oder sogar mitschreiben (beispielsweise Wikipedia). Eine viel ausführlichere Definition was Web 2.0 sein soll, findet man bei web-zweinull.de oder bei oreilly.de welcher den Begriff Web 2.0 geprägt hat.

Einleitung

Diese Top 5 sind meine täglichen Begleiter im Web. Sie sind nicht nach einer bestimmten Reihenfolge gelistet.

Twitter

Twitter ist ein Service, mit dem so genanntes Microblogging möglich ist. Freie Übersetzung der englischen Version aus Wikipedia:

Microblogging ist eine Form des Bloggens welches sich nur auf Text Updates beschränkt. Meist sind dies nicht mehr als 200 Buchstaben.

Twitter ist also mit seinen 140 Buchstaben ein typischer Microbloggingdienst.

Website: twitter.com

flickr

Flickr ist ein Dienst, welcher es erlaubt, Bilder einer sehr breiten Community zu zeigen. In der kostenlosen Version lassen sich 20 MB an Bildern hochladen. Bezahlt man einen gewissen Beitrag pro Jahr, kann der Service uneingeschränkt genutzt werden.

Website: flickr.com

del.icio.us

Mit del.icio.us kann man jederzeit und von überall auf seine Buchzeichen zugreifen. Anstatt dass man seine Websiten im Browser (zB Firefox, Internet Explorer) speichert, kann man sie bei del.icio.us ablegen.

Website: del.icio.us

Facebook

Facebook gehört zu den Marktführenden Communities im Web. Glaubt man den Statisiken, so nutzen über 64 Mio User das Portal. Über das Portal lassen sich Freunde finden. Fast jeder hat mittlerweile einen Account.

Website: facebook.com

Tumblr

Einer meiner Lieblingsdienste. Tumblr nutze ich beispielsweise für meine Seite purzlbaum.ch. Mit Tumblr ist wie bei Twitter Microblogging möglich. Mit Tumblr lassen sich mit einem Mausklick Text, Fotos, Zitate, Links, Gespräche, Audios und Clips in den Hauseigenen Tumblr Stream einbinden.

Website: tumblr.com

Wer wem das du anbietet - nach Knigge gilt:

• Die Frau bietet dem Mann das du an
• Die ältere Person der jüngeren
• Der Vorgesetzte dem Unterstellten

Diese “Regeln” sind heuzutage oftmals nur noch etwas, was einmal geschrieben wurde. Im Web 2.0 (in so genannten Communities) gehört es bereits zum guten Ton, zu duzen. Laufe ich in einen Sportladen, werde ich auch von Krethi und Plethi geduzt. Vielleicht liegts auch an meinem jünglichen Aussehen, denn auch mit bald 21 Jahren zeige ich meinen Ausweis noch regelmässig. Wobei wir beim Ausgang sind. Denn auch im Ausgang wird fleissig weitergeduzt, auch unter älteren Leuten. Auf der Arbeit ist man heute viel schneller mit dem Chef per du als noch vor einigen Jahren. Mag daran liegen, dass auch die Chefs jünger werden.

Foto von mikecco

Ich arbeite bei der Schweizer Armee. Da es da Hirarchiestufen gibt ist es relativ einfach. Alle Ranghöheren werden gesiezt, bis einem das Du angeboten wird. Bei Ranguntergebenen kann man selbst unterscheiden, wie man es handhaben möchte - ich sieze meist (ausser die auch einen Arbeitsvertrag haben), es schafft eine gewisse Distanz. Denn aus eigener Erfahrung weiss ich - wird einem das Du angeboten, sieht man das Gegenüber eher als “Freund” und erlaubt sich das eine oder andere mal etwas mehr. Und das ist menschlich.

Im Ausgang duze ich eigentlich alle, es sei denn, jemand ist augenscheinlich doch etwas älter als ich.

Wie es Kommentierer Tobi so schön sagte:

Wer weiß, ob kommende Generationen das “Sie” noch kennen.

Das Ganze ist einfach. Oben die Version des Internet Explorers eingeben und daneben die Website, welche im Internet Explorer angezeigt werden soll. Dann macht der NetRenderer einen Screenshot und schon ist das Ergebnis sichtbar. Und im Gegensatz zu anderen Diensten ist das Ganze kostenlos und kann so oft benutzt werden, wie nötig.

Link

IE NetRenderer

Via

Lifehacker

Das ganze funktioniert sehr einfach: Bild hochladen und den Anweisungen folgen. Am Schluss kann man das Bild als PNG downloaden. Damit man das Ergebnis als *.svg oder *.eps muss man sich registrieren.

Screenshot

Link

www.vectormagic.com

Inhaltsverzeichnis der Web 2.0 Features

Die unten aufgeführte Liste enthält die meisten der auf Web 2.0 Seiten zu findenden Features.
Natürlich muss eine Seite nicht all diese Features enthalten, um zu funktionieren oder das Anzeigen dieser Features bedeutet noch lange nicht, dass eine Seite Web 2.0-tauglich ist - oder gut ist.

1. Simple Struktur
2. Zentrales Layout
3. Weniger Spalten
4. Markanter Header
5. Sich klar abgrenzende Bereiche
6. Simple Navigation
7. Auffallende Logos
8. Grösserer Text
9. Fetter Lead-Text
10. Ins Auge stechende Farben
11. Liebevoll gestaltete Grafiken
12. Farbverläufe
13. Lichtreflexionen
14. Süsse Icons
15. Der Web 2.0 Stern

Disclaimer

Nicht alle genannten Design-Features sind in allen Fällen angebracht. Es gibt immer Websites, welche weniger beispielhaft sind , die diese Design-Technik falsch benutzen, zu oft oder ohne jegliches Harmoniegespür einsetzen.

Du kannst nicht einfach alle Design-Elemente irgendwie zusammenschustern und darauf hoffen, dass eine gute Webseite entsteht. Genauso wenig, wie du einfach ein paar Eier, ein bisschen Mehl und Zucker zusammen in einen Topf werfen kannst, um abzuwarten bis ein Kuchen daraus entsteht.

Um eine gute Webseite zu konzipieren brauchst du viel Gespür für das Zusammenwirken der beteiligten Elemente. Eine gute Lösung ergibt sich aus dem Zusammenspiel zwischen den oftmals gegensätzlichen Elementen.

Web 2.0?!

Ich verwende den Ausdruck , um die momentan vorherrschende Art im Webdesign zu beschreiben.

Viele Leute verwenden den Ausdruck Web 2.0 auch für:

Ein Wiederaufleben der Web-Economy

Ein neues Niveau der Wechselwirkung zwischen Technologien und Webseiten

Ein Gesellschaftsphänomen, abgeleitet von den Social Networks oder Social Communities (siehe unten “Web 2.0 Applikationen”

Für das Mitmach-Web

Viele Andere bezeichnen damit auch eine neue Webdesign-Schule. In meinem Artikel beziehe ich mich mit der Bezeichnung Web 2.0 auf eben jene Schule.

Bewegungen haben einen grossen Einfluss in ökonomischer, kultureller und politischer Hinsicht. Web 2.0 ist eine Bewegung, mit weitreichendem Einfluss und verändert gegenwärtig die Gesellschaft.

Web 2.0 Applikationen

Um einige der bekanntesten Web 2.0 Websites zu nennen:

YouTube
Tumblr
Flickr
last.fm
Twitter
del.icio.us
Facebook

Eine sehr grosse Liste (gegen 600 Anwendungen) findet man bei listible.com.

Einführung

Ich werde dich im folgenden mit den Elementen der neuen Design-Schule vertraut machen, dir erklären, weshalb diese Elemente gut sind und dir zeigen, wie du sie in eine eigene Webseite einbauen kannst.

Müsste ich Web 2.0 in einem Wort zusammenfassen, so würde ich simpel sagen. Beginnen wir gleich damit.

Ich bin ein grosser Fan dieser simplen Design Struktur. Ich glaube, dass dies ein grosser Schritt vorwärts im Webdesign ist.
Die heutigen simplen, markanten und eleganten Designs ermöglichen mehr mit weniger Aufwand:

Sie ermöglichen es den Augenmerk des Besuchers direkt dorthin zu führen, wo es gewünscht ist

Sie benutzen weniger Worte, sagen aber mehr aus und kreieren durch ausgewählte Bildelemente ein angenehmes Gefühl beim Besucher

Sie verwerfen die Idee, dass man den Besucher auf seiner Seite nicht lenken kann

1. Simple Struktur

Web Design ist simpler denn je und das ist auch gut so. 2.0 Designs sind zweckorientiert, sauber und simpel.

Use as few features as are necessary to achieve what you need to achieve.

Das bedeutet nicht, dass man notwendigerweise ein Minimalist zu sein hat, wie ich später erklären werde.

Ich glaube an den Nutzen einer einfachen Struktur. Das will nicht per se heissen, dass man Aufwand scheuen soll, aber trotzdem sollte man versuchen mit so wenig Design-Elementen wie möglich auszukommen, um sein Ziel zu erreichen.

Um in Web 2.0 zu denken, kann man Ockhams Rasiermesserprinzip verwenden; Gibt es zwei mögliche Lösungswege, dann geh’ den einfacheren weg.

Hier sind ein paar Beispiele. Beachte, dass unnötige Elemente auf jeder Seite weggelassen wurden. Auf jeder Seite könnte einiges mehr sein.aber würde dies die Seite besser machen?

Das Resultat ist, dass du gezwungenermassen auf den Inhalt achten musst. Du beachtest genau nur die beabsichtigten Elemente der Webseite; Du und der Web Designer erreichen ihr Ziel.

Weshalb eine simple Struktur von Vorteil ist

Webseiten haben ein Ziel und alle Webseiten haben einen Nutzen.

Die Aufmerksamkeit des Besuchers ist ein flüchtiges Gut.

Es ist die Aufgabe des Web Designers es dem Besucher zu erleichtern, das zu finden, was er sucht. (Bzw. ihn dazu zu bringen, das zu beachten, was von ihm beachtet werden soll)

Elemente auf dem Bildschirm ziehen das Auge des Betrachters an. Je mehr Elemente es auf dem Bildschirm hat, desto schwieriger wird es für den Besucher, das wirklich wichtige zu finden.

Also müssen wir mit dem Besucher eine gewisse “Kommunikation” herstellen und müssen daher auch die Unruhe auf der Seite reduzieren. Wir müssen also mit möglichst wenig sicherstellen, dass Form der Funktion folgt. Das ist ökonomisch oder eben simpel.

Wann und wie oft soll ich mein Design simpel halten?

Wann?

Immer

Wie?

Es gibt zwei grundsätzliche Gesichtspunkte, um erfolgreich simpel zu gestalten:

Entferne unnötige Komponente, ohne dabei die Effektivität zu vermindern.

Probiere alternative Lösungsansätze aus, die dasselbe erreichen, aber simpler sind.

Wann auch immer du designest, erachte es als deine Pflicht, alle unnötigen visuellen Elemente auszulassen

Konzentriere dich besonders auf Elemente in deinem Layout, die weniger wichtig für den Nutzen der Webseite sind. Denn visuelle Elemente in diesem Bereich ziehen die Aufmerksamkeit des Besuchers auf sich und lenken ihn vom Key-Content ab.

Benutze visuelle Elemente, wie Linien, Worte, Formen und Farben, um den Besucher auf den wichtigen Inhalt zu lenken und nicht bloss, um zu dekorieren.

Hier ist ein Beispiel eines Designs, das überladen ist. Yaxay’s Interface benutzt viele Pixel, aber die Mehrheit davon ist zu dekorativem Zweck im Hintergrund der Seite angebracht. Relativ wenig Platz bietet sich dem Besucher, um Informationen aufzunehmen oder mit der Seite zu interagieren.

Achte dich, wieviel verschiedene Elemente dein Auge auf sich ziehen und wieviel Platz für Navigation und Inhalt zugordnet ist.

Edward Tafte ist ein Guru, wenn es um das Designen von Informationen geht. Er benutzt die Ausdrücke Data ink (Details, die Informationen bereitstellen) und Non-Data ink (Details, die nur Details sind), um dieses Phänomen zu beschreiben.

Eine Art, wie Tafte die Effektivität des Informations Design (Grafiken, Tabellen, Präsentation etc.) misst, ist das Verhältnis von data ink zu non-data ink. Je mehr data ink benutzt wird, umso höher ist die Wahrscheinlichkeit, dass das Design effektiv ist.

Wenn wir nochmals das Beispiel von oben betrachten, dann hat es da viele Spielereien. Kanten, Farbtöne und Farbwechsel, Formen, Linien.eine Haufen graphischer Elemente einfach. Aber im Grunde genommen sind die einzigen brauchbaren Elemente:

Das Seitenlogo

und das Label auf dem Navigations-Button (Art Gallery)

All das Zeugs herum macht das Design unruhig. Die formen im Hintergrund, das Netzmuster, das Interface Panel, die Farbverläufe.alles non-data ink, denn es verbessert den Informationsfluss nicht.

Ich bin nicht gegen Reichhaltigkeit, Komplexität oder Schönheit im Web Design

Simpel heisst:

Verschwende nur genau so viele Pixel, wie notwendig sind, um mit dem Besucher zu kommunizieren. Verzichte also auf Schnickschnack im Hintergrund.

Du übermittelst dem Besucher in erster Linie Soft information und erst dann Hard Data.

Hard Data sind Fakten, wie News, Aktien-Indizies, Fahrpläne oder dein Kontostand.

Soft information deckt den Kommunikationsaspekt zwischen dem Besucher und der Webseite ab. Damit gemeint sind der Erste Eindruck von einer Firma. Ob der Besucher besucher sich wohl fühlt auf der Seite und ob er sich mit den angepriesenen Leistungen identifizieren kann. Diese Art von Information ist also genauso wichtig.

Was du dem Besucher mitteilst ist gleichermassen Hard Data, wie auch Soft Data und du übermittelst sie dem Besucher in Form von Pixeln. Setze die Pixel also bedacht ein.

Betrachte einmal folgende Seite:

Alex Dukals Webseite ist Reichhaltig und interessant. Er benutzt eine Reihe visueller Techniken, um deine Aufmerksamkeit auf sich zu ziehen und dich zu interessieren. Ausserdem hat man ein warmes Gefühl auf Alex Webseite und kriegt ein Gefühl von der Qualität seiner Arbeit.

Die Webseite ist simpel gehalten, weil die Pixels bedacht verwendet werden und die Muster im Hintergrund kaum stören, sondern eher für Atmosphäre sorgen.

Was auch immer du sagst, geh bedacht mit Pixels und Farben um. Benutze sie in erster Linie, um mit dem Besucher zu kommunizieren. Dann frage dich, ob du mit dem Besucher nicht genauso effektiv kommunizieren kannst, wenn du gewisse Dinge weglässt.

2. Zentriertes Layout

Im Allgemeinen werden heute die meisten Webseites im Browserfenster zentriert angezeigt. Nur noch wenige sind über das ganze Browserfenster verteilt oder Linksbündig ausgerichtet.

Warum ein zentriertes Layout gut ist

Seiten, die zentriert ausgerichtet sind, wirken simpel und ehrlich. Der Besucher mag das.

Ausserdem können wir sparsamer mit unseren Pixels umgehen. Wir müssen nicht mehr wie früher alles mit Pixels oder Bildern zukleistern. Denn wenn die Information zentriert ist, ist es nicht schlimm, wenn sich Links und Rechts vom Main-Content-Element einfach ein z.B. weisser Hintergrund befindet.Ausserdem sagen wir mit weniger mehr, sodass weiterer white-space entsteht.

Wann & wie man ein zentriertes Layout benutzt

Ich würde dir empfehlen deine Webseite immer zentriert auszurichten, ausser es gibt einen wirklich guten Grund, sie nicht zu zentrieren.

Dies kann zum Beispiel bei einer Web-Applikation der Fall sein.

3. Weniger Spalten

Vor einigen Jahren, waren 3 Spalten Layouts die Norm, und 4 Spalten Layouts waren nicht selten. Heute sind 2 Spalten allgemeiner, und 3 ist das Maximum.

Weshalb man wenige Spalten verwenden sollte

Weniger ist mehr. Wenige Spalten vermitteln eher ein Gefühl von ehrlichkeit . Weniger Informationen, aber klarer vermittelt.

Das ist aber auch ein Nebeneffekt der zentrierten Layouts. Weil wir nicht den vollständigen Bildschrim füllen und weil wir nicht so viel Informationen aufs Mal auf den Bildschirm pappen wollen, brauchen wir auch nicht so viele Spalten.

37Signals waren schon immer die ersten, die den Status Quo hinterfragt und nach einfacheren Antworten gesucht haben.

Hier benutzen sie 2 Spalten. Das ist ein gutes Beispiel für eine simple Struktur. Die Struktur lässt die Information sprechen und es ist nichts im Weg, das vom wichtigen ablenkt.

Apple ist der andere Führer in der eleganten Einfachheit.

Dieses Layout funktioniert wirklich gut. Jedesmal, wenn ich mir Apples Design so betrachte, werde ich mehr davon überzeugt, dass diese Zen-Annäherung so etwas wie der heilige Gral des Designs ist.

Dieses typische Apple Layout zeigt, dass sich jemand gefragt hat “wieviele Kästen/Spalten/Linien benötigen wir wirklich?” Dann haben sie mutig jeden unnötigen Mist entfern und das Resultat ist eine saubere und klare Kommunikation von Inhalten mit dem Besucher.

Wie du am Besten deine Spalten wählst

Kurz gesagt, ich würde dir davon abraten, mehr als drei Spalten zu benutzen. Einfach deshalb, weil du nicht mehr als wirklich notwendig benutzen solltest.

Es gibt aber immer Ausnahmen, wie hier einige Beispiele, wo mehr als 3 Spalten effektiv eingesetzt werden.

Derek Powazeks Blog verwendet 3 Spalten für den Hauptabschnitt seines Blogs, aber 4 für den Footer.

Der unterere Abschnitt ist eine Art Pic & Mix, in der der überfluss an den Spalten so etwas wie ein Selbstbedienungsbuffet symbolisiert.

Amazon (UK) hat zwei seitliche Spalten und die Produkte, die zentral in 3 zusätzlichen Spalten geordnet werden.

Es funktioniert, weil der Zweck jeder Spalte klar wird. Die linke Spalte ist definitiv die Navigation; die rechte Spalte ist „anderer Stuff“. Die Produkte in der Mitte werden klar durch white-space unterteilt und getrennt.

Popurls.com enthält einen Haufen Pic-n-Mix Information. Hot Topics von Digg oder del.icio.us werden aufgeführt, wobei das 3 Spalten-Layout strikt eingehalten wird.

Weiter unten hat es Thumbnails von beliebten Flick-Fotos oder Youtube-Videos. Hier hat es mehrere Spalten, aber das ist nicht weiter schlimm, denn das Auge überfliegt die Bilder bloss. Es existiert ein Unterschied zwischen Text und Bildern.

Und hier eine Seite, wo es schief läuft

Die Seite All Things Web 2.0 benutzt zwei Seitenspalten und zwei zentrierte Spalten.

Das stiftet bereits einmal Verwirrung. Man weiss nicht genau, wo man hinschauen soll. Desweiteren ist der grau in graue Hintergrund äusserst unklug gewählt. Anders als bei Amazon wird nicht klar, welcher Element bzw. welche Spalte für was zuständig ist.

4. Markanter Header

Das bedeutet, dass man den oberen Bereich der Webseite (das Logo und die Navigation) klar unterscheidbar vom Rest der Seite gestalten soll.

Selbstverständlich ist diese Einsicht nicht neu. Man hat Seiten schon immer so gestaltet. Nur achtet man nun noch mehr darauf, denn Header designmässig klar vom Content abzutrennen.

Schau dir einmal an, wie klar sich die Header der folgenden Webpage-Thumbnails vom Content abgrenzen.

Warum markante Header gut sind

Der obere Abschnitt sagt, dass hier der Header ist . Klingt offensichtlich, aber es fühlt gut an zu wissen, wo die Seite beginnt.

Der Webseitenbesuch beginnt mit einem klaren und deutlichen Statement im Header der Seite. Das ist der 2.0 Geist. Wir mögen starke, simple und herausstechende Aussagen.

2 Dieser Header enthalten nur das Logo (Protolize, Mediconmedia), 1 hat bloss eine Navigation (Crossconnector), und die verbleibenden 3 beides.

Die Schwäche von Crossconnector liegt meiner Ansicht nach darin, dass das Logo nach der Navigation kommt. Ich bevorzuge es, wenn das Logo schön sichtbar zuoberst ist, wie bei SimpleBits.

Wann und wie man einen eindeutigen Header benutzt

Auf jeder Webseite sollte das Logo und die Navigation offensichtlich, herausstechend und übersichtlich sein.

Es ist deshalb eine gute Idee im oberen Teil der Seite für das Logo und die Navigation Platz zu schaffen.

Setz dein Logo immer in den obersten Teil deiner Seite. Und gleich danach die Main-Navigation.

Wie bereits erwähnt, sollte sich der Header vom Rest der Seite unterscheiden. Eine Möglichkeit ist es, einen starken Farbkontrast zwischen Header und Contentbereich zu schaffen, aber es gibt auch andere Lösungsansätze.

Hier sind zwei Beispiele wo der Header mit einer Dicken Linie (dem Navigationsblock) vom Content getrennt wird, anstatt einfach eines Farbkontrasts.

Und hier ist das Logo einfach klar ausserhalb des Main-Content Bereichs platziert worden.

5. Sich klar abgrenzende Bereiche

Im anbetracht des klar abgegrenzten Head-Bereichs, wirst dass viele Webseiten in klar definierte Bereiche unterteilt sind:

Navigation

Hintergrund

Main-Content Bereich

Other Stuff

Hinweise / Crosslinks

Es ist möglich eine Webseite so zu designen, dass die verschiedenen Bereiche aufgrund derer Abgrenzung sofort sichtbar werden.

Am Einfachsten tut man dies, indem man starke Farben benutzt.

Weisser Raum kann aber genauso wirkungsvoll sein.

Die Gefahr von starken Farben ist, dass sie die Aufmerksamkeit des Auges auf sich zieht und der Besucher von anderen relevanten Inhalten abgelenkt wird.

Ich denke, dass es für den Leser am angenehmsten ist, wenn man sauber gepflegten Content auf white-space platziert. Es ist einfach ein angenehmeres Surf-Erlebnis.

6. Eine simple Navigation

Permanente Navigation - die Navigation, die auf jedem deiner Seiten bzw. deinem Template auftaucht, sollte einfach zu interpretiere, einfach zu orten und einfach aufzuwählen sein.

In 2.0 Designs sind die permanenten Navigationen gross, fett, sauber und offensichtlich

Inline Hyperlinks (Links innerhalb des Textes) unterscheiden sich typischerweise klar vom restlichen Text

Warum einfache Navigationen besser sind

Der Besucher muss die Navigation klar identifizieren können, denn sie teilt ihm wichtige Dinge mit:

Wo sich der Besucher gerade befindet

Welche anderen Unterseiten er besuchen kann

Und welche Möglichkeiten er hat, um Dienste zu nutzen bzw. um mit der Seite zu interagieren

Nach der Grundregel der Einfachheit dem Vermeiden von unnötigem, kann man die Navigation am Besten simpel halten, indem man:

Die permanente Navigation klar ausserhalb des Texts positionniert

Die Navigation räumlich vom Content mit Farben, Farbton und Formen abtrennen

Die Navigationselemente gross und herausstechend designen

Die Links in der Navigation mit eindeutigen Bezeichnungen kennzeichnen

Wie man seine Navigation simpel hält

Erinnere dich einfach an die Grundregel: Die Navigation soll klar unterscheidbar sind von allem, was nicht mit der Navigation zu tun hat.

Befolge einfach die obigen Anweisungen; Räumliche Trennung durch Farbe und Formen.

Inline Links, also Links im Text sollten sich auch klar vom restlichen Text abheben.

Schau dir einmal die folgenden Snippets an. Hier ist absolut klar, was ein Link ist und was nicht.

7. Auffallende Logos

Ein klares, fettes und starkes Logo - eine Aussage über Haltung, Tonlage und der erste Eindruck - wird durch ein fettes Logo unterstrichen.

Hier sind einige Logos (100% grösse). Web 2.0 Logos neigen dazu, ziemlich gross zu sein, in übereinstimmung mit den allgemeinen Web 2.0 Grundregeln.

Warum?

Starke, fette Firmenzeichen sagen, dass „dieses ist, wer wir sind.“ in einer Weise glaubwürdigen Art und Weise.

Wann und wie?

Es ist schwierig zu sagen, wie man ein gutes Logo kreiert. Vielleicht kurz…

Dein Logo sollte:

in seinem Hauptkontext und in anderen (wie Flyer oder T-Shirts?) eine gute Figur abgeben.

erkennbar und sich von anderen Logos abheben

Beschaffenheit und Qualitäten deiner Marke auf den ersten Blick klarstellen

8. Grösserer Text

Viele Web 2.0 Webseite haben einen grösseren Text, verglichen mit älteren Webseiten.

Wenn du den gleichen Platz mit weniger „Material“ füllst, hast du mehr Raum.

Wenn du mehr Platz hast, kannst du wichtigere Elemente grösser als die weniger wichtigen machen.

Grössere Elemente werden besser wahrgenommen. Dieser Effekt wird schon seit Generationen im Druckdesign auf überschriften, Titelblättern und Schlagzeilen verwendet.

Grösserer Text sticht nicht nur heraus, er macht den Inhalt auch für mehrere zugänglich. Es geht hier nicht nur um Menschen mit schlechten Augen, sondern auch um Besucher, denen die Sonne auf den Monitor scheint oder übermüdete Personen usw. Denk einmal drüber nach, das sind eine ganze Menge Leute!

Wann und wie man grösseren Text benutzt

Grosser Text macht die Seite für viele Leser zugänglich. So kann es nur eine gute Sache sein!

Selbstverständlich ist Grösse relativ. Du kannst nicht einfach eine normale Seite nehmen und den Text grösser machen. Das kommt nicht gut heraus!

Um grossen Text benutzen zu können, muss man ein Design von unnötigem entrümpeln.

Du solltest dir auch überlegen, weshalb du eine Textstelle grösser als die Andere machst. Und der Text muss sinnvoll und nützlich sein. Es macht keinen Sinn einfach einen grossen Text hinzupflanzen, nur weil es OH–so 2.0 ist!

Wenn du eine Menge, relativ gleichwertiger Informationen hast, dann kannst du die Schrift auch klein belassen.

9. Fetter Lead-Text

Führend an vom grossen Textthema, führen viele Aufstellungsorte mit starken Alltext Schlagzeile Beschreibungen.

Diese legen normalerweise USP des Aufstellungsortes, Aufzug Taktabstand oder Hauptanzeige dar.

Sie neigen dazu, graphische zu sein. Der Grund für dieses ist, dass Entwerfer eine Menge Steuerung über der Sichtauswirkung der Seite wünschen, besonders früh an in einer Grasenerfahrung.

Wann und wie man einen fetten Lead-Text verwendet

Nur verwenden, wenn du wirklich etwas Wichtiges zu sagen hast.

Wenn du eine einfache Anzeige hast, die du zuerst gesehen werden soll, dann mach aus ihr eine überschrift. Hebe sie deutlich vom Hintergrund ab.

10. Ins Auge stechende Farben

Helle, starke Farben stechen ins Auge. Benutze sie, um die Seite in klare Abschnitte zu unterteilen und um wichtige Elemente hervorzuheben.

Wenn du ein einfach aufgebautes Design hast, kannst du ein wenig intensive Farbe verwenden, um Bereiche, die von Interesse sind hervorzuheben und um die Aufmerksamkeit des Besuchers auf sie zu lenken.

Die Treo Mobile Website verwendet 3 Bereiche mit starken Farben, um diese deutlich zu kennzeichnen.

Die Hintergrundfarbe (weiss) ist passiv und macht klar, was der Hauptinhalt darstellt und was nicht. Die grossen fetten Titel erklären, was in jeder Kategorie ist und d kannst dich entscheiden, wohin du möchtest.

Colorschemer unterteilt die Seite mit Bändern der intensiven, hellen, freundlichen Farbe, Satz gegen einen Nullhintergrund.

Apples Design hat immer schon eine ausgeglichene Kombination zwischen Kontrasten, reichhaltigen Effekten und der Farbe verwendet, um das Auge zu erfreuen.

Meiner Meinung nach ist es eine der bestdesignten Webseiten, die es gibt.

In diesem Bild werden die intensiven dunklen Bereiche und starke Farben genau dort verwenden, wohin der Besucher schauen soll. Der wichtige Content wird hervorgehoben.

Farbe ist auch ein gutes Mittel, um die von einer Marke vermittelten Werte zu kommunizieren.

Hier ist die Farbe nicht hell, aber sie ist stark, hauptsächlich weil viel Grün verwendet wurde.

Dieses Design verwendet Grün, um die Werte „Qualität“ und „Gesundheit“ zu vermitteln.

Die Betreiber dieser Webseite verkaufen Outdoor-Kleider exklusiv für Frauen. Die gewählten Farbtöne sprechen die (gemäss Klischee) Persönlichkeit der Frau an.

Achte darauf, dass du um wichtige Elemente herum keine intensiven Farben verwendest.

Hier lenkt der Hintergrundfarbverlauf und die aufeinander gepappten Grafikelemente im Content-Bereich vom eigentlich wichtigen ab.

Die Aurum Newtech Webseite riskiert dasselbe. Nur ist die Hintergrundfarbe gerade genug blass, sodass man Content noch deutlich von Hintergrund unterscheiden kann.

Auch die grosse und dicke Content-Schrift lenkt die Aufmerksamkeit weg vom “attraktiven” Hintergrund.

Farbe sparsam verwenden
Wenn du starke Farben verwendest, um das Auge anzuziehen, dann funktioniert das nur, wenn du für genügend White-Space sorgst. Der Kontrast ist wichtig!

Wenn alles auf einer Seite in dein Auge springt, verliert das Auge den überblick und du nimmst die Seite als unruhig und chaotisch wahr. Du wirst sie schnell wieder verlassen!

11. Reich gestaltete Oberflächen

Die meisten Web 2.0 Seiten verwenden sorgfältig subtile 3D Effekte, um das qualitative Gefühl des Designs zu erhöhen.

Wir wissen alle, dass sich diese kleinen Buttons angenehm ansehen lassen, aber wissen meist nicht weshalb.

Realistische Interfaces, versehen mit Schatten, Farbverläufen und Reflexionen machen das Interface echter, stabiler und qualitativ hochwertiger.

Sie erinnern uns auch an bestimmte Tast- oder ästhetische Qualitäten der echten Gegenstände, wie Wassertröpfchen, glänzende Plastikfolien und Marmorfussböden.

Wann und wie man solche Oberflächen benutzt

Die goldene Regel ist, sie sorgsam zu verwenden und es nicht zu übertreibe.

Wie ich im Tutorial 3D Effekte erkläre, sollten diese Effekte nicht auf alles angewendet werden.

Wie alle Techniken kann eine reich gestaltete Oberfläche den visuellen Wert des Designs erhöhen, wenn sie sorgfältig und passend verwendet werden.

Wenn deine Navigation/Icons/Logos/Layout grundlegend scheisse sind, bringen dir ein Paar 3D-Effekte nicht viel. Bring zuerst die Basics in Ordnung!

Ferner solltest du beim Designen der Buttons darauf achten, dass die Lichtquelle konstant bleibt, da es ansonsten zu unschönen Verwirrungen kommt.

Es kann bei 3D-Elementen so wirken, als ob Buttons aus der Seite herausstehen. Das funktioniert aber nur, wenn der Rest der Seite relativ flach wirkt.

Vermeide es zu versuchen, dein gesamtes Design 3D-artig zu machen, weil:

Es ist mehr Arbeit

Es erhöht die Ladezeit der Seite

Es ist unnötig. 3D effekte sollte man nur dort verwenden, wo man die Aufmerksamkeit des Besuchers hinlenken will

12. Farbverläufe

Web 2.0

Designs spielen mit Farbverläufen.

Weshalb Farbverläufe so nützlich sind

Farbverläufe bereichern Felder, die ansonsten matt und langweilig aussehen würden.

Sie können die Illusion einer nicht-flachen Oberfläche erzeugen. Wie auf Alex Dukals Portfolio.

Farbverläufe können auch verwendet werden, um einen Farbton in den Andern übergehen zu lassen. Das ist gut, um eine gewisse Stimmung zu kreieren.

In den Seitenhintergründen können sie auch einen Distanzeffekt hervorrufen.

Ein weit verbreiter Farbverlauf ist der blau-nach-weiss verlauf, wobei der Vordergrund zu schweben scheint.

Sie sind an der Oberseite der Webseite im allgemeinen verwendet. Sie helfen, die Grenze des sichtbaren Bereichs zu bezeichnen.

Farbverläufe sind auch oft in 3D-Buttons wiederzufinden.

Merke, dass Farbverläufe normalerweise gut harmonieren, wenn sie mit ähnlichen Farbtönen kombiniert werden.

Auf der Curve 2 Webseite sind die Farbverläufe wirkungsvoller, weil jede neben einem blassen weissen oder grauen Abschnitt in Position gebracht wird.

Es ist üblich bei Farbverläufen zu finden, welche den Grundfarbton verändern (mit Mischeffekten in PS (Color Burn / Overlay), die subtil unterschiedliche Farben verursachen.

Hier ist die hervorgehobene grüne Farbe wärmer und freundlicher als die dunklere Farbe. Der gesamte Effekt macht die Seite weicher und reichhaltiger.

13. Lichtreflexionen

Die Illusion der Reflexion ist eine der allgemeinsten Farbverlauf-Anwendungen.

Diese kommen allgemein in 2 Arten vor:

Farbhighlight verursacht durch das Licht, das sich auf einer glänzenden Oberfläche reflektiert

Der Shiny-Table-Effekt

Glänzende Highlights

Realistische Effekte mit Wassertröpfchen, Glas, glänzendem Plastik sind seit den letzten paar Jahren sehr bekannt geworden.

Ich weiss nicht genau, wo dieser Trend seinen Anfang nahm. Es ist aber gut möglich, dass Apples Aqua OSX Interface etwas damit zu tun hat.

Sind hier einige Beispiele:

Die klassischen Apple.com glänzenden Plastiktabs. Immer noch in Verwendung heute. Diese benutzen eine Lichtquelle über den Tabs, kombiniert mit einem inneren, verbreiteten Glühen, das den Plastikeffekt verursacht.

Diese Tabs, von einer meiner neuen Designs, haben einen polierten (starkes weisses Highlight) Carbonfaser -Look. Der Carboneffekt kommt vor allem durch die grünglühenden Diagonalen Pixel im Button zustande.

Noch mehr Plastik! Schau mal wie die Reflexionen am Rand der Form herunterfallen, die die Illusion gerundeten Ränder verursachen.

ähnlicher Effekt auf eine quadratische Form sieht wie ein Aufkleber aus. Der nicht-horizontale Winkel wirkt dynamisch.

Dieser glänzende Button von cafepress.com verwendet eine abgerundete Reflexion, die eine helle Lichtquelle andeutet, die auf eine runde Oberfläche trifft.

Diese Taste von Net Host Mediatemples hat eher eine diffuse Reflexion und deutet damit auf mattes Glas hin.

Der glänzende Untergrund

Wieder hervorgegangen von Apple. Dieses ist wirklich ein netter Effekt, der jetzt so oft benutzt wird, dass er schon fast schon overused wirkt.

Bei Webdesignern ändert sich das vorherrschende “To-Be” schneller, als bei den normalen Usern. Viele mögen diesen Effekt zwar noch cool finden, obwohl er schon längst überholt ist.

Der Standard Apple Look. Greyed-out und langsam verblassend auf einem weissen Untergrund.

Auf einem farbigen Hintergrund

Zu jeder Seite ausgeblendet.

Extremerer Winkel und ein reicher überlagerter Effekt, der die Farbe des festen Gegenstandes reflektiert.

Hier eine Anleitung, wie man das Ganze macht.

14. Süsse Icons

Icons spielen eine wichtige Rolle im Web 2.0 Design. Heute verwenden wir wenigere, dafür aber bessere Icons, die mehr auffallen. Icons können nützlich sein, wenn sie leicht erkennbar sind und eine klare Bedeutung haben. In vielen anderen Fällen, ist ein einfacher Text wirkungsvoller.

Früher waren Webseiten oft vollgestopft mit Icons. Es schien, dass jeder unbedingt Icons für eine Navigation oder Tabs wollte. Jetzt benutzen wir weitgehend Textnavigationen und verunreinigen die Seite nicht mehr mit massenhaft Icons.

Dort wo Web 2.0 Designer Icons verwenden, befinden sich meistens High-Value-Spots. Einfachere, geräumigere Designs verlangen weniger Aufmerksamkeit und lassen Platz für Icons.

Einige Beispiele:

Simpel und sauber

Nett und schrullig

Du musst nicht notwendigerweise kleine Hügel verwenden

Detailreich

Wohl inspiriert durch Mac OSX. Bei Enhanced Labs gibt es eine tolle Showcase.

15. Der Web 2.0 Badge

Das sind die Sternartigen Badges, die du bei vielen Webseiten vorfindest. Sie gieren nach deiner Aufmerksamkeit.

Sie funktionieren ähnlich wie die Neuheits-Aufkleber im Supermarkt. Die ersten Web 2.0 Webseiten wollten etwas Neues verkündigen, doch mittlerweile wirkt der Badge schon fast etwas abgelutscht, da jeder ihn auf seiner Webseite benutzt.

Die Badges sind eine wirklich gute Sache; doch sie sollten nur dann verwendet werden, wenn man auf etwas wirklich wichtiges aufmerksam machen will.

Ich würde dir empfehlen, ihn höchstens einmal pro Seite zu verwenden.

Wie auch immer ist dieser Badge wohl überbeansprucht und wird wohl schon bald wieder von vielen Webseiten verschwinden.

Abhilfe

Dabei wäre es so einfach: KISS - keep it simple and stupid. Die Präsentation ist dann gut gelungen, wenn die Zuhörer noch mehr Informationen vom Vortragenden wissen möchten. Am einfachsten erreicht man dies durch einfache Botschaften, die die Zuhörer auf der emotionalen Ebene abholen und neugierig machen.

| View | Upload your own

Könnte. Wenn es nur nicht so verdammt schwierig wäre, diese emotionalen Botschaften überhaupt aus den üblicherweise trockenen Inhalten herauszuschälen…

iexplore -k www.schwarzundzuercher.com


Dann sieht man schwarz & zuercher plötzlich ohne jegliche Adressleisten oder Menübars.

Ach ja, raus kommt man mit Alt+F4.