English version of this page

UiOs designprofil i sosiale medier

Sosiale medier er viktige kanaler for kommunikasjon med m?lgruppene v?re, og designmanualen inkluderer retningslinjer for innholdet vi lager til disse kanalene. 

Retningslinjene skal v?re fleksible og ivareta et bredt spekter av behov, og samtidig bidra til et gjenkjennelig utrykk p? tvers av UiOs kanaler.

Ulike eksempler p? some-poster basert p? UiOs grafiske profil

P? denne siden finner du en oversikt over generelle designprinsipper for utforming av poster.

Du finner ogs? informasjon om ferdige maler som er utviklet for sosiale medier og vi beskriver hvordan du best kan bruke de sosiale medienes egne verkt?y i tr?d med designprofilen

Trenger du informasjon om opprettelse og konfigurering av kontoer?

Hovedregler for utformingen av poster i sosiale medier

Hovedprinsippene i UiOs designprofil skal brukes p? alle formater i sosiale medier.

Designprinsipper

Her oppsummerer vi designprinsippene som skal ogs? f?lges ved produksjon av innhold til sosiale medier. 

Farger og fargekombinasjoner

Bruk alltid UiOs profilfarger, ogs? i sosiale medier. Her finner du informasjon om fargekoder.

Ved all bruk av farger er det viktig ? ta hensyn til universell utforming. Som en hovedregel er det anbefalt ? bruke svart tekst p? lyse farger, og hvit tekst p? m?rke farger.

Eksempler p? de mest vanlige uu-godkjente fargekombinasjonene p? tekst og bakgrunnsfelt.

Det er ogs? mulig ? velge andre kombinasjoner av tekst- og bakgrunnsfarge, men merk at det er en del profilfarger som ikke kan kombineres. Her finner du en oversikt over uu-godkjente kombinasjoner av tekst og bakgrunn.

Illustrasjon av ulike uu-godkjente fargekombinasjoner
Eksempler p? ulike uu-godkjente kombinasjoner av tekstfarge og bakgrunn.

Tekstst?rrelser

Vi har som et utgangspunkt definert tekstst?rrelser som skal dekke de fleste behov for b?de korte og lange tekster. Du kan justere tekstst?rrelse noe opp og ned dersom det er behov for det.

  • Heading (large) = 125 px/115 %
  • Heading (small) = 90 px/115 %
  • Body (large) = 70 px/115 %
  • Body (small) = 45 px/120 %

Fonter

Swiss 721 er UiOs hovedfont og b?r brukes der det er mulig. Har du ikke Swiss 721 tilgjengelig, kan du bruke Arial.

Eksempler p? poster med de to profilfontrnr
Eksempel med Swiss 721 og Arial

Tekstjustering og marger

  • Alle tekstelementer p? bilder skal venstrestilles. Unntak er teksting av video, som kan midtstilles.
  • Tags skal i hovedsak toppstilles.
  • Overskrifter og br?dtekst skal i hovedsak bunnstilles
  • Tekst skal i hovedsak bunnstilles, men kan ogs? plasseres hvor som helst langs Y-aksen der det gir mest mening.
  • Det skal v?re marger p? 75 bildepunkter rundt all tekst og grafikk.

Illustrasjon av korrekt tekstjustering og riktige marger

Oppsett for ulike formater

De generelle prinsippene skal brukes p? alle flater i sosiale medier, og her viser vi hvordan plasseringen av elementer vil fungere i ulike standardformater.

Eksempler p? oppsett i ulike formater
Oppsett i formatene 1:1, 4:5, 16:9 og 9:16 med hvit tekst p? svart tekstfelt.
Eksempler p? oppsett i ulike formater
Oppsett i formatene 1:1, 4:5, 16:9 og 9:16 med svart tekst rett p? bakgrunn


Reels og sikkerhetssoner p? Instagram

For at tekst skal synes i reels m? den plasseres innenfor sikkerhetssonen:

  • toppmarg = 220px
  • bunnmarg = 420px

For at tekst skal synes i thumbnail m? den plasseres innenfor sikkerhetssonen. Sikkerhetssone er 1080x1080px og midtstilles vertikalt.

  • Toppmarg = 220px
  • Bunnmarg = 420px
