Konfetti - Hönnunarkerfi Nova

Skoða lausn

Viðskiptavinur

Nova

Ár

2020 - Í dag

Hlutverk

Design system

,

User experience

,

Nova hefur aldrei látið neitt stoppa sig í þróun nýrra lausna og afurða. Óhætt er að segja að þrátt fyrir að Nova sé titlað fjarskiptafyrirtæki að þá gerir það miklu meira en það. Til þess að mæta hraðanum á þróun ákváðu þau að þróa hönnunarkerfi.

Eitt af markmiðum í vinnunni var að hefja umræðu um hvað skyldi kalla kerfið. Nova fór á stjá og gerði það sem þau gera best og komu með nafnið Konfetti, sem að lýsir hönnunarkerfi sem Nova væri með mjög vel. Það er mjög mikilvægt að gefa kerfinu nafn sem allir tengja við og geta elskað. Það þarf að vera full skuldbinding frá hagsmunaaðilum og starfsmönnum til þess að gott hönnunarkerfi geti átt farsælt líf.
Forsíða hönnunarkerfis

Stærsta skrautsafn í heimi!

Þetta hönnunarkerfi er banki fullur af skrauti svo sem mælistikum, stafrænum einingum og reglum til þess að Nova geti haldið áfram að vera fyrst með tækninýjungar á markað.

Megintilgangur skrautsafnsins er að halda samræmi á öllum stafrænum miðlum sem Nova heldur úti svo sem við aðal vef, appið, stólinn og tilfallandi markaðsvefi.

Auk þess er safnið hugsað til þess að flýta fyrir útgáfu stafrænna verkefna, minnka álag á starfsmenn, spara vinnu og tíma. Skrautsafnið er hugsað í heild með skalanleika í huga og eru allar einingar með sínar eigin breytur, skalast í flestar stærðir og eru sveigjanlegar.

Skalanlegar einingar

Konfetti innheldur fleiri/fleira en eina grind. Einingar voru hannaðar fyrir litla og stóra skjái og var sérstök áhersla lögð á vinnu í kringum skölun eininga, að hún skalist raunverulega í hönnun.

Dæmi um einingu

Kerfi til að sýna skölun

Til þess að hjálpa forriturum að skilja uppbyggingu og skölun eininga í grindinni var hannað sérstakt skölunarkerfi þar sem hægt er að draga skjái til og sjá hvernig hegðun í skölun á sér stað.

Dmi um skölunarkerfi

Samstilltar einingar

Einingarnar voru hannaðar í svokölluðu "component stacking" kerfi, en þar er hver eining samtengd einni höfuðeiningu. Samtengingin gerir okkur kleift að breyta öllum samtengdum einingum í einu með því að breyta höfuð einingunni.

Þannig er hægt að uppfært til dæmis íkona eða hnappa allstaðar í einu.

Dæmi um samtenging eininga

Skalanlegt letur

Ein mest krefjandi áskorunin í verkefninu var að “hanna” skalanlegt letur. Hönnun skalanlegs leturs reyndist stór áskorun þar sem skalanleikinn er ekki línulegur heldur byggist á formúlu sem móta þurfti sérstaklega. Í kóða er það þó einfaldara en við þurftum að setja það upp þannig að það sæjist í hönnun líka.

Í kerfinu er allt letur skalanlegt samkvæmt "responsive type" aðferðarfræðinni. Með responsive type er letrinu gefin skilgreind hámarks og lákmarksstærð. Lágmarksstærð hjá Konfetti er 20pt.

Letrið skalast hlutfallslega á milli skjástærða. Til þess að reikna letur á sérstakri skjástærð að þá er skilgreint punktastærð letursins í skjárstærðum 1200px og uppúr. Næst er dregin lína þaðan niður í 20punkta en með því að horfa á skalann er hægt að mæla út hversu stórt letrið á að vera í ákveðinni skjástærð.

Skalanleiki leturs
Hluti af markmiði hönnunarkerfisins er að einfalda innri vinnu hjá Nova. Þess vegna var þróað kerfi sem heldur utan um einingar fyrir uppsetningu á upplýsingaarkitektúr, notendaflæði og fleira sem þarf.
Kerfið sem heldur utanum einingarnar

Fleiri verkefni?

Hönnunarkerfi sem einfaldar vinnu og sparar tíma.

Hönnunarkerfi

Vörður

Hönnunarkerfi sem einfaldar vinnu og sparar tíma.

Mörkun

GG sport

Hönnunarkerfi sem einfaldar vinnu og sparar tíma.

Stafræn lausn

Reykjavíkurborg

Hönnunarkerfi sem einfaldar vinnu og sparar tíma.

vefhönnun

síminn