Vodič

Mrtve jednostavne tehnike upotrebe markiranja u korisničkom sučelju

Proizvod je igra. UI je pozornica.

Po prirodi sam prilično utilitaristički dizajner, pa sam morao naučiti načine kako ovdje i tamo dodati malo cvjetanja dok sam se preusmjerio na proizvod i dalje od čiste upotrebljivosti.

utilitaristički: naglasak na korisnosti / praktičnosti, a ne privlačnosti

Najbolja mjesta za traženje mogućnosti robne marke jesu područja koja uređuju ili uvode sadržaj. Elementi korisničkog sučelja kao što su stranice za prskanje, područja zaglavlja i modalci izvrsna su mjesta koja omogućuju malo markiranja i znakova unutar vaše aplikacije. Postavili su pozornicu za ostatak stranice i - poput zavjesa za pozornicu - lako im se izmaknu.

Ali stvarnost je da većina nas nema Etsy kalibra ili ilustratora u stanju kad smo željeli učiniti naš dosadni modal uvoza privlačnijim za prodajne police…

... ili kada oni manje iskonski grafički nemaju pojma odakle započeti za nešto poput jednostavne stranice za brizganje.

UX Power Tools nudi vam leđa s nekoliko osnovnih načina za postizanje ciljeva marke bez oduzimanja sati vašeg vremena. Evo nekoliko jednostavnih načina korištenja boja, grafike i uzoraka kako biste dodali markiranje proizvoda u svoj UX tijek rada.

Stranice za označavanje robne marke

Korišteni alati: dodatak IconFlower, dodatak za šarene gradijente, IconJar, Coolors

Ovo je "najčišći" element UI u ovom članku, jer je njegova jedina svrha postaviti pozornicu za ostatak proizvoda. Mislim da ovo sredstvo obično spada u područje marketinga, ali s kime se šalimo ... nemate taj luksuz (ili ako to učinite, nikad neće ispustiti top 3 na njihovoj zaostaloj listi prioriteta).

Prestanite provjeravati Dribbble i osjećajte se nedovoljno! Dribbble je poput muzeja listajućih stranica, a sve su to veličanstvena umjetnička djela. Na svu sreću, ne treba vam toliko da napravite kompetentnu stranicu s uprskom koja služi svrsi.

Zamislimo da stvarate novu stranicu nove aplikacije koja vam pomaže da naučite kako popraviti stvari oko kuće.

Nazovimo to "Fixt"

Počnimo jednostavno. Vjerojatno želite na njemu staviti svoje ime, a ako imate i logotip, najbolje je ići s oba:

(Lijevo) Naša aplikacija, (Desna) Prava Srednja aplikacija.

U redu, ovo je prilično dosadno, ali bar mi govori što je aplikacija. U slučaju Medium, njihovo je korisničko sučelje veliko na bijelom prostoru, tako da vas postavlja zbog njihovog jednostavnog, uklonjenog sučelja. Njihov kapital je također dobro uspostavljen, tako da se oni mogu mimoići samo s markom.

Ali za našu aplikaciju ovo je pomalo stan. A budući da smo startup, moramo napraviti veći utjecaj. Invertirajmo boju pozadine i logotipa:

(Lijevo) Naša aplikacija, (Desna) Prava Twitter aplikacija.

Koristimo ravnu plavu poput Twittera, pa je bolje ispuniti zaslon bojom kao i oni. Naša aplikacija se bavi akcijom i želimo joj dati malo više dubine. Fotografijom možete postići dubinu, ali fotografije dionica izgledaju beživotno i, osim ako nisu prilagođene, nisu baš marka.

Jedan od načina na koji možete dodati dubinu je zamjena čvrstog ispuna za gradijent. U našem primjeru boja sekundarne marke djeluje dobro:

(Lijevo) Naša aplikacija, (Desna) Prava LinkedIn aplikacija.

Ne djeluje svaka kombinacija boja branda, a ponekad možda nemate ni sekundarnu boju. Kod LinkedIna oni koriste jednostavan radijalni gradijent koji se proteže od središta. Koristimo svoju sekundarnu boju marke i punjenje s donje desne strane. Ili je jedno samo dandy.

Ako nemate boju sekundarne marke, skočite na coolors.co i uključite osnovnu boju, zaključajte je, a zatim pritisnite razmaknicu dok ne pronađete kombinaciju koja vam se sviđa. Možete koristiti i gradijentni dodatak za skicu da biste ovo učinili lakšim:

Idemo samo malo dalje i dodajmo više dubine stvaranjem uzorka:

(Lijevo) Naša aplikacija, (Desna) Prava aplikacija.

