Wir setzen bei unseren Screendesigns immer mehr auf gut bedachten Space, allerdings müssen hier auch die kleinen Devices bedacht werden. Hierzu sollten mehrere Varianten der Prototypen entworfen werden. (Stichwort: Responsive Webdesign) 2 hervorragende Beispiele hab ich in diesem Beitrag mitgebracht, wie Whitespace perfekt eingesetzt wird.

Ich würde allen raten: Mehr Mut zu Platz! Im Konzept aber nie vergessen wie man die Darstellungen auf kleinere Screens bündeln bzw. reduzieren kann.

Für mich hat dieser Begriff 2012 gar keine Bedeutung mehr. Ich habe mich früher selbst als solcher bezeichnet, denn der Webdesigner war immer ein Allrounder. Vom Screendesign bis zur Umsetzung, alles aus einer Hand… Sogar das viel belächelte Institut Humboldt bietet tolle Ausbildungen in diesem Bereich an :) Warum klappt das “alles aus einer Hand” nicht mehr? Das möchte ich hier kurz erklären.

Umsetzung eines Webprojektes 2012

Wenn man aktuelle, professionelle Webprojekte durchleuchtet, sehen eigentlich auch keine Webprofis, dass mittlerweile viel mehr dahintersteckt als eine “bloße” Webseite.

Nehmen wir uns ein Beispiel zur Hand: http://happycog.com/

Rundum-Kommunikation

Webseiten, oder Dienstleistungen rund um Webprojekte sind mittlerweile sehr komplex geworden, da viel mehr Themengebiete zu einem Auftritt gehören. Es fängt damit an, dass man sich viel gezielter überlegt, welche Story man mit der Webseite erzählen möchte. Da ist schon beim Konzeptionieren sehr wichtig, dass alle möglichen Aussagen der Webseite und die darum liegende Kommunikation bedacht wird. Denn ein Webauftritt ist heute eine Basis für viel mehr. Social Media, Applikationen, Mobile, Online-PR oder andere Online Marketingaktivitäten. Wir sehen, dass wir unsere Kunden rundum beraten müssen, gemeinsam mit Marketing und klassischer Öffentlichkeitsarbeit. Eine Webseite stellt auf keinen Fall ein Alleinstellungsmerkmal  mehr dar. Hier können wir unsere Erfahrungen aus der PR und Social Media gut einfliessen lassen.

User Interface tritt User Experience

Screendesign bedeutet heute nicht mehr etwas “Gefälliges” zu entwerfen. Früher war es wichtig, dass es schön ist. Oben der Header, links die Navigation etc… Heute ist das Design einer Webseite dermaßen anspruchsvoll geworden. Es geht um wirkliche Illustrationen, gepaart mit echter! Designleistung. Typographie-Wissen spielt eine übergeordnete Rolle. Welche Schriften passen wie zusammen und wie werden die Schriften sinnvoll eingesetzt, damit der User richtig durch die Webseite geleitet wird. Gleichzeitig gibt es starke Trends im Design (Farben, Pattern, Effekte etc.). Dann geht es darum wie man Action-Elemente richtig setzt. Wie verhaltet sich ein Navigationspunkt oder Button. Nette Animationen sind mit CSS3 möglich, aber was nützt es der Usability der Seite. Ebenso ist die UX (User Experience) sehr in den Vordergrund gerückt. Wie und Was erlebt der User mit der Webseite, dies entscheidet sich in Sekundenbruchteilen. Webseiten sind auch schon lange keine statischen Kommunikationsmittel mehr, es sind halbe Applikationen geworden, also ein UI (User Interface) wo User und Webseitenbetreiber miteinander agieren können, hier muss man auch sehr Applikations-getrieben handeln.

Development

Steht das Screendesign, gibt es jede Menge Photoshop-Dateien, mit vielen Beschreibungen und Layern. Der Frontendentwickler kommt nun zum Zug. Heisst, welche Devices und Browser können auf das Ergebnis treffen? Mobil heisst ganz kleine Auflösung oder breiter Bildschirm bedeutet viel Elemente und Platz. Gleichzeitig müssen alte, in die Jahre gekommene Browser bedient werden. Dann gibt es Applikationselemente in einer Webseite, dies kann ein Shop sein, ein Blog oder andere Widgets. Oder es handelt sich natürlich um ganze Applikationen. Hier kommen die Webdeveloper zum Zug.

