Rovinj, 23. – 26. travnja 2012.
Metro UI - tajne velikih slova ijednobojnih ikonaEmanuel Blagonić@emanuelblagonicBlagonić Brothers - Extendis d.o.o.
Sponzori
Isključite zvuktelefona
O čemu će biti riječi u prezentaciji?              • Korisničko sučelje              • Metro UI                        – M...
UI
Što je to korisničko sučelje?
Im interested in making tangible              improvements and making better those              things that people do fift...
Zašto je važno?              • Vašu će aplikaciju koristiti tisuće ljudi              • Stvarate navike kod korisnika     ...
Korisničko sučelje nekad i danas
flickr.comWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Stolna računala              • Namijenjena profesionalcima              • Miš i tipkovnicaWINDAYS12 TECHNOLOGY OBRAZOVNI...
digitaltrends.comWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Uređaji osjetljivi na dodir              • Dostupni svima              • Koristimo ih intuitivnoWINDAYS12 TECHNOLOGY OBR...
msdn.comWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
Principi
Čisto i preglednoClean, light, fast
• Izbacite nepotrebne elemente              • Koristite jednostavnu tipografiju i boje              • Iskoristite whitespa...
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
Fokus na sadržajuContent, not chrome
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Sadržaj u prvom planu                        – Izbacite grafičke elemente koji nisu bitni                          za sa...
Steam Store, Windows 8 koncept Chrisa Prestona
TipografijaTypography
TIPOGRAFIJA                                            JE LIJEPA.                                             I TOČKA.WIND...
• Jedan od najvažnijih segmenata Metroa              • Tipografija naglašava sadržaj, ali je i lijepa              • Pripa...
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
Pokret i dodirAlive in motion
• Tranzicije i animacije                        – Tranzicije i animacije su jednako važne                          kao i U...
Tranzicije              • Koristimo ih za prikazivanje promjena                između aplikacija i različitih ekrana      ...
Animacije              • Koristimo ih za prikaz promjene na                trenutnom ekranu              • Animaciju može ...
Korisnik se mora osjećati posebno u svakom              trenutku. Interakcija između telefona ili              tableta i k...
Digitalna autentičnost Authentically Digital
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Metro je “digitalno” sučelje                        – Ne želimo stvarati iluziju “realnog” svijeta                      ...
Dizajnerski jezik
Struktura Metro aplikacije
ux.artu.tvWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
Pozadina (1000px do 1500px)Naslov aplikacijeNaslov grupeElementi u grupi
• Koristite je na početnom ekranu aplikacije              • Služi za razdvajanje “jednako važnog”                sadržaja ...
Statična pozadinaTaboviInformacije
• Slično panorami, ali razdvojeni ekrani                        – Bez dinamične pozadine                        – Za prika...
• Funkcionalnost “obične statične stranice”              • Premalo korištena funkcionalnost, ali                odlično rj...
9 savjeta
Poštujte principe
Pametno koristite ekrane
Razmišljajte o korisnicima
Kada niste sigurni, budite umjereni i jednostavni
Nemojte se bojati   istraživati
Stalno testirajte
Ne pretjerujte sPanoramom ;)
Tipografija je lijepa.Whitespace je ljepši.
Ne budite “naporni” s   notifikacijama
Pitanja
Hvala!
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Metro UI - Tajne velikih slova i jednobojnih ikona
Upcoming SlideShare
Loading in …5
×

Metro UI - Tajne velikih slova i jednobojnih ikona

1,257 views
1,146 views

Published on

Tijekom prošle godine u svijetu je prodano više od 170 milijuna pametnih telefona, a predviđa se da će do 2015. godine, svaki 8 stanovnik zemlje imati pametni telefon, a neki i tablet. Metro sučelje koje je Microsoft razvio za Windows Phone i Windows 8, drukčije je od ostalih sučelja na tržištu, zahtjeva posebnu pažnju i, unatoč naizglednoj banalnosti, krije brojne pametne trikove i dizajnerske prilike. Dođite čuti o glavnim smjernicama dizajna za Metro sučelje, na što paziti i kako iskoristiti neke revolucionarne mogućnosti kao što je Panorama. ----- [ENGLISH] This is a presentation for my talk on Microsoft Windays Conference 2012, held in Rovinj, Croatia. Talk was about Metro UI - explained in details. It is meant for developers to teach them what should they care when designing for the Metro design language.

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

  • Be the first to like this

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

No notes for slide

