Die Startseite wurde grundlegend überarbeitet. Das vier-spaltige Layout wurde aufgelöst und gegen einen, sich über die gesamte Breite ziehenden Content-Bereich ersetzt. Dieser wird von einem Keyvisual mit Slide-Funktion “gekrönt”. Das Format und die Positionierung der Grafik wird auf sämtlichen Unterseiten übernommen. Die Slide-Funktion wurde gezielt nur auf der Startseite verwendet. Sowohl die Suche, als auch die Sprachauswahl befinden sich nun im Header-Bereich.Die Haupteinsprungziele im Content und in der linken Navigation zu den einzelnen Kategorien sind nun in der Header-Navigation zu finden, was die Orientierung auf der Seite erheblich erleichtert. Der Willkommenstext wurde userfreundlicher gestaltet und gegen Bulletpoints ersetzt. Zudem wird hier verstärkt auf die internationale Ausrichtung des Unternehmens hingewiesen. Zusätzlich sind im Content-Bereich nun aktuelle News aus den Teilbereichen den Unternehmens zu sehen, die neben der Kontaktbox sehr prominent gestaltet bzw. platziert wurden. Die Box der Photonic News (Firmen-Fachzeitschrift von LASER COMPONENTS rund um das Thema “Laser”) wurde layout-technisch modernisiert. Das Header- und Footer-Design wurde komplett für sämtliche Unterseiten übernommen.

Das dreispaltige Layout wurde von der alten Seite auf die neue übertragen. Die linke Navigation wurde auf den Unterseiten im Vergleich zur alten Website extrem reduziert. Sie beinhaltet jetzt nur noch die für die jeweilige Kategorien bzw. Themengebiet (in diesem Fall “Laserdioden”) relevanten Punkte. Der Intro-Text wurde in der Header-Grafik implementiert und bietet so in Zusammenhang mit dem Keyvisual eine optimale Useransprache. Die Links im Content-Bereich wurden gegen großflächige Buttons ausgetauscht, welche neben einen Themenbild noch einen Teaser-Text zum jeweiligen Unterpunkt beinhalten. Die rechte Seitenspalten dient den Zusatzinformationen, so dass darin z.B. eine zusätzliche Kontaktbox oder eine Laserdioden-Suchmaschine platziert werden können.

Der hier zu sehende Aufbau orientiert sich sehr stark am Layout der Laserdioden-Unterseite.

Hier wurde das Themenbild erwartungskonform auf der linken Seite platziert. Der lange Text wurde in verschiedene Themengebiete aufgeteilt (bspw. Intro und Beschreibung), wodurch die Lesefreundlichkeit erhöht wird. Via DropDown können die für den User relevanten bzw. irrelevanten Texte ein- oder ausgeblendet werden. Die früher vorhandene Seite “Ansprechpartner” ist gänzlich verschwunden. Grund dafür war die Implementierung eines personalisierten Kontakts auf der rechten Content-Seite, welcher jedoch ausschließlich erst in der dritten Navigationsebene erscheint.

Statt einer eigenen Seite bzw. eines eigenen Punktes in der Navigation ist die Laserdioden-Suchmaschine nun in einer Lightbox implementiert. Somit ist es möglich, sie von nahezu jeder Seite aus aufzurufen. Das Prinzip der Auswahl über Dropdowns wurde beibehalten, aber grafisch moderner und ansprechender in das neue Website-Design angepasst.

Unternehmens-spezifische Seiten wie bspw. “Über uns” besitzen einen leicht differenzierten Aufbau im Vergleich zu den Produktseiten: Der Content-Bereich ist zweispaltig. Im unteren Bereich wird der rechte Content nochmals in drei Boxen unterteilt, die ausreichen Platz für zusätzliche, themenrelevante Informationen bieten.

Wie auch bei “Über uns” wurde sich bei den “Photonic News” für ein zweispaltiges Layout entschieden. Lange Textpassagen wurden entfernt. Stattdessen findet man nun nur noch Teaser-Texte (unterstützt von Themenbildern) zu den Artikeln in der jeweiligen Ausgabe der Photonic News-Ausgabe, die bei Bedarf auf einer separaten Seite vollständig gelesen werden können.