Marketing

Nach dem Testen und GOLIVE einer Webseite ist es meistens nicht getan. Wie agieren Suchmaschinen mit der Webseite, gibt es eine Suchmaschinenstrategie? Was gibt es für sonstige Themenschwerpunkte oder Kommunikationsmaßnahme. Welche Geschichten werden auf der Webseite erzählt? Hier kommt Social Media auch stark ins Spiel. Redaktionspläne, Dialoge, und Workshops für Autoren. Wie ist die Webseite dann skalierbar, wie kann man die Webstrategie ausbauen..

Hach, ich könnte noch stundenlang erzählen, das ist auch wirklich nur ein grober Umriss des Ganzen. Es gibt Webprojekte die dauern ein halbes Jahr oder länger. Natürlich vereinen sich manche Rollen auch in einer Person, aber der eigentliche Webdesigner kann das alles nicht mehr bewältigen, das kann ich euch versichern. Daher trage ich nun heute den Webdesigner zu Grabe, Ruhe in Frieden, es war eine schöne Zeit, aber nun ist es etwas komplizierter geworden. Amen! und wir spucken in die Hände!

Als frisches Teammitglied von Liechtenecker beschäftige ich mich in meinem ersten Blogeintrag mit einem (auf den ersten Blick) trockenen Thema: Dem Design von Formularen.

Täglich sind wir im Internet mit vielen unterschiedlichen Typen von Formularen konfrontiert: Dabei reicht die Spanne von Loginformularen, über die Registrierung bei Websites bis hin zu hochkomplexen und mehrstufigen Formularen, z.B. für das Finanzamt. Wie man den Prozess des Ausfüllens für die User einfacher und vor allem frustfreier gestalten kann, werde ich im Folgenden beschreiben.

Validierung, Validierung, Validierung

Über Jahren dominierte das Thema der Formularvalidierung alle Artikel über Usability bei Formularen auf Webseiten. Im Laufe der Jahre sind immer ausgereiftere Methoden und Frameworks entwickelt worden, um die Validierung für den User so einfach und nachvollziehbar wie möglich zu machen.
Trotz des großen Interesses und der Vielzahl an Artikeln über diesen Aspekt, gehört die Validierung von Usereingaben immer noch zu den schwierigsten, aber gleichzeitig auch wichtigsten Aspekten, bei der Gestaltung eines guten Formulars.
Dazu zählen zunächst die grundlegenden Anforderungen. Der Benutzer sollte seine Daten nur einmal eingeben müssen und Fehlermeldungen sollten aussagekräftig und klar formuliert werden. In diesen Punkten hat sich in den letzten Jahren mit Sicherheit am meisten getan. Zusätzlich zu solch offensichtlichen Punkten sollten aber auch alle Entscheidungen, die der User getroffen hat, berücksichtigt werden. Dazu zählen vor allem die Auswahlmöglichkeiten bezüglich Newslettern, AGB oder sonstigen Daten, die per Checkbox abgefragt werden. Nichts kann den User mehr nerven (und gegebenenfalls den Prozess des Ausfüllens abbrechen lassen), als Wünsche nach einem Fehler, immer und immer wieder eingeben zu müssen.

Eingabe

Selten gibt es im Internet Formulare, die nicht eines oder mehrere optionale Felder haben. Besonders beliebt ist hierbei die Telefonnummer. Beim Design von Formularen sollte man sich aber stets fragen: Benötige ich überhaupt optionale Angaben oder wäre es besser, diese gleich ganz wegzulassen. Dies ist natürlich vor allem von der Branche abhängig – denn was macht z.B. ein Forum mit meiner Telefonnummer?
Die Reduzierung auf die wichtigsten Angaben hat für beide Seiten Vorteile: Der User muss kein unendlich langes Formular ausfüllen und ist motivierter, den Prozess abzuschließen. Auf der anderen Seite können sich die Betreiber der Website durch weniger Kunden, die das Ausfüllen im Prozess abbrechen, über mehr Kunden und Daten freuen.

