FREIBAU

02

2008 FREIBAU

www.FREIBAU.de

Fach

Thema

Idee

Konzept

Design | Layout

Text

Betreuer

Abgabe

Lehrprojekt MD3

Konzipierung und Gestaltung einer Internetseite

Claude Folschette | Marc Neumeyer

FREIBAU

FREIBAU

FREIBAU

Thomas Dudek | Torsten Stapelkamp

29 Januar 2008

02

fundament

Oft wird die Durchführung der Bauarbeiten als Baustelle bezeichnet. Im übertragenen Sinn bezeichnet Baustelle einen unfertigen Zustand, bei dem man trotz Bemühens noch nicht ein befriedigendes Ergebnis erreicht hat (“Mein Leben ist eine Baustelle”). In ähnlicher Weise werden leere Internet-Domains oder -Seiten von den Inhabern gerne als „Baustelle“ gekennzeichnet, um die Absicht zu betonen, bald etwas auf die Seite zu stellen. In diesem Sinne existiert auch die Dauerbaustelle.

Herzlich Willkommen auf unsere Baustelle

WAS IST FREIBAU?analyse > idee > konzept > gestaltung > umsetung > FREIBAU

was

ist

FR

EIB

AU

?

FREIBAU ist eine Agentur, die sich auf medienübergreifende Gestaltung spezialisiert hat. Es ist ein Netzwerk von Kreativen, das sich dem jeweiligen Projekt der Kunden modular anpasst. Je nach den Anforderungen, stellen wir ein individuelles Team aus Grafikern, Redakteuren, Programmierern und Marketeers zusammen. So wird auf den Ballast großer Agenturen verzichtet und dem Kunden eine Dienstleitung ohne überflüssige Kosten angeboten. Gerade kleine und mittelständige Unternehmen, die mit ihrem Werbeetat größtmögliche Wirkung erzielen wollen, sollen durch die flexible Mitarbeiterstruktur von FREIBAU erreicht werden.

Design wird von uns als Baustelle mit all ihren positiven Effekten angesehen. Wir planen! Wir kreieren! Wir verändern und verbessern! Manchmal reparieren wir auch... Dabei wird immer Neues und Innovatives geschaffen. Design ist kein Prozess, der nach Abschluss vollendet ist. FREIBAU renoviert Projekte und betreut sie dann konsequent weiter. Die Dauerbaustelle ist unser Zuhause und wir sind gerne dort. 05

struktur

stru

ktur

44

46

54

56

64

66

68

70

72

76

78

80

82

86

03 bausteine

> MEDIENASSETS

> FUNKTIONSLAYOUT

> NAVIGATION

> BENUTZERFÜHRUNG

04 statik

> POSITIONSBESTIMMUNG

> NAVIGATION

> FUNKTION

> SCHNELLWAHL

> STATUSANZEIGE

> CONTENTBEREICH

05 small screens

06 baubericht

01 konzept

> FREIBAU - DESIGN

> ZEITPLAN

> ES WAR EINMAL

> FARB - ENTWÜRFE

> NAMENSFINDUNG

> LOGO - ENTWÜRFE

> LAYOUT - IDEEN

08

10

12

14

20

22

24

26

32

32

34

39

40

42

44

02 baukasten

> FREIBAU - LOGO

> FARBEN

> HINTERGRÜNDE

> TYPOGRAFIE

07

Basis-Elemente

01 konzept

FREIBAU - DESIGN

Wie jede andere Agentur braucht auch FREIBAU einen mehr oder weniger unkonventionellen Internetauftritt und ein unverwechselbares Image. Hier ist der Name Programm. Die Seite ist auf das Wesentliche reduziert. Freiraum beziehungsweise Freiheit ist sowohl räumlich als auch in der Menüführung vorhanden. Menü und Inhalt bauen sich abhängig vom Benutzerverhalten auf oder ab. Über visuelle und wörtliche Metaphern zieht sich die Thematik durch Internetpräsenz.

Die Menschen, die wir mit der Webseite erreichen, sind einflussreiche Entscheider in ihren Unternehmen. Sie sind mehrheitlich männlich und zwischen 30 und 60 Jahre alt. Sie weisen eine überdurchschnittliche Bildung und Intelligenz auf.

01 k

onze

ptF

RE

IBA

U -

des

ign

11

Ein gut geplantes Projekt kommt nicht ohne Zeitplan aus. Hier ist unsere Planung.

ZEITPLAN>>>>

01 k

onze

ptze

itpla

n

19 23

26 07

26 15

01 25

25 15

01 31

01 15

OKTOBER DEZEMBER JANUAR FEBRUARNOVEMBER

DESIGNDOKUMENTATION

UMSETZUNGTEST/KORREKTUR

LAYOUTDRUCK/PRODUKTION

KONZEPTION

13

