SlideShare ist ein Scribd-Unternehmen logo
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 -
verarbeitungsprozesses.
Wikipedia
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 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
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
article aside
header
footer
main
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)
LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE
VIELEN DANK
www.thinkintags.com
!
@djesse

plus.google.com/+DirkJesse

Weitere ähnliche Inhalte

Ähnlich wie LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE

JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
Dennis Wilson
 
Day CQ 5.3 WCM - Was ist neu
Day CQ 5.3 WCM - Was ist neuDay CQ 5.3 WCM - Was ist neu
Day CQ 5.3 WCM - Was ist neu
Cédric Hüsler
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Peter Rozek
 
TechDays 2012 Internet Sites mit SharePoint 2013
TechDays 2012 Internet Sites mit SharePoint 2013TechDays 2012 Internet Sites mit SharePoint 2013
TechDays 2012 Internet Sites mit SharePoint 2013
David Schneider
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.
David Schneider
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
Daniel Fisher
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
Paul Bakaus
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...
Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...
Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...
DevDay Dresden
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
Christoph Hautzinger
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
André Scharf
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
Jens Grochtdreis
 
Provaria Gmbh - Neu in sharepoint 2013
Provaria Gmbh - Neu in sharepoint 2013Provaria Gmbh - Neu in sharepoint 2013
Provaria Gmbh - Neu in sharepoint 2013
Provaria GmbH
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
100% ECM für SharePoint mit ecspand
100% ECM für SharePoint mit ecspand100% ECM für SharePoint mit ecspand
100% ECM für SharePoint mit ecspand
Christian Kiesewetter
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Mario Fink
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Peter Rozek
 
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Mark Lubkowitz
 

Ähnlich wie LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE (20)

JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
Day CQ 5.3 WCM - Was ist neu
Day CQ 5.3 WCM - Was ist neuDay CQ 5.3 WCM - Was ist neu
Day CQ 5.3 WCM - Was ist neu
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
TechDays 2012 Internet Sites mit SharePoint 2013
TechDays 2012 Internet Sites mit SharePoint 2013TechDays 2012 Internet Sites mit SharePoint 2013
TechDays 2012 Internet Sites mit SharePoint 2013
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 
Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.Collaboration Days 2011 - Damit die Tester schneller ran können.
Collaboration Days 2011 - Damit die Tester schneller ran können.
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...
Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...
Dev Day 2019: Kathrin Friedrich/Michael Kunze – Design better together - Styl...
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Provaria Gmbh - Neu in sharepoint 2013
Provaria Gmbh - Neu in sharepoint 2013Provaria Gmbh - Neu in sharepoint 2013
Provaria Gmbh - Neu in sharepoint 2013
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
100% ECM für SharePoint mit ecspand
100% ECM für SharePoint mit ecspand100% ECM für SharePoint mit ecspand
100% ECM für SharePoint mit ecspand
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
 

Mehr von djesse

Browser-based Rapid Prototyping
Browser-based Rapid PrototypingBrowser-based Rapid Prototyping
Browser-based Rapid Prototyping
djesse
 
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS LayoutsThinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layouts
djesse
 
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesignUnwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
djesse
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
djesse
 
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im ProjektalltagFür Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
djesse
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)
djesse
 
Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)
djesse
 

Mehr von djesse (7)

Browser-based Rapid Prototyping
Browser-based Rapid PrototypingBrowser-based Rapid Prototyping
Browser-based Rapid Prototyping
 
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS LayoutsThinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layouts
 
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesignUnwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
 
Layout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen WebdesignLayout Frameworks im professionellen Webdesign
Layout Frameworks im professionellen Webdesign
 
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im ProjektalltagFür Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)
 
Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)
 

LESSONS LEARNED FROM THE DESIGN OF AN USER INTERFACE