Sie galten ja schon als ausgestorben. Und keiner wollte sie mehr haben.

Vor sehr vielen Jahren aber, so kurz nach den Anfängen des Internets, zu Zeiten des kommerziellen Durchbruchs waren sie allgegenwärtig:
Zuerst die animierten GIFs in Form von drehenden Logos und blinkenden Menüs und Buttons. Später dann die Flash-Webseiten und die damit einhergenden umfangreichen Animationen.

Die Flash-Technologie spielt heute keine Rolle mehr. Animationen aber wieder. Jahrelang waren sie eine Randerscheinung, aber inzwischen kommt kaum eine moderne Webseite ohne Animationen aus.

Was für ein Comeback – und sie sind wiedergekommen, um zu bleiben.

Animationen waren deshalb viele Jahre verpönt, weil sie als Spielerei verstanden und eingesetzt wurden. Als nettes Gimmick, was wenig Nutzen, aber dafür viel „Show“ bietet. Im Endeffekt aber den Besucher von der Bedienung abhält, bzw. sie unnötig erschwert.

Klar, dass ist auch heute noch auf Webseiten zu finden. Viel öfters aber werden Animationen eingesetzt, um die Bedienung zu erleichtern und um die User-Experience zu erhöhen. Animationen machen Webseiten ein Stück weit lebendiger.

jQuery und weitere JavaScript-Frameworks sorgten dafür, dass sich Animations-Effekte fast schon inflationsartig ausgebreitet haben. Und in den letzten Jahren ist dank CSS3 der Spielraum an Animationsmöglichkeiten erweitert worden.

CSS3 bietet also, was vorher nur mit JavaScript möglich war und geht sogar noch einen Schritt weiter: Recht schnell und einfach Animationen zu erstellen.

Dieser Artikel soll die Möglichkeiten von CSS3 aufzeigen schnell und einfach interessante Animationen und Effekte zu erstellen. Neben der technischen Umsetzung werden auch einige Beispiele und Einsatzgebiete vorgestellt.

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Es ist ein bisschen wie das Henne-Ei-Problem!

Was ist zuerst da: Der Inhalt oder das Design?

So sieht zumindest der Arbeitsalltag vieler Webdesigner & Webagenturen aus:

  • Liefert der Kunde die Inhalte bevor ich mit dem Design anfange? Kann ich also das Design basierend auf den Inhalten gestalten?
  • Oder wartet der Kunde auf das Design, damit er weiß, wofür er Inhalte erstellen soll?

So oder so, keine der beiden Varianten führt in den meisten Fällen zu einem befriedigenden Ergebnis.

Erstellt der Kunde die Inhalte zuerst, weiß der Designer wenigstens WAS er zu gestalten hat. Aber der Kunde hängt zu oft in der Luft. Er weiß oft gar nicht um die Möglichkeiten der möglichen Inhaltsgestaltung und Interaktion. Eine Bleiwüste in Word geschrieben, ist dann häufig das Resultat.

Darf der Designer zuerst gestalten, weil der Kunde doch so gerne „zuerst etwas sehen möchte“, dann müssen Platzhalter-Inhalte herhalten – Lorem Ipsum usw.
Der Kunde weiß dann wenigstens genau, welche Inhalte er erzeugen soll und wie viel.

Das Design kann dann zwar auch nett aussehen, aber es wird wohl kaum zu den späteren Inhalten passen. Denn in diesem Falle wäre das Design reine Fassade. Völlig losgelöst von den Inhalten.

Erst Inhalte, dann Design oder andersherum,
oder wie jetzt?

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Akzente zu setzen mit Farben und Bildern kann jeder.

Ok, fast jeder. Aber darum soll es hier nicht gehen. Sondern um die Typografie, die Schriftgestaltung. Darum mit Texten Akzente zu setzen.

Die Gestaltung des Textes ist ein elementares Element für eine effektive Webseite. Dies beginnt zuerst bei der Wahl der richtigen Schriftarten.

Dazu kommen dann passende Textfarben, Schriftgrößen, Zeilenlängen- und abstände. Fertig. Fertig? Nicht ganz. Denn jetzt kommt die hohe Kunst der Typografie!

Die kleinen Auszeichnungen. Die feinen typografischen Markierungen.

Die detaillierten Textgestaltungen, die vielleicht auch ein gutes Design von einem sehr guten unterscheiden.

Man könnte sie als Teil der Mikrotypografie bezeichnen, also als Detailtypografie.

Im folgenden stelle ich 10 unterschiedliche typografische Highlights vor, die jede Seite auflockern und typografisch verfeinern. Diese sorgen dafür, dass das Benutzungserlebnis erhöht wird.