/* ES WAR EINMAL

01 k

onze

ptes

war

ein

mal

Einleitung Ein gutes Konzept entsteht durch eine gute Idee. Die Planung des Konzepts ist abhängig von der Entwicklung dieser. Unser Konzept ist eine Evolution aus vielen Ideen, die über mehrere Monate konstant neubewertet und gegeneinander abgewogen wurden. Hier sind unsere besten Ideen kurz aufgelistet, sodass das Endkonzept der FREIBAU-Internetpräsenz nachzuvollziehen ist. 1515

FlugreiseNachdem wir uns entschieden haben, die Internetpräsenz für ein Agentur zu gestalten, war der erste Konsens, dass dies über Metaphern erfolgen sollte. Inspiriert vom glamourösen Image der Fluggesellschaften, sollte der Auftritt unserer Agentur thematisch an Reise und Urlaub angelehnt sein – eine Reise durch die Entwicklung des Designs. Die Webseite wäre im Stil der 70 Jahre überwiegend fotografisch gestaltet worden und der Name der Agentur hätte dann „Freiflug“, „Südsicht“ oder „Südseh“ sein können.An die Reisethematik angelehnt gab es auch die Idee, dass die Agentur international tätig sein könnte und die Seite in sechs verschiedenen Sprachen zu gestalten. Die Auswahl der Sprachen könnte wie auf Abbildung aussehen. Die von uns gesprochenen

Sprachen, (Englisch, Deutsch, Französisch, Niederländisch, Luxemburgisch, Spanisch) sind in die Szenerie eines Tourismuszentrums eingebunden. Der User würde die Sprache auswählen, bevor er die Seite unserer Agentur (Tourismuszentrum) betritt. Der Nutzer hätte in diesem Konzept die Möglichkeit, sich durch die Räumlichkeiten zu bewegen und so zu dem Inhalt zu kommen. Ein Karten- oder Broschürenständer wäre beispielsweise der Weg zu unserem Portfolio (Abbildung ) und Informationen zum Team der Agentur würde man an einem Schalter bekommen, indem man eine der Personen (Guides) auswählt und eine Zoomfahrt auf das Anhängeschild stattfindet, auf der alle Informationen zur jeweiligen Person stehen. (Abbildung ) Die Farbgebung der Skizzen ist vorläufig.

01 k

onze

ptes

war

ein

mal

0103

02

16

01 k

onze

ptes

war

ein

mal

01 02 03 17

01 k

onze

ptes

war

ein

mal

Baustelle Ziemlich gleichzeitig mit Reisemetapher entstand der Gedankengang, dass eine Baustelle die Phasen des Designs deutlicher versinnbildlicht, dass die Agentur in diesem Zusammenhang ein „Bauunternehmen“ wäre. Abbildung und zeigen unsere ersten visuellen Ideen für die Webpräsenz in der Thematik der Baustelle. Wir stellten fest, dass man mit der Idee des Bauens einen optisch ansprechenden eigenen Look kreieren kann und so räumten wir nach kurzem Abwägen diesem Gedankengang mehr Potenzial als der Reisethematik ein und begannen uns das Thema anzueignen. Diese Recherche befasste sich unter anderem mit Bildsuche im Internet, Mindmaps und Brainstorming. Danach begann dann die Suche nach einer geeigneten Farbe, dem passenden Namen, Logo, und Design.

04 05

18

*/ 01 k

onze

ptes

war

ein

mal

04 05 19

FARB - ENTWÜRFE

01 k

onze

ptfa

rb -

ent

wür

fe

Die Farbe vermittelt dem Betrachter die gewünschten Gefühle. Verschiedene Farben lösen unterschiedliche Sinnesempfindungen beim Betrachter aus. Für unsere Baustelle war es deshalb wichtig, farblich in der Thematik der Baustelle zu bleiben und trotzdem die Sinne des Betrachters zu wecken. Mögliche Farben, die den Rahmen des Themas nicht sprengen sind orange, rot oder gelb in Verbindung mit schwarz, grau und weiß. (Abbildung ) 0606 21

NAMENSFINDUNG

Ideen waren unter anderem : „FN-Design“ / „FN- Konzept“ (die Anfangsbuchstaben unserer Nachnamen), „Macromedia“, „Mediaconcept“, „Neo Web“, „Metroweb“ und „Werkbund“. Letztlich verwarfen wir diese Entwürfe, da sie uns nicht aussagekräftig genug waren oder bereits an andere namhaften Organisationen vergeben waren. Eng an der Metapher blieben uns „bauwerk“, „neubau“ und „freibau“. Gegen den ersten der drei Namen entschieden wir uns, um nicht mit dem aktuellen Trend in der Namensfindung von Agenturen zu schwimmen. Die Entscheidung zwischen den letzten beiden Namen fiel auf FREIBAU.

FN-Design

FN-Konzept

Mediaconcept

Neo Web

bauwerk

neubau

FREIBAU

01 k

onze

ptna

men

sfin

dung

23

LOGO - ENTWÜRFE

FREIBAU

freibau

Freibau

FreiBau

FREIBAU

freibau

freiBAU

freiBAU

Freibau

FreiBau

FREIBAU

freibau

Freibau

FreiBau

freiBAUfreiBAU

FREIBAU

freibau

Freibau

FreiBau

FREIBAU

freibau

freiBAU

freiBAU

Freibau

FreiBau

FREIBAU

freibau

Freibau

FreiBau

freiBAUfreiBAU

FREIBAU

freibau

Freibau

FreiBau

FREIBAU

freibau

freiBAU

freiBAU

Freibau

FreiBau

FREIBAU

freibau

Freibau

FreiBau

freiBAUfreiBAU

01 k

onze

ptlo

go -

ent

wür

fe

Nachdem der Name feststand, machten wir uns Gedanken über den Look des Logos. Es sollte ausdrucksstark sein und eine Verknüpfung zur Baustelle haben. Da die Entwicklung eines Logos immer einen längeren Zeitraum in Anspruch nimmt, haben wir uns zeitgleich an die ersten digitalen Entwürfe des Layouts gesetzt. Bei den Logos in den Folgenden Entwürfen handelt es sich um Platzhalter. 25

LAYOUT - IDEEN

01 k

onze

ptla

yout

- id

een

Bei der gestalterischen Konzeption arbeiteten wir zwei verschiedene Ansätze heraus.

Der erste Ansatz war sehr objektorientiert. (Abbildung & ) Der Inhalt sollte auf sechs verschieden gestalteten Seiten dargestellt werden. Illustrative Grafiken sollten die Inhalte unterstützen, den Benutzer durch die Seite leiten und über Flash interaktiv in die Menüführung integriert werden. In diesem Sinne werden die von uns abgeschlossenen Projekte (Portfolio) auf einem baustellentypischen Billboard (zeigt normalerweise das Projekt, das auf dem Menüpunkt Baustelle entsteht) dargestellt. Das gelb-schwarze Absperrband ist ein Element, das in allen Unterseiten wiederkehrt. Es leitet jede Seite durch eine unterschiedliche Animation ein. Dies kann durch skalieren, drehen und Zoomfahrten realisiert werden. Im Laufe der gestalterischen Konzeption

