Kursergebnis: FHD Showroom Dokumentation

Post on 01-Nov-2014

1,393 views 3 download

Tags:

description

Die Agenturlandschaft befindet sich im Umbruch, bisher eingesetzte Rollendefinitionen und Produktstrategien werden durch innovative prototypische Methoden ersetzt. Infolgedessen erweitert sich das Spektrum eines Designers auch um Aufgabenbereiche wie strategische Beratung und Konzeption. Im Kurs wird die Technik vermittelt, eigene Ideen durch agile Designprozesse in digitalen Medien umzusetzen. Nach der Maxime "fail early, fail often" werden Verfahren, wie z. B. Visual Thinking, Storytelling und Wireframes realisiert. Der Kurs wird als D.I.Y. Workshop abgehalten, um einen starken Praxisbezug zu garantieren.

transcript

PROJEKT

FH D SHOWROOM

TEILNEHMER

Frederik Schmitz

Marina Lang

Paul Becker

Sara Appenrodt

Tristan Dransmann

SS 2010

D.I.Y. – Prototypische Designprozesse

DOZENTEN

Axel Quack

Michael Zirlewagen

1. Auflage ® 2010

Gruppe SHOWROOM FH D

Sommersemester 2010

Hypermedia 1 [01.12.02]

D.I.Y. – Prototypische Designprozesse

Dozenten: Axel Quack & Michael Zirlewagen

Das Buch wurde eigenstänig produziert

Papier, Druck, Fertigstellung:

Sara Appenrodt

Der Text wurde gesetzt in der Courier

Geschrieben von:

Sara Appenrodt, Marina Lang

Korrektur gelesen von:

Marina Lang

Buch Gestaltet von:

Sara Appenrodt

Fotografie von:

Paul Becker, Tristan Drannsmann,

Sara Appenrodt

Website Layout von:

Tristan Dransmann

FH DSHOWROOM

Design

Team

ProzessErgebnis

Nachwort

Strategie

Dieses Buch ist unterteilt in 5 Sektionen: FH D Showroom- unser Ausgangsprojekt, welches wir Schritt für Schritt umsetzen, Team- dessen Zusammensetzung, Schritte zum Erfolg, Strategie und anschließende Umsetzung Ergebnis und Präsentation, Nachwort

1

2

54

3

INHALTSVERZEICHNIS

Kursbeschreibung

Definition FH DShowroom

Teambildung

Teamvorstellung

Stärken und Schwächen eines Teams

Zielgruppendefini-tion

Empathy Map

Struktur und Layout durchplanen

PrototypingWireframes

Ergebnisse und Präsentation

GlossarQuelle und Verweise

Ideenfindung

Geschäftsmodell erste Überlegung

Business Model Canvas

5

6

8

10

14

18

20

26

34 38

42

46

1 2 543FH D SHOWROOM TEAM DESIGN STRATEGIE PROZESS

„Die Agenturlandschaft befindet sich im Umbruch, bisher eingesetzte Rollendefinitionen und Produktstrategien werden durch innovative prototypische Methoden ersetzt. Infolgedessen erweitert sich das Spektrum eines Designers auch um Aufgabenbereiche wie strategische Beratung und Konzeption.“ AXEL QUACK & MICHAEL ZIRLEWAGEN

„Im Kurs wird die Technik vermittelt, eigene Ideen durch agile Designprozesse in digitalen Medien umzusetzen. Nach der Maxime „fail early, fail often“ werden Verfahren, wie z. B. Visual Thinking, Storytelling und Wireframes realisiert. Der Kurs wird als D.I.Y. Workshop abgehalten, um einen starken Praxisbezug zu garantieren“ Ziteiert aus fhd0001_Einführung.pdf von Micheal Zirlewagen & Axel Quack

KURSBESCHREIBUNG

5

KURSBESCHREIBUNG UND DEF_FH D SHOWROOM

KURSBESCHREIBUNG:

Zur Aufgabe nehmen wir uns die Umsetzung einer Geschäftsidee.