Um die Navigation auf der Website zu erleichtern, öffnet sich per Hover über die einzelnen Navigationspunkte eine Flyout-Navigation, über die auch direkt tiefere Ebenen der Seite erreicht werden können.

Da der Kontakt ein sehr wichtiges Seiten-Element ist, befindet sich im Header ein prominenter Kontakt-Button.Dieser öffnet eine seitenübergreifende Dropdown-Fläche, in der neben den Kontaktdaten auch ein Kontakt-Formular und eine Anfahrtsbeschreibung integriert ist.

Die gleiche Funktion wird auch beim Unternehmens-Button genutzt. In dieser Dropdown-Fläche sind alle unternehmensbezogenen Informationen grafisch so gegliedert, damit der User relevante Informationen schnell erreicht. Der Aufbau wurde von der Flyout-Navigation übernommen.

Gleich zu Beginn der Veranstaltung wurde von Stefan Hentschel (Head of Mobile Ad Sales DACH, Google) darauf hingewiesen, dass man sich im Vorfeld genau überlegen sollte, wohin die Reise gehen soll. Dabei ist es nicht immer sinnvoll, eine umfangreiche und aufwendige App zu programmieren. Eine Smartphone-Optimierung der bestehenden Webseite ist meist schon ausreichend und kann schneller und kostengünstiger realisiert werden. Beide Varianten bieten Vorteile, aber auch Nachteile, die es im Vorfeld abzuwägen gilt – so Stefan Hentschel.

Großen Anklang fanden die ersten Ergebnisse der Studie “Mobile Consumer Behaviour”, die Google zusammen mit der Fachgruppe Mobile des BVDW durchgeführt hat. Auch der Vortrag von Amanda Rosenberg (Business Development Manager Mobile, Google) über Google App Highlights, wie „Voice Search“ oder „Translate“, wurden mit regem Interesse verfolgt.

Neben den interessanten Vorträgen aus verschiedenen Blickrichtungen, rundete Google die Veranstaltung mit informativen Workshops ab. Hier wurde auf folgende vier Themen genauer eingegangen:

• Mobile Search mit Google Adwords
• Mobile Display per Google/AdMob
• Mobile Publisher Workshop bzgl. Google/AdMob
• Mobile Usability

Den wohl für Webdesigner und aus Conversion-Sicht interessantesten Vortag der Veranstaltung präsentierte Jos Meijerhof (Project Manager Conversion, Google) zum Thema mobile Usability. Jos erläuterte wichtige grafische, konzeptionelle und technische Anregungen zur Einhaltung einer guten Usability auf mobilen Devices. Dahingehend gab er den Teilnehmern außerdem einige Tipps mit auf den Weg, um den Start ins mobile Zeitalter möglichst problemlos meistern zu können.

“Composing” (=”zusammensetzen”, “Komposition”) ist ein Begriff aus der Bildbearbeitungs-Branche. Es werden hier mehrere Bilder zu einem großen Ganzen zusammengefügt.

Ziel eines jeden Composings sollte sein, dass der Betrachter nicht merkt, dass es sich lediglich um eine Bildzusammenstellung handelt. Dies ist jedoch nur durch Beachtung wichtiger Regeln (z. B. logisches Setzen von Schatten bzw. allg. Beachten von Lichtverhältnissen; sauberes Freistellen einzelner Bilder/Bildelemente etc.) möglich.

Größtenteils gelten diese Composing-Regeln natürlich auch bei Fantasie-Gebilde wie in Abb. 1.

Abb.1: Beispiel für ein Bild-Composing

Unter Retusche (franz. für “Nachbesserung”) versteht man die nachträgliche Verbesserung beziehungsweise Veränderung eines Fotos oder einer digitalen Grafik. Ziel kann der Wunsch eines verbesserten visuellen Effekts oder eine Bildfehlerkorrektur sein.

Abb.2: Beispiel für eine Retusche

Aus dem Sound-Technik-Bereich abgeleitet, verhält sich dieser Effekt ähnlich im Grafik-Bereich: Hier ist die Alias-Entstehung ebenfalls auf Unzulänglichkeiten beim Abtasten zurückzuführen. Bemerkbar macht sich dieser Fehler durch das Auftreten von Moiré-Mustern (zum Beispiel verschwimmen eng zusammenliegende Linien) oder durch das Entstehen von Stufen bei Schriften, Rundungen oder in der Kontur bei abgeschrägten Grafiken. Je niedriger bzw. fehlerbehafteter die Abtastrate ist, desto störender wirken sich diese Effekte auf den Gesamteindruck des Bildes aus.