entschieden wir uns gegen schwarz als Hintergrundfarbe , obwohl sie edel wirkte. (Abbildung )Die Thematik des Bauens verfehlte schwarz jedoch und erinnert zu sehr an den Nachtzustand.

07 08

08

27

2801

kon

zept

layo

ut -

idee

n

0728

01 k

onze

ptla

yout

- id

een

08 29

01 k

onze

ptla

yout

- id

een

01 k

onze

ptla

yout

- id

een

Im zweiten Konzept entwickelten wir diesen Ansatz weiter. Gegen die Entwürfe des ersten Layouts entschieden wir uns, weil es der konventionellen Gestaltung von Flashseiten der späten neunziger Jahre zu ähnlich war. Aus diesem Grund sahen wir es als überholt an und begannen es gestalterisch zu reduzieren. Inhalt und Menü werden im Stile eines Triptichon präsentiert. Der Blickwinkel des Nutzers befindet sich grundsätzlich im Zentrum und die drei Teile des Menüs bewegen sich abhängig vom gezeigten Inhalt nach vorne oder hinten. Im linken Teil befindet sich die Menüführung. Solange der Benutzer sich dort befindet, ist ihm dies räumlich am nächsten. Nach einer Anwahl fährt der linke Teil in den Hintergrund und die gegenüberliegende Fläche, in der darstellungsbezogene Informationen (so wie kleine und große Bandbreite für das Abspielen von Videos) zu sehen sind. Erfolgt eine Auswahl wendet sich das Zentrum dem Nutzer zu. Dort wird der Inhalt dargestellt.

Alternativ sind auch Versionen dieses Menüs denkbar, die je nach Bedarf ein- und ausfahren. (Abbildung )

Da der Trend sich auf reduziertes Design entwickelt, wollen wir mit diesen Mitteln unsere Gestaltung innovativ von der Masse abgrenzen. Inspiriert von der Menüführung von MiniMl empfanden wir die Konzepte als überladen oder zu verspielt. Da wir jedoch im Gegensatz zu MiniMl unseren Inhalt größer darstellen wollten, entschieden wir uns für einen weiträumiges Menü, das auf eine Auflösung von mindestens 1024 x 768 Pixel optimiert wurde. Auf die illustrativen Baulandschaften der ersten Konzeption verzichteten wir zugunsten eines radikal auf die Funktionalität reduzierten Designs. Dieses Konzept führte dann zu unserem finalen Layout.

09

30

Ut praessequisl el irit ute doluptat. Ut utpat. Duip ero con hendre magna

tatetu.

FREIbau

bau FREI

FREIbau

bauFREI

01 k

onze

ptla

yout

- id

een

09 31

02 Baukastenvisual identity

Simpel, kompakt, audrucksstark, das FREIBAU-Logo.

FREIBAU - LOGODie Farbige Version des Logos ist bei jeder Reproduktion bevorzugt, wenn auch möglich.

Die Schwarz-weisse Version kann benutzt werden wenn es Farbenkonflikte gibt.

02 b

auka

sten

FR

EIB

AU

- lo

go35

NEGATIVE VERSION -FARBE - Simpel, kompakt, audrucksstarkPOSITIVE VERSION - FARBE - Simpel, kompakt, audrucksstark

NEGATIVE VERSION -SCHWARZ/WEISS - Simpel, kompakt, audrucksstarkPOSITIVE VERSION - SCHWARZ/WEISS - Simpel, kompakt, audrucksstark

90% 80% 70% 60% 50% 40% 30% 20% 10%100%

02 b

auka

sten

FR

EIB

AU

- lo

go

1038

Auf Flächen die dunkler als ein 50 % Schwarz sind, sollte die negative Version des Logos benutzt werden. Bei der negativen Version werden die Original-Farben des Logos umgekehrt.Bei der Schwarweiss-Version des Logo wird die Farbe gelb durch weiss ersetzt. (Abbildung ) #000000

C:0 M:0 Y:0 K:100

R:0 G:0 B:0

FarbenWir mussten uns zwischen rot, orange und gelb entscheiden. Unsere Wahl fiel letztendlich auf gelb, weil diese Farbe von den drei genannten den größten Kontrast auf schwarz gibt. Rot und orange wirkten zu aggressiv.

02 b

auka

sten

farb

en

C:0 M:0 Y:100 K:0

R:255 G:255 B:0

#FFF00

10 39

HINTERGRÜNDE

02 b

auka

sten

hint

ergr

ünde

41

TYPOGRAFIE

Zolano Sans BTNbold

Regular light

Regular medium

Regular normal

Regular bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

02 b

auka

sten

typo

graf

ie43

03 bausteinewebseite

MEDIENASSETSZusammengefügt bilden die Medienassets die Bausteine aus

denen sich unsere Webseite zusammensetzt. Medienassets sind Dateien wie Grafiken, Videos, Musikdateien und Textbausteinen.

03 b

aust

eine

med

iena

sset

s

Alle grafischen Elemente sind nach folgenden Richtlinien erstellt worden: > ReduktionDie Reduzierung auf die wesentlichen Elemente soll größtmögliche Benutzerfreundlichkeit gewährleisten. Es werden nur die für den Nutzer relevanten Elemente gezeigt um so Verwirrung durch inaktive Optionen auszuschließen.

> VerständlichkeitDurch überwachte qualitative Tests haben wir mit Hilfe von Probanten unser Assets auf Verständlichkeit getestet.

> ThematikAlle Elemente sollten optisch auch auf einer Baustelle vorkommen können

> Innovativ 47

03 b

aust

eine

med

iena

sset

s

Leiste Die gelb - schwarz gestreifte Leiste wir nach abgeschlossenem Ladevorgang über ein Bewegungs-tweening von oben nach unten durch die Webseite bewegt. Sie ist ausschließlich ein Schmuckelement, das die Seite nach unten abschließt und bietet keine weitere Funktonalität. (Abbildung )

