kursergebnis: fhd showroom dokumentation

76
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

Upload: fh-duesseldorf

Post on 01-Nov-2014

1.406 views

Category:

Design


3 download

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

Page 1: Kursergebnis: FHD Showroom Dokumentation

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

Page 2: Kursergebnis: FHD Showroom Dokumentation

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

Page 3: Kursergebnis: FHD Showroom Dokumentation
Page 4: Kursergebnis: FHD Showroom Dokumentation

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

Page 5: Kursergebnis: FHD Showroom Dokumentation

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

Page 6: Kursergebnis: FHD Showroom Dokumentation

„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

Page 7: Kursergebnis: FHD Showroom Dokumentation

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

Page 8: Kursergebnis: FHD Showroom Dokumentation

w

TEAM

Page 9: Kursergebnis: FHD Showroom Dokumentation

w

TEAM

Page 10: Kursergebnis: FHD Showroom Dokumentation

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

DAS TEAM

7

Page 11: Kursergebnis: FHD Showroom Dokumentation

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

Page 12: Kursergebnis: FHD Showroom Dokumentation
Page 13: Kursergebnis: FHD Showroom Dokumentation

TEAMVORSTELLUNG

FREDERIK SCHMITZ

[email protected]

MARINA LANG

[email protected]

PAUL BECKER

[email protected]

SARA APPENRODT

[email protected]

TRISTAN DRANSMANN

[email protected]

FH Dshowroom

12

Page 14: Kursergebnis: FHD Showroom Dokumentation

STÄRKEN UND SCHWÄCHEN EINES TEAMS

13

Page 15: Kursergebnis: FHD Showroom Dokumentation

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

Page 16: Kursergebnis: FHD Showroom Dokumentation

DESIGN

Page 17: Kursergebnis: FHD Showroom Dokumentation

DESIGN

Page 18: Kursergebnis: FHD Showroom Dokumentation

„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

Page 19: Kursergebnis: FHD Showroom Dokumentation

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

Page 20: Kursergebnis: FHD Showroom Dokumentation

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

19

Page 21: Kursergebnis: FHD Showroom Dokumentation

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

Page 22: Kursergebnis: FHD Showroom Dokumentation

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

Page 23: Kursergebnis: FHD Showroom Dokumentation

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

22a

Page 24: Kursergebnis: FHD Showroom Dokumentation

DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

23

Page 25: Kursergebnis: FHD Showroom Dokumentation

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

Page 26: Kursergebnis: FHD Showroom Dokumentation

“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

Page 27: Kursergebnis: FHD Showroom Dokumentation

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

Page 28: Kursergebnis: FHD Showroom Dokumentation

BUSINESS MODEL CANVAS

27

Page 29: Kursergebnis: FHD Showroom Dokumentation

BUSINESS MODEL CANVAS

28

Page 30: Kursergebnis: FHD Showroom Dokumentation

BUSINESS MODEL CANVAS

29

Page 31: Kursergebnis: FHD Showroom Dokumentation

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

Page 32: Kursergebnis: FHD Showroom Dokumentation

STRATEGIE

Page 33: Kursergebnis: FHD Showroom Dokumentation

STRATEGIE

Page 34: Kursergebnis: FHD Showroom Dokumentation

ZIELGRUPPENDEFINITION

33

Page 35: Kursergebnis: FHD Showroom Dokumentation

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

Page 36: Kursergebnis: FHD Showroom Dokumentation

PROZESS

Page 37: Kursergebnis: FHD Showroom Dokumentation

PROZESS

Page 38: Kursergebnis: FHD Showroom Dokumentation

EMPATHY MAP

37

Page 39: Kursergebnis: FHD Showroom Dokumentation

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

Page 40: Kursergebnis: FHD Showroom Dokumentation

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

Page 41: Kursergebnis: FHD Showroom Dokumentation

EMPATHY MAP

40

Page 42: Kursergebnis: FHD Showroom Dokumentation

STRUKTUR UND LAYOUT DURCHPLANEN

41

Page 43: Kursergebnis: FHD Showroom Dokumentation

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

Page 44: Kursergebnis: FHD Showroom Dokumentation

STRUKTUR UND LAYOUT DURCHPLANEN

43

Page 45: Kursergebnis: FHD Showroom Dokumentation

STRUKTUR UND LAYOUT DURCHPLANEN

44

Page 46: Kursergebnis: FHD Showroom Dokumentation

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

PROTOTYPING WIREFRAME

45

Page 47: Kursergebnis: FHD Showroom Dokumentation

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

Page 48: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

47

Page 49: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

48

Page 50: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

49

Page 51: Kursergebnis: FHD Showroom Dokumentation

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

Page 52: Kursergebnis: FHD Showroom Dokumentation

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

Page 53: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

52

Page 54: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

53

Page 55: Kursergebnis: FHD Showroom Dokumentation

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

Page 56: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

55

Page 57: Kursergebnis: FHD Showroom Dokumentation

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

Page 58: Kursergebnis: FHD Showroom Dokumentation

STATISCHES WIREFRAME

57

Page 59: Kursergebnis: FHD Showroom Dokumentation

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

Page 60: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

Page 61: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

Page 62: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

61

Page 63: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

Website

Das Ergebnis der Website sieht

folgendermaßen aus.

62

Page 64: Kursergebnis: FHD Showroom Dokumentation

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

Page 65: Kursergebnis: FHD Showroom Dokumentation

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

Page 66: Kursergebnis: FHD Showroom Dokumentation

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

Page 67: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

About

Um die Verständlichkeit des Banners

auszudrücken und dessen Hintergrund zu

erläutern zeigen wir hier die

About-Seite.

66

Page 68: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

Rastereinteilung

Die Website ist in statische, semi

statiche und flexibele Segmente

aufgeteilt.

67

Page 69: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

68

Page 70: Kursergebnis: FHD Showroom Dokumentation

ERGEBNISSE

69

Page 71: Kursergebnis: FHD Showroom Dokumentation

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

Page 72: Kursergebnis: FHD Showroom Dokumentation

NACHWORT

Page 73: Kursergebnis: FHD Showroom Dokumentation

NACHWORT

Page 74: Kursergebnis: FHD Showroom Dokumentation

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.

Page 75: Kursergebnis: FHD Showroom Dokumentation
Page 76: Kursergebnis: FHD Showroom Dokumentation