ESPRIT Weihnachtsgrüße

Los geht es mit einer Aktion von ESPRIT, bei der man eine persönliche Weihnachtskarte gestalten und zusammen mit einem 10%-Gutschein an seine Freunde senden kann. Nach Auswahl einer Kartenvorlage und Eingabe des Textes kann die Karte mit zahlreichen Elementen wie Sternen oder Schneeflocken dekoriert werden, die einfach per Drag and Drop hinein gezogen werden. Verknüpft man die Aktion mit seinem Facebook-Profil, kann man zum Schluss noch sein Profilfoto oder ein anderes Bild auf der Karte platzieren. Die Aktion wurde sehr schön umgesetzt, hier überzeugen sowohl Gestaltung als auch Usability.

dm-drogerie markt Facebook-Adventskalender

Facebook-Adventskalender gibt es in diesem Jahr viele – einen besonders schönen und kreativen kann man auf der Fanpage von dm-drogerie markt bestaunen. Jeden Tag öffnet sich ein Türchen und man hat die Chance beim Waschbären-Glücksrad zu gewinnen. Drückt man im richtigen Moment auf den STOP-Button und schafft es dem Waschbären die Mütze aufzusetzen, gewinnt man einen der 50 Tagespreise.

Coca-Cola Mission Weihnachtsfreude

Coca-Cola hat die Schneekugel-Aktion vom letzten Jahr neu aufgelegt und spendet auch in diesem Jahr wieder für jeden gestalteten Weihnachtsgruß 1 Euro an die Hilfsorganisation “Ein Herz für Kinder”. Diesmal stehen sechs verschiedene Hintergrundszenarien zur Auswahl, vor die man bis zu vier Männchen platzieren kann. Für jedes Männchen kann man ein Outfit auswählen und ein Foto für das Gesicht hochladen. Zum Schluss kann man dann zum Beispiel ein paar nette MOSAIQ Kollegen tanzen lassen ;-)

s.Oliver X-MAS Gewinnspiel

Auch s.Oliver hat sich dieses Jahr wieder etwas feines ausgedacht. Diesmal ist es kein klassischer Adventskalender, sondern ein kreatives Gewinnspiel. An jedem der 24 Tage gibt es ein Spiel, bei dem man Sterne sammeln kann. Je öfter man spielt und je mehr Sterne man sammelt, desto größer sind natürlich die Chancen, einen der Preise abzusahnen. Schöne Idee und tolle Umsetzung!

NIVEA Adventskalender

Bei NIVEA gibt es dieses Jahr einen netten Adventskalender in Form eines Weihnachtsbaums, an dem 24 Kugeln baumeln, von denen jeden Tag eine geöffnet werden kann. Mit ein wenig Glück kann man einen der Tagespreise gewinnen.

hessnatur Adventskalender

Schön und gut gelungen ist auch der Adventskalender von hessnatur – vor allem die verspielte Navigation mit den hängenden Plätzchen, die mit der Maus gesteuert wird. Einfach mal ausprobieren! :-)

AXE Excite Adventskalender

Zum Schluss noch ein Schmankerl für die Männerwelt: Der sexy Video-Adventskalender von AXE Excite. Ähnlich wie beim AXE Dark Temptation Adventskalender im Jahr 2010 entscheiden auch in diesem Jahr wieder die User, was in den Adventskalender kommt. Eine als Engel verkleidete Blondine darf jeden Tag ein Päckchen auspacken – den Inhalt schlagen die User vor und die Idee mit den meisten Stimmen wird verfilmt. Hierzu muss man sagen, dass hinter der Aktion wirklich ein großer Aufwand steckt: Innerhalb kürzester Zeit muss eine Idee generiert und verfilmt werden, danach folgen Videoschnitt und Post-Production – und das alles 24 Mal!

Welche Aktion gefällt euch am besten?

Habt ihr einen Favoriten oder kennt ihr noch andere tolle Aktionen aus diesem Jahr? Bei welchen Aktionen macht ihr mit und welche sprechen euch eher nicht an?