ButtonsSchaltflächen sind im Normalstatus schwarz. Auf den verschieden Buttons liegen jeweils in der Farbe gelb Text oder Icons, die ihre Bedeutung anzeigen. So verdeutlicht der Brief als Symbol die Möglickeit eine Nachrichtzu senden. Der „Mouse-Over-Status“ wird durch eine Veränderung des schwarzen Hintergrundes in grau angezeigt. Eine Anwahl führt immer dazu, dass ein Inhalt aufgerufen oder ein Status verändert wird. In abgewandelter Form und Funktionalität existieren zwei weitere Arten von Buttons.(Abbildung )

Counter ButtonsDiese Buttons haben primär eine anzeigende Funktion. Auf ihnen sind Zahlen zu sehen, die in direktem Bezug mit dem Inhalt der Webseite stehen. Im Gegensatz zu den bereits beschriebenen Schaltflächen wird kein „Mouse-Over-Status“ signalisiert und eine Anwahl führt zu keiner Funktion. Die graue Farbigkeit der Buttons zeigt dem Nutzer seinen zuletzt angewählten Inhalt. Die Bewegung mit der Maus über einen Counter Button führt dazu, dass die animierten Buttons sich einfahren.

BAUART

BAUWERK

02

01

< < <

< < <

11 1148

03 b

aust

eine

med

iena

sset

s

Animierte ButtonsAnimierte Buttons werden immer in Kombination mit Counter But-tons verwendet. Auf ihnen steht ausgeschriebener Text. Ähnlich wie bei den Buttons signalisiert graue Hintergrundsfarbe den Mouse-Over-Status. Sind die animierten Buttons sichtbar, so führt eine Anwahl dazu, dass sie einfahren. Sind sie nicht sichtbar, können sie über eine externe Schaltflächen-Anwahl ausgefahren werden.

Interaktiv generierte ButtonsDiese Schaltflächen sind grau um zu signalisieren, dass sie ausgewählt wurden. In ihnen werden Zahlen oder Texte generiert, die dem Nutzer anzeigen, wo im Menü er sich gerade befindet. (Sie sind auch in der Statusanzeige zu sehen) Die Bewegung des Mauszeigers über einen dieser Buttons führt dazu, dass das Menü sich auf der gewünschten Position, aufgerufen wird und die Buttons verschwinden. (Abbildung )

Animierter ContentEs gibt zwei verschiedene Formen von animiertem Content. Entweder ist der Inhalt auf einer runden Scheibe angeordnet und wird abhängig von externen Eingaben gedreht oder der Content befindet sich horizontal angeordnet und kann nach rechts oder links bewegt werden. Content wird dann animiert, wenn mehr Inhalt als Raum in einer Rubrik vorhanden ist. Inhalte selbst sind nicht interaktiv.

BAUART

BAUWERK

02

01

<

<

<

<

< > > >< <

01 01 01 CORPORATE

11 49

03 b

aust

eine

med

iena

sset

s

AufbaulinienIn Kombination mit Masken ziehen die Linien ähnlich wie eine Augenbewegung den Inhalt auf. Nach der Animation sind Linien statisch. (Abbildung )

StatusanzeigeDie Statusanzeige ist ein interaktiv generierter Text, der sich aus Worten und > zusammensetzt. Der > fungiert als Trennzeichen.(Abbildung )

FließtextFließtext ist schwarz auf weißen Hintergrund und Regular Normal in Schriftgröße 10.

freibau > bauwerk > Corporate > loc8

Put et, quisi tie tat eliquat. Lit nim zzrit la ad dolore commodit ad dolor amcon ut velesenim zzriuscipisi et, sit lutElit venit la aut luptat utatissim incilit in et, sed tat, sequam, sismolo rerat. Feugiam quat augait nonse dolorer sectem ip exeratuero odignis dui ex etuer aliquam conummy num in veniamc onummy nim del incilit laore et.

111150

03 b

aust

eine

med

iena

sset

sEingabetextEingabetext ist gelb auf schwarzen Hintergrund und Zolano Bold Schriftgröße 9. Dem Nutzer wird seine Position im Eingabetext durch einen blinken Courser deutlich gemacht.(Abbildung )

PopupFür den Menüpunkt Impressum verwenden wir eine semi-transparente Farbfläche, die sich vor den Inhalt der Webseite animiert. Ein Klick auf die Farbfläche führt dazu, dass diese wieder ausgeblendet wird.

ScrollbalkenDer Scrollbalken ist nach dem in Microsoft Windows verwendeten Vorbild gehalten. Ein Klick auf den nach oben bzw. nach unten zeigenden Button führt dazu, dass sich der Text in die je umgekehrte Richtung bewegt. Über einen gelb akzentuierten Block unter der Leiste wird dem Benutzer seine Position im Text angezeigt. Abhängig von der Länge des Textes verändert er seine Größe. Ein langer Text wird durch einen sehr kurzen Block angezeigt. Bei kurzem Text verhält es sich umgekehrt.

Vorname*

Name*

Email*11

51

03 b

aust

eine

med

iena

sset

s03

bau

stei

nem

edie

nass

ets

Radio ButtonDer Radio Button wird für booleanische Auswahlmöglichkeiten verwendet (An / Aus). Der An-Zustand wird dem Nutzer durch einen grauen Hintergrund und einen gefüllten Kreis signalisiert. Der Aus-Zustand wird mit einem leeren Kreis und schwarzen Hintergrund angezeigt.

HintergrundFür die Darstellung auf großen Monitoren verwendeten wir einen sich wiederholenden Hintergrund, der ein Streifenmuster in dezentem grau bildet. Nach oben blenden die grauen Streifen in weiß aus – eine grafische Referenz an die Freiheit.(Abbildung )

SoundIm Hintergrund läuft dezente Musik. Angedacht sind hier Musikrichtungen zwischen Ambient und Jazz, die unsere Freiheit unterstreichen.1152

