explido Blog

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