SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
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)
VIELEN DANK
www.thinkintags.com
!
@djesse

plus.google.com/+DirkJesse

Weitere ähnliche Inhalte

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

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
 
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
 

Ä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 (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