+ All Categories
Transcript
Page 1: Kursergebnis: Handmade Shop Dokumentation

projekt

Handmade OnlinesHOp

teilnehmer

Jacqueline Czogalla

Friederike Ruby

Heike Rossmann

Christoph Flucht

michel Guss

Ws 2010

d.i.Y. – prototypische designprozesse

Dozenten

axel Quack

michael Zirlewagen

Page 2: Kursergebnis: Handmade Shop Dokumentation
Page 3: Kursergebnis: Handmade Shop Dokumentation

inHaltsveRZeiCHnis

kursbeschreibung

teamvorstellung

schritte zum erfolg:

stärken und schwächen eines teams

ideenfindung

das Geschäftsmodell

Business model Canvas

Zielgruppendefinition

empathy map

Wireframes

layout

ergebnisse

Page 4: Kursergebnis: Handmade Shop Dokumentation

25/03/10 >> die auFGaBe

Page 5: Kursergebnis: Handmade Shop Dokumentation

25/03/10 KuRsBesCHReiBunG

„Die Agenturlandschaft befindet sich im Umbruch, bisher ein-

gesetzte rollendefinitionen und produktstrategien werden durch

innovative prototypische methoden ersetzt. infolgessen erwei-

tert 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 maxi-

me „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.“

In dem Kurs D.I.Y. – Prototypische Designprozesse von Michael

zierlewagen und Axel Quack wird der prozess eines webbezogenen

projekts erarbeitet. Von der idee bis zum fertiggestellten

produkt.

Page 6: Kursergebnis: Handmade Shop Dokumentation
Page 7: Kursergebnis: Handmade Shop Dokumentation

das team

JaCQueline CZOGalla

FRiedeRiKe RuBY

HeiKe ROssmann

CHRistOpH FluCHt

miCHel Guss

Page 8: Kursergebnis: Handmade Shop Dokumentation

08/04/10 >> sCHRitte Zum eRFOlG: stäRKen und sCHWäCHen eines teams

Page 9: Kursergebnis: Handmade Shop Dokumentation

08/04/10 sCHRitte Zum eRFOlG: stäRKen und sCHWäCHen eines teams

Um das projekt zu beginnen mussten wir uns zunächst in teams

zusammenfinden. ein kurzes kennenlernen sowie das Austauschen

von Stärken, Schwächen und interessen mussten genügen, um sich

zu einer Gruppe von fünf personen zusammenzuschließen.

Während dieser kennenlernphase wurden auch ideen des gesamten

kurses besprochen, wobei sich unsere Gruppe dazu entschlossen

hat einen handmade-onlineshop zum projekt zu machen.

Um einen Überblick unserer kompetenzen und Unzulänglichkeiten

zu bekommen, haben wir eben diese innerhalb der Gruppe bespro-

chen.

Unsere Stärken sind teamfähigkeit, zeichnen, präsentation, or-

ganisation, grafische Ausbildung und Gestaltung. Schwächen sind

hingegen geringe programmierkenntnisse, Arbeitsaufschub, extre-

me Selbstkritik und bei einigen Unorganisiertheit.

in unserer Gruppe gleichen sich viele Schwächen aus, was ein

gutes team ausmacht. Somit sind Schwächen wie z.B. schlech-

te organistaion durch die sehr gute organisationsfähikeit aus-

gleichbar. Weiterhin ergänzen wir und in punkten wie zeichnen

und digitale Gestaltung.

Page 10: Kursergebnis: Handmade Shop Dokumentation

08/04/10 >> ideenFindunG

Page 11: Kursergebnis: Handmade Shop Dokumentation

08/04/10 ideenFindunG

nachdem wir uns unserer kompetenzen bewusst waren, setzten wir

eine ideenskizze an. Unsere grobe idee bestand darin einen

onlineshop zu konzepieren, in dem man nur handgemachte produk-

te erwerben kann und bei dem es eine Art Auswahlverfahren geben

sollte, um möglichst qualitativ hochwertige produkte anbieten

zu können.

Page 12: Kursergebnis: Handmade Shop Dokumentation

15/04/10 >> das GesCHäFtsmOdell