Hierzu gehört die Bildung eines kompetenten Teams, die

Ideenfindung und deren Konzeptvertiefung, die Wahrnehmung der

Zielgruppe und das anschließend konforme Arbeiten mit dieser

Zielgruppe. Des Weiteren werden wir die Idee mit Hilfe von

Empathy Maps und prototypische Wireframes zu einem volständigen

Layout umsetzen.

DEF_FH D SHOWROOM:

Der FH D Showroom macht es möglich eigene Projekte, Ideen und

Konzepte, die für die Fachhochschule oder auch privat erstellt

wurden zu veröffentlichen. Gleichzeitig hat jeder Teilnehmer die

Möglichkeit zu sehen, was seine Kommilitonen innerhalb eines

Semesters machen oder gemacht haben. Jeder Teilnehmer kann sich

somit weitere Feedbacks und Ratschläge einholen.

Es besteht ein Diskussionsforum sowie die Möglichkeit

hochgeladene Bilder, Videos oder Audiodateien positiv zu

bewerten.

6

w

TEAM

w

TEAM

„Zusammenkommen ist ein Anfang. Zusammenbleiben ist ein Fortschritt. Zusammenarbeiten ist ein Erfolg.“ HENRY FORD

DAS TEAM

7

DAS TEAM

TEAMBILDUNG:

Wir haben eine Art speed-dating durchgeführt, in welchem wir

uns untereinander kennenlernen sollten, um später nicht dem

Schicksal ausgesetzt zu sein mit uns unsympathisch

vorkommenden Personen arbeiten zu müssen. Ziel dieser

Gruppenbildung war es, dass nicht gleichgut qualifizierte

Personen im Gruppenverband dominieren. Die Anzahl jeder Gruppe

ist auf fünf Geschöpfe begrenzt.

Unsere Gruppe wird bestimmt durch Tristan Dransmann, Paul

Becker, Frederik Schmitz, Marina Lang und Sara Appenrodt

Wir betiteln uns erstmalig mit ‚SHOWROOM FH D‘ und begeistern

uns für die Idee, eine Plattform für die Fachhochschule zu

erschaffen, auf welcher jeder immatrikulierter Student sich sein

eigenes Profil anlegen kann, in welchem er seine

Semesterarbeiten posten kann.

10

TEAMVORSTELLUNG

FREDERIK SCHMITZ

frederik.schmitz@googlemail.com

MARINA LANG

marinalang@arcor.de

PAUL BECKER

paul.becker@paul-bk.de

SARA APPENRODT

sxara@gmx.de

TRISTAN DRANSMANN

info@dransmanndesign.de

FH Dshowroom

12

STÄRKEN UND SCHWÄCHEN EINES TEAMS

13

STÄRKEN UND SCHWÄCHEN EINES TEAMS

Unserer Selbsteinschätzung zufolge sind wir begabt in den

Gebieten Illustration, Texten und Gestaltung. Außerdem können

wir gut mit Kritik umgehen. Des Weiteren weisen einige Personen

Erfahrung in Agenturarbeit sowie in Fotografie auf. Einstimmige

negative Attribute waren Chaos, Zeitmanagement und

Programmierung.

14

DESIGN

DESIGN

„Die Idee ist das Absolute, und alles Wirkliche ist nur Realisierung der Idee.“

GEORG WILHELM FRIEDRICH HEGEL (1770-1831)

„Brillante Ideen sind organisierbar.“ JULIUS ROBERT OPPENHEIMER (1904-67)

„Die erfolgreichsten Konzepte bestehen häufig aus neuen Kombinationen bereits bestehender Ideen.“ JASON JENNINGS

IDEENFINDUNG

17

IDEENFINDUNG

Aus Neugierde, was unsere Kommilitonen an der Fachhochschule

Düsseldorf innerhalb ihrer Kurse für Projekte gestalten,

haben wir uns dazu entschieden als Geschäftsidee einen Showroom

für die Fachhochschule Düsseldorf als Grundkonzept zu nehmen.

Wir sind daran interessiert, dass alle Studierenden des

