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. D.I.y.
pROJeKt
PaParazzI
teiLneHMeR
Katharine christnacht
Ina fleßer
Jerrold Pangilinan
vyacheslav shushpanov
anna tverdostup
DOZenten
axel Quack
michael zirlewagen

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

3. kurSBESChrEIBunG
kurSBESChrEIBunG
hypermedia 1, D.I.Y. - Prototypische Designprozesse,
sommersemester 2010.
Die Dozenten Axel Quack und Michael Zirlewagen geben im som-
mersemester 2010 eine einführung in Konzeption und Umsetzung
prototypischer Designprozesse.
Die Agenturlandschaft befindet sich im Umbruch, bisher einge-
„Design ist mehr als Kreativität. Design er- setzte Rollendefinitionen und produktstrategien werden durch
innovative prototypische Methoden ersetzt. infolgedessen erwei-
fordert eine geplante, strukturierte und tert sich das spektrum eines Designers auch um Aufgabenbereiche
wie strategische Beratung und Konzeption.
systematische Herangehensweise, konsequente
und nachhaltige Umsetzung aller Arbeitsschrit- im Kurs wird die technik vermittelt, eigene ideen durch agile
Designprozesse in digitalen Medien umzusetzen. nach der
te aller Beteiligten. Maxime „fail early, fail often“ werden Verfahren, wie z.B. Vi-
Vorher klar definierte Ziele und Rahmenbedin- sual thinking, storytelling und wireframes realisiert.
gungen sind weitere Grundsteine eines erfolg- Der Kurs wird als D.i.Y. workshop abgehalten, um einen starken
praxisbezug zu garantieren.
reichen Designprozesses...“netZweRK-DesiGn, Http://www.netZweRK-DesiGn.At/307_DeU_HtML.pHp

4. IDEEnfI nDunG
DaS TEaM
KatharIne chrIstnacht
6. semester B.A. Kommunikationsdesign
Ina flesser
2. semester B.A. Kommunikationsdesign
jErroLD PanGILInan
4. semester B.A. Kommunikationsdesign
vYaChESLav ShuShPanov
2. semester B.A. Kommunikationsdesign
anna TvErDoSTuP
2. semester B.A. Kommunikationsdesign

5. STärkEn unD SChWäSChEn EInES TEaMS
STärkEn unD SChWäChEn
eInes teams
Wer kann was? und wo stehen wir?
nachdem unsere Geschäftsidee vom gesamten team abgesegnet
wurde, ging es an die Analyse der eigenen Fähigkeiten, um mög-
lichst realistisch an das projekt ranzugehen.
Jedes teammitglied musste sich selbst einschätzen, so wie es im
realen projektmanagement ebenfalls der Fall ist, also sei-
ne positiven und negativen Fähigkeiten nennen, um den aktuellen
stand des teams auf dem wege zu einer spitzenleistung zu ver-
deutlichen. nacheinander wurden notizen auf einen plakat auf-
geklebt. Dadurch wurden unsere stärken und das Verbesserungs-
potenzial unserer Gruppe identifiziert und nutzbar gemacht.
Unsere schwerpunkte lagen vor allem im Bereich der Gestaltung.
Die fehlenden Kenntnisse in der programmierung erschwerten uns
zunächst die entscheidung über einen proffesionellen Aufbau un-
serer Geschäftsidee. Die Kenntnislücken wurden jedoch mithilfe
von Fachliteratur und der Analyse bereits existierender, ver-
gleichbarer programme gefüllt.