Abb.3: Stufenbildung und Kantenglättung

Zur Verhinderung bzw. Abschwächung von Aliasing-Effekten gibt es das Anti-Aliasing. Es bewirkt, dass sich die Pixel nicht nur an ihrem Nachbarn orientieren, sondern stattdessen eine Schnittmenge an Farb- und Positions-Werten aus dem umliegenden Bereich gebildet wird. Diese Schnittmenge wird dann dazu genutzt, um die jeweiligen Pixel mit adäquaten Farbwerten auszustatten.

Wird Anti-Aliasing ausschließlich zur Bekämpfung des Treppeneffekts bzw. der Stufenbildung eingesetzt, spricht man auch von Kantenglättung.

Bei dem Wort “Scribble” (=”Kritzelei”, “Schmiererei” oder “unsauber Geschriebenes”) handelt es sich um eine eingedeutschte Begrifflichkeit aus der Werbebranche sowie dem Kunst-Bereich. Man bezeichnet damit einen meist per Stift auf Papier umrissenen bzw. angedeuteten Grobentwurf.

Ein Scribble dient lediglich der Ideenfindung und steht im Unterschied zur Skizze am absoluten Anfang eines Projekts. Er kann also völlig frei von Regeln und Richtlinien erstellt werden.

Grundlegender Zweck eines Scribbles ist es, schnell und unkompliziert Ideen und deren elementare Darstellung grafisch umzusetzen und plausibel zu machen. Es kann also auch sehr gut während einer Brainstorm-Phase genutzt werden. Außerdem kann die Verwendung von Scribbles auch zur Unterstützung der internen Kommunikation beitragen.

Abb.1: Beispiel für einen Scribble

Die Skizze ist sozusagen das Update zum Scribble und unmittelbarer Vorläufer des Mockup und/oder Wireframe. Hierbei kommt es, wie beim Scribble, weniger auf die Genauigkeit an. Zweck ist es eher, Ideen möglichst schnell grafisch festzuhalten. Auf die Proportionen zwischen den auf dem Rohlayout enthaltenen Objekten sollte hingegen aber Wert gelegt werden. Auch der Kontrast bzw. die Farbigkeit sollte hierbei nicht zu kurz kommen.

Seit geraumer Zeit ist es auch möglich, durch diverse Grafikprogramme, am Computer erstellte Skizzen in Hand gezeichnete Scribbles umzuwandeln.

Eine gute Skizze kann ggf. auch als Vorlage für den Kunden eingesetzt werden.

Abb.2: Kombination aus Skizze und Wireframe

“Wireframe” (= “Drahtgitter”) ist eine Begrifflichkeit aus der Informationstechnik.

Ursprünglich hat man lediglich im Computer Aided Design erschaffene Objekte als Wireframes bezeichnet. Hier werden z. B. statt (farbiger) Pixelflächen nur die Kanten der Objekte gezeichnet und ggf. noch Hilfslinien eingefügt, um einerseits aufzuzeigen, dass es sich um Flächen handelt, andererseits um eine plastische Wirkung zu erhalten. Das dadurch entstehende Gitternetz ist der Grund für den Namen “Wireframe”.

Im Webdesign werden häufig Piloten von beispielsweise Websites, Bannern oder Flyern, die sich in einem sehr frühen konzeptionellen Stadium befinden, als Wireframe bezeichnet. Hier gibt es zwei Arten des Ebengenannten: der statische und der dynamische Wireframe. Bei Ersterem werden grundlegende Elemente (z. B. Navigation, Bereich für Header/Content/Footer etc.) auf einer einzigen Seite dargestellt. Von dynamischen Wireframes spricht man, wenn einzelne, statische Wireframes zu einem interaktiven Ganzen zusammengefügt werden und somit einen ersten funktionierenden Prototypen einer Website darstellen.
Aber egal, um welche Art Wireframe es sich handelt, ist lediglich eine sehr einfache bzw. rudimentäre Darstellung einzelner Grafikelemente notwendig, da hierbei die Konzeption und nicht um das Design im Vordergrund steht.

