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. ws 2010
d.i.Y. – prototypische designprozesse
projekt
FotoautragsplattForm „viewFinder“
teilnehmer
sebastian Jeschke
robin Hartschen
richard rilinger
Jannik göpfert
Falko Böck
Dozenten
axel Quack
michael Zirlewagen

2. inHaltsverZeicHnis
+ Kursbeschreibung
+ teamvorstellung
+ stärken und schwächen eines teams
+ Ideenfindung
+ das geschäftsmodell
+ Business model canvas
+ Zielgruppendefinition
+ empathy map
+ wireframes
+ layout
+ ergebnisse

3. KursBescHreiBung

4. KursBescHreiBung
prototypische designprozesse – dieser ausdruck ist der zentrale
Bestandteil der Kursbeschreibung. prototypisch meint soviel
wie „nach einen prototyp geformt“. auf den Kurs und dessen
Ausrichtung bezogen ist diese Begrifflichkeit am ehesten als
arbeitsansatz oder vorgehensweise zu verstehen. die anforderun­
gen die heutzutage an designer gestellt werden, gehen weit
über die einfache gestaltung hinaus. vielmehr verlagern sich
die tätigkeitsfelder in richtung der Konzeption und der
strategischen planung bzw. Beratung.
im rahmen des Kurses wurden techniken und vorgehensweisen ver­
mittelt, die uns einen einstieg in diese arbeitsfelder erleich­
tern sollen. das agile und analytische vorgehen ist sowohl als
erleichterung wie auch als Bereicherung des designprozesses zu
verstehen.
das schlussendliche Kursziel bestand darin, mit Hilfe der
kennengelernten Instrumente und Techniken möglichst effizient
und wirkungsvoll ein selbst gewähltes geschäftsmodell real­
isierungsnah zu durchdenken. angefangen bei der konkreten
eingrenzung der geschäftsidee, über die Feststellung der
betriebswirtschaftlich relevanten Faktoren bis zur finalen
strukturellen und layouttechnischen Konzeption des internet­
auftritts.

5. teamvorstellung

6. teamvorstellung
seBastian JescHKe
8. Semester Diplom kommunikationsdesign
roBin HartscHen
2. Semester Bachelor kommunikationsdesign
ricHard rilinger
2. Semester Bachelor kommunikationsdesign
JanniK göpFert
2. Semester Bachelor kommunikationsdesign
FalKo BöcK
2. Semester Bachelor kommunikationsdesign

7. stärKen und scHwäcHen eines teams

8. stärKen und scHwäcHen
eines teams
die im Kurs erdachten projekte sind keineswegs in zufälligen
oder festgelegten gruppenkonstellationen bearbeitet worden. es
war Bestandteil der aufgabe, dass die teams sich selbstständig
formieren und organisieren sollten. ausschlaggebende Faktoren
bei der teambildung sind neben fachlichen Kompetenzen ohne
Frage auch zwischenmenschliche Übereinstimmungen. eine gute
Chemie ermöglicht einfacheres und offeneres Arbeiten, was
sowohl der Qualität als auch der Effizienz eines Teams dient.
In einem offenen Gespräch wurden schon ganz zu Anfang Ideen
und arbeitsschwerpunkte ausgetauscht. nach bereits 15 minuten
konnten sich mehrere arbeitsfähige teams präsentieren und die
arbeit aufnehmen.
die erste aufgabe bestand zunächst darin, das team möglichst
umfassend zu erfassen und sich selbst seiner stärken und
schwächen im team bewusst zu werden. diese maßnahme diente
im weiteren Verlauf vor allem der effektiven Aufgabenverteilung
innerhalb des teams. die ergebnisse dieser internen teamevalu­
ation wurden nach besagten 15 minuten direkt vorgestellt.
deutlich zu erkennen war (bei allen gruppen) die eklatante
Differenz zwischen Design-Know-How und technischem Background.

9. ideenFindung

