Če se tudi ti mudiš v UX ali UI vodah, zagotovo Photoshop obvladaš že miže —  je namreč eno izmed glavnih orodij za vizualizacijo spletnih strani in trgovin. A časi se spreminjajo: zdaj je med nami tudi program Sketch, ki smo ga v naši ekipi preprosto morali preizkusiti, saj je obljubljal večjo prilagodljivost. Kako se je obnesel? To ti razkrivamo spodaj!

Preklop iz Photoshopa na Sketch

Seveda je vsem, ki smo Photoshop spoznali in vzljubili v srednji šoli, v njem nadgrajevali znanje in ga tudi vsakodnevno uporabljali v službi, ideja o menjavi programa kar šokantna.

A če ne preizkusiš, ne veš! Mi smo se zato kar brez obotavljanja lotili testiranja. Že prvo srečanje s Sketchem in vizualizacijo prvega projekta nas ni pustilo ravnodušnih; program je namreč prilagojen UI in UX oblikovalcem, zato smo se v njem hitro udomačili in začeli še bolj uživati v delu.

Osnova

V osnovi je Sketch zastavljen zelo enostavno. Vse se dogaja na artboardih (bližnjica: A), ki jih ustvarimo, združujemo, jim določamo velikost itn.  Znotraj strani tako lahko ustvarimo več artboardov in jim določimo layout za različne naprave (tablice, telefoni, prenosni računalnik …).

barbaba1Oblikovanje poteka na artboardih, ki jih lahko poljubno spreminjamo in organiziramo.

Izdelava vizuala strani je zato precej enostavnejša. Izdelan vizual nato lahko kopiramo v več kopij artboardov in na vsaki različici kopiramo, brišemo ali dodajamo elemente, hkrati pa so nam na razpolago vse variacije prikaza vizuala: za namizje, tablico in mobilne modele. Ko element kopiramo iz prvega artboarda na drugega, se ta prilepi na enako pozicijo, kot v »originalu« in tako poskrbi, da ne pride do nepotrebnih odstopanj.

Ustvarjanje stilov in simbolov

Nabor simbolov in stilov si lahko uredimo sami, tako, da ustvarimo Priročnik stilov. Pri tem je treba upoštevati konsistenco tipografije pri vizualizaciji. Orodje Sketch tekstovni stil (Text style) pri tem omogoča ustvarjanje seznama slogov za večje število različic. Osnovni seznam lahko izgleda nekako takole:

  • H1,
  • H2,
  • H3,
  • H4,
  • body tekst,
  • tekst gumbov,
  • linki navigacije

Vzemimo za primer naslove. Po hierarhiji najprej definiramo velikost fontov, njihovo barvo ter podatke shranimo kot tekstovni stil z ustreznim imenom, ki ga določimo sami (H1,H2, H3 …). Kasneje, ko izdelujemo vizual, zato lahko z le enim klikom izberemo definiran stil ter ga uporabljamo skozi celoten proces. Če se v procesu odločimo za morebitne spremembe velikosti fonta (npr. H2), mu preprosto spremenimo velikost in shranimo oz. osvežimo font. S tem je font H2 spremenjen po celotnih vizualih, kjer je bila ta velikost predvidena.

barbara2Z izbranimi predlogami lahko enostavno oblikujemo vse tekstovne vsebine.

Ustvarjanje, duplikacija in spremembe simbolov se izvajajo na enak način, kot pri tekstovnih stilih. Vzemimo za primer vizualizacijo oblike noge spletne strani. V tem primeru nogo kreiramo kot simbol; ob izdelavi vsake podstrani tako le dodamo kreiran simbol Noge, ob spremembah znotraj simbola pa bo veljalo enako, kot pri fontih: ena sprememba se izvede na vseh straneh, kjer je ta simbol vključen. Super kajne? :)

barbara3
Preprosta uporaba in izdelava simbolov.

Simbol lahko ustvarimo in shranimo tudi znotraj drugega simbola, le-tega pa znotraj še enega simbola. Vanj lahko dodajamo tudi custom tekste, kar jih naredi še bolj uporabne in prilagodljive. Enostavno dostopamo tudi do shranjenih barv, kjer ob izbranem elementu s klikom spremenimo že prej definirano barvo.

barbaa4
Elementom določamo barve, način mešanja, prosojnost itd.

Plugini

Sketch ponuja številne plugine, a je, kot vedno, potrebna zmernost, zato priporočamo le tiste, ki pri procesu ustvarjanja prihranijo čas.
Mi smo se odločili za slednje: Auto Layout, Launchpad, UxPin, Dynamic buttons. Za lažjo namestitev pa priporočamo obisk http://sketchtoolbox.com/.

Kaj pa prostor?

Še ena prednost Sketcha je njegova skromnost pri zasedanju tvojega diska. Vsi vemo, da moramo ne glede na to, kako veliko prostora imamo, sčasoma zaradi zasičenja datotek posegati po selekciji in brisanju prevelikih datotek. Pri Sketchu pa nam vsaj ni treba skrbeti, ko vizuale podvajamo, kot to recimo velja za končne datoteke Photoshopa.

Seveda se najde še veliko več – tako pomanjkljivosti kot tudi prednosti, ki pa jih najlažje najdeš, če program preizkusiš. Mi smo ga prav lepo sprejeli medse, saj nam prihrani veliko časa, zato nam v primeru dodatnih vprašanj brez težav lahko tudi pišeš.

Barbara Arnolj

UX in UI oblikovalka

Razmišljanje o tem, kako svet spremeniti na lepše je vsakodnevna stalnica. Najbolj jo navdušujejo smernice oblikovanja in kako se te razvijajo, ki dajo nov zagon ter ideje pri oblikovanju. Seveda strmi k temu, da sledi tem trendom in hkrati izumiti kaj povsem novega.