The document discusses designing for Windows 8's mobile interface within a strict 14-day timeframe. It emphasizes the importance of understanding the new guidelines and documentation while also presenting different user interface elements such as hub pages, section pages, and navigation methods. The authors, Kamil Łukasiewicz and Krzysztof Piwowar, aim to redefine user interaction with the Windows family through innovative design practices.

1. Design it in 14 days
our first time with Windows 8 UI on mobile
Kamil Łukasiewicz Krzysztof Piwowar
User Experience Specialist UX Consultant & Owner
kamil.lukasiewicz@nokaut.pl kp@magnetise.pl

2. Long ago there weren’t any
computers on the world… it’s true!
http://www.geek-world.com.pl/wp-content/uploads/2011/01/trzepak03.png

3. Signs are useful
http://smallandmighty.net/Media/Default/Windows-Live-Writer/696da96e2275_9BCF/image_2.png

4. Metro it’s like SKM
it’s a train in Tricity in Poland ;)
http://upload.wikimedia.org/wikipedia/commons/c/c2/EN57-1089ra_of_Tr%C3%B3jmiejska_SKM.jpg

5. Metro is like
LEGO
http://www.funkydiva.pl/wp-content/uploads/2012/05/kolorowanki-lego-18.jpg

6. Metro is a philosophy
http://nathanjohnbarnes.files.wordpress.com/2012/05/greek_philosopher_busts.jpg

7. How Windows 8 sees itself?

8. Metro is passé...
Windows 8 is trendy

9. Windows 8 is SEXY
http://duller.kukuchew.com/wp-content/uploads/2010/06/super-sexy-cpr.jpg

10. Windows 8 is SEXY
http://wallpapersget.com/wp-content/uploads/2012/02/model-men-muscle-wallpaper.jpg

11. Intensive colours

12. Typography

13. Icons
http://freebiesbug.com/wp-content/uploads/2012/12/windows-8-metro-psd-icons.jpg

14. Nie można wyświetlić obrazu. Na komputerze może brakować pamięci do otwarcia obrazu lub obraz może być uszkodzony. Uruchom ponownie komputer, a następnie otwórz plik ponownie. Jeśli Nie można wyświetlić obrazu. Na komputerze może brakować pamięci do otwarcia obrazu lub obraz może być uszkodzony. Uruchom ponownie komputer, a następnie otwórz plik ponownie. Jeśli
czerwony znak x nadal będzie wyświetlany, konieczne może być usunięcie obrazu, a następnie ponowne wstawienie go. czerwony znak x nadal będzie wyświetlany, konieczne może być usunięcie obrazu, a następnie ponowne wstawienie go.
GRAFIKA GRAFIKA GRAFIKA
New system Siłą udział w rynku ”windows” R.I.P.
Windows 8 it’s not only interface 92%* operation systems on New system gives an opportunity
revolution. It’s also an attempt to desktop computers are from to use old shell (icons and
re-define how people are using Windows family. 45%* belongs to windows), but in a near future it
personal computer. Windows 7 and 3%* to Windows 8 can die like DOS.
* data source: netmarketshare.com

15. http://www.windows8templates.com/

16. Hub pages gives us a
starting points to different
sections of the application.
In a simple words: it is a
screen with different
information and different
categories.
Hub Pages

17. Screen that contains in the
most cases details of a
category or section.
It can be built with tiles, lists
or paragraphs with text.
Section Pages

18. http://apps.microsoft.com/

19. Detail screen - here you can
scroll the content only
vertically.
Detail Pages

20. http://techgage.com/

21. Panorama is for showing different types of information
(eg. different sections). Here we can navigate only horizontally.
Panorama

22. Pivot is for lustrating information about the same context, but in different ways
(eg. all information about a user). It also has an additional menu at the top. There
shouldn’t be more screens then 4 or 5 (Microsoft recommendation).
Pivot

23. Fullscreen - landscape Fullscreen - portrait
Title Title
Title Title
Split view - snapped Split view - fill

24. http://www.engadgeted.net/
Gestures

26. http://loraleeslooneytunes.com/wp-content/uploads/2012/03/ipad3.jpg

27. You must design Nokaut24
on Windows 8 (tablet).
By the way… you have
only 14 days to do this.
http://yourgoldfund.files.wordpress.com/2012/03/pension-timebomb.jpg

28. A good designer, before he
start his job on a platform,
that he doesn’t know, he
should get to know
a guidelines and
documentation…
http://s3.amazonaws.com/estock/fspid9/11/47/32/6/annabench-shakespeare-paris-1147326-o.jpg

29. Main screen Products list Product details
Here you start your journey. Here you choose products. Here you read about product.

31. Different way of navigation
`

36. What about traps???
... we have found some of them
http://www.negotiationlawblog.com/uploads/image/Traps%20for%20the%20Unwary(1).jpg

37. It’s time to start your
documentation...
No one said that it will be simple!
http://fc00.deviantart.net/fs70/f/2010/341/0/2/bureaucracy_by_itsk-d34auc8.png

38. They give you
a feedback...
But what you should do with it?!?
http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg

39. http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg

40. http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg

42. 1. UXBooth (at the end you will find some interesting links)
http://www.uxbooth.com/articles/lessons-learned-designing-a-windows-8-app/.
2. Windows 8 User experience guidelines
http://download.microsoft.com/download/C/0/A/C0AEF0CC-B969-406D-989A-4CDAFDBB3F3C/
Win8_UXG_RTM.pdf.
3. Windows 8 navigation
http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.
4. Windows 8 templates
http://msdn.microsoft.com/en-us/library/windows/apps/hh700403.
5. Typography
http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.
http://stannsw.org/wp-content/uploads/2011/12/Clip-Art-Books-Bibliography.jpg

43. Kamil Łukasiewicz Krzysztof Piwowar
User Experience Specialist UX Consultant & Owner
kamil.lukasiewicz@nokaut.pl kp@magnetise.pl
http://futurecomms1.files.wordpress.com/2013/01/thanks.jpg