tutorial

Døde enkle teknikker til brug af branding i UI

Produktet er et skuespil. UI er scenen.

Jeg har en tendens til at være en temmelig utilitaristisk designer af natur, så jeg har været nødt til at lære måder at tilføje lidt blomstrer her og der, da jeg har flyttet fokus på produkt og væk fra ren anvendelighed.

utilitaristisk: en vægt på brugbarhed / praktisk snarere end tiltrækningskraft

De bedste steder at se efter brandingmuligheder er områder, der indrammer eller introducerer indhold. Brugergrænsefladeelementer som splash sider, headerområder og modaler er gode steder at tilføre en smule branding og karakter inde i din app. De sætter scenen for resten af ​​siden og - som en scenegardin - kommer de let ud af vejen.

Men virkeligheden er, at de fleste af os ikke har en Etsy-kaliber illustrator eller ikon-savant klar, når vi vil gøre vores kedelige bulkimport-modal mere attraktiv for salgsdæk ...

... eller når de af os, der er mindre grafisk skrå, ikke har nogen idé om, hvor vi skal starte med noget som en simpel plaskeside.

UX Power Tools har din ryg med et par basale måder at nå dine branding-mål på uden at tage timer på din tid. Her er nogle enkle måder at bruge farve, grafik og mønstre til at tilføje produktmærke til din UX-arbejdsgang.

Splash-sider med branding

Brugte værktøjer: IconFlower Plugin, Colourful Gradients Plugin, IconJar, Coolors

Dette er det “reneste” brand UI-element i denne artikel, fordi dets eneste formål er at sætte scenen for resten af ​​produktet. Jeg tror, ​​at dette aktiv typisk falder under markedsføringsområdet, men hvem er det, vi grinder ... du har ikke den luksus (eller hvis du gør det, vil den aldrig knække top-3 på deres prioriterede liste med efterslæb).

Stop med at kontrollere Dribbble og føl dig utilstrækkelig! Dribbble er som et museum med plaskesider, og de er alle storslåede kunstværker. Heldigvis behøver du ikke så meget for at lave en kompetent splashside, der tjener et formål.

Lad os forestille os, at du opretter en splashside til en ny app, der hjælper dig med at lære, hvordan du løser tingene rundt i huset.

Lad os kalde det "Fixt"

Lad os starte enkelt. Du vil sandsynligvis have dit navn på det, og hvis du også har et logo-mærke, er det bedst at gå med begge:

(Venstre) Vores app, (Højre) Den rigtige Medium-app.

Okay, dette er temmelig kedeligt, men det fortæller mig i det mindste, hvad appen er. I Medium's tilfælde er deres brugergrænseflade tungt på mellemrummet, så det sætter dig op til deres enkle, afdækkede interface. Deres brand equity er også veletableret, så de kan klare sig med bare deres mærke.

Men for vores app føles dette lidt fladt. Og da vi er en opstart, er vi nødt til at gøre en større indflydelse. Lad os invertere baggrunds- og logofarve:

(Venstre) Vores app, (Højre) Den rigtige Twitter-app.

Vi bruger en flad blå som Twitter, så det føles bedre at fylde skærmen med farver, som de gør. Vores app handler om handling, og vi ønsker at give den lidt mere dybde. Du kan opnå dybde med fotografering, men stockfotos føles livløs, og medmindre de er brugerdefinerede, er de ikke rigtig på brand.

En måde du kan tilføje dybde på er at bytte dit faste udfyldning efter en gradient. I vores eksempel fungerer den sekundære mærkefarve godt:

(Venstre) Vores app, (Højre) Den rigtige LinkedIn-app.

Ikke alle mærkefarvekombinationer fungerer, og nogle gange har du måske ikke engang en sekundær farve. Med LinkedIn bruger de en simpel radial gradient, der strækker sig fra midten. Vi bruger vores sekundære mærkefarve og udfyldning neden til højre. Enten er bare dandy.

Hvis du ikke har en sekundær mærkefarve, hopp over til coolors.co og tilslut din basefarve, lås den, og tryk derefter på mellemrumstasten, indtil du finder en kombination, du kan lide. Du kan også bruge gradientplugin til skitse for at gøre dette lettere:

Lad os gå lidt videre og tilføje mere dybde ved at oprette et mønster:

(Venstre) Vores app, (Højre) En rigtig app.