03 b

aust

eine

med

iena

sset

s

Hintergrund

Aufbaulinien

interaktiv generierte Buttons

Eingabetext

Buttons

Leiste

Satatusanzeige

11 53

FUNKTIONSLAYOUTDie Freibau - Seite ist in ein Hauptmenü, eine Statusanzeige, einen Contenbereich und ein Schnellwahlbereich

eingeteilt. Im Folgenden werden die Funktionen und Inhalte dieser Bereiche erklärt.

03 b

aust

eine

funk

tions

layo

ut

Hauptmenü

Statusanzeige

Contentbereich Schnellwahlbereich

55

NAVIGATION

03 b

aust

eine

navi

gatio

n

12 Scribble fürs Navigationskonzept 57

03 b

aust

eine

navi

gatio

n

HauptmenüBei der Darstellung des Menüs werden metaphorisch die Phasen des Bauens aufgegriffen. Die einzelnen Optionen stellen Bausteine bzw. Phasen da, mit denen sich der Benutzer seinen gesuchten Optionen aufbaut. Vor einer Auswahl fahren die Optionen als animierte Buttons in Textform aus. Nach der Auswahl fahren sie ein und sind in Zahlenform noch immer anwählbar.

Wählt man zum Beispiel das Cooperate Design von „loc8“ aus, so geht man wie folgt vor. Mit einem Klick auf den FREIBAU-Button fährt das Menü in seiner ersten Phase aus. Nach einem Klick auf die Option Bauwerke fahren die animierten Buttons der ersten Phase ein und die graue 01 signalisiert die Auswahl von Bauwerken in der ersten Phase. Zeitgleich werden die Counter-Buttons angezeigt.

Ein Klick auf den Corportate-Button wiederholt diesen Vorgang und die dritte Phase wird sichtbar. Ein Klick auf Loc 8 minimiert das Menü und der Inhalt wird im mittleren Bereich abgebildet.Nachdem ein Inhalt angewählt wurde, (üblicherweise in drei Schritten) wird das Menü auf eine Zeile zusammengeschoben. Es übernimmt jetzt auch eine anzeigende Funktion, weil nur die Phasen die zum Content geführt haben und der Name des Inhaltes selbst angezeigt wird. (Interaktiv generierte Buttons) So wird in einem minimalen Raum ein Maximum an Informationen und Funktionalität erreicht. Alle Menüpunkte sind hierarchisch geordnet und zählen von 1 bis 9. Die wichtigsten Elemente sind grundsätzlich unten aufgebaut, um so die Wege, die der Nutzer mit der Maus bei der Anwahl zurücklegt, zu minimieren.58

03 b

aust

eine

navi

gatio

n

ContentbereichEs existieren zwei verschiedene Untermenükonzepte, die auf den Contentseiten eingebunden sind, wenn viel Inhalt dargestellt werden soll. Im Bereich Bauwerke (Portfolio) verwenden wir ein drehendes Menü. Es wird damit auf das revolutionär, verändernde, der Gestaltung und des Inhaltes verwiesen. Bei Bauart verwenden wir ein Menü, das den Inhalt abhängig von der Menge, nach rechts und wieder zurück bewegt. Dies soll eine Referenz an das evolutionäre Wachstum der Agentur sein. Es wird also das drehende Menü für Medienassets verwendet und das horizontale Menü für agenturbezogene Informationen.

BAUWERKBauwerke sind die Monumente unseres kreativen Schaffens. Sie sind das Portfolio der Arbeit unserer Agentur, die sich in Interface Design, Coporate Design, Print Design, Motion Design, Video Editing und Audio Editing spezialisiert hat. In jeder dieser Rubriken sind einige Projekte angeordnet.60

03 b

aust

eine

navi

gatio

n

BAUARTUnsere Häuser sind nicht auf Sand gebaut. In Bauart geben wir unseren Kunden ausführliche Informationen wer ihr Projekt verwirklicht, und wie dies realisiert wird.Im Menüpunkt „Plan“ ist der Bauplan angeordnet. Hier wird der Nutzer eine humorvolle Illustration sehen, die ihm die Phasen des Designs vor dem Hintergrund der Baustelle erläutert. Thematisch wird ihm in diesem Bereich die „Does & Do Nots“ im Umgang mit den Kreativen im Kundengespräch, der Konzeption, der Realisierung und der Evaluation gezeigt. Im Menüpunkt Philosophie wird dem Nutzer erklärt warum er sich bei uns überhaupt auf der Baustelle befindet (siehe Freibau Text).

Bei der Option „Leitung“ handelt es sich selbstverständlich um die Bauleitung – also uns! Hier werden kurz und bündig Qualifikation, kulinarische Vorlieben, Arbeitszeiten und alle anderen wissenswerte Details genannt. Auf ein Foto mit Bauhelm kann natürlich nicht verzichtet werden.

Nun weiß der potenzielle Kunde, was wir gebaut haben, und wer es wie für ihn konstruiert. Im Bereich „Service“ sind noch einmal alle Arbeitsbereiche mit Verlinkung zu den Bauwerken zu sehen. In diesem Bereich machen wir algemeinverständliche Angaben und versuchen so sich wiederholende Fragen, bereits vor einem persönlichen Gespräch zu beantworten.

Ihr wollt uns live in Aktion sehen? Im Menüpunkt „Activities“ ist unsere Präsenz auf Messen, Sponsorings und in der Nachbarschaft aufgelistet. Hier werden Fotos, Termine und weiterführende Informationen zu sehen sein.

Im Menüpunkt Kontakt werden dann alle Mitarbeiter des Netzwerks aufgelistet. Über ein Formular können diese dann einfach und schnell kontaktiert werden. Pflichtangaben nach § 5 Tele-Medien Gesetz sind sowohl im Menüpunkt Impressum als auch neben der Schnellwahl zu erreichen. 61

03 b

aust

eine

navi

gatio

n