Neben Eingabefeldern sieht man häufig Anweisungen für den User, wie er die eingegebene Information zu formatieren hat, also z.B. bei Telefonnummern die Aufforderung, die Nummer in bestimmtes Format zu bringen.
Das Ausfüllen des Formulars sollte für den User aber ein Prozess sein, der ohne Hürden (sind sie auch noch so klein) zu bewältigen sind. Gutes Formulardesign ist dadurch erkennbar, dass der User nicht dazu genötigt wird, seine Daten in Formate zu bringen, die dem Designer des Formulars vorschweben. Viel besser wäre es, die Daten nachträglich und ohne Zutun des Users zu formatieren (Leerzeichen und Sonderzeichen entfernen, …) um sie dann einheitlich in der Datenbank abzuspeichern.

Textlabels vertikal, links oder rechts ausgerichtet?
Folgende Grafik bereitet die Möglichkeiten bei der Ausrichtung von Textlabels von Formularfeldern visuell auf.

Als Faustregel gilt: für kurze Formulare mit wenig Feldern kann das Textlabel vertikal angeordnet werden, das erhöht die Geschwindigkeit beim Ausfüllen und sieht übersichtlich aus.
Bei längeren Formularen scheidet diese Variante durch den enorm gesteigerten, vertikalen Platzbedarf jedoch aus. Dann fällt die Entscheidung zwischen rechts- oder linksausgerichteten Textlabels. Linksausgerichtete Labels sind für den User schneller lesbar und wirken geordneter, nach rechts ausgerichtete Labels erhöhen den Zusammenhang zwischen Label und Eingabefeld.

Abschnitte

Wichtig ist, das Formular nicht zu lang werden zu lassen sondern an gegebenen Stellen abzutrennen und ein “Mehr-Schritt-System” daraus zu machen. Gute Beispiele hierfür sind vor allem Webshops mit dem üblichen Ablauf Warenkorb > Daten > Zahlung > Zusammenfassung.
Dabei ist es wichtig, dem Benutzer jederzeit Feedback darüber zu geben, in welchem Schritt des Prozesses er sich befindet und welche Schritte noch vor ihm liegen.
Rechnet der User z.B. seine Bestellung nochmals überprüfen zu können, bevor er diese Abschickt, das Formular aber einerseits keine Information darüber gibt, wo im Prozess er sich befindet und andererseits auch keine Seite mit Zusammenfassung existiert, birgt das enormes Frustpotential.

Sekundäre Buttons

Häufig trifft man neben den essentiellen Primärbuttons am Ende eines Formulars auch auf Sekundärbuttons, die es dem User z.B. ermöglichen sollen, das Formular mit einem Klick zurückzusetzen oder den Prozess abzubrechen.
Da dies zwar durchaus nützliche Funktionen sein können aber vom Benutzer nicht ausgeführt und vor allem nicht unabsichtlich ausgelöst werden sollten muss darauf geachtet werden, auch das Verhältnis zwischen Primärbutton und Sekundärbutton in der grafischen Aufbereitung widerzuspiegeln.

Abschluss

Ein kurze Zusammenfassung ergibt also: Das Ausfüllen eines Formulars sollte für den User so schnell und einfach wie möglich gehen. Dabei sollte der User auf Fehler bei seinen Eingaben hingewiesen werden und vor allem zu nichts gezwungen werden. Große Formulare sollten in kleinere Teile heruntergebrochen werden, der User sollte aber generell immer über seinen Fortschritt beim Ausfüllen informiert werden. Frustrierende Fallen (unabsichtliches Rücksetzen des Formulars) sollten nach Möglichkeit abgeschwächt werden.
Generell gilt lieber mehr Zeit in die Entwicklung eines Formulars zu stecken als im späteren Verlauf Kunden zu verlieren, die durch ein Problem in der Usability abgeschreckt worden sind.

Ich hoffe ich konnte mit diesem Blogbeitrag einige Aspekte des Formulardesigns aufgreifen und behandeln und freue mich schon auf meinen nächsten Beitrag!

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.

Sehr spannend sind aber auch völlig neue typografische Möglichkeiten, die uns CSS3 eröffnet. Gerade dieser Bereich wurde von vielen Webdesignern bisher eher stiefmütterlich behandelt, da die Mittel und Möglichkeiten einfach sehr beschränkt waren. Wie Jürgen Liechtenecker im Zuge der Webdesigntrends 2011 bereits prognostiziert hat, sollten diese Zeiten nun endgültig der Geschichte angehören.

