1. DIGITAL
PUBLISHING
WAS PRINT-DESIGNER
VON WEBDESIGNERN
LERNEN KÖNNEN

2. Hallo!

8. Was ist eigentlich
unser Problem?

9. http://www.flickr.com/photos/26320335@N06/4647058825/

10. http://www.flickr.com/photos/richardgiles/4759491799/

11. http://www.flickr.com/photos/richardgiles/4759491799/

12. http://www.flickr.com/photos/adactio/6153481666/

16. /o
Das ist unser Job!

17. Grafiker

18. Editorial Designer

19. User Interface
Designer

20. User Experience
Designer

21. Interaction Designer

22. Webdesigner

23. http://www.flickr.com/photos/94062764@N07/8558004261/

24. Good art is
interpreted,
good design is
understood“
“ John O‘Nolan @JohnONolan
„

25. Design löst Probleme,
Kunst findet sie.

26. Good art is a talent.
Good design is a skill“
“ John O‘Nolan @JohnONolan
„

34. ?

35. Variierende Größe
http://www.flickr.com/photos/adactio/6153481666/

36. Variierendes Format
http://www.flickr.com/photos/adactio/6153481666/

37. http://www.flickr.com/photos/56164003@N02/8419208409/
Verschiedene
Auflösungen

38. Verschiedene
Performance
http://www.flickr.com/photos/adactio/6153481666/
http://www.flickr.com/photos/dlukz1/359224581

39. http://bradfrost.github.io/this-is-responsive/

40. http://interfacesketch.tumblr.com/

41. http://www.lukew.com/ff/entry.asp?1514

42. http://zurb.com/responsive/design

43. http://ia.net/blog/responsive-typography-the-basics/

44. Was ist eigentlich
unser Produkt?

45. http-//www.flickr.com/photos/rodrigogalindez/4637637597/

46. http://www.flickr.com/photos/nnova/2965208854/

49. App

53. Design

54. Inhalt
http://www.flickr.com/photos/peretzpup/2084387730/

55. Präsentation

56. Design

57. Verschiedene
Formate
http://www.flickr.com/photos/adactio/6153481666/

58. Usability
http://www.flickr.com/photos/nnova/2965208854/

59. http://www.flickr.com/photos/baldiri/5734993652/
Konzepte
testen

60. Verschiedene
Formate
http://www.flickr.com/photos/adactio/6153481666/

61. 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
„

62. http://mediaqueri.es

63. http://mediaqueri.es

64. http://mediaqueri.es

65. http://mediaqueri.es

66. Responsive
Webdesign

67. http://www.flickr.com/photos/likeablerodent/5896226033/
flüssig

68. http://goldengridsystem.com/

69. http://www.flickr.com/photos/m4tik/1857978
flexibel

70. http://ryanswarts.com/responsive/plain/

71. http://ryanswarts.com/responsive/plain/

72. http://www.flickr.com/photos/zeldman/8491607991
medien-abhängig

73. http://worldwildlife.org/

74. http://worldwildlife.org/

75. http://worldwildlife.org/

76. Keine festen
Layouts möglich

77. http://clearleft.com/thinks/visualdesignexplorations/
Style tiles

78. http://www.flickr.com/photos/conchur/2443635669
Modular
denken

97. Usability
http://www.flickr.com/photos/nnova/2965208854/

98. http-//www.flickr.com/photos/rodrigogalindez/4637637597/

99. http://www.flickr.com/photos/fleur-design/2679443469

101. Gesten

102. 1cm

103. 7mm Menüpunkt 23
Menüpunkt 22
Menüpunkt 24

104. 2mm
Checkbox 188
Checkbox 187
Checkbox 189

105. Animation

106. http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/

107. http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/

108. http://uxdesign.smashingmagazine.com/2012/10/30/motion-animation-new-mobile-ux-design-material/

109. Bsp.

110. Feedback

111. Senden Senden

113. Konsistenz

114. You already
know how
to use it“
„
http://www.flickr.com/photos/acaben/541301944/

115. http://www.flickr.com/photos/baldiri/5734993652/
Konzepte
testen

116. Scribbles
versus
Storyboards
http://boxesandarrows.com/storyboarding-ipad-transitions/

117. Statische
Wireframes
versus
interaktive
Prototypen
http://boxesandarrows.com/storyboarding-ipad-transitions/

118. http://popapp.in/