10. ideenFindung
im anschluss an die gruppenbildung ging es darum, eine
geschäftsidee zu entwickeln. die beiden wesentlichen Kriterien
welche es zu beachten galt, waren neben dem innovationscharak­
ter der idee vor allem die wirtschaftliche tragfähigkeit des
geschäftsmodelles. die ausrichtung des Kurses auf agile prozes­
se war hier sehr deutlich zu spüren. in einem nicht einmal 15­
minütigen Brainstorming wurden die ersten ideen entwickelt und
im anschluss direkt vor dem gesamten Kurs präsentiert.
anfangs bestand unsere geschäftsidee darin, eine Bilddatenbank
zu entwickeln, die auf „Bilder aus der region XXX“ begrenzt
sein sollte. im weiteren Kursverlauf wandelte sich dieses Kon­
zept jedoch noch deutlich. schlussendlich legten wir uns auf
einen dienstleistungs­vermittlungs­service fest, welcher Foto­
grafen die Möglichkeit gibt Ihre Dienste im Internet zu offerie­
ren. ähnlich wie bei der weithin bekannten seite „myhammer.de“
wollen wir als Vermittler zwischen Fotoschaffenden und -suchen­
den auftreten. die vorteile einer solchen plattform liegen klar
auf der Hand. der Fotograf kann sein arbeitsfeld ansprechend
präsentieren und der Kunde kann direkt beurteilen ob stil,
Bildverständnis und ausrüstung des Fotografen seinen vorstel­
lungen entsprechen. wenn der Kunde nun einen auftrag einstellt,
werden Fotografen mit einem passenden arbeitsschwerpunkt aus­
gewählt und angesprochen. sollte ein Fotograf nun interesse
haben, kann er seine dienste für diesen auftrag zur verfügung
stellen und sich „bewerben“.

11. das gescHäFtsmodell

12. das gescHäFtsmodell
in dieser phase ging es maßgeblich darum ein möglichst tragfä­
higes und eigenständiges geschäftsmodel zu entwickeln. wie be­
reits beschrieben haben wir uns mit einem dienstleistungsportal
für Fotografen beschäftigt. ein schwerpunkt unserer konzepti­
onellen Arbeit ist in die Gestaltung des Erlösmodels geflossen.
unser erlösmodel basiert zum einen auf den mitgliedsbeiträgen
seitens der Fotografen, zum anderen auf den provisionsgebüh­
ren die für einen vermittelten auftrag gezahlt werden müssen.
wir haben uns dazu entschlossen sowohl eine standard­ wie auch
eine premiummitgliedschaft für die Fotografen anzubieten. der
mitgliedsbeitrag für standardmitglieder ist so bemessen, dass
in der regel keine amateure oder Freizeitfotografen eine mit­
gliedschaft eingehen werden. es ist unser vorrangiges Ziel, dem
Besucher der seite klarzumachen, dass auf dieser seite nur pro­
fessionelle leistung angeboten wird. die vorzüge eines premi­
umaccounts liegen in der ausführlichkeit, mit der der Fotograf
sich oder sein Fotostudio darstellen kann. Für den endverbrau­
cher entstehen keine zusätzlichen Kosten, da die provisionsge­
bühren ebenfalls vom Fotografen getragen werden. diese maßnahme
soll sicherstellen, dass sich jederzeit eine Fülle an offenen
Aufträgen in unserem Pool befindet. Jeweilige Partnerschaften
mit anderen Jobportalen (z.B. Xing) sollen für einen regelmäßi­
gen Nachschub an qualifizierten Fotografen sorgen.

13. Business modell canvas

