LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

1,112 views
972 views

Published on

Die mobile Nutzung des Internets stellt Webentwickler vor neue Herausforderungen bei der Planung und Entwicklung von Webseiten. Der damit einhergehende, sich verändernde Workflow bedingt eine frühzeitige Verlagerung der Konzept- und Entwurfsarbeit in den Browser. Dieser Idee folgend entwickelt Dirk Jesse seit ca. 4 Jahren mit "Thinkin' Tags" eine browserbasierte Entwicklungsumgebung zur Erstellung von Wireframes, Mockups und Prototypen.

Der Vortrag gibt Einblicke in die Konzeption und Entwicklung der Benutzeroberfläche von "Thinkin' Tags" aus dem Blickwinkel der Usability. Daher geht es nicht um die technische Umsetzung, sondern um Fragen, wie z.B. ein visuell orientierter Workflow robust gestaltet werden kann?
Wie unterscheidet sich die Arbeit in einer Webapplikation von der Arbeit mit klassischen Desktoptools?
Wodurch wird eine Benutzeroberfläche nicht nur performant, sondern auch nutzerfreundlich?

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,112
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

  1. 1. LESSONS LEARNED FROM THE DESIGN
 OF AN USER INTERFACE DIRK JESSE // WEBKONGRESS ERLANGEN 2014
  2. 2. MOTIVATION A BETTER WORKFLOW FOR THE RESPONSIVE WEB
  3. 3. Photoshop InDesign Fireworks Powerpoint Keynote Sublime Text Coda Espresso Aptana Studio Netbeans Komodo Edit
  4. 4. Medienbruch […] Wechsel des informationstragenden Mediums innerhalb eines Informationsbeschaffungs- oder - verarbeitungsprozesses. Wikipedia
  5. 5. VISION STREAMLINE WEBDESIGN WORKFLOW
  6. 6. HTML5 CSS3 JavaScript ENTWURFSWERKZEUGE
  7. 7. „Build designs in the environment where they ultimately live … right from the beginning.“ Meagan Fisher // Designing for today's web: working in a post-psd world! BEYOND TELLERRAND 2013
  8. 8. Inhalte und Struktur Funktion und Usability Typographie und Design Rendering Qualität und Performance
  9. 9. INSPIRATION THINGS THAT I ENJOY WORKING WITH
  10. 10. HTML Adobe Dreamweaver ! • DOM Brotkrümelnavigation • kontextabhängige Dialoge
  11. 11. CSS Sublime Text ! • Syntax Highlighting • CSS Hinting
  12. 12. Debugging Firebug! ! • CSS Cascade View • Live Editing (HTML/CSS) • Trigger for Pseudo-Classes
  13. 13. UI/UX Adobe Lightroom! ! • Dunkles User Interface • Modul Navigation • Panel Layout
  14. 14. KONZEPTION & UMSETZUNG Von der Idee zur Web Applikation
  15. 15. Bildbearbeitung
  16. 16. Bildbearbeitung
  17. 17. Bildbearbeitung 85%5% 10%
  18. 18. Web Design
  19. 19. Web Design
  20. 20. Web Design 25%25% 50%
  21. 21. Web Design
  22. 22. Web Design 50%50%
  23. 23. DOM Navigation
  24. 24. CSS Inspector
  25. 25. CSS Editing & Hinting CSS Texteditor
  26. 26. CSS Editing & Hinting
  27. 27. Strukturplanung Layoutkonzeption Design Visueller Workflow <header> <main> <footer> <article> <article> <aside> article article aside header footer main
  28. 28. Demo: Visueller Workflow
  29. 29. UI FARBSCHEMA
  30. 30. KONTRAST
  31. 31. FARBE
  32. 32. UI Farbkonzept
  33. 33. UI Farbkonzept
  34. 34. UI Farbkonzept (neu)
  35. 35. UI Farbkonzept (neu)
  36. 36. USER EXPERIENCE Verdammt nochmal, wie bekomme ich … ?
  37. 37. Demo: Dateiauswahl Desktop Umgebung Browser
  38. 38. Content Aware Tabs Highlighting
  39. 39. Custom Form Elements Animierte Checkboxen
  40. 40. Unmittelbares UI Feedback Überprüfung von CSS Selektoren
  41. 41. STATUS QUO Thinkin‘ Tags v0.5 (alpha)
  42. 42. VIELEN DANK www.thinkintags.com ! @djesse
 plus.google.com/+DirkJesse

×