Seit 13 Jahren bastle ich nun an Webprojekten. “Damals” war es cool einfach zu behaupten ein Webdesigner zu sein, schon hatte man ein paar Mädls um sich. (Ja, ist jetzt auch übertrieben, aber in meiner Erinnerung ist es so;) Webdesign war damals ein großes graues Mysterium, ehrlich gesagt auch für mich. Ich habe mich ja über WYSIWYG Editoren an das Thema herangenähert. HTML und CSS kam erst später, wie die Webstandards Einzug gehalten haben und ich mich in die Materie vertieft habe. Nach dem Thema Webstandards kam als großer Meilenstein Social Media und vor 2-3  Jahren war die Deviceunterschiedlichkeit ein großer Aspekt. Mobile und Co. von nichts anderem war/ist die Rede. Internet am Tablet, SmartTV und ja, sogar auf einem Autonavigationssystemen. Doch welche Richtung schlagen professionelle Webprojekte nun ein (2013-2014)?

Wir haben ja schon oft von Responsive Webdesign gesprochen. Das ist nicht nur der heißeste Sch***, sondern rückt auch einen interessanten Aspekt in den Vordergrund. Durch die Idee ein Webdesign, mit unterschiedlichen Usabilitykonzepten bei verschiedenen Bildschirmauflösungen umzusetzen, geht es eher darum die Bedürfnisse und Begebenheiten des Users wichtig zu nehmen. Doch das ist erst ein Anfang, denn genau darum geht es in Zukunft: dem User!

Whats next? Ganz einfach: DER USER

Bei User Centered Design (Kurz: UCD) geht es darum die Gebrauchstauglichkeit von Interfaces – und nicht deren Technik -in den Vordergrund zu stellen. User Centered-Design (UCD) ist mehr eine Philosophie und ein Ansatz, als ein System. Die Person (=der USER) wird in den Mittelpunkt gestellt. Die Gestaltung von UCD-Interfaces ist ein Prozess, der sich auf kognitive Faktoren (wie Wahrnehmung, Gedächtnis, Lernen, Problemlösen, etc.) konzentriert.

Hört sich alles gut an, doch was bedeutet das in der Praxis? Wir konzipieren die Webprojekte wie bisher in den gewohnten Schritten, Strategie, Evaluierung, Mockups, Screendesigns und Umsetzung, lassen aber folgende Fragestellungen mehr und mehr einfliessen.

• Wer sind die User des neuen Interfaces (analog zur Zielgruppenanalyse)
• Was wollen die User auf der Webseite , was will ein typischer Besucher für Informationen?
• Welche Informationen sind besonders wichtig, und besonders unwichtig?
• Welche Erfahrungen haben wir mit den bisherigen Informationen?
• Wie benutzt man das Interface vom kognitiven Ansatz?
• Welche Intuitionselemente kann man dem Nutzer bieten? (Natural User Interface)
• …

Okay, das unterscheidet sich beim 1. Blick nicht wirklich von bisherigen UI Konzepten. Allerdings geht es bei den Fragestellungen immer mehr darum den User in den Mittelpunkt zu stellen. Wir denken bei der Konzeption von User Centered Designs noch nicht an die Technik dahinter, oder an die Marketingziele des Auftraggebers, aber auch noch nicht ans Visual Design, sondern an den Webseitenbesucher als Person und Mensch.

Zusammengefasst: Was ist wirklich relevant und was stellt den User zufrieden?

Relevanz und Zufriedenheit

Das schönste Design und auch die beste Usability nutzt dem Webseitenbesucher nichts, wenn die relevantestenWebseitenelemente nicht richtig angeordnet sind. Der Auftraggeber oder Marketingentscheider will natürlich unbedingt Element A oder B platzieren, weil es ihm wichtig ist, aber will das auch der User? Wie oft habe ich mich zum Beispiel geärgert, wenn bei Webdesigns einfach keine f**** Telefonnummer zu finden ist….. Als potentieller Gast eines Restaurants hätte ich zum Beispiel wahnsinnig gerne einen Blick in das Lokaldesign geworfen und vielleicht noch in die Speisekarte. Es interessiert mich aber weniger, welche Philosophie der Küchenchef hinausposaunt. (Ja, kann auch wichtig sein, aber auf dem 2. Blick..)

