1. Dateiname
Die richtige Benennung der Bilddatei ist Grundvoraussetzung für eine erfolgreiche Optimierung, denn das Bild rankt – eigentlich – nur unter den Begriffen der Bildbenennung. Daraus folgt, dass der Dateiname unbedingt aus relevanten Keywords bestehen sollte. Sprich “Keyword.jpg” bzw. “Keyword1-Keyword2.jpg”. Allerdings sollte der Dateiname niemals mehr als vier Keywords beinhalten und Umlaute sollten umgeschrieben werden (“ü” – “ue” etc.)

2. Dateipfad
Es ist ratsam, Google durch anlegen eines “Image-Ordners”, zu zeigen, dass es sich hierbei um Bilddateien handelt. Noch sinnreicher jedoch ist es, die Dateipfade Keyword-orientierter zu strukturieren, indem man wichtige Bilder in gleichnamigen Ordner ablegt. (z.B. www.domain.de/keyword1/keyword1.jpg).

3. Format
Bilder sollten mindestens 320 Pixel in der Höhe und Breite aufweisen, höchstens jedoch 1280 Pixel an der größeren Kante. Denn kleinere Bilder ranken für gewöhnlich schlechter und größere Bilder sind nur mit der Zusatzoption “Große Bilder anzeigen” zu finden.
Als Dateiformat zeigt sich das JPEG-Format als beste Ranking-Variante. Damit die Datei weder zu groß, noch zu stark komprimiert ist, solle sie ca. mit einer Qualität von 60 % bis 80 % abgespeichert werden.

4. Uniqueness
Es macht den Anschein, als versuche Google, duplicate content auch im grafischen Bereich abzustrafen. Daher sind eigens aufgenommene Fotos am idealsten. Schade nur, dass man selbige wohl eher selten zu Verfügung hat. Daraus ergibt sich, dass vorhandene Bilder zu einer Art Unikat nachbearbeitet werden sollten.

1. Umgebung
Damit ist der textuelle Content gemeint, der sich in unmittelbarer Nähe zum Bild befindet. Beispielweise also eine Bildunterschrift oder auch umfließender Text. In diesen Texten sollten die Keywords also verstärkt Verwendung finden.

2. Alt-Text
Der Alt-Text sollte immer in jedem IMG-Tag vorkommen, denn Google erkennt (noch) keine Bilder – nur Text! Außerdem ist der Text im Alt-Attribut essentiell für ein barrierefreies Webdesign. So sollten sowohl für Google, als auch für sehbehinderte Menschen im Alt-Text geschrieben stehen, was auf dem Bild zu sehen ist. Darüberhinaus wird der “Alternative Text” dann angezeigt, wenn das Image – aus welchen Gründen auch immer – nicht im Browser angezeigt wird. Ein weiterer, Usability-fördernder Faktor, den der Alt-Text mit sich bringt und ihn praktisch unverzichtbar in IMG-Tags macht.

3. Title-Attribut
Das Title-Attribut eine andere Form von “umgebenden Text” kann ebenfalls die Relevanz des Keywords positiv beeinträchtigen. Er dient in Webbrowsern einerseits als Tooltip, der bei hover über das Bild erscheint und/oder als Ersatz bspw. für eine Bildunterschrift.

4. Inhalt der Seite
Allgemein helfen alle gewöhnlichen SEO-Maßnahmen, die auf einer Seite für bestimmte Keywords durchgeführt werden, auch den Bildern, die für diese Keywords relevant sind. Logischerweise sollte man also unbedingt darauf achten, dass die Bilder, die man in den SERPs pushen möchte, auch zum Content der Seite passen.

1. Interne Verlinkung
Bilder können durch diese Maßnahme schneller und leichter von Crawler, Spider o.a. gefunden und indexiert werden.

2. Externe Verlinkung
Eine gute Verlinkung der Seite und auch der Bilder – gerade bei Keyword-relevanten Links – ist auch im Bild SEO von großer Bedeutung.

3. Mehrfach-Nutzung der Bilder
Nutzt man ein Bild mehrfach innerhalb einer Domain, so steigt für Google der Wert des Bildes.
Selbiges passiert bei einer Wiederverwendung auf einer anderen Domain durch so genannte “Hotlinks”. Allerdings könnte das Bild bei Google dann mit der “falschen” Domain gerankt werden.

• Dateinamen und Dateipfad der Grafiken sinnvoll vergeben
• Bildgröße vernünftig setzen und in den height- und width-Attributen angeben
• Einzigartige/neue/im Optimalfall selber erstellte Bilder verwenden
• Schlüsselbegriffe im umliegenden Text verwenden (Content muss zum Bild passen)
• Keywords im Alt-text und im title-Attribut des Bildes angeben
• Interne und externe Verlinkung der Grafiken & optimalerweise in der XML-Sitemap angeben
• Mehrfachnutzung der Bilder (vorranging auf der eigenen Domain)

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.

• Teledienstgesetz (TDG)
• Teledienste-Datenschutzgesetz (TDDSG)
• Mediendienste-Staatsvertrag (MDStV)
• Rundfunkstaatsvertrags (RfStV)

