Oblikovanje v točkovni mreži

V tem članku vam bomo predstavili oblikovanje z 8-točkovno mrežo, saj prav takšno uporabljamo tudi mi. Predstavili bomo, kako uporabna je v vseh digitalnih projektih, še posebej pa v produktnem oblikovanju.

Je slikovna pika enaka točki?

Točka (ang. point oziroma pt) je enota s katero oblikujemo uporabniške vmesnike. Ta se lahko spreminja, glede na specifikacije naprave, za katero izvozimo kanvas. V praksi to pomeni, da za iPhone 12 Pro oblikujemo na kanvasu velikosti 375 x 812 pikslov, izvozimo pa ga trikrat večjega, pri 1170 x 2532 pikslih. Oblikovanje pri manjših velikostih nam omogoča lažje pretvorbe elementov v različne velikosti, ki jih naprave zahtevajo, hkrati pa lahko ohranjamo popolno upodabljanje slikovnih pik (pikslov). Tako je lahko ena točka pretvorjena v 1, 4 ali 9 slikovnih pik pri velikostih @1x, @2x ali @3x (tako označujemo različne izvozne velikosti).

Zakaj 8?

Številka osem se preprosto pomanjšuje in povečuje za naprave, ki jih uporabljamo. Največkrat uporabljene izvozne velikosti so @0.5x, @0.75x, @1x, @1.5x, @2x, @3x, @4x. To so tudi velikosti, ki jih uporabljata Apple in Google, za njune operacijske sisteme pa največkrat oblikujemo. Prav tako pa sta števili 4 in 8 preprosti za množenje in ponudita konsistentne ter dovoljšne presledke, ko ju uporabljamo za razvrščanje elementov.

Morda 4?

Pri številki osem smo omejeni na števila 8, 16, 32, 48 … medtem, ko bi kdaj radi izbrali na primer 12. To lahko dosežemo z uporabo bolj natančne mreže s 4 točkami. Vsa ostala pravila ostanejo enaka, le da začnemo pri pol manjši vrednosti in tako ohranimo vse vrednosti 8-točkovne mreže, hkrati pa pridobimo še števila 4, 12, 20, 24, 28 … Izbrati moramo torej mrežo, ki nam kar najbolj pomaga pri oblikovanju, razvoju in enotnosti – vedno pa obstajajo izjeme, ko se nekaj ne bo prilegalo v izbrano mrežo, zato lahko takrat ta pravila prekršimo. Le da se ne dogaja prepogosto.

Uporaba pri grafičnih elementih

Osem- oziroma štiri-točkovno mrežo uporabljamo za vse elemente znotraj nekega likovnega izdelka. To pomeni, da po njej oblikujemo tako tipografijo, kjer so velikosti črk ter višina vrstic večkratniki izbranega števila, kot ikone, ki jih izvozimo pri različnih velikostih. Mrežo uporabljamo tudi pri postavitvi elementov ter ‘belem prostoru’ oziroma presledkih. Za spletne projekte ponavadi uporabljamo presledke velikosti 8, 12, 16 in 24 ter za res velike prostore 32 točk oziroma pikslov. Z definirano mrežo je preprosteje ohranjati konsistentnost skozi oblikovanje, je logično, hkrati pa poenostavimo implementacijo tudi razvijalcem.

Našo ekipo sestavljajo izkušeni digitalni produktni oblikovalci, ki imajo posluh za individualne zahteve in bodo vaše ideje oblikovali v privlačne koncepte. Stremimo k uresničevanju vsake zamisli naših strank in grafične zagate preoblikujemo v virtualne uspešnice. Izpolnite naš kontaktni obrazec, da lahko skupaj poiščemo rešitev za vaše podjetniške izzive.

Nedavno objavljeno

Pritegnite pozornost s prvim prelomom spletne strani

Vsebina nad prvim prelomom spletne strani je izjemno pomembna, saj je to prva stvar, ki jo bodo obiskovalci vaše spletne strani videli. To je prva priložnost, da jih pritegnete in jim ponudite, kar iščejo.

Z UX do višjih konverzij v spletnih trgovinah

Vsak lastnik spletne trgovine si želi doseči visoke stopnje konverzije na svojem spletnem mestu. Če bi radi izboljšali vaše obstoječe stanje in povišali vašo konverzijo, je rešitev preprosta – zagotovite sijajno uporabniško izkušnjo (UX).

Nedavno objavljeno

Pritegnite pozornost s prvim prelomom spletne strani

Vsebina nad prvim prelomom spletne strani je izjemno pomembna, saj je to prva stvar, ki jo bodo obiskovalci vaše spletne strani videli. To je prva priložnost, da jih pritegnete in jim ponudite, kar iščejo.

Z UX do višjih konverzij v spletnih trgovinah

Vsak lastnik spletne trgovine si želi doseči visoke stopnje konverzije na svojem spletnem mestu. Če bi radi izboljšali vaše obstoječe stanje in povišali vašo konverzijo, je rešitev preprosta – zagotovite sijajno uporabniško izkušnjo (UX).

Vsak piksel šteje

Vsak piksel šteje