Hat der User auch genug relevante Information, natürlich unterstrichen mit einem Wohlfühldesign :), wird er auch motiviert sein mehr in das Seitenangebot einzutauchen. Da kommen die Stichworte Storytelling ins Spiel (Restaurantbeispiel: “Hey, hast du gewusst, dass wir auch Bio-Cocktails haben..”). Ebenso ist es wichtig den Benutzer zu involvieren (“Reservier gleich einen Tisch”)

Funktionalität wird bei o.g. Beispiel vorrausgesetzt, egal welches Device der User benutzt, wir haben es am Beispiel Apple gelernt: Die Dinge müssen einfach funktionieren, wie und ob, ist dem Benutzer egal. Es reicht nicht mehr dem Auftraggeber zu kokettieren, dass wir auch ältere Browser oder kleinere Bildschirmauflösungen bei der Umsetzung berücksichtigen, das ist eine Grundvorraussetzung einer professionellen Webseite, denn schließlich wollen wir nicht nur in Social Media Dialog mit dem User, sondern auch auf der Webseite oder in einer Applikation.

Zurück zu den Wurzeln

Es ist eigentlich nicht kompliziert, 1989 wurde das WWW erfunden um den Forschern das Leben zu erleichtern. Einfacher und nutzbarer sollte es werden, konzipiert nach den Bedürfnissen der Forscher, das war der Anreiz. Es ist gut, dass uns dabei die Technik immer überholt und auch die Marketingmöglichkeiten sind super, aber dabei bitte nicht auf den armen User vergessen :) Wir Webagenturen sind da um das Internet besser zu machen, ist es nicht so?

Wir sind dankbar für die neuen Möglichkeiten, die das Internet bietet. Basierend auf der Verknüpfung von Daten wie Internetverhalten, Gewohnheiten, Interessen oder Vorlieben können wir zielgruppengerecht werben und Kunden individuell ansprechen.

Visionen der Zukunft sprechen von personalisierten Informationen für jeden von uns. So verschwenden wir keine Zeit mit irrelevanten Informationen und bekommen effektiv nur mehr die Nachrichten, die uns wirklich interessieren.
Doch jedes Thema hat Vor- und Nachteile.

Jeder von uns sollte sich wohl fragen, ob sein Umgang mit den eigenen Daten nicht manchmal zu leichtsinnig ist. Die passgenaue Zuordnung von Interessen und Vorlieben führt auf vielen Plattformen im Internet zu einer Filterung und Selektion von Information. Die Nutzer bekommen oftmals nur mehr persönlich zugeschnittene Nachrichten geliefert. Sie entscheiden nicht mehr selbst, was für sie relevant ist und sehen auch nicht, was ihnen vorenthalten wird. Solche Filter verstärken die individuelle Weltsicht und zeigen den Menschen die Dinge, die sie sehen wollen, aber nicht jene, die sie sehen sollten.
Außerdem bringt die Sammlung und Verknüpfung von Kundenprofilen auch eine Wertung mit sich. Für Unternehmen sind diese Informationen wie Beruf, Kaufgewohnheiten oder Interessen sehr wertvoll. Sie beschreiben die Attraktivität einer Person für ein Unternehmen. Aus ethischer Sichtweise betrachtet, sollte aber jeder Person auch aus Unternehmersicht immer auch als Individuum betrachtet und nicht auf einen Datensatz reduziert werden.

Die permanente Sammlung und Verknüpfung von Daten kann Probleme auch im Bezug auf Datenschutz und Privatsphäre bedeuten. Die Menschen verlieren die Kontrolle über ihre eigenen Daten. Wenn die Technologien Gesichtserkennung und Augmented Reality mit den Informationen aus dem sozialen Internet verknüpft werden, könnte in Zukunft jeder alles über jeden in Erfahrung bringen. Dies kann aus der Sicht des Datenschutzes und der Privatsphäre schwerwiegende soziologische Folgen nach sich ziehen.

So gesehen, ein schwieriges Thema. Ich habe versucht, mich in meinem Masterprojekt „MIIO“ mit einigen Aspekten des Themas auseinanderzusetzen. Innerhalb eines großen Teams habe ich mich 2 Jahre an der FH Salzburg mit Themen wie Privatsphäre, Überwachungsgessellschaft und mediale Inszenierung des Selbst beschäftigt.

Das Projekt MIIO, eine Abkürzung für „My Identity Is Open“, beschreibt eine Welt, in der alle personenbezogenen Daten öffentlich zugänglich sind. Innerhalb dieses Projekts dreht sich alles um ein Mobilfunk-Gerät namens miio, welches Personen mittels einer Gesichtserkennungs-Software scannt und so deren Identität ermittelt.

