Gestaltungskonzeption

Transkript

1 Gestaltungskonzeption Abschlussprüfung Winter 2012/2013 Felix Jerome Leupold Mediengestalter Gestaltung und Technik - Digital Prüflingsnummer: Prüfungsausschuss: MGGT11 Ausbildungsbetrieb: Aperto AG

2 Inhalt Rebriefing... 3 Zielgruppenanalyse... 3 Leitidee... 4 Farbwelt... 4 Formenwelt... 5 Typografie... 5 Layoutkonzept... 6 Navigationsstruktur... 6 Bilder... 7 Piktogramme... 7 Lageplan... 8 Arbeitsplanung... 9 Screendesigns... 10

3 Rebriefing Zielgruppen-Analyse Sie, die Sambasia-Park AG, haben mich damit beauftragt für den geplanten Relaunch der Webseite Ihres Zoos einen Lösungsvorschlag zu erarbeiten. Der Lösungsvorschlag umfasst diese Gestaltungsdokumentation für die neue Webseite, die Screendesigns, die Konzeption und Gestaltung des Lageplans, sowie eine Arbeitsplanung für die Umsetzung der Webseite. Der Zoo der Sambasia-Park AG bedient die Interessen von zwei unterschiedlichen Zielgruppen. In erster Linie sind es Familien mit Kindern und Schulklassen, sowie Kinder- und Jugendgruppen diese lassen sich zur Primärzielgruppe zusammenfassen. Die Primärzielgruppe ist zum großen Teil minderjährig, stammt aus verschiedensten soziodemografischen Hintergründen und ist vor allem am Spaß im Zoo rund um die Tiere interessiert. Die Sekundärzielgruppe besteht zum einen aus Erwachsenen, die sich bei einer Kurzreise durch den Zoo ein paar Stunden entspannen möchten und zum anderen aus besonders tierlieben Personen mit Spendenbereitschaft, sowie Partnern des Zoos. Sie sind wichtige Geldgeber des Zoos und sollten deshalb bei Gestaltung der Werbemaßnahmen des Zoos nicht vernachlässigt werden. 3

4 Naturton-Farbpalette / Grundfarben #3B391E #DEB767 #E7CA8F #63C348 Highlight-Farben #F755B9 #F3414B #51CBF9 Leitidee Farbwelt Die Gestaltung des Webauftritts des Sambasia-Parks ist aus dem Naturbezug des Zoos und den Interessen der Primär- und Sekundärzielgruppe entwickelt. Sie vereinigt das Verlangen der Primärzielgruppe auf den Spaß rund um Tiere und zum anderen das Interesse der Sekundärzielgruppe sich sachlich über die Fakten der Sambasia AG zu informieren und regt diese zum Spenden für den Zoo an. Ziel ist also eine zum Thema passende, übersichtliche und moderne Gestaltung mit kleinen verspielten Details. Die Farbwelt ist aus der Natur abgeleitet. Der Webseiten-Hintergrund ist in einem hellen Baige mit einer Naturpapier-Struktur gestaltet, zusammen mit Braunund Grüntönen wird der Natur- und Abenteuerbezug des Zoos visuell hergestellt. Der Text steht in einem dunklen Braunton direkt auf dem beigefarbenen Hintergrund. Inhalte die stärker in den Vordergrund rücken sollen werden durch weiße Flächen hinterlegt. Die Naturton-Farbpalette wird ergänzt durch auffällige Signalfarben. Sie sind in ihrer Helligkeit und Sättigung auf die Naturfarben abgestimmt und setzen so harmonische Highlights, um den Nutzer auf wichtige Informationen/Schaltflächen aufmerksam zu machen. 4

