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?

1. LESSONS LEARNED FROM THE DESIGN
OF AN USER INTERFACE
DIRK JESSE // WEBKONGRESS ERLANGEN 2014

2. MOTIVATION
A BETTER WORKFLOW FOR THE RESPONSIVE WEB

3. Photoshop
InDesign
Fireworks
Powerpoint
Keynote
Sublime Text
Coda
Espresso
Aptana Studio
Netbeans
Komodo Edit

4. Medienbruch […] Wechsel des
informationstragenden Mediums innerhalb
eines Informationsbeschaffungs- oder -
verarbeitungsprozesses.
Wikipedia

5. VISION
STREAMLINE WEBDESIGN WORKFLOW

6. HTML5 CSS3 JavaScript
ENTWURFSWERKZEUGE

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. Inhalte und Struktur
Funktion und Usability
Typographie und Design
Rendering Qualität und Performance

9. INSPIRATION
THINGS THAT I ENJOY WORKING WITH

10. HTML
Adobe Dreamweaver
!
• DOM Brotkrümelnavigation
• kontextabhängige Dialoge

11. CSS
Sublime Text
!
• Syntax Highlighting
• CSS Hinting

12. Debugging
Firebug!
!
• CSS Cascade View
• Live Editing (HTML/CSS)
• Trigger for Pseudo-Classes

13. UI/UX
Adobe Lightroom!
!
• Dunkles User Interface
• Modul Navigation
• Panel Layout

14. KONZEPTION & UMSETZUNG
Von der Idee zur Web Applikation

15. Bildbearbeitung

16. Bildbearbeitung

17. Bildbearbeitung
85%5% 10%

18. Web Design

19. Web Design

20. Web Design
25%25% 50%

21. Web Design

22. Web Design
50%50%

23. DOM Navigation

24. CSS Inspector

25. CSS Editing & Hinting
CSS Texteditor

26. CSS Editing & Hinting

27. Strukturplanung Layoutkonzeption Design
Visueller Workflow
<header>
<main>
<footer>
<article>
<article>
<aside>
article
article aside
header
footer
main

28. Demo: Visueller Workflow

29. UI FARBSCHEMA

30. KONTRAST

31. FARBE

32. UI Farbkonzept

33. UI Farbkonzept

34. UI Farbkonzept (neu)

35. UI Farbkonzept (neu)

36. USER EXPERIENCE
Verdammt nochmal, wie bekomme ich … ?

37. Demo: Dateiauswahl
Desktop Umgebung Browser

38. Content Aware Tabs
Highlighting

39. Custom Form Elements
Animierte Checkboxen

40. Unmittelbares UI Feedback
Überprüfung von CSS Selektoren

41. STATUS QUO
Thinkin‘ Tags v0.5 (alpha)

43. VIELEN DANK
www.thinkintags.com
!
@djesse
plus.google.com/+DirkJesse