Page 13: Kursergebnis: Handmade Shop Dokumentation

15/04/10 das GesCHäFtsmOdell

Wir haben noch ein mal gruppenintern unsere idee eines handma-

de-onlineshops durchgesprochen für die wir uns in der Vorlesung

der vorigen Woche entschieden hatten. Wir versuchten probleme,

welche sich jetzt schon abzeichneten oder welche ein jeweiliges

Gruppenmitglied persönlich mit der idee hatte, zu lösen, damit

sich jeder aus der Gruppe mit dem projekt identifizieren kann

und wir es bis zum Semesterende gemeinsam zum erfolg bringen

können.

Unser onlineshop soll jungen Designern und anderen kreativen

die möglichkeit bieten ihre selbstgemachten Designobjekte wie

z.B. lampen, tischdecken oder Stühle einem breiten publikum zu

präsentieren und auch an dieses zu verkaufen. Außerdem wird es

für Designer und künstler die möglichkeit geben über unseren

onlineshop auch Ausstellungsflächen zu mieten, die sie nutzen

können falls sie einen ort suchen, an dem sie ihre Werke aus-

stellen können. Auch dort ist es ihnen natürlich möglich ihre

Ware erfolgreich zu verkaufen.

Den potentiellen käufern soll ein Shop angeboten werden, in dem

man hochwertiges und gutes Design zu guten preisen kaufen kann

und sich somit Unikate sichert, welche sich nicht an jeder ecke

finden lassen.

Page 14: Kursergebnis: Handmade Shop Dokumentation

15/04/10 >> das GesCHäFtsmOdell

nachdem wir uns also untereinander geei-

nigt haben, war es an der zeit die idee

unseres „handmade- onlineshops“ den an-

deren Gruppen aus dem kurs vorzustellen.

Wir verdeutlichten so genau wie möglich,

wie der Shop im Großen und Ganzen funkti-

onieren soll, was es dort zu kaufen gibt,

wer kauft und wer verkauft, so wie wir

uns es vorstellten.

Die anderen kursteilnehmer konnten uns

nun ihre meinung, ob positive oder nega-

tive kritik, zu unserem onlineshop äu-

ßern. Sie versuchten mit neuen ideen und

Ansätzen noch einmal das ganze projekt zu

verbessern um am ende das optimum her-

auszuholen. Am ende der Vorlesung stand

durch die gemeinsame optimierung unsere

idee fest und wir waren bereit uns an den

folgenden terminen genauer mit der Umset-

zung zu beschäftigen.

Page 15: Kursergebnis: Handmade Shop Dokumentation
Page 16: Kursergebnis: Handmade Shop Dokumentation

22/04/10 >> Business mOdel Canvas

Angebot

Workshops,Kategorisierung,Pro�le(Kunst & Künstlerinfos),Tutorials,Ausstellungsbörse,Echtheitszerti�kat,Kalender,Lager- & Präsentationsräume(zwecks Besichtigung der Ware),Druckereianbindung,Rabattaktionen,Handarbeitsmessen

Schlüssel-aktivitäten

Shop

Schlüssel-ressoursen

Webspace,Abrechnungssysteme

Partner-netzwerke

Druckerei,FH Showroom

Kostenstruktur

Werbung,Programmierer,Anmietung der Räume,Webspace,Server

Einnahmequellen

Miete für Räume,Provision

Kunden-beziehung

Community,Rabattaktion,Newsletter

Distributions-kanäle

Ausstellungsbörse, Webseite

Kunden-segment

Künstler,Kunstinteresse

Page 17: Kursergebnis: Handmade Shop Dokumentation

22/04/10 Business mOdel Canvas

im mittelpunkt des Business models steht das Angebot, welches

von punkten bestimmt wird, die sich sowohl auf den Anbieter als

auch auf den kunden beziehen.

zu Beginn wurden sämtliche Gedanken aufgeschrieben, die inner-

halb der Gruppe aufkamen. Dadurch entstand ein sehr weitgefä-

chertes und überladenes Angebot.

Unsere Angebote bestehen aus: Workshops, kategorisierung,

profile (kunst & künstlerinfos), tutorials, Ausstellungsbörse,

