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.

1. SS 2010
D.I.Y. – Prototypische Designprozesse
PROJEKT
FH D SHOWROOM
TEILNEHMER
Frederik Schmitz
Marina Lang
Paul Becker
Sara Appenrodt
Tristan Dransmann
DOZENTEN
Axel Quack
Michael Zirlewagen

2. 1. Auflage ® 2010
Papier, Druck, Fertigstellung:
Buch Gestaltet von:
Sara Appenrodt
Gruppe SHOWROOM FH D Sara Appenrodt
Sommersemester 2010
Der Text wurde gesetzt in der Courier
Hypermedia 1 [01.12.02] Fotografie von:
D.I.Y. – Prototypische Designprozesse Paul Becker, Tristan Drannsmann,
Geschrieben von:
Sara Appenrodt
Sara Appenrodt, Marina Lang
Dozenten: Axel Quack & Michael Zirlewagen
Website Layout von:
Korrektur gelesen von:
Das Buch wurde eigenstänig produziert Tristan Dransmann
Marina Lang

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

5. INHALTSVERZEICHNIS
1 FH D SHOWROOM 2 TEAM 3 DESIGN 4 STRATEGIE 5 PROZESS
5 Kursbeschreibung 8 Teambildung 18 Ideenfindung 34 Zielgruppendefini- 38 Empathy Map
tion
6 Definition FH D 10 Teamvorstellung 20 Geschäftsmodell 42 Struktur und
Showroom erste Überlegung Layout durchplanen
14 Stärken und
Schwächen eines 26 Business Model 46 Prototyping
Teams Canvas Wireframes
Ergebnisse und
Präsentation
Glossar
Quelle und
Verweise

6. KURSBESCHREIBUNG
5
„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

7. KURSBESCHREIBUNG UND 6
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.

8. w
TEA

9. AM

10. DAS TEAM
7
„Zusammenkommen ist ein Anfang.
Zusammenbleiben ist ein Fortschritt.
Zusammenarbeiten ist ein Erfolg.“ HENRY FORD

11. DAS TEAM 10
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.

13. TEAMVORSTELLUNG 12
FH D
showroom
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

14. STÄRKEN UND SCHWÄCHEN EINES TEAMS
13

15. STÄRKEN UND SCHWÄCHEN 14
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.

16. DESI

17. IGN

18. IDEENFINDUNG
17
„Brillante Ideen sind
organisierbar.“ JULIUS ROBERT OPPENHEIMER (1904-67)
„Die Idee ist das Absolute, und alles
Wirkliche ist nur Realisierung der Idee.“
GEORG WILHELM FRIEDRICH HEGEL (1770-1831)
„Die erfolgreichsten Konzepte bestehen
häufig aus neuen Kombinationen bereits
bestehender Ideen.“ JASON JENNINGS

19. IDEENFINDUNG 18
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.

20. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
19

21. DAS GESCHÄFTSMODELL 20
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.

22. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
21 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.

23. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
22a

24. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
23

25. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
Zusätzlich haben wir die weiteren 24
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.

26. BUSINESS MODEL CANVAS
25
“There’s not a single business model...
There are really a lot of opportunities
and a lot of options and we just have
to discover all of them.” TIM O‘REILLY
45
}

27. BUSINESS MODEL CANVAS 26
Wir unterteilten unser Plakat unter Vorlage des Canvas Model in
Partnernetzwerk, Schlüsselaktivität, Schlüsselressourcen,
Kostenstruktur, Einnahmequelle, Kundenbeziehung, Angebot,
Distributionskanäle sowie Kundensegmente.

28. BUSINESS MODEL CANVAS
27

29. BUSINESS MODEL CANVAS
28

30. BUSINESS MODEL CANVAS
29

31. BUSINESS MODEL CANVAS
Business Modell Canvas 30
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.

32. STRAT

33. TEGIE

34. ZIELGRUPPENDEFINITION
33

35. ZIELGRUPPENDEFINITION 34
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.

36. PROZ

37. ZESS

38. EMPATHY MAP
37

39. EMPATHY MAP 38
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.

40. EMPATHY MAP
39 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

41. EMPATHY MAP
40

42. STRUKTUR UND LAYOUT DURCHPLANEN
41

43. STRUKTUR UND LAYOUT 42
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.

44. STRUKTUR UND LAYOUT DURCHPLANEN
43

45. STRUKTUR UND LAYOUT DURCHPLANEN
44

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

47. PROTOTYPING WIREFRAME 46
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.

48. STATISCHES WIREFRAME
47

49. STATISCHES WIREFRAME
48

50. STATISCHES WIREFRAME
49

51. STATISCHES WIREFRAME
Uns ist aufgefallen, dass wir in unserem 50
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.

52. STATISCHES WIREFRAME
51 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.

53. STATISCHES WIREFRAME
52

54. STATISCHES WIREFRAME
53

55. STATISCHES WIREFRAME
Bei dem Wireframe stellten sich einige 54
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.

56. STATISCHES WIREFRAME
55

57. STATISCHES WIREFRAME
Ein Problem könnte sich auch mit der 56
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.

58. STATISCHES WIREFRAME
57

59. STATISCHES WIREFRAME
Projekte 58
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.

60. ERGEBN

61. NISSE

62. ERGEBNISSE
61

63. ERGEBNISSE
Website 62
Das Ergebnis der Website sieht
folgendermaßen aus.

64. ERGEBNISSE
63 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.

65. ERGEBNISSE
Suchfunktion 64
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.

66. ERGEBNISSE
65 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.

67. ERGEBNISSE
About 66
Um die Verständlichkeit des Banners
auszudrücken und dessen Hintergrund zu
erläutern zeigen wir hier die
About-Seite.

68. ERGEBNISSE
67 Rastereinteilung
Die Website ist in statische, semi
statiche und flexibele Segmente
aufgeteilt.

69. ERGEBNISSE
68

70. ERGEBNISSE
69

71. ERGEBNISSE
Flayer und Plakate 70
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.

72. NACHW

73. WORT

74. 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.