Fachbereichs eins und zwei (Design und Architektur) ihre

Projekte und Werke fachhochschulintern veröffentlichen können

und dürfen. Es ist nahezu eine Schande, dass unzählige

Projekte nach ihrer Präsentation im Kurs in irgendwelchen

Kellern und Speichern dahinvegetieren. Wir wollen mit dieser

Plattform eine Art Portfolio schaffen, welches sich jeder

Student untereinander anschauen und auch bewerten kann.

18

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

19

DAS GESCHÄFTSMODELL ERSTE ÜBERLEGUNGEN

Wir haben ein Brainstorming zu unserer Geschäftsidee

durchgeführt und dieses schriftlich festgehalten. Dabei

haben wir uns Gedanken über die Funktion des Showrooms und

deren technische Umsetzung gemacht und uns überlegt, ob wir den

Showroom hochschulintern oder auch hochschulübergreifend mit

Agenturen vernetzen wollen. Wir sind zu dem Entschluss

gekommen, es erstmalig hochschulintern umzusetzen. Wir haben

grob festgelegt, welche Menüpunkte die Website aufweisen soll.

Uns war es wichtig, dass jeder Teilnehmer des Showrooms all

seine Projekte (Video, Audio, Foto) hochladen kann.

20

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

Ideation

Die Ideenfindung sah wie links abgebildet

aus.

Wir haben uns bereits erste Gedanken

über viele zugehörige Faktoren gemacht,

die die Planung einer Website mit sich

bringt. Dazu zählen unter anderem die

technische Umsetzung und Programmierung,

die Vermarktung und Präsentation und die

regelmäßige Wartung und Pflege dieser

Website.

21

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

22a

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

23

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

Zusätzlich haben wir die weiteren

notwendigen Wünsche und Vorhaben

bezüglich unserer Geschäftsidee

schriftlich innerhalb der Gruppe auf

kleinen farbigen Kärtchen festgehalten

und diese an der Wand

positioniert.

Als besonders notwendig empfanden wir,

dass jeder Teilnehmer sich sein eigenes

Profil erstellen kann, wo er selbst

entscheiden kann, was er hochladen

möchte. So entstehen viele verschiedene

Galerien von mehreren Teilnehmern.

Über dies hinaus haben wir eine

Jahresgalerie als weiteren Faktor

hinzugefügt, in welcher jedes Jahr die

besten Projekte gezeigt werden. Wir haben

uns entschieden, dass man hochgeladene

Projekte kommentieren und ausschließlich

positiv bewerten kann, so entsteht ein

Ranking mit einem eventuellen Wettbewerb

und Trendbarometer untereinander.

Zusätzlich haben wir überlegt, mit wel-

chen schon vorhandenen Netzwerken man

unseren

Showroom vernetzen kann. Als Idee kam uns

Studi.vz, Facebook und ähnliche

Netzwerke.

24

“There’s not a single business model... There are really a lot of opportunities and a lot of options and we just haveto discover all of them.” TIM O‘REILLY

BUSINESS MODEL CANVAS

}45

25

BUSINESS MODEL CANVAS

Wir unterteilten unser Plakat unter Vorlage des Canvas Model in

Partnernetzwerk, Schlüsselaktivität, Schlüsselressourcen,

Kostenstruktur, Einnahmequelle, Kundenbeziehung, Angebot,

Distributionskanäle sowie Kundensegmente.

26

BUSINESS MODEL CANVAS

27

BUSINESS MODEL CANVAS

28

BUSINESS MODEL CANVAS

29

Business Modell Canvas

Unter Partnernetzwerk führten wir Shop/ Schwarzmarkt und

die automatische Anmeldung bei der Einschreibung auf.

Später kamen wir zu dem Entschluss, dass wir den zweiten

genannten Punkt nicht ausführen wollen, da wir der Meinung

sind, dass nicht alle Studenten sich ein Profil im Showroom

erstellen wollen. Dies soll jedem Studierenden

freigestellt aber dennoch einfach ermöglicht werden.

