Miten luodaan yhtenäinen käyttöliittymä luovien alojen ammattilaisille?

Design system

UX/UI

Loupedeck tuottaa luovien alojen ammattilaisten arkea helpottavia työkaluja, erikoistuen erityisesti videon- ja kuvankäsittelyyn. Lokakuun lopussa Loupedeck julkisti uuden Loupedeck Creative Toolin (CT). CT:n myötä käyttö ei enää rajoitu vain valokuvaukseen ja videoeditointiin, vaan nyt kaikki luovan alan ammattilaiset, kuten esimerkiksi muusikot, voivat hyötyä Loupedeckista.

Lähtökohta

Loupedeck CT:n ytimessä on kustomoitavuus. Käyttäjillä on täysi vapaus kustomoida omat tapansa hyödyntää muun muassa Loupedeck CT:n kuutta kiertosäädintä ja valita mihin työkaluihin he haluavat nopean pääsyn laitteen kosketusnäytöltä. Myös muilta osiltaan CT on adaptoitavissa käyttäjän tarpeiden mukaan. Loupedeck CT tukee suoraan muun muassa Adoben Lightroomia, Photoshopia, Premiere Pro:ta ja Illustratoria. Käyttöliittymän suunnittelun lähtökohtana oli näyttää ja tuntua ammattikäyttäjille suunnatulta. 

Pienelle näytölle suunniteltaessa korostuu myös käyttöliittymässä käytettävä kirjasin. Käyttöliittymäsuunnittelussa käytettävän kirjasimen tavoittena oli olla tunnistettava, mutta myös saada mahdollisimman paljon merkkejä näkyviin pienessä tilassa unohtamatta samalla luettavuutta. Näin esimerksi Photoshopin pitkät toiminnot saadaan parhaimman mukaan toistettua kapealla kosketusnäytöllä.

 
Screenshot 2020-09-04 at 16.25.20-2

 Käyttöliittymäkomponenttien rooli on olla ja samalla mahduttaa mahdollisimman paljon merkkejä näkyviin pienessä tilassa.

Ratkaisu

  • Kisko Labs toteutti laitteen ja tietokoneella käytettävän hallintaohjelman käyttöliittymäkomponentit, värit ja typografiatyylit yhdessä Loupedeckin tiimin kanssa
  • Käyttöliittymäkirjaston pohjana hyödynnettiin Google Material Design -muotokieltä ajan ja resurssien säästämiseksi
  • Tavoitteena oli luoda uudelleenkäytettäviä komponentteja, jotta uusien näkymien tuottaminen olisi jatkossa mahdollisimman helppoa
Screenshot 2020-09-04 at 16.04.21-1

↑ Varhaisia luonnoksia laitteen ja  konfiguraattorin käyttöliittymäkomponenteista.


Katso allaolevasta videosta miten Loupedeck CT toimii:

“As someone who loves creative hardware solutions for digital software, the idea of something like the Creative Tool seems really great, giving a more fine-tuned and tactile approach for interacting with these purely software-based tools”

The Verge

Loupedeck CT on tilattavissa Loupedeckin omilta sivuilta.

HenriP

Kysy projektista

Henri Paltemaa
Designer
henri.paltemaa@kiskolabs.com