Die meisten sind kein Hexenwerk und keine hoch trabende technische Wissenschaft, sondern lassen sich recht einfach mit wenigen HTML- & CSS-Anweisungen umsetzen. Sie alle sorgen aber für die besondere typografische Gestaltung, sie alle können den kleinen Unterschied ausmachen.

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Ich kann es nicht mehr sehen.

Ich kann nicht mehr sehen, wie sich Geschäftsmänner die Hände schütteln, glückliche Familien um die Wette strahlen und junge gutaussehende Angestellte in einer total entspannten Büro-Atmosphäre ein total lockeres Meeting halten.

Diese Bilder sehe ich täglich auf Webseiten.
Auf zu vielen Webseiten.

Aber eigentlich ein verschenktes Potential.

Zu den Fakten:

Bilder sprechen uns emotional an. Bilder sagen uns mehr, als es tausend Worte tun können. Bilder bleiben lange im Gedächtnis. Bilder wirken in Sekundenbruchteilen.

Alles richtig und auch gute Gründe, warum Bilder auf Webseiten gerne eingesetzt werden.

Zu oft sind Bilder aber auf Webseiten austauschbar geworden, gerade wenn – oder besser: weil – sie aus Bildkatalogen stammen. Für wenig Geld bekommt man hier professionelle Fotos ohne groß eingeschränkte Nutzungsrechte.

Eine Folge ist aber, dass viele dieser Bilder nun auf vielen Webseiten (oder auch anderen Kommunikationsmedien) im Einsatz sind:

Familien-Klischeebild

Ein typisches Klischeebild, wie ich es zu oft sehe.

Fast jedes Unternehmen hat die Idee von Bildern „mit jungen fröhlichen gutaussehenden Menschen, die nett zuammen vor dem Laptop sitzen und gemeinsam surfen oder ein entspanntes Meeting halten“ – oder so ähnlich. Das mag nicht nur oft fernab jeglicher Realität sein, es ist auch zu oft erkennbar, dass diese Bilder nicht authentisch sind.

Mit Eigenständigkeit und einem Wiedererkennungeffekt haben diese Bilder nichts gemein. Schade eigentlich.

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Was bieten die mir?

Warum soll ich gerade hier kaufen?

Warum soll ich denen vertrauen?

Das sind typische Fragen, die sich ein Besucher einer Webseite – häufig unbewusst – stellt. Vor allem, wenn der Besucher nicht nur ein bisschen „rumschmöckern“ will und auf der Suche nach ein bisschen Unterhaltung ist.

Deine Kunden und die Kunden deiner Kunden sind aber nicht an reinem Entertainment interessiert. Sie sind Geschäftsleute und auf der Suche nach einem guten Webdesigner, Grafiker, Blogger, Coach, Finanzberater, Therapeut oder Dienstleister für was auch immer.

Sie wollen und müssen genau abwägen: Was muss ich bezahlen und was bekomme ich dafür. Welcher Anbieter ist der passende für mich/für uns.

Und man kennt das ja von sich selber: Bin ich auf der Suche nach einer Firma, z.B. einem Maler, weil die Außenfassade unseres Hauses gestrichen werden muss, dann besuche ich mehrere Maler-Webseiten. Ich versuche mir innerhalb weniger Sekunden einen Überblick zu verschaffen. Eben unbewusst anhand der Fragen:
„Wer sind die?“
„Was können die?“
„Bieten, die das an, was ich suche?“

Finde ich hier nicht sehr schnell eine befriedigende Antwort, bin ich weg!

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Am Anfang war das Licht. Und damit auch die Farbe.

Ohne Licht würden wir keine Farben wahrnehmen und ohne Farben wäre die Welt doch… farblos.

Unterschiede in der Helligkeit und dem Farbton lassen uns die Welt erst visuell erfahrbar machen und Gegenstände differenzieren.

Wir orientieren uns anhand von Farben. Schon unsere Vorfahren in der freien Natur, wir heute in der modernen Großstadt (Ampeln, Schilder usw.).

Auch für Unternehmen, egal ob klein oder groß, ist Farbe ein wichtiges Mittel der Wiedererkennung.

Farben im Alltag

Und auch kein Screendesign kommt ohne den Farbeinsatz und einen ausreichenden Farbkontrast aus.

In diesem Beitrag gehe ich auf die Wirkung von Farben und Farbkontrasten ein. Deren Kenntnisse sind die Grundlage für einen gezielten Farbeinsatz im Screendesign.

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Früher wurden Pferde und Rinder gebrandmarkt.

Mit Hilfe eines Brandeisens wurde ihnen ein Zeichen auf die Haut eingebrannt. Durch diese Symbole oder Buchstaben wurde ein Eigentumsnachweis oder die Rassezugehörigkeit dokumentiert.