Metro UI - Tajne velikih slova i jednobojnih ikona

  1. 1. Rovinj, 23. – 26. travnja 2012.
  2. 2. Metro UI - tajne velikih slova ijednobojnih ikonaEmanuel Blagonić@emanuelblagonicBlagonić Brothers - Extendis d.o.o.
  3. 3. Sponzori
  4. 4. Isključite zvuktelefona
  5. 5. O čemu će biti riječi u prezentaciji? • Korisničko sučelje • Metro UI – Metro principi – Metro dizajnerski jezik • 9 savjetaWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  6. 6. UI
  7. 7. Što je to korisničko sučelje?
  8. 8. Im interested in making tangible improvements and making better those things that people do fifty to a hundred times a day. Im less interested in "vow" features that you use every 90 days and you never remember after that. Marko Ahtisaari, Global Head of Nokia Design http://vimeo.com/28758945WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  9. 9. Zašto je važno? • Vašu će aplikaciju koristiti tisuće ljudi • Stvarate navike kod korisnika • Definirate načine korištenja vaše aplikacijeWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  10. 10. Korisničko sučelje nekad i danas
  11. 11. flickr.comWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  12. 12. • Stolna računala • Namijenjena profesionalcima • Miš i tipkovnicaWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  13. 13. digitaltrends.comWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  14. 14. • Uređaji osjetljivi na dodir • Dostupni svima • Koristimo ih intuitivnoWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  15. 15. msdn.comWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  16. 16. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  17. 17. Principi
  18. 18. Čisto i preglednoClean, light, fast
  19. 19. • Izbacite nepotrebne elemente • Koristite jednostavnu tipografiju i boje • Iskoristite whitespace • Fokusirajte se na glavne zadatkeWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  20. 20. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  21. 21. Fokus na sadržajuContent, not chrome
  22. 22. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  23. 23. • Sadržaj u prvom planu – Izbacite grafičke elemente koji nisu bitni za sadržaj • Ne zaboravite: od previše sadržaja, gubi se fokus korisnikaWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  24. 24. Steam Store, Windows 8 koncept Chrisa Prestona
  25. 25. TipografijaTypography
  26. 26. TIPOGRAFIJA JE LIJEPA. I TOČKA.WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  27. 27. • Jedan od najvažnijih segmenata Metroa • Tipografija naglašava sadržaj, ali je i lijepa • Pripazite na veličine naslova i teksta • Koristite Segoe UIWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  28. 28. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  29. 29. Pokret i dodirAlive in motion
  30. 30. • Tranzicije i animacije – Tranzicije i animacije su jednako važne kao i UI aplikacije • Telefon i tablet ne predstavljaju samo jedan ekran, oni su “svemir u malom”WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  31. 31. Tranzicije • Koristimo ih za prikazivanje promjena između aplikacija i različitih ekrana • Tranzicije trebaju biti dorađene – Dakle, bez “trzanja”WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  32. 32. Animacije • Koristimo ih za prikaz promjene na trenutnom ekranu • Animaciju može ali i ne mora pokrenuti korisnikWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  33. 33. Korisnik se mora osjećati posebno u svakom trenutku. Interakcija između telefona ili tableta i korisnikovih želja mora biti brza i fluidna, kako bi se korisnik osjećao ugodno u korištenju uređaja, ali i aplikacije.WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  34. 34. Digitalna autentičnost Authentically Digital
  35. 35. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  36. 36. • Metro je “digitalno” sučelje – Ne želimo stvarati iluziju “realnog” svijeta unutar aplikacije • Pridržavajte se svih smjernica kod dizajna za Metro, i neće biti problemaWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  37. 37. Dizajnerski jezik
  38. 38. Struktura Metro aplikacije
  39. 39. ux.artu.tvWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  40. 40. Pozadina (1000px do 1500px)Naslov aplikacijeNaslov grupeElementi u grupi
  41. 41. • Koristite je na početnom ekranu aplikacije • Služi za razdvajanje “jednako važnog” sadržaja • Uvijek je vidljiv dio sljedećeg dijela ekrana • Ne pretjerujte s PanoramomWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  42. 42. Statična pozadinaTaboviInformacije
  43. 43. • Slično panorami, ali razdvojeni ekrani – Bez dinamične pozadine – Za prikaz veće količine podataka • Koristite ih za prikaz sadržaja kojeg biste inače prikazali korištenjem tabovaWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  44. 44. • Funkcionalnost “obične statične stranice” • Premalo korištena funkcionalnost, ali odlično rješenje za prikaz velike količine jedinstvenih podatakaWINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
  45. 45. 9 savjeta
  46. 46. Poštujte principe
  47. 47. Pametno koristite ekrane
  48. 48. Razmišljajte o korisnicima
  49. 49. Kada niste sigurni, budite umjereni i jednostavni
  50. 50. Nemojte se bojati istraživati
  51. 51. Stalno testirajte
  52. 52. Ne pretjerujte sPanoramom ;)
  53. 53. Tipografija je lijepa.Whitespace je ljepši.
  54. 54. Ne budite “naporni” s notifikacijama
  55. 55. Pitanja
  56. 56. Hvala!
  57. 57. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not beinterpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×