get a grid by Anna-Lisa Schoenecker

GET A GRID DOKUMENTATION MIND THE GAP - SEMINAR INTERAKTIVES GESTALTEN PROF. ANNA - LISA SCHÖNECKER SOMMERSEMESTER 2010

HTTP://GETAGRID.FH-MAINZ.DE

Get a Grid

GET A GRID

ANALYSE_

IDEE_

LEGENDE_

IMPRESSUM_

Website auswählen Branche Seite

AUSWAHL AUSBLENDEN_ EINBLENDEN_ Parameter einstellen

Branche Seite

Layout

100%

Bild Grafik Navigation Grundraster Logo Banner / Werbung Typografie

100%

Headlines Subheadlines Fließtext Interaktion

100%

Links Extras Screenshot

MacBook Pro

Mind the Gap - Kursbeschreibung Gestalterische Rasteranalyse digitaler Medien Sie lernen praktische Webkenntnisse und analysieren und dokumentieren Rastersysteme digitaler Medien nach gestalterischen und kommunikationsstrategischen Aspekten. Vorlesungen geben Ihnen vor jedem Arbeitsschritt Einblicke in Struktur und Aufbau webbasierter Anwendungen. In Gruppen端bungen trainieren Sie das erstellen von u.a. Informationsarchitektur und Navigationsstrukturen, Interaktionsprinzipien, Wireframing, strukturiertem Arbeiten, usw. An Hand einer Medienanalyse werden Vor- und Nachteile bestehender Webseiten hinterfragt. Eine gemeinsame Recherche zu Rastervarianten, die im Internet zu finden sind, werden in einer Dokumentation gestalterisch zusammengefasst.

INTERAKTIVES DESIGN_

Begriffsdefinition Interaktives Design gestaltet f端hrende Systeme, die Informationen f端r den Betrachter brauchbar machen, ein Interagieren erm旦glichen und R端ckmeldung geben.

Usability - Methoden Anforderungen definieren Inhalte sammeln Zielgruppenanalyse und Darstellung: beispielhafter Persona (user scenario) Befragung, Umfrage, Beobachtung, Workshops, CardSorting, usw Wireframe-Prototyp Anforderungsprofil erstellen Verwertbarkeit Benutzbarkeit testen Orientierung Vorschau R端ckmeldung (Feedback)

Zielgruppen Unterscheiden sich nach Lebenssituation Berufe Rollen Ziele Motivationen Nationalit채ten Typen Allgemeinen Merkmale

Methodology Kontext- und Konzeptrecherche Ethnographische Studien mit der Zielgruppe Quantitative Umfragen (Fokusgruppen) Card-Sorting (K채rtchen) und Konzeptpr체fung Interviews, gemeinsames Erstellen eines Prototypen Usability-Testing Testen bestehender Sites und Konkurrenten Usability-Testing eines Prototypen Interativer Prozess Benchmarking Vergleich von Konkurrenten

Wahrnehmung und Aufmerksamkeit Informationsfülle stellt hohe Anforderungen an die Aufmerksamkeit, des Einzelnen, Ermüdung und Überdruss setzen schnell ein Informationen suchen, Relevantes zu erkennen, Irrelevantes zu ignorieren, Ähnliches zu unterscheiden, Richtiges auszuwählen Gestaltung muss Aufmerksamkeit steuern Größe, Kontrast / Helligkeit, Farbe, Position, Reihenfolge Hell-dunkel, groß-klein, scharf-unscharf, komplexeinfach Farbig-grau, rein-gemischt, gesättigt-ungesättigt, warm-kalt, bunt-einfarbig

Aufmerksamkeit Reihenfolge der Wahrnehmung Oben links nach unten rechts (traditionelle Leserichtung) Bilder mit Bildunterschriften Navigation Sichtbar / nicht sichtbar (Mouse-Over, Rollover) Scrollen, Browsen (Seite f端r Seite) Konventionen werden schneller erkannt (funktional) Icons z.B. Warenkorb Eindimensional - dreidimensional

Orientierung und konsequente Benutzerführung Übersichtliches Layout Klare Nomenklatur und Bezeichnungen Einheitliche und beständige Anordnung wiederkehrender Elemente Crumb trail (Klickpfad) Klare Auszeichnung und Differenzierung Typografische Hierarchie der Inhalte Paginierung und Anwählbarkeit aller Seiten Siteindex

AFFORDANCE_

MAPPING_

INTERAKTIVE LINKSPRACHE_

NAVIGATION_ UND BENUTZERFÜHRUNG

Ziel der Benutzerführung nach J. Preece satisfying zufriedenstellend enjoyable erfreulich fun lustig entertaining unterhaltsam motivating motivierend useful nützlich beautiful schön supporting creativity Kreativitätsfördernd rewarding lohnend emotionally fulfilling emotional erfüllend