14. Business modell canvas
nachdem das grundgerüst des geschäftsmodells konstruiert war,
ging es darum, anhand einer sogenannten „Business model
canvas“ die wesentlichen betriebswirtschaftlichen Faktoren
zu ermitteln. dabei geht es zunächst darum, einen großen Fundus
an Vertriebswegen, Productbenefits, möglichen Zielgruppen usw.
zu ermitteln. dieses prozedere wurde ebenfalls mehrfach kurs­
intern präsentiert und besprochen. nach einigen Korrekturstufen
sind wir dazu übergegangen diese ideensammlung auszudünnen.
Ziel ist es am ende dieses ausdünnungsvorganges ein möglichst
auf das wesentliche reduziertes geschäftsmodel entwickelt zu
haben.
Für uns haben sich zwei Kernzielgruppen herauskristallisiert.
auf der einen seite selbstverständlich die Fotografen. im laufe
der entwicklung wurden ursprüngliche Zielgruppen wie Fotostu­
denten und semiprofessionelle Fotografen von uns vom canvas
entfernt. auf seite der Fotosuchenden haben wir uns auf privat­
leute und kleine und/oder mittelständische unternehmen festge­
legt. da große unternehmen und agenturen sich eher aus anderen
Quellen bedienen und an eine solche seite andere ansprüche
hätten, haben wir uns dagegen entschieden, diese als Kernziel­
gruppe zu betrachten.

15. Business modell canvas

16. Business modell canvas

17. ZielgruppendeFinition

18. ZielgruppendeFinition
der vorangegangene arbeitsschritt hat lediglich zwei Kernziel­
gruppen übrig gelassen. sicher stammen die tatsächlichen Kun­
den nicht zu 100% aus den beschriebenen milieus, jedoch hilft
ein möglichst eng gefasstes Bild der Zielgruppe bei folgenden
untersuchungen. ausgehend von der ermittelten Hauptzielgrup­
pe wird ein Profil entwickelt, welches sowohl den Alltag dieser
Personengruppe beschreibt sowie deren gefühlstechnische Befind­
lichkeit. diese Überlegungen lassen schlussendlich Folgerung
zu, was der Zielgruppe gefällt und was nicht.
Klingt zunächst einmal profan – zugegeben.
aber gerade das ist es, was am ende den unterschied zwischen
dem macht, der etwas verkauft, und dem der auf seiner ware
sitzen bleibt. nur wenn ich weiß, was meine Zielgruppe denkt,
sagt, sieht, mag und hasst, kann ich sie „zielgruppengerecht“
bedienen.
desweiteren lassen sich wertvolle erkenntnisse für die struktur
und die gestaltung der internetseite gewinnen. diese erkennt­
nisse ließen sich natürlich auch auf viele andere medien adap­
tieren.

19. empatHY map

20. empatHY map
wer sein produkt verkaufen will, muss sich darüber bewusst
sein, wer die Zielgruppe dieses produktes ist und was diese
Zielgruppe will. man muss wissen, was sie fühlt, also was sie
mag und nicht mag, wovor sie angst hat und was ihr gefällt.
genau an dieser stelle setzt eine empathy map an. sie erlaubt,
dass man sich relativ schnell ein gutes Bild seiner Zielgrup­
pe machen kann. wie der name schon sagt, geht es dabei nicht um
empirische daten wie alter, einkommen u.s.w., sondern um die
Empfindungen und Gefühle.
in unserem Fall haben wir eine empathy map unserer Fotografen­
Klientel erstellt. die gewonnen erkenntnisse ließen einige
rückschlüsse auf die strukturierung und das layout der seite
zu. Das Bedürfnis der Zielgruppe nach Selbstdifferenzierung
führte dazu, dass wir den Fotografen die möglichkeit geben
wollten, ihre Tätigkeitsfelder von Anfang an klar zu definieren
und sich so von anderen abzugrenzen. auch ist diese erkenntnis
der grund dafür, dass wir einen ausgewählten Fotografen auf der
startseite vorstellen.
das Bedürfnis der Zielgruppe nach einer guten selbstdarstellung
ist in unserem Fall die argumentationsgrundlage für das redu­
zierte, professionelle erscheinungsbild der internetseite.

21. wireFrames