Ziel war es, den exklusiven Charakter der Marke Breuninger auch ins Web zu übertragen. Unser Anspruch: Die Seite sollte modern und zugleich zeitlos sein. Wir wollten vieles vereinfachen und die Seite mit Stil und Fingerspitzengefühl auf ein neues Niveau heben. Das Ergebnis: Eine Seite mit neuer Navigation, Bildsprache und Anmutung, die sich mehr an internationalen Modemarken aus dem Luxussegment orientiert als an klassischen Warenhäusern. Fly-Out-Animationen, viel Weißraum und großformatige Bilder zeigen schon beim ersten Klick, was einen bei Breuninger vor Ort erwartet: Edle Mode in einem edlen Ambiente.

Neu auf der Website ist die Rubrik “Events”, der Pressebereich wurde deutlich vergrößert und der Bereich “Historie” zur Feier des 130. komplett runderneuert.

Jetzt ist die Seite online und gemeinsam mit Breuninger freuen wir uns, pünktlich zum 130. Unternehmensjubiläum, über den neuen, gelungenen Auftritt.

01 Design verbindet sich mit neuester Technologie

Heute erweitern technische Möglichkeiten ein gutes Design. Es geht nicht mehr darum statisch gut auszusehen, sondern auch schnell zu reagieren und dem Nutzer ein intuitives und interaktives Designerlebnis zu bieten:

Eine aussergewöhnliche Erlebnisreise

Mouseerlebnis mit Javascript

02 Der Durchbruch von HTML 5 und CSS 3

HTML 5 bietet viele beeindruckende Möglichkeiten, die zuvor nur in Flash möglich waren:

Zeicheneffekte mit HTML 5 ...

... und im Vergleich mit Flash

03 Mobile Ready

Statistiken zeigen, dass schon 2011 mehr Smartphones verkauft werden sollen als PCs. Der Tablet-Markt boomt, wobei Netbooks schon wieder fast veraltet sind. Man kann also davon ausgehen, dass zunehmend Webseiten auf verschiedenen mobilen Geräten wie Smartphones und Tablets betrachtet werden. D.h. auch Flashelemente sollten immer eine alternative statische Lösung bieten.

04 Flexible Auflösung

Eine optimale Auflösung gibt es in Zukunft nicht mehr. Designs müssen auf Smartphones, Tablets und Desktop-PCs funktionieren. Proportionen ändern sich und selbst eine festgelegte Scrollmarke ist unmöglich durch einfaches Drehen des Mediums.  Der Benutzer entscheidet in Zukunft selbst in welchem Format er Inhalte liest und das Design muss sich flexibel anpassen.

05 Touchscreen besitzt kein Mouse Over

So intuitiv und einfach: Das Touchscreen wird bald allgegenwärtig bei zahlreichen Smartphones, Tablets und nun auch bei einigen Desktop-PCs. Doch sie kennen keine Mouseover Effekte. Links müssen daher deutlich erkennbar sein und liebevolle Mouseover Effekte entfallen gänzlich.

06 Tiefenwirkung

3D Effekte erhalten Einzug in das Web, indem wir Elemente in verschiedenen Ebenen darstellen, räumliche Schatten, Überlagerungen oder kreisende Effekte, wie wir es bereits aus den Coverflows kennen. Ein einfaches und dennoch beeindruckendes Beispiel zeigt Nike:

3D Effekte bei Nike

Auch parallaxes Scrollen erzeugt die Wirkung von mehr Tiefe. Hier ein einfaches Beispiel für Parallaxes Scrollen im Hintergrund mittels CSS:

Parallaxes Scrollen mit CSS

... und ein Beispiel mit Flash

07 Großflächige Bild-Hintergründe

Nicht neu, jedoch immer wieder ein guter Eyecatcher:

Hochauflösende Hintergrundbilder als emotionaler Einstieg auf der Startseite

Flexibles Hintergrundbild mit statischem Menü

08 Hintergrund Textur

Neben großflächigen Bildern treten auch immer mehr greifbare Texturen in den Hintergrund eines Designs und verleihen diesem eine hochwertige und persönliche Note.

Dezente Hintergrundtextur

oder ausdrucksstarke Textur

09 Thumbnail Design

Google hat es eingeführt: die Thumbnail-Links. Äußerst hilfreich für externe Links:

Googles Thumbnail-Links

10 Live Feeds

