LESSONS LEARNED FROM THE DESIGN

OF AN USER INTERFACE
DIRK JESSE // WEBKONGRESS ERLANGEN 2014
MOTIVATION
A BETTER WORKFLOW FOR THE RESPONSIVE WEB
Photoshop
InDesign
Fireworks
Powerpoint
Keynote
Sublime Text
Coda
Espresso
Aptana Studio
Netbeans
Komodo Edit
Medienbruch […] Wechsel des
informationstragenden Mediums innerhalb
eines Informationsbeschaffungs- oder -
verarbeitungspr...
VISION
STREAMLINE WEBDESIGN WORKFLOW
HTML5 CSS3 JavaScript
ENTWURFSWERKZEUGE
„Build designs in the environment
where they ultimately live … right
from the beginning.“
Meagan Fisher // Designing for t...
Inhalte und Struktur
Funktion und Usability
Typographie und Design
Rendering Qualität und Performance
INSPIRATION
THINGS THAT I ENJOY WORKING WITH
HTML
Adobe Dreamweaver
!
• DOM Brotkrümelnavigation
• kontextabhängige Dialoge
CSS
Sublime Text
!
• Syntax Highlighting
• CSS Hinting
Debugging
Firebug!
!
• CSS Cascade View
• Live Editing (HTML/CSS)
• Trigger for Pseudo-Classes
UI/UX
Adobe Lightroom!
!
• Dunkles User Interface
• Modul Navigation
• Panel Layout
KONZEPTION & UMSETZUNG
Von der Idee zur Web Applikation
Bildbearbeitung
Bildbearbeitung
Bildbearbeitung
85%5% 10%
Web Design
Web Design
Web Design
25%25% 50%
Web Design
Web Design
50%50%
DOM Navigation
CSS Inspector
CSS Editing & Hinting
CSS Texteditor
CSS Editing & Hinting
Strukturplanung Layoutkonzeption Design
Visueller Workflow
<header>
<main>
<footer>
<article>
<article>
<aside>
article
ar...
Demo: Visueller Workflow
UI FARBSCHEMA
KONTRAST
FARBE
UI Farbkonzept
UI Farbkonzept
UI Farbkonzept (neu)
UI Farbkonzept (neu)
USER EXPERIENCE
Verdammt nochmal, wie bekomme ich … ?
Demo: Dateiauswahl
Desktop Umgebung Browser
Content Aware Tabs
Highlighting
Custom Form Elements
Animierte Checkboxen
Unmittelbares UI Feedback
Überprüfung von CSS Selektoren
STATUS QUO
Thinkin‘ Tags v0.5 (alpha)
VIELEN DANK
www.thinkintags.com
!
@djesse

plus.google.com/+DirkJesse
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
Nächste SlideShare
Wird geladen in …5
×

LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

1.573 Aufrufe

Veröffentlicht am

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?

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.573
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×