Fyrstu skrefin

Haustið 2018 hófum við hjá Þjónustu- og nýsköpunarsviði Reykjavíkur að leita að samstarfsaðilum til að smíða hönnunarkerfi (e. design system) fyrir Reykjavík. Að smíða hönnunarkerfi töldum við vera nauðsynlegt næsta skref til þess að vera undirbúin fyrir stafrænu umbreytinguna sem framundan var og er nú komin í fullan gang.

Með því að smíða og taka í notkun hönnunarkerfi er hægt að bregðast hraðar við áskorunum í stafrænum heimi, tryggja samfellu í notendaupplifun og þjónusta borgarbúa betur. Hönnunarkerfi er sannarlega stórt verkefni en um leið skapar það mikla hagræðingu á næstu misserum.

Vel heppnuð hönnunarkerfi þurfa að byggja á traustum grunni hugmynda um notendamiðaða hönnun sem er einföld en um leið nægilega sveigjanleg til að nýtast í mismunandi lausnum.

Eftir markaðskönnun fengum við til liðs við okkur Jónfrí & Co., Erlu & Jónas og Hugsmiðjuna og hófum vinnuna vorið 2019.

Hanna verður til

Nú er fyrsta útgáfa af hönnunarkerfinu tilbúin og verður gefin út á næstu dögum. Smíði nýs vefs Reykjavíkurborgar sem byggir á Hönnu er einnig á lokastigi.

Image for post
Image for post
Hæ, ég er Hanna.

Hanna er hönnunarkerfið okkar. Eins konar handbók, eða viskubrunnur, sem inniheldur leiðbeiningar og gagnlegar upplýsingar (kóðar og alls konar) fyrir alla sem sinna stafrænum verkefnum fyrir Reykjavíkurborg. Við erum mjög spennt að segja ykkur betur frá Hönnu síðar, en þessi grein fjallar um útlit hönnunarkerfisins — hina grafísku hlið.

Með gildin að leiðarljósi

Í upphafi verkefnisins voru haldnar vinnustofur þar sem sett voru skýr markmið og stefna fyrir ásýndina, það lagði síðan grunninn að mótun þriggja aðalgilda.

Gildin bak við ásýndina eru jákvæð, mikilvæg og eiga að endurspegla kjarna Reykjavíkur. Það er af nógu að taka þegar kemur að jákvæðum þáttum borgarinnar og íbúa hennar en eftir miklar umræður voru eftirfarandi gildi fest í sessi sem grunngildi ásýndarinnar. Það er mikilvægt að allt stafrænt efni endurspegli þau.

Reykjavík er vingjarnleg, traust og litrík!

Image for post
Image for post
Við gerðum þessi plaköt til að minna okkur á gildin okkar.

Merki Reykjavíkur fyrir skjámiðla

Reykvíkingar eru stoltir af merkinu sínum, það er allt í senn auðþekkjanlegt, módernískt og fallegt.

Til að takast á við stafræna tíma, einfölduðum við merkið svo það njóti sín sem best á snjalltækjum borgarbúa.

Image for post
Image for post

Litir og litakerfi

Reykjavík er litrík borg, byggingarstíllinn margvíslegur og mannlífsflóran sífellt að verða fjölbreyttari.

Litakerfið okkar styður við fjölbreytileika og litaflóru sem auðvelt er að laga að hverju verkefni fyrir sig.

Image for post
Image for post
Litapalletta Reykjavíkur sækir í borgarlandslagið. Þessir litir skiptast svo upp í mismunandi pallettur til að hæfa hverju verkefni fyrir sig.

Litapalletta sem aðlagar sig

Við höfum fimm mismunandi pallettur til að vinna með. Þær innihalda öll 3 liti auk hlutlausra stoðlita.

Litaspjöldin raðast á skala sem byggður er á gildum Reykjavíkur. Þannig að litirnir geta aðlagað sig að skilaboðum sem er verið að miðla hverju sinni. Krútt eða pönk. Traust eða litríkt.

Image for post
Image for post
Hægt er að velja pallettu sem hæfir skilaboðunum sem miðlað er hverju sinni.