Laserlike imaju sjajnu kombinaciju oblika. Za našu aplikaciju želimo nagovijestiti upotrebu pa sam zgrabio set ikona iz Nove koji su "Alati" ove aplikacije za vjerovanje. Tada sam upotrijebio fenomenalni dodatak Icon Flower Avadh Dwivedi da spiralim ikone iz sredine.

Rad.

To su četiri jednostavna načina marke na svojoj početnoj stranici. Koji ćete odabrati ovisi malo o vlastitim željama, ali i vašim ciljevima i položaju na tržištu. Za startupove bez jednakosti marke, napravite grešku na oprezu: upotrijebite svoje ime, svoj znak i dodajte grafiku koja nagovještava svrhu vaše aplikacije. Za više poznatih marki možda ćete biti u redu s jednostavnijim pristupom.

Iskreno, sve ovo izgleda dobro. Prijavi me! Moram popraviti toalete!

Odmaknimo se od mobilnog i pogledajmo neke načine brendiranja aplikacije za stolna računala.

Načini markiranja

Alati: Confetti dodatak, Nucleo

Moji su načini obično dosadni AF. U tome nema ništa loše. Oni su funkcionalni! Ali kad se ekrani počnu pretvarati u marketinške i / ili prodajne materijale, marka proizvoda se malo gubi.

(Lijevo) Nije toliko markirano. (Desno) Mnogo više markirano.

LinkedIn koristi jednostavno stiliranu karticu da vas gurne (s lijeve strane), ali nedavno je napredovao s novom značajkom (s desne strane). Oboje su u redu i dobro prilagođeni za svoj cilj. Lijeva je nježna potisak, desna je slavljenija i pokušava privući vašu pažnju.

Pogledajmo kako to možemo primijeniti na modal. Zamislite da dizajniramo nadzornu ploču za aplikaciju [generički veliki podaci] (a također zamislite da idete ružičasto i ljubičasto za naše marke boja). Želimo omogućiti korisnicima da mogu dodati vlastite kartice na nadzornu ploču gdje mogu odabrati koje podatkovne točke treba prikazivati:

Funkcionalno i vizualno ovo je ... u redu. Dovraga, čak smo išli s kartama s dva stupca za karte! Kako oštroumno!

Ali tada marketing stavlja ovaj ekran na demonstraciju i vraća se rekavši da je "mali crv". Bez straha, bacićemo malo boje u to gornje zaglavlje!

Sada se ovaj modal osjeća kao da je živ, ali još uvijek ne povezuje mnogo s markom. Ovdje ćemo malo zafrkavati. Imajte na umu da u našem timu nema nevjerojatnih ilustratora, ali imamo licencu za Nucleo. Možemo uhvatiti obojenu verziju nejasno ikone statističkog izgleda:

Da, znam da piše

Zatim upadnemo u našu datoteku jednostavno zamijenimo boje za robne marke:

Povećali smo i zaglavlje modalusa kako bismo napravili mjesta, što nam je omogućilo da se malo poigramo s tipom.

Možda bismo htjeli usporiti prije nego što nam ljudi počnu plaćati da napravimo ovu umjetnost!

Ali ne, nećemo se zaustaviti na tome. Nećemo stati dok u pozadinu ne dodamo nasumično razvrstane ikone.

Znam da mislite: "Hej Christiane, obećao si da će ovo biti lako. Nemam vremena da napravim sve te grafike i tako ih delikatno složim. "Ne bojite se, jednostavno sam zgrabio gomilu korisničkih ikona iz Nucleovog" glifa "skupa:

Tada je upotrijebio najtopliji novi dodatak Sketch, Confetti od Yummygum.

Voila! Modal hum-drum pretvorili ste u brendirani komad proizvoda za koji će se i marketinški ponosno pokazati.

Rekli su da ružičasta i ljubičasta nikada neće uspjeti. Pa, bili su u krivu! Pravo? Zar ne ?! Možda su bili u pravu.

Sada je vizualni dizajn puno nijansiraniji nego što sam predstavio u ovom članku. A tamo zaista postoje nevjerojatni dizajneri koji mogu učiniti mnogo nevjerovatnije radove nego što mogu ja.

Ali ponekad nemate na raspolaganju taj resurs i pomoću nekoliko jednostavnih trikova poput ovih, možete vam pomoći da proizvod koji se upotrebi pretvori u marketinški proizvod.

Slobodno zgrabite izvornu datoteku u nastavku ako ne vjerujete kako sam napravio ova remek-djela.

Kad nisam zauzet razbijanjem osnovnih tehnika marke, radim na UX Power Tools kako bih vam pomogao u stvaranju vlastitog dizajnerskog sustava.