Dieses Brandzeichen sollte eine klare Zuordnung und Wiedererkennung der Tiere ermöglichen.

Heutzutage haben Unternehmen, aber auch Selbständige und Freiberufler ein Brandzeichen. Und damit meine ich nicht Tatoos. Das Logo ist schon eher ein Brandzeichen. Auch weitere Gestaltungselemente wie Farben, Bilder und die Typografie gehören dazu. Zusammen ergeben sie das sogenannte Branding.

Und genau wie bei den Pferden ermöglicht das Branding die Zuordnung und Wiedererkennung eines Unternehmens.

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Bilder sind gut.

Bilder auf Webseiten sind gut.

Bilder sprechen uns emotional an. Sie werden schneller wahrgenommen und sie wirken viel schneller als Text. Und vor allem machen Sie ein Design interessant.

Soweit, so einfach und so gut.

Die große Frage ist dann, was für Bildmotive genommen werden sollen.

Stehen analoge Produkte zur Verfügung, ergeben sich die Motive oft von selbst.

Wenn nicht, dann wird oft genug auf die Fotostockagenturen zurückgegriffen. Für wenig Geld, bekommt man hier gute Qualität, also professionelle Fotos ohne groß eingeschränkte Nutzungsrechte.

Der eigentliche Preis bei Bildern aus Stockagenturen ist die fehlende Individualität.

Kommt dann noch Zeitmangel bei der Suche und/oder fehlende Kreativität dazu, dann landet man schnell bei den typischen Bildmotiven.

Typische Bildmotive, die auf sehr sehr vielen Webseiten eingesetzt werden.

Man könnte auch sagen Bildmotive, mit denen man nicht viel falsch machen kann, weil sie irgendwie fast immer passen. Freundlich, nett, schick…

Oder kann man gerade deswegen viel falsch machen?
Gerade weil sie so oft passen und gerade weil sie auf so vielen Webseiten im Einsatz sind, sind sie „verbraucht“.

Es sind Klischeebilder! Man könnte fast meinen, fernab jeglicher Realität!

Sie sind langweilig und eigentlich nichtssagend. Sie sind unpersönlich und unauthentisch. Mit Eigenständigkeit & Wiedererkennungeffekt haben diese Bilder selten etwas zu tun.

Im folgenden habe ich eine Liste meiner ganz persönlichen Highlights von Klischeebildern zusammengestellt, auf die Du in Deinen Screendesigns besser verzichten solltest:

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Pantone kürt die Farbe des Jahres.

Jedes Jahr.

Pantone ist ein Hersteller von Sonderfarben für den Druck. Seit 15 Jahren küren Sie nun die Pantone-Farbe des Jahres. Marsala nennt sich 2015 dieses erdige Weinrot, ein „kräftiger, aber stilvoller Ton“, der „Geist, Körper und Seele bereichert“.

Ein Marketing-Gag, klar.

Pantone-Farbe des Jahres "Marsala"

Die Pantone-Farbe des Jahres 2015 „Marsala“

Die Idee einer Farbe des Jahres ist aber nicht blöd – also zumindest Vermarktungstechnisch, inhaltlich hat sie wohl so gar keinen Sinn. Aber muss es ja auch nicht.

Wo sind die Webdesign-Farben des Jahres?

Nur warum kürt keiner des Webdesigners Farben?

Es gibt auch im Webdesign Farbtrends. Also Farben, die in diesem Jahr häufiger eingesetzt werden. Farben, die in den letzten Jahren oft eine nicht so große Rolle spielten.

Farben, die vielleicht auch nicht auf „Jedermanns“-Seite zu finden sind, sondern auf diesen modernen Material-Flat-Design-Seiten. Auf Seiten, die schlicht sind, natürlich responsiv und vielleicht mit dem ein oder anderen netten jQuery-Animations-Effekt aufwarten.

Ich habe mich auf die Suche gemacht nach diese Farbtrends.

Und was soll ich sagen, ich habe welche gefunden!

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt:

Webdesign-Trends einzusetzen, heißt up-to-date zu sein.

Eigentlich.

Webdesign-Trends einzusetzen, heißt eine (vermeintlich) moderne Webseite zu gestalten. Es gibt so viele Design-Trends, die uns tagtäglich auf unzähligen Webseiten begegnen. Häufig werden diese Trends von uns Webdesignern kopiert, manchmal bewusst, oft aber auch unbewusst.

Aber nicht immer sind diese Trends sinnvoll!

Im folgenden stelle ich sieben von ihnen vor, die zwar nicht grundsätzlich schlecht sind, aber leider zu oft dazu führen, dass sich die Webseite schlechter bedienen lässt.

Weiterlesen »

Weiterempfehlen ausdrücklich erlaubt: