Vortrag von Martin Kretschmer und Markus Denhoff von Blanko beim Web Worker NRW Treffen am 14.03.2013

1. STYLE TILES
… und moderne Designprozesse für Webseiten

2. MARTIN KRETSCHMER
@mykx
MARKUS DENHOFF
@mactux

3. “…building good experiences is only 50%
design challenge. The other 50% is
organizational challenge…”
Rian van der Merwe

4. DAS BRIEFING

5. „WIR BRAUCHEN EINE NEUE WEBSEITE”

6. Jung

7. Modern

8. Urban

9. aber auch traditionsbewusst…

10. UND WAS HEISST
DAS JETZT?

11. BLAU?

12. ODER ROT?

13. ODER RUNDE ECKEN?

14. OK, DANN MACHEN WIR
EIN MOODBOARD…

15. „DANN WIRF DOCH
SCHON MAL
PHOTOSHOP AN.“

17. AUFTRITT:
STYLE TILES

18. Quelle: styletil.es

19. Quelle: bit.ly/ONpzR5

20. Quelle: bit.ly/ONpzR5

21. Style Tiles sind eine Zusammenstellung von
Elementen wie Farben, Typografie, Texturen,
Mustern, Buttons, … einer Webseite.

22. Style Tiles helfen uns die Tonalität und den
Mood einer Seite zusammen mit dem Kunden
zu erarbeiten.

23. Style Tiles helfen uns die Tonalität und den
Mood einer Seite zusammen mit dem Kunden
zu erarbeiten.

24. KUNDEN SIND KEINE
DESIGNER, WISSEN ABER
WAS IHNEN GEFÄLLT.

25. Quelle: bit.ly/ONpzR5

26. Reaction Sheet
Entwurf 1 Entwurf 2 Entwurf3
Jung
Urban
Modern
Traditionsbewust
1= trifft genau zu 2= trifft teilweise zu 3= trifft kaum zu

27. Reaction Sheet
Entwurf 1 Entwurf 2 Entwurf3
Jung 1 3 2
Urban 1 2 2
Modern 3 2 1
Traditionsbewust 1 3 1
1= trifft genau zu 2= trifft teilweise zu 3= trifft kaum zu

28. Quelle: bit.ly/ONpzR5

29. MACH ES ZU
SEINEM PROJEKT!

30. ABER VORSICHT:

31. STYLE TILES SIND
KEINE LAYOUTS!

32. Quelle: bit.ly/ONpzR5

33. WIRKLICH NICHT!

35. GENUG GEFÜHLSKRAM!

36. KLASSISCHER DESIGNPROZESS
Briefing vom Kunden
Konzept, Struktur (Wireframes, Prototypes)
Design Entwurf (Photoshop)
Umsetzung (HTML/CSS/JS/CMS)

37. Responsive Webdesign
JavaScript transitions
gradients
CSS3 box-shadow
border-radius
Web-Fonts
Icon-Fonts

38. MODERNER DESIGNPROZESS
Briefing vom Kunden
Sitemap, Struktur Style Tiles
HTML-Mockups
HTML/CSS/JS Dummies
Templates

40. WWW.STYLETIL.ES
Samantha Warren

41. WEITERGEDACHT:
Interactive Stile Tiles
http://republicofquality.com/projects/interactive-style-tiles/
HTML-Based Style Tile
http://webstiles.namanyayg.com/webstile/

42. KONTAKT
WWW.BLANKO.BIZ
MARTIN KRETSCHMER
Projektmanager, Information Architect
kretschmer@blanko.biz
MARKUS DENHOFF
Technischer Direktor, UX Lead
denhoff@blanko.biz