developing windows 8 or how to redesign a religion
DESCRIPTION
The slides I was presenting during Techday 2012 Roadshow.TRANSCRIPT
#techday2012
I‘m the real
PIXEL PERFECT BITCH
that's what they call me
I MAKE YOUR UGLY INTERFACES REALLY PRETTYI DELAY PROJECTS AND EXTEND PROJECT DEADLINES
MICROSOFT NOW USING MODERN UI STYLE TO REFER TO WINDOWS 8 METRO STYLE APPS
LOVE IT OR HATE IT, WINDOWS IS AT THE TOP OF THE OS HIERARCHY
WINDOWS 8: THE BIGGEST REDESIGN IN MICROSOFT’S HISTORY
WINDOWS 8
• it’s a new interface, so you have space
to create and develop some new ideas
for it;
• It’s still at the beginning of its growing
curve, so it’s an interesting challenge;
• exploring is a great way to learn how to
build a new exciting experience for
users;
Every rule in an abstract matter is just a cult.said by Alan Mendelevich
Cult in current popular usage usually refers to
a new religious movement.said by Wikipedia
Forget everything you knewabout developing desktop apps
& get ready to
REDESIGN RELIGION
DO I NEED TO LEARN DESIGN STUFF?!No. Modern UI makes design more accessible to everyone.
SO WHAT DOES THIS MEAN FOR ME?it opens doors for non-designers
TOOLS
all you need is BLEND FOR VISUAL STUDIO 2012
Get rid of the line between
DESIGN and DEVELOPMENT
6 THINGS I WISH I KNEW BEFORE I STARTED
Do more with less - and
THEY‘LL LOVE YOUfor it
choose content over chrome
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
CHOOSE CONTENT OVER CHROME
BE AUTHENTICALLY DIGITAL
BE AUTHENTICALLY DIGITAL
CHOOSE CONTENT OVER CHROME
SLAP A GRID ON IT
think grid
THINK GRID
THINK GRID
1 sub-unit = 5px x 5px
1 unit = 20px x 20px
1 column = 80px
I keep returningto the number
10
THINK GRID
2 sub-units (10px)2 units (40px)
THINK GRID
1 unit (20px)
THINK GRID
1 column (80px)
THINK GRID
100px and 120px as the starting point
THINK GRID
THINK TOUCH
recommended size
when accuracy matters
when it just won’t fit
8mm
DIFFERENT DPI’s
10,6”1366 x 768
148dpi @ 100% scale
10,6”1920 x 1080
207dpi @ 140% scale
23”1920 x 1080
96dpi @ 100% scale
DIFFERENT DPI’s (A LITTLE HELP IN BLEND)
EMBRACE TYPOGRAPHY
think about typography
THINK ABOUT TYPOGRAPHY
Segoe UI
9ptRegularSemiboldBold
11ptSemilightRegularSemibold
20ptLightSemilightRegular
42ptLight
Your app should be
RESPONSIVE, FAST and FLUID
Let people interact directly with content and respond to actions quickly with matching energy.
BE FAST
start 2 3 4 done
start done
traditional
desktop
software
Windows 8
killer app
You should use
BOLD & VIBRANT COLORS
The new face of Windows is a grid of tiles
colored like Skittles.
BOLD COLORS
FF0097 A200FF 00ABA9 8CBF26 A05000
E671B8 F09609 1BA1E2 E51400 339933
LOKU WINDOWS 8 APP
Small things
DRAMATICALLY AFFECTThe quality of entire app
Devote time and energy to small things that are seen often by many of your users, and engineer the experience to be complete and polished at every stage.
ONE MORE
Attractive things
WORK BETTER
BLIO WINDOWS 8 APP
ADIDAS SEATTLE SOUNDERS FC WINDOWS 8 APP
LOKU WINDOWS 8 APP
SUM UPall you need is BLEND FOR VISUAL STUDIO 2012
choose content over chrome
use grid
embrace typography
be responsive, fast and fluid
use bold & vibrant colors
devote time and energy to small things
attractive things work better
WITHIN EVERY DESIGN PRINCIPLES
THERE’S SPACIOUS ROOM TO CREATIVELY
PUSH BOUNDARIES.
AND YOU SHOULD.