GUI-Mockups in der Softwareentwicklung

4.476 Aufrufe

Veröffentlicht am

Kurze Präsentation über den Einsatz von Mockup-Tools in der Softwareentwicklung.

Veröffentlicht in: Technologie, News & Politik
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.476
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
190
Aktionen
Geteilt
0
Downloads
35
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • GUI-Mockups in der Softwareentwicklung

    1. 1. GUI-MOCKUPS in der SoftwareentwicklungScott McCloud: Understanding Comics (1993)
    2. 2. PROBLEME / AUFWAND &4*77=+$ 8#().#9$%$!"##$%$&()*+$ ,-./0(#0#1$ ,)2(2(34$ ;<*6=*>2$ 5#6#*7#$ :4"*(#$
    3. 3. PROBLEME / AUFWAND &4*77=+$ 8#().#9$%$!"##$%$&()*+$ ,-./0(#0#1$ ,)2(2(34$ ;<*6=*>2$ 5#6#*7#$ :4"*(#$ Man redet über Farben und Formen statt über Funktionen Zu Design hat jede(r) eine Meinung Entwickler müssen nicht Designer sein
    4. 4. LÖSUNGSANSATZ &4*77=+$ 8#().#9$%$!"##$%$&()*+$ ,-./0(#0#1$ ,)2(2(34$ ;<*6=*>2$ 5#6#*7#$ :4"*(#$ ?2/@=4$ A#7.+$ Vor der Programmierung wird ein Mockup der Software mit den gewünschten Funktionen diskutiert Ein Mockup enthält Anordnung, Seitenabfolge und Funktionen der Software Das eigentliche Design (Farben, Schriften, Grafiken) kann später (professionell) hinzugefügt werden
    5. 5. IN DER PERFEKTEN WELT... &?*00-+$ ,#*(-)#. 5606.!"##$%$&()*+$ =61>-?0$ 78*3-*96$ :;412(#2#<$ /-012340(#$ 34"4#)-+$ Rollenverteilung: wer übernimmt in einem Projekt die Rolle des Mockup- Gestalters? Projektleiter? Programmierer? Fachwissenschaftler? Dezidierter GUI Mitarbeiter? Kollaborativ?
    6. 6. STUFEN DERABSTRAKTION
    7. 7. PIXEL-PERFECT DESIGN
    8. 8. GROBE ANMUTUNG
    9. 9. WIREFRAME
    10. 10. WIREFRAME
    11. 11. WIREFRAME
    12. 12. DARUM WIREFRAMESMan wird früh gezwungen, sich über logischen Aufbau undFunktionen der Seite klar zu werden,ohne dass man dabei von konkretem Design abgelenkt wirdEs ist binnen Minuten erstelltAlternativen können schnell diskutiert / interaktiv in einerSitzung erstellt werdenSogar Nutzertests sind bereits möglich, zur Not mitPapierausdrücken
    13. 13. DREI STUFEN FÜRMOCKUPS - WERKZEUGE Pixel-perfect: Photoshop, GIMP Generelle Anmutung: PowerPoint, Keynote Wireframe: BalsamiqMockups, Firefox Pencil
    14. 14. VERFAHRENWerkzeugleisteOptionen
    15. 15. FIREFOX PENCIL PROJECTOpen source / läuft über Firefox Browser-Engine / Plattformübergreifend /unterschiedliche Stile (Windows, Wireframe, ...) / etwas träge in derBedienung / eingeschränkter Funktionsumfang
    16. 16. BALSAMIQ MOCKUPSMuss lizensiert werden / Adobe Air Framework /plattformübergreifend / großer Funktionsumfang /nur ein Design / flexibler Export
    17. 17. INTEROPERABILITÄTFirefox Pencil:XML Dateien / wenig Unterstützung andererClients / kann in Gruppen gut installiert werden /höhere LernkurveBalsamiq Mockups:XML Dateien / „Industriestandard“ (iPad Varianteetc.) / Lizenzpflichtig (SUB: 25 Lizenzen)Alle: Export als PDF, Grafiken
    18. 18. LINKShttp://balsamiq.com/products/mockupshttp://pencil.evolus.vn

    ×