Zakaj je Sketch nujna oprema vsakega UX&UI oblikovalca?

Č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 …).

Oblikovanje 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.

Z 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? :)

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.

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

Barbare ni več z nami v pisarni, a verjamemo, da se tudi drugod odlično znajde. Delček nje smo vseeno obdržali pri nas – za lep spomin. :)

Preklop iz Photoshopa na Sketch

Osnova

Ustvarjanje stilov in simbolov

Plugini

Kaj pa prostor?

Barbara Arnolj

Ne spreglej sorodnih člankov

Kafka: Zmogljiva rešitev za prikaz dogodkov v realnem času

Digitalna preobrazba spletne trgovine ni enostavna, je pa nujna

Vse poti vodijo v Škofjo Loko

Zakaj je Sketch nujna oprema vsakega UX&UI oblikovalca?

Preklop iz Photoshopa na Sketch

Osnova

Ustvarjanje stilov in simbolov

Plugini

Kaj pa prostor?

Deli

Barbara Arnolj

Ne spreglej sorodnih člankov

Kafka: Zmogljiva rešitev za prikaz dogodkov v realnem času

Digitalna preobrazba spletne trgovine ni enostavna, je pa nujna

Vse poti vodijo v Škofjo Loko