SchnellwahlbereichSCHNELLWAHLÜber die Schaltfläche mit der Aufschrift Code gelangt der Nutzer durch die Eingabe einer Zahlenkombination zum gewünschten Menü. Diese Funktion ist gedacht, um dem Benutzer ein höheres Maß an Benutzerfreundlichkeit ohne Maus zu bieten. Sie führt gerade bei Personen, die die Webseite gut kennen zu einer Zeitersparnis, da sie den Code der zum gewünschten Inhalt führt, einfach eingeben können. Auch in telefonischen Gesprächen bietet sie für uns bei der Kundenaquise Vorteile, da wir dem potenziellen Kunden abhängig von seinem Auftrag, über die Webseite mit Hilfe der Zahlen-Codes schnell und verwechselungsfrei einen bereits fertig gestellten Auftrag anweisen können. Um dem Nutzer trotzdem seine Optionen zu zeigen wird das Hauptmenü während der Eingabe von Zahlen aufgerufen (Abbildung ZZS)

IMPRESSUMDurch die semitransparente Fläche die über die Webseite gelegt wird, soll der Menüpunkt Impressum, der gesetzlich vorgeschrieben ist, deutlich vom Rest der Webseite abgegrenzt werden. Auch die Verwendung einer Scrollbar für den Fließtext unterstützt diesen Effekt. Wie im Baukasten festgelegt wird die Regular Schrift verwendet.

KONTAKTFORMULARDie Impelmetation eines Kontaktmenüs hat zwei Vorteile. Zum einen bietet sie Kunden, die ihr E-Mail Programm nicht konfiguriert haben oder ein Webmailer (z.B. hotmail, gmx, web) benutzen, die Möglichkeit ohne Probleme eine Anfrage zu senden. Dadurch, dass die E-Mail Adresse nicht im Quelltext zu sehen ist, wird zudem das Junk-Mail Aufkommen minimiert. Zum anderen garantiert es, dass alle Anfragen in ähnlich strukturierter Form gesendet werden. Über das Script wird geprüft, ob all Pflichtfelder in ordnungsgemäßer Art und Weise ausgefüllt sind. Eine firmeninterne Datenbank setzt diese Anfragen dann in Kontext und prüft ob es sich um Bestandkunden oder Neukunden handelt. Bisherige Unterhaltungen werden inDatenbank aufbereitet und stehen unseren Mitarbeiten zur Verfügung.(Abbildung )

code

1362

03 b

aust

eine

navi

gatio

n

Vorname*

Name*

E-mail*

Betreff*

Geschlecht Männlich Senden

Reset

Anmerkung *

Weiblich13 63

BENUTZERFÜHRUNG

03 b

aust

eine

benu

tzer

führ

ung

Unsere Benutzerführung startet bei Aufruf der Webseite mit der Leiste, die durch ihrer Bewegung die Aufmerksamkeit des Benutzers auf den unteren Seitenbereich und die dort vorhandenen Auswahlmöglichkeiten zieht. Gleichzeitig begrenzt die Linie den Inhaltsbereich. Unter ihr befindet sich die Positionsanzeige, die dem Nutzer seinen Weg mitteilt. Unterstützt wird dies durch über die Counter-Buttons, die sich nach der ersten Inhaltsanwahl grau färben und dem Benutzer so verdeutlichen, welchen Weg er zuletzt genommen hat. Auch das Menü in seiner minimierten Form, das nach Anwahl zu sehen ist, weist den Benutzer darauf hin, wo er sich befindet

Unter dem Hauptmenü angeordnet befindet sich eine textbasierte Positionsanzeige. Sie zeigt zu jedem Zeitpunkt dem Nutzer an, wo er sich im Menü befindet und welche Option er angewählt hat.

freibau

65

04 statikscript

Html und Action Script 2.0 wurden bei der Umsetzung unseres Konzepts verwendet. Das Flashvideo wird über eine Html-Seite geladen. Wir entschieden uns für Adobe Flash, weil es eine im Internet weit verbreitete technologische Plattform ist. Im Vergleich zu html, css und php/asp bietet uns Flash die Möglichkeit Inhalte zu animieren.

POSITIONSBESTIMMUNG

04 s

tatik

posi

tions

best

imm

ung

Da wir in der Programmierung die Wege, die der Nutzer zu seinem Ziel nimmt, nicht voraussehen können, nimmt die Positionsbestimmung für den Aufbau des Menüs und der Benutzerführung eine bedeutende Rolle ein. Jeder Position im Menü und Inhalt ist eine Nummer zugewiesen. Die Anzahl der Dezimalstellen ist gleichbedeutend mit der Phase des Menüs. Eine Dezimalstelle bedeutet also, dass sich der Nutzer in der ersten Phase befindet. Die Zahl 120 bedeutet, dass sich der Nutzer in der 3. Phase des Menüs befindet. Ziffern stehen in direkten Bezug zu den Nummern, die im Menü auf den

Counter-Buttons gezeigt werden. Die Zahl 124 sagt aus, dass zu erst 01 Bauwerke, dann 02 Corporate und abschießend 04 Mystery TVs gewählt wurden. Eine 0 am Ende einer Zahl mit 3 Dezimalstellen bedeutet, dass eine abschließende Auswahl über den Inhalt noch nicht getroffen wurde und der Nutzer sich noch im Menü befindet. Wenn sich keine 0 (so wie bei 124) am Ende befindet, so ist die 3. Phase des Menüs abgeschlossen und das Menü wird verlassen. Die Position wird innerhalb der für die Animation notwendigen Funktionen festgelegt und befindet sich in der Variable „x“. 69

NAVIGATION

04 s

tatik

navi

gatio

n

Die Abstände der Buttons im Menü errechnen sich abhängig von der Position des ersten Counter-Buttons. So errechnet sich die Positionen der 3. Phase wie folgt :

mc_110._x=mc_1._x+mc_1._width+4+menuspace*abstand1+mc_10.

_width+4+menuspace*abstand10;

mc_110_afm._x=mc_110._x+mc_110._width+4;

