SIBIUL VERDE

Fii verde!

Scroll

CLIENTUL

„Sibiul Verde” a fost o idee ce a apărut în timpul unui hackaton în anul 2016 și a fost extinsă în timpul unui alt hackaton în anul 2019. Principalul scop al acestui proiect este să informeze locuitorii orașului Sibiu despre colectarea selectivă a deșeurilor, importanța reciclării și a consumul responsabil.

Proiectul a fost inițiat de Fundația Comunitară Sibiu, împreună cu wenglor.

PROVOCAREA

Clientul a dorit să vină în ajutorul locuitorilor orașului Sibiu cu o singură sursă de informare, unde toate informațiile despre reciclare și colectarea selectivă a deșeurilor să fie ușor accesibile. 

Sarcina noastră a fost atât să creăm acest produs, cât și să imaginăm tot branding-ul vizual asociat. La acest pas însă, cererea a fost ca design-ul produsului să fie creat doar în varianta pentru telefoane mobile.

Călătoria

Proiectul a debutat cu o întâlnire în persoană, prin intermediul căreia am avut o mai bună imagine de ansamblu asupra cine este „Sibiul Verde”, urmată de stabilirea identității de brand. 

BRANDING

Rolul nostru a fost să înțelegem clientul, să creăm un „filtru” ce se potrivește cu viziunea acestuia asupra produsului finit, iar mai apoi să trecem totul prin acel „filtru” pentru a avea un rezultat final puternic din punct de vedere vizual.

După discuția inițială, am identificat punctele principale ale brandului vizual, după cum urmează:

  • forme rotunjite – apropiate de natură
  • un stil formal, dar totuși non-convențional
  • grija pentru mediu trebuie să fie tema principală
  • un număr de culori puternic saturate
  • axare pe imagini în loc de ilustrații

Cu acestea în minte, am trecut la pasul următor.

Stylescape-uri

Pentru a ne asigura că am înțeles viziunea clientului, și mai ales, ca și clientul să se asigure că am înțeles viziunea lor, am ales să detaliem totul într-un format vizual. Formatul ales a fost stylescape-ul: un colaj de elemente media pre-existente (ex. font-uri, imagini, elemente grafice, culori) din diverse surse. Cele 4 direcții oferite au fost grafic, natură, oraș și contrast.

Design-ul primului stylescape a fost axat pe culori pastel, acestea dând o senzație de confort și relaxare, cu un număr mare de nuanțe de verde. Elementele prezentate sunt bazate pe ilustrații rotunjite și forme geometrice simple.

Al doilea design conține mai puține elemente grafice, oferind un aspect mai aerisit. De asemenea, acesta are mai puține culori, mai multe colțuri și imagini ce se suprapun.

Stylescape-ul oraș se axează pe un număr mare de culori de bază, toate fiind derivate din culorile principale are orașului Sibiu. Există mai puțin spațiu între elemente, textul se suprapune cu alte elemente și tema grafică principală este inspirată de oraș în sine.

Cercurile și liniile curbate reprezintă tema principală a ultimului stylescape. Împreună cu un număr mare de culori principale și imagini axate pe conceptul de oraș ecologic, rezultatul final este unul curat, cu o combinație de elemente cu contrast puternic, pe o „tablă” aerisită, potrivit pentru publicul țintă.

Stylescape-ul ales a fost cel din urmă menționat, acesta devenind punctul de pornire pentru logo și styleguide-uri.

LOGO

Având o bună imagine de ansamblu asupra direcției generale de branding, am continuat cu design-ul logo-ului.

Am prezentat 3 variante diferite de logo, toate pe brand, dar unicate in propriul lor fel:

Prima opțiune a fost o variantă stilizată a orizontului unui oraș modern, cuprinsă de o creangă de frunze, reprezentând ideea de grijă pentru oraș și pentru mediu.

În al doilea design, am continuat ideea de cuprindere, axată pe un element familiar din clădirile medievale ale Sibiului – ochiul.

