LESSONS LEARNED FROM THE DESIGN
OF AN USER INTERFACEDIRK JESSE // WEBKONGRESS ERLANGEN 2014
MOTIVATIONA BETTER WORKFLOW FOR THE RESPONSIVE WEB
PhotoshopInDesign
Fireworks
PowerpointKeynote
Sublime Text
Coda
Espresso
Aptana Studio
Netbeans
Komodo Edit
Medienbruch […] Wechsel des informationstragenden Mediums innerhalb eines Informationsbeschaffungs- oder -verarbeitungsprozesses.
Wikipedia
VISIONSTREAMLINE WEBDESIGN WORKFLOW
HTML5 CSS3 JavaScript
ENTWURFSWERKZEUGE
„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
Inhalte und Struktur
Funktion und Usability
Typographie und Design
Rendering Qualität und Performance
INSPIRATIONTHINGS THAT I ENJOY WORKING WITH
HTMLAdobe Dreamweaver
!• DOM Brotkrümelnavigation • kontextabhängige Dialoge
CSSSublime Text
!• Syntax Highlighting • CSS Hinting
DebuggingFirebug!!• CSS Cascade View • Live Editing (HTML/CSS) • Trigger for Pseudo-Classes
UI/UXAdobe Lightroom!!• Dunkles User Interface • Modul Navigation • Panel Layout
KONZEPTION & UMSETZUNGVon 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
article aside
header
footer
main
Demo: Visueller Workflow
UI FARBSCHEMA
KONTRAST
FARBE
UI Farbkonzept
UI Farbkonzept
UI Farbkonzept (neu)
UI Farbkonzept (neu)
USER EXPERIENCEVerdammt nochmal, wie bekomme ich … ?
Demo: DateiauswahlDesktop Umgebung Browser
Content Aware Tabs Highlighting
Custom Form Elements Animierte Checkboxen
Unmittelbares UI Feedback Überprüfung von CSS Selektoren
STATUS QUOThinkin‘ Tags v0.5 (alpha)
VIELEN DANK
www.thinkintags.com !@djesse plus.google.com/+DirkJesse