Twitter und Facebook werden nun nicht mehr nur verlinkt, sondern Livefeeds werden direkt auf der Webseite eingefügt. Somit sind Informationen gesammelt auf der Webseite zu finden und die Webseite wirkt aktueller und persönlicher.

Live Feeds direkt auf der Webseite integriert

11 Individuellere & vielseitigere Domain-Endungen

Die Weave 01.2011 berichtet, dass 2011 in Deutschland neue Top Level Domains hinzukommen nach dem Muster .stadt oder .firma. Ab dem 30. Mai 2011 können diese dann bei der ICAN beantragt werden. Branchen-Domains wie .film und .hotel sind auch geplant.

12 Typographisches Design

Durch neue Technologie gibt es zunehmend die Möglichkeit verschiedene Schriften zu verwenden

Einsatz von großer Typo

13 Großflächiges Raster

Ein gut definiertes Raster ist im Design nichts Neues. Doch neuerdings sieht man auch Raster, die sich auf die komplette Breite anpassen, vollflächige Informationen einfach strukturiert:

Vollflächiges Raster

Was denkt ihr dazu?

Dies ist nur ein kleiner Ausblick in das was uns 2011 erwarten könnte.
Was denkt ihr über die neuen Trends? Gibt es Trends, die ihr schon lange nicht mehr sehen könnt, oder neue Funktionen, die ihr vermehrt im Internet sehen möchtet? Wir freuen uns auf euer Feedback.

Eine schöne Hilfe zur Inspiration für Designaufgaben bietet der Dienst Ideas von John Watson, welcher dem Benutzer auf Knopfdruck Zitate, Bilder, Farbkonstellationen, Songs, Videos, Bookmarks, Artikel und Tweets zu einem bestimmten Suchbegriff liefert. Dabei greift der Dienst unter anderem auf Quellen wie Flickr, YouTube, Last.fm oder Twitter zurück.

Ideen-Sammlung zum Thema “Herbst”

Der Dienst stellt in wenigen Sekunden Inspirationsmaterial aus ganz unterschiedlichen Kanälen zusammen und hilft somit bei der Entwicklung erster Ideen für ein Projekt.

Ein gutes Design verstärkt hierbei den Impuls zur Nutzung des Buttons. Das Magazin Smashingmagazin hat hierzu eine sehr gute Zusammenfassung verfasst, worauf zu achten ist:

1. Aufmerksamkeit durch Button-Größe
   Je größer ein Element der Webseite, desto wichtiger erscheint es. Call-to-action-Buttons sollten daher größer als andere ihn umgebende Elemente sein. Wenn mehrere Buttons vorhanden sind, sollte der (für das Unternehmen) wichtigere größer sein als alle restlichen Buttons.
2. Aufmerksamkeit durch prominente Platzierung
   Eine prominente Platzierung kann beispielsweise im Headerbereich oben oder in der absoluten Mitte der Inhaltsseite erreicht werden
3. Hervorheben durch Nutzung kontrastreicher Farben
   Starke, kontrastreiche Farben werden vom Auge sofort wahrgenommen. Hebt sich der Button gestalterisch von der restlichen Farbgebung ab wird die Aufmerksamkeit sofort darauf gelenkt.
4. Anbieten von alternativen Optionen
   Viele Webseiten verfolgen mehrere Konversionsziele und auch Besucher haben teilweise unterschiedliche Bedürfnisse: Der Eine möchte sofort bestellen – der andere erst noch weitere Informationen erhalten. Hier sollten den zwei Buttons unterschiedliche Gewichtung gegeben werden: Der “Kaufen” Button kann durch die bereits beschriebenen Maßnahmen (insbesondere farbliche Herorhebung) gegenüber dem weniger wichtigen Button hervorgehoben werden.
   
5. Aktionsaufforderung durch das Vermitteln von Dringlichkeit
   Ein einmaliges Angebot zu erhalten, was nur kurze Zeit zur Verfügung steht fördert die Aktionslust. Button-Bezeichnungen wie “Jetzt” oder Erklärung wie “Nur kurze Zeit”oder “Einführungspreis”vermittelt das Gefühl ein Schnäppchen zu machen – bei dem man besser früher als später zuschlägt