mc_[zahl] ist die Variable für „Counter Buttons“. Mc steht dafür, dass es sich um einen Movie Clip handelt.mc_[zahl]_afm ist die Variable für animierte Buttons. „afm“ ist die Abkürzung von Ausfahrmenü.menuspace beinhaltet den Wert für den Abstand des animierten Buttons. Durch diese Variable kann an einer Stelle des Codes zentral der Abstand festgelegt werden und so später für alle

Positionsberechnungen ohne Aufwand geändert werden.Abstand[zahl] ist eine boolische Varible, durch die festgelegt wird, ob der Abstand des animierten Buttons an oder aus ist.

Um die Position für den dritten Counter-Button zu errechnen, wird also der X-Wert des ersten Counterbuttons mit seiner Breite addiert und dann der Abstand von 4 hinzugefügt. Die Multiplikation menuspace*abstand1 errechnet den eventuellen Abstand von dem animierten Button, der sich in ausgefahrenem Zustand auf die weiteren Positionen auswirken kann. Wenn er an ist wird 1*125=125 errechnet. Ist er aus, so ist dieser Abstand 0*125=0. Es wird dann wieder der Abstand von 4 addiert und der Vorgang wird für die 2. Phase wiederholt. Die Position des dritten animierten Buttons wird durch den X-Wert des dritten Counter-Buttons + seine Länge und den Abstand von 4 errechnet. 71

72

freibau

02

01

02

03

04

05

06

01

IMPRESSUM

KONTAKT

ACTIVITIES

SERVICE

LEITUNG

PLAN04 s

tatik

navi

gatio

n72

Das Ein- und Ausfahren der animierten Buttons realisiert diese Funktion:

mc_110_afm.onEnterFrame = function() {

if (this._currentframe == this._totalframes) {

delete this.onEnterFrame;

} else {

this.nextFrame();

}

}

Die animierten Buttons bestehen aus 5 Frames. Am Ende und am Anfang liegt ein stop(); Hier prüfen wir ob die Animation ausgefahren ist (curentframe= 5 | totalframes=5). Dies bedeutet dass der Button ausgefahren ist und bei Anwahl gelöscht wird.

Ist der Button nicht ausgefahren, (currentframe == totalframes) wird er eine Frame weiter gesetzt und so gestartet. Die minimierte Version des Menüs, die nach Anwahl des Contents sichtbar ist, wird innerhalb der Funktion, die ihn aufruft, festgelegt:

d_01.sm1="02";

d_10.sm10="01"; d_100.sm100="01";

d_content.sm1000="BAUPLAN";

04 s

tatik

navi

gatio

n73

FUNKTION

04 s

tatik

funk

tion

Eine typische Funktion auf die unser Menü basiert sieht also wie folgt aus:

function fu_211_afm() {

unloadMovie("main");//lösche den in Container "main" geladenen InhaltloadMovie("211.swf", "main");//lade den Film in "main" statusbar=st[x=211];// legt Position fest d_01.sm1="02";

d_10.sm10="01";

d_100.sm100="01";

d_content.sm1000="BAUPLAN";// legt Anzeige für das minimierte Menü fest

mc_210.d_111._visible = true;

mc_210.d_112._visible = false; //ändert status für counter Button in grau

mc_freibau._visible=true;

mc_1._visible=false;

mc_20._visible=false;

mc_210._visible=false; //fährt alle animierten buttons ein d_01._visible = true;

d_10._visible = true;

d_100._visible = true;

d_content._visible = true; //zeigt das minimierte Menü

mc_210_afm.onEnterFrame = function() {

if (this._currentframe == 1) {

delete this.onEnterFrame; //löscht den animierten Button } else {

this.prevFrame(); //startet ihn };

};

};

75

SCHNELLWAHL

04 s

tatik

schn

ellw

ahl

Die Schnellwahl greift auf die Positionsbestimmung zurück und wertet mit Hilfe von mathematischen Gleichungen aus, welche Funktion aufzurufen ist:

y = Math.floor(x/100); //aberundet, teilt beispielsweise Position x=111 durch 100 in y if(y==1){ // 1 bedeutet das 01 Bauwerke angewählt wurden y = Math.floor(x/10);// teilt x=111 durch 10 und rundet ab if(y==11){ //bedeutet das 01Bauwerke > 01Interface gewählt wurde

Nun wird wieder die Funktion aufgerufen und das Menü kann auch rückwärts aufgebaut werden.

code

77

STATUSANZEIGE

04 s

tatik

stat

usan

zeig

e

Die Statusanzeige liest die Positionsanzeige x aus und lädt über eine Liste Text in ein Interaktives Textfeld. Hier einige Beispiele:

var st = new Array();

st[0]="freibau";st[1]="freibau > 01 bauwerke";st[11]="freibau > 01 bauwerke > 01 interface > ";st[111]="freibau > 01 bauwerke > 01 interface > 01 örtel & prümm";st[112]="freibau > 01 bauwerke > 01 interface > 02 rheinklang";st[113]="freibau > 01 bauwerke > 01 interface > 03 fotoschule nrw 1";st[114]="freibau > 01 bauwerke > 01 interface > 04 Fotoschule nrw 2";st[115]="freibau > 01 bauwerke > 01 interface > 05 avenir construct";st[116]="freibau > 01 bauwerke > 01 interface > 06 loc 8";st[117]="freibau > 01 bauwerke > 01 interface > 07 ankerhüs";

st[118]="freibau > 01 bauwerke > 01 interface > 08 lorenzen";st[12]="freibau > 01 bauwerke > 02 corperate > ";st[121]="freibau > 01 bauwerke > 02 corperate > 01 loc 8";st[122]="freibau > 01 bauwerke > 02 corperate > 02 madison";st[123]="freibau > 01 bauwerke > 02 corperate > 03 schwarzweiss";st[124]="freibau > 01 bauwerke > 02 corperate > 04 mysrery tv's";st[125]="freibau > 01 bauwerke > 02 corperate > 05 zap.lu";st[126]="freibau > 01 bauwerke > 02 corperate > 06 ance"; st[13]="freibau > 01 bauwerke > 03 print > ";st[131]="freibau > 01 bauwerke > 03 print > 01 domino effect";st[132]="freibau > 01 bauwerke > 03 print > 02 kölsch live";st[133]="freibau > 01 bauwerke > 03 print > 03 sis";st[134]="freibau > 01 bauwerke > 03 print > 04 dudlange";st[135]="freibau > 01 bauwerke > 03 print > 05 madison";st[136]="freibau > 01 bauwerke > 03 print > 06 carpi"; 79

CONTENTBEREICH

04 s

tatik

cont

entb

erei

ch

KreisbewegungDer Content ist in diesem Konzept auf einer Scheibe angeordnet. Die Positionierung erfolgt in Grad... Der script:

stop();#include "mc_tween.as" //externer Code, der für Übergänge in Bewegungen sorgtvar speed:Number = 1; // Parameter für externen Codecontent=4; //Anzahl der Elemente in Galeriepos=0; // Positionierung in Grad ... also hier 0°mc_content_rotate.mc_content_1.loadMovie("121_video.swf"); // Inhalt wird geladen_root.musik_c.gotoAndPlay(2); // Musik ist an (2. Frame in musik_c ist an)

btn_next.onRelease = function() {

pos=pos-90; // dreht sich der Inhalt um 90° nach links pos = pos % 360;

mc_content_rotate.tween("_rotation",pos ,1,"easeOutCubic");

// hier wird die Position an den externen Code übergeben if (pos == 0){

mc_content_rotate.mc_content_1.loadMovie("121_video.swf");

_root.musik_c.gotoAndPlay(2);

}else{

mc_content_rotate.mc_content_1.unloadMovie("121_video.swf");

_root.musik_c.gotoAndPlay(3);

}

if (pos == -270) {pos=90;}}

