placeholder_200x200

Seneste nyt om grafisk design og digitale medier

En guide til 9 vigtige Motion Graphics design principper

(Grafik: Stan Yakusevich https://dribbble.com/shots/3287060-Say)


Bevægelig grafik og Motion design viser sig igen og igen at have stor indflydelse og effekt på brugeroplevelsen af digitale produkter og platforme.

Bevægelig grafik og animerede elementer er dog ikke blot visuel “pynt” – det er et stærkt værktøj, der skaber engagement hos brugeren og kan give dine budskaber et langt større reach.

For at bevægelig grafik skal fungere bedst muligt, kræver det en god grundforståelse for de visuelle principper inden for bevægelig grafik.

I dette blogindlæg bliver du derfor klogere 9 vigtige Motion Graphics design principper, der er gode at tage med i overvejelserne, når du skal til at producere spændende visuel grafik. 


1. Easing
"Easing" efterligner måden ægte objekter og elementer accelerer og sænker farten over tid.

De to teknikker, der oftest bruges vedrørende easing, er henholdsvis "ease in" og "ease out". Nogle gange kombineres de to, hvilket kaldes "ease in out". 

 

1-easing

UI-kortene og de tilsvarende stole bevæger sig hurtigt, men de kommer til jævne og kontrollerede stop takket være easing (Grafik: Saptarshi Prakash)

 

2. Forskydning (offset) og forsinkelse (delay)

Når flere UI-elementer bevæger sig på samme tid og med samme hastighed, har brugerne en tendens til at gruppere dem sammen og overse muligheden for, at hvert element kan have sin egen funktionalitet.

I stedet for at være helt synkroniseret er timingen, hastigheden og afstanden mellem elementer forskudt en lille smule, hvilket resulterer i en meget subtil "én-efter-én"-effekt.

Mens brugerne bevæger sig mellem skærme, signalerer forskydning og forsinkelse, at der findes flere interaktionsmuligheder.

 

2-offset

Denne cryptocurrency-app introducerer flere UI-elementer på én gang. Deres ankomst er lidt forskudt for at informere brugerne om, at elementerne er relaterede, men alligevel forskellige. (Gapsy Studio)

 

3. Transformation

Transformation opstår, når et UI-element bliver til et andet. For eksempel forvandles en downloadknap til en statuslinje, som forvandles til et "fuldført"-ikon.

Fra et UX-perspektiv er transformation en effektiv måde at vise brugeren dens status i forhold til et endeligt mål. Dette er især nyttigt, når progressionen mellem UI-elementer er knyttet til en proces med en start og en slut (f.eks. download af en fil).

 

3-transformation

Transformation signalerer starten, midten og afslutningen af f.eks.download af en fil (Grafik: Aaron Iker)

 

4. Ændring af værdier og tal

Repræsentationer af værdi (numerisk, tekstbaseret eller grafisk) ses brugt i en række digitale brugerflader for digitale produkter lige fra bankapps til personlige kalendere og til onlinebutikker. Fordi disse repræsentationer er knyttet til datasæt, der eksisterer i virkeligheden, kan de ændres.

Værdiændringer kommunikerer den dynamiske karakter af datarepræsentationer og informerer brugerne om, at data er interaktive og kan blive påvirket til en vis grad. Når værdier introduceres uden bevægelse, falder brugernes vilje til at engagere sig i dataene.

Dette er også en stor del af grunden til, at animerede infografikker fungerer så godt både på sociale medier men også i f.eks. præsentationer af ellers tørre tal og data.

 

 

4-aendring-af-vaerdier

Værdier introduceres med bevægelse for at vise brugerne, at de har evnen til at påvirke dataene. (Grafik: Taras Migulko)

 

5. Kloning

Kloning er en form for bevægelsesadfærd, hvor ét grafisk element opdeles i flere bider. Det er en smart måde at fremhæve vigtig information eller udvidede interaktionsmuligheder.

Når et grafisk element materialiserer sig i en grænseflade, har de brug for et klart oprindelsespunkt, der linker til et element, der allerede er på skærmen. Hvis elementer simpelthen brister eller forsvinder ud af ingenting, mangler brugerne den nødvendige k
ontekst til sikre interaktioner.


 

5-kloning

 

Brugere kan klikke på de farvede cirkler med tillid, fordi de tydeligvis stammer fra ikonet "Tilføj noter". (Ariuka)

 

6. Tilsløring (Obscuration)

Forestil dig en dør med matteret glas. Det kræver interaktion at åbne, men det er muligt at gennemskue (til en vis grad), hvad der venter på den anden side.

Tilsløring – eller obscuration – fungerer på samme måde. Det præsenterer brugerne for en grænseflade, der kalder på interaktion, samtidig med at den afslører en antydning af indholdet, der vises bagved. Navigationsmenuer, adgangskodeskærme og mappe-/filvinduer er almindelige eksempler på brug af tilsløring.

 

6-tilsloering

Tilsløring præsenterer brugerne for vigtige interaktioner, samtidig med at de tillader dem at forblive orienteret inden for produktfortællinger. (Kyle Abarquez)

 

7. Parallax

En Parallax-effekt er, når to (eller flere) grafiske elementer bevæger sig på samme tid, men med forskellige hastigheder. Her er hensigten at etablere et logisk hierarki over vigtige og mindre vigtige elementer. 

Interaktive elementer bevæger sig hurtigere og vises i forgrunden. Ikke-interaktive elementer bevæger sig langsommere og trækker sig tilbage til baggrunden.

Parallax styrer brugerne mod interaktive grafiske elementer, mens de tillader ikke-interaktive elementer at forblive på skærmen.

 

7-parallax-1

Med Parallax-effekt bevæger de vigtigste interaktive elementer sig hurtigst, mens ikke-interaktive elementer bevæger sig langsommere og trækker sig tilbage til baggrunden. (Tubik)

 

8. Dimensionalitet

Dimensionalitet handler om at få det til at virke som om, UI-elementer har flere interaktive sider, ligesom objekter i den fysiske verden. Effekten opnås ved at få elementer til at se ud, som om de f.eks. er foldbare, vendbare, svævende eller har realistiske dybdeegenskaber.

 

8-dimensionalitet

Dimensionalitet indebærer, at 2D UI-elementer har flere interaktive sider - ligesom objekter i den fysiske verden. (Sang Nguyen)

 

9. Dolly og Zoom – kamerabevægelses effekter
Dolly og zoom er to typer effekter, der simulerer to særlige kamerabevægelser, der giver brugerne mulighed for at "rejse" gennem UI-elementer på en rum-agtig måde, hvor flere detaljer afsløres, jo længere man kommer "ind" i animationen. 

Dolly: Dolly opstår, når brugerens synspunkt kommer tættere på (eller længere fra) et UI-element. Forestil dig en person med et kamera, der går hen til en blomst for at få et tættere billede.

Zoom: Med zoom forbliver brugerens synsvinkel og UI-elementet fast, men elementet øges (eller mindskes) i størrelse på brugerens skærm. Forestil dig, at personen bliver siddende og bruger kameraets zoomfunktion til at få blomsten til at se større ud.

 

9-dolly-zoom

9-dolly-zoom-2

Dolly: Brugerens synspunkt ser ud til at komme tættere på baggrundsbilledet. (Yanosh)

Zoom: Brugerens synsvinkel kommer ikke tættere på billedet. I stedet for øges billedets skala. (Victor Aldabalde)

 

Bevægelse bruges som et stærkt visuelt virkemiddel
Interaktive oplevelser kræver bevægelse i alle dens sprudlende og subtile former. Når principperne for Motion Design opretholdes, bliver selv de mest simple UI-elementer sofistikerede agenter for menneskelig kommunikation.

For at Motion Design skal gøres troværdigt og brugervenligt kræver det, at elementerne er realistiske og simulerer bevægelser vi kender fra den virkelige verden. Det sikrer du med en grundforståelse for Motion Graphics designgrundprincipper. 

Læs også:
After Effects for Grafikere: Sådan kommer du i gang
After Effects eller Animate? Forskelle på de to programmer
Introduktion til After Effects [2021 guide]

 

Skal du i gang med Motion Graphics Design?

Deltag på et 3-dages Adobe After Effects kursus og bliv undervist af Danmarks førende grafiske Adobe eksperter. Læs mere om Softworlds After Effects kursus her 👉


Dette blogindlæg er skrevet af designer og skribent Micah Bowers, hos Toptal, og oversat til dansk. 




Af Gæsteskribent

Har du lyst til at byde ind med viden og erfaring i et gæsteindlæg?

Vi ønsker at skabe en platform for vidensdeling og erfaringsudveksling fra hverdagen, og derfor er vi altid interesseret i relevante bidrag fra folk men noget på hjertet.

Så hvis du har draget dig nogle erfaringer, eller har gode tips og tricks til værktøjer eller arbejdsområder, er du velkommen til at sende os dit bidrag. Send os en mail på kursus@softworld.dk!

Seneste blogindlæg


Kurser og workshops
grafiske-kurser-blog

Video & animation kurser
På vores certificerede kurser i Aarhus og København kan du lære After Effects, Premiere Pro og Adobe Animate. Se kurserne >>

InDesign kurser
Lær InDesign på 2 dage så du kan opsætte grafisk design til plakater, annoncer, foldere og meget mere. Se InDesign kurserne >>

UX design & WordPress kurser
Få en solid og praktisk forståelse for UX Design, så du kan designe gode brugeroplevelser og overbevisende design. Se web design kurserne >>


 

Se flere kurser

Find dit næste kreative kursus

Hos Softworld kan du deltage på en række kurser i InDesign, Photoshop, Illustrator, After Effects og WordPress.