Der Begriff “Mockup” wird in mehreren Bereichen bzw. Berufsgruppen verwendet (z. B. Konsumgüterindustrie, Softwareentwicklung oder Zahntechnik). Ursprünglich wurden Attrappen mit diesem Begriff belegt. Im Design-Bereich werden heutzutage maßstabsgetreue Modelle oder Nachbildungen, die zu Präsentationszwecken verwendet werden, als Mockups bezeichnet. Häufig werden hier auch die Begriffe “Wireframe” und “Mockup” synonym verwendet.

Abb.3: Beispiel für ein Mockup

Unter dem Begriff “Layout” versteht die konkrete Visualisierung eines Konzepts bzw. einer Idee. Das dadurch entstehende Bild vermittelt dem Kunden oder allg. dem Auftraggeber bzw. den Personen, die nachfolgend z. B. für die technische Umsetzung zuständig sind, einen Eindruck, wie beispielsweise der spätere Webauftritt auszusehen hat.

Das Layout dient außerdem als Entscheidungsgrundlage für weitere Schritte (Änderungen, Erweiterungen etc.).

Der textuelle Content wird in der ersten Erstellungsphase häufig nur als Fülltext (Lorem-Ipsum) eingefügt und erst später (bei der technischen Umsetzung oder erst durch den Kunden nach der letztendlichen Fertigstellung) eingefügt.

Abb.4: Beispielbild für ein Layout

Die Phase der Reinzeichnung findet man ausschließlich im Print-Bereich. Diese beginnt nach der Freigabe des finalen (Rein-)Layouts. Hier werden drucktechnisch notwendige Parameter eingestellt. Dazu zählen unter anderen Beschnittzugabe, Farbmanagement, Setzen von Schnittmarken oder Trapping.
Die Reinzeichnung stellt also normalerweise das Ende des grafischen Gestaltungsprozesses im Printbereich dar.

“Totgeglaubte leben länger” Dieses Motto hat sich Flash zu Eigen gemacht und 2009 für einen erneuten Siegeszug im Webbereich genutzt. Aufgrund von Grenzen, die SEO und Usability stecken, findet man komplette Flashauftritte zwar eher selten, aber in immer mehr Websites sind einzelne Flash-Elemente verbaut, die die Interaktivität der Seite erheblich steigern und sowohl Wiedererkennungswert als auch Image des Unternehmens erheblich verbessern. In 2010 wird es wohl eine Fortsetzung geben…

Bei Eyequant handelt es sich um ein neurowissenschaftliches Computermodell, welches die Aufmerksamskeitswirkung verschiedener Bereiche auf einer Webseite misst und auf verschiedene Arten darstellt (z. B. Heatmap, Statistiken oder Perception Maps). Es basiert auf Eyetracking-Simulationen, die mit über 300 Probanden durchgeführt wurden. Dadurch lassen sich jetzt Seiten innerhalb von Sekunden testen, wohingegen frühere Eyetracking-Studien mehrere Wochen in Anspruch genommen haben. Die dadurch entstehenden Zeit- und Kosteneinsparungen für explido und unsere Kunden sind enorm.

Erwartungskonforme Platzierung von (grafischen) Elementen auf einer Website ist schon seit Jahren eines der Hauptthemen im Usability-Bereich. 2009 wurden dann auch Studien bzgl. der Gestaltung von Online Shops durchgeführt. Das Ergebnis kann man in unterem Whitepaper sehen.

Abb.1: Whitepaper für erwartungskonforme Platzierung diverser Elemente auf einer Website

Systemschriftarten sind zwar unabdingbar, aber langweilig. Ein sich daraus entwickelnder Trend, der bereits im letzten Jahr seinen Anfang nahm, ist der Gebrauch großer und ausgefallener Schriften. Diese werden ggf. noch mit einem Gimmick versehen, was aus ihnen perfekte “Eyecatcher” macht. Besonders geeignet sind die Schriftkompositionen, von denen mittlerweile auch viele zum Download angeboten werden, für Landingpages oder Single-Page-Layouts.

Abb.2: Beispiel für die Integration überproportionierter Schriften

In Kombination mit großen Schriften wird auch der Design-Minimalismus in diesem Jahr eine große Rolle spielen. Grafik-Elemente oder Illustrationen findet man hier selten. Dafür aber erstaunliche Farbkombinationen und versteckte grafische Spielereien, die erst bei Erkundung der Seite sichtbar werden.