Miio ist ein Prototyp eines High- End-Mobiltelefons und als Sinnbild einer semantischen Personen-Suchmaschine zu verstehen. Über die Funktionsweisen von Gesichtserkennungs-Software und Ortsbestimmung können Menschen gescannt und identifiziert werden. Doch das ist nicht genug: miio greift auf persönliche Daten zu, aggregiert diese Daten, speichert sie im miio Netz ab, um sie anschließend einer Auswahl und Bewertung zu unterziehen.

Miio protokolliert das gesamte Leben. Dies bedeutet, dass zu jedem Ereignis, zu jeder Handlung Ort und Zeit vermerkt werden, um somit ein Gesamtprofil über die jeweilige Person erstellen zu können. Die Überwachung ist komplett: Niemand kann sich mehr verstecken und jeder ist zu jeder Zeit erfassbar und kontrollierbar.

Miio ist ein kritischer Blick in die nahe Zukunft. Das Ziel des Projekts war eine Sensibilisierung für das Thema Vorratsdatenspeicherung und den durch technologischen Fortschritt und gesellschaftlichen Wandel bedingten Schwund der Privatsphäre. Miio tritt zudem gesellschaftskritisch auf. Nicht nur der Staat und die Wirtschaft überwachen uns, auch wir überwachen uns gegenseitig.

In dem Projekt wurde das Produkt „miio“ zuerst als reales Produkt im Internet vermarktet. Wer das Produkt kaufen wollte, wurde mit einer Aufklärungsdokumentation konfrontiert. Um euch einen Eindruck von dem Projekt zu geben, könnt ihr hier ein Vermarktungsvideo für das Produkt und den Trailer für die Dokumentation:

Transmedia

Österreichische Unternehmen sind mittlerweile nicht mehr ganz so angsterfüllt von Social Media und einige kommunizieren ja auch schon länger erfolgreich auf sozialem Wege. Schön. Jetzt kennen sich alle aus, jetzt kann’s einen Schritt weiter gehen. Nämlich: Storytelling über unterschiedlichste Kanäle, alle mit dem gleichen Kommunikationsziel. Online bleibt nicht online und offline nicht offline und mobile ist sowieso alles. Transmedial eben. Hier überhaupt nur von einem Device, Kanal, Medium, etc. zu sprechen ist eigentlich falsch. Aber ich denke, dass das große Bindeglied für transmediale Kommunikation im nächsten Schritt das Handy sein wird. Gerade läuft die CES, die größte Consumer Electronics Show der Welt in Las Vegas, hier werden derzeit die nächsten Generation der NFC (Near Field Communication)-Handys vorgestellt. Vielleicht schafft ein Durchbruch von NFC das, was QR-Codes nicht leisten konnten. Kommunikation die auf Orte ausgelegt ist, aber auf einfachstem Wege für die Anwender – beides auf Konsumenten, aber auch Unternehmensseite für Mitarbeiter. Zum Beispiel könnten Coupons in Lokalen auf der Speisekarte auf das NFC Handy geladen werden. Nichts muss mehr eingetippt werden. Wie hier:

Oder Unternehmen können transmediale Erlebnisse schaffen, wie das altbekannte Summer of Love Beispiel von Coca Cola:

Gamification

Auch wenn ich vor kurzem einen Artikel auf den Abgesang von Gamification gelesen habe, denke ich, dass erst jetzt die Zeit kommt, zum Durchstarten mit spielerischen Formen der Kommunikation. Und nein, damit meine ich keine Games und Gewinnspiele. Ich rede von Belohnungen und spielerischen Storytelling. Zum Beispiel können Badges für gewisse Aktionen auf unterschiedlichen Kanälen ausgegeben werden. Dinge, die die User vielleicht sowieso gemacht hätten, aber vielleicht nur einmal und so aber öfter, weil wir Menschen einfach Sammler sind und wir wollen belohnt/gelobt werden. Das meiner Meinung nach schönste Beispiel für spielerisches Storytelling ist die Microsite zur Errechnung des Slavery Footprint.
Spielerisch ohne ein Game zu sein. Und noch dazu ein Design- und HTML5-Gustostück, so wie es gerade uns Liechteneckers gut gefällt. So erweckt man Aufmerksamkeit für eine Sache!