6. IDEEnfInDunG
IDEEnfInDunG
„Der Design-prozess setzt sich auch aus folgenden
5 schritten zusammen:
*Analyse Wir tauschen unsere Ideen über eine mögliche Geschäftsidee aus.
*Konzeption in der ersten seminarstunde stellten wir uns gegenseitig unsere
*entwurf Geschäftsideen vor, für die wir in den nächsten wochen Analy-
se, Konzeption, entwurf und Realisierung mithilfe verschiedener
*Realisierung prozessmethoden erstellen werden. Unsere Gruppe entschied sich
für die entwicklung einer Bildbearbeitungssoftware, die der
*Kommunikation.“ netZweRK-DesiGn, Http://www.netZweRK-DesiGn.At/307_DeU_HtML.pHp User ohne installation und ohne Lizenzkosten, direkt im inter-
net und vom Handy aus, nutzen kann. Als vorläufiger Arbeitsti-
tel wurde „photoshop to go“ gewählt, der später in „paparazzi“
geändert wurde. Anfangs haben wir softwareanbieter, wie z. B.
Adobe, in unsere Überlegungen als partner eingeschlossen. im
Laufe des seminars entschieden wir aber, dass eine selbst pro-
grammierte (in Auftrag gegebene) und unabhängige software unse-
ren eigenen erwartungen an ein mobiles Bildbearbeitungsprogramm
am nächsten kommt. es soll eine kostenlose Free-Version mit
einschränkungen in der nutzung von Angeboten und eine premium-
Version mit voller nutzbarkeit erstellt werden. Die Community
kann von beiden Gruppen genutzt werden.

8. DaS GESChäfTSMoDELL
Zusammentragen der Geschäftsinhalte für ein Businessmodell.
Um ein geschäftsfähiges Businessmodell zu entwickeln, das auch
„the Business Canvas Model is a simp- in Hinblick auf eine präsentation vor möglichen partnern sowie
Kunden bestand hält, arbeiteten wir elementare Felder in Form
le and elegant description that allows eines Bildes (Canvas) aus. somit wurde ein Überblick über un-
us to have valuable discussions around sere Leistungen, die anvisierte Zielgruppe, partnernetzwerke,
Kosten, einnahmen und Distributionskanäle ermöglicht.
business models.“Http://LOGiCALBUsinesspROCess.COM/pRODUCts/BUsiness-CAnVAs
Offene Fragen und Lösungen:
1. ist das Franchisemodell, eine Verbindung unserer
Geschäftsidee mit einem Café, optimal? (nein)
2. wie hoch wäre die hochladbare Datenmenge? (2 MB)
3. wie hoch könnten Beiträge ausfallen? (Free bzw. 2,99€/Monat)
4. entfallen Lizenzen, wenn z. B. Adobe partner wäre? (Ja)
„Das Business Canvas Mo-
del ist eine einfache und
elegante Beschreibung,
die uns nützliche Diskus-
sionen über Geschäftsmo-
delle ermöglicht.“ tiM BLUMe

9. BuSInESS MoDEL CanvaS, EnTWICkLunG BuSInESS MoDEL CanvaS
events
Café
Café
räume

10. BuSInESS MoDEL CanvaS, auSarBEITunG
DaS BuSInESS MoDEL CanvaS
„wer sich selbst ständig machen will, vergrößerung der möglichen Einnahmequellen, ausdünnen der
braucht einen (Business-)plan. Allerdings Kosten.
wir orientierten uns am Business Model Canvas, das von Dr. Ale-
nehmen ihn besonders Kleinunternehmer in xander Osterwalder entwickelt wurde. Die Visualisierung bisher
spe nicht sehr ernst. meist nur verbal dargestellter Businesspläne wurde so ermög-
licht. Mit diesem Modell können ideen leicht bewertet und abge-
Das wagnis selbstständigkeit gelingt vor ändert werden.
allem dann, wenn der angehende Unternehmer nachdem wir nun eine erste struktur erstellt hatten, erweiter-
genau weiß, was er will, was er dazu benö- ten wir vor allem die inhalte in den Feldern schlüsselaktivitä-
ten, partnernetzwerke und Kundensegmente. Ziel war eine Vergrö-
tigt und wer ihm seine idee abkauft. „Ge- ßerung unserer einnahmequellen. Allerdings wurde die struktur
nau, um das alles zu verifizieren, ist es dadurch überladen und leicht unübersichtlich; besonders die
verschiedenen Zielgruppen bereiteten uns durch ihre Divergenz
so wichtig, einen formalen Businessplan zu leichte schwierigkeiten.
erstellen“, sagt evers. eine Vielzahl von wer ist also als Zielgruppe besonders interessant für uns? sind
es die studenten, die Hobbyfotografen oder die profis? Diese
Gründungen zumeist als Alternative zur Ar- Frage begleitete uns noch die nächsten stunden. Zweiter schritt
war dann das Ausdünnen der Kostenstrukturen. wir entschieden
beitslosigkeit scheitert, haben die ex- uns daher, die idee des Franchisemodells fallen zu lassen und
perten der DiHK im aktuellen Gründerreport uns lediglich auf den Vertrieb unserer software zu konzentrie-
ren. Damit fielen auch Kostenfaktoren wie Betriebsausstattung
ausgemacht. etwa 40 prozent der Gründer für das Café und die Mitarbeiter weg.
können ihre idee nicht einmal klar formu-
lieren.“ Http://www.Zeit.De/KARRieRe/BeRUF/2009-11/BUsinesspLAn-sCHReiBen-AnLeitUnG

