responsive webdesign 

für grafiker und entscheider
typovision gmbh // 2015
©fotolia|goodluz
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
2
01 Einführung Re...
responsive webdesign
01 einführung.
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
4
01 Einführung Re...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
5
01 Einführung Re...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
definition.
Beim Responsive...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
definition.
Responsive Web ...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
8
01 Einführung Re...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
am anfang war ethan.
Prägu...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
am anfang war ethan.
„Resp...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
am anfang war ethan.
„Neue...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
am anfang war ethan.
Die b...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
Neu?
13
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
Nein!
14
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
rückbesinnung auf alte wer...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend.
Responsive Web...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend sondern notwend...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend sondern notwend...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend sondern notwend...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend sondern notwend...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend sondern notwend...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
22
01 Einführung R...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
abgrenzungen.
• Responsive...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
abgrenzungen.
• Responsive...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
25
01 Einführung R...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
* first
mobile first = conte...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
* first.
• Mobil expandiert...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
* first.
28
Quelle: http://...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
* first
„The absence of sup...
responsive webdesign
02 der klassische workflow im überblick
©unsplash|CalebGeorge
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
31
Konz...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
32
Quel...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
33
Quel...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
Der Sta...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
35
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
36
Konz...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
probleme.
Konzepti...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
probleme.
„Using p...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
probleme.
Ein ungl...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
probleme.
Technisc...
responsive webdesign
03 der neue workflow.
©unsplash
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
42
01 Der neue Wor...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
neuer workflow.
43
Sketch W...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
neuer workflow.
44
Sketch
W...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
45
01 Der neue Wor...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
46
• Stak...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
47
• Was ...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
48
Quelle...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
49
Quelle...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
50
• Glei...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
personas.
51
Reali...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
personas beispiel....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
customer journey.
...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider 54
Search
Search
Search
Search
Affiliate
Affiliat...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
55
01 Der neue Wor...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Atomic Design
• Zum Erstellen des Moodboards

d...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie....
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
agenda.
65
01 Der neue Wor...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Proto
typing
Linear Design
• Content Dummy mit ...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Prototyping
• Klickdummyerstellung mit HTML5 / ...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Device Testing
• Echte Geräte nutzen, keine Sim...
responsive webdesign
04 schätzmethoden.
©unsplash|CraigGarner
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
schätzen.
Schätzmethoden i...
responsive webdesign
05 verträge.
©unsplash|Breatherd
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Zusammenfassung ...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Vereinbarungen
•...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Design
• Erzeugu...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Inhalte und Bild...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Browsertests
• B...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Desktop Browsert...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Mobile Browserte...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Change / Feature...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Copyright
• Der ...
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Gesetzliches
• K...
responsive webdesign
06 tools im rwd-workflow.
©unsplash|AlejandroEscamilla
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
tools.
RWD-Tools für alle ...
vielen dank
bleiben sie mit uns in verbindung.
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
kontakt
typovision gmbh.
85
Referent
Sebastian ...
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign für Grafiker & Entscheider

935 Aufrufe

Veröffentlicht am