INFORMATIONEN ORGANISIEREN_

Inhaltsarten Dienstleistungen Werbung Programme FunktionalitĂ¤ten Unterhaltung Lerninhalte Nachrichten Information Produkte Ă&#x153;berlappungen von Inhalten mĂśglich

Nutzung von Inhalten Gestalten Spielen Formulare ausfüllen (Bestellungen, Anmeldung) Veröffentlichen Schreiben Suchen (Schnellsuche, Detailsuche) Sortieren Virtuell sichern (Liste, Favourites, Warenkorb) Sichern / Runterladen Blättern / Umschauen Auswählen Lesen Ansehen

ORDNUNGSSYSTEM FARBE_

Zugriffe (Access) Navigationsebenen Erste Ebene (obere, primary/core navigation) Zweite Ebene(n) (untere, secondary/sub navigation) Zus채tzliche Ebenen (House keeping, footer, Metaebene) Schnellzugriffe Zielgruppen- oder Funktionsorientierte Quicklink Dropdowns Gruppierte Metalinks Links verwandter / 채hnlicher Themen Nutzerf체hrung im Content-Bereich Features, Promo, Banner, Artikel, usw. Redaktionelle und marketingorientierte F체hrung Konventionen der Nomenklatur (Benennung) Kontakt, Wahrenkorb, Impressum, Index (Sitemap), Home / Startseite

Zugriff Linear / bindend (check-out) Benutzer bestimmt die Zeitdauer aber nicht die Abfolge Formulare (Formelemente) Pfad (crumb trail) Meist nur ‘nächste’ oder ‘zurück’ Funktion Vernetzt und geführt Links, Hauptnavigation, Schnellzugriffe, Suche, usw. Nutzer wird geführt kann aber alle Inhalte ansteuern Spielerisch / erzählerisch / kreativ Benutzer bestimmt die Zeitdauer, Abfolge, Intensität, Endergebnis Intensiv interaktiv, Funktionen

Linksprache Hyperlinks Vernetzung von Inhalten und Systemen ‘Links‘ / cross links Typografisch = Wörter als Systemtext (‘live text‘) Grafische Schrift (Navigationsgrafiken / Buttons) Ikonografisch / bildlich Symbole / Bilder mit und ohne Schriftzusatz Formelemente Dropdowns als Schnellzugriff (quick access) und Bedürfnissorientiert (needs based) Räumlich / 3D Mini-me (Thumbnail) Mischarten möglich

Menüs, Schaltflächen und Navigationstypen Standards Horizontal oben (Web) Vertikal marginal links (Web) Horizontal unten (Kiosk) Horizontale Reiter, “tabs” Vertikal Listen (links oder rechts) Horizontal Leiste am unteren Bildrand Zeitleisten (horizontal/vertical) Methaphern: Schreibtisch, Bühne, Leuchtkasten, Welt, usw. Tag clouds (Schlagwort-Wolke) Dynamische Rollover-Menü (ausfahren) Navigationsfenster steuert Hauptfenster Auswahllisten und Dropdownmenü (einzel und kontextbezogen) Filter

STRUKTUR UND HIERARCHIE_ EINFACH / FLACH VERNETZT / STANDARD KOMPLEX / TIEF SITEMAP GIBT AUSKUNFT ÜBER VERNETZUNG UND TIEFE BEISPIELE SITEMAPS

EINFACHE NAVIGATIONSSTRUKTUR_ FLACH

VERNETZTE NAVIGATIONSSTRUKTUR_ WASSERFALL

KOMPLEXE NAVIGATIONSSTRUKTUR_ SILO

RASTER IM WEB_ BEISPIELE

GET A GRID_ DAS PROJEKT

Projektbeschreibung Im Internet bekommt man schnell den Eindruck, dass die Vielfalt an gestalterischen Lösungen so groß ist wie die Anzahl der Webseiten. Aber ist das wirklich so? Oder haben sich in verschiedenen Branchen inzwischen gestalterische Standards entwickelt? Diese Fragen waren für Studierende der FH Mainz Anlass für ein Projekt. Das Ergebnis stellt ein Analysewerkzeug zur Verfügung, das die Möglichkeit bietet, einen Überblick über die Struktur und den Aufbau von Websites zu bekommen. Anhand von Musterflächen, die den entsprechenden Inhalten der Website zugeordnet sind, kann ihre Gestaltung analysiert und mit anderen verglichen werden.

WIE SOLL DAS KIND HEISSEN?