Horizontale BewegungDie horizontale Bewegung funktioniert nach dem selben Prinzip, nur dass hierfür eine bestimmte Position bestimmt wird, an der die Bewegung stoppen soll.pos = 749.8 // X-Wert für den Container a = 0; // Zähler......pos=pos-900; // Bewegung nach links, also slide nach rechts a = a+1; // Zähler bekommt eins hinzugefügt bew.tween("_x",pos,speed,ease_type,0,1); if (a == 3){ // wie oft nach rechts bewegt werden kannbtn_next.enabled = false; //nach links Schaltfläche wird ausgeschaltetbtn_next._visible=false;

Beide Codes werden in umgekehrter Funktion für die entgegengesetzte Richtung verwendet. 81

05 mediacross

05 c

ross

med

ia

Auf kleinen Monitoren, wie zum Beispiel auf Handys oder PDAs, wird eine angepasste Variante der Homepage verwendet, werden um den geringen Raum optimal zu nutzen. Der Container in den Inhalte geladen sind, wird proportional an die verwendete Auflösung angepasst. Auch das Hauptmenü wird skaliert. Um jedoch die Lesbarkeit zu maximieren, fällt diese Skalierung erheblich geringer aus als für den Content Bereich. Dies wird möglich gemacht, indem das Hauptmenü vor den Inhaltsbereich gelegt wird. Ist es ausgefahren, verdeckt es den Inhalt.84

freibau

02

01

02

03

04

05

06

01

03

04

05

06

02

01

AUDO EDETING

VIDEO EDETING

MOTION DESIGN

PRINT DESIGN

CORPORATE DESIGN

INTERFACE DESIGN

A

codefreibau

02

01

02

03

04

05

06

01

03

04

05

06

02

01

AUDO EDETING

VIDEO EDETING

MOTION DESIGN

PRINT DESIGN

CORPORATE DESIGN

INTERFACE DESIGN

04 statikscript

06 bauberichtEvaluation

06 b

aube

rich

t

Gerade die frühe Konzeptionsphase war gekennzeichnet von sehr vielen unterschiedlichen Ideen, die wir alle bis zu einem gewissen Grad umsetzten, um zu sehen welche das größte Potenzial hat. Dies war ein sehr zeitintensiver Vorgang, bot uns aber den Vorteil, dass wir später bei einer eventuellen finalen Umsetzung der Webseite auf ein umfangreichen Fundus von bereits produzierten Vektorgrafiken (wie sie zum Teil in der objektorientierten Gestaltung auf Seite XX. Zu jedem Zeitpunk blieben wir jedoch innerhalb unseres Zeitplans und konnten innerhalb des letzten Monats sogar die zweiwöchige Verschiebung des Abgabetermins kompensieren.

Da wir durch die umfangreiche Menüführung eine Action Script Programmierung von mehr als 5000 Zeilen geschaffen hatten, waren wir in diesem Projekt gezwungen uns mit effizienter Programmierung auseinander zu setzen, um die Länge des Codes überschaubar zu halten. Der Anspruch, dass die Webseite modular erweitert werden kann, und die gemeinsame Arbeit in der Programmierung, forderten von uns eine umfangreiche Planung und Koordination der Arbeitsabläufe. Wir sammelten wertvoll Erfahrungen in diesem Bereich die für unsere berufliche Laufbahn von Bedeutung sein werden. Jedoch sind wir auch der Meinung, dass wir mehr über unterstützende Software in diesem Bereich lernen müssen. Das Migrieren von Code nahm in diesem Projekt bereits viel Zeit in Anspruch. Bei einem größeren Projekt mit mehr als vier Menschen, die an ihm beschäftigt sind, könnte sich unsere jetzige Arbeitsweise als ineffizient herausstellen.

Abschließend betrachtet ist es uns in der Konzeptionsphase gelungen, eine Webseite zu entwickeln, die in ihrer Funktionalität vollendet ist. Sie muss nun nur noch mit Inhalten gefüllt werden und ist dann abgeschlossen. 89

Notizen: