PDF-Anschauen - Rita William

ARBEITSDOKUMENTATION
Abschlussprüfung Sommer 2016
Mediengestaltung Digital & Print
Fachrichtung Gestaltung & Technik
Schwerpunkt Digital
Prüfungstück Teil a
Rita William
Prüfungsnummer: 10397
2
11
Arbeitsplanung
Phasen & Arbeitsschritte
Hard- und Software
Zeit (Std.)
PC / Chrome
PC
MS Word
01:00
00:30
01:00
2,5 Std.
PC
Stift / Papier
Photoshop CC
PC / Chrome
Papier / Stift
Illustratur CC
Photoshop CC
Photoshop CC
Illustrator CC
Photoshop CC
Chrome / Fontsquirrel
01:00
01:00
02:00
00:30
02:00
04:00
05:00
00:15
00:15
16:00
03:00
35 Std.
Sublime Text / Firefox
Sublime Text / Firefox
02:00
04:00
6 Std.
MS Word
Indesign CC / Illustrator CC / Photoshop CC
Indesign CC
PC / Firefox / Validator
04:00
04:00
02:00
02:00
02:00
14 Std.
Drei Tangoschulen richten das gemeinsame Festival
„Entusiastas del Tango“ aus.
Phase 1: Sichtungsphase
Zielgruppe
Die Zielgruppe des gemeinsamen Festivals sind Erwachsene
zwischen 20 - 30 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.
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.
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
Rotton zugewiesen.
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
Phase 3: Umsetzungsphase
Erstellung HTML
Erstellung CSS
Phase 4: Schlussphase
Verfassen der Dokumentation
Layout der Dokumentation
Layout des Arbeitsplans
Überprüfung & Korrekturen
Gesamtsumme (Stunden)
Rita William
Prüfungsnummer: 10397
57,5 Std.
Abschlussprüfung Sommer 2016
Mediengestaltung Digital & Print
Fachrichtung Gestaltung & Technik
Schwerpunkt Digital
Prüfungstück Teil a
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.
Vorher
≤ 320px
≤ 640px
≤1024px
Nachher
Logos
Alle Logos enthalten diverse Tangoelemente (Tänzer, Schuhe, Hut etc.)
und haben durch eine einheitliche Gestaltung (Rot/Schwarz) einen
seriellen Character.
El Tanguito-Tanzschule
Tätigkeit: Unterricht, Workshops, Festivalorganisation
Logo-Prinzip: Triebwagen
Rot
Hex
RGB
CMYK
#b71a1a
183/26/26
0% 86% 86% 28%
Schwarz
Hex
#020202
RGB
2/2/2
CMYK 0% 0% 0% 99%
La Boca-Tanzschule
Tätigkeit: Unterricht, Übungsabende, Tänzervermittlung
Logo-Prinzip: Triebwagen
Rot
Hex
#af1905
RGB
175/25/5
CMYK 0% 86% 97% 31%
Schwarz
Hex
#000000
RGB
0/0/0
CMYK 0% 0% 0% 100%
Bailando-Tanzschule
Tätigkeit: Unterricht, Übungsabende, Tänzervermittlung
Logo-Prinzip: Starprinzip
Rot
Hex
#5b0e0e
RGB
91/14/14
CMYK 0% 85% 85% 64%
Dunkelgrau
Hex
#232323
RGB
35/35/35
CMYK 0% 0% 0% 86%
Wireframes für die drei Viewports
4
9
Farben
Dunkelgrau
Dunkelgrau
4. Dieses Bild wird im Impressum-Bereich benutzt. Das Tanzpaar befindet sich auf
RGB 51/51/51
Hex #333333
CMYK 0% 0% 0% 80%
Verwendung: Fließtext, Navigation
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 Begriﬀen wie
„Leidenschaft“ und „Sinnlichkeit“ wird hervorgehoben.
Die Position ist den jeweiligen Viewports angepasst.
RGB 102/102/102
Hex #666666
CMYK 0% 0% 0% 60%
Verwendung: Schriftzug, Fließtext
Schwarz symbolisiert:
Dunkelheit, Eleganz, Modernität, Sachlichkeit, Funktionalität.
Es wirkt faszinierend und passt sehr gut für das Festival.
Vorher
Weiß
Hellgrau
Nachher
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.
medium ≤ 640 px
Es wurde bewusst kein 100% Schwarz bzw. Weiß verwendet,
damit es für das Auge angenehmer wirkt und „überstrahlen“ zu
vermeiden.
Rot
large ≤ 1024 px
RGB 189/17/29
Hex #bd111d
CMYK 0% 91% 85% 26%
Verwendung: Überschrift, Hover-Eﬀekt, Links, Linien
Rot symbolisiert:
Energie, Liebe, Leidenschaft, Impulsiviät, Verführung.
Rot passt damit sehr gut zum Thema Tango.
Alle Bilder wurden bzgl. Auflösung und Farbmodus für das Web optimiert.
small ≤ 320 px
8
5
Kontraste
Hell-Dunkel-Kontrast
Dient sowohl der besseren Lesbarkeit als auch einer klaren und eindeutigen Anmutung.
+
Bunt-Unbunt-Kontrast
Das Rot auf der einen und die Schwarz-/Grautöne auf der anderen Seite bilden einen Kontrast zwischen hoher
und niedriger Strahlkraft der Farben.
+
Typograﬁe
Hintergrund
Mit weichgezeichntem Bild multipliziert
freigestelltes Portrait
Überschriften
=
large ≤ 1024 px
Schriftwahl & Lesbarkeit:
medium ≤ 640 px
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
7
Bilder
Bildsprache / Anordnung / Bildausschnitte / Modifikationen
2. Dieses Bild wurde in den Hintergrund gesetzt.
Die Farben sind komplett entsättigt und heller gemacht worden.
Vorher
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.
Vorher
Nachher
Nachher
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.
Vorher
medium ≤ 640 px
Nachher

Download Report