GUI-Mockups in der Softwareentwicklung

4,511 views

Published on

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

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,511
On SlideShare
0
From Embeds
0
Number of Embeds
187
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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

    ×