DIGITAL
PUBLISHING
WAS PRINT-DESIGNER
VON WEBDESIGNERN
LERNEN KÖNNEN
Hallo!
Was ist eigentlich
unser Problem?
http://www.flickr.com/photos/26320335@N06/4647058825/
http://www.flickr.com/photos/richardgiles/4759491799/
http://www.flickr.com/photos/richardgiles/4759491799/
http://www.flickr.com/photos/adactio/6153481666/
/o
Das ist unser Job!
Grafiker
Editorial Designer
User Interface
Designer
User Experience
Designer
Interaction Designer
Webdesigner
http://www.flickr.com/photos/94062764@N07/8558004261/
Good art is
interpreted,
good design is
understood“
“ John O‘Nolan @JohnONolan
„
Design löst Probleme,
Kunst findet sie.
Good art is a talent.
Good design is a skill“
“ John O‘Nolan @JohnONolan
„
?
Variierende Größe
http://www.flickr.com/photos/adactio/6153481666/
Variierendes Format
http://www.flickr.com/photos/adactio/6153481666/
http://www.flickr.com/photos/56164003@N02/8419208409/
Verschiedene
Auflösungen
Verschiedene
Performance
http://www.flickr.com/photos/adactio/6153481666/
http://www.flickr.com/photos/dlukz1/359224581
http://bradfrost.github.io/this-is-responsive/
http://interfacesketch.tumblr.com/
http://www.lukew.com/ff/entry.asp?1514
http://zurb.com/responsive/design
http://ia.net/blog/responsive-typography-the-basics/
Was ist eigentlich
unser Produkt?
http-//www.flickr.com/photos/rodrigogalindez/4637637597/
http://www.flickr.com/photos/nnova/2965208854/
App
Design
Inhalt
http://www.flickr.com/photos/peretzpup/2084387730/
Präsentation
Design
Verschiedene
Formate
http://www.flickr.com/photos/adactio/6153481666/
Usability
http://www.flickr.com/photos/nnova/2965208854/
http://www.flickr.com/photos/baldiri/5734993652/
Konzepte
testen
Verschiedene
Formate
http://www.flickr.com/photos/adactio/6153481666/
The control which designers know in
the print medium, and o!en desire in
the web medium, is simply a function of
the limitation of the printed page. We
should embrace the fact that the web
doesn’t have the same constraints, and
design for this flexibility.“
,‘John Allsopp @johnallsopp
„
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
Responsive
Webdesign
http://www.flickr.com/photos/likeablerodent/5896226033/
flüssig
http://goldengridsystem.com/
http://www.flickr.com/photos/m4tik/1857978
flexibel
http://ryanswarts.com/responsive/plain/
http://ryanswarts.com/responsive/plain/
http://www.flickr.com/photos/zeldman/8491607991
medien-abhängig
http://worldwildlife.org/
http://worldwildlife.org/
http://worldwildlife.org/
Keine festen
Layouts möglich
http://clearleft.com/thinks/visualdesignexplorations/
Style tiles
http://www.flickr.com/photos/conchur/2443635669
Modular
denken
Usability
http://www.flickr.com/photos/nnova/2965208854/
http-//www.flickr.com/photos/rodrigogalindez/4637637597/
http://www.flickr.com/photos/fleur-design/2679443469
Gesten
1cm
7mm Menüpunkt 23
Menüpunkt 22
Menüpunkt 24
2mm
Checkbox 188
Checkbox 187
Checkbox 189
Animation
http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/
http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/
http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/
Bsp.
Feedback
Senden Senden
Konsistenz
You already
know how
to use it“
„
http://www.flickr.com/photos/acaben/541301944/
http://www.flickr.com/photos/baldiri/5734993652/
Konzepte
testen
Scribbles
versus
Storyboards
http://boxesandarrows.com/storyboarding-ipad-transitions/
Statische
Wireframes
versus
interaktive
Prototypen
http://boxesandarrows.com/storyboarding-ipad-transitions/
http://popapp.in/
http://pinterest.com/pin/80994493268796619/
http://pinterest.com/pin/80994493268796619/
Auch auf
alten & billigen
Geräten testen
Mit echten
Inhalten testen
Lorem impsum
is fucking evil“
“ Josh Brewer @jbrewer
„
Guten und schlechten
Inhalt testen
Inhalt
Kontext
http://www.flickr.com/photos/officialgdc/6811976872/
Weiterverwertung
Aktualität und
Beständigkeit
Kontext
http://www.flickr.com/photos/officialgdc/6811976872/
Smartphones
http://www.flickr.com/photos/stignygaard/7220404362
http://www.flickr.com/photos/clanlife/6369793391/
http://www.flickr.com/photos/officialgdc/6811976872/
http://www.flickr.com/photos/33498942@N04/7546974252/
http://www.flickr.com/photos/ironypoisoning/8137119136/
Tablets
http://www.flickr.com/photos/antmcneill/4686147794/
http://www.flickr.com/photos/juhansonin/7206924392
knackige Sätze
weniger Füllwörter
aktive Sprache
http://xkcd.com/773/
Inhalte anpassen
oder nicht?
besser anpassbar
mehr Kontrolle
speziellere Erfahrung
http://wtfmobileweb.com/image/51641083595
http://wtfmobileweb.com/image/51557753956
Weiterverwertung
Content first
Eindeutige
Dateinamen
2013-03-12 Rolling Stone Template CS6 V1.8.indt
2013-03-12 Rolling Stone Template CS6 V1.8.indt
2013-03-12 Rolling Stone Template CS6 V1.8.indt
Selbsterklärende
und flexible
Dateistruktur
_archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768
_archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768 000-title
010-editorial
020-letters
030-topstory1
_archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768 000-title
010-editorial
011-ad1
020-letters
030-topstory1
_archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768 000-title
010-editorial
011-ad1
020-letters
030-topstory1
topstory1_h.indd
topstory1_v.indd
thumb.png
Kommentieren und
Dokumentieren
Aktualität und
Beständigkeit
http://www.flickr.com/photos/nnova/2965208854/
Kontinuierliche
Verbesserung
Präsentation
http://www.flickr.com/photos/tschiae/8417927326/
Frameworks
Native Apps
Native Apps
maßgeschneidert
Native Apps
maßgeschneidert
beschränkt
Native Apps Webapps
maßgeschneidert
beschränkt
Native Apps Webapps
maßgeschneidert
beschränkt
offene Standards
Native Apps Webapps
maßgeschneidert
beschränkt
offene Standards
Quellcode
Native Apps Webapps
E-Books
maßgeschneidert
beschränkt
offene Standards
Quellcode
Native Apps Webapps
E-Books
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
http://www.flickr.com/photos/pazca/8394938882
Native Apps Webapps
E-Books
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
Native Apps Webapps
E-Books PDF-Maker
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
Native Apps Webapps
E-Books PDF-Maker
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
Native Apps Webapps
E-Books PDF-Maker
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht
Native Apps Webapps
E-Books PDF-Maker ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht
Native Apps Webapps
E-Books PDF-Maker ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht
schöne Layouts
Native Apps Webapps
E-Books PDF-Maker ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht
schöne Layouts
pixelgenau
Native Apps Webapps
E-Books PDF-Maker ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht
schöne Layouts
pixelgenau
Native Apps Webapps
ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
schöne Layouts
pixelgenau
PDF-Maker ID-Plugins
schnell
funktioniert nicht
schöne Layouts
pixelgenau
Native Apps
E-Books
maßgeschneidert
beschränkt
barrierefrei
kaum Design
http://www.flickr.com/photos/nnova/2965208854/
Cover
Inhaltsverzeichnis
Überblick und
Navigation
Navigation
Überblick
Erweitertes
Universum
http://www.flickr.com/photos/44080248@N03/4439432594
Eine Menge Arbeit
schneller
weniger redundant
spannender!
DRY
Don‘t Repeat
Yourself
Rock & Roll
Features
Reviews
Rock & Roll
Features
Reviews
Das sinnvollste Tools
verwenden
Proprietäre
Lösungen vs.
Webstandards
An die Zukun!
denken
<3 Alpha
Neues lernen
Es lohnt sich
Geringere Größe
Wiederverwendbar
Typografie
Grafik Design
Editorial Design
http://www.flickr.com/photos/adactio/6153558098
Danke!
http://www.flickr.com/photos/adactio/6153558098

Digital Publishing