5 Chewy Font Hauptüberschriften Erlebnis Sambasia Source Sans Pro Grundschrift (Unterüberschriften und Mengentext) Maustour Die Hauptattraktionen liegen auf dem Weg. Verschaffen Sie sich einen kompakten Überblick über die Haupt-Themenwelten des Zoos. Formenwelt Typografie Der neue Auftritt wird durch eine klare, moderne Formenwelt dominiert. Sie hilft dem Nutzer dabei sich gut und schnell auf der Webseite zu orientieren. Inhalte auf die der Betrachter besonders aufmerksam gemacht werden soll, werden durch schräg gestellte Rechtecke hervorgehoben (z.b. Teaser-Klickflächen). Als Basisschriftart wurde der Font Source Sans Pro von Adobe gewählt. Sie ist auch für die Darstellung auf Bildschirmen optimiert und passt sich durch ihr weiches Erscheinungsbild perfekt in die Gestaltung ein. Um eine optimale Lesbarkeit zu erreichen, wurde für eine Auflösung von 1280x800 Pixel eine Basisschriftgröße von 16 Pixel und ein Zeilenabstand im Fließtext von 150% definiert. Für die Hauptüberschriften und Teaser-Klickflächen wurde die Schriftart Chewy von Neapolitan gewählt. Durch ihren spielerischen, natürlichen Charakter und unterstützt sie die Thematik der Webseite. Die Überschrift ist auf jeder Seite an der gleichen Position angebracht. Bei beiden Schriften handelt es sich um frei verfügbare Open Source Schriften, ihr Einsatz ist dadurch unkompliziert und kostengünstig möglich. 5

6 12er Raster auf der Startseite ERLEBNIS SAMBASIA Layoutkonzept Navigationsstruktur Das Layout basiert auf einem 12er-Raster und alle wichtigen Inhalte (Logo, Hauptnavigation, Suche und Meta-Navigation) befinden sich gut sichtbar am Beginn jeder Seite und sind damit jederzeit gut zu erreichen. Die geplanten elf Navigationspunkte wurden zur besseren Orientierung in Haupt- und Meta-Navigation aufgeteilt. Die Navigationspunkte in der Hauptnavigation werden in Versalien gesetzt, um sich deutlich von dem restlichen Text abzugeben. Unter dem Header befindet sich der Hauptinhaltsbereich. Je nach Inhalt der Seite wird die volle Breite des Layouts für den Inhalt ausgenutzt. Dies ermöglicht eine besonders übersichtliche und leicht erfassbare Gestaltung der Inhalte. Unter dem Hauptinhalt befindet sich auf der Startseite und auf der Erlebnis Sambasia -Seite noch eine Teaser-Reihe. Am Ende der Seite findet der Nutzer den Footer. Er beinhaltet die Service-Links aus der Meta-Navigation, sowie die Öffnungszeiten. Zudem Kontaktadresse und die Verweise auf die Aktivitäten des Parks in den Sozialen Netzwerken zwecks Kundenbindung. Die Seite, auf der sich der Nutzer gerade befindet, wird in der Navigation durch eine grüne Unterlegung bzw. Unterstreichung kenntlich gemacht. Fährt der Nutzer über einen nicht aktiven Menüpunkt so wird dieser farblich hervorgehoben. Über Teaser werden neben der Haupt- und Meta-Navigation Querverweise auf wichtige Seiten geschaffen. Sie helfen vor allem neuen Benutzern die Webseite erstmalig zu erfassen. Für Besucher, die bereits wissen wonach sie auf der Webseite suchen, wurde als Navigationshilfe eine Suche aufgenommen. 6

7 Bilder Piktogramme & Icons Auf der Startseite wird der Nutzer mit Hilfe einer großen Bildbühne zum Verweilen auf der Seite eingeladen. Die Bühnenbilder werden durch einen Parallax-Effekt interaktiv zum Leben erweckt. Hierbei kann der Nutzer durch die Bewegung seiner Maus Einfluss auf das Bild nehmen und es entsteht ein Eindruck von Dreidimensionalität. Dies soll vor allem den Entdeckergeist der Primärzielgruppe wecken. Zur Verwirklichung dieses Effekts müssen die Bildebenen voneinander getrennt werden und mit Hilfe von Skripten in Abhängigkeit von der Maus animiert werden. Um die allgemeine Verständlichkeit des User Interfaces der Webseite zu verbessern, wird die Oberfläche durch eine Reihe von eigens erstellter Icons und Piktogramme aufbereitet. Der Einsatz von Piktogrammen und Icons steigert vor allem für die junge, kognitiv noch eingeschränktere Primärzielgruppe die Usability und Konsumierbarkeit der Inhalte, aber auch die Sekundärzielgruppe profitiert von diesen bei der Navigation und Erfassung. In Teasern wird auf Detailausschnitte der Originalfotos gesetzt und den Fokus des Nutzers besser steuern zu können. 7

