Design it in 14                            days          our first time with Windows 8 UI on mobile Kamil Łukasiewicz     ...
Long ago there weren’t anycomputers on the world… it’s true!                                     http://www.geek-world.com...
Signs are useful                   http://smallandmighty.net/Media/Default/Windows-Live-Writer/696da96e2275_9BCF/image_2.png
Metro it’s like SKMit’s a train in Tricity in Poland ;)                                       http://upload.wikimedia.org/...
Metro is likeLEGO                http://www.funkydiva.pl/wp-content/uploads/2012/05/kolorowanki-lego-18.jpg
Metro is a philosophy                        http://nathanjohnbarnes.files.wordpress.com/2012/05/greek_philosopher_busts.jpg
How Windows 8 sees itself?
Metro is passé...Windows 8 is trendy
Windows 8 is SEXY                    http://duller.kukuchew.com/wp-content/uploads/2010/06/super-sexy-cpr.jpg
Windows 8 is SEXY                    http://wallpapersget.com/wp-content/uploads/2012/02/model-men-muscle-wallpaper.jpg
Intensive colours
Typography
Icons        http://freebiesbug.com/wp-content/uploads/2012/12/windows-8-metro-psd-icons.jpg
Nie można wyświetlić obrazu. Na komputerze może brakować pamięci do otwarcia obrazu lub obraz może być uszkodzony. Uruchom...
http://www.windows8templates.com/
Hub pages gives us a            starting points to different            sections of the application.            In a simpl...
Screen that contains in the                most cases details of a                category or section.                It c...
http://apps.microsoft.com/
Detail screen - here you can               scroll the content only               vertically.Detail Pages
http://techgage.com/
Panorama is for showing different types of information (eg. different sections). Here we can navigate only horizontally.Pa...
Pivot is for lustrating information about the same context, but in different ways (eg. all information about a user). It a...
Fullscreen - landscape                               Fullscreen - portrait     Title                                      ...
http://www.engadgeted.net/Gestures
http://loraleeslooneytunes.com/wp-content/uploads/2012/03/ipad3.jpg
You must design Nokaut24on Windows 8 (tablet).By the way… you haveonly 14 days to do this.                           http:...
A good designer, before hestart his job on a platform,that he doesn’t know, heshould get to knowa guidelines anddocumentat...
Main screen                    Products list               Product detailsHere you start your journey.   Here you choose p...
Different way of navigation`
What about traps???... we have found some of them                                 http://www.negotiationlawblog.com/upload...
It’s time to start yourdocumentation...No one said that it will be simple!http://fc00.deviantart.net/fs70/f/2010/341/0/2/b...
They give youa feedback...But what you should do with it?!?      http://flowchainsensei.files.wordpress.com/2012/09/megaph...
http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg
http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg
1.  UXBooth (at the end you will find some interesting links)    http://www.uxbooth.com/articles/lessons-learned-designing...
Kamil Łukasiewicz             Krzysztof PiwowarUser Experience Specialist    UX Consultant & Ownerkamil.lukasiewicz@nokaut...
Design it in 14 days
Design it in 14 days
Design it in 14 days
Design it in 14 days
Design it in 14 days
Design it in 14 days
Design it in 14 days
Upcoming SlideShare
Loading in …5
×

Design it in 14 days

1,084 views
923 views

Published on

Designing mobile app for iOS or Android isn’t something new and mistic these days. Every good company know how to build it. But believe us or not, designing for Windows 8 UI is a new concept for UX designer. And it isn’t as easy as it seems. Really! Especially when you do it for the first time in your live and you have only 14 days for this!

We managed to do this task, that's why we would like to share our experience with you and tell you a little story. A story about putting first steps in unknown land. How to use touch and gestures. Where our heroes found tricky traps and what Microsoft doesn’t tell you… officially. Go with us on a journey to meet a new adventure.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,084
On SlideShare
0
From Embeds
0
Number of Embeds
109
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design it in 14 days

  1. 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. 2. Long ago there weren’t anycomputers on the world… it’s true! http://www.geek-world.com.pl/wp-content/uploads/2011/01/trzepak03.png
  3. 3. Signs are useful http://smallandmighty.net/Media/Default/Windows-Live-Writer/696da96e2275_9BCF/image_2.png
  4. 4. Metro it’s like SKMit’s a train in Tricity in Poland ;) http://upload.wikimedia.org/wikipedia/commons/c/c2/EN57-1089ra_of_Tr%C3%B3jmiejska_SKM.jpg
  5. 5. Metro is likeLEGO http://www.funkydiva.pl/wp-content/uploads/2012/05/kolorowanki-lego-18.jpg
  6. 6. Metro is a philosophy http://nathanjohnbarnes.files.wordpress.com/2012/05/greek_philosopher_busts.jpg
  7. 7. How Windows 8 sees itself?
  8. 8. Metro is passé...Windows 8 is trendy
  9. 9. Windows 8 is SEXY http://duller.kukuchew.com/wp-content/uploads/2010/06/super-sexy-cpr.jpg
  10. 10. Windows 8 is SEXY http://wallpapersget.com/wp-content/uploads/2012/02/model-men-muscle-wallpaper.jpg
  11. 11. Intensive colours
  12. 12. Typography
  13. 13. Icons http://freebiesbug.com/wp-content/uploads/2012/12/windows-8-metro-psd-icons.jpg
  14. 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 GRAFIKANew system Siłą udział w rynku ”windows” R.I.P.Windows 8 it’s not only interface 92%* operation systems on New system gives an opportunityrevolution. It’s also an attempt to desktop computers are from to use old shell (icons andre-define how people are using Windows family. 45%* belongs to windows), but in a near future itpersonal computer. Windows 7 and 3%* to Windows 8 can die like DOS. * data source: netmarketshare.com
  15. 15. http://www.windows8templates.com/
  16. 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. 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. 18. http://apps.microsoft.com/
  19. 19. Detail screen - here you can scroll the content only vertically.Detail Pages
  20. 20. http://techgage.com/
  21. 21. Panorama is for showing different types of information (eg. different sections). Here we can navigate only horizontally.Panorama
  22. 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. 23. Fullscreen - landscape Fullscreen - portrait Title Title Title TitleSplit view - snapped Split view - fill
  24. 24. http://www.engadgeted.net/Gestures
  25. 25. http://loraleeslooneytunes.com/wp-content/uploads/2012/03/ipad3.jpg
  26. 26. You must design Nokaut24on Windows 8 (tablet).By the way… you haveonly 14 days to do this. http://yourgoldfund.files.wordpress.com/2012/03/pension-timebomb.jpg
  27. 27. A good designer, before hestart his job on a platform,that he doesn’t know, heshould get to knowa guidelines anddocumentation… http://s3.amazonaws.com/estock/fspid9/11/47/32/6/annabench-shakespeare-paris-1147326-o.jpg
  28. 28. Main screen Products list Product detailsHere you start your journey. Here you choose products. Here you read about product.
  29. 29. Different way of navigation`
  30. 30. What about traps???... we have found some of them http://www.negotiationlawblog.com/uploads/image/Traps%20for%20the%20Unwary(1).jpg
  31. 31. It’s time to start yourdocumentation...No one said that it will be simple!http://fc00.deviantart.net/fs70/f/2010/341/0/2/bureaucracy_by_itsk-d34auc8.png
  32. 32. They give youa feedback...But what you should do with it?!? http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg
  33. 33. http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg
  34. 34. http://flowchainsensei.files.wordpress.com/2012/09/megaphone.jpg
  35. 35. 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
  36. 36. Kamil Łukasiewicz Krzysztof PiwowarUser Experience Specialist UX Consultant & Ownerkamil.lukasiewicz@nokaut.pl kp@magnetise.pl http://futurecomms1.files.wordpress.com/2013/01/thanks.jpg

×