11. BuSInESS MoDEL CanvaS, auSarBEITunG
29/04/10 >> BuSInESS MoDEL, auSarBEITunG/auSDünnunG

12. 20/EMPaThY MaP 2.0
ZIELGruPPEnDEfInITIon
„Ob schon web basiert
oder als installierte
software: „Keep it simp-
le“, das prinzip einfach-
heit also, hat sich nicht Womit müssen sich unsere kunden jeden Tag befassen?
zuletzt durch den Hype um Unsere Zielgruppe (Hobbyfotografen, Blogger und Dauerposter)
web 2.0 bei der Benutzung habt keine erfahrung mit professionellen Bildbearbeitungspro-
grammen und würde schon aus Kostengründen keine Vollversion von
von Anwendungen durchge- Adobe photoshop erwerben.
Der Kunde wünscht sich eine einfache Bedienbarkeit des produk-
setzt. Diese einfachheit tes, viele One-Click-Applikationen und ein paket mit ansehnli-
weckt beim Anwender posi- chen schriften und Freiformen. Die software muss unbedingt nach
konventionellen standards designt werden, da den Usern gängige
tive Assoziationen, lässt strukturen bereits vertraut sind. Unsere Zielgruppe ist jung
eine identifikation mit bis mittelalt, webaffin, besitzen smartphones und Minicams, mit
den sie in ihrer Freizeit spontan Fotos aufnimmt. Oftmals will
dem jeweiligen produkt der Hobbyfotograf/Blogger/Dauerposter seine Fotos direkt und
möglichst schnell mit seiner webcommunity (z. B. auf Facebook)
zu.“ Http://www.pRCenteR.De/DAs-sieHt-GUt-AUs-wARUM-DAs-LOOK-AnD-FeeL-BeiM-DesiGn-VOn- teilen.
GRAFisCHen-BenUtZeROBeRFLAeCHen-sO-wiCHtiG-ist.7833.HtML

14. EMPaThY MaP
„Der nutzer muss bei der
Anwendung der software ein EMPaThY MaP
angenehmes Gefühl haben,
sie von Anfang an als po-
sitiv erfahren, damit er
dabei bleibt und nicht zu
einem anderen produkt wech-
selt. Das “Look-and-Feel” Wer sind unsere kunden?
muss stimmen. Die einfa- Um uns ein möglichst genaues Bild über unsere anvisierten Kun-
che und logische Bedien- den zu machen, wandten wir die empathy Map Methode an. Ziel
dieser Methode ist es, sich in die jeweilige Zielgruppe hin-
barkeit bildet dabei einen einzuversetzen und ihr tägliches Umfeld kennen zu lernen. so-
mit haben wir als entwickler die besten Voraussetzungen, um ein
wichtigen Baustein, die so- produkt zu gestalten, welches möglichst nahe beim Kunden liegt,
genannte „Usability“ einer also dem „Look-and-Feel“ einer bestimmten Zielgruppe ent-
spricht.
software. Den anderen Bau-
stein bildet ihre optisch- Da wir uns zu dem Zeitpunkt noch nicht auf eine konkrete
Ziegruppe geeinigt hatten, wurde zunächst eine Map (1.0) für
ästhetische Gestaltung. die profis ausgearbeitet, aber schließlich entschieden wir uns
für die Hobbyfotografen, Blogger und Dauerposter (Map 2.0). Für
Letztlich ist das ganze De- diese Zielgruppen ist Mobilität und besonders Zeit effektive
signpaket einer Benutzer- und einfache Bedienbarkeit von besonderer Bedeutung. Daher muss
ein Bildbearbeitungsprogramm besonders Benutzer freundliche
oberfläche ausschlaggebend Funktionen haben und intuitiv sein.
für ihren erfolg.“
tiM BLUMe, Http://www.pRCenteR.De/DAs-sieHt-GUt-AUs-wARUM-DAs-LOOK-AnD-FeeL-BeiM-DesiGn-VOn-GRAFisCHen-BenUt-
ZeROBeRFLAeCHen-sO-wiCHtiG-ist.7833.HtML