8 Lageplan Anhand der zur Verfügung gestellten Skizze, wurde der Lageplan des Zoos umgesetzt. Wichtige Elemente der Karte werden durch Piktrogramme gekennzeichnet. Diese helfen dem Nutzer bei der Orientierung und zusätzliche Erklärungshilfen zu den Piktrogrammen wurden in einer Legende untergebracht. Die Legende mit allen Stationen lässt sich bei Bedarf ein- und ausblenden. Beim Hover über eine der Touren werden die dazugehörigen Stationen in der Karte farblich hervorgehoben. Bei Klick bleibt die Markierung erhalten und ein zusätzlicher Hinweistext zu der ausgewählten Tour wird eingeblendet. Bei Hover über eine der hervorgehobenen Stationen wird eine Beschreibung zu der jeweiligen Station in einem Tooltip angezeigt. 8

9 Arbeitsplanung VERWENDETE HARDWARE Arbeitsplatzausstattung Apple MacBook Pro 15, OSX Mountain Lion LG Monitor 24 Wireless Keyboard & Magic Mouse ARBEITSSCHRITTE HILFSMITTEL / SOFTWARE ARBEITSSTUNDEN Vorbereitung Erfassung der Aufgabenstellung Sichten der Daten Gestaltungskonzeption Zielgruppenanalyse Strukturierung der Navigation Erstellung von Skribbles und Entwürfen Auswahl geeigneter Ideen Entwicklung der Leitidee Festlegung von Farben und Kontrasten Festlegung der Typografie Screendesign Gestaltung des Headers (inkl. Navigation, Logo) Gestaltung der Startseite Erstellung von Icons und Pikrogrammen Bearbeitung & Zuschneiden von Bildern Gestaltung der Touren -Seite Gestaltung der Unterseiten Umsetzung Anlegen benötigter Verzeichnisse und Dateien Compass/SASS Setup Anlegen einer Icon-Sprites Basis-Layout (HTML/SASS/CSS) Umsetzung der Startseite (HTML/SASS/CSS) Umsetzung der Touren -Seite Umsetzung der restlichen drei Unterseiten Programmierung interaktiver Module (JS) Testing Aufgabenblätter, ZFA CD-ROM Notizen, PostIts Notizen Stift, Papier, Adobe Fireworks CS6 Notizen Adobe Fireworks CS6 Adobe Fireworks CS6 Adobe Fireworks CS6 Adobe Fireworks CS6 Adobe Illustrator & Fireworks CS6 Adobe Photoshop CS6 Adobe Fireworks CS6 Adobe Fireworks CS6 Finder SublimeText 2 Adobe Fireworks CS6 PHPStorm 5, Google Chrome PHPStorm 5, Google Chrome PHPStorm 5, Google Chrome PHPStorm 5, Google Chrome PHPStorm 5, Google Chrome Mozilla Firefox 0,50 h 0,25 h 0,25 h 14,50 h 0,50 h 0,50 h 6,00 h 2,00 h 2,00 h 2,00 h 1,50 h 28,00 h 1,00 h 4,00 h 6,00 h 3,00 h 8,00 h 6,00 h 7,00 h 0,25 h 0,25 h 0,25 h 0,25 h 2,00 h 1,00 h 2,00 h 0,45 h 0,25 h Gesamtzeitaufwand 50,00 h 9

10 Screendesigns Auf nachfolgenden Seiten finden Sie die erstellten Musterentwürfe für die neue Webseite des Sambasia- Parks. Der Musterentwurf umfasst folgende Seiten: Startseite Touren Erlebnis-Sambasia Zeiten & Preise Impressum Die Entwürfe wurden auf Basis der gelieferten Texte in der Datei Internet.doc erstellt. Bitten beachten Sie: Die Screendesigns wurden für den Bildschirm im RGB- Farbraum und 72ppi gestaltet eine optimale Darstellung ist im Druck nicht gegeben. 10

11 Startseite

12 Touren Normalzustand

13 Touren Aktiver Zustand + Infokasten zu einer Station (Hover)

14 Erlebnis Sambasia

15 Zeiten & Preise Abbildung ohne Footer

16 Impressum