Privacy

Die Privatssphäre-Diskussion wird sich auch heuer verschärft fortsetzen. In wie weit sind wir privat wenn wir online sind? Wie privat möchten wir sein? Wie privat müssen wir sein? Egal, wie wir damit persönlich umgehen, aus Marketingsicht wird es wichtig sein, die Diskussion weiter zu verfolgen. Denn das Meinungsbild hat auch Auswirkungen auf die Unternehmenskommunikation. Wollen bei einem Trend zum Rückzug ins Private, User überhaupt noch über ihr Social Network mit Unternehmen kommunizieren? Wenn nein, was dann? Wenn es keinen Rückzug ins Private gibt, sondern das Gegenteil, mit welcher Zielgruppe hat man es dann zu tun? Mit grenzenlosen Exhibitionisten, denen es nur um die Selbstdarstellung geht? Mit denen redet man sicherlich anders und bietet ihnen andere Inhalte, als mit jenen, die sich nicht öffnen wollen. Da heißt es dranbleiben 2012.

Social TV

Social TV ist eigentlich auch ein Beispiel für meinen ersten Punkt Transmedia. Es ist mir aber einen eigenen Absatz wert, da es sich doch um einen Trend handelt indem ein altes Medium relativ erfolgreich versucht neue Medien zu integrieren. Bei Social TV gibt es meiner Meinung nach zwei Varianten.

Die eine ist die Einbindung von Social Networks in TV Shows oder Mobile Apps die mit dem Inhalten in Sendungen oder Werbungen interagieren. Die ATV Sendung “Am Punkt” tut Ersteres schon seit längerem. Noch besser macht das aus meiner Sicht noch ZDF mit der Diskussionssendung “log in”. Seit neustem experimentiert auch Pro7 in diese Richtung bei der Show “The Voice of Germany”. In den USA kann bei der Castingsendung X-Factor sogar per Twitter gevotet werden. Das alles ist nur ein logischer Schritt. Denn Fernsehen tut man nicht mehr nur alleinig. Parallel wird sich über die aktuelle Sendung auf unterschiedlichen Netzwerken ausgetauscht oder ganz etwas anderes angesurft. Die schöne neue Zukunft für Unternehmen könnten Social TV Ads sein. Warum, denn Sendungen das Einbinden von Userinteraktion überlassen? Oh je, ich merke schon, wie sich da die großen Firmen davor fürchten.

Aber Coca Cola zeigt wie es funktionieren könnte:

Die zweite Variante ist der Trend zu Smart TV. Wieder kann ich hier auf die CES verweisen, wo Hersteller wie LG Google TV präsentieren und mehr. Schon 2012 können wir Fernsehen und dabei Social Content gleichzeitig über das selbe Device konsumieren.

“Watch-based” Services – ich nenne es mal so

Ja, ich weiß, ein ziemlich holpriger Begriff, aber wofür soll “Watch-based” Services stehen? Wer hat’s erraten? Richtig. Etwas ähnliches wie location-based Services, nur dass es hier nicht darum geht, wo man ist, sondern was man tut oder sieht. Applikationen wie Oink oder Get Glue ermöglichen es uns nicht in Orte, sondern in Dinge einzuchecken. Wie das köstliche Essen, dass ich vor mir stehen habe, den Film, den ich mir gerade ansehe oder die Couch, die ich mir gerne kaufen möchte. Auch hier kommen wieder zwei bereits genannte Punkte zusammen: Transmedia und Gamification. Damit lässt sich doch etwas machen, oder? Kombiniert man solche Check-In Möglichkeiten mit transmedialen Angeboten und Gamification, sind der Kreativität keine Grenzen gesetzt.

Natürlich haben meine fünf Trends keinen Anspruch auf Vollständigkeit. Was sind eure Vorhersagen? Oder was würdet ihr euch zumindest als Trend wünschen?

Sass(Syntactically awesome Stylesheets) ermöglicht unter anderem die Verwendung von Variablen, Funktionen und sogenannten Mixins, was das schreiben von Styles einfacher und strukturierter macht. Das CSS Framework Compass, das mit Sass arbeitet ist auch ein sehr nützliches Tool, da uns hier viele Funktionen geboten werden, auch im Bereich CSS3.

Aber lasst uns einfach gleich starten:

Im ersten Teil dieses Artikels werden wir kurz einen Blick auf Sass werfen und im zweiten Teil schauen wir uns an, wie Compass uns bei CSS3 enorm helfen kann. Danach hoffe ich, dass viele von euch motiviert sein werden Sass und Compass auszuprobieren und vielleicht sogar in eurem nächsten Projekt zu verwenden.

Wie ihr Sass und Compass auf euren Rechner bekommt, lest ihr am besten auf der jeweiligen Webseite (Sass Install, Compass Install). Für die Windows User unter euch: ihr müsst wahrscheinlich noch Ruby installieren bevor ihr loslegen könnt, aber dies wird auf den eben genannten Seiten ebenfalls erwähnt.

Einblick in Sass

Nun möchte ich euch kurz ein paar Dinge vorstellen die man mit Sass tun kann und die meiner Meinung nach wirklich extrem nützlich sind (da es hier aber um CSS3 gehen soll wird dieser Einblick wirklich nur kurz)

Variablen

Mich hat es schon immer ein wenig gestört, dass es in CSS keine Variablen gibt, obwohl sie so nützlich sind! Hier zum Beispiel definiere ich eine Variable für eine Farbe und eine für eine Größe, die ich dann im gesamten Dokument nutzen kann:

Sass:

$color: #CC6B32;
$size: 100px;
.box {
  background-color: $color;
  height: $size * 2;
  width: $size;
}

generiertes CSS:

.box {
  background-color: #CC6B32;
  height: 200px;
  width: 100px;
}

Verschachtelungen

Verschachtelungen helfen vor allem das Dokument übersichtlich und strukturiert zu halten. Seht euch einfach folgenden Code-Schnipsel an und ihr werdet verstehen um was es geht:

Sass:

p {
  color: $color;
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

generiertes CSS:

p {
  color: #CC6B32;
}
p a {
  text-decoration: none;
}
p a:hover {
  text-decoration: underline;
}

Wie ihr seht spart man sich durch die Verschachtelung ein wenig Schreibarbeit und die Element-Hierarchie wird sichtbar.

Mixins

Nun wird es noch um einiges interessanter, denn Mixins können auch wunderbar für CSS3 verwendet werden. Ein Mixin definiert eine Reihe von Styles die dann im gesamten Dokument, durch aufrufen des Mixins, wiederverwendet werden können – also ein wiederverwendbarer Code-Schnipsel:

Sass:

@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  /* … */
}
.box {
 @include rounded-corners(5px);
}
.box2 {
  @include rounded-corners(3px);
}

generiertes CSS:

.box {
   border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  /* … */
}
.box2 {
   border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  /* … */
}

Mit @mixin sagen wir, dass wir nun einen solchen Mixin definieren wollen, danach kommt der Name des Mixins, den wir uns natürlich selbst ausdenken. Für unser Element mit der Klasse box, rufen wir das Mixin durch @include mixin-name auf und geben in diesem Fall noch einen Radius mit.

Natürlich kann Sass noch einiges mehr, aber wir werden nun mit dem CSS Framework Compass weitermachen.

CSS Framework Compass

Compass arbeitet wie schon gesagt mit Sass und bietet unter anderem sehr viele vordefinierte Mixins an – eben auch für CSS3 (Compass – CSS3).

Um bei unserem vorherigen Beispiel mit border-radius zu bleiben – hier seht ihr wie das ganze mit Compass umgesetzt werden kann:

Compass/Sass:

.box {
  @include border-radius(3px, 3px);
}

generiertes CSS:

.box {
  -webkit-border-radius: 3px 3px;
  -moz-border-radius: 3px / 3px;
  -o-border-radius: 3px / 3px;
  -ms-border-radius: 3px / 3px;
  -khtml-border-radius: 3px / 3px;
  border-radius: 3px / 3px;
}

Ich denke dieses Beispiel zeigt gut, wieviel Schreibarbeit man sich durch die Verwendung von Compass ersparen kann. Natürlich muss man dazu erst einmal die Namen der verschiedenen Mixins kennen, aber die Dokumentation/Reference von Compass ist ziemlich gut und ausführlich.

Hier noch ein kurzes Beispiel zu CSS3 box-shadow:

Compass/Sass:

.box {
  @include box-shadow(red 2px 2px 10px);
}

generiertes CSS:

.box {
   -moz-box-shadow: red 2px 2px 10px;
   -webkit-box-shadow: red 2px 2px 10px;
  -o-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;
}

