ARBEITSDOKUMENTATION. Abschlussprüfung Sommer 2016 Mediengestaltung Digital & Print Fachrichtung Gestaltung & Technik Schwerpunkt Digital

Transkript

1 ARBEITSDOKUMENTATION Abschlussprüfung Sommer 2016 Mediengestaltung Digital & Print Fachrichtung Gestaltung & Technik Schwerpunkt Digital Prüfungstück Teil a Rita William Prüfungsnummer: 10397

2 2 11 Arbeitsplanung Drei Tangoschulen richten das gemeinsame Festival Entusiastas del Tango aus. Zielgruppe Die Zielgruppe des gemeinsamen Festivals sind Erwachsene zwischen Jahren. Das Festival richtet sich an Tanz- und Musikbegeisterte, die den Tango hautnah erleben wollen. Entusiastas del Tango steht für Emotion, Lebensgefühl und Leidenschaft. Die Gestaltung der Website richtet sich bewusst nach der Zielgruppe. Seitenaufbau / Viewports Der Seitenaufbau wurde nach einem 12er-Grid System angelegt und für drei Viewports responsive optimiert. small 320 px - einspaltig medium 640 px - einspaltig large 1024 px - dreispaltig Das Design ist nach dem Mobile First -Ansatz umgesetzt, im Gegensatz zum klassischen Ansatz Desktop First. Somit dreht man die gewohnte Arbeitsweise einfach um und reduziert die Gestaltungs- und Navigationselemente auf das Wesentliche. Die Umsetzung der Seite erfolgt mit Bootstrap und Javascript. Phasen & Arbeitsschritte Hard- und Software Zeit (Std.) Phase 1: Sichtungsphase Recherche Zielgruppenanalyse Erstellung des Arbeitplans Phase 2: Gestaltungsphase Bildauswahl Scribbles / Wireframe Style Tiles / Gestaltungsraster Farbschemata Logos Scribbles Erstellung der Logos Bildbearbeitung Ausschnitt des responsiven Bildes Schriftzug anpassen Erstellung der Layouts inkl. Änderungen Schriftauswahl PC / Chrome PC MS Word PC Stift / Papier PC / Chrome Papier / Stift Illustratur CC Illustrator CC Chrome / Fontsquirrel 00:30 2,5 Std. 00:30 05:00 00:15 00:15 16:00 03:00 35 Std. Die Webseite ist ein Onepager, somit werden alle Inhalte auf einer langen, nach unten laufenden Seite präsentiert. Die einzelnen Abschnitte sind durch Scrollen oder die Navigation mit Sprungmarken direkt ansteuerbar. Ein Video schließt den Festivaltext auf ganzer Breite ab. Phase 3: Umsetzungsphase Erstellung HTML Erstellung CSS Sublime Text / Firefox Sublime Text / Firefox 6 Std. Navigation Die Mobile- bzw. Tablet-Navigation ist auf ein Hamburgericon reduziert, in der Desktop-Ansicht wird es komplett als horizontaler Navigationsbalken visualisiert. Zur besseren Orientierung des Nutzers auf der Website wird der jeweils angezeigte Bereich der Seite als aktiver Menüpunkt mit einem Unterstrich gehighlighted. Für das Überfahren mit der Maus wird dem selektierten Punkt der auf der Seite verwendete ton zugewiesen. Phase 4: Schlussphase Verfassen der Dokumentation Layout der Dokumentation Layout des Arbeitsplans Überprüfung & Korrekturen MS Word Indesign CC / Illustrator CC / Indesign CC PC / Firefox / Validator Gesamtsumme (Stunden) 14 Std. 57,5 Std. Rita William Prüfungsnummer: Abschlussprüfung Sommer 2016 Mediengestaltung Digital & Print Fachrichtung Gestaltung & Technik Schwerpunkt Digital Prüfungstück Teil a

3 10 3 Der Schriftzug Die Farbe wurde von Schwarz zu Grau geändert, damit es für das Auge angenehmer wird und weniger Kontrast zu den anderen Elementen erzeugt wird. 320px 640px 1024px Logos Alle Logos enthalten diverse Tangoelemente (Tänzer, Schuhe, Hut etc.) und haben durch eine einheitliche Gestaltung (/Schwarz) einen seriellen Character. El Tanguito-Tanzschule Tätigkeit: Unterricht, Workshops, Festivalorganisation Logo-Prinzip: Triebwagen Schwarz Hex #b71a1a Hex # RGB 183/26/26 RGB 2/2/2 CMYK 0% 86% 86% 28% CMYK 0% 0% 0% 99% La Boca-Tanzschule Tätigkeit: Unterricht, Übungsabende, Tänzervermittlung Logo-Prinzip: Triebwagen Schwarz Hex #af1905 Hex # RGB 175/25/5 RGB 0/0/0 CMYK 0% 86% 97% 31% CMYK 0% 0% 0% 100% Bailando-Tanzschule Tätigkeit: Unterricht, Übungsabende, Tänzervermittlung Logo-Prinzip: Starprinzip Dunkelgrau Hex #5b0e0e Hex # RGB 91/14/14 RGB 35/35/35 CMYK 0% 85% 85% 64% CMYK 0% 0% 0% 86% Wireframes für die drei Viewports