Unter Schlüsselaktivitäten sehen wir Vernetzungen. Weitere

Punkte, die ebenfalls unter dem Begriff Angebot aufzunehmen

sind, sind Jahresgalerie, Jobbörse, Projektaustausch und

Projektarbeit. Wir bieten außerdem Comments,

Ausschreibungen und ein Trendbarometer an. Es herrscht

demnach ein interner Wettbewerb. Jeder Student hat die

Möglichkeit sein eigenes Profil zu erstellen und dem

Showroom und Gruppen beizutreten.

Als Kundenbeziehung bieten wir ein Forum, eine Community

und Random Funktionen an. Das Forum und die Community

haben wir nach Überlegungen jedoch wieder entfernt.

Spätere Ergänzungen hierzu waren Feed und Emailverteilung.

Distributionskanäle sind vor allem Flyer und Poster, sowie

die FH Website, Facebook applications, Studi.vz und

Facebook.

Kundensegmente werden bestimmt durch Studenten und Profes-

soren. Mögliche Arbeitgeber sind Agenturen. Wir stellen

uns außerdem ein Sharesystem von diversen Hochschulen vor.

Mögliche Einnahmequellen sind Provisionen, Veltins Sponso-

ring, Tombolas, Ausstellungen, Partys, Werbung,

FH Merchandising und T-Shirts.

Kosten dagegen ergeben sich durch Programmieraufgaben, die

wir nicht eigenständig bewerkstelligen können, regelmäßige

Pflege und Marketing und die Anmietung der Räume, wobei wir

letztlich zu dem Ergebnis kamen, dass wir innerhalb der

Fachhochschule Düsseldorf einige Räume zu Verfügung haben.

BUSINESS MODEL CANVAS

30

STRATEGIE

STRATEGIE

ZIELGRUPPENDEFINITION

33

ZIELGRUPPENDEFINITION

Wir haben uns mit der potenziellen Zielgruppe beschäftigt.

Hauptsächlich gilt unser Projekt den Designstudenten der

Fachhochschule Düsseldorf. Inbegriffen sind Architekten,

Kommunikationsdesigner und Produktdesigner (Schmuckdesign). Wir

haben uns somit die Fragen gestellt, was sie auf unserer Seite

sehen, was sie sehen möchten und was von unbedingter

Notwendigkeit ist. Und haben versucht deren Wünsche und

Vorstellungen zu bedenken um diese umzusetzen. Wir haben

hierbei vergleichbare Showrooms und Netzwerke beiseite gezogen

um zu sehen, was diese für Kategorien und Menüpunkte zeigen.

Wir haben bedacht, dass wir für den Start des Showrooms schon

Projekte zeigen müssen, damit das Interesse der zukünftigen

Zielgruppe geweckt wird. Da wir den gesamten Fachbereich Design

(Kommunikationsdesign, Produktdesign und Architektur) der

Fachhochschule Düsseldorf abdecken wollen ist es unbedingt

notwendig, dass wir beim Publizieren der Website bereits schon

Projekte von den verschiedenen Bereichen zeigen können und

nicht ausschließlich von Kommunikationsdesignern, da dies den

Anschein erwecken könnte, dass der Showroom nur speziell für

Kommunikationsdesigner ist. Wir haben hierfür innerhalb der

Hochschule Anfragen gestellt, ob Probanten uns ausgewählte

Projekte zu Verfügung stellen wollen.

34

PROZESS

PROZESS

EMPATHY MAP

37

EMPATHY MAP

Um sich besser in die Lage unserer künftigen Zielgruppe

hineinzuversetzen und um so ihre Wünsche und Bedürfnisse zu

verstehen, haben wir mit Hilfe der Empathy-Map Gefühle,

Probleme, Gedanken, etc. analysiert. Dabei war es wichtig, dass

wir uns als erstes Gedanken über einen typischen Kunden aus

unserer Zielgruppe machen.

Wir haben uns für Boris, einen 22-jährigen Studenten im

kreativen Bereich, entschieden.

Dabei ist es uns nicht schwer gefallen uns in die Gefühlslage

