Als PDF, PPTX herunterladen
![Was ist ein
Prototyp?
(es zeigt) "die Darstellung [...] des
Systems, welche [...] für eine Beurteilung
verwendet werden kann."](https://image.slidesharecdn.com/iak12responsivedesingcybay-120513031709-phpapp02/85/Responsive-Design-Vorgehen-und-Fallstricke-49-320.jpg)
Hochgeladen vonMarcel Zimmermann
Responsive Design - Vorgehen und Fallstricke
Das Dokument behandelt die Herausforderungen und Aspekte des Responsive Designs, einschließlich der Universalität, Teamdynamik und des Prototypings. Es werden verschiedene Use Cases und Navigationsstrukturen vorgestellt, sowie Methoden zur effektiven Umsetzung und den Umgang mit Hindernissen im Designprozess. Fokus liegt unter anderem auf der Wichtigkeit von teamübergreifender Kommunikation und einem klaren Verständnis der Benutzerbedürfnisse.
Responsive Design - Vorgehen und Fallstricke
- 1.
- 2. Wer? Marcel Zimmermann - SeniorKonzepter www.cybay.de @dicomar @cybaynewmedia
- 3. lese ich später habe ich gelesen 1996 2012
- 4. lese ich später habe ich gelesen 1996 2012
- 5.
- 8. Hürde Idee Erfolg
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 16. Allgemeingültig? Gibt es nichtnoch den „Mobile“ UseCase? Auflösungs- vs. Device-optimiert? Muss nun alles „neu“ gemacht werden?
- 17.
- 18.
- 19.
- 20.
- 21. Use Case Ich suche ein bestimmtes Produkt Produktsuche Produkt 1 Startseite
- 22. Use Case Kontakt- formular Ich suche ein bestimmtes Produkt Produktsuche Produkt 1 Startseite Ansprech- partner Finde ich alleine eine Lösung? FAQ Anleitung
- 23. Use Case Es ist 22h, bitte per Mail oder Rückruf Kontakt- formular Ich suche ein bestimmtes Produkt Produktsuche Produkt 1 Startseite Ansprech- partner Finde ich alleine eine Lösung? FAQ Anleitung
- 24. Use Case Es ist 22h, bitte per Mail oder Rückruf Kontakt- formular Ich suche ein bestimmtes Produkt Produktsuche Produkt 1 Startseite Ansprech- partner Login meine Finde ich alleine Produkte eine Lösung? Ich bin unterwegs und FAQ brauche eine Lösung zum Anleitung Produkt
- 25. Use Case Es ist 22h, bitte per Mail oder Rückruf Kontakt- formular Ich suche ein bestimmtes Produkt Produktsuche Produkt 1 Startseite Ansprech- partner Login meine Finde ich alleine Produkte eine Lösung? Ich bin unterwegs und FAQ brauche eine Lösung zum Anleitung Produkt
- 26. Haupt Navigation Related Related 1 1 Related 2 Related 1 Lokale Related 2 Content Navigation Content Related 1 Related 2 Related Related 1 2
- 27. Haupt Navigation Related Related 1 1 Related 2 Related 1 Lokale Related 2 Content Navigation Content Related 1 Related 2 Related Related 1 2 FAQ Ansprech- Kontakt- Anleitung partner formular
- 28. Haupt Navigation Haupt Navigation Quick Navigation Related 2 Lokale Related 2 Content Content Navigation Related 1 Related 1 Related 1 Related 2 Related 1 Related 2 Lokale Navigation
- 29.
- 30. Haupt Navigation Related 2 Lokale Related 2 Content Navigation Related 1 Related 1
- 31. Haupt Navigation Related 2 Lokale Related 2 Content Navigation Related 1 Related 1
- 32. Haupt Navigation Haupt Navigation Quick Navigation Related 2 Lokale Related 2 Content Content Navigation Related 1 Related 1 Related 1 Related 2 Related 1 Related 2 Lokale Navigation
- 33. Haupt Navigation Related 2 Lokale Related 2 Content Navigation Related 1 Related 1
- 34. Haupt Navigation Haupt Navigation Related 2 Related 1 Lokale Related 2 Lokale Content Content Related 1 Navigation Navigation Related 1 Related 1 Related 1 Related 2 Related 2
- 35. Haupt Navigation Related 1 Lokale Content Related 1 Navigation Related 1 Related 2 Related 2
- 36. Haupt Navigation Related 1 Lokale Content Related 1 Navigation Related 1 Related 2 Related 2
- 37. Haupt Navigation Haupt Navigation Quick Navigation Related 1 Lokale Content Content Related 1 Navigation Related 1 Related 1 Related 2 Related 2 Related 2 Related 2 Related 1 Related 1 Related 2 Lokale Navigation
- 38. Haupt Navigation Haupt Navigation Quick Navigation Related 1 Lokale Content Content Related 1 Navigation Related 1 Related 1 Related 2 x Related 2 Related 2 Related 2 Related 1 Related 1 Related 2 Lokale Navigation
- 39. Haupt Navigation Haupt Navigation Quick Navigation Related 1 Lokale Content Content Related 1 Navigation Related 1 Related 1 Related 2 x Related 2 Related 2 Related 2 Related 1 Related 1 Related 2 Lokale Navigation
- 40. Haupt Navigation Haupt Navigation Quick Navigation Related 1 Lokale Content Content Related 1 Navigation Related 2 Related 1 Related 1 Related 2 x Related 2 Related 2 Related 2 Related 1 Related 1 Related 2 Lokale Navigation
- 41. Haupt Navigation Haupt Navigation Quick Navigation Related 1 Lokale Content Content Related 1 Navigation Related 1 Related 1 Related 2 x Related 2 Related 2 Related 2 Related 2 Related 1 Related 1 Related 2 Lokale Navigation
- 42. Haupt Navigation Haupt Navigation Haupt Navigation Quick Navigation Quick Navigation Related 1 Lokale Content Content Content Related 1 Navigation Related 1 Related 1 Related 1 Related 2 Related 1 x Related 2 Related 1 Related 2 Related 2 Related 2 Related 1 Related 2 Related 1 Related 2 Related 2 Related 2 Lokale Navigation Lokale Navigation
- 46. Konzeption Team Design Technik
- 47.
- 48.
- 49. Was ist ein Prototyp? (eszeigt) "die Darstellung [...] des Systems, welche [...] für eine Beurteilung verwendet werden kann."
- 50. Prototyping Rapid Prototyping Visuelles RapidPrototyping Visuelles Responsive Rapid Prototyping ok.. wie machen wir das?
- 51. Paper Axure HTML
- 52. Simulation User Flow geht schnell kostet wenig dauert lange kostet viel
- 53. Simulation View Port geht schnell ist genau dauert lange ungenau
- 54. Simulation View Port geht schnell ist genau dauert lange ungenau
- 55. Simulation View Port geht schnell ist genau dauert lange ungenau
- 56. Simulation View Port geht schnell ist genau dauert lange ungenau
- 57. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
- 58. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
- 59. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
- 60. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
- 61. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
- 62.
- 64.
- 65. Patterns doppeltes Markup gleiches Markup Column Drop Layout Shift
- 66. Column Drop &Layout Shift
- 67. Column Drop &Layout Shift
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74. Es ist eineMomentaufnahme
- 75.
- 76. Merken Visuell mit technischkorrekter Sprache mobile first, coding first Was wir brauchen Relativität zum eigenen Wissen Relativität zur eigenen Rolle