PDF

Abschlussprüfung Sommer 2013
Gestaltungskonzeption & Dokumentation
Mediengestalter Gestaltung und Technik - Digital
Damian Kalemba
Prüflingsnummer: 18207
Ausbildungsbetrieb: decor1 Grafik- & Webdesign
Inhalt
3
Rebriefing
3
Grundidee / Ziel
4
Farbwelt
5
Typografie
5
Grundraster
6
Navigationsstruktur
6
Bildwelt
7
Screendesigns / Musterentwürfe
13
Arbeitsplanung
Rebriefing
3
Internetauftritt „Atelier Brokat“
Das „Atelier Brokat“ ist eine Maßschneiderei in
Es sollen die Bereiche „Start“, „Atelier“, „Damen“,
Augsburg, die zum 1. Oktober 2013 neu eröffnet.
„Herren“ und „Impressum“ als funktionsfähige
Navigationselemente mit den dazugehörigen Seiten
Inhaberin Lisa Winter benötigt einen
angelegt werden.
Unternehmensauftritt der die Zielgruppe Damen und
Herren der Altersgruppe 40plus, die beruflich und privat
Desweiteren soll ein Gestaltungskonzept für die
Lust auf besondere und individuell angepasste Mode
Menüführung / Navigation anhand der Menüpunkte
haben, ansprechen soll.
im Text „Internet.doc“ entwickelt werden. Dabei soll
die grafische Darstellung der Schaltflächen durch eine
Anhand der vorhandenen Texte und Bilder soll ein
Rollover-Funktion unterstützt werden.
Internetauftritt realisiert werden. Auszugehen von einer
Monitorauflösung von 1280 Pixel x 800 Pixel und 24 Bit
Auf der Unterseite „Damen“ soll ein Detailbetrachter
Farbtiefe. Die Webseite soll für die aktuelle Version des
integriert werden. Die Modelle wurden aus drei
Browsers Firefox optimiert werden.
verschiedenen Perspektiven fotografiert. Diese
Perspektivbilder sollen als Thumbs dargestellt werden
Zu entwickeln ist ein Lösungsvorschlag (Entwurf) mit
und Details sind über eine Lupenfunktion stark
Arbeitsplanung zur möglichen Umsetzung der gesamten
vergrößert anzuzeigen.
Webseite sowie eine Gestaltungsdokumentation.
Grundidee und Ziel
Internetauftritt „Atelier Brokat“
Der Internetauftritt soll entsprechend der oben
beschriebenen Zielgruppe eine Einmaligkeit und
Exklusivität der Mode zum Ausdruck bringen.
Das handwerkliche Können der Maßschneiderei und die
traditionelle handwerkliche Schneidertechnik sollen bei
der Konzeption beachtet werden.
Ziel:
Eine zeitgemäße, klare und aufgeräumte Webseite
mit einer einfachen und übersichtlichen Menüführung,
dezent eingesetzen Akzenten und einer homogenen
aber eindrucksvollen Bild- und Farbwelt.
Farbwelt
4
Internetauftritt „Atelier Brokat“
Für den Wiedererkennungswert und den
Inhalte wie Headlines, aktive Menüpunkte und
einheitlichen Auftritt ist eine harmonische Farbwelt
Rollover / Hover Funktionen sind in der Basisfarbe
des Logos gehalten um stärker in den Vordergrund zu
eine wichtige Voraussetzung.
Unter Beachtung der Zielgruppe und um die
Exklusivität der Mode sowie das handwerkliche
rücken, damit wichtige Informationen und Funktionen
für den User ersichtlich werden.
Können zu transportieren wurde eine Farbwelt um
Fließtexte sind in einem dunklen Grauton direkt auf
die Basisfarbe des Logos herum entwickelt.
einem beigen, strukturierten Hintergrund gesetzt.
Die Farbpalette wird ergänzt durch eine auffällige,
frische und moderne Signalfarbe, welche zum
Ein dunkel grauer, strukturierter Hintergrund setzt auf
den Unterseiten die Thumbs visuell hervor.
Beispiel beim Störer auf der Startseite und im
Footer zum Einsatz kommt.
Basisfarbe Logo, Headlines
Störer, Icons, Footer
80 / 100 / 0 / 0 CMYK
85 / 30 / 55 / 10 CMYK
92 / 45 / 145 RGB
18 / 128 / 120 RGB
#5c2d91 WEB
#128078 WEB
Fließtext, Subheadlines, Menü
BG Menüpunkt aktiv
75 / 65 / 60 / 70 CMYK
8/6/6/0
CMYK
32 / 37 / 40 RGB
231 / 231 / 231 RGB
#202528 WEB
#e7e7e7 WEB
Typografie
5
Internetauftritt „Atelier Brokat“
Als Basisschrift für Fließtexte, Navigation und
Headlines, Subheadlines und Schmucktextelemente
Auszeichnungen wurde die serifenlose Schriftart
sind in der serifenbetonten Schriftart „Kreon“
„Arsenal“ ausgewählt.
gehalten, um den Charakter der traditionellen
Diese gibt ein klares, scharfes und neutrales
Handwerkskunst wiederzuspiegeln.
Schriftbild ab, auch bei Versalien.
Beide Schriftfamilien sind frei verfügbar und unterliegen der SIL Open Font License. Sie dürfen damit legal
und ohne Auflagen für diverse Medien eingesetzt werden.
Arsenal
Regular
Kreon
Regular
ABCDEFGHIKLM
NOPQRSTUVWXYZ
ABCDEFGHIKLM
NOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
(.,:;!?„“)@+#’
abcdefghijklmnopqrstuvwxyz
1234567890
(.,:;!?„“)@+#’
Grundraster
Internetauftritt „Atelier Brokat“
Das Gestaltungsraster basiert auf einem modernen
Im Header wurden gut sichtbar das Logo und die
1140px Layout und eignet sich bestens für eine
Hauptnavigation integriert.
Monitorauflösung mit einer Gesamtbreite von
Es folgt der Contentbereich, wahlweise bestehend aus
1280 pixel. Das gewählte Grid ist sehr flexibel und
einem Bildslider oder einem schmaleren Bildbereich.
anpassungsfähig, um zum Beispiel eine mögliche
Darunter die Headlines mit dem Fließtext.
mobile, responsive Webseite zu realisieren.
Auf der Startseite wurden zwecks Usability drei
Teaserboxen integriert, die dem Besucher zur jeweiligen
Durch die Verwendung dieses Grids wird garantiert,
Unterseite führen sollen.
dass ein einheitlicher Seitenaufbau und ein
harmonisches und übersichtliches Gesamtkonzept
Den Abschluss bildet der Footer. Er beinhaltet zum
entsteht. Ein sinnvoller Einsatz von „Weißraum“
Beispiel eine Subnavigation und ist auf allen Unterseiten
unterstützt die Harmonie der Webseite.
gleichgehalten.
Navigationsstruktur
6
Internetauftritt „Atelier Brokat“
Die vorgegebenen Menüpunkte wurden zwecks
Beim Hover eines Navigationspunktes wird dieser
Usability in ein Hauptmenü und Submenü
durch einen farblichen Hintergrund hervorgehoben.
aufgeteilt. Die Hauptnavigation im Header wurde in
Versalien gesetzt. Ein aktiver Navigationspunkt wird
Im Footer findet der Besucher das Submenü, mit
hervorgehoben mit einer grau hinterlegten Fläche
den Navigationspunkten Öffnungszeiten, Jobs,
und die Schriftfarbe in der Logo-Grundfarbe.
Kontakt und Impressum.
Navigationspunkte Hauptmenü im Header
Menüpunkt aktiv
Menüpunkt Hover
Start, Atelier, Damen, Herren, Bühnenroben,
Modetrends, Veranstaltungen
Start
Start
Navigationspunkte Submenü im Footer
Öffnungszeiten, Jobs, Kontakt, Impressum
Bildwelt
Internetauftritt „Atelier Brokat“
Zur Gesamtgestaltung und Farbwelt des
Der eingesetzte Slider ist flexibel einsetzbar. So kann
Internetauftrittes wurde im Vorfeld eine passende
der Kunde zum Beispiel auf Aktionen oder besondere
Bildwelt ausgesucht.
Veranstaltungen schnell und effektiv hinweisen.
Um den Besucher einen einladenden und
stimmungsvollen Eindruck zu vermitteln, wurde auf der
Das Teaserbild auf den folgenden Unterseiten
Startseite ein großer Bildslider integriert.
unterstützt den Text, ist jedoch im Vergleich zur
Dieser soll dem Besucher Lust auf mehr machen,
Startseite in der Höhe verringert.
Emotionen wecken und die verschiedenen Leistungen
des Ateliers abbilden.
Auf den Unterseiten wurden passend zum jeweiligen
Inhalt, Thumbs abgebildet, welche sich beim
Durch die Möglichkeit in kurzen Abständen
draufklicken vergrößern. Hierbei soll dem Nutzer das
verschiedene Bilder zu zeigen (Bildslider), kann die
Atelier und seine Leistungen noch mal visuell näher
gewünschte Zielgruppe angesprochen werden.
gebracht werden.
Musterentwürfe
Internetauftritt „Atelier Brokat“
Startseite
7
Musterentwürfe
Internetauftritt „Atelier Brokat“
Seite atelier
8
Musterentwürfe
Internetauftritt „Atelier Brokat“
Seite Damen
9
Musterentwürfe
10
Internetauftritt „Atelier Brokat“
Seite Damen mit aktiven detailbetrachter
1
2
3
Erläuterung zum detailbetrachter
Der User bewegt seinen Cursor über das angezeigte obere Hauptbild (1) und bekommt rechts daneben die Detailansicht
angezeigt (2). Beim Hover über die Thumbs (3) erscheint das jeweilige Thumb als großes Hauptbild.
Musterentwürfe
Internetauftritt „Atelier Brokat“
Seite Herren
11
Musterentwürfe
Internetauftritt „Atelier Brokat“
Seite Impressum
12
Arbeitsplanung
13
Internetauftritt „Atelier Brokat“
Verwendete Hard- und Software:
Hardware
Software
• Monitor Samsung SyncMaster 24“
• Betriebsystem Microsoft Windows 7 32bit
Desktopauflösung 1920 x 1080
• Logitech Maus + Tastatur
• Grafikkarte ATI Radeon HD 5700
• Prozessor Intel Core i7 2,80 GHz
• 4 GB Arbeitsspeicher
• Screendesign & Bildbearbeitung mit
Adobe Photoshop CS5
• Technische Umsetzung der Webseite mit
Adobe Dreamweaver CS5
• Testbrowser Mozilla Firefox 21.0, Firebug
Arbeitsschritte im Detail:
Vorbereitung
• Erfassen der Aufgabenstellung
• Sichten der vorgegebenen Daten
Gestaltungskonzeption
• Inspiration einholen, Analyse Mitbewerber
• Strukturierung der Navigationsbereiche
• Ideenentwicklung, Erstellung von Skribbles
• Farben festlegen
• Entwicklung geeigneter Schmuckelemente
• Auswahl geeignetes Bildmaterial
• Festlegung der Typografie
Screendesign / musterentwürfe
• Anlegen des Grundrasters
• Gestaltung der Startseite, Header, Bildbereich, Content, Footer
• Bildbearbeitung
• Gestaltung Seite Damen inkl. Detailbetrachter
• Gestaltung der Unterseiten Atelier, Herren, Impressum
technische umsetzung
• Verzeichnisse, Dateien, Skripte vorbereiten und anlegen
• Grid anlegen
• Umsetzung Startseite mit HTML5, CSS3, Javascript
• Umsetzung Unterseiten Atelier, Damen, Herren, Impressum
• Programmierung und Anpassung Detailbetrachter
• Browser-Testlauf und evlt. Fehlerbehung
zeitaufwand gesamt:
Material, Software, Hilfsmittel:
Aufgabenblätter
CD-ROM
Stunden:
0,50 h
0,25 h
0,25 h
Internet
Papier, Notizen
Papier, Bleistift
Adobe Photoshop CS5
Adobe Illustrator CS5
CD-ROM
Adobe Photoshop CS5
12,00 h
1,00 h
0,50 h
7,00 h
1,00 h
0,50 h
1,00 h
1,00 h
Adobe Photoshop CS5
Adobe Photoshop CS5
Adobe Photoshop CS5
Adobe Photoshop CS5
Adobe Photoshop CS5
20,50 h
0,50 h
11,00 h
2,00 h
4,00 h
3,00 h
Explorer, Adobe Dreamweaver CS5
Adobe Dreamweaver CS5
Adobe Dreamweaver CS5
Adobe Dreamweaver CS5
Adobe Dreamweaver CS5
Mozilla Firefox 21.0, Firebug
7,00 h
0,25 h
0,25 h
3,00 h
2,00 h
1,00 h
0,50 h
40,00 h