Myndskreytingar

Við notum myndskreytingar til að lýsa aðstæðum, flóknum aðgerðum, mannlífi eða flóknari hugmyndum.

Myndefnið er mannlegt og skal ávallt sýna kennileiti Reykjavíkur eða mannlíf í lifandi mynd. Sérstaklega er hvatt til léttleika og húmors í þeim tilfellum þar sem hægt er að gera það af virðingu.

Stíllinn er handteiknaður, vingjarnlegur, litríkur, persónulegur og smá krúttaður.

Image for post
Image for post
Myndskreytingar glæða lykilsíður á vefnum lífi.
Image for post
Image for post
Hér má sjá boli og bolla sem við létum gera.

Formheimur

Hugmyndin um formheiminn fæddist út frá merki Reykjavíkurborgar. Í merkinu er vísað í kennileiti og sögu Reykjavíkur, og formheimurinn er framlenging á þeirri hugmyndafræði.

Stíllinn felur í sér einföld stafræn form án útlína í flötum litum. Formin mynda óljósa mynd sem liggur á lituðum bakgrunni sem fyllir í þann kassa eða svæði sem formmyndinni er ætlað.

Image for post
Image for post
Image for post
Image for post
Myndheimurinn í notkun á vef.

Formheimurinn sem krydd

Hér tökum við grunneiningar formheimsins úr samhengi og notum einar og sér til að glæða stafrænu viðmótin okkar lífi.

Image for post
Image for post
Sjáiði hvernig þetta lifnar við með formheiminum.

Efnis- og viðmótstákn

Við notum tákn til að leiða fólk í gegnum ferla, auka skilning og draga augað að mikilvægum aðgerðum. En líka stundum bara til að vera skemmtileg.

Við notumst bæði við handteiknuð efnistákn til að leiða fólk áfram, og hefðbundin viðmótstákn, fyrir aðgerðir sem fólk þekkir.

Image for post
Image for post

Efnistákn

Efnistákn eru litlar, vinalegar teikningar, eins konar millistig myndskreytinga og viðmótstákna. Þeim er ætlað að auka skilning en einnig ánægju. Efnistákn eru handteiknuð og einföld mynd sem sýna 1–3 hluti, hugtak eða flokk.

Viðmótstákn

Viðmótstákn leiða fólk í gegnum ferla. Þau eru aðgerðatakkar sem fólki er eðlislægt að nota án þess að taka eftir því.

Viðmótstákn eru teiknuð stafrænt og þau eru höfð einföld en taka mið af vingjarnlegum stíl efnistáknanna. Þau eru teiknuð í stíl sem er í takt við formheiminn og merki Reykjavíkur.

Image for post
Image for post

Letur

Okkur fannst mikilvægt að velja letur sem endurspeglar karakter og gildin sem við settum okkur. Við vildum traust letur með skemmtilegum sérkennum. Við fundum það hjá íslensku leturstofunni OR Type.

Letrið okkar heitir Esja, það er læsilegt, stútfullt af karakter og hæfir ásýnd Reykjavíkur á stafrænum miðlum vel.

Ljósmyndir

Við notum ljósmyndir til að glæða texta og efni lífi. Persónuleiki borgarinnar kemst vel til skila í gegnum tímalausar ljósmyndir.

Myndefnið leggur mesta áherslu á mannlíf í borginni. Reynt skal eftir fremsta megni að taka óuppstilltar myndir af hversdagslegum og vingjarnlegum athöfnum borgarbúa.

Image for post
Image for post

Að lokum

Takk fyrir að lesa alla leið hingað. Þetta er ný stafræn ásýnd Reykjavíkur sem við erum þegar farin að rúlla út og þið munuð sjá meira af á næstu misserum. Þetta er útlitið sem hönnunarkerfið okkar, Hanna, byggir á.

Við erum mjög spennt að segja ykkur betur frá Hönnu, hún er stórskemmtileg og okkar er strax orðið vel til vina.

Written by

Vefstjóri og stafrænn verkamaður hjá Reykjavíkurborg

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store