Namesgebung - Vorschl채ge raster buster raster blaster grid minds get a grid / get the grid musterseite gridwalk gridscanner show the grid spin the grid web grid system www. er gridler / gridlr mind the gap rasterfari grab the grid / grab a grid gridworld gridmaster gridvers gridunivers rasterlaster

CORPORATE DESIGN_

SCHRIFT_

Die Wortmarke / Poster Bodoni BT - Italic -

GET A GRID

60 PT

GET A GRID

48 PT

GET A GRID 24 PT

Headline Font / Neutraliser -

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!?§$%&/()#*+«» Web-Font / Arial -

Romnos praressul hi, Cat fuid de nerfex sedi patus, me perfic tum perfer quis vistroponsum tatuus vili, tus. Tus condiis ex num nocatium ut vesis, sendem tem elum mus, us mei si facchuci simus hilicibunum iurobus orsusquam oporis in Ita videm nonstem que mora nos, nocus rei inatast publien icatia vist? Nihicae, que deesilina tesi publis, cons bonstiqua nonfendam untiam idiu ex num faudeatque at. Averimmo ut pre, con Etraet in dincum et vendes co cautercesu vic oca; iaequasta te num hilicae ta, vocut iptis

FARBEN_

Blau RGB = CMYK =

0 / 178 / 220 77 / 0 / 7 / 0

Schwarz / Grau RGB = 0/0/0 CMYK = 0 / 0 / 0 / 100

100

GRAFISCHE SYSTEMATIK_

ENTWICKLUNG_

x x x x x x

Bild

Headline Subline Lesetext

Grafik verlinkter Text Banner

Logo

Navigation

Seitenl채nge

Navigation

Grundraster

Bild

Text

Link

FlieĂ&#x;text

Subheadline

Headline

Logo

Navigation

Grundraster

Bild

Text

Link

FlieĂ&#x;text

Subheadline

Headline

********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** Logo ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** Werbung ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** ********************************************************************************************************************************************************** **********************************************************************************************************************************************************

GRAFISCHE SYSTEMATIK_ FINAL

Navigation

Bild

FlieĂ&#x;text

Grafik

Subheadline

Logo

Headline

Grundraster

Interaktion

FARBLICHE ZUORDNUNG_ WEBSITE

INTERFACE DESIGN_ (GUI)

USABILITY-TEST_ BEFRAGUNG VON 26 PERSONEN

Usability-Umfrage Erster Eindruck / Erwartung / Erklärung notwendig? Was soll erreicht werden? Wo würdest Du anfangen? Was als nächster Schritt? Ist der Sinn des Projektes verständlich? Entspricht der Umfang Deinen Vorstellungen? Welche Lösung / welches Design gefällt Dir am besten? Welche Branchen würdest Du als Designer gerne vergleichen? Welche Muster sind sinnvoll? Wie lange würdest Du dich mit der Seite beschäftigen und ist sie sinnvoll? Welche Anzahl parallel dargestellter Seiten hälst Du für sinnvoll? Wie findest Du dich zurecht? Ist die Benennung der Navi und deren grafische Umsetzung verständlich? Was sind die interaktiven Elemente? Was fehlt, was ist überflüssig? Welche Parameter sind Dir wichtig?

»WELCHE ANZAHL PARALLEL DARGESTELLTER SEITEN HÄLST DU FÜR SINNVOLL?«

Usability-Ergebnis 15% ZWEI 18% KEINE MEINUNG

1% UNENDLICH

66% VIER

ENTWICKLUNG_ (GUI) WIREFRAMES UND VORENTWÜRFE

Musterseite .de

Startseite

Branchen

Parameter

- Einleitungstext

- Zeitungen - Alle - Frankfurter Allg. Zeitung - Süddeutsche Zeitung - Die Zeit - ... - Magazine - Alle - Stern - Elle - Kicker - ... - Onlineshops - Alle - Amazon - Ebay - itunes-Store - ... - Bands - Alle - U2 - Silbermond - Lady Gaga - ... - Parteien - Alle - Grüne - SPD - CDU - ...

- Layout - Alles - Bild - Grafik - Text - Navigation - Logo - Banner - Grundraster - Typogra e - Alles - Überschriften - Unterzeilen - Fließtext - Links - Extras - Nebeneinander - Überlappend - Seitenlänge - Farbigkeit - Deckkraft

Informationen über die Seite - Beschreibung des Seminars - Impressum

Hilfe - Beschreibung der Funktionen und deren Anwendung

TITLE

Musterseite.de

NOTES

Logobereich

Branchen

Parameter

- Zeitungen - Alle - Frankfurter Allg. Zeitung - Süddeutsche Zeitung - Die Zeit - ... - Magazine - Stern - Elle - Kicker - ... - Onlineshops - Amazon - Ebay - itunes-Store - ... - Bands - U2 - Silbermond - Lady Gaga - ... - Parteien - Grüne - SPD - CDU - ...