4 4 9 Farben Dunkelgrau Dunkelgrau RGB 51/51/51 Hex # CMYK 0% 0% 0% 80% Verwendung: Fließtext, Navigation RGB 102/102/102 Hex # CMYK 0% 0% 0% 60% Verwendung: Schriftzug, Fließtext 4. Dieses Bild wird im Impressum-Bereich benutzt. Das Tanzpaar befindet sich auf der rechten Seite und teilt das Bild vertikal annähernd in den Goldenen Schnitt. Alle Bereiche sind entsättigt, mit Ausnahme des roten Kleides. Dadurch erhält das Bild einen eindeutigen Blickfang und die Verbindung von Tango mit Begriffen wie Leidenschaft und Sinnlichkeit wird hervorgehoben. Die Position ist den jeweiligen Viewports angepasst. Schwarz symbolisiert: Dunkelheit, Eleganz, Modernität, Sachlichkeit, Funktionalität. Es wirkt faszinierend und passt sehr gut für das Festival. large 1024 px Weiß Hellgrau RGB 254/254/254 Hex #fefefe CMYK 0% 0% 0% 0% Verwendung: Navigationshintergrund RGB 242/242/242 Hex #f2f2f2 CMYK 0% 0% 0% 5% Verwendung: Text Weiß symbolisiert: Licht, das Ideale, das Gute, das Neue, die Neutralität, die Klugheit, der Anfang. Die Kombination von Dunkelgrau und Weiß dient der Erhöhung des Kontrastes. Es wurde bewusst kein 100% Schwarz bzw. Weiß verwendet, damit es für das Auge angenehmer wirkt und überstrahlen zu vermeiden. medium 640 px small 320 px RGB 189/17/29 Hex #bd111d CMYK 0% 91% 85% 26% Verwendung: Überschrift, Hover-Effekt, Links, Linien symbolisiert: Energie, Liebe, Leidenschaft, Impulsiviät, Verführung. passt damit sehr gut zum Thema Tango. Alle Bilder wurden bzgl. Auflösung und Farbmodus für das Web optimiert.

5 8 5 Kontraste Hell-Dunkel-Kontrast Dient sowohl der besseren Lesbarkeit als auch einer klaren und eindeutigen Anmutung. + + Bunt-Unbunt-Kontrast Das auf der einen und die Schwarz-/Grautöne auf der anderen Seite bilden einen Kontrast zwischen hoher und niedriger Strahlkraft der Farben. Hintergrund Mit weichgezeichntem Bild multipliziert freigestelltes Portrait Typografie Schriftwahl & Lesbarkeit: = large 1024 px medium 640 px Überschriften Montserrat - Bold Montserrat - Regular Fließtext & Navigation Open Sans - Regular Die beiden verwendeten Schriften Montserrat und Open Sans sind für Bildschirmdarstellung optimiert. Durch die fehlenden Serifen sind diese gut auf den digitalen Oberflächen lesbar. Die beiden Schriften sind beliebt bei vielen Web- und UI-Designer. Die Schriftgröße und der Zeilenabstand sind für das Responsive-Webdesign optimiert. small 320 px Der Hintergrund ist sehr dunkel gehalten und zusätzlich weichgezeichnet. Dadurch rückt das hellere, wie durch einen Spot angestrahlte Portrait deutlich in den Vordergrund. Die Position ist den jeweiligen Viewports angepasst. Raumaufteilung: Die Texte wurden linksbündig ausgerichtet, da der Benutzer an eine Leserichtung von links nach rechts gewöhnt ist. Der Fließtext ist in in der Desktop-Darstellung in drei Spalten gesetzt, damit er angenehmer zu lesen ist. Beispiel:

6 6 7 Bilder Bildsprache / Anordnung / Bildausschnitte / Modifikationen 1. Das Bild wurde insgesamt entsättigt, wobei der Hintergrund stärker entsättigt wurde als das Tanzpaar im Vordergrund. Damit sticht das Paar deutlicher hervor. Der Hintergrund wurde zusätzlich leicht abgedunkelt, damit ein stärkerer Hell-Dunkel-Kontrast zum Vordergrund entsteht. Um eine saubere Anmutung zu erreichen, wurden umfangreiche Retusche-Arbeiten und Bildkorrekturen vorgenommen. Für die geforderten Viewport-spezifischen Abmessungen, wurde die Datei entsprechend zugeschnitten. 2. Dieses Bild wurde in den Hintergrund gesetzt. Die Farben sind komplett entsättigt und heller gemacht worden. large 1024 px small 320 px 3. Das Bild von Elena Träger im Kontakt-Bereich wurde zuerst retuschiert und zusätzlich mit stärkerem Kontrast versehen. Zum Schluss wurde das Bild freigestellt und auf einem anderen Hintergrund platziert. medium 640 px