Schlagwort-Archiv: Design & Kreatives

Kreative Weihnachtsideen im Jahr 2011

Das Weihnachtsgeschäft ist längst in vollem Gange und sogar hier in Stuttgart sind gestern schon die ersten Schneeflocken vom Himmel gefallen. Höchste Zeit für ein wenig Weihnachtsstimmung hier im Blog! Wie schon im letzten Jahr, haben wir auch dieses Mal wieder nach kreativen Weihnachtsaktionen gesucht und möchten eine Auswahl der schönsten Ideen hier zeigen.

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.

ESPRIT Weihnachtsgrüße

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.

dm-drogerie markt Adventskalender

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 ;-)

Coca Cola Weihnachtsfreude

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!

s.Oliver X-MAS Gewinnspiel

s.Oliver X-MAS Gewinnspiel

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.

NIVEA Adventskalender

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! :-)

hessnatur Adventskalender

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!

AXE Excite Adventskalender

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?

Breuninger im neuen Online-Gewand

Auf einige Projekte sind wir ganz besonders stolz. Wie jetzt, nach 4 Monaten Realisationszeit, auf den Relaunch der Corporate Website von Breuninger. Damit durften wir nach acht Jahren Zusammenarbeit dem digitalen Aushängeschild der Stuttgarter Mode-Institution ein neues Digitaloutfit schneidern.

Relaunch Corporate Website Breuninger 2011 (Screenshot)

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.

Design Trends 2011

Wir haben uns im Internet umgeschaut, welche neuen Designtrends sich 2011 durchsetzen. Die Artikel von Jacqueline Thomas auf Webdesign Ledger und von Brandon Jones auf Webdesign Tuts+ decken dabei viele interessante Punkte auf. Hier haben wir die wichtigsten Trends für 2011 zusammengefasst.

 

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.

Ideenfindung für Screendesigns: Inspire me!

Ein gutes Design muss die Inhalte einer Webseite in eine Form bringen, die für den Benutzer nicht nur übersichtlich und leicht zu bedienen ist, sondern auch visuell ansprechend ist. Bei der Gestaltung eines Screendesigns sind also immer frische Ideen gefragt, um die zu vermittelnden Inhalte für den Benutzer möglichst interessant zu präsentieren. Deshalb ist man als Grafiker stets auf der Suche nach passenden Motiven für Bilder oder den richtigen Farben, um die gewünschte Stimmung zu erzeugen und die Inhalte visuell zu unterstreichen.

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.

Inspiration zum Thema "Herbst"

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.

Button-Design und die Kunst der Besucherführung

Wie bereits in unserem Artikel „Button-Faktor“ beschrieben sollte die Aufforderung zur Aktion (Call-to-Action) auf keiner Internetseite fehlen. In Webshops ist das selten der Fall – wohl aber auf vielen Unternehmensseiten. Spätestens wenn die Awareness dafür geschaffen wurde, dass über das Internet Kontakte und damit Umsätze generiert werden können ist er aber da: Der Button, der zum Konversionsziel (Kauf, Newsletterabo, PDF-Download etc.) führt.

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)