Wohin es geht

Doch was verheißen diese Neuerungen für uns Webdesigner? In erster Linie frischen Wind und viel Freiraum für kreative Ansätze.  Da CSS3 den typografischen Aspekt im Webdesign sehr stark aufwertet, können CI Manuals und Styleguides besser im Web übernommen werden, als dies bisher der Fall war. Die Vielfalt an verwendeten Schriften wird stark zunehmen und uns erfrischende Designs präsentieren, die dem Arial- Verdana-  Tahoma- Einheitsbrei den Kampf ansagen.

Damit wird aber auch klar, dass typografisches Gespür und Knowhow ein Must-Have im Skill-Set eines jeden Webdesigners sein wird. War es doch bisher so, dass diese Skills primär für Grafik Designer relevant waren, so wird es spätestens mit  dem Einzug und der flächendeckenden Verwendung von CSS3 essentiell, im Bereich der Typografie absolut sattelfest zu sein.

Ein paar gelungene Beispiele, um zu veranschaulichen, was im Bereich der Web Typografie durch Verwendung von CSS3 mittlerweile möglich ist.

Wer bin ich?

Ines Gamler ist mein Werter Name und ich darf mich in diesem Zusammenhang gleich ganz kurz vorstellen. Seit Anfang April unterstütze ich die Liechteneckers im Themenfeld Design, HTML und Online Kommunikation.

Screenshots von:

http://simpleasmilk.co.uk/

http://adpacks.com/

http://galp.in/

http://worryfreelabs.com/

http://markup-service.com/

http://www.amazeelabs.com/

http://www.stephencaver.com/

Wir prognostizieren: 2011 werden die Grenzen zwischen Designer und Entwickler noch wesentlich mehr verschwimmen. Es reicht nicht mehr, nur schöne Designs zu produzieren, sie müssen auch gute Funktionen bieten. Informationsdesign ist schon länger unser Motto, aber mit HTML5 und CSS3 kann man dieses noch mehr in den Vordergrund rücken.

Statt von schönen Photoshopkreationen für einen kurzen Moment geblendet zu sein, sollen die User in ein Umfeld bzw. in eine Story hineingezogen werden, in dem sie kein Bedürfnis verspüren, den “Zurück”-Knopf oder “schliessen” zu drücken. Dazu gibt es ein paar ausschlaggebende Faktoren, wie die Verwendung von stimmigen Farbschemata, das Erstellen eines intuitiven und interaktivem! Designs, einfache Informationsaufbereitung und schnelle Reaktionszeiten. Kombatibilität steht an erster Stelle. Kein Browser sollte vernachlässigt werden, kein aktueller Flashplayer soll im Weg sein, aber auch keine Einschränkungen auf welchem Device die Webseite aufgerufen wird.

Wenn man es in einem einzigen Wort sagen müsste: Einfachheit.

Das Design muss auf den unterschiedlichsten Endgeräten schnell, sicher und verständlich funktionieren.

Mehr CSS3 und HTML5

2011 wird das endlich Jahr von CSS3 und HTML5. Flash als einzige Programmiersprache für eine animierte oder interaktive Website hat ausgedient, denn viele der neuen Plattformen (nicht nur iPhones) können damit schwerlich bedient werden.

Der Aufschwung von HTML5 bedeutet aber nicht, dass Flash vollständig verschwinden wird – die beiden ergänzen sich eher, als das sie sich aufheben. Für uns ist klar: Speziell eingesetzt, kann Flash durchaus seine Vorteile haben -speziell im Games Bereich – und HTML5 kann noch nicht gänzlich alle Designelemente von Flash gleichwertig nachbauen. Wobei dies nur eine Frage der Zeit ist, wenn man sich folgende Website zu Gemüte führt: http://www.makeuseof.com/tag/html5games-directory-flashfree-browser-based-games/ Hier gibt es ein Directory von reinen HTML Spielen (flash-free!;)

Um einiges mehr als seine Vorgänger kann CSS3 – es macht kurzen Prozess mit Textschatten, Abrundungen bei Blöcken und Bild-Transparenz und ist deshalb eines der wichtigsten Designfortschritte 2011.

Übrigens hat HTML5 vom W3C ein Logo spendiert bekommen ;)

Mobile

Dieses Thema wird 2011 noch wichtiger werden: Das Design muss auf unterschiedlichen Plattformen verwendbar sein. Als Webdesigner reicht es nicht für die mobile Seite, einfach alle komplizierten interaktiven Details wegzulassen – das kann sie recht schnell leer wirken lassen. Allzu sehr sieht man derzeit fertige Moblie-Plugins im Einsatz. Mit CSS3 kann man hier bereits sehr viel mehr erreichen, prinzipiell sollte man aber eine Seite aber von Anfang an so konzipieren, dass sie auch mit Smartphones oder Tablets jederzeit abrufbar und bedienbar ist. Viel mehr noch sollten die Vorteile von Mobile Devices bei Webseiten genützt werden. Stichwort: Geodaten, Touchscreen, QR Codes

Wir haben hier besonders Sencha als Framework im Fokus, denn dieses setzt auf Webstandards und bedient auch Android. http://www.sencha.com/

QR-Codes

Diese Technologie geistert schon länger in den kreativen Köpfen herum, 2011 scheint sie nun endlich aus dem Schatten zu treten. Grund dafür ist natürlich die vermehrte mobile Nutzung von Websiten: Man kann die Codes zum Beispiel verwenden, damit User schnell auf die mobile Version wechseln können. Oder sie einsetzen, um Besucher mit einem speziellen Referral-Code auf der URL mitzutracken. Oder den Code als Gravatar für einen Kommentar auf Blogs etc. nutzen. Marketingideen geben wir hier nicht preis oder nur gegen Kohle ;)

Design für Touch Screens

Nicht zuletzt durch iPhone und iPad sind wir daran gewöhnt, taktil zu arbeiten. Daran muss auch das Design angepasst werden: Statt Links durch darüberstreichen anzuzeigen oder Drop-Down-Menüs einzubauen, muss man sich neue Navigationselemente für den Touch-Screen überlegen.

In diesem Zusammenhang stellt sich natürlich auch die Frage, wie User sich eine Seite ansehen: Auch wenn es für den Standard-Webgebrauch schwierig ist, horizontales Scrollen kann für Touchscreens durchaus Sinn machen – man denke zum Beispiel an bestimmte Magazine im iPad-Format.

Nicht zu vergessen ist in Folge dessen auch die Flexibilität des Layouts: Wenn User in Sekundenschnelle von horizontal auf vertikale Sicht umschalten können, muss das dazugehörige Design flexibel sein. Über Bildschirmauflösung wird dann schon lange nicht mehr geredet.

Vertikales Scrollen statt Paging

Seit Ewigkeiten besteht die Diskussion ob bei langen Inhalten ein Paging sinnvoll ist oder doch lieber lange Designs zum vertikalem Scrollen. Wir haben vor kurzem eine Umfrage dazu getätigt: http://liechtenecker.at/scrollen-vs-klicken/. Hier hat sich herausgestellt, dass die absolute Mehrheit mehr Usability im Scrollen sieht. Denn neue Ladezeiten verzögern den Surf-Flow und die Inhalte erschließen sich nicht gleich auf den ersten Blick. Zusammengefasst: Weil es einfach von der Hand geht und wesentlich komfortabler ist! Ergänzend gehen trendige Screendesigner ganz groß in diese Richtung.

Thumbnail-Design

Dieser Trend hat einmal nichts mit Apple zu tun, sondern mit Google: Wenn man mit der Suchmaschine unterwegs ist, muss man nicht mehr auf den Link klicken, um die Webseite zu sehen – es reicht ein Click auf die Vorschau. Nachdem bereits nahezu jeder Mensch auf der Welt weiß, wie man googelt, sollte man diesen Fehler nicht machen – der erste Eindruck zählt bekanntlich am meisten.

3D Kino

Der 3D-Trend aus dem Kino macht natürlich auch vor dem Webdesign nicht Halt. Technisch ist der Effekt natürlich nicht möglich, aber dennoch kann man sich die Tiefe durch Design-Tricks auf die Seite holen.

Einfache Farbschemata

Wie schon vorher angesprochen: Simplicity is King. Wer jetzt aber bei der Farbgestaltung nur an weiß, schwarz und Grauschattierungen denkt, liegt falsch. Stattdessen sollte man sich mit sogar stärkeren Farben spielen. Wichtig dabei ist, die Farbpalette auf zwei bis drei Farben zu minimieren, sonst wird es zu bunt.(Das ist auch nix Neues natürlich) Am besten schaut es aus, wenn man die Schattierungen dieser zwei Farben von hell bis dunkel gut ausspielt und bestens in Kontrast setzt.

Fotos als Hintergrund

Die Verwendung von großformatigen Fotos oder Bildern als Hintergrund wird 2011 noch weiter ansteigen. Sie sind ein einfacher Weg, um das Interesse und besonders Emotionen des Webseitenbesuchers zu wecken. Aber Achtung: Die Bilder müssen immer kontextbezogen sein, sonst wird es schnell verwirrend. Bzw. gehören die Bilder besonders trickreich eingesetzt (mit Verläufen und Pattern) Am besten man verwendet sanfte und leicht transparente Bilder, die mit dem Inhalt harmonieren und kombiniert diese mit der gesamten Farbpalette der Site.

Illustrationen

Illustrationen waren schon 2010 ein deutlicher Trend, besonders in Headern. Um die User Experience zu steigern, werden diese vermehrt im Kontext verwendet. Maskottchen spielen auch bei Webanwendungen oder Apps eine sehr wichtige Rolle wie man hier sehen kann. http://d-lists.co.uk/2011/01/25/web-design-mascot-showcase/

Typografie

Vorbei sind die Zeiten wo Tahoma, Arial oder Verdana regieren. Man kann durch verschiedene Technologien andere Schriftarten für Headlines oder zum Beispiel Claims einsetzen. Dadurch ist die Verwendung von Schriften auch fürs Design immer mehr in den Vordergrund gerückt.

360 Grad – Social Media Integration und ganzheitliche Strategien

Unternehmen bewegen online sich schon lange nicht mehr nur auf einer einzigen Webseite. Es gibt dort einen Blog, da eine Facebook Page und vielleicht auch ein Intranet. Damit diese Auftritte nicht einzelne Baustellen sind ist es wichtig ganzheitliche Online Strategien zu entwickeln wo jeder dieser Kanäle eine Rolle spielt. Welche Ziele werden verfolgt, Redaktionspläne, welcher Kanal ist die Basis, sind hier die wichtigen Fragen. Ein (roter) Designfaden sollte sich durch alle Kanäle ziehen um die Identifikation zu haben.

Fazit

Man könnte noch ewig darüber weiterschreiben, aber dies wären die wichtigsten Tendenzen die mir eingefallen sind. Wenn euch noch etwas eingefallen ist oder ihr anderer Meinung seid, bin ich natürlich offen und die Kommentare sind es auch.

Warum Webdesign nicht nur “schön” ist, sondern auch andere essenzielle Intentionen erfüllt, sollte man auch nicht mehr näher erklären müssen. Dennoch steht der Aspekt eines ansprechenden und modernen Screendesigns bei Webprojekten leider viel zu oft im Hintergrund. Und wenn doch, mache ich viel zu oft die Erfahrung, dass Screendesigns von (reinen) Grafikern umgesetzt werden, welche aus dem Print- oder illustrativen Bereich stammen. Das ist ein harter Vorwurf an die Grafiker, (es gibt hier sicher auch genug, die das “Neue Medien Handwerk” beherrschen) aber nur allzu oft hat sich die Art und Weise der Gestaltung eines Sujets oder einer Anzeigenkampagne so sehr eingeprägt, dass diese auch im Onlinesektor eingesetzt wird. Aber Online unterscheidet sich aus einem bestimmten Grund von Print. Der User interagiert mit dem was er gerade sieht. Deswegen handelt es sich bei Webdesign eher um Informationsdesign.

Auch ein kleiner Negativaspekt waren in letzter Zeit die prominenten SEO Themen. Da ging es nur mehr um Zahlen und “Call2Action”, was viele Designs und Entwürfe schon kaputt gemacht hat. Zahlen und Erfolgsmessungen sind auch bei Webseiten sehr wichtig, aber es geht immer darum was man damit sagen will und was man verkörpert. Die Optimierungen für SEO können nicht als Hauptthema gesehen werden. (Solange es nicht um einen Shop oder Affiliate-Seiten geht)

Der perfekte Mix zwischen ansprechendem Design und eine richtige Aufbereitung der Informationen machen ein gutes Webdesign aus. Der Konzepter und/oder Screendesigner sollte auch viel Ahnung von Usability haben. Nur so kann ein ordentliches Storyboard und ein User-Leitfaden entstehen. Wenn dann im Web-Team kuschelig zusammengearbeitet wird, entstehen echte Perlen.

Wie ordentliche und sehr ansprechende Webdesigns aussehen erläutern wir ab sofort in unserer Serie “Webdesigns we love” um hier auch einen kleinen Laufsteg der Möglichkeiten und Trends von modernen Webdesigns zu bieten. Herangezogen werden natürlich keine eigenen Projekte (obwohl die auch natürlich großteils reinpassen würden), aber lassen wir den Ego-Trip mal beiseite ;)

Webdesign we love #1

Fangen wir mit einer inhaltlich recht simplen Website eines Restaurants an. Der ganze Source ist valide und ordentlich, die Impressionen kommen ohne Flash aus. Es ist alles drauf, was notwendig ist und steht für ein sehr modernes und stylishes Lokal.

Was macht man an so einem Friday? Man zieht sich lässig an und fröhnt guter Musik. Beides kann ich euch zumindest virtuell bieten. Bei unserem letzten Side-Web-Projekt haben wir dem Electronic-Künstler monom eine passende Plattform entworfen und programmiert. Das WordPress Projekt ist komplett handgemacht, keine fertigen Elemente sind im Layout oder Theme enthalten. Was uns hier Spaß gemacht hat, war die einfache und simple Herangehensweise. So konnten wir in Punkto Kreativität freien Lauf geniessen.

Mach mir eine Community

Als aktuelles Beispiel gebe ich hier einen Textausschnitt aus einer Mailanfrage zum Besten:

"…verlangt wird eine eigenständige Community am Beispiel Xing oder Facebook im Bereich ….. – Ich möchte dabei eine komplette Userverwaltung, Gruppen, und die üblichen Social Network Features. Das Design soll höchst modern und sexy sein. Logo oder CD/CI ist noch nicht vorhanden… Sonstige Features: Newsletteranmeldung -Template, Chatfunktion…. Dabei ist unser Budgetlimit bei 700€.."

700 Euro ist eine Menge Geld, aber brechen wir es mal von der benötigten Zeit auf einen in der Branche üblichen Stundensatz herunter. Außerdem hab ich zum Vergleich an ein paar bezahlte Dienstleistungen aus meinem Leben gedacht. Bei meiner Friseurin sitze ich ca. 20 Minuten, es kostet mich 30€, mein Automechaniker verlangt 80€ in der Stunde, ein Architekt kostet > 100€, für meine Steuerberaterin zahle ich 80€ pro Stunde etc. Den Zahnarzt erwähne ich lieber nicht. Es bewegt sich eigentlich alles im Schnitt zwischen 60€ und 80€. BTW: Ich zahle alles sehr gerne, denn ich bekomme professionelle Dienstleistungen dafür.

Beispielrechnung: Webdesign

Bei der Aufwandschätzung am Beispiel Webdesign, nehme ich Elemente aus meiner Erfahrung bzw. den bisher realisierten Projekten. Das ist natürlich jenseits von irgendwelchen fertigen Templates oder Schnellösungen, ich rechne hier ein durchschnittliches Webprojekt.

• Kundenbetreuung: Ein vernünftiger Kunde will erstmal Konzeption und passende Betreuung. Dazu sind Meetings, Absprachen, Abstimmungen Präsentationen und Dokumente notwendig. ~ 20 Stunden
• Konzeption: Struktur, Sitemap, Storybook ~ 20 Stunden
• Design: Skizzierung, Logodesign, Corporate Design, Screendesign ~ 22 Stunden
• Frontend: XHTML und CSS – valider semantischer Code ~ 32 Stunden
• Backend: CMS, Datenbank, PHP ~ 32 Stunden
• Suchmaschinenoptimierung: Keywordrecherche, Implementierung ~ 8 Stunden

Wenn ich mich nicht verrechnet habe, komme ich bei meiner Modellrechnung auf 134 Stunden. Die Webagenturstundensätze in Österreich bewegen sich zwischen 60€ und 140€. Wenn wir einen passenden Mittelwert hernehmen, könnt ihr euch die Summe ja selber ausrechnen.

So viel Geld?

Das ist natürlich wesentlich mehr Zaster als 700€, dazu habe ich Folgendes zu berichten.

Ich komme aus dem Marketing und hab auch viel klassische Werbung und PR im Printbereich gesehen. Die Preise spielen da in einer ganz anderen Liga. Kunden sind gut und gerne bereit für eine 1/4 Seite in einem Magazin Zig-Tausende Euro auszugeben, weil das eben so üblich ist oder schon seit Jahren so gemacht wird. Welchen Return sie davon erhalten wissen sie nicht und an einem konkreten Beispiel weiß ich, dass mir mein Kunde von keinem einzigen Neukunden über diese Anzeigen erzählen konnte. (Obwohl dort die Neukunden immer gefragt werden woher sie kommen.) Ich habe ein Webprojekt für diesen besagten Auftraggeber umsetzen dürfen und siehe da: Nach 5 Monaten sind bereits ein paar Kunden über die Webseite bzw. zusammenhängende Webseiten in seine Praxis gekommen. Da hat sich die Investition der Webseite inkl. aller Onlinemarketingmöglichkeiten drumherum schon bezahlt gemacht.

Bevor kleine oder neue Betriebe Geld für anderwertiges Marketing ausgeben, sollte in eine professionelle Webseite investiert werden. Denn erstens, ist die Webseite heutzutage die Basis der meisten Werbeaktivitäten seitens Unternehmen und Suchaktivitäten von potentiellen Kunden. Zweitens, kann mit einem mit der richtigen Investition ins Web mehr erreicht werden als über klassische Kanäle. Wenn wir von professioneller Betreuung reden, werden auch immer Ziele mit dem Webprojekt verknüpft. Der Kunde bekommt ein einzigartiges Design, Ideen, Prozessverbesserungen, neue Marketingmöglichkeiten und vieles mehr. Es geht eben bei professionellen Webdesign nicht nur bloß um die Realisierung einer Webseite, sondern auch um Marketingmaßnahmen drumherum bis zu Online-PR oder Social Media Marketing.

Klassisches Marketing ist nach wie vor sehr wichtig und nicht zu unterschätzen, aber vielleicht relativert meine Zeitschätzung das vorherrschende Webdesign-Preisdumping ein wenig. Professionelle Dienstleistung soll passend bezahlt sein, jeder will fair für seine Arbeitsleistungen entlohnt werden lieber Zahnarzt, gell? :) Wie hat ein Freund unlängst zu mir gesagt: "Man bekommt immer das, was man bezahlt" – einfach , aber wahr.

Nicht mal mehr meine Eltern können ohne Social Media leben, nahezu jeder Internetbesucher hat irgendein Social Media Profil. Damit die richtige Verlinkung auf der eigenen Webseite oder dem Blog integriert werden kann, habe ich euch eine Auswahl an passenden Icons zusammengetragen. Die meisten der Icons sind free oder stehen unter CC Lizenz. Viel Vergnügen beim Durchklicken.

(max)Icone – Set #1

Handycons 2 – Jankoatwarpspeed

Origami Icons – I am Paddy

Heart Icons – TheDesignSuperHero

Set of Social Icons – Profimagazin

Socialize Icons – Dryicons

Social Media Icon Pack – Komodomedia

Cheers Icons – Webtoolkit4me

Vector Social Bookmark Icons – Snap2Objects

Socialize Icons – Dryicons

The Leaves – Templates.com

Circle Social Bookmark Icons – fasticon.com

My Works Icons – UtomBox

Aquaticus.Social – jwloh

Function Icon Set – wefunction.com

Social Bookmark Iconset — vikiworks.com

Free Download Social Icons – Designriver

(max)Icone Blog – Set 2

Vector Social Media Icons – Freegfx.net

Drink Web 2.0 – IconTexto

social bookmark icons for your blogs – edward.de.leau.net

Social Icons Made of Wood – webtoolkit4.me

Extended set of social icons – Tydlinka

boutons gratuits pour votre site – Soulvisual