Laboratorijska vježba 1

Uvod u alate za dizajn

korisničkog sučelja
O laboratorijskim vježbama
• 7 termina po 4 sata + nadoknada
• LV1, LV2, LV3: Dizajniranje korištenjem wireframeing ili prototyping
alata
• LV4: Priprema rasterskih grafika
• LV5: Priprema vektorskih grafika
• LV6: Podjela i rad na projektnim zadacima
• LV7: Prezentacije projektnih zadataka
• 5 zadaća (LV1-LV5) → Upload na Loomen → Ocjena
• 1 završni projektni zadatak
• Ocjena
• 0.1 * dolasci
• 0.25 * zadaće
• 0.25 * projektni zadaci
• 0.4 * usmeni

Dizajn Korisničkog Sučelja 2

Alati za dizajn korisničkog sučelja
• Engl. Wireframing
• Strukturno oblikovanje i dizajniranje korisničkog sučelja (najčešće u
kontekstu web aplikacija) prije same izrade i implementacije s
naglaskom na što bolji korisnički doživljaj
• Alati
• Lunacy (desktop – Win10)  ovaj alat će se koristiti na LV
• Sketch (desktop - MacOS)
• Adobe XD (desktop)
• Mockflow (online)
• Wireframe.cc (online)
• Balsamiq (online i desktop)
• Moqups (online)
• Axure RP (desktop)
• …

Dizajn Korisničkog Sučelja 3

Lunacy
• Alat za grafičko dizajniranje korisničkog sučelja:
• Službena stranica za dokumentaciju i download:
https://icons8.com/lunacy
• Za potrebe laboratorijskih vježbi potrebno je instalirati ovaj
alat na vašem računalu!
• Nije potrebna registracija
• Besplatno korištenje svih funkcionalnosti
• Moguće dodavati plaćene sadržaje kroz aplikaciju
• Windows alternativa za Sketch (MacOS)
• Otvara, uređuje i sprema .sketch datoteke

Dizajn Korisničkog Sučelja 4

Lunacy
• Omogućava skiciranje korisničkog sučelja
• Izbor tipa i veličine podloge ovisno o vrsti aplikacije (web,
desktop, mobilna i dr.)
• Crtanje osnovnih geometrijskih oblika i umetanje teksta
• Integriran set ikona i najčešćih elemenata korisničkog
sučelja
• Moguće detaljno podešavanje i dizajniranje pojedinog
elementa
• Izrada sučelja na više stranica i hijerarhija
• Dodavanje slika
• Export napravljenih radova (za upload na Loomen)

Dizajn Korisničkog Sučelja 5

Lunacy (opis glavnog sučelja)
Traka glavnih postavki
Glavna alatna traka

Postavke
Hijerarhija odabranog
objekata objekta
- -
Zbirka Dodatne
standardnih Artboard opcije
objekata (podloga fiksne veličine)
(library)
Canvas
(prostor za crtanje)

Dizajn Korisničkog Sučelja 6

Lunacy (osnovni alati)
• Artboard tool
• Kreiranje podloge fiksne veličine za
određenu primjenu na koju se postavljaju
drugi objekti
• S desne strane je prikaz predefiniranih
podloga za različite uređaje
• Image tool
• Dodavanje slike s računala
• Pen tool
• Crtanje vlastitih prilagođenih oblika
• Pencil tool
• Crtanje „olovkom”

Dizajn Korisničkog Sučelja 7

Lunacy (osnovni alati)
• Shape tool
• Kreiranje osnovnih oblika
kao što su:
• Pravokutnik
• Trokut
• Mnogokut
• Zvijezda
• Elipsa
• Strelica
• Linija
• Za svaki oblik je moguće
podešavati niz parametara
kao što je vidljivo s desne
strane (npr. veličina, boja
ispuna, boja rubova i sl.)

Dizajn Korisničkog Sučelja 8

Lunacy (osnovni alati)
• Text tool
• Umetanje proizvoljnog teksta
• Postavke vezane za tekst mogu
se podešavati u postavkama s
desne strane
• Eyedropper tool
• Alat za promjenu boje
označenog objekta u boju na
koju se klikne ili neku od
ponuđenih boja (desno)
• Icon tool
• Omogućuje odabir i umetanje
neke od predefiniranih ikona
Dizajn Korisničkog Sučelja 9
Lunacy (objekti i hijerarhija)
• Važno je koristiti sučelje za hijerarhiju objekata s lijeve strane gdje se može odabrati
jedan ili više objekata istovremeno
• Odabrani objekti mogu se grupirati ili pomicati u hijerarhiji gore/dolje

• Primjer ispod prikazuje jednostavnu hijerarhiju dizajna stranice veličine 1920x1080px

Dizajn Korisničkog Sučelja 10

Lunacy (library)
• Moguće je koristiti
biblioteku (library) gotovih
objekata (ikona, slika,
ilustracija i sl.) te
specifičnih elemenata
korisničkog sučelja
pojedinih uređaja (UI Kits)
• Biblioteku je moguće
proširiti i sa svojim
izrađenim elementima
(symbols) ili npr. definirati
svoj stil teksta

Dizajn Korisničkog Sučelja 11

Lunacy (export i save)
• Rad je moguće exportirati klikom
na File>Export… u nekoliko
ponuđenih formata (desno).
• Rad se može snimiti klikom na
File>Save u .sketch format te ga se
može nastaviti uređivati na istom ili
drugom računalu.

Dizajn Korisničkog Sučelja 12

Važni linkovi za učenje
• Službena Lunacy dokumentacija gdje su opisane sve
funkcionalnosti:
• https://docs.icons8.com
• Online video sadržaj za učenje:
• Što je to Lunacy? → https://youtu.be/kUvupLUoBjQ
• Kako radi Lunacy? – Primjer 1 → https://youtu.be/rM4JKPeaISo
• Kako radi Lunacy? – Primjer 2 → https://youtu.be/7E_3ZZhHeoQ
• Rad s objektima u Lunacy alatu → https://youtu.be/6ngD7d-81QY
• Biblioteka ugrađenih objekata → https://youtu.be/bjWRlugUhf4

Dizajn Korisničkog Sučelja 13

Vježba
• U alatu Lunacy
izraditi nacrt web
stranice za online
trgovinu kao što je
prikazano na slici.

• Pridržavati se
forme i rasporeda
objekata, ali
koristiti proizvoljne
slike, boje,
ilustracije i sl.

Dizajn Korisničkog Sučelja 14

Zadaća (LV1)
• U alatu Lunacy
skicirati početnu
stranicu www.ferit.hr
• Napraviti export u
.png ili .pdf format
• Rezultat predati na
Loomen stranici
kolegija (odjeljak LV)

Dizajn Korisničkog Sučelja 15