Rörelse som identitet – Utveckling av ett rörligt designsystem för Yrkeshögskolan Novia

Abstract

Detta examensarbete behandlar utvecklingen av ett rörligt designsystem för Yrkeshögskolan Novia, med fokus på institutionen för Konst och kultur. Arbetet utgår från behovet att översätta en ny visuell identitet till rörlig form, i syfte att skapa en mer enhetlig, igenkännbar och engagerande varumärkeskommunikation. Rörlig grafik fungerar i detta sammanhang både som ett estetiskt och funktionellt verktyg, där rörelse bidrar till att förmedla identitet och struktur i digitala kanaler.

Syftet var att undersöka hur ett rörligt designsystem kan utformas för att stärka och tydliggöra ett varumärkes identitet. Arbetet genomfördes med en praktiskt baserad metod där designprocessen fungerade som undersökningsverktyg. Metoderna inkluderade varumärkesanalys, referensanalys av etablerade designsystem samt en workshop med uppdragsgivaren. Dessa låg till grund för utvecklingen av systemets animeringsprinciper och visuella riktning.

Resultatet visar att ett principbaserat rörligt designsystem kan bidra till ett mer levande och konsekvent visuellt uttryck. Tre centrala animeringsprinciper formulerades och implementerades i ett system som möjliggör både flexibilitet och sammanhållning. Systemet utformades även med fokus på tillgänglighet, genom att inkludera både avancerade lösningar och förenklade komponenter anpassade för olika verktyg. Arbetet visar samtidigt att balansen mellan uttryck och användbarhet är avgörande för systemets praktiska tillämpning.

Tämä opinnäytetyö käsittelee liikkuvan designjärjestelmän kehittämistä Noviaammattikorkeakoululle keskittyen Taiteen ja kulttuurin instituuttiin. Työ perustuu tarpeeseen muuntaa uusi visuaalinen ilme liikkuvaan muotoon tavoitteena luoda yhtenäisempi, tunnistettavampi ja osallistavampi brändiviestintä. Liikkuva grafiikka toimii tässä yhteydessä sekä esteettisenä että toiminnallisena työkaluna, jossa liike auttaa välittämään identiteettiä ja rakennetta digitaalisissa kanavissa.

Työn tavoitteena oli tutkia, miten liikkuva designjärjestelmä voidaan suunnitella vahvistamaan ja selkeyttämään brändin ilmettä. Työ toteutettiin käytäntölähtöisesti siten, että suunnitteluprosessi toimi tutkimusvälineenä. Menetelmiin kuuluivat brändianalyysi, olemassa olevien designjärjestelmien viiteanalyysi sekä työpaja toimeksiantajan kanssa. Näiden pohjalta kehitettiin järjestelmän animaatioperiaatteet ja visuaalinen suunta.

Tulokset osoittavat, että periaatepohjainen liikkuva designjärjestelmä voi edistää elävämpää ja yhtenäisempää visuaalista ilmaisua. Kolme keskeistä animaatioperiaatetta määriteltiin ja toteutettiin järjestelmässä, joka mahdollistaa sekä joustavuuden että yhtenäisyyden. Järjestelmä suunniteltiin myös saavutettavuus huomioiden, sisältäen sekä edistyneitä ratkaisuja että yksinkertaistettuja komponentteja eri työkaluille. Työ osoittaa samalla, että tasapaino ilmaisun ja käytettävyyden välillä on ratkaiseva järjestelmän käytännön soveltamisessa.

This thesis examines the development of a motion design system for Novia University of Applied Sciences, with a focus on the Institute of Arts and Culture. The work is based on the need to translate a new visual identity into motion, with the aim of creating a more consistent, recognisable, and engaging brand communication. In this context, motion graphics function both as an aesthetic and functional tool, where movement helps communicate identity and structure across digital channels.

The aim was to investigate how a motion design system can be structured to strengthen and clarify a brand’s identity. The study was conducted using a practice-based method, where the design process functioned as the primary research tool. The methods included brand analysis, reference analysis of established design systems, and a workshop with the client. These formed the foundation for the development of the system’s animation principles and visual direction.

The results show that a principle-based motion design system can contribute to a more dynamic and consistent visual expression. Three core animation principles were formulated and implemented in a system that enables both flexibility and coherence. The system was also designed with accessibility in mind, including both advanced solutions and simplified components adapted to different tools. At the same time, the study shows that balancing expression and usability is crucial for the system’s practical application.