SS 2010
D.I.Y. – Prototypische Designprozesse




PROJEKT

FH D SHOWROOM

TEILNEHMER

Frederik Schmitz
Marina Lang
Paul Be...
1. Auflage ® 2010
                                                                               Papier, Druck, Fertigstel...
Design




Dieses Buch ist unterteilt in 5 Sektionen:              Team
1 FH D Showroom- unser Ausgangsprojekt,
welches wi...
INHALTSVERZEICHNIS




1 FH D SHOWROOM      2 TEAM               3 DESIGN              4 STRATEGIE             5 PROZESS
5...
KURSBESCHREIBUNG

5

    „Die Agenturlandschaft befindet sich im
    Umbruch, bisher eingesetzte
    Rollendefinitionen un...
KURSBESCHREIBUNG UND                                               6

DEF_FH D SHOWROOM




KURSBESCHREIBUNG:

Zur Aufgabe...
w




    TEA
AM
DAS TEAM

7




               „Zusammenkommen ist ein Anfang.
               Zusammenbleiben ist ein Fortschritt.
       ...
DAS TEAM                                                           10




TEAMBILDUNG:

Wir haben eine Art speed-dating du...
TEAMVORSTELLUNG                   12




FH D
showroom




           FREDERIK SCHMITZ
           frederik.schmitz@googlem...
STÄRKEN UND SCHWÄCHEN EINES TEAMS

13
STÄRKEN UND SCHWÄCHEN                                             14

EINES TEAMS




Unserer Selbsteinschätzung zufolge s...
DESI
IGN
IDEENFINDUNG

17



                                                      „Brillante Ideen sind
                          ...
IDEENFINDUNG                                                      18




Aus Neugierde, was unsere Kommilitonen an der Fac...
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

19
DAS GESCHÄFTSMODELL                                               20

ERSTE ÜBERLEGUNGEN




Wir haben ein Brainstorming z...
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

21                                              Ideation

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

                                           22a
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)

23
DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN)
Zusätzlich haben wir die weiteren                                                ...
BUSINESS MODEL CANVAS

25



                             “There’s not a single business model...
                        ...
BUSINESS MODEL CANVAS                                             26




Wir unterteilten unser Plakat unter Vorlage des C...
BUSINESS MODEL CANVAS

27
BUSINESS MODEL CANVAS

                        28
BUSINESS MODEL CANVAS

29
BUSINESS MODEL CANVAS
Business Modell Canvas                                                                30

Unter Part...
STRAT
TEGIE
ZIELGRUPPENDEFINITION

33
ZIELGRUPPENDEFINITION                                             34




Wir haben uns mit der potenziellen Zielgruppe bes...
PROZ
ZESS
EMPATHY MAP

37
EMPATHY MAP                                                       38




Um sich besser in die Lage unserer künftigen Ziel...
EMPATHY MAP

39                 Empathy Map

                   I. See
                   Uni- und Eigenprojekte
         ...
EMPATHY MAP

              40
STRUKTUR UND LAYOUT DURCHPLANEN

41
STRUKTUR UND LAYOUT                                               42

DURCHPLANEN




Wir planten die Hauptseite unserer s...
STRUKTUR UND LAYOUT DURCHPLANEN

43
STRUKTUR UND LAYOUT DURCHPLANEN

                                  44
PROTOTYPING WIREFRAME

45



                             „Jede Website, deren Ladezeit
                             eine ...
PROTOTYPING WIREFRAME                                             46




Statisches Wireframe

Wir erstellten erstmalig ei...
STATISCHES WIREFRAME

47
STATISCHES WIREFRAME

                       48
STATISCHES WIREFRAME

49
STATISCHES WIREFRAME
Uns ist aufgefallen, dass wir in unserem                           50
Prototypen der Website keinen ‚...
STATISCHES WIREFRAME

51                          Wir haben anschließend das Design
                            angepasst,...
STATISCHES WIREFRAME

                       52
STATISCHES WIREFRAME

53
STATISCHES WIREFRAME

Bei dem Wireframe stellten sich einige                              54
Mängel heraus:
Ein Problem st...
STATISCHES WIREFRAME

55
STATISCHES WIREFRAME

Ein Problem könnte sich auch mit der                                56
Verständlichkeit des Banners ...
STATISCHES WIREFRAME

57
STATISCHES WIREFRAME

Projekte                                                          58

Wir fragten Kommilitonen sowie...
ERGEBN
NISSE
ERGEBNISSE

61
ERGEBNISSE

Website                                       62

Das Ergebnis der Website sieht
folgendermaßen aus.
ERGEBNISSE

