Tools & Workflows – Von der Gestaltung zur Programmierung von Websites

Tools & Workflows

Von der Gestaltung zur Programmierung von Websites

Interactive Designer & Developer

Matthias Schulz | www.jash.de

DEMO: llr-hamburg.de

Flashentwicklung auf Basis von Designmoods

DEMO: dynafit.com

Gestaltung eines sehr detaillierten Screendesigns

Gestaltungvorlagen als...

Mood / Stimmungsbild

Look & Feel

Umfassendes Screendesign

Gestalter || Entwickler

Eine klassiche Rollenverteilung

Praxis in Agenturen:
Klare Trennung von Gestaltung und Entwicklung

[+]Klare Aufgabenverteilung und Kompetenzen

[-]Interdisziplinärer Wissensmangel

Interdisziplinärer Wissens-
mangel

Gestalter kennen technische Möglichkeiten und Grenzen nicht

Gestalter können ihr Design nicht in Code umsetzen

Unqualifizierte Interpretation der Gestaltung durch Entwickler

Entwickler benötigt Informationen die im Design nicht definiert sind

Transformationsverluste minimieren

Kommunikation = Intensiver Austausch/Zusammenarbeit

Dokumentation & Styleguides

Fortbildung für Designer und Entwickler

Neugierig sein

Kultivierter Umgang mit Unwissen

Wahl des optimalen Design-Tools

WARUM NICHT DIREKT MIT
HTML + CSS + JAVASCRIPT
GESTALTEN?

Direkte Design-Umsetzung mit HTML + CSS + Javascript?

Sehr einfache Gestaltung

Idee klar existent

Generative Visualisierungen

3D-Anwendungen

Features
Design-Tools
Teil 1: Design

Artboards/Pages

Vektor-Support

Bitmap-Support

Symbols / Shared Objects

Device-Vorschau

Animations / MotionDesign

States (Hover)

Responsive Design

Features
Design-Tools
Teil 2: Export

HTML/CSS Export

Assets-Export

Styleguide-Generierung

Prototyping

Kategorien

Pixel-basiert

Vektor-basiert

HTML-orientiert (WYSIWYG)

Direktes HTML/CSS

Design Tools

Adobe Photoshop

Adobe Illustrator

Adobe Fireworks

Sketch 3

Webflow

Adobe Muse

Adobe Reflow

WebStorm + Browser

[...]

DEMOS

Adobe Photoshop

Sketch 3

Adobe Reflow

Adobe Photoshop

[+]Industriestandard mit hoher kreativer Freiheit

[+]Artboards und Shared Objects mit unterschiedlichen Zuständen!

[+]Device-Vorschau

[+]sehr guter Asset-Export und CSS-Export

[+]Stylesheet-Support via Creative Cloud

[-]kein HTML-Export

[-]keine Interaktion oder Prototyping

[-]statisches, pixel-orientiertes Design

Sketch 3

[+]direkt für UI-Design konzipiert

[+]maximale kreative Freiheit

[+]Shared Objects (ohne States, dafür variable TextValues)

[+]flexible erweiterbar via Plugins (HTML-Export, Prototyping, …)

[+]sehr guter Asset-Export

[+]Device-Vorschau

[-]kein HTML-Export

[-]nur für OSX verfügbar

Adobe Reflow

[+]WYSIWYG-HTML-Editor

[+]kein reines Design-Tool, HTML/CSS wird direkt erstellt

[+]Responsive Design

[+]Interessant für alle die keinen Code schreiben wollen

[-]UI: schränkt Funktionalität von HTML/CSS ein

[-]UI: Verfügbare Optionen immer sichtbar - egal ob verwendet oder nicht

[-]Nutzung setzt HTML/CSS-Kenntnisse voraus

[-]eingeschränkte kreative Freiheit

[-]HTML/CSS Export (für Entwickler aufwendig zu integrieren)

Design is not just what it looks like and feels like.
Design is how it works.

Steve Jobs

Prototyping- & Review-Tools

Invision

Flinto

Proto.io

Framer

Notism

...

Frontend-Development

Sorry, no Backend here...

Produktionsreife Templates
(HTML + CSS + Javascript)

Ideale Schnittstelle zwischen Gestaltung und Entwicklung

Quellcode + Assets › App + Content

Heute Webentwicklung gleicht sich der klassischen Programmierung an

DEMO: Actega Templating

IDE:

IntelliJ IDEA

Frameworks:

–

Bibliotheken:

jQuery, Greensock.js

Automatisierung:

Grunt [jade, uglify, scss, postcss, clear, clean, watch]

Freies, kreatives (statisches) Design lässt sich nicht automatisiert in produktionsreifen Code übersetzen

Qualitative Überführung der Gestaltung in Templates durch...

Designer?

Frontend-Developer?

Backend-Developer?

Jede Aufgabe verlangt andere Lösungsmethoden.

Hans Peter Willberg