echtheitszertifikat, kalender, lager- und präsentationsräume

(zwecks Besichtigung der Ware), Druckereianbindung,rabatt-

aktionen und handarbeitsmessen.

Unsere partnernetzwerke bestehen aus einigen Druckereien und

dem Fh Showroom, dem projekt einer anderen Gruppe des kurses.

Die Schlüsselaktivitäten wären der Shop und die Schlüsselre-

sourcen der Webspace und ein Abrechnungssystem.

Unsere kostenstruktur besteht aus Werbung, programmierer,

Anmietung der räume, Webspace und dem Server. Distributions-

kanäle sind eine Ausstellungsbörse und die Web-seite.

Die kundenbeziehung erhalten wir durch rabattaktionen, der

Community und einem newsletter aufrecht.

Das kundensegment besteht aus künstlern und kunstinteressen,

welches alle Untergruppen umfasst.

einnahmequellen sind für uns eine provision und die miete für

die Ausstellungsräume.

Page 18: Kursergebnis: Handmade Shop Dokumentation

29/04/10 >> Business mOdel Canvas

Page 19: Kursergebnis: Handmade Shop Dokumentation

29/04/10 Business mOdel Canvas

in der folgenden Woche betrachten wir die einzelnen rubriken

intensiver. Wir stellten fest, dass nicht alle ideen umsetzbar

wären oder zumindest minimiert werden sollten. Aufgrund unse-

res zu allgemein gefassten kundensegmentes wurde hieran weiter

gearbeitet und der kundenstamm verfeinert: künstler, kunstinte-

resse, zwischenhändler, millionäre, Büroinhaber, Designstuden-

ten, Galerieinhaber.

zudem erweiterten wir das Angebot um:

kategorisierung, profile (kunst & künstlerinfos), tutorials,

Ausstellungsbörse, echtheitszertifikat, kalender, lager- & prä-

sentationsräume (zwecks Besichtigung der Ware), Druckereianbin-

dung, rabattaktionen.

Page 20: Kursergebnis: Handmade Shop Dokumentation

06/05/10 >> Business mOdel Canvas

Page 21: Kursergebnis: Handmade Shop Dokumentation

06/05/10 Business mOdel Canvas

in der dritten Woche des Business model Canvas Aufbaus wurde

dieses abgeschlossen, indem wir weiterhin den inhalt der rubri-

ken minimierten, um ein möglichst realitätsnahes Bild der ur-

sprünglichen idee zu erhalten.

hierdurch entstand das folgende modell, welches die Grundlage

für die darauffolgenden Überlegungen aus der „Customer perspec-

tive“ ist.

Angebot: Druckereianbindung, kalender, kategorisierung, Aus-

stellungsbörse, progile der künstler, kurzinfos zu produkten,

Ausstellungsräume

partnernetzwerke: Fh Showroom

Schlüsselaktivitäten: Shop, Vernetzen

Schlüsselresourcen: Webspace, Abrechnungssysteme

kostenstruktur: Werbung, programmierer, Anmietung der räume,

Webspace, Server

kundenbeziehung: Community, newsletter

Distributionskanäle: Ausstellungsbörse, Webseite, handarbeits-

messen

kundensegment: künstler, kunstinteressierte, zwischenhändler,

privatpersonen, kunstliebhaber, Designstudenten

einnahmequellen: miete für räume, provision, Werbung, Verkauf

über dritte

Page 22: Kursergebnis: Handmade Shop Dokumentation

20/05/10 >> ZielGRuppendeFinitiOn

Page 23: Kursergebnis: Handmade Shop Dokumentation

20/05/10 ZielGRuppendeFinitiOn

Unsere zielgruppensegmente sind künstler, kunstinteressierte,

