Dizajn za touch screenEmanuel BlagonićBlagonić Brothers
Isključite zvuk telefona
Na koji način vršimo interakciju?
Dizajner   VS   Developer
Dizajner   Developer
Jesu li developeri u većini naovom predavanju?
Mi stvaramo proizvod
U trenutku kada se mijenjanačin rada u aplikacijama
Koliko ljudi u publici imapametni telefon?
VI STE DIZAJNERI!
Ne mijenjajte navikeAko ste do sada radili dobre aplikacije,         raditi ćete ih i dalje
Pripazite na:boje, tipografiju, rasporedelemenata i ikone
Nativna   VS   Web aplikacija
Različit pristup dizajnu
Radite li nativnu aplikaciju,koristite propisane elemente.
Radite li web aplikaciju,nemojte pretjerati sa ...
“Sastojci” dobre touch screen aplikacije
1. Rješava li problem?
2007.
Definirajte prvo problem, aonda rješenja. Krenite swireframeovima.
2. Olakšava li korištenje?
2012.
Zapišite stvari koje možete/želite popraviti/poboljšati.
3. Je li jasna za korištenje?
Hoće li aplikaciju moćijednostavno koristiti – vašaciljana publika?
Konobaru je dovoljno 10 minutaobuke za rad da bi mogaopočeti koristiti POS Sector.– Haris Čusto, POS Sector
Dizajn za touch screen
A wonderful interface to thewrong features will fail.– Jakob Nielsen
Prije početka – postavite prava pitanja...
1. Koja je namjena aplikacije?
2. Gdje će se koristitii na kojim uređajima?
3. Tko će koristiti aplikaciju?
I kada ste ovo odgovorili...
Krenite s wireframeovima*
People ignore design thatignores people.– Frank Chimero
2012.
Prije početka rada na SmartHousekeepingu, dobili smo detaljnu   dokumentaciju i inicijalne          wireframeove.
Sve smo zanemarili!
Krenuli smo razraditi sučelje i   interakcije – na papiru.
Nakon čega smo izradili low-fidelity      interaktivni mockup.
Bez interaktivnih wireframeova izgubili bismo dragocjeno vrijeme i ne bismomogli testirati sučelje u tako ranoj fazi.
Iskoristite whiteboard kakobiste skicirali osnovnepredloške i interakcije.
Testirajte na pravimuređajima kako bisteprovjerili npr. površinu klikai tipografiju.
Boje, gradijenti i sjene
Boje su svugdje oko nas
http://www.colorschemer.com/https://kuler.adobe.com/
Boje odaberite ovisno ociljanoj publici i tematiciaplikacije.
Ne pretjerujte s kontrastom.
JAKI   KONTRAST
#000   #fff#ccc   #444
S gradijentima pažljivo
Ne zaboravite: svijetlo uvijekdolazi “od gore”.
SubmitSubmit
Iskoristite sjene (i drukčije tonove) za          prikazivanje dubine
Ovo se nalaziiznad ekrana.
Tipografija      Tipografija Tipografija          Tipografija                       Tipografija      Tipografija TipografijaT...
Radite li nativnu aplikaciju –poštujte standarde.
Radite li web aplikaciju –odaberite prikladnutipografiju.
Kako odabrati pravi font?
1Illustration 1Illustration1Illustration1Illustration
aegh! iIl1aegh! iIl1aegh! iIl1aegh! iIl1
Veličinu slova definirajteprema uređaju za kojidizajnirate.
16, 18, 21, 24 pikselaza mobilne uređaje
18, 21, 24, 36 pikselaza tablete
21, 24, 36, 48 pikselaza desktop računala
Verdana i Tahomaza sitan tekst
Vodite računa o jeziku
return   retourzurückkommen  povratak
Odaberite uži font ako ćeteimati duge riječi.
http://ilovetypography.com/http://www.typetester.org/
Poravnanje / grid
Radeći po gridu, povećavatepreglednost te olakšavatekorištenje vaše aplikacije.
Grupirajte elemente sličnihfunkcionalnosti kako bisteubrzali rad u aplikaciji.
Ikone
A picture is worth a thousandwords. An interface is wortha thousand pictures.– Ben Schneiderman
Podižu uporabljivost aplikacijeI nema potrebe da imate dodatni tekst...
Prije početka odlučite kakveikone trebate – jednobojne iliu boji.
Radite li web aplikaciju,svakako koristite icon font.
http://subway.pixle.pl/http://www.iconswindows.com/http://icons8.com/http://icomoon.io/
Budite originalni!
Every child is an artist. Thechallenge is to remain anartist after you grow up.– Pablo Piccasso
Pitanja i odgovori
Želite li nastaviti ovajrazgovor na kavi? Javite se!( ja pijem kavu sa šlagom:)
Hvala!emanuel@blagonic.comtwitter.com/emanuelblagonicwww.blagonic.com
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Upcoming SlideShare
Loading in …5
×