von Boris hineinzuversetzen, da wir alle, wie er, Studenten

eines kreativen Studiengangs sind und somit genau wissen, mit

was für Gefühlen, Ängsten und Problemen er sich tagtäglich

auseinandersetzt.

Nach einem Brainstorming über die Sachen, die Boris sieht,

hört, denkt, fühlt, sagt und tut haben wir überlegt, was ihm

fehlt und wovon er profitieren würde.

Sein größtes Problem ist, dass ihm ehrliche und konstruktive

Kritik fehlt. Durch unsere Plattform würde er in dieser Hin-

sicht profitieren und gleichzeitig würde die Kritik zur Verbes-

serung seiner Arbeiten führen.

38

EMPATHY MAP

Empathy Map

I. See

Uni- und Eigenprojekte

kreativer Input

Stress

Uhr/Zeit

Arbeit

Geldmangel

schlechtes Networking

Kritik (von Profs.)

II. Hear

schlechtes Gewissen

Ideenmange

Zeitdruck

was tust du in der Zukunft

womit verdienst du Gel

Kritik

III. Think and feel

Angst vorm Versagen

Ideenmangel

Selbstzweifel

Kritik

Selbstkritik

Wettkampf / Konkurrenz

IV. Say and do

überspielt Unsicherheit

falsche Kritik

V. Pain

mangelnde ehrliche, konstruktive Kritik

VI. Gain

Verbesserung der Arbeiten

39

EMPATHY MAP

40

STRUKTUR UND LAYOUT DURCHPLANEN

41

STRUKTUR UND LAYOUT DURCHPLANEN

Wir planten die Hauptseite unserer späteren Website unter

Berücksichtigung folgender Faktoren:

Generell verfügt die Website über die allgemeinen Kontaktinfor-

mationen, Impressum und Geschäftsbedingungen. Überdies gibt es

ein Login Feld, ein Suchfeld und eine Navigationsleiste. Der

Header kündet Neuigkeiten und Informationen zum Showroom an.

Links zu Partnern sollen durch zugehörige Logos angezeigt

werden.

Eines der wichtigsten Elemente der Website stellen die Profile

dar. Jedes Profil ist unterteilt in eine Projektübersicht und

kann je nach Bedarf mehr oder weniger Informationen über die

Person enthalten, es verfügt sowohl über eine Freundesübersicht

als auch über eine Gruppen- und Wettbewerbsübersicht.

Gleichzeitig sollen Informationen über Wettbewerbe angekündigt

werden. Dies erfolgt über eine Übersicht dieser Wettbewerbe

und kurze Informationstexte. Weitere Ideen zur Veröffentlichung

der Wettbewerbe sind Sponsoren und Werbung. Die Gruppen wer-

den in einer Übersicht dargestellt. Es gibt zusätzliche Infor-

mationen zu jeder Gruppe und auch die Einordnung in Kategorien

nach Kurs, Projekt, Professor. Die Projekte werden durch Bilder

(thumbnails) dargestellt und können zuzüglich mit

Textbeschreibungen ergänzt werden. Hinzukommend können die

Bilder durch einen ‚Finde ich gut’ Button bewertet und auch

kommentiert werden.

42

STRUKTUR UND LAYOUT DURCHPLANEN

43

STRUKTUR UND LAYOUT DURCHPLANEN

44

„Jede Website, deren Ladezeit eine Sekunde überschreitet, tut dem Benutzer weh.“ JAKOB NIELSEN

PROTOTYPING WIREFRAME

45

PROTOTYPING WIREFRAME

Statisches Wireframe

Wir erstellten erstmalig ein statisches Wireframe auf Papier,

also eine schematische Darstellung einer einzelnen

Seitenvorlage, welche die grundlegenden Elemente unserer

geplanten Website festhalten sollen. Wir haben die grafischen

Komponenten erstrangig nur sehr rudimentär abgebildet, da es

bei einem Wireframe in erster Linie um die Konzeption und nicht

um das Design geht.

