STYLE TILES… und moderne Designprozesse für Webseiten

MARTIN KRETSCHMER@mykx

@mactuxMARKUS DENHOFF

“…building good experiences is only 50% design challenge. The other 50% is

organizational challenge…”

Rian van der Merwe

DAS BRIEFING

„WIR BRAUCHEN EINE NEUE WEBSEITE”

Jung

Modern

Urban

aber auch traditionsbewusst…

UND WAS HEISSTDAS JETZT?

BLAU?

ODER ROT?

ODER RUNDE ECKEN?

OK, DANN MACHEN WIR EIN MOODBOARD…

„DANN WIRF DOCH SCHON MAL

PHOTOSHOP AN.“

AUFTRITT: STYLE TILES

Quelle: styletil.es

Quelle: bit.ly/ONpzR5

Quelle: bit.ly/ONpzR5

Style Tiles sind eine Zusammenstellung von Elementen wie Farben, Typografie, Texturen,

Mustern, Buttons, … einer Webseite.

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

zu erarbeiten.

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

zu erarbeiten.

KUNDEN SIND KEINE DESIGNER, WISSEN ABER

WAS IHNEN GEFÄLLT.

Quelle: bit.ly/ONpzR5

Reaction SheetEntwurf 1 Entwurf 2 Entwurf3

Jung

Urban

Modern

Traditionsbewust

1= trifft genau zu 2= trifft teilweise zu 3= trifft kaum zu

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

Quelle: bit.ly/ONpzR5

MACH ES ZUSEINEM PROJEKT!

ABER VORSICHT:

STYLE TILES SINDKEINE LAYOUTS!

Quelle: bit.ly/ONpzR5

WIRKLICH NICHT!

GENUG GEFÜHLSKRAM!

KLASSISCHER DESIGNPROZESSBriefing vom Kunden

Konzept, Struktur (Wireframes, Prototypes)

Design Entwurf (Photoshop)

Umsetzung (HTML/CSS/JS/CMS)

Responsive Webdesign

transitions

Web-Fonts

box-shadowborder-radius

gradientsCSS3JavaScript

Icon-Fonts

MODERNER DESIGNPROZESS

Briefing vom Kunden

Sitemap, Struktur Style Tiles

HTML/CSS/JS DummiesTemplates

HTML-Mockups

WWW.STYLETIL.ESSamantha Warren

WEITERGEDACHT:

Interactive Stile Tileshttp://republicofquality.com/projects/interactive-style-tiles/

HTML-Based Style Tilehttp://webstiles.namanyayg.com/webstile/

MARTIN KRETSCHMERProjektmanager, Information Architectkretschmer@blanko.biz

MARKUS DENHOFFTechnischer Direktor, UX Leaddenhoff@blanko.biz

WWW.BLANKO.BIZ

KONTAKT