In final, a treia opțiune a fost folosirea formelor a celor 3 turnuri principale din orașul Sibiu împreună cu o frunza, ce simbolizează grija pentru natură.

A doua și a treia opțiune au trecut în runda următoare, dar după o bătălie aprigă și mici schimbări, câștigătorul a fost ales:

Câștigătorul

.

Animația de încărcare

Plecând de la logo-ul ales, am creat o animație de încărcare a paginii ce va întâmpina vizitatorii pe website.

Style guide & brand guide

Punând cap la cap totul din pașii anteriori, câteva variante diferite de styleguide-uri au fost create, dintre care s-a ales folosirea celei prezente în această secțiune.

La finalul proiectului, odată ce totul a fost la locului lui, am creat un brand guide complet, detailând toate aspectele identității vizuale a brand-ului „Sibiul Verde”.

Harta vizuală a site-ului și wireframes

Pentru a oferi clientului o privire de ansamblu clară asupra felului în care website-ul va fi structurat și ce funcționalități vor exista pe diverse pagini, am oferit atât o hartă vizuală a acestuia, cât și wireframe-uri detaliate pentru fiecare pagină în parte.

Design-ul website-ului

Website-ul fiind creat pentru a fi folosit în principal de pe telefoane mobile, design-ul a fost unul similar cu cel al aplicațiilor mobile moderne, astfel încât utilizatorul să găsească o familiaritate în momentul în care îl folosește.

Mod întunecat

Un mod întunecat este adiția perfectă pentru website-ul Sibiul Verde, potrivindu-se cu tematica generală. eco 

Am implementat un buton ce schimbă desing-ul website-ului între tematica întunecată și cea luminoasă, precum și o setare ce va trece website-ul pe tema întunecată dacă sistemul de operare de pe dispozitivul de pe care este accesat acesta are deja această opțiune setată. Bineînțeles, totul este în conformitate cu normele GDPR, inclusiv setarea ce ține minte tema selectată de utilizator.

Căutare pe Întregul site

Pentru că întregul scop al proiectului a fost oferirea de informații către utilizatori, funcționalitatea principală a website-ului este căutarea pe întreg site-ul.

Există diferite tipuri de conținut disponibile pe website (deșeuri, întrebări frecvente, articole și mituri) prin care utilizatorii pot căuta. Căutarea se face prin toate aceste tipuri, iar mai apoi rezultatele vor fi grupate corespunzător. Toate acestea se întâmpla fără ca pagina să se reîncarce, menținând experiența similară unei aplicații mobile.

 

Alte funcționalități remarcabile

Pentru a spori funcționalitatea puternică de căutare pe întreg website-ul, am adăugat următoarele funcționalități notabile, cerute de client:

Sinonime

Deoarece „fân” și „paie” se referă la același lucru, căutarea pentru oricare dintre acești termeni ar trebui să rezulte în aceeași informație afișată utilizatorului. Am oferit o secțiune de „sinonime” pentru fiecare termen căutat, astfel încât administratorii să poată decide ce termeni ar trebui să afișeze același rezultat.

Monitorizarea cuvintelor cheie

Pentru a ne asigura că website-ul oferă rezultate relevante, am oferit o funcționalitate administratorilor website-ului de a vedea ce căutări sunt efectuate de utilizatori – în conformitate cu prevederile GDPR.
Administratorii au acces la un panou de control dedicat, în care cei mai căutați termeni sunt afișați, permițându-le să creeze conținut nou, axat pe ceea ce publicul caută.

Elemente pentru social media

Pentru lansarea produsului, am oferit diverse elemente pentru social media, cu design-uri diferite în funcție de platforma pentru care au fost gândite.

Ghid de management al website-ului

Deoarece website-ul a devenit destul de complex, un ghid cuprinzător de utilizare a website-ului a fost realizat. Ca rezultat, tot ceea ce poate fi realizat utilizând panoul de administrare a website-ului a fost detaliat și scris într-un document PDF ușor de parcurs și înțeles.