„Impressumspflicht für alle Seiten?“ Diese Frage kann man mit einem klaren „Jein!“ beantworten. Das Telemediengesetz drückt sich dahingehend folgendermaßen aus (TMG § 5): Dienstanbieter haben für geschäftsmäßige, in der Regel gegen Entgelt angebotene Telemedien folgende Informationen leicht erkennbar, unmittelbar erreichbar und ständig verfügbar zu halten.“
Ein Dienst muss jedoch nicht gewerblich sein, um kommerziell genutzt werden zu können. Daher sollten auch private Websites, die auch nur tangential einen finanziellen Nutzen für den Betreiber darstellen, ein Impressum aufweisen.

Desweiteren muss darauf geachtet werden, dass das Impressum nicht versteckt und ohne größere Umstände erreichbar ist. Mit anderen Worten: Es sollte auf jeder Seite eines Internetauftritts ein Link zum Impressum implementiert sein. Mindestens aber auf Start- oder Hauptnavigations-Seite.

Neben der richtigen Implementierung muss ebenfalls darauf geachtet werden, dass das Impressum auch vollständig ist. Verstöße gegen geltende Verordnungen können Geldstrafen von bis zu 50.000 € nach sich ziehen. Man sollte also auf der Hut sein und das Impressum ggf. sogar noch von einem Anwalt gegenprüfen lassen.

Nachfolgend kann man ein Musterimpressum betrachten. Dieses steht sowohl für Impressen von Website-Betreibern, die im Handelsgesetzbuch stehen, als auch für solche, die nicht im HGB zu finden sind.

Um sicherzustellen, für auf der eigenen Seite gesetzte Links nicht haftbar gemacht zu werden, wird mittlerweile nahezu allen Impressen ein Haftungsausschuss bzw. Disclaimer angehangen. Nun fragt man sich natürlich, warum überhaupt Links gesetzt werden, von denen sich dann doch distanzieren möchte. Gründe dafür gibt es mehere:

• Verlinkte Seiten können zwischenzeitlich den Inhalt ändern
• Es kann hin und wieder vorkommen, dass man sich nicht im Klaren ist, ob der Inhalt der verlinkten Seiten straf- oder zivilrechtlich zu beanstanden ist
• Wird auf der Website ein Blog oder ein Forum angeboten, ist es häufig gar nicht mehr möglich, sämtliche dort gepostete Links zu kontrollieren. Und manchmal bieten solche Links eben Content, der rechtlich nicht einwandfrei ist oder völlig themenfern ist.

Letzten Endes ist es rechtlich jedoch immer noch nicht 100%ig geklärt, inwieweit der Haftungsausschluss tatsächlich vor einer evtl. Strafe schützt.
Reine Lippenbekenntnisse reichen nicht. Ist es nämlich so, dass sich ein Seiten-Betreiber in seinem Disclaimer von Inhalten externer Verlinkungen distanziert, diese Inhalte im Endeffekt aber vollkommen seine auf der eigenen Website proklamierten Aussagen unterstreichen, so hilft ein Haftungsausschuss (völlig zu Recht) auch nicht weiter.

Schaden kann es jedenfalls nicht, Disclaimer in das Impressum zu integrieren. Blindlinks vertrauen sollte man dem jedoch nicht und stattdessen mehr oder weniger alle Links auf der Website regelmäßig prüfen bzw. nur Links auf externe Seiten zu setzen, denen man absolut vertrauen kann.

• Architekten
• Designern
• Fotografen
• Grafiker
• Komponisten
• Künstlern
• Programmierer
• Schriftstellern
• Typografen
• etc.

und das nicht nur im materiellen sondern auch im immateriellen Sinn.

• Bearbeitungen bereits vorhandener Werke, die eine besondere geistige Leistung erfordern (z. B. Übersetzungen)
• Datenbanken
• Lichtbildwerke (z. B. Animationen, Filme, Fotos oder Videos)
• Musikwerke
• Sammelwerke, die z. B. in der Art ihrer Zusammenstellung oder der Zugabe selbstformulierter Kommentare eine eigene bzw. besondere geistige Leistung darstellen
• Sprachwerke (Schriftwerke, Reden oder Computerprogramme)
• Werke der bildenden Kunst bzw. deren Entwürfe
• Werke der Baukunst bzw. deren Entwürfe
• Werke der angewandten Kunst (z. B. Gebrauchsgrafiken oder Typografie) bzw. deren Entwürfe
• Werke der Pantomime
• Werke der Tanzkunst
• Wissenschaftliche oder technische Darstellungsformen

Viele solcher Werke sind im Internet frei zugänglich. Auch dort greift das Urheberrecht. Das Internet ist also KEIN rechtsfreier Raum. Somit können Daten nicht einfach frei kopiert bzw. verbreitet werden.

“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.

• 100% dynamisch
• Mehrere Linkziele in einem Banner
• Schneller & kostengünstiger Austausch der Banner-Inhalte
• Beste Qualität mit über 16 Mio. Farben
• Mehr Aufmerksamkeit und somit eine höhere Conversion

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