SlideShare uma empresa Scribd logo
1 de 116
Baixar para ler offline
Dizajn za touch screen
Emanuel Blagonić
Blagonić Brothers
Dizajn za touch screen (WinDays 2013)
Isključite zvuk telefona
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Na koji način vršimo interakciju?
Dizajner   VS   Developer
Dizajn za touch screen (WinDays 2013)
Dizajner   Developer
Jesu li developeri u većini na
ovom predavanju?
Mi stvaramo proizvod
Dizajn za touch screen (WinDays 2013)
U trenutku kada se mijenja
način rada u aplikacijama
Koliko ljudi u publici ima
pametni telefon?
Dizajn za touch screen (WinDays 2013)
VI STE DIZAJNERI!
Ne mijenjajte navike
Ako ste do sada radili dobre aplikacije,
         raditi ćete ih i dalje
Pripazite na:
boje, tipografiju, raspored
elemenata 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.
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Definirajte prvo problem, a
onda rješenja. Krenite s
wireframeovima.
2. Olakšava li korištenje?
2012.
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Zapišite stvari koje možete/
želite popraviti/poboljšati.
3. Je li jasna za korištenje?
Hoće li aplikaciju moći
jednostavno koristiti – vaša
ciljana publika?
Konobaru je dovoljno 10 minuta
obuke za rad da bi mogao
početi koristiti POS Sector.
– Haris Čusto, POS Sector
Dizajn za touch screen
A wonderful interface to the
wrong features will fail.
– Jakob Nielsen
Prije početka – postavite prava pitanja...
1. Koja je namjena aplikacije?
Dizajn za touch screen (WinDays 2013)
2. Gdje će se koristiti
i na kojim uređajima?
Dizajn za touch screen (WinDays 2013)
3. Tko će koristiti aplikaciju?
Dizajn za touch screen (WinDays 2013)
I kada ste ovo odgovorili...
Krenite s wireframeovima*
People ignore design that
ignores people.
– Frank Chimero
2012.
Dizajn za touch screen (WinDays 2013)
Prije početka rada na Smart
Housekeepingu, dobili smo detaljnu
   dokumentaciju i inicijalne
          wireframeove.
Sve smo zanemarili!
Krenuli smo razraditi sučelje i
   interakcije – na papiru.
Dizajn za touch screen (WinDays 2013)
Nakon čega smo izradili low-fidelity
      interaktivni mockup.
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Bez interaktivnih wireframeova izgubili
 bismo dragocjeno vrijeme i ne bismo
mogli testirati sučelje u tako ranoj fazi.
Dizajn za touch screen (WinDays 2013)
Iskoristite whiteboard kako
biste skicirali osnovne
predloške i interakcije.
Testirajte na pravim
uređajima kako biste
provjerili npr. površinu klika
i tipografiju.
Boje, gradijenti i sjene
Boje su svugdje oko nas
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
http://www.colorschemer.com/
https://kuler.adobe.com/
Boje odaberite ovisno o
ciljanoj publici i tematici
aplikacije.
Ne pretjerujte s kontrastom.
JAKI   KONTRAST
#000   #fff



#ccc   #444
S gradijentima pažljivo
Ne zaboravite: svijetlo uvijek
dolazi “od gore”.
Submit


Submit
Iskoristite sjene (i drukčije tonove) za
          prikazivanje dubine
Dizajn za touch screen (WinDays 2013)
Ovo se nalazi
iznad ekrana.
Tipografija
      Tipografija Tipografija
          Tipografija
                       Tipografija

      Tipografija Tipografija
Tipografija Tipografija
                           Tipografija
                        Tipografija

              Tipografija         Tipografija
             Tipografija
Radite li nativnu aplikaciju –
poštujte standarde.
Radite li web aplikaciju –
odaberite prikladnu
tipografiju.
Kako odabrati pravi font?
1Illustration
 1Illustration
1Illustration
1Illustration
aegh! iIl1
aegh! iIl1
aegh! iIl1
aegh! iIl1
Veličinu slova definirajte
prema uređaju za koji
dizajnirate.
16, 18, 21, 24 piksela
za mobilne uređaje
18, 21, 24, 36 piksela
za tablete
21, 24, 36, 48 piksela
za desktop računala
Verdana i Tahoma
za sitan tekst
Vodite računa o jeziku
return
   retour
zurückkommen
  povratak