Dieses Wireframe beinhaltete den Aufbau der Startseite unserer

späteren Website. Besonders zu berücksichtigen war die

Verdeutlichung des sichtbaren Bereiches [beim Öffnen der

Website]. Bezogen auf unsere Website sollten Elemente wie

Navigation und Inhaltsbereiche Teil dieses Skeletts sein.

Außerdem sollte ein konzeptionelles Layout erkennbar sein.

46

STATISCHES WIREFRAME

47

STATISCHES WIREFRAME

48

STATISCHES WIREFRAME

49

Uns ist aufgefallen, dass wir in unserem

Prototypen der Website keinen ‚Passwort

vergessen’ Button aufgeführt haben.

Zu Überlegen war, ob wir ein Dropdown

Menü verwenden wollen, in welchem

beispielsweise die Galerien aufgelistet

werden mit der Unterkategorie privat und

öffentlich. Hier wäre dann eine

Brotkrümelnavigation von Nöten.

Um die Wichtigkeit der Navigation und des

Footers hervorzuheben, wären Versalien

angebracht.

Zudem ist es wichtig, dass wir genau

festlegen bzw. erkenntlich machen, was

Drop-Button und was Felder sind.

Wichtig ist auch, dass wir einheitliche

Zeichen ( >>) verwenden, wenn wir eine

Weiter-Funktion ausdrücken wollen. So bei

der Zahlenenumeration ‚Folgende’ ( 1 2 3

4 >> ) und ebenfalls dann beim Login

Button (Login >>).

Zur Farbgebung ist folgendes zu sagen:

Es gilt eher das Prinzip sich von der

Fachhochschul-Website abzugrenzen. Das

Hochschul-Icon ist ausreichend um die

Konnektivität von Showroom und Fachhoch-

schul-Website aufzuzeigen.

STATISCHES WIREFRAME

50

STATISCHES WIREFRAME

Wir haben anschließend das Design

angepasst, indem wir Farben bestimmten,

sowie den Banner wählten, Veränderun-

gen vornahmen und vorläufig zur Anschauung

Bilder als Platzhalter einfügten.

Im nächsten Schritt machten wir uns dann

Gedanken über das dynamische Wireframe:

heißt, dass wir mehrere Seiten als

funktionalen Prototyp interaktiv

miteinander verknüpfen, sodass eine

Navigation von einer zur anderen Seite

möglich wird.

Links abgebildet ist die Hauptseite, die

angezeigt wird sobald man die Website

betritt.

Rechts abgebildet befindet man sich im

eingeloggten Nutzerprofil.

51

STATISCHES WIREFRAME

52

STATISCHES WIREFRAME

53

STATISCHES WIREFRAME

Bei dem Wireframe stellten sich einige

Mängel heraus:

Ein Problem stellen die ‚tags’ dar, da

sich möglicherweise nicht alle Teilnehmer

des Showrooms gleichermaßen an die Einga-

ben der Einordnung halten. Ein Beispiel

hierfür ist schon allein die Unterschei-

dung zwischen Groß- und Kleinschreibung.

Diese Ausdifferenzierung, dass automatisch

alles einheitlich aufgenommen wird,

obwohl der Teilnehmer differierte Schreib-

weisen verfolgt, würde sich als

Schwierigkeit erweisen.

Die Seitennavigation bleibt ebenfalls zu

optimieren. Eine vernünftige Lösung wäre,

dass man die Seitenzahlenaufreihung wie

folgt wählt: << 1 2 ... 7 8 9 ... 20

21 >>, da man so bequem, ohne großartig

die Maus zu bewegen, gleich auf die

gewünschte Seite, beziehungsweise das

nähere Seitenumfeld gelangt.

Zu Disposition steht außerdem das Kate-

gorie Dropdownmenü, da sich dies mit mehr

als 20 Kategorisierungen nicht bewerk-

stelligen lässt. Ein ‚erweiterte Suche’

Feld löst dieses Problem.

54

STATISCHES WIREFRAME

55

STATISCHES WIREFRAME

Ein Problem könnte sich auch mit der