6. Einfachheit der Aktion transportieren
   Ein oft übersehener Punkt in der Gestaltung von Buttons (und Formularen).Erfährt der Besucher, dass die Anmeldung zum Newsletter nur 30 Sekunden dauert, ist die Hürde sich anzumelden um Einiges geringer.
7. Den Besucher darüber aufklären was zu erwarten ist
   Ganz klassische Kardinalfehler, der mir insbesondere bei Newslettern zuhauf begegnet. Viele Webseiten, Webshops, Online-Magazine bieten Newsletter an, aber sehr wenige klären mich darüber auf, was ich mit der Anmeldung wirklich zu erwarten habe (Vorteile, Inhalte, Rhythmus).

Das sind alles keine neuen, erstaunlichen Erkenntnisse – trotzdem werden sie nicht immer beherzigt – was zu Lasten der Konversionsraten geht.

Linktipps zum Weiterlesen mit vielen Beispielen:

Call to Action Buttons: Examples and Best Practices

80 Examples of Add to Cart Buttons for Design Inspiration

Add-to-Cart E-Book (deutsch)

Jakob Nielsen, bekannter Usability-Experte aus den USA, war von der ersten Stunde an dabei. Seit 25 Jahren beschäftigt er sich nun mit dem Thema Usability. Die Grundsätze in der Gestaltung benutzerfreundlichen Designs seien heute wie damals die gleichen geblieben. Seine Vorschläge für das Vorgehen:

• Konzentrieren Sie sich auf den Benutzer und betreiben Sie Feldforschung bevor Sie ein Design entwickeln
• Führen Sie empirische Usability-Studien während der Entwicklung durch.
• Nutzen Sie einen iterativen Ansatz im Design-Prozess

Was macht nun eine besonders benutzerfreundliches Design aus? Auch hier hat Jakob Nielsen durch seine “Usability 101” einen Überblick geschaffen und zeigt die 5 wichtigsten Komponenten auf:

1. Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
2. Efficiency: Once users have learned the design, how quickly can they perform tasks?
3. Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
4. Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
5. Satisfaction: How pleasant is it to use the design?

Auch wenn Nielsen in der Vergangenheit immer wieder in der Kritik war – insbesondere durch seine teilweise konservativen Ansichten bzgl. des Einsatzes von neuen Technologien: Es lohnt sich einen Blick in sein Kompendium von Beiträgen und Erkenntnissen zum Thema Usability zu werfen. Sie bieten einen Einblick in die Geschichte der Usability von 1995 bis heute.

Zu Bildagenturen mit lizenzpflichtigen Fotografien, die pro Verwendung eine von Art und Umfang sowie Verwendungszweck abhängige Nutzungs- oder Lizenzgebühr verlangen, gibt es eine Alternative: Fotoportale von Bildagenturen mit lizenzfreiem (auch: royalty free genannten) Bildmaterial. Hier wird die Lizenz – meist preislich Abhängigkeit von der Auflösung – im Normalfall aber unabhängig von Medium, Häufigkeit und Zeit der Nutzung angeboten. Diese Bilder sind oftmals günstiger, teilweise auch kostenfrei verwendbar.

Unter www.sxc.hu beispielsweise veröffentlichen Hobbyfotografen ihre Bilder und geben sie für die Verwendung durch Dritte frei, ein Großteil der Fotos ist kostenlos nutzbar. Vor einem öffentlichen Einsatz der Fotos muss der Urheber jedoch benachrichtigt werden. Die Beschränkungen werden jeweils unterhalb der ausgewählten Fotografien angezeigt.

Einschränkungen der Nutzung von Bilder unter www.sxc.hu

Unter www.stockxpert.com finden Sie zudem das Pendant der Plattform mit professionellen, lizenzfreien Bildern.

Weitere Fotoportale, die u.a. auch lizenzfreie Bilder anbieten:

• http://www.corbis.de
• http://www.sxc.hu
• http://www.stockxpert.com
• http://www.gettyimages.de
• http://www.imagesource.de
• http://www.fotomarktplatz.de
• http://www.yotophoto.com
• http://www.dieblen.de
• http://www.aboutpixel.de
• http://www.photocase.de

]]> http://blog.mosaiq-media.de/allgemeines/2007/11/27/fotopools-im-internet/feed/ 3