zwischenhändler, privatpersonen, kunstliebhaber und (Design-

studenten.

Um sich besser in die ausgewählte zielgruppe hineinversetzen zu

können, benennt man diese person, gibt ihr einen namen und

einige zutreffende eigenschaften.

Wir haben uns für den kreativen Studenten entschieden. er heißt

Cosmo und ist 25 jahre alt. er geht gerne auf konzerte, Aus-

stellungen und partys, trifft sich mit Freunden, welche ihn als

sympathisch und offen beschreiben. zudem ist er an allem inte-

ressiert, was mit kunst und Design zu tun hat. er besitzt nicht

so viel Geld, da er anfallende kosten, wie z.B. miete und die

Studiengebühren zahlen muss, aber aufgrund seines Studiums nur

nebenbei arbeiten kann.

Page 24: Kursergebnis: Handmade Shop Dokumentation

20/05/10 >> empatHY map

Page 25: Kursergebnis: Handmade Shop Dokumentation

20/05/10 empatHY map

Das „empathy mapping“ ist ein Geschäftsmodell, welches von der

Sicht des kunden aus geht. es soll dabei helfen die Gedanken

und handlungen einer zielgruppe nachzuvollziehen. man wählt aus

der reihe möglicher kundensegmente eine kundengruppe aus und

beginnt diese zu analysieren.

Damit man das zielkundensegment nicht als zielkundensegment

betrachtet, personalisiert man es.

Daraufhin werden folgende punkte überlegt und analysiert: was

sieht er, was hört er, was denkt er, was sagt und macht er, was

sind seine probleme und was gewinnt er. Dabei ist zu beachten,

dass Denken und Sagen nicht dasselbe ist.

Die zielgruppensegmente unserer Gruppe umfassen künstler, kun-

stinteressierte und (Design)studenten. es ist zu beachten, dass

es bei unserem konzept zwei positionen mit verschiedener An-

sicht gibt, die käufer und die Verkäufer eines produktes. im

idealfall wird der käufer am ende selber noch zu Verkäufer.

Wir erstellten das „empathy mapping“, wie bereits erwähnt, an

dem zielgruppensegment der Studenten.

Page 26: Kursergebnis: Handmade Shop Dokumentation

Sehen

Unser Student sieht Ausstellungen der

verschiedensten Art, was sein Auge schult

und ihn kritisch gegenüber massenware

werden lässt. zudem wird er sich durch

sein Umfeld der gängigen trends bewusst.

er nimmt zudem die Werke anderer Desig-

ner oder Studenten wahr, welche für ihn

gleichzeitig auch immer konkurrenz bedeu-

ten, da er selber Designer ist bzw. wird.

hören

Durch seine kritische Sicht gegenüber

massenware, die auch andere Gleichgesinn-

te in seinem Umfeld haben, bekommt er zu

hören, dass individuelle und ausgefalle-

ne Sachen besser sind als diejenigen, die

auf Standards zurückzuführen sind. Unser

Student wird zudem während seines Design-

studiums selber produkte anfertigen, die

bei anderen menschen sowohl positive als

auch negative reaktionen hervorrufen wer-

den. So hört er wahrscheinlich ebenso lob

wie auch kritik. zudem hört er von seinen

professoreninnen, dass er seine Semester-

arbeiten pünktlich abgeben müsse, was ihn

ziemlich unter zeitdruck setzt.

Denken

Durch das, was unser Student durch hö-

ren uns Sehen in sich aufnimmt, kommt er

auf bestimmte Gedanken. Das erhaltene lob

lässt ihn denken, dass seine eigenen pro-

dukte viel potenzial haben. Dies bringt

ihn auf den Gedanken, dass er damit Geld

verdienen könnte.

20/05/10 >> empatHY map

Page 27: Kursergebnis: Handmade Shop Dokumentation

er möchte gerne Sachen produzieren, die

individuell und außergewöhnlich sind. er

denkt einerseits an sein Studium, an das,

was er noch alles lernen muss und an die

Abgabetermine. Andererseits denkt er da-

ran, dass er sich nach einem vollendeten

projekt vielleicht an eine Belohnung für

die ganze Arbeit und den zeitdruck etwas

gönnen könnte. zudem denkt er natürlich

auch an seine hobbys und seine Freunde

und Familie.

Sagen

So wie unser Student kritik und lob be-

kommt, übt er auch selber kritik und lob

aus. es passiert auch manchmal, dass er

dabei ein wenig übertreibt. er behauptet

beispielsweise gegenüber seinen profes-

soren, dass er keine zeit und viel Stress

habe, um noch mehr Arbeit aus dem Weg

zu gehen oder weil er zu spät mit seiner

Arbeit angefangen hat. er findet seine

eigenen Sachen bzw. produkte gut und sagt

dieses auch offen aus.

Wünsche

er wünscht sich aufgrund seines Studi-

ums und seinem nebenjob gerne etwas mehr

Freizeit für sich selbst und für seine

Freunde. er würde sich gerne öfter et-

was gönnen. Außerdem wünscht er sich mehr

zeit für seine persönlichen kreativen Ar-

beiten/produkte. Sein hobby würde er ger-

ne zum Beruf machen und sich auch viel-

leicht damit selbstständig machen.

Page 28: Kursergebnis: Handmade Shop Dokumentation

Sorgen

neben seinen Wünschen hat unser Student

natürlich auch Sorgen. Bei der großen

konkurrenz bekommt er Ängste, was nach

seinem Studium geschehen wird und ob er

wirklich eine Chance im Berufsleben hat.

Dabei stellt er seine Sachen in Frage,

ob sie gut sind und gutes Verkaufspoten-

tial haben. hinzu kommt wie oben bereits

genannt der zeitdruck durch sein Studium

und seinem nebenjob und oft auch Geldsor-

gen.

Verkäufer

Der Student ist sich unsicher ob seine

Werke potenzial haben. Also bieten wir

ihm die möglichkeit dies selber heraus-

zufinden, indem wir ihm eine plattform

anbieten, wo er seine produkte für Geld

anbieten kann. mit dem zusätzlichen Geld

kann er sein knappes Budget aufbessern.

Durch sein stressiges Umfeld ist auch der

Student gestresst, darum wird der zugang

zu unserer Webeite und die Bedingung (für

den Verkauf) einfach gestaltet. Denn je

einfacher, desto weniger Aufwand hat er,

und umso mehr produkte stellt er mögli-

cherweise online. Der Verkäufer hat auch

zusätzlich die möglichkeit zu kaufen,

deshalb muss man ihn auch als käufer be-

trachten.

20/05/10 >> empatHY map

Page 29: Kursergebnis: Handmade Shop Dokumentation

käufer

Der Student hat durch den Besuch diverser

Ausstellungen ein gewisses Bewusstsein

für gutes und besonderes Design entwi-

ckelt. Somit wird dieser auch von unserer

Website angetan sein, da wir ihm genau

dieses anbieten können: individuelles und

besonderes Design und keine massenware.

Dieses gilt nicht nur für die produkte,

sondern auch für das Auftreten und Aus-

sehen unserer Webseite. Durch die option

des Votings kann er sogar selber aktiv

werden und entscheiden, welche produkte

er für verkaufsfähig und welche als po-

tentiallos ansieht. Da er wegen seines

Studiums und seinem nebenjob viel Stress

hat, müssen wir ihm den Umgang mit der

Seite so leicht wie möglich machen, aber

trotzdessen keinen Verlust an kreativität

erleiden.

Page 30: Kursergebnis: Handmade Shop Dokumentation

27/05/10 >> WiReFRames

Page 31: Kursergebnis: Handmade Shop Dokumentation

27/05/10 WiReFRames

Der einstieg in die Umsetzung begann mit dem ersten Ausarbeiten

des Grundaufbaus der Startseite des Shops. Wir legten fest wel-

che Funktionen innerhalb dieser sein müssten.

neben login- bzw. registrierfunktion, sowieo einer Suchmaschi-

ne und eines Warenkorbs sollten die kategorien des Stores, eine

Ausstellungsraumbeschreibung und vor allem die Voting-Funktion

ersichtlich sein.

im Footer sollten sich Standartfunktionen wie impressum, FAQ,

AGB, Support, kontakt und Datenschutz befinden, aber auch auf

den Shop bezogen informationen über liefer- und Versandkosten,

sowie privatsphäre-einstellungsmöglichkeiten, welche den kunden

und Verkäufern ermöglichen soll eine individuelle Sichtbarkeit

zu erstellen.

Page 32: Kursergebnis: Handmade Shop Dokumentation

10/06/10 >> WiReFRames

Page 33: Kursergebnis: Handmade Shop Dokumentation

10/06/10 WiReFRames

Als erstes gestalteten wir den prototypen der Website für un-

seren handmade-onlineshop, also das konzept des Wireframes der

Startseite.

Diesen Wireframe wollten wir entsprechend der üblichen Auftei-

lung von header, Global navigation (horizontal), Secondary na-

vigation (vertikal), Application Form und Footer ausrichten.

zunächst wurde überlegt, welche elemente für unseren handmade-

onlineshop notwendig sind. Dazu gehören außer den üblichen ele-

menten wie der navigation mit loginfunktion und der registra-

tion auch ein Warenkorb, da wir schließlich auf unserer Website

einen onlinshop betreiben.

Da alle eingestellten Gegenstände im onlineshop zunächst ein

Voting durchlaufen müssen, um für den Verkauf freigeschaltet

bzw. ausgesondert zu werden, muss dieses Voting auch auf der

Startseite sichtbar sein. Denn dieser Voting-prozess ist ein

fundamentaler Bestandteil unseres konzeptes.

zudem ist eine Suchfunktion sinnvoll, weil es dem User so-

mit ermöglicht wird, schnell und ohne viel Aufwand zu seinem

Wunschobjekt zu gelangen, ohne erst ein mal mehrere kategorien

durchklicken zu müssen.

nach den ersten Überlegungen, fingen wir an den Wireframe an-

zuscribblen. Direkt unter dem header soll eine leiste für die

Global navigation freigehalten werden bei der auf der

Page 34: Kursergebnis: Handmade Shop Dokumentation

10/06/10 >> WiReFRames

Startseite zunächst nur die Suchfunkti-

on, das login und die registration sicht-

bar ist. nachdem man sich eingeloggt hat,

sollen an dieser Stelle weitere Funkti-

onen erscheinen, wie zum Beispiel das

Bearbeiten des eigenen profils oder das

hochladen von Bildern.

Bei der Fragestellung, ob sich die Such-

funktion mittig, links- oder rechtsbün-

dig befinden soll, haben wir uns dafür

entschlossen, sie rechtsbündig zu set-

zen, da dies die meist verwendete Stelle

der Suchfunktion ist und demnach auch die

user-freundlichste.

Das login und die registration haben wir

zunächst linksbündig gesetzt, um einen

optischen Ausgleich und eine trennung zu

der Suchfunktion gewährleisten zu können.

Die Secondary navigation soll die katego-

risierung der zum Verkauf eingestellten

Gegenstände beinhalten. Diese haben wir

in drei kategorien eingeteilt: möbel, De-

koration und textilien. Wir haben uns nur

für diese drei kategorien entschieden, da

wir diese an unsere zielgruppe anpassen

wollten: nämlich dem gestressten, viel

beschäftigten Studenten, der keine lust

hat, sich erst einmal mehrere kategorien

mit mehreren Unterkategorien durchzule-

sen, um an sein zeil zu gelangen.

Direkt darunter soll ein Fenster mit den

menüpunkten „Voting“ und „räume mieten“

bestehen, wo man noch ein mal mehr infor-

mationen über diese erhält, wenn man die-

se anklickt. Das Voting soll direkt unter

der Global navigation erscheinen, denn

Page 35: Kursergebnis: Handmade Shop Dokumentation

dies ist wie bereits genannt das Funda-

ment des konzeptes. nun ergab sich jedoch

das problem, dass dort auch schlechte

bzw. nicht verkaufbare Gegenstände sicht-

bar sein werden und dies einen neuen User

abschrecken könnte. Dem wirken wir ent-

gegen, indem jeweils nur ein Bild in dem

Votingbereich erscheint, welches dann ein

dynamisches element ist, d.h. alle paar

Sekunden wechselt das Bild zu einem an-

deren. Dies könnte dann einen guten bzw.

verkaufstüchtigen Gegenstand abbilden.

zudem wirkt dieses dynamische element mo-

dern und trendig, was wiederum die ange-

strebte hauptzielgruppe anspricht.

Auf der Startseite werden immer die je-

weils neusten produkte zu sehen sein. Da

dies mehrere sein werden, wird dem oben

genannten problem wieder entgegengewirkt,

da es einen Ausgleich zwischen guten,

verkaufbaren Waren und einem evtl. nicht

verkaufbaren Gegenstand schafft.

Der Votingbereich verschiebt sich an die

rechte Seite, sobald man einen anderen

menüpunkt anklickt, sodass man jederzeit

voten kann.

Da wir die möglichkeit anbieten, sich

räume für Ausstellungen zu mieten, haben

wir ein Fenster erstellt, das dem User

verschiedene locations vorgeschlägt. Die-

ses wird sich an der rechten Seite befin-

den und immer dort verbleiben.

zuletzt erscheint der Footer unscheinbar

am unteren rand der Website mit den menü-

punkten „Support“, „About“, „impressum“,

„AGB‘s“ und „FAQ“.

Page 36: Kursergebnis: Handmade Shop Dokumentation

17/06/10 >> WiReFRames

Page 37: Kursergebnis: Handmade Shop Dokumentation

17/06/10 WiReFRames

zunächst fand die Besprechung unseres erstellten Wireframes

statt. Das Grundkonzept war funktionsfähig und durchaus an-

gemessen und vertretbar, allerdings sollten wir noch ein paar

Feinheiten überdenken.

eine davon ist die positionierung des logins, als auch der

registration. Bisher hatten wir diese in der Global navigati-

on an der linken Seite ausgerichtet, damit sich diese deutlich

von der Suchfunktion absetzen. mit dieser positionierung wird

die loginfunktion und registration in den Vordergrund gerückt.

Dadurch verdeutlicht die Website optisch, dass es wichtig sei,

sich auf dieser Seite zu regristrieren bzw. einzuloggen. Wenn

wir diese allerdings rechtsseitig neben die Suchfunktion aus-

richten, so fällt die prägnanz des logins und der registration

weg und der Shop bzw. die kategorien, sowie das Voting stehen

im Vordergrund. Somit haben wir uns doch für die zweite Vari-

ante entschieden, da dies die weitaus größere Wichtigkeit be-

sitzt.

nun lag es noch daran, den Wireframe auch umzusetzen.

Page 38: Kursergebnis: Handmade Shop Dokumentation

24/06/10 >> laYOut

ManufakturManufakturSucheLogin

Möbel

Srühle

Tische

mehr...

Deko

Bilder

Lampen

mehr...

Textilien

Tischdeken

Bettwäsche

mehr...

Räume

Voting

Registrieren

Das Voting

Iqui core, comniti animagnim ut aliatin el mi, con endandis

accum rat peris uta velecest odition sequid ullique venditae

dolorepta dignis est et venis exerion sequist molorate dolori-

tErunti dis dolore nos natioris aut praeper ibusaperum restio

quam as et harciisciam inis nonem que sapedia sit alibus as

quuntisto deresenis autatis expliquam, solum qui sum accatem

Neue Produkte

LampeXerum que consequis dentiorecto Xerum que consequis denti-

DeckenXerum que consequis dentiorecto Xerum que consequis denti-

LampeXerum que consequis dentiorecto Xerum que consequis denti-

KissenXerum que consequis dentio-recto Xerum que con-sequis dentiorecto

RäumeXerum que consequis dentiorecto Xerum que consequis denti-

Möbel

Textilien

Wohnaccessoires

Votingmehr Info hier

MietenRaumvermietung hier

Tische

Bezüge

Beleuchtung

Stühle

Kissen

Kleindeko

Schränke

Bla

Bla

Bla

Bla

Bla

Login RegistrierenName Passwort

Shop it your way. Straight online.

Voting

Neue Produkte

Vase Velio Sessel Round Tischlampe Trendy

Stadthalle RaumOststraße 112Düsseldorf120m²verfugbar: 20.06.2010 - 03.07.2010

Mieten

Wofür braucht der Onlineshop ein Voting?Unsere Produkte werden ausschließlich von Privatleuten, vorallem Studenten designed und produziert. Jeder kann hier seine selbstgemachten Designerstücke reinstellen und verkaufen. Um zu verhindern, dass die Website überfüllt ist, vielleicht auch mit Gegenständen, die kein Potential zum Verkauf haben, haben wir dieses Voting eingerichtet. Hier kannst Du jederzeit bestimmten , welches Produkt es demnächst im Shop zu kaufen gibt und welches Deiner Meinung nach nichts wert ist.

Style.

Support ▪ About ▪ Impressum ▪ Liefer- und Versandkosten ▪ AGB‘s ▪ FAQ

Möbel

Textilien

Wohnaccessoires

Votingmehr Info hier

MietenRaumvermietung hier

Tische

Bezüge

Beleuchtung

Stühle

Kissen

Kleindeko

Schränke

Bla

Bla

Bla

Bla

Bla

Login RegistrierenName Passwort

Shop it your way. Straight online.

Voting

Neue Produkte

Vase Velio Sessel Round Tischlampe Trendy

Stadthalle RaumOststraße 112Düsseldorf120m²verfugbar: 20.06.2010 - 03.07.2010

Mieten

Wofür braucht der Onlineshop ein Voting?Unsere Produkte werden ausschließlich von Privatleuten, vorallem Studenten designed und produziert. Jeder kann hier seine selbstgemachten Designerstücke reinstellen und verkaufen. Um zu verhindern, dass die Website überfüllt ist, vielleicht auch mit Gegenständen, die kein Potential zum Verkauf haben, haben wir dieses Voting eingerichtet. Hier kannst Du jederzeit bestimmten , welches Produkt es demnächst im Shop zu kaufen gibt und welches Deiner Meinung nach nichts wert ist.

Style.

Support ▪ About ▪ Impressum ▪ Liefer- und Versandkosten ▪ AGB‘s ▪ FAQ

ManufakturManufakturSucheLogin

Möbel

Srühle

Tische

mehr...

Deko

Bilder

Lampen

mehr...

Textilien

Tischdeken

Bettwäsche

mehr...

Räume

Voting

Registrieren

Das Voting

Iqui core, comniti animagnim ut aliatin el mi, con endandis

accum rat peris uta velecest odition sequid ullique venditae

dolorepta dignis est et venis exerion sequist molorate dolori-

tErunti dis dolore nos natioris aut praeper ibusaperum restio

quam as et harciisciam inis nonem que sapedia sit alibus as

quuntisto deresenis autatis expliquam, solum qui sum accatem

Neue Produkte

LampeXerum que consequis dentiorecto Xerum que consequis denti-

DeckenXerum que consequis dentiorecto Xerum que consequis denti-

LampeXerum que consequis dentiorecto Xerum que consequis denti-

KissenXerum que consequis dentio-recto Xerum que con-sequis dentiorecto

RäumeXerum que consequis dentiorecto Xerum que consequis denti-

Page 39: Kursergebnis: Handmade Shop Dokumentation

24/06/10 laYOut

Die Umsetzung unseres durchgeplanten Wireframes erfolgte durch

drei layoutversionen, welche auch drei verschiedene Ansätze

haben.

Das erste layout orientiert sich eher an einer bestimmten Stil-

richtug. Wir haben uns gegen dieses entschieden, da wir genau

dies vermeiden wollen. in unserem onlineshop sollen jegliche

Stilrichtungen vorkommen und insgesamt keine bestimmten Design-

vorgaben bestehen.

Das zweite Design wirkt sehr elegant und luxeriös. es wäre also

nicht angemessen für unsere hauptzielgruppe der Studenten, da

es für diese schon zu extravagant wäre.

Page 40: Kursergebnis: Handmade Shop Dokumentation

01/06/10 >> eRGeBnisse

Page 41: Kursergebnis: Handmade Shop Dokumentation

01/06/10 eRGeBnisse

Das dritte layout ist unserem hauptzielgruppensegment gerecht,

da es einerseits sehr erfrischend und trendig wirkt und ande-

rerseits auch sehr kreativ durch die aufgelockerte Struktur und

der vielen icons.

Sowohl die Startseite als auch die Seite, nachdem man sich ein-

geloggt hat, sind klar strukturiert und einfach zu bedienen.

Page 42: Kursergebnis: Handmade Shop Dokumentation
Page 43: Kursergebnis: Handmade Shop Dokumentation

Top Related