Laserlignende har en fantastisk kombination af former. Til vores app ønsker vi at antyde brug, så jeg greb et sæt ikoner fra Nova, der er “Værktøjer” i denne make-faith app. Derefter brugte jeg Avadh Dwivedi's fantastiske Icon Flower-plugin til at spiralere ikonerne ud fra midten.

Rad.

Det er fire enkle måder at brand din splash side på. Hvilken du vælger afhænger lidt af din egen præference, men også af dine mål og position på markedet. Forstart ved forsigtighed ved startups uden brand equity, så brug dit navn, dit mærke og tilføj grafik, der antyder, at din app er formålet. For mere etablerede mærker kan du have det fint med en enklere tilgang.

Helt ærligt ser disse alle godt ud. Tilmeld mig! Jeg har toiletter til at ordne!

Lad os bevæge os væk fra mobilen og se nogle måder at brand en desktop-app på.

Branding Modals

Værktøjer: Confetti-plugin, Nucleo

Mine modaler er typisk kedelige AF. Der er ikke noget galt med det. De er funktionelle! Men når skærme begynder at blive markedsførings- og / eller salgsmateriale, går produktmærket lidt tabt.

(Venstre) Ikke så mærkevarer. (Højre) Meget mere branded.

LinkedIn bruger et simpelt stilkort til at skubbe til dig (til venstre), men for nylig gik det stort med en ny funktion (til højre). Begge er fine og velegnede til deres mål. Venstre er en blid skubbe, højre er mere festlig og prøver at fange din opmærksomhed.

Lad os se, hvordan vi kan anvende dette til en modal. Forestil dig, at vi designer et betjeningspanel til [generisk big data] -app (og forestil dig også, at vi går med pink og lilla til vores brandfarver). Vi ønsker at give brugerne mulighed for at tilføje deres egne kort til instrumentbrættet, hvor de kan vælge, hvilke datapunkter de skal vise:

Funktionelt og visuelt er dette ... fint. Helvede, vi gik endda med et to-søjles layout til kortene! Hvor vildt!

Men derefter sætter marketing denne skærm i en demo og vender tilbage med at sige, at den var "lidt trist". Ingen frygt, vi vil smide lidt farve i den øverste overskrift!

Nu føles denne modal som om den er i live, men den forbinder stadig ikke meget til mærket. Det er her vi får lidt lyst. Husk, vi har ingen fantastiske illustratører på vores team, men vi har en licens til Nucleo. Vi kan få fat i farvet version af et vagt statistisk ikon:

Ja, jeg ved, det står “Medicinsk”, men ingen behøver at vide det.

Derefter slipper vi ind i vores fil, og vi udveksler blot farverne til mærkefarver:

Vi øgede også overskriften på modalen for at gøre plads, hvilket gjorde det muligt for os at lege med typen lidt.

Vi ønsker måske at bremse, før folk begynder at betale os for at lave denne kunst!

Men nej, vi stopper ikke der. Vi stopper ikke, før vi har tilføjet tilfældigt assorterede ikoner i baggrunden.

Jeg ved, at du tænker, ”Hej Christian, du lovede, at dette ville være let. Jeg har ikke tid til at lave alle disse grafikker og arrangere dem så delikat. ”Frygt ikke, jeg greb simpelthen et par brugsikoner fra Nucleos“ glyph ”-sæt:

Brugte derefter Internets hotteste nye Sketch-plugin, Confetti af Yummygum.

Voila! Du har forvandlet en hum-trum modal til et mærket stykke produkt, som selv marketing vil være stolt af at vise frem.

De sagde, at lyserødt og lilla aldrig ville fungere. Nå, de tog forkert! Ret? Okay ?! Måske havde de ret.

Nu er Visual Design meget mere nuanceret, end jeg har præsenteret i denne artikel. Og der er virkelig fantastiske designere derude, der kan gøre meget mere fantastisk arbejde end jeg kan.

Men nogle gange har du ikke den ressource tilgængelig, og at bruge et par enkle tricks som disse kan hjælpe dig med at omdanne et brugbart produkt til et omsætteligt produkt.

Tag dig fri til kildefilen nedenfor, hvis du er vantro til, hvordan jeg har lavet disse mesterværker.

Når jeg ikke har travlt med at nedbryde grundlæggende branding-teknikker, arbejder jeg på UX Power Tools for at hjælpe dig med at hjælpe dig med at oprette dit eget designsystem.