119. http://pinterest.com/pin/80994493268796619/

120. http://pinterest.com/pin/80994493268796619/

121. Auch auf
alten & billigen
Geräten testen

122. Mit echten
Inhalten testen

123. Lorem impsum
is fucking evil“
“ Josh Brewer @jbrewer
„

124. Guten und schlechten
Inhalt testen

125. Inhalt

126. Kontext
http://www.flickr.com/photos/officialgdc/6811976872/

127. Weiterverwertung

128. Aktualität und
Beständigkeit

129. Kontext
http://www.flickr.com/photos/officialgdc/6811976872/

130. 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/

131. Tablets
http://www.flickr.com/photos/antmcneill/4686147794/
http://www.flickr.com/photos/juhansonin/7206924392

132. knackige Sätze
weniger Füllwörter
aktive Sprache

133. http://xkcd.com/773/

134. Inhalte anpassen
oder nicht?

135. besser anpassbar
mehr Kontrolle
speziellere Erfahrung

136. http://wtfmobileweb.com/image/51641083595
http://wtfmobileweb.com/image/51557753956

141. Weiterverwertung

162. Content first

163. Eindeutige
Dateinamen

164. 2013-03-12 Rolling Stone Template CS6 V1.8.indt

165. 2013-03-12 Rolling Stone Template CS6 V1.8.indt

166. 2013-03-12 Rolling Stone Template CS6 V1.8.indt

167. Selbsterklärende
und flexible
Dateistruktur

168. _archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768

169. _archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768 000-title
010-editorial
020-letters
030-topstory1

170. _archive
_input
_links
_temp
HTMLRessources
ios.640x960
ios.1024x768 000-title
010-editorial
011-ad1
020-letters
030-topstory1

171. _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

172. Kommentieren und
Dokumentieren

177. Aktualität und
Beständigkeit

178. http://www.flickr.com/photos/nnova/2965208854/

182. Kontinuierliche
Verbesserung

183. Präsentation

184. http://www.flickr.com/photos/tschiae/8417927326/
Frameworks

185. Native Apps

186. Native Apps
maßgeschneidert

188. Native Apps
maßgeschneidert
beschränkt

189. Native Apps Webapps
maßgeschneidert
beschränkt

190. Native Apps Webapps
maßgeschneidert
beschränkt
offene Standards

192. Native Apps Webapps
maßgeschneidert
beschränkt
offene Standards
Quellcode

194. Native Apps Webapps
E-Books
maßgeschneidert
beschränkt
offene Standards
Quellcode

195. Native Apps Webapps
E-Books
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei

196. http://www.flickr.com/photos/pazca/8394938882

198. Native Apps Webapps
E-Books
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design

199. Native Apps Webapps
E-Books PDF-Maker
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design

200. Native Apps Webapps
E-Books PDF-Maker
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell

202. Native Apps Webapps
E-Books PDF-Maker
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht

203. Native Apps Webapps
E-Books PDF-Maker ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
barrierefrei
kaum Design
schnell
funktioniert nicht

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

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

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

210. Native Apps Webapps
ID-Plugins
maßgeschneidert
beschränkt
offene Standards
Quellcode
schöne Layouts
pixelgenau

212. PDF-Maker ID-Plugins
schnell
funktioniert nicht
schöne Layouts
pixelgenau

214. Native Apps
E-Books
maßgeschneidert
beschränkt
barrierefrei
kaum Design

216. http://www.flickr.com/photos/nnova/2965208854/
Cover

228. Inhaltsverzeichnis

229. Überblick und
Navigation

232. Navigation

239. Überblick

240. Erweitertes
Universum
http://www.flickr.com/photos/44080248@N03/4439432594

250. Eine Menge Arbeit

251. schneller

252. weniger redundant

253. spannender!

254. DRY

255. Don‘t Repeat
Yourself

258. Rock & Roll
Features
Reviews

262. Rock & Roll
Features
Reviews

263. Das sinnvollste Tools
verwenden

264. Proprietäre
Lösungen vs.
Webstandards

265. An die Zukun!
denken

266. <3 Alpha

268. Neues lernen

269. Es lohnt sich

272. Geringere Größe

273. Wiederverwendbar

276. Typografie

279. Grafik Design

281. Editorial Design

283. http://www.flickr.com/photos/adactio/6153558098

284. Danke!
http://www.flickr.com/photos/adactio/6153558098