Odaberite uži font ako ćete
imati duge riječi.
http://ilovetypography.com/
http://www.typetester.org/
Poravnanje / grid
Dizajn za touch screen (WinDays 2013)
Radeći po gridu, povećavate
preglednost te olakšavate
korištenje vaše aplikacije.
Dizajn za touch screen (WinDays 2013)
Grupirajte elemente sličnih
funkcionalnosti kako biste
ubrzali rad u aplikaciji.
Ikone
A picture is worth a thousand
words. An interface is worth
a thousand pictures.
– Ben Schneiderman
Dizajn za touch screen (WinDays 2013)
Podižu uporabljivost aplikacije
I nema potrebe da imate dodatni tekst...
Prije početka odlučite kakve
ikone trebate – jednobojne ili
u 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!
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Dizajn za touch screen (WinDays 2013)
Every child is an artist. The
challenge is to remain an
artist after you grow up.
– Pablo Piccasso
Pitanja i odgovori
Želite li nastaviti ovaj
razgovor na kavi? Javite se!
( ja pijem kavu sa šlagom:)
Hvala!
emanuel@blagonic.com
twitter.com/emanuelblagonic
www.blagonic.com

Mais conteúdo relacionado

Semelhante a Dizajn za touch screen (WinDays 2013)

Semelhante a Dizajn za touch screen (WinDays 2013) (15)

(WS11) Nedim Šabić: Usability - Mjerilo kada je dovoljno fancy funkcija
(WS11) Nedim Šabić: Usability - Mjerilo kada je dovoljno fancy funkcija(WS11) Nedim Šabić: Usability - Mjerilo kada je dovoljno fancy funkcija
(WS11) Nedim Šabić: Usability - Mjerilo kada je dovoljno fancy funkcija
 
Expression Design
Expression DesignExpression Design
Expression Design
 
(WS14) Alen Cvitkovic - Web dizajneru, poštuj developera!
(WS14) Alen Cvitkovic - Web dizajneru, poštuj developera!(WS14) Alen Cvitkovic - Web dizajneru, poštuj developera!
(WS14) Alen Cvitkovic - Web dizajneru, poštuj developera!
 
Kako napraviti dobr
Kako napraviti dobrKako napraviti dobr
Kako napraviti dobr
 
Wireframing & UI design - Andrej Mlinarevic
Wireframing & UI design - Andrej MlinarevicWireframing & UI design - Andrej Mlinarevic
Wireframing & UI design - Andrej Mlinarevic
 
Expression blend
Expression blendExpression blend
Expression blend
 
Sve potrebne tehnologije za uspješno pokretanje servisa na mobilnom tržištu
Sve potrebne tehnologije za uspješno pokretanje servisa na mobilnom tržištuSve potrebne tehnologije za uspješno pokretanje servisa na mobilnom tržištu
Sve potrebne tehnologije za uspješno pokretanje servisa na mobilnom tržištu
 
(WS11) Emanuel Blagonić: Web dizajn za nedizajnere
(WS11) Emanuel Blagonić: Web dizajn za nedizajnere(WS11) Emanuel Blagonić: Web dizajn za nedizajnere
(WS11) Emanuel Blagonić: Web dizajn za nedizajnere
 
Kako napraviti dobru ppt prezentaciju
Kako napraviti dobru ppt prezentacijuKako napraviti dobru ppt prezentaciju
Kako napraviti dobru ppt prezentaciju
 
Kako napraviti dobru ppt prezentaciju
Kako napraviti dobru ppt prezentacijuKako napraviti dobru ppt prezentaciju
Kako napraviti dobru ppt prezentaciju
 
UX Dizajn i Kako ga (na)učiti
UX Dizajn i Kako ga (na)učitiUX Dizajn i Kako ga (na)učiti
UX Dizajn i Kako ga (na)učiti
 
Uvod u aplikacije - Luka Mandić
Uvod u aplikacije - Luka MandićUvod u aplikacije - Luka Mandić
Uvod u aplikacije - Luka Mandić
 
Operacijski Sustavi - Osnove
Operacijski Sustavi - OsnoveOperacijski Sustavi - Osnove
Operacijski Sustavi - Osnove
 
Seminar hipermedija
Seminar hipermedijaSeminar hipermedija
Seminar hipermedija
 
A0 Brošura
A0 BrošuraA0 Brošura
A0 Brošura
 

Dizajn za touch screen (WinDays 2013)