15. EMPaThY MaP DavE GraY, EMPaThY MaP, hTTP://WWW.fLICkr.CoM/PhoToS/DavEGraY/2380465521/PaGE2/ << 20/05/10
see see: befasst sich mit den visuellen
lange Ladezeiten von UpLOAD und sOFt- einflüssen des Kunden
wARe, Reizüberflutung von Funktionen,
keine intuitive Bedienung, überall bear- HeAR konzentriert sich beispiels-
beitete Bilder mit effekten, gesättigte weise auf die problemen, die er
Farben & Kompositionen, der hat eine sich täglich anhören muss.
spiegelreflex & schöne Bilder, Daten- & tHinK&FeeL sind die Gedanken und Gefühle
Bilder-Messie
des Kunden
HeAR sAY&DO ist das Resultat aus allen
Lizensen & Originalversion zu Faktoren und wie er damit um
teuer,„Jeder kann das“ geht
pAin umfasst die möglichen probleme
tHinK & FeeL
Qualität der Bilder, Know-How von image- & Lasten die ihn belasten
edit-sofware geläufig, Leistungsdruck GAin umfasst mögliche positive Fol
bei Bloggern, immer mehr & schnelle gen, die das produkt auslösen
posts mit hoch-qualitativen Bildern,
könnte
Kreativität ausleben und ausdrücken,
keine billigen, verpixelten Bilder pro-
fessioneller präsentieren
Dave Gray, xplane.
sAY & DO
Dave Gray entwickelte für x-plane die empa-
travel & work „ich kann „photoshoppen“,
„Ja, ich habe das Bild selbst bearbei- thy Map, die von Osterwalders Buch „Busi-
tet.“ ness Model Generation“ zum ersten Mal vor-
gestellt wurde.
pAin
Leistungsdruck,ständig überall einlog-
gen und up-loaden,Zeit aufwendig Bilder
speichern-bearbeiten-einloggen-suchen-
laden, zu viele Bilder ohne Ordner
GAin
schnelles Bearbeiten und Uploaden der
Bilder, Zusammenspiel aller Accounts

16. WIrEfraMES
WIrEfraMES
„ein wireframe ist eine schemati-
sche Darstellung einer webseite.
Der wireframe (dt.: „Gittermo-
dell“) dient zur Veranschauli-
chung und planung von elementen,
die auf einer webseite vorhanden Wir erstellen ein Wireframe.
sein sollen. es werden die grund- Heute erstellten wir in der Gruppe ein wireframe, eine gro-
legenden elemente einer seite be struktur für unsere Homepage. wir berücksichtigten gängi-
ge Online-strukturen mit Kopfnavigation, Footer, submenüs und
dargestellt, dies hat mit dem De- Drop-Out-Menüs.
Die struktur wird den programmierern unsere Vorstellungen der
sign der webseite zunächst einmal softwarearchitektur verständlich machen, da eine visuell ba-
nichts zu tun.“Http://www.weBKRAUts.De/2007/12/22/wiReFRAMes/
sierte Kommunikation bei solchen projekten von großem Vorteil
ist. Mißverständnisse lassen sich auf diese Art besser aus dem
weg schaffen. wichtig für die struktur von Computer gestütz-
ten Anwendungen ist vor allem eine logische und nachvollziehba-
re Ordnung, die in unserem Fall an bereits bestehende web- und
programmkonventionen anknüpft.
Zur erstellung der Diagramme kann man als Alternative zum
Handscribble Anwendungen wie „Axure“ (windows) und „Omni Graff-
le“ (MAC) verwenden, die dann grafische Diagramme erzeugen und
mit den sich die Funktionalität testen lässt.