Dizajn za touch screen (WinDays 2013)

431 views

Published on

I bez da govorimo o Windowsima 8, koji su u svojoj suštini donijeli fundamentalnu podršku za interakciju s korisnikom putem ekrana osjetljivih na dodir, svakog se mjeseca predstavi nekoliko novih uređaja s takvim ekranima. Vjerojatno ste i sami svjesni izazova koji stoje pred vama, ukoliko razvijate aplikacije kojima je primarni način interakcije putem ekrana osjetljivih na dodir. Ovdje neće biti riječi o programiranju, ovdje će biti riječi o onome što mnogi smatraju ključnom pretpostavkom uspjeha kod sve zahtjevnijih kupaca i korisnika - o dizajnu i korisničkom sučelju. Velike su razlike između dobre i loše dizajnirane aplikacije, ali malene su razlike između dobre i vrhunske aplikacije, a upravo su to stvari o kojima ću pričati na ovom predavanju, iz iskustva nekoga tko je dizajnirao touch screen aplikacije i prije nego što je prvi iPad bio u planu.

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
431
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dizajn za touch screen (WinDays 2013)

  1. 1. Dizajn za touch screenEmanuel BlagonićBlagonić Brothers
  2. 2. Isključite zvuk telefona
  3. 3. Na koji način vršimo interakciju?
  4. 4. Dizajner VS Developer
  5. 5. Dizajner Developer
  6. 6. Jesu li developeri u većini naovom predavanju?
  7. 7. Mi stvaramo proizvod
  8. 8. U trenutku kada se mijenjanačin rada u aplikacijama
  9. 9. Koliko ljudi u publici imapametni telefon?
  10. 10. VI STE DIZAJNERI!
  11. 11. Ne mijenjajte navikeAko ste do sada radili dobre aplikacije, raditi ćete ih i dalje
  12. 12. Pripazite na:boje, tipografiju, rasporedelemenata i ikone
  13. 13. Nativna VS Web aplikacija
  14. 14. Različit pristup dizajnu
  15. 15. Radite li nativnu aplikaciju,koristite propisane elemente.
  16. 16. Radite li web aplikaciju,nemojte pretjerati sa ...
  17. 17. “Sastojci” dobre touch screen aplikacije
  18. 18. 1. Rješava li problem?
  19. 19. 2007.
  20. 20. Definirajte prvo problem, aonda rješenja. Krenite swireframeovima.
  21. 21. 2. Olakšava li korištenje?
  22. 22. 2012.
  23. 23. Zapišite stvari koje možete/želite popraviti/poboljšati.
  24. 24. 3. Je li jasna za korištenje?
  25. 25. Hoće li aplikaciju moćijednostavno koristiti – vašaciljana publika?
  26. 26. Konobaru je dovoljno 10 minutaobuke za rad da bi mogaopočeti koristiti POS Sector.– Haris Čusto, POS Sector
  27. 27. Dizajn za touch screen
  28. 28. A wonderful interface to thewrong features will fail.– Jakob Nielsen
  29. 29. Prije početka – postavite prava pitanja...
  30. 30. 1. Koja je namjena aplikacije?
  31. 31. 2. Gdje će se koristitii na kojim uređajima?
  32. 32. 3. Tko će koristiti aplikaciju?
  33. 33. I kada ste ovo odgovorili...
  34. 34. Krenite s wireframeovima*
  35. 35. People ignore design thatignores people.– Frank Chimero
  36. 36. 2012.
  37. 37. Prije početka rada na SmartHousekeepingu, dobili smo detaljnu dokumentaciju i inicijalne wireframeove.
  38. 38. Sve smo zanemarili!
  39. 39. Krenuli smo razraditi sučelje i interakcije – na papiru.
  40. 40. Nakon čega smo izradili low-fidelity interaktivni mockup.
  41. 41. Bez interaktivnih wireframeova izgubili bismo dragocjeno vrijeme i ne bismomogli testirati sučelje u tako ranoj fazi.
  42. 42. Iskoristite whiteboard kakobiste skicirali osnovnepredloške i interakcije.
  43. 43. Testirajte na pravimuređajima kako bisteprovjerili npr. površinu klikai tipografiju.
  44. 44. Boje, gradijenti i sjene
  45. 45. Boje su svugdje oko nas
  46. 46. http://www.colorschemer.com/https://kuler.adobe.com/
  47. 47. Boje odaberite ovisno ociljanoj publici i tematiciaplikacije.
  48. 48. Ne pretjerujte s kontrastom.
  49. 49. JAKI KONTRAST
  50. 50. #000 #fff#ccc #444
  51. 51. S gradijentima pažljivo
  52. 52. Ne zaboravite: svijetlo uvijekdolazi “od gore”.
  53. 53. SubmitSubmit
  54. 54. Iskoristite sjene (i drukčije tonove) za prikazivanje dubine
  55. 55. Ovo se nalaziiznad ekrana.
  56. 56. Tipografija Tipografija Tipografija Tipografija Tipografija Tipografija TipografijaTipografija Tipografija Tipografija Tipografija Tipografija Tipografija Tipografija
  57. 57. Radite li nativnu aplikaciju –poštujte standarde.
  58. 58. Radite li web aplikaciju –odaberite prikladnutipografiju.
  59. 59. Kako odabrati pravi font?
  60. 60. 1Illustration 1Illustration1Illustration1Illustration
  61. 61. aegh! iIl1aegh! iIl1aegh! iIl1aegh! iIl1
  62. 62. Veličinu slova definirajteprema uređaju za kojidizajnirate.
  63. 63. 16, 18, 21, 24 pikselaza mobilne uređaje
  64. 64. 18, 21, 24, 36 pikselaza tablete
  65. 65. 21, 24, 36, 48 pikselaza desktop računala
  66. 66. Verdana i Tahomaza sitan tekst
  67. 67. Vodite računa o jeziku
  68. 68. return retourzurückkommen povratak
  69. 69. Odaberite uži font ako ćeteimati duge riječi.
  70. 70. http://ilovetypography.com/http://www.typetester.org/
  71. 71. Poravnanje / grid
  72. 72. Radeći po gridu, povećavatepreglednost te olakšavatekorištenje vaše aplikacije.
  73. 73. Grupirajte elemente sličnihfunkcionalnosti kako bisteubrzali rad u aplikaciji.
  74. 74. Ikone
  75. 75. A picture is worth a thousandwords. An interface is wortha thousand pictures.– Ben Schneiderman
  76. 76. Podižu uporabljivost aplikacijeI nema potrebe da imate dodatni tekst...
  77. 77. Prije početka odlučite kakveikone trebate – jednobojne iliu boji.
  78. 78. Radite li web aplikaciju,svakako koristite icon font.
  79. 79. http://subway.pixle.pl/http://www.iconswindows.com/http://icons8.com/http://icomoon.io/
  80. 80. Budite originalni!
  81. 81. Every child is an artist. Thechallenge is to remain anartist after you grow up.– Pablo Piccasso
  82. 82. Pitanja i odgovori
  83. 83. Želite li nastaviti ovajrazgovor na kavi? Javite se!( ja pijem kavu sa šlagom:)
  84. 84. Hvala!emanuel@blagonic.comtwitter.com/emanuelblagonicwww.blagonic.com

×