Sikkerhetssone
Illustrasjon av sikkerhetssonen i Instagram reels og thumbnail.

Deling av flater

Flatene kan deles p? midten, enten med en kontrastfarge eller bilde. P? vertikale formater kan flaten deles ved ca. 1/3.

Eksempel p? midtdeling av flater med henholdsvis bare tekst og bilde p? topp. 

Video og sluttplakat

Retningslinjer for tekst p? videoer og sluttplakater er beskrevet p? siden om designelementer for video (merk at denne siden er under oppdatering: ny versjon kommer i l?pet av mai 2023).

Variasjoner i uttrykk

Ulike muligheter for oppsett basert p? designprinsippene.

Illustrasjon som viser hvit tekst p? svart bakgrunn med hvit font
 Overskrift og undertittel i hvit font p? svart tekstbakgrunn
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Overskrift og undertittel i svart font p? farget bakgrunn.
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Tekstavsnitt med svart font p? farget bakgrunn
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Bilde p? topp og overskrift/undertittel i svart font p? farget bakgrunn.
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Bilde p? topp og overskrift/undertittel i hvit font p? svart tekstfelt
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Bilde p? topp og tekstavsnitt med svart font p? farget bakgrunn
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Helt bilde som bakgrunn med overskrift/undertittel p? farget tekstfelt.
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Helt bilde som bakgrunn med overskrift/undertittel p? svart tekstfelt
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Helt bilde som bakgrunn med overskrift/undertittel i hvit font rett p? bildet.
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Todelte formater med oversrkift ?verst og tekstavsnitt nederst
Illustrasjon som viser variasjonsmuligheter i layout for sosiale medier-poster
Enkel flate med overskift/budskap.

Eksempler

Illustrasjon som viser ulike typer bruk av tekst i sosiale medier-poster
Eksempler p? ulike muligheter for bruk av tekst.
Illustrasjon med eksempler fra UiOs sosiale medier-stories
Eksempler p? variasjonmulighetene i stories
illustrasjon av ulike variasjonsmuligheter for sosiale medier-poster for UiO
Eksempler p? variasjonmulighetene i poster.

Ferdige maler for Photoshop og Adobe Express

Vi har laget ferdige maler for Adobe Photoshop og Adobe Express som kan brukes for ulike typer oppsett.

Malene er utviklet for ? bidra til et helhetlig utrykk i sosiale medier og gi oss en sterkere identitet p? tvers av kanaler ved UiO, samtidig som de skal gj?re det enklere ? v?re b?de kreativ og tilpasse innhold til ulike kanaler.

?nsker du ? bruke malene, ta kontakt p? sosialemedier@uio.no.

Bruker du andre verkt?y, som f.eks. Premiere eller Canva, anbefaler vi ? lage et tilsvarende oppsett i disse. Generelle retningslinjer for oppsett av poster er oppsummert over

Designmanualen i kanalenes egne verkt?y

I noen verkt?y, for eksempel stories i Instagram, vil det ofte v?re mest hensiktsmessig ? lage innhold direkte i appen.

  1. ?pne story-mode, og start med ett blankt kanvas.
  2. Overf?r et bilde av UiOs fargepalett til bildegalleriet p? mobiletelefonen din, og lim inn bildet i story-mode.
  3. Eye-drop ?nsket bakgrunnsfarge fra paletten.
  4. Trykk og hold p? story-bakgrunnen til fargen du har plukket ut erstatter den opprinnelige bakgrunnsfargen.
  5. Begynn ? lage en tag ved ? skrive tekst og velge sort eller hvit boksfarge.
  6. Skriv inn ?nsket tekst og velg appens standard sans serif-alternativ.
  7. Skaler og juster teksten.
  8. Kopier og lim inn eventuelt bilde i story mode.
  9. Juster og plasser elementene.
  10. Venstrejuster tekstelementene.

Illustrasjon av hvordan du kan hente inn UiOs grafiske profil i Instagram reels

Se ogs?

Publisert 19. apr. 2023 20:40 - Sist endret 24. apr. 2023 12:32