17. WIrEfraMES
überarbeitung des Wireframe.
wir sprachen nochmals über unsere web-inhalte und legten fest,
welche elemente auf jeder seite erscheinen sollen.
Bei uns stand außerdem die Benutzerfreundlichkeit im Mittel-
punkt unserer Überlegungen, worüber wir uns lange unterhiel-
ten. Deswegen entschieden wir uns einen tourassistenten mit auf
die seite einzubauen. Diskutiert wurde u. a. auch der sinn und
Zweck einer Volltextsuche und der Aufbau von standardelementen
wie z. B. dem Footer.
im der Zwischenzeit tauften wir unsere Homepage auf den namen
paparazzi, denn dieses wort verbindet man instenktiv mit Fotos,
schnellem und flexiblen und einer Begeisterung für Fotografie.
so schnell, wie ein paparazzi gute Fotos schießt, so schnell
kann man diese mit der software bearbeiten und online stellen.

18. LaYouT
LaYouT
Wir scribbeln unsere homepage.
Die erste grafische Umsetung unseres Layouts wurde grob ge-
scribbelt. wichtig für den Aufbau auf der Homepage waren fol-
gende punkte: links oben das Logo, der Log-in/ die Registrie-
rung mittig oben, eine Kopfnavigation, infofenster auf der
rechten seite, das news und die letzten Uploads zeigt, sowie
die partner als icons und der Footer mit inhalten wie AGB, im-
pressum etc.. Das Hauptfenster beinhaltet ein Video (tourgui-
de) und die Highlights der kostenfreien Free-Version sowie der
premiumversion.

19. LaYouT 1 ErSTE LaYouTS DEr DoZEnTEn
Erstes Layout für die homepage
„Paparazzi“.
Folgende Verbesserungsvorschläge gab es
zu unserem ersten entwurf:
- icons der partner in Hellgrau mit Roll-
over versehen
- „partner“ aus dem Footer rausnehmen
- Breadcrumb einfügen
- 9-10 px große schrift
- immer Zutritt zur Community gewähren
- Datenschutz ins impressum
- Videorahmen nach standard
- „Help“ nicht rot
- „support“ im rechten Fenster rausnehmen
- Formensprache beachten! Kasten oder
rund?
- Anderer name für „Upload“
- ist es möglich, eine paparazzi-sprache
zu integrieren?
Für die nächste stunde bereiteten wir ei-
nen korrigierten entwurf vor.
unsere Dozenten machen es uns vor.
während des seminars zeigten uns unsere
Dozenten regelmäßig, wie sie die Aufga-
benstellungen umsetzten.

20. LAYOUt 2 LAYOUt 3 UnD 4
Bis zur präsentation entstanden noch
weitere, unterschiedliche Designentwürfe.
stay in the shot E-Mail Passwort
Passwort vergessen?
Registrieren
HOME MY PAPARAZZI COMMUNITY SUPPORT
Intuitive Bildbearbeitung auf Profi-Niveau
Hochladen, Bearbeiten und Ersetzen ihrer Bilder
Zeig deine Bilder der Community und der Welt
Zahlreiche Effekte, Schriften, Filter und mehr...
JETZT LOSLEGEN Upload.Edit.Save. Zeige der Welt dein Talent!!
create, share & organize
FREE VERSION NEWS
BEGLEITE UNS AUF
DER TOUR UND SEI Kostenfrei 11.07.2010
EINFACH KREATIV. Upload von URL/Rechner/Mobile
ZEIGE DEINE KUNST Viele Freiformen Neue Brushes zur Bildbearbeitung ... mehr
IN COMMUNITIES UND Nutzung von Schriften
WERDE EIN RICHTIGER
Direkte Uploads zu Social Media Webs 10.07.2010
PAPARAZZI !!!!
Beitritt zur Community
So funktionierts Tutorial für Hautbearbeitung ... mehr
katharine, munich subway, 205 votes 01.07.2010
PREMIUM VERSION
Das Voting für Juni steht fest ... mehr

21. enDLAYOUt