Kako smo razvijali orodje za barvne sheme

Predvidevali smo, da se bo vsako podjetje želelo na spletu predstaviti v svoji podobi. Spletne strani so v zadnjem času zaradi mobile-responsive design-a konvergirale v obliki elementov - postajajo si vse bolj podobne. Tako bo ostalo še kar nekaj časa, ker četudi imajo telefoni ali tablice večjo resolucijo, je človeško oko tisti omejujoči faktor, ki narekuje velikost elementov in pisave.
Tako je BARVNA SHEMA morda postala celo vodilni element za personalizacijo predstavitve na spletu

OSNOVNA BARVA PODJETJA

Pričeli smo iz izhodišča, da ima vsako podjetje eno osnovno oz. base barvo, ki je sestavni del blagovne znamke in s tem prepoznavnosti podjetja.

ACTION BARVA

Spletne storitve imajo rade koncept Action button, katerega namen je usmeritev pozornosti obiskovalca na element, ki ga želimo najbolj poudariti oz. izpostaviti (npr. Dodaj v košarico; Shrani, URL povezave v besedilu...). To je zelo smiselna rešitev, ko je potrebno uporabnika razbremeniti potrebe po podrobnem pregledu celotne vsebine in mu takoj usmeriti pozornost na bistvene zadeve.

V tej razvojni fazi Klik MALL-a je bil objavljen Google Material design, kjer je bil jasno prikazan BASE-ACCENT (action) koncept 2-eh barv, ki je postal osnova tudi za naše orodje. Poleg tega je Google ponudil še kar nekaj barv, na podlagi katerih smo ustvarili barvne teme, ki jih lahko zdaj uporabijo uporabniki Klik MALL.
Velik navdih je bil tudi Microsoft Metro design.

Kako ustvariti nekaj oblikovno všečnega z min. možnim vložkom in brez oblikovalskega pedigreja?

Na podlagi BASE-ACCENT koncepta smo sprogramirali orodje, ki v osnovi potrebuje LE ENO OSNOVNO BARVO (v tem primeru ena HEX barvna koda npr. #336699), za ustvarjanje celotne barvne sheme! Eden izmed glavnih ciljev je bil, da je vse skupaj zelo hitro in enostavno.

Barva texta (bela ali črna) je avtomatično določena glede na barvo ozadja (npr. gumba). Izbira prav tako temelji na izračunu kontrasta - kakšen text se glede na barvo ozadja bolje vidi? Bel ali črn?

Nike in Frozen za potrditev koncepta

Potrditev koncepta in orodja je prišla nekoliko po spletu okoliščin - ati je kupoval (Nike) superge za rekracijo, hčerka pa je 12h+/dan dihala z Disney-evo otroško uspešnico Frozen.

Ekstravaganca barv Nike superg

Nike superge so zadnja leta postajale vse bolj živih in nenavadnih barv. Nekoč so bile superge bele in črne, ostalo je bilo zelo nenavadno (ta slika danes ni nič nenavadnega, v 1994 pa je bila glavna zgodba). Kljub izrazitim barvnim spremembam v zadnjih letih je videz Nike (pa tudi Adidas,...) superg ostal skladen na pogled in večini zelo všečen. (Če dvomite o všečnosti, si poglejte njihove prihodke in rast)

Z nekaj testi na produktih teh oblikovalsko najbolj uspešnih izdelkov (iz popolnoma različnih panog) smo prišli do sledečih rezultatov:

Disney-eve barvne sheme

V tem istem času smo imeli doma zelo veliko (zelo-zelo, izredno veliko,... #insertyourbiggestsuperlative) navdušenja nad Disney-evo superuspešnico Frozen. In sem se spomnil, kako je znanec (z izkušnjami in poznavanjem plesne in glasbene industrije) omenil, da pri uspešnicah Disney-ja praktično nič ni naključno. Poleg likov, njihove starosti, oblačil... so eden super pomembnih faktorjev za otroško publiko tudi barve. Sodeč po stanju doma sem ocenil, da dobro vedo, kaj delajo. In ker je ati moral občasno kombinirati svoje delo in "princeskine" želje, smo skupaj naredili test orodja za barve, ki so jih pri Disney-u uporabili za dve glavni junakinji Elso in Anno

Pri določenih testih smo vnesli le osnovno (precej neobičajno na prvi pogled) barvo superg in pustili orodju, da izračuna barvno shemo. (base barva je enaka v obeh primerih, accent je pa v primeru A) izračunana, v B) pa ročno izbrana s slike superg.
Ujemanje kontrastne barve je bilo skoraj 100% Poleg tega je čisto mogoče, da naše izbiranje barve iz slike zgreši odtenek ali dva na sencah...

A) Avtomatični izračun

B) Ročna nastavitev glede na izbrane barve iz slike

Se pravi, da smo bili na pravi poti. Če je dovolj dobro za Nike in je dosegljivo za Klik MALL, takoj sprejmemo :-)

Glede na barvno skladnost teme, ki smo jo lahko dosegli z vnosom samo 1 barve, smo zaključili, da orodje deluje tudi za oblikovalsko manj vešče posameznike.

Nič ne more nadomestiti profesionalnega oblikovalskega znanja in verjetno obstajajo primeri, ko bi kdo morda želel kakšen barvni detajl nekoliko drugače.
Ampak glede na vložek (za novo temo zdaj potrebujemo cca. 1 min) smo z rezultati zelo zadovoljni in verjetno bo tudi velika večina uporabnikov sistema

Za tiste z več oblikovalske žilice smo pustili možnosti, da si sami ročno vnesejo accent barvo. Poleg tega obstaja tudi dodatni set 2-eh barv (npr. model Nike Kobe X Violet Blue je za doseganje boljšega ujemanja barvne sheme narekoval potrebo po 2-eh barvno-vsebinskih segmentih oz. setu 4-ih barv).

Barvne sheme za vaš profil

Razno

Filmi

Material design Paleta

Nike superge