Verständlichkeit des Banners mit dem

Titel „Schnittlauch“ ergeben, da man

nicht weiß, ob die Zielgruppe den

Zusammenhang oder Sinn versteht. Hierfür

eignet es sich, dass man Umfragen stellt

und somit testet, ob die befragten

Personen verstehen, was der Banner

bedeutet.

Gleichzeitig ist es hilfreich, dass man

verschiedene Personen befragt, wie sie

sich anhand des Wireframes zurechtfinden.

Man kann hier gezielt Fragen stellen, wie

sie an einen bestimmten Menüpunkt gelan-

gen. Dauert die Antwort mehrere Minuten,

so sollte man die Anordnung des

Wireframes überdenken. Ungewohnt könnte

es nämlich bei der Platzwahl der Seiten-

navigation, in unserem Fall die

Anmeldung, werden, da diese sich in den

meisten Fällen auf der rechten Seite

befindet und man instinktiv zur rechten

Seite tendiert.

Ein weiterer Faktor ist die Publizierung

des Showrooms. Ein Lösungsansatz wären

Flyer, die wir in der Hochschule vertei-

len, sowie Plakate und natürlich Mundpro-

paganda. Damit zu Beginn der Eröffnung des

Showrooms etwas zu sehen ist, wollen wir

Kommilitonen befragen, ob sie sich ein-

stimmig erklären einige von ihren Projek-

ten als Demonstration zur Verfügung zu

stellen.

56

STATISCHES WIREFRAME

57

Projekte

Wir fragten Kommilitonen sowie

Studierende des Fachbereichs Architektur

und Schmuckdesign, ob sie uns Projekte

zur Verfügung stellen.

Die uns anvertrauten Projekte bauten wir

in unser Wireframe ein und setzten die

vorher genannten Probleme positiv um und

kamen zu nachfolgenden Ergebnissen.

STATISCHES WIREFRAME

58

ERGEBNISSE

ERGEBNISSE

ERGEBNISSE

61

ERGEBNISSE

Website

Das Ergebnis der Website sieht

folgendermaßen aus.

62

ERGEBNISSE

Startseite der Website

Besucht man die Website:

www.schnittlauch-fhd.de

so ergibt sich die nebenstehende

Startseite.

Ohne Anmeldung ist es bereits möglich

Projekte anzusehen.

63

ERGEBNISSE

Suchfunktion

Das Such-Dropdown-Menü sieht wie rechts

abgebildet aus.

Man kann zum Einen einen Suchbegriff

manuell eingeben oder aber wählt eine

Kategorie aus der vorgegebenen Liste aus.

64

ERGEBNISSE

Benutzerprofil- eigene Projekte

Wenn man sich im Showroom angemeldet hat

und man eigene Projekte hochgeladen hat,

so kann die eigene Profilseite wie links

zu sehen aussehen.

65

ERGEBNISSE

About

Um die Verständlichkeit des Banners

auszudrücken und dessen Hintergrund zu

erläutern zeigen wir hier die

About-Seite.

66

ERGEBNISSE

Rastereinteilung

Die Website ist in statische, semi

statiche und flexibele Segmente

aufgeteilt.

67

ERGEBNISSE

68

ERGEBNISSE

69

ERGEBNISSE

Flayer und Plakate

Zum Schluss haben wir uns der

Bekanntmachung des Showroom gewidtmet und

Flyer sowie Plakate erstellt, die wir zu

Werbezwecken in der Fachhochschule

Düsseldorf aushängen und verteilen

wollen. Ein Beispiel der Flyer ist links

abgebildet. Zu sehen ist die Voder- und

Rückseite eines Flyers.

Das Plakatbeispiel befindet sich rechts.

70

NACHWORT

NACHWORT

Quellen:

http://weblogs.mki.fh-duesseldorf.de/diy/

http://www.businessmodelgeneration.com/

Verweise:

Es handelt sich bei der gezeigten Website lediglich um eine visuelle Darstellung.

Die Ausführung wurde bislang nocht nicht real umgesetzt.