Abb.3: Beispiel für Minimalismus

In Verbindung mit großen Schriften werden auch immer häufiger grafische, plakative Elemente auf der Seite eingebaut. Einerseits wird einem Webauftritt damit Individualismus verliehen, andererseits wird die Neugierde des Users geweckt. Wie auch große Schriften, findet man diese grafischen Gestaltungsmittel sehr häufig auf Landingpages und Single-Page-Layouts, aber auch auf Produktdetailseiten.

Abb.4: Beispiel für den Gebrauch von Zeichnungen/Illustrationen auf einer Website

Web und Print fusionieren mehr und mehr. Viele Menschen begrüßen Webauftritte, die im Layout an Zeitungen bzw. Magazine erinnern. Grund dafür ist wohl einerseits das Gefühl “Back to the roots” und andererseits eine gute Übersichtlichkeit vor allem dann, wenn viele Produkte bzw. viel Text oder Bilder auf einer Seite positioniert werden soll. Vor allem für Online-Shops und Blogger-Seiten eignen sich solche Layouts.

Abb.5: Beispiel für ein Layout in “Magazine style”

Wie sich bereits im letzten Jahr angedeutet hat, erfreuen sich vor allem Panoramaaufnahmen mit verschiedensten Motiven immer größerer Beliebtheit. Einer der prominentesten Vertreter hiervon ist die letztes Jahr auf den Markt gekommene Suchmaschine Bing von MSN. Auch Bilder aus der Natur sind sehr beliebt. Den Usern wird dabei z. B. ökonomisches Bewusstsein des Unternehmens suggeriert, wodurch wiederum das Vertrauen in das beworbene Produkt oder eben des Unternehmens gesteigert wird.

Abb.6: Beispiel für die Integration großer Bilder auf einer Website

Die User werden anspruchsvoller, die Technik schreitet voran und viele Unternehmen öffnen sich immer mehr dem Web 2.0. Die Gelegenheit also für Designer, ihrer Kreativität freien Lauf zu lassen. Außerdem schreitet das Kino mit gutem Beispiel voran: 3D ist im Kommen und 2010 wird wohl DAS Jahr für räumliches Design werden.

Abb.7: Beispiel eines plastisch wirkenden Bildes

Das Surfen im Internet soll für immer mehr User zum Erlebnis werden. Langweilige, statische Auftritte sind daher nicht gerade dafür prädestiniert, die Kauflust zu steigern. Außerdem steigt die Affinität der Nutzer zum Internet rapide an. Flash, Ajax und andere programmiergestalterische Tools werden sich in 2010 also mehr und mehr an Beliebtheit erfreuen und ermöglichen es den Designern, mehr intuitive Seiten zu kreieren, als es jemals in der Vergangenheit der Fall war.

Abb.8: Beispiel eines frischen, positiven Layouts

Es sollte darauf geachtet werden, dass die Datei-Größe der Banner aufgrund von Ladezeiten und der für Publisher (Website-Vermarkter) entstehende CPI einen gewissen Wert (Werbemittelgröße in KB) nicht überschreitet. Die Grenze dafür liegt mittlerweile bei fast allen Partnerprogrammen, Vermarktern und Ad Networks zwischen 25 und 60 KB.
Natürlich ist es möglich, durch Erstellungsprogramme (wie z.B. Photoshop) die KB-Zahl nach unten zu korrigieren. Die daraus entstehenden Qualitätsverluste lassen jedoch keinen sehr großen Spielraum zu.

Flash bietet die Möglichkeit, einzelne Grafikelemente auszulagern, womit die eigentliche “Loader-Datei” extrem in der Datei-Größe reduziert wird. Die einzelnen Frames werden dann als Bilddateien in den Loader hinein geladen. Das Prinzip verdeutlicht die unten abgebildete Grafik:

• Aufsplitten der Banner in verschiedene Komponenten (z.B. Loader und Content)
• Messbarkeit und Filterung jedes einzelnen Klicks
• Möglichkeit, praktisch unendlich viele ClickDestinations in einem Banner einzubauen
• “Inhalte” innerhalb der Banner können beliebig oft getauscht werden, ohne dass der Banner in den Netzwerken neu eingespielt werden muss.