Ich könnte euch hier noch eine Reihe weiterer Beispiele zeigen, aber ich glaube ihr habt mittlerweile verstanden, warum ich so begeistert bin von Compass und Sass.

Noch ein sehr tolles Feature von Compass das ich euch nicht vorenthalten möchte: das automatische erstellen von Sprite-Images und dazugehörigem CSS Code (Referenz). Wer schon einmal CSS Sprites erstellt hat, weiß was für eine anstrengende und nervende Arbeit das sein kann. Als ich dann dieses Compass Feature ausprobiert habe, und das ganze auch auf Anhieb wunderbar funktioniert hat, war ich richtig in Jubelstimmung.

Fazit

Ich denke die Verwendung von Compass und Sass zahlt sich sehr aus, obwohl man natürlich eine gewisse Zeit benötigt bis man sich eingelernt hat. Für diejenigen, die schon Erfahrung mit Skript- oder Programmiersprachen haben, sollte das Einlernen kein Problem sein. Aber auch für die HTML/CSS Coder unter euch, glaube ich kaum, dass das Erlernen von Sass irgendwelche gröberen Schwierigkeiten bereiten sollte.

Durch die automatische Code-Generierung erspart man sich sehr viel Zeit. Auch, weil man sich in seinem Dokument viel besser und schneller zurechtfindet. Als Entwicklerin schätze ich vor allem die Verwendung von Mixins, Variablen, Verschachtelungen und so weiter, da das Dinge sind, die ich schon immer in CSS vermisst habe. Außerdem macht mir CSS schreiben wieder unheimlich viel Spaß, was selbstverständlich auch eine sehr bedeutende Rolle spielt.

Was haltet ihr von Sass bzw Compass? Habt ihr mit diesen Tools schon Erfahrungen gemacht, oder würdet ihr sie gerne ausprobieren?

Damit etwas Ordnung in die verschiedenen Möglichkeiten der Gestensteuerung kommt, hat LukeW auf seinem Blog einen vorbildlichen Referenzguide erstellt.

Der Leitfaden enthält einen Überblick über die Kern-Gesten für die meisten bekannten Touch-Befehle, wie nutzt man  Gesten zu den wichtigsten Benutzeraktionen, dazu eine visuelle Darstellungen der einzelnen Gesten um in neuen Designkonzepten, diese besser berücksichtigen zu können.

Für uns eine tolle Grundlage um in der Konzeption bei Applikationen für Touchscreens bestimmte Interaktionen im Detail festzulegen.

• Download Gesten-Referenzguide als PDF
• Download Gesten-Referenzguide als EPS
• Alle Referenzguides-Downloads auf LukeW

Informationsdesign

Letztes Jahr und 2011 war die Zeit der Infografiken. Daten und Fakten in schöne Zahlen verpackt. Große Typographie, schöne Piktogramme und ein Leitfaden sollen die manchmal trockenen Informationen aufpeppen und unterstreichen. Diese Infos haben auch in Webprojekte Einzug gehalten und werden dies 2012 noch mehr tun.

Sehr große Header

Alles in den sichtbaren Bereich zu bringen, die Zeit ist lange vorbei. Große Header sollen für ein AHA-Erlebnis sorgen und die User in den Content ziehen. Branding und Markenbildung ist somit besser möglich und Scrollen, statt Klicken ist angesagt.

Responsive Webdesign

Ja, wir können es gar nicht oft genug erwähnen. Responsive Webdesign ist 2012 der absolute heiße Topic. Warum nur spezielle Devices bedienen? Konzepte für verschiedene Bildschirmauflösungen sind der absolute Trend.

Typografie

Auch 2012 wird das Spiel mit verschiedenen Schriften fortgesetzt. Die Harmonie von unterschiedlichen Schriftarten ist sehr schwierig, kann aber richtig eingesetzt ein sehr anspruchsvolles Layout bilden.

Vintage Look

Instagram hats vorgemacht. Der vergilbte und alt wirkende Vintagelook ist sehr angesagt, weil es einen super Kontrast zu den neuen Medien und Technik bietet. Gepaart mit einem guten Farbkonzept ist es ein Augenschmaus.

Illustrationen

Professionelle Screendesigner müssen auch illustrieren können. Denn handgezeichnete Elemente sind 2012 noch immer angesagt. Sie sorgen oft in einem Bastellook für gute Stimmung und die DIY Bewegung ist auch heuer sehr weit vorne gewesen.

