close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

Konzeption - O-rieffenstahl.com

EinbettenHerunterladen
Konzeption
Website Green Solutions AG
Abschlussprüfung Sommer 2009
Oliver Rieffenstahl
Prüflingsnummer: 20509
Prüfungsausschuss: MGDE_07
Konzeption zur Website
Inhaltsverzeichnis
1. Grundsätzliches.................... 05-09
1.1. Briefing.............................................. 06
1.2. Aufgabe............................................. 07
1.3. Technische Umsetzung........................... 08
1.4. Zielgruppe.......................................... 09
2. Typografie........................... 11-12
2.1. Schriftwahl im Web................................ 12
3. Farben................................. 13-15
3.1. Farbkonzept........................................ 14
3.2. Schriftfarben....................................... 15
4. Gestaltung........................... 17-21
4.1. Format............................................... 18
4.2. Aufbau.............................................. 19
4.3. Gestaltungsraster................................. 20
4.4. Bildgestaltung...................................... 21
4.5. Bildauswahl........................................ 21
5. Navigation........................... 23-25
5.1. Navigationsumsetzung........................... 24
5.2. Navigationsstruktur............................... 25
2
6. Realisierung........................ 27-29
6.1. Mouse-Over-Effekte.............................. 28
6.2. Icon „mehr“......................................... 28
6.3. Wortmarke klickbar............................... 29
6.4. Personenicons..................................... 29
6.5. Unterseite Stromrechner......................... 29
7. Entwürfe.............................. 31-41
7.1. Home................................................ 32
7.2. Unsere Energie.................................... 33
7.3. Stromrechner....................................... 34
7.4. Förderprogramme................................. 35
7.5. Energiespartipps................................... 36
7.6. Jetzt wechseln..................................... 37
7.7. Kontakt.............................................. 39
7.8. Impressum.......................................... 40
7.9. Sitemap............................................. 41
8. Formelles............................ 43-44
7.1. Verwendete Hard- und Software................ 44
Oliver Rieffenstahl | 20509 | MGDE_07
3
1. Grundsätzliches
5
Konzeption zur Website
1.1. Briefing
Projekt: Green Solutions – Erneuerbare Energien
Die Green Solutions AG aus Nürnberg ist ein Anbieter
von Ökostrom und Erneuerbaren Energiekonzepten.
Die Firma wirbt um Neukunden für ihre Wind-,
Wasser- und Sonnenenergie und berät
beispielsweise beim Bau von Solaranlagen.
Green Solutions bezieht Ökostrom aus Wasser- und
Windkraftwerken sowie aus Photovoltaik-Anlagen
und -Parks in Deutschland und Österreich. Mögliche
Kunden der Green Solutions AG sind alle Strombezieher in Deutschland – Privathaushalte wie auch
Firmenkunden. Im Vordergrund der Werbebotschaft
sollen die Begriffe Klimaschutz, Ökologie,
Ressourcen schonen, Energie sparen und Nachhaltigkeit durch Energie aus sauberen
Quellen stehen.
6
1.2. Aufgabe
Konzeption und Gestaltung eines
Medienproduktes
Die Green Solutions AG aus Nürnberg plant eine
Internetpräsenz für interessierte Endkunden aus dem
privaten und gewerblichen Bereich. Die Website soll
für eine Monitorgröße von max. 1024 x 768 Pixel und
einer 24 Bit Farbtiefe erarbeitet werden.
Die Anzahl der zu entwerfenden Seiten ist freigestellt.
Entwickeln Sie ein Gestaltungskonzept für die
Menüführung/Navigation. Die Reihenfolge der im Text
angegebenen Menüpunkte kann verändert werden.
Die Startseite (Home) muss über einen Klick auf die
Wortmarke zu erreichen sein.
[...] Der gesamte Text ist zu verwenden und
darf redaktionell nicht verändert werden. Der
gesamte Text ist logisch und typografisch dem
Thema entsprechend aufzubereiten. Zusätzliche
Bildunterschriften sowie ergänzende Links innerhalb
der Website dürfen aus dem vorhanden Text erstellt
und hinzugefügt werden.
[...] Die Anzahl und Auswahl der Bilder ist freigestellt,
es können auch Ausschnitte und Modifikationen
verwendet werden.
Oliver Rieffenstahl | 20509 | MGDE_07
7
Konzeption zur Website
1.3. Technische Umsetzung
Die Umsetzung in eine lauffähige Version
der Website ist nicht erforderlich, da der
Bewertungsschwerpunkt auf der Planung und
Gestaltung der Seite liegt.
Um aber einen Voreindruck für die Seite zu
bekommen sowie um zu sehen, wie sich die
Mouse-Over-Effekte verhalten, habe ich die
Startseite der Internetpräsenz umgesetzt.
Die umgesetzte Startseite finden Sie im folgen
Verzeichnis auf der CD-Rom:
„CD-ROM > 1_Aufgabe 1.1b - Nonprint > Umsetzung
in HTML > index.html“
Bei einer späteren Umsetzung der Seite, sollte
dardrauf geachtet werden, dass die Internetpräsenz
auf allen gängigen Browsern (Firefox, Safari, Opera,
Internet Explorer) richtig dargestellt wird, momentan
ist die Startseite nur für den Firefox 3 und den
Safari 3 Beta umgesetzt worden.
Außerdem sollte beachtet werden, dass die Seite
barrierefrei programmiert wird, damit z.B. auch
Personen mit Einschränkungen ohne Probleme an
ihre Informationen kommen.
8
1.4. Zielgruppe
Die Zielgruppe der Green Solutions AG umfasst
alle Strombezieher in Deutschland und kann in zwei
Gruppen eingegliedert werden. Beide Gruppen
haben ein erhöhtes Interesse daran Verantwortung
gegenüber der Umwelt sowie der Gesellschaft zu
übernehmen. Der Schwerpunkt dieser Schicht der
Bevölkerung liegt also in ökologischer Natur.
Gruppe 1 - Privat:
Die Umsetzung der Website soll vor allen Dingen
junge und umweltbewuste Personen im Alter von
18-30 Jahre ansprechen, im großen und ganzen
reicht die Altersspanne aber bis 45 Jahre.
Gruppe 2 - Gewerbe:
Die zweite Zielgruppe umfasst Unternehmen die auch
nach Außen „Öko-Produkte“ verkaufen/vermakten
(Beispiele: Bio-Läden, Blumenmärkte, eventuell das
Büro der Partei „Die Grünen“ uvm.).
Oliver Rieffenstahl | 20509 | MGDE_07
9
2. Typografie
11
Konzeption zur Website
2.1. Schriftwahl im Web
Damit das Schriftbild der Website bei ca. 99% aller
Interessenten richtig dargestellt werden kann, habe
ich mich bei meinen Entwürfen auf die Systemschrift
„Arial“ festgelegt.
„Arial“ harmoniert hier gut zwischen der „rundlichen“
Schrift „OCR-F“ in der Wortmarke „green solutions“
und dem doch eher „eckigen Kastendesign“.
Arial bei 12 pt:
!“#$%&‘()*+,-./0123456789:;<=>?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[\]^_{|}¢¦§¨©®±¶·ÀÁÂÃÄÆÈÉÊËÌÍÎÏ
ÒÓÔÕÖ×ÙÚÛÜàáâãäæèéêëìíîïòóô
õö÷ùúûüŐőŰű˙˝‘’‚“”„…‹›⁄ ™−≤≥
OCR-F bei 12 pt:
!“#$%&‘()*+,-./0123456789:;<=>?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
[\]^_{|}¢¦§¨©®±¶ÀÁÂÃÄÆÈÉÊËÌÍÎÏ
ÒÓÔÕÖ×ÙÚÛÜàáâãäæèéêëìíîïòóô
õö÷ùúûü˙˝‘’‚“”„…‹›⁄™−≤≥
12
3. Farben
13
Konzeption zur Website
3.1. Farbkonzept
Da das vorgegebene Logo schon mit zwei gut im
Kontrast stehenden Farben vorgegeben war, habe
ich diese beiden Farben (Grün und Grau) mit ihren
Abstufungen auch in das Screendesign übernommen.
Grün wird nicht zufällig als Farbe der Natur gesehen.
Seit den 80ern gilt die Farbe als Symbol des
Umweltschutzes. Außerdem diente die Farbe Grün
als Namengeber der ökologisch veranlagten Partei
„Die Grünen“.
Diese zwei Beispiele bestätigen, dass ein Großteil
der deutschen Bevölkerung Grün als „Öko-Farbe“
sieht.
Grün:
CMYK: C=50 M=0 Y=100 K=0
RGB: R=152 G=190 B=0
LAB: L=72,55 A=-30 B=73
Hex: #98bf00
100%
75%
50%
25%
50%
25%
Grau:
CMYK: C=50 M=0 Y=0 K=80
RGB: R=81 G=79 B=84
LAB: L=33,73 A=1 B=-3
Hex: #514f54
100%
14
75%
3.2. Schriftfarben
Um mit dem Logo auf eine Linie zu kommen, wurde
bei den meisten Text auf der Internetpräsenz das
Grau im 100% Farbton gewählt. Dieses lässt sich gut
lesen und bildet mit dem Weiß im Hintergrund einen
guten Kontrast.
Bei Buttons bzw. beim ausgewählten
Navigationspunkt wird weiß als Schriftfarbe
verwendet. Das bildet einen guten Kontrast zum
grünen Hintergrund.
Wenn der Hintergrund nur aus dem 50% Grün
besteht, habe ich für die Schriftfarbe das 100% Grau
gewählt.
Oliver Rieffenstahl | 20509 | MGDE_07
15
4. Gestaltung
17
Konzeption zur Website
4.1. Format
Um innerhalb einer Bildschirmauflösung von
1024 x 768 Pixeln zu bleiben, habe ich ein Format
gewählt, das etwas schmaler ist.
Die Website hat eine effektive Breite von 960 Pixel
und passt sich gut durch seinen flexiblen Hintergrund
an breitere Monitorformate an. Die Tiefe ist nach
unten offen und verlängert sich auf der Seite
„Unsere Energie“ auf maximal 1150 Pixel, dort muss
der Nutzer dann einfach nur nach unten scrollen
(siehe Beispielbild).
Sollte also ein Monitor beispielsweise eine Auflösung
von 1680 x 1050 Pixel haben, wird die Website
zentriert dargestellt. Der Hintergrund zieht sich dann
bis zum linken und rechten Monitorrand
(siehe Beispielbild).
18
4.2. Aufbau
In der linken oberen Ecke der Seite findet sich die
Wortmarke der Green Solutions AG wieder.
Rechts daneben werden die Menüpunkte in zwei
Teile aufgeteilt. Im oberen Bereich findet der
Besucher die Servicenavigation, welche aus den
drei Punkten Kontakt, Impressum und Sitemap
zusammengesetzt wird.
Unter dieser Navigation finden die Interessenten die
Hauptnavigation mit allen relevanten Punkten, welche
auf einer Linie mit der Wortmarke stehen.
Im Teaser-Bereich bekommt der Nutzer ein paar
einleitende Sätze zum Content-Bereich sowie ein
großes Bild. Wahlweise besteht der Textblock bzw.
das Bild aus zwei „Modulen“.
Unter dem Teaser-Bereich befindet sich der
eigentliche Content-Bereich. Hier erfährt der
Besucher alle relevanten Informationen, die er
benötigt, wahlweise in zwei oder drei Spalten.
Oliver Rieffenstahl | 20509 | MGDE_07
19
Konzeption zur Website
4.3. Gestaltungsraster
Um der Internetpräsenz einen „aufgeräumten“ sowie
strukturierten Eindruck zu geben, habe ich das
Layout auf einem 12 spaltigen Raster angelegt.
Alle Elemente (Bilder, Texte sowie die Spaten)
wurden an diesem Raster ausgerichtet.
20
4.4. Bildgestaltung
Die Website wurde so gestaltet, dass im oberen
Teaser-Bereich jeweils ein Bild als Eyecatcher steht.
Diese Eyecatcher beziehen sich immer auf die
gerade geöffnete Unterseite.
Außerdem wird der Content-Bereich mit Bildern
aufgelockert.
Viele der benutzten Bilder wurden von mir
zugeschnitten und im Farbton zur Seite angepasst.
Damit erhalten diese eine größere Aussagekraft.
4.5. Bildauswahl
Folgende Bilder kamen zur Auswahl:
Startseite:
Bild_19.jpg
Bild_22.jpg
Bild_24.jpg
Bild_30.jpg
Unsere Energie:
Bild_03.jpg
Bild_15.jpg
Bild_17.jpg
Bild_18.jpg
Bild_23.jpg
Bild_25.jpg
Stromrechner:
Bild_08.jpg
Förderprogramme:
Bild_24.jpg
Energiespartipps:
Bild_28.jpg
Bild_29.jpg
Logo_Blauer_Engel.eps
Logo_EU_label.jpg
Logo_Geealabel.eps
Jetzt wechseln:
Bild_32.jpg
Kontakt:
Bild_31.jpg
Impressum:
Bild_07.jpg
Sitemap:
Bild_14.jpg
Oliver Rieffenstahl | 20509 | MGDE_07
21
5. Navigation
23
Konzeption zur Website
5.1. Navigationsumsetzung
Als Navigationsstruktur wurde eine lineare Struktur
gewählt. Hierbei ist jede Seite von allen Seiten aus
erreichbar. Somit weiß der Besucher sofort, welche
Seiten ihm zur Auswahl stehen. Das heißt, er kann
sich binnen weniger Sekunden auf der Website
zurechtfinden.
Beim Eingeben der URL in den Browser wird der
Nutzer als erstes auf die „Home“-Seite geleitet. Hier
bekommt er sofort einen ersten Eindruck, was auf
den nachfolgenden Seiten zu finden ist.
Von dort aus kommt er entweder durch die Navigation
im Header-Bereich auf die Unterseiten oder er klickt
auf die „mehr“-Icons hinter den Überschriften.
Damit der Interessent weiß, auf welcher Seite er sich
befindet, habe ich den Navigationspunkt im Menü mit
Grün hinterlegt. Zur grafischen Aufwertung ist in der
Mitte des Hintergrunds ein kleiner Pfeil.
24
5.2. Navigationsstruktur
Home
Unsere Energie
Stromrechner
Förderprogramme
Energiespartipps
Jetzt wechseln
Formular
(wird mittels Java-Script aufgeklappt
Kontakt
Impressum
Sitemap
Oliver Rieffenstahl | 20509 | MGDE_07
25
6. Realisierung
27
Konzeption zur Website
6.1. Mouse-Over-Effekte
Damit der User sieht, ob er einen Link „getroffen“
hat oder nicht, werden z.B. die Links in der
Navigationsleise mit dem 50% Grün hinterlegt.
Die Links im Text werden zum einen durch das
„mehr“-Icon als solche gekennzeichnet und zum
anderen dadurch, dass wenn ein Besucher über den
Link fährt, dieser unterstrichen wird.
6.2. Icon „mehr“
Dieses kleine Icon sagt dem Besucher der Website,
dass sich hinter dem Wort/der Wortgruppe vor dem
Icon ein Link verbirgt.
Das Icon wird in 3 verschiedene Varianten verwendet:
der Link führt zu einer Unterseite
der Link klappt den Content dadrunter auf
der Link klappt den Content dadrunter zu
28
6.3. Wortmarke klickbar
Sollte der Besucher auf die Wortmarke klicken, da er
von anderen Websites weiß, dass man dort auf die
„Home“-Seite gelangt, so wird er hier auch nicht
enttäuscht! Ein Klick genügt und man gelangt von
jeder Unterseite zurück auf die „Home“-Seite.
6.4. Personenicons
Damit ein Interessent eine Richtlinie hat, wie viel er in
etwa verbraucht, wurden bei beiden Stromrechnern
(„Home“-/“Stromrechner“-Seite) kleine Icons erstellt,
die verschiedene Beispiele liefern, wie viel in etwa
eine 4-köpfige-Familie verbraucht.
Klickt der Nutzer beispielsweise auf das Icon mit der
4-köpfigen-Familie, so wird automatisch der Wert
5000 KWh in das Eingabefeld getragen.
6.4. Unterseite Stromrechner
Der freie Content-Bereich auf der
„Stromrechner“-Seite wurde für die Ergebnisse des
Stromrechners freigehalten. Dort wird der Interessent
später eine gegliederte Übersicht, der Stromtarife
finden, die zu ihm passen.
Oliver Rieffenstahl | 20509 | MGDE_07
29
7. Entwürfe
31
Konzeption zur Website
7.1. Home
32
7.2. Unsere Energie
Oliver Rieffenstahl | 20509 | MGDE_07
33
Konzeption zur Website
7.3. Stromrechner
34
7.4. Förderprogramme
Oliver Rieffenstahl | 20509 | MGDE_07
35
Konzeption zur Website
7.5. Energiespartipps
36
7.6. Jetzt wechseln
Oliver Rieffenstahl | 20509 | MGDE_07
37
Konzeption zur Website
7.6.2. Jetzt wechseln 2
38
7.7. Kontakt
Oliver Rieffenstahl | 20509 | MGDE_07
39
Konzeption zur Website
7.8. Impressum
40
7.9. Sitemap
Oliver Rieffenstahl | 20509 | MGDE_07
41
8. Formelles
43
Konzeption zur Website
8.1. Verwendete Hard- und
Software
Folgende Hard- und Software benutzte
ich während der Abschlussprüfung:
Hardware:
• AMD Athlon 64 Processor 3000+ 1,81 GHz
• 2048 MB RAM
• Grafkkarte: NVIDIA GeForce 6200 TurboCache
• Ein 22 Zoll Widescreen Monitor (1680x1050 Pixel)
Software:
• Microsoft Windows XP Professional – SP3
• Adobe Photoshop CS3
• InDesign CS3
• Adobe Acrobat 6
44
Autor
Document
Kategorie
Internet
Seitenansichten
5
Dateigröße
8 247 KB
Tags
1/--Seiten
melden