Design it in 14 days
3 likes1,484 views
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.
More Related Content
Similar to Design it in 14 days (20)
More from Krzysztof Piwowar (15)
Recently uploaded (20)
Design it in 14 days
- 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 [email protected] [email protected]
- 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
- 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
- 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
- 19. Detail screen - here you can scroll the content only vertically. Detail Pages
- 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
- 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
- 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 [email protected] [email protected] http://futurecomms1.files.wordpress.com/2013/01/thanks.jpg