- Layout - Alles - Bild

Inhaltsbereich

- Text - Navigation - Logo - Banner - Grundraster - Typogra e - Alles - Überschriften - Unterzeilen - Fließtext - Links - Extras - Nebeneinander - Überlappend - Seitenlänge - Farbigkeit - Deckkraft

AUTHOR PROJECT VERSION

TITLE

Musterseite.de

NOTES

1 Ausklappmenues

Logobereich

(Ausfahren bei Rollover, selbst채ndiges Einfahren)

Branchen 1

Inhaltsbereich

Parameter 1

AUTHOR PROJECT VERSION

GRAPHICAL USER INTERFACE_ FINAL

»HALLO« WÄHLE AUS DEN BRANCHEN IM LINKEN DROPDOWNMENÜ DIE WEBSITE AUS, DIE DICH INTERESSIERT. MIT DEN PARAMETERN AUF DER RECHTEN SEITE KANNST DU DIE ENTSPRECHENDEN MUSTER DAFÜR LEGEN UND DADURCH DIE LAYOUTS VERGLEICHEN.

Get a Grid

GET A GRID

ANALYSE_

IDEE_

LEGENDE_

IMPRESSUM_

Website auswählen Branche Seite

AUSWAHL AUSBLENDEN_ EINBLENDEN_ Parameter einstellen

Branche Seite

Layout

100%

Bild Grafik Navigation Grundraster Logo Banner / Werbung Typografie

100%

Headlines Subheadlines Fließtext Interaktion

100%

Links Extras Screenshot

MacBook Pro

Get a Grid

GET A GRID

ANALYSE_

Website auswählen Branche Seite

IDEE_

LEGENDE_

IMPRESSUM_

AUSWAHL AUSBLENDEN_ EINBLENDEN_ Parameter einstellen

Branche Seite

Layout

100%

Bild Grafik Navigation Grundraster Logo Banner / Werbung Typografie

100%

Headlines Subheadlines Fließtext Interaktion

100%

Links Extras Screenshot

Get a Grid

GET A GRID

ANALYSE_

Website ausw채hlen Branche Seite

IDEE_

LEGENDE_

IMPRESSUM_

AUSWAHL AUSBLENDEN_ EINBLENDEN_ Parameter einstellen

Branche Seite

Layout

100%

Get a Grid

GET A GRID

ANALYSE_

IDEE_

Website auswählen Branche Seite

LEGENDE_

IMPRESSUM_

AUSWAHL AUSBLENDEN_ EINBLENDEN_ Parameter einstellen

Branche Seite

Branche Seite Neue Digitale Scholz & Volkmer Jung von Matt Saatchi & Saatchial Mutabor Factor Pixelgarten Bionic System Syzygy Sagmeister Integral Kesselskramer

Layout

100%

Bild Grafik Navigation Grundraster Logo Banner / Werbung Typografie

100%

Headlines Subheadlines Fließtext Interaktion

100%

Links Extras Screenshot

Get a Grid

GET A GRID

ANALYSE_

Website auswählen Branche Seite

IDEE_

LEGENDE_

IMPRESSUM_

AUSWAHL AUSBLENDEN_ EINBLENDEN_ Parameter einstellen

Branche Seite

Layout

100%

Bild Grafik Navigation Grundraster Logo Banner / Werbung Typografie

100%

Headlines Subheadlines Fließtext Interaktion

100%

Links Extras Screenshot

HTTP://GETAGRID.FH-MAINZ.DE

IMPRINT_ + LINKS_

Seminar - Mind The Gap Interaktives Gestalten Projekt - Get a Grid Betreut von Prof. Anna-Lisa Schรถnecker Kursteilnehmer Alexandra Blei / Sven Kirchgeร ner / Benjamin Simon / Malte Weinmann / Simon Wรถlfl FH Mainz - School of Design Mainz Sommersemester 2010

Links Grid generator http://netprotozo.com/grid/

Sammlung von Grid-Based-Webdesigns http://grid-based.com/

Grids in Webdesign http://www.designbygrid.com/

Typografisches Raster mit CSS http://css-tricks.com/typographic-grid/

Grid 960 pixel wide http://960.gs/

Grid CSS framework http://www.blueprintcss.org/

Gestaltung von Formularen mit Hilfe von Rastern http://labuschin.com/journal/gestaltung-von-formularen-anhand-eines-grundrasters Wordpress Theme, grid based http://5thirtyone.com/grid-focus Sammlung von Beitr채gen und Tutorials zum Thema Grids http://www.thegridsystem.org/