Oberlippenbärte

Was haben Oberlippenbärte bei Webdesigntrends zu suchen? Ich habe seit Oktober noch nie so viele Webprojekte über Oberlippenbärte gesehen. Und der Trend geht weiter, auch 2012 werden die Rotzbremscommunities nicht zu bremsen sein ;) Sie werden auch gerne als grafisches Element eingesetzt.

50er Jahre

Mad Men – eine tolle Serie über die Werbebranche in den 50er und 60er Jahren hat nicht nur die Modewelt inspiriert, sondern auch die Webdesigns. Der Look dieser Zeit wird gerne für Screendesigns verwendet und gefällt mir persönlich sehr gut.

Große, sehr große Schriften

Wie wäre es mit 132px Schriftgröße? Kein Problem, ist sehr angesagt.

Laschen wohin das Auge reicht

Laschen und Bänder haben sich als Background für Typografie total durchgesetzt und machen in den richtigen Farben sehr viel her. Doch aufgepasst, zuviel des Guten wirkt sehr unübersichtlich.

Interaktion

Die eine Seite ist die Information – was will der Webseitenbetreiber erzählen oder transportieren – die andere Seite ist Interaktion. Was kann der User mit, oder auf der Webseite anstellen. Ist nichts Neues schon klar, aber die Interaktionselemente werden durch viel Überlegung besser auf die Bühne gebracht und laden die User ein. Natürliche Handlungsweisen sind hier in der Konzeption wichtig.

Space und noch mehr Platz

Wie schon erwähnt Scrollen ist das neue Klicken. Space ist angesagt. Nur Mut, viel Platz ist angenehmer und sorgt für Übersichtlichkeit.

Es wird bunt: Farben

Weiße Hintergrundfarben sieht man immer seltener. Farben erzeugen tiefe Stimmungen. Besonders natürliche Farben sind 2012 auch angesagt. Gepaart mit grelleren Tönen (teilweise sogar Neon) kann es ein tolles Usererlebnis erzeugen.

Und sonst?

Ich bin mir sicher, dass viele Frontendprogrammierer gerade ihr Können um HTML5 und CSS3 erweitern. Denn es werden 2012 immer mehr solcher Projekte an den Start gehen. Dann wäre da noch Perspektivenwechsel, Webseitenelemente erzeugen perspektivische Effekte, subtile Elemente wie Ecken oder Schatten sind auch 2012 noch am Puls der Zeit.

Ich möchte den Vorhang noch nicht schließen, aber hoffe euch einen Einblick aus der Kreativwerkstatt gegeben zu haben. Für Inputs ist der Kommentarbaum eröffnet, ich freue mich über jedes Feedback und den Dialog.

Google Wallet

Es gibt dafür schon unterschiedliche Lösungsansätze, besonders herauskristallisiert hat sich natürlich Google, mit seinem “Google Wallet”  Hört sich alles super an, doch hier ist es noch ein weiter Weg. Google Wallet funktioniert nur auf bestimmten Smartphones, die Kassen benötigen spezielle Lesegeräte für NFC und noch dazu müssen die Kunden spezielle Kreditkarten haben. Also bis der Trend bei uns gelandet ist.. Jahre… Aber immerhin wird vorrausgesagt, dass sich bis 2015 mobile Payment drastisch erhöhen wird.

Eigene Lösungen: Starbucks

In UK können ab Jänner 2011 Starbucks Kunden mit einer eigens entwickelten Applikation bezahlen. Derzeit nur auf iPhone und iPad erhältlich, soll das Bezahlen nur mit 1Klick möglich sein. Android wird nachgeliefert. Dieser Weg von Starbucks hat sicher damit zu tun, dass NFC (siehe oben) noch lange braucht, bis es sich durchsetzen wird. Ich sehe hier nur das Problem, lauter Applikationen für jedes Geschäft?

Mobile Pocket

Diesen Montag waren wir auch beim Mobile Monday, wo der AppCircus stattgefunden hat.  Mobile Pocket hat mit einer sehr interessanten Lösung das Publikum überzeugt. In der Applikation kann der User seine Kundenkarten elektronisch speichern und die Vorteile der Karten mittels Barcode in den Geschäften nutzen. Sehr nützlich, ich wünsch mir gleich das mobile Bezahlen, in Kombi mit der Kundenkarte.