63                Startseite der Website

                  Besucht man die Website:
                  www.sch...
ERGEBNISSE

Suchfunktion                                             64

Das Such-Dropdown-Menü sieht wie rechts
abgebilde...
ERGEBNISSE

65                Benutzerprofil- eigene Projekte

                  Wenn man sich im Showroom angemeldet hat
...
ERGEBNISSE

About                                                 66

Um die Verständlichkeit des Banners
auszudrücken und...
ERGEBNISSE

67                Rastereinteilung

                  Die Website ist in statische, semi
                  sta...
ERGEBNISSE

             68
ERGEBNISSE

69
ERGEBNISSE

Flayer und Plakate                                       70

Zum Schluss haben wir uns der
Bekanntmachung des ...
NACHW
WORT
Quellen:

http://weblogs.mki.fh-duesseldorf.de/diy/
http://www.businessmodelgeneration.com/

Verweise:

Es handelt sich be...
Kursergebnis: FHD Showroom Dokumentation
Kursergebnis: FHD Showroom Dokumentation
Kursergebnis: FHD Showroom Dokumentation
Kursergebnis: FHD Showroom Dokumentation
Nächste SlideShare
Wird geladen in …5
×

Kursergebnis: FHD Showroom Dokumentation

1.722 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design, Technologie, Business
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.722
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
13
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Kursergebnis: FHD Showroom Dokumentation

  1. 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. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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.
  7. 7. w TEA
  8. 8. AM
  9. 9. DAS TEAM 7 „Zusammenkommen ist ein Anfang. Zusammenbleiben ist ein Fortschritt. Zusammenarbeiten ist ein Erfolg.“ HENRY FORD
  10. 10. 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.
  11. 11. 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
  12. 12. STÄRKEN UND SCHWÄCHEN EINES TEAMS 13
  13. 13. 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.
  14. 14. DESI
  15. 15. IGN
  16. 16. 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
  17. 17. 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.
  18. 18. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 19
  19. 19. 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.
  20. 20. 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.
  21. 21. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 22a
  22. 22. DAS GESCHÄFTSMODELL (ERSTE ÜBERLEGUNGEN) 23
  23. 23. 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.
  24. 24. 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 }
  25. 25. 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.
  26. 26. BUSINESS MODEL CANVAS 27
  27. 27. BUSINESS MODEL CANVAS 28
  28. 28. BUSINESS MODEL CANVAS 29
  29. 29. 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.
  30. 30. STRAT
  31. 31. TEGIE
  32. 32. ZIELGRUPPENDEFINITION 33
  33. 33. 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.
  34. 34. PROZ
  35. 35. ZESS
  36. 36. EMPATHY MAP 37
  37. 37. 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.
  38. 38. 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
  39. 39. EMPATHY MAP 40
  40. 40. STRUKTUR UND LAYOUT DURCHPLANEN 41
  41. 41. 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.
  42. 42. STRUKTUR UND LAYOUT DURCHPLANEN 43
  43. 43. STRUKTUR UND LAYOUT DURCHPLANEN 44
  44. 44. PROTOTYPING WIREFRAME 45 „Jede Website, deren Ladezeit eine Sekunde überschreitet, tut dem Benutzer weh.“ JAKOB NIELSEN
  45. 45. 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.
  46. 46. STATISCHES WIREFRAME 47
  47. 47. STATISCHES WIREFRAME 48
  48. 48. STATISCHES WIREFRAME 49
  49. 49. 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.
  50. 50. 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.
  51. 51. STATISCHES WIREFRAME 52
  52. 52. STATISCHES WIREFRAME 53
  53. 53. 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.
  54. 54. STATISCHES WIREFRAME 55
  55. 55. 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.
  56. 56. STATISCHES WIREFRAME 57
  57. 57. 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.
  58. 58. ERGEBN
  59. 59. NISSE
  60. 60. ERGEBNISSE 61
  61. 61. ERGEBNISSE Website 62 Das Ergebnis der Website sieht folgendermaßen aus.
  62. 62. 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.
  63. 63. 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.
  64. 64. 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.
  65. 65. ERGEBNISSE About 66 Um die Verständlichkeit des Banners auszudrücken und dessen Hintergrund zu erläutern zeigen wir hier die About-Seite.
  66. 66. ERGEBNISSE 67 Rastereinteilung Die Website ist in statische, semi statiche und flexibele Segmente aufgeteilt.
  67. 67. ERGEBNISSE 68
  68. 68. ERGEBNISSE 69
  69. 69. 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.
  70. 70. NACHW
  71. 71. WORT
  72. 72. 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.

×