Hinter Responsive Webdesign steckt mehr, als eine Desktop-Website in eine mobile Ansicht zu quetschen. Der alte Workflow "Auftrag bekommen --> Recherche --> Design erstellen --> Abnahme ---> Design umsetzen" funktioniert heute nicht mehr. Es muss ein neuer Prozess etabliert werden, um rentabel zu bleiben und alle Anforderungen abzudecken. Alle Beteiligten müssen von Anfang an in den Prozess eingebunden werden und vor allem auch enger zusammenarbeiten. Zudem gilt es frühzeitige und häufige Testphasen einzuführen, neue Implementierungs-Strategien zu finden u.v.m.

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
935
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
21
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign für Grafiker & Entscheider

  1. 1. responsive webdesign 
 für grafiker und entscheider typovision gmbh // 2015 ©fotolia|goodluz
  2. 2. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 2 01 Einführung Responsive Webdesign 02 Der klassische Workflow im Überblick 03 Der neue Workflow 04 Schätzmethoden im RWD-Workflow 05 Verträge im RWD-Workflow 06 RWD-Tools für alle Prozess-Schritte
  3. 3. responsive webdesign 01 einführung.
  4. 4. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 4 01 Einführung Responsive Webdesign 1.1 Definition 1.2 Geschichte 1.3 Abgrenzungen 1.4 Mobile First / Content First
  5. 5. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 5 01 Einführung Responsive Webdesign 1.1 Definition 1.2 Geschichte 1.3 Abgrenzungen 1.4 Mobile First / Content First
  6. 6. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign definition. Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können. 6 http://de.wikipedia.org/wiki/Responsive_Webdesign
  7. 7. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign definition. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. 7 http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  8. 8. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 8 01 Einführung Responsive Webdesign 1.1 Definition 1.2 Geschichte 1.3 Abgrenzungen 1.4 Mobile First / Content First
  9. 9. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign am anfang war ethan. Prägung von Ethan Marcotte 2010 auf A List Apart 9 ETHAN MARCOTTE May 25, 2010
 http://alistapart.com/article/responsive-web-design 1. Ein flexibles Grid 2. Flexible Bilder und Videos 3. Media Queries
  10. 10. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign am anfang war ethan. „Responsive Architecture“ 10 ETHAN MARCOTTE May 25, 2010
 http://alistapart.com/article/responsive-web-design
  11. 11. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign am anfang war ethan. „Neue Denkweise“ 11 ETHAN MARCOTTE May 25, 2010
 http://alistapart.com/article/responsive-web-design
  12. 12. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign am anfang war ethan. Die bisher statischen Websites sind nicht in der Lage auf die steigende Anzahl von Displaygrössen angemessen zu reagieren. Es ist also Zeit, sich von alten Denkmustern zu lösen, und Websites flexibel und reaktionsfähig zu gestalten. 12 ETHAN MARCOTTE May 25, 2010
 http://alistapart.com/article/responsive-web-design
  13. 13. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign Neu? 13
  14. 14. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign Nein! 14
  15. 15. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign rückbesinnung auf alte werte. • HTML Dokumente sind von Natur aus reaktionsfähig • Gestaltungsprozesse aus der Printwelt rauben Flexibilität und machen Webseiten zu starren Seiten • falsche Tools wie Photoshop • bevor wir anfangen treffen wir Annahmen über die Dimension 15
  16. 16. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign kein trend. Responsive Webdesign ist kein Trend. Es ist ein evolutionärer Schritt. 16 Quelle: Christoph Zillgens, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, München, 2013, S.8-10
  17. 17. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign kein trend sondern notwendigkeit. 17 Quelle: http://opensignal.com/reports/ 2014/android-fragmentation/
  18. 18. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign kein trend sondern notwendigkeit. 18 Quelle: http://opensignal.com/reports/ 2014/android-fragmentation/
  19. 19. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign kein trend sondern notwendigkeit. 19 Quelle: http://opensignal.com/reports/ 2014/android-fragmentation/
  20. 20. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign kein trend sondern notwendigkeit. 20
  21. 21. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign kein trend sondern notwendigkeit. Statt wie die Bekleidungsindustrie die sich ständig wandelnden Körpermaße in neue Konfektionsgrößen zu pressen, sollten wir uns einer smarteren Methode zuwenden. 21 Quelle: Christoph Zillgens, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, München, 2013, S. 12
  22. 22. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 22 01 Einführung Responsive Webdesign 1.1 Definition 1.2 Geschichte 1.3 Abgrenzungen 1.4 Mobile First / Content First
  23. 23. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign abgrenzungen. • Responsive vs. Adaptive • Mobile Apps 23 http://www.elezea.com/2013/11/rwd-content-modules/
  24. 24. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign abgrenzungen. • Responsive vs. Adaptive • Mobile Apps 24 http://www.elezea.com/2013/11/rwd-content-modules/ Quelle:https://dribbble.com/shots/279619-Responsive-Design Adaptive Responsive
  25. 25. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 25 01 Einführung Responsive Webdesign 1.1 Definition 1.2 Geschichte 1.3 Abgrenzungen 1.4 Mobile First / Content First
  26. 26. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign * first mobile first = content first 26
  27. 27. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign * first. • Mobil expandiert rasant • Mobil hilft zu fokussieren • Mobil bietet erweiterte Fähigkeiten • Gilt für Planung und Entwicklung 27
  28. 28. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign * first. 28 Quelle: http:// www.areamobile.de/news/ 24862-android-extreme- fragmentierung-aber-das- muss-nicht-schlecht-sein
  29. 29. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign * first „The absence of support for @media queries is in fact the first @media query“ 29 Quelle: http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu BRYAN RIEGER
  30. 30. responsive webdesign 02 der klassische workflow im überblick ©unsplash|CalebGeorge
  31. 31. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow klassisch. 31 Konzept Design Technische Umsetzung Deploy Support
  32. 32. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow klassisch. 32 Quelle:http://projectcartoon.com/cartoon/434
  33. 33. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow klassisch. 33 Quelle:http://projectcartoon.com/cartoon/434
  34. 34. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow klassisch. Der Standish Group Report „Chaos“ 2014 • Eine kleine Firma gibt im Jahr ca. 384.646 € für IT Projekte aus • > 30% der IT Projekte werden vor der Fertigstellung gecancelt • < 20% werden in time & budget fertig gestellt • 45% der Projekte haben Mehrkosten bis 50%, 30% zwischen 50 - 100% • > 35% dauern mehr als doppelt so lange wie geplant • > 25% wurden mit nur 25-49% der ursprünglich definierten Features und Funktionen umgesetzt 34
  35. 35. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow klassisch. 35
  36. 36. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow klassisch. 36 Konzept Design Technische Umsetzung Deploy Support
  37. 37. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow probleme. Konzeption • Konzeption soll Kosten minimieren • Tabelle geht von normalem Prozess aus • Lorem Ipsum != echter Content • Kunden ändern Anforderungen, das ist normal 37 Entdeckung in Projektphase Aufwand in Stunden Konzeption 0,25 Technisches Pflichtenheft 1 Implementierung 4 Test 8 Produktivnutzung 16
  38. 38. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow probleme. „Using photoshop / fireworks for responsive webdesign ist like bringing a knife to gunfight“ 38 Andy Clarke Quelle: https://twitter.com/lebedoka/status/312123620774264832
  39. 39. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow probleme. Ein unglaublich echtes Beispiel aus der Praxis • 3 Designvorschläge • 30 Seitentypen • 3 Breakpoints (4 Darstellungen) • 3 * 30 * 4 = 360 PSD Layouts => ca. 100.000 € 39 Erlebt im Agenturalltag der typovision bei Gesprächen mit einem potentiellen Partner.
  40. 40. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow probleme. Technische Umsetzung • frühe Projektphase = hohe Schätzunschärfe • hohe Schätzunschärfe = hohes Projektrisiko • Unstimmigkeiten im Pflichtenheft führen zu 
 Fehlern, die oft erst beim Test auffallen, und 
 somit zu höheren Kosten 40
  41. 41. responsive webdesign 03 der neue workflow. ©unsplash
  42. 42. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 42 01 Der neue Workflow 1.1 Planung 1.2 Content-Strategie 1.3 Iterativer Zylkus Design/Entwicklung
  43. 43. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign neuer workflow. 43 Sketch Wireframe Visual
 Design Prototype Test
  44. 44. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign neuer workflow. 44 Sketch Wireframe Visual
 Design Prototype Test Iteratives Design & Entwicklung UX, Visual, Dev Content Strategy Content Planner, UX, Visual, Tech User Research User Planner, UX RWD Prototype Prototype handover to client UX, Visual, Tech
  45. 45. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 45 01 Der neue Workflow 1.1 Planung 1.2 Content-Strategie 1.3 Iterativer Zylkus Design/Entwicklung
  46. 46. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow planung. 46 • Stakeholder Matrix (wer entscheidet was) • Projektziel • Breakpoints definieren (Deviceklassen, sehr wichtig!) • Liste von Devices und Browser die betestet werden sollen (Top 5 / 3) • bestehende Dokumente analysieren (CI-Manual, Guidelines, Verträge, …) • Moodboard-Briefing (Look & Feel) • Vertrag Rahmen- bedingungen
  47. 47. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow planung. 47 • Was an der bisherigen Website war schlecht? Top3 (alle Stakeholder) • Was an der bisherigen Webseite war gut? Top3 (alle Stakeholder) • Was ist das exakte Ziel der geplanten Website? • Was sind die nachgelagerten Ziele der geplanten Website? • Welche Probleme soll die Website lösen und welche Sehnsüchte soll sie erfüllen? • Auf welche Kunden soll die Website fokussieren? (Fokusgruppen, Zielgruppen) • Welche Werte werden vermittelt? • Welches Produkt / Thema steht im Mittelpunkt? Ziel- definition
  48. 48. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow planung. 48 Quelle:http://www.bentleymotors.com/en.html Ziel- definition
  49. 49. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow planung. 49 Quelle:http://www.skoda-auto.de/ Ziel- definition
  50. 50. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow planung. 50 • Gleiches Ziel • Unterschiedliche Strategie
 —> Unterschiedliche Zielgruppen müssen 
 unterschiedlich angesprochen werden Ziel- definition
  51. 51. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow personas. 51 Realistischer Name die Persona soll nicht zur Comicfigur werden Foto der Person ebenfalls ein realistisches Demographische Information Alter, Geschlecht, Ausbildung, Familienstand Beruf und Hauptaufgaben Ziele, Wünsche, Erwartungen, Bedürfnisse z.B. „benötigt Infos zur schnellen Entscheidungsfindung“ Vorlieben, Abneigungen, Hobbies evtl. ein Zitat, das einen wichtigen Aspekt der Persona zum Ausdruck bringt. User Research
  52. 52. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow personas beispiel. 52 • Elmar, 43 Jahre, Männlich • „Technischer Leiter“ • Firma: Börsennotiertes Unternehmen (z.B. MTU, FIT, ...) • Slogan: „Ich will einen kompetenten Dienstleister der mir wenig Probleme bereitet“ • Ziele: „Fachwissen muss vorhanden sein. Die müssen was von Security verstehen und dürfen keine Sicherheitslöcher reißen.“ • Bedürfnisse: „Die verwendete Technologie muss im Firmenwissen vorhanden sein.“ • Wünsche: „Ich will einen Ansprechpartner auf meinem Niveau.“ • Einstellungen: „Um 17 Uhr will ich zu Hause bei Frau und Kind sein und in der Nacht ruhig schlafen können - mit dem Wissen: Da brennt nix an.“ • Verhalten: „Konzentriert sich auf Kompetenz-Beweise und will schnell zum Ziel kommen.“ • Erwartungen: „Keine nervige Werbung. Mal sehen, was die so drauf haben. Die Technologie kann ich bestimmt auf der Site ausprobieren.“ Bildquelle:iStock User Research
  53. 53. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow customer journey. 53 Phase 1 Awareness Das Bewusstsein für das Produkt wird geweckt (lnspiration) Phase 2 Favorability Das lnteresse für das Produkt wird verstärkt (Favorisierung) Phase 3 Consideration Der Kunde erwägt den Kauf des Produktes (Wunsch) Phase 4 Intent to purchase Die Kaufabsicht wird konkret (Anstoß) Phase 5 Conversion Das Produkt wird gekauft (Umsetzung) User Research
  54. 54. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider 54 Search Search Search Search Affiliate Affiliate Affiliate Affiliate Facebook Face- book Facebook Face- book Display Display Display Display Retarge ting Retarge ting Retarget ing Retarget ing Trigger & Awareness Research & Compare Conversion Loyalty & Retention User Research responsive webdesign workflow customer journey.
  55. 55. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 55 01 Der neue Workflow 1.1 Planung 1.2 Content-Strategie 1.3 Iterativer Zylkus Design/Entwicklung
  56. 56. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 56 • Eine Website existiert ausschließlich aufgrund ihres Contents • Daher muss dem Content die erste und ungeteilte Aufmerksamkeit zugeteilt werden • Design hat in dieser Phase überhaupt nichts zu suchen! • Es geht darum, den Content zielgruppengerecht aufzubereiten • Man braucht eine umfassende Content-Strategie • Es geht darum die richtigen Inhalte dem User auszuliefern Content Strategy
  57. 57. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 57 Content Management Geschäfts- Strategie SEO Content-Erstellung Informations- Architektur User Experience Marketing Content Strategie Content Strategy
  58. 58. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 58 Content-Strategie • Ziele & Zielgruppen • Content-Inventar erstellen; Content-Lücken erkennen • Migrations-Plan erstellen • Kernbotschaften definieren • Themen festschreiben (was interessiert die Zielgruppe?) • Metadaten-Strukur aufstellen • Styleguide, Vorlagen erstellen • Editorial Workflow festlegen • Verantwortlichkeiten bestimmen (wer erstellt, nimmt ab, pflegt den Content?) • Veröffentlichungs-Kalender schreiben • Vorgehen für Qualitätskontrolle, Umgang mit Nutzerfeedback definieren • Analyse der Zugriffe und der Bewegungspfade auf der Site planen Content Strategy
  59. 59. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 59 Content Reference Wireframe • Wireframe für jeden Breakpoint anlegen • Jeden Contenttyp aus dem Inventory im Wireframe referenzieren • Jeden Seitentyp anlegen • Lediglich Rechtecke, kein Design! • Mobile First! • Jeder Contenttyp aus dem Inventory muss seinen Platz im Wireframe finden Main nav Logo Search & Links Headline Content Footer Slider Content Strategy
  60. 60. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 60 Content erstellen • Plain Text • Markup mit markdown oder ähnlichem erstellen • Unterschiedliche Contenttypen identifizieren • Das Ergebnis dann in HTML konvertieren, ergibt den Content Dummy • Beim Erstellen Personas / Customer Journeys etc. berücksichtigen Content Strategy
  61. 61. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 61 Moodboard • Auf dem Moodboard werden die visuellen Stile und Elemente entwickelt • Es finden sich Icons, Farbwelten, Styles von Formularfelder oder Schriftarten und Stile • Das Moodboard wird mit HTML/CSS entwickelt • Layouts werden keine gestaltet / entwickelt. Nur Design! Quelle:http://allypalanzi.com/vox.html Content Strategy
  62. 62. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider Atomic Design • Zum Erstellen des Moodboards
 die einzelnen Elemente 
 aus der Elementtabelle 
 nutzen, und so zu Molekülen 
 und Oragnismen 
 zusammenbauen… responsive webdesign workflow content-strategie. 62 Quelle:http://de.wikipedia.org/wiki/Periodensystem Content Strategy
  63. 63. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 63 Quelle:http://madebymike.com.au/html5-periodic-table/ Atomic Design • Zum Erstellen des Moodboards
 die einzelnen Elemente 
 aus der Elementtabelle 
 nutzen, und so zu Molekülen 
 und Oragnismen 
 zusammenbauen… Content Strategy
  64. 64. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign workflow content-strategie. 64 Quelle:http://de.slideshare.net/bradfrostweb/atomic-design Atomic Design • Zum Erstellen des Moodboards
 die einzelnen Elemente 
 aus der Elementtabelle 
 nutzen, und so zu Molekülen 
 und Oragnismen 
 zusammenbauen… Content Strategy
  65. 65. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign agenda. 65 01 Der neue Workflow 1.1 Planung 1.2 Content-Strategie 1.3 Iterativer Zylkus Design/Entwicklung
  66. 66. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider Proto typing Linear Design • Content Dummy mit Styles aus Moodboard anreichern • keinerlei Positionierungen, rein linear • Im Ergebnis sieht man nun, wie der Content Dummy mit echtem Content und Styles ausschaut responsive webdesign workflow iterativer zyklus. 66 Sketch Wireframe Visual
 Design Prototype Test Iteratives Design & Entwicklung UX, Visual, Dev
  67. 67. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider Prototyping • Klickdummyerstellung mit HTML5 / CSS3 / JS • führt iterativ zum finalen Layout • Designer UND Kunde müssen einbezogen werden responsive webdesign workflow iterativer zyklus. 67 Iteratives Design & Entwicklung UX, Visual, Dev Proto typing 67 Sketch Wireframe Visual
 Design Prototype Test
  68. 68. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider Device Testing • Echte Geräte nutzen, keine Simulatoren • Open Device Labs responsive webdesign workflow iterativer zyklus. 68 Iteratives Design & Entwicklung UX, Visual, Dev Proto typing 68 Sketch Wireframe Visual
 Design Prototype Test
  69. 69. responsive webdesign 04 schätzmethoden. ©unsplash|CraigGarner
  70. 70. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign schätzen. Schätzmethoden im RWD-Workflow • RWD ist in der Entwicklung nicht teurer wie der alte Prozess • Man schätzt FE Entwicklung * 2 • Allerdings hat RWD einen stark erhöhten Consultingaufwand, da der Kunde in der Regel mit dem Prozess überhaupt nicht vertraut ist 70
  71. 71. responsive webdesign 05 verträge. ©unsplash|Breatherd
  72. 72. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Zusammenfassung / Erwartungen • Kundendaten • Agentur / Freiberuflerdaten • Projektziel • Deadlines 72
  73. 73. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Vereinbarungen • Kunde muss die Arbeit überprüfen und Feedback nach einem kurzen Zeitraum geben • Deadlines gibt es für beide Vertragsparteien, Auftraggeber und Auftragnehmer. Und beide müssen auch daran gebunden werden. • Kunde willigt in die Zahlungsbedingungen ein 73
  74. 74. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Design • Erzeugung von „Look-and-feel Designs“ • Erzeugung von flexiblen Layouts welche sich an viele unterschiedliche Geräte und Screen-Grössen anpassen • Der Design Prozess ist iterativ • Vorwiegender Gebrauch von HTML5 und CSS3, anstatt Mockups von jedem Template • Statische Visuals (Styletiles) werden nur benutzt um das Look-and-Feel anzudeuten 74
  75. 75. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Inhalte und Bilder • Der Kunde ist verantwortlich für die Zulieferung von jeglichen Inhalten • Die Agentur ist nicht für die Auswahl, das Aufbereiten, Konvertieren oder Aufnehmen von • Falls notwendig, kann ein eigenes Angebot dafür erstellt werden 75
  76. 76. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Browsertests • Browsertesting bedeutet nicht, das die Webseite in jedem Browser identisch aussehen muss • Browsertesting bedeutet, sicherzustellen das die User Experience eines Designs muss erlebbar sein auf einem Device mit bestimmten Möglichkeiten. 76
  77. 77. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Desktop Browsertests • Getestet wird mit folgenden Browsern • Apple, Safari 6.1.0 • Apple, Chrome 10.0 • ….. • Folgende Browser werden NICHT getestet • Windows, IE, 8.1 77
  78. 78. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Mobile Browsertests • Getestet wird mit folgenden Browsern • Android 4.1 / Chrome / 6.0.5 • iOS 7.0.x / Safari • xxx / yyy / zzz • Folgende Browser werden NICHT getestet • Blackberry OS /QNX, Symbian, ... (any Browser) 78
  79. 79. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Change / Feature Requests • Wir können grundsätzlich nicht empfehlen das Projekt auf Basis eines Festpreises abzurechnen.
 Der Prozess ist sehr agiler, und Anpassungen vom Kunden sind während des Prozesses gewünscht.
 Bei einem Festpreis muss für jede Anpassung ein extra Angebot erstellt werden. Die ca. 4-6h Aufwand für jedes Angebot (inkl. Buchhaltung etc.) müssen jeweils mit einkalkuliert werden. • Im anderen Fall gibt es ein Konzept und ein Pflichtenheft, auf dessen Basis geschätzt und ein Festpreis abgegeben wurde • Somit wird bei jedem Anpassungswunsch ein neues Angebot erstellt. 79
  80. 80. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Copyright • Der Kunde garantiert das er die Erlaubnis für alle Assets hat, welche er einem für die Integration zukommen lässt. • Der Kunde hat das alleinige Recht an den erzeugten Elementen, aber die Agentur hat das Recht an der einzigartigen Kombination daraus • Die Agentur gibt dem Kunden für die Kombination eine Lizenz 80
  81. 81. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign verträge. Gesetzliches • Keine Programmierleistung ist fehlerfrei. Wir versuchen annähernd fehlerfrei zu arbeiten, aber wir können nicht haftbar gemacht werden gegenüber dem Kunden oder Dritten, für Schäden, inkl. Umsatzverlusten, Einsparungen oder andere indirekte, sich ergebende oder spezielle Schäden. Auch wenn der Kunde die Agentur darauf aufmerksam gemacht hat. • Die Agentur behält sich das Recht vor das Projekt zu referenzieren. • Die Agentur kann nicht für Open Source Bugs haftbar gemacht werden. 81
  82. 82. responsive webdesign 06 tools im rwd-workflow. ©unsplash|AlejandroEscamilla
  83. 83. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider responsive webdesign tools. RWD-Tools für alle Prozess-Schritte • Adobe Edge Reflow • ThinkinTags • Foundation 4 • Bootstrap • Responsive Patterns (http:// bradfrost.github.com/this-is-responsive/ patterns.html) • Axure (www.axure.com) • Balsamiq (https://balsamiq.com) • Get Wirefy (http://getwirefy.com (Atomic Design)) • Typostrap • Markdown • Pandoc • Patternlab (http://patternlab.io/) 83
  84. 84. vielen dank bleiben sie mit uns in verbindung.
  85. 85. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider kontakt typovision gmbh. 85 Referent Sebastian Böttger Geschäftsführer typovision GmbH
 
 Kontakt typovision GmbH
 Lindwurmstr. 109
 80337 München
 
 Telefon +49 89 4520 593-0
 Fax +49 89 4520 593-29
 E-Mail info@typovision.de
 www.typovision.de Social Media Twitter www.twitter.com/typovision Facebook www.facebook.com/typovision
 Blog typoblog.de XING www.xing.com/companies/typovisiongmbh
 Slideshare www.slideshare.net/typovision LinkedIn www.linkedin.com/company/2038844 Google+ www.google.com/+TypovisionDe

×