Ekata prototipovi

Cilj ovih novih proba jeste da:
1 – Pojednostavimo dizajn / „uklonimo višak”
2 – Poboljšamo interakciju na mobilnom
3 – Pojednostavimo strukturu sadržaja i ažuriranje sajta

Probajte ove prototipove i na mobilnom i na laptopu:

01Dva kruga

Ova proba je najbliža prethodnom rešenju koje je na http://staging.ekata.rs, jer sadrži dva segmenta kruga sa tekstom između, ali nudi nekoliko poboljšanja:

• Jasnija interakcija: kartice/thumbnailovi se automatski rotiraju kad se stranica učita, što sugeriše da kartice možemo da skrolujemo.
• Elegantniji izgled: razdvajamo thumbnail od informacije, tako da kartice više nisu nezgrapno kvadratne ili pravougaone, nego kružne, i precizno se dodiruju. Tekst više ne pokriva sliku, a prostor ekrana je bolje iskorišćen.
• Izbegavanje kolor-haosa: svi thumbnailovi su crno-beli dok se ne „fokusiraju”, što izbegava vizuelni haos koji na stranici uzrokuju slike različitog kolorita (a to je situacija koju ćemo teško izbeći).
• Bolje korišćenje fontova: za tekstualni deo stranice sada koristimo veće i elegantnije fontove (kao npr. u Brand Book-u), da bi kratki tekstovi izgledali bolje i upečatljivije („obični” mali fontovi su i dalje na raspolaganju ako nam treba više informacija na stranici).
• Jednostavnija struktura: ako kliknete na logo, otvoriće se meni koji je sada jednostavniji — ima 4 glavne kategorije (Program / Proizvodi / Događaji (tipa radionice, svadbe ili bilo šta u zakup) / O nama) i 4 prostora.

02Karusel

Ova verzija sadrži sva poboljšanja iz „Dva kruga” i nudi dodatne „popravke”:

• Jedan krug, a ne dva. Dva kružna segmenta koja smo imali do sada pomalo su konfuzna i za posetioce i za ažuriranje. Umesto toga, sada imamo samo jedan krug sa thumbnailovima.
• Jednostavnija interakcija. Umesto kombinacije vertikalnog i horizontalnog skrola (na mobilnom), sada imamo samo vertikalni skrol, tako da cela stranica prolazi „prirodnije”.
• Jasnija struktura kruga. Dok je u verziji sa dva kruga bilo pomalo teško uopšte i razumeti da je u pitanju krug (pogotovo na mobilnom), ovde je potpuno jasno, bez ikakve sumnje.

03Atrium

Nakon gomile varijanti karusela koje sam probao, a koje sve sadrže kružne slike i kružni pokret, zaključio sam — pošto krug dolazi od zgrade — da najiskrenija reprezentacija kruga nisu kružne slike, nego 3D prostor u obliku kruga.

• 3D „unutar zgrade”. Ova varijanta, pogotovo na većim ekranima, najbolje odražava kružnu arhitekturu zgrade: imamo osećaj kao da smo unutar atrijuma, okruženi sadržajima.
• Kontrast. Stranica sada ima belu i crnu zonu. Taj kontrast dodaje dinamiku, da nije sve belo i anemično, a pomaže i lakšem razumevanju strukture stranice (slike na belom, tekst na crnom).
• Back cover. Sigurno ste u svim verzijama primetili preloader, koji pokazuje jednu veliku sliku dok se učitava ostatak stranice. U ovoj verziji koristimo tu istu sliku kao back cover. Za razliku od 99,99% onih koji veliku sliku stavljaju na početak stranice, mi njome završavamo prezentaciju.
• Nažalost, ova ideja ponovo uvodi horizontalni skrol koji (iako lepo izgleda) malo komplikuje interakciju.

Napomena:
Evo, čisto radi poređenja, jedne polu-ideje iz koje sam razvio verziju Atrium. Ovde imamo vertikalan krug/cilindar u kome se vrte kartice. Ne izgleda dobro kao Atrium (niti ima konceptualnog smisla), ali ima veoma jednostavnu i fluidnu interakciju na mobilnom:

Radeći na ovim probama, sve vreme sam se pitao:
„Šta JOŠ može da bude višak?”

04Monogram

Ako uklonimo sav višak, ostaje nam logo. U ovoj verziji koristimo logo (monogram) kao glavni vizuelni element koji uramljuje thumbnailove.

• Fokus na Ekata brend. Koristimo logo na najizraženiji mogući način — sve se dešava „unutar logoa”. Ili, kako bi se reklo, bukvalno „iconic design” :)
• Ekstremni minimalizam. Ovo rešenje je verovatno najviše „on-brand” od svih ovih proba, ne (samo) zbog velikog logoa, nego zbog beskompromisnog vizuelnog minimalizma.
• Jasnija struktura stranice. Stvari se lako čitaju. Logo na belom. Tekst na crnom. Back cover. Futer sa informacijama.

Šta dalje?

• Testirajte. Probajte ove verzije i vidite koja vam najbolje „leži” (u smislu interakcije) i koja kreativna direkcija najbolje predstavlja ideju Ekate.
• Struktura. Složio sam se sa Draganom i Andrejom da strukturu sajta treba promeniti/pojednostaviti, jer su se prioriteti promenili od prošle godine. Ovde sam predložio jednu izmenu, ali finalna struktura sajta treba da nastane kroz dogovor sa Draganom i Andrejem.