Das Dokument thematisiert die Entwicklung einer Benutzeroberfläche für responsives Webdesign und das Ziel, den Workflow zu optimieren. Es werden verschiedene Werkzeuge und Techniken vorgestellt, die bei der Umsetzung helfen, einschließlich HTML5, CSS3 und UX-Prinzipien. Der Autor betont die Bedeutung von visueller Planung und konkretem Feedback im Entwicklungsprozess.

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