22. wireFrames
man spricht von wireframes bei der Konzeption von internet­
seiten. sie sind ein stellvertretender, schneller entwurf
einer internetseite. aufbau, inhaltliche gliederung und erste
gestalterische ansätze sind innerhalb von kurzer Zeit provi­
sorisch festgelegt. Wireframes sind also wie geschaffen für
einen Kurs, indem es um agile designprozesse geht.
Bevor jedoch erste Skizzen zum grafischen/visuellen Aufbau
unserer website entstanden, wurde zuerst gesammelt, was sinn­
voll für die Funktionalität der seite ist.
exemplarisch anhand der künftigen startseite sind wir den
umfang der inhalte durchgegangen und haben überlegt, was der
start der Fotoauftragsplattform benötigt, um gut für user zu
funtionieren. wie können wir für potentielle neukunden bei
Besuch der seite dazu bewegen, sich bei uns anzumelden? was
müssen wir dem registrierten user bieten, um einen schnellen
und komfortablen Zugang zu seinen inhalten zu ermöglichen?
welche Zusatznutzen können wir integrieren?
wie man links im Bild sieht, haben wir diese Fragen im team
diskutiert und die relevanten punkte strukturiert. anhand
dessen, sind dann unsere wireframes entstanden.

23. wireFrames
wireframes lassen sich jederzeit ohne
großen aufwand „umbauen“ und erlauben
es so, mit dem layout der seite auf neue
ereignisse/ergebnisse zu reagieren. wie
man an unserem wireframe sehen kann, ist
der aufbau der gesamten seite bereits
durchgeplant. die größe und position von
Boxen, Bildern sowie texten ist weitest­
gehend festgelegt und lässt dennoch
spielraum für detailverliebte design­
spielereien.

24. wireFrames
sion
erste e ntwurFsver

25. laYout

26. laYout
nachdem wir nun unsere Zielgruppe untersucht und einige
erkenntnisse aus dieser analyse gezogen hatten, war es an
der Zeit diese in einem layout umzusetzen. die ebenfalls im
vorhinein erstellen wireframes dienten dabei als grundlage
für den strukturellen aufbau.
Sämtliche Aufgaben die Gestaltung betreffend wurden innerhalb
des teams aufgeteilt und gesondert bearbeitet. in mehreren
gruppeninternen Besprechungen und Zwischenpräsentationen
innerhalb des Kurses wurden die ansätze und entwürfe optimiert
und weiterentwickelt.
die arbeitsbereiche umfassten unter anderem die logoentwick­
lung, die optimierung der seitenstruktur und der Farbwelt,
die Findung einer einheitlichen Bildsprache und Farbgebung
und natürlich das eigentliche layout der seite in dem alles
zusammen kam.
das erscheinungsbild der seite ist stark an der optik von
Profifotosoftware und Kameratechnik im allgemeinen orientiert.
dunkle Farben, mit wenigen Highlights und dezenten Farbakzenten
sorgen dafür, dass die gezeigten Bilder deutlich an leuchtkraft
und Farbwirkung gewinnen. die klare und aufgeräumte struktur
soll den professionellen charakter der seite vermitteln.

27. laYout
natürlich haben wir uns auch im weiteren
„Fotografie-Umfeld“ im Web umgeschaut. Was
machen die großen im Fotobereich, was
ist gut, was könnte ebenfalls vom stil
auch in unser Konzept passen? einige
(abschreckende) Beispiele haben wir links
als screenshots abgebildet.
schnell haben wir gemerkt, dass viele der
Beispiele zu nüchtern und technisch sind.
daher wurde bei unserem layout auf einen
anspruchsvollen grafischen Charakter
geachtet, der jedoch jedoch nicht in
Konkurrenz zu den Fotografien auf der
website steht.
Auf der folgenden Seite finden sich einige
arbeitsschritte auf dem weg zum fertigen
layout.

28. ergeBnisse
wurF
erst er FarBent
on
erste ent wurFsversi

29. ergeBnisse

30. ergeBnisse

31. ergeBnisse

32. ergeBnisse

33. ergeBnisse

34. ergeBnisse