Im Prinzip heißt es sicher noch warten und die manuelle Geldbörse zucken. Der Vorteil: Ich habe auch noch andere Sachen in der Börse, wie zum Beispiel Kopfwehtabletten ;)

Genau dies ist die Frage, die wir mit unserem Weihnachtsgame stellen: Seid ihr mehr für das Christkind oder für den Weihnachtsmann? Es ist ganz einfach. Klickt auf eure Vorliebe und shared via Twitter oder Facebook, wer die Geschenke bei euch vorbeibringen soll.

Wir sind auch um Sponsoren bemüht, denn wir würden gerne die Einnahmen dieses Spiels für einen guten Zweck spenden!

Damit es auch eine schöne Bescherung gibt, überraschen wir die aktiven User mit einem Weihnachtsgeschenk am 24. Dezember. Also los, sagt uns wer bei euch die Geschenke vorbeibringen soll mit Santa vs. Christchild

Endlich haben wir den IE6 fast hinter uns gebracht nun tauchen neue Herausforderungen auf (Probleme gibt es ja keine;). Die Browser haben nämlich unterschiedliche Auffassungen der neuen CSS3 Befehle. Bei ordentlichen Webprojekten, wo wir eigentlich immer schon CSS3 einsetzen, gibt es nun den Mehraufwand an Crowssbrowsertests und Downgrades (teilw. mit JavaScript), welcher früher für den IE6 gegolten hat, aber das ist ja unser Agenturalltag.

Zurück zu den Browsern, hier kristallsiert sich ein starker Trend heraus. Der Internet Explorer schafft es auch mit seinen neuen Browsern nicht mehr Marktanteile zu gewinnen, zu groß war der Schaden durch alte Modelle.  Besonders spannend ist, dass der Star Firefox auch langsam an Beliebtheit verliert. Ich könnte mir vorstellen, daß dies an der teilweise schlechten Performance liegt. Er ist doch ein ordentlicher Ressourcenfresser. Doch jetzt kommt die Überraschung. Mein Lieblingsbrowser Chrome könnte nach Prognosen 2012 die größte Verbreitung haben. Für mich hat Chrome deutlich die beste Performance, im speziellen bei JavaScript. Das jeder geöffnete Tab isoliert in einem CPU Prozess läuft, ist auch genial, keine Gesamtabstürze mehr. Der Kritikpunkt Datenschutz (wg. Google)löst bei mir keine Angst aus. Achja, da wären noch für die Macjünger Safari, welcher mit Opera herumgrundelt, obwohl Safari auf dem iPhone installiert ist.

Welchen Browser nutzt ihr am liebsten? Weiter Zahlen und Fakten hier

Screendesigner und Konzeptionist/in

Webprogrammierer/in

Projektmanager/in, Contentredakteur/in, Social Media Betreuung

Praktikanten/in für Social Media Marketing & Projektassistenz

WAS WIR MACHEN

Seit über 12 Jahren setzen wir spannende Webprojekte um. Das sind zum Beispiel sehr ansprechende Corporate Webauftritte, Social Media Applikationen oder mobile Webanwendungen. Immer am Puls der Zeit ist unser Lieblingskind derzeit HTML5 und CSS3. Unsere Designs sind immer auf höchstem Niveau, dabei kommen Kreativität und Spaß nicht zu kurz.

Zu erfolgreichen Webprojekten gehört immer auch professionelle Kommunikation. Diese setzen wir für strategische Social Media Beratung und Online PR, sowie Contentredaktion ein.

WER WIR SIND

Wir sind ein junges und motiviertes Team an Webaholics, das seine Leidenschaft  und Talente aus unterschiedlichsten Bereichen auslebt.

Das machen wir gerne für große und namhafte Kunden, wie LG Electronics Austria, Intersport eybl oder IKEA Österreich. Aber auch in Form von Eigenprojekten, wenn wir von einer Idee nicht loskommen. Für die wir aber auch gerne Preise sammeln, wie zum Beispiel den Social Media Newcomer Award 2011.

WEN WIR SUCHEN

Wir suchen Menschen mit Begeisterung an den neuen Medien. Wenn du an unseren spannenden Aufgaben teilhaben willst und dich in einer  jungen, modernen Umgebung wohlfühlst, solltest du uns in jedem Fall kontaktieren. Du solltest nicht mit Titeln oder Know-how glänzen, sondern mit echtem Tatendrang und Begeisterung.

Wir freuen uns auf deine E-Mail!