{"id":534,"date":"2025-08-25T07:29:47","date_gmt":"2025-08-25T07:29:47","guid":{"rendered":"https:\/\/noter.heatpine.dk\/?p=534"},"modified":"2025-12-16T08:18:16","modified_gmt":"2025-12-16T08:18:16","slug":"design-systemer-2","status":"publish","type":"post","link":"https:\/\/noter.heatpine.dk\/index.php\/2025\/08\/25\/design-systemer-2\/","title":{"rendered":"Design systemer"},"content":{"rendered":"\n

Alma Kholmatova:<\/strong><\/p>\n\n\n\n

“Et designsystem er et s\u00e6t af indbyrdes forbundne m\u00f8nstre og f\u00e6lles praksis, der er sammenh\u00e6ngende organiseret for at opn\u00e5 form\u00e5let med digitale produkter.”<\/em><\/p>\n\n\n\n

Designsystem.dk<\/a> har en god oversigt over hvad et fulendt designsystem indeb\u00e6rer (baseret p\u00e5 Digitaliserings styrelsen s\u00e5som borger og virk).<\/p>\n\n\n\n

<\/p>\n\n\n\n

Et design system er b\u00e5de:<\/p>\n\n\n\n

\u26abDesign manual
\u26abBrand manual
\u26abStyle guide
\u26abPattern LIbraries<\/p>\n\n\n\n

\u26ab Datavisualiseringer
\u26ab Illustrationer
\u26ab Sidestruktur og rammer
\u26ab Stemme og tone
\u26ab Retningslinjer for tilg\u00e6ngelighed
\u26ab Designprincipper<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tre parameter af design systemer alle tager stilling til<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Streng\/L\u00f8s: <\/strong>M\u00e6ngden af retningslinjer og frihed<\/p>\n\n\n\n

Modul\u00e6r\/integreret:<\/strong> Mulighed for fleksibilitet<\/p>\n\n\n\n

Centraliseret\/Distribueret:<\/strong> Mulighed for bruger tilpasning<\/p>\n\n\n\n

Atomic Design<\/strong><\/p>\n\n\n\n

af Brad Frost<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Mentale modeller<\/strong><\/p>\n\n\n\n

samme som UI-Patterns – hvad vi husker om hvor ting er og hvordan de ser ud.<\/p>\n\n\n\n

Regler for at opn\u00e5 gode modeller<\/strong>.
<\/p>\n\n\n\n

    \n
  • Terminologi<\/strong>\u2014 Kender brugeren de ord, der bruges? Er det brede termer, der indikerer, hvad du kan g\u00f8re i hver del af
    produktet? Hvor t\u00e6t matcher de den termonologi, brugerne anvender hver dag? <\/li>\n\n\n\n
  • Content strategy <\/strong>\u2014 Hvad er de vejledende begreber eller regler for de indholdstyper, der vises p\u00e5 hver side?<\/li>\n\n\n\n
  • Channel strategy <\/strong>\u2014 Skaber du konsekvente, kontinuerlige eller komplement\u00e6re oplevelser?<\/li>\n\n\n\n
  • Interaktions modelle<\/strong>r \u2014 Bruger du velkendte m\u00f8nstre? Introducerer noget nyt? Hvordan interagerer mennesker med
    systemet?<\/li>\n\n\n\n
  • Informations arkitektur<\/strong> \u2014 Hvordan grupperes og struktureres de forskellige omr\u00e5der? Hvor forventer dine brugere at finde
    svarene p\u00e5 deres mentale model i dit produkt? Passer det til deres forventninger?<\/li>\n<\/ul>\n\n\n\n

    Funtionelle vs perspetuelle designsystemer<\/strong><\/p>\n\n\n\n

    Funktionelle designsystemer <\/p>\n\n\n\n

      \n
    • Fokus:<\/strong> Hvad brugerne g\u00f8r (adf\u00e6rd) og systemets handlingsmuligheder.<\/li>\n\n\n\n
    • Eksempler:<\/strong> Knapper til indsendelse, formularfelter, navigationslinks.<\/li>\n\n\n\n
    • Karakteristika:<\/strong> Konkrete, handlingsbaserede “byggesten” i et interface.<\/li>\n\n\n\n
    • Teknisk perspektiv:<\/strong> Baseret p\u00e5 HTML og andre strukturelle elementer.<\/li>\n<\/ul>\n\n\n\n

      Perceptuelle designsystemer <\/p>\n\n\n\n

        \n
      • Fokus:<\/strong> Hvad brugerne f\u00f8ler, og hvordan de intuitivt opfatter ting.<\/li>\n\n\n\n
      • Eksempler:<\/strong> Knapper, der bruger en specifik typografi, farve, form, eller visuelle tilstande.<\/li>\n\n\n\n
      • Karakteristika:<\/strong> Beskrivende stilarter, der definerer udseendet og f\u00f8lelsen af et element.<\/li>\n\n\n\n
      • Teknisk perspektiv:<\/strong> Typisk udtrykt gennem CSS-egenskaber som farver, padding, og overgange.<\/li>\n<\/ul>\n\n\n\n

        Design persona<\/strong><\/p>\n\n\n\n

        Af Aarron Walter<\/em><\/p>\n\n\n\n

        Retning for ens design udtryk<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Modernisme<\/strong><\/p>\n\n\n\n

        Modernismens karakteristika<\/strong>
        \u26abFotografi + designelementer + tekst tjener form\u00e5let med at pr\u00e6sentere informationen p\u00e5 den mest ligetil m\u00e5de
        \u26abKontrast (i st\u00f8rrelser, farver, vinkel)
        \u26abLodrette, horisontale og diagonale linjer
        \u26abSans serif-skrifttyper (grotesker)
        \u26abSort, hvid og prim\u00e6rfarver: r\u00f8d, bl\u00e5, gul, sort og hvid
        \u26abF\u00e5 variationer – kun 2 st\u00f8rrelser af skrifttyper – kun 2 skriftsnit
        \u26abGrundl\u00e6ggende formelementer: cirkel, kvadrat og trekant.
        \u26abKlare marginer, Tydelig adskillelse mellem tekst og illustrationer
        \u26abNegativt rum (hvide eller monochrome omr\u00e5der uden tekst)
        \u26abV\u00e6gt p\u00e5 elementerne, der flugter (alignment)
        \u26abVenstrestil\/h\u00f8jstil \u2013 aldrig centrer<\/p>\n\n\n\n

        <\/p>\n\n\n\n

        Klummen <\/strong>er der hvor tekst og indhold er – modsat margen<\/strong>. Br\u00f8dtekst <\/strong><\/p>\n\n\n\n

        Ikke venstre- og h\u00f8jre stillet, men fast forkant med l\u00f8s bagkant.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        <\/p>\n\n\n\n

        Bauhaus<\/strong><\/p>\n\n\n\n

        Oprindelse<\/strong>: Tyskland, Bauhaus-skolen (1919\u20131933), grundlagt af Walter Gropius.<\/p>\n\n\n\n

        Form\u00e5l<\/strong>: Forene kunst, h\u00e5ndv\u00e6rk og industri \u2192 “form f\u00f8lger funktion”.<\/p>\n\n\n\n

        Designprincipper<\/strong>:<\/p>\n\n\n\n

          \n
        • Enkelhed og funktionalitet.<\/li>\n\n\n\n
        • Minimalisme \u2192 ingen un\u00f8dvendig dekoration.<\/li>\n\n\n\n
        • Geometriske former (kvadrater, cirkler, trekanter).<\/li>\n\n\n\n
        • Rette linjer, asymmetri og flade farver.<\/li>\n<\/ul>\n\n\n\n

          Materialer<\/strong>: Glas, st\u00e5l, beton, krom \u2013 moderne, industrielle materialer.<\/p>\n\n\n\n

          Farver<\/strong>: Prim\u00e6rfarver (r\u00f8d, bl\u00e5, gul) + sort, hvid og gr\u00e5.<\/p>\n\n\n\n

          Arkitektur<\/strong>: Flade tage, store vinduespartier, \u00e5bne planer.<\/p>\n\n\n\n

          Indretning\/m\u00f8bler<\/strong>: Funktionelle, masseproducerbare, ofte i st\u00e5l og tr\u00e6 (fx Marcel Breuers st\u00e5lr\u00f8rsm\u00f8bler).<\/p>\n\n\n\n

          Indflydelse<\/strong>: Har pr\u00e6get modernistisk arkitektur, m\u00f8beldesign, grafisk design og nutidens “skandinaviske minimalisme”.<\/p>\n\n\n\n

          <\/p>\n\n\n\n

          Grunge<\/strong><\/p>\n\n\n\n

          fremf\u00f8rt af David Carson<\/em><\/p>\n\n\n\n

          “I never learned alle the riles all the thing your not supposed to do”<\/p>\n\n\n\n

          En r\u00e5 og st\u00f8jende rockstil fra slut-80\u2019erne og 90\u2019erne, kendetegnet ved tunge guitarriffs, \u00e6rlige tekster og et anti-kommercielt udtryk.<\/p>\n\n\n\n

          <\/p>\n\n\n\n

          <\/p>\n\n\n\n

          Typografi<\/strong><\/p>\n\n\n\n

          Ellen Lupton -Thinking with type<\/em><\/p>\n\n\n\n

          Sanserif=grotesk<\/p>\n\n\n\n

          Serif=Antikva<\/p>\n\n\n\n

          Gotisk=Fractur<\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n

          Skriftsnit<\/strong><\/p>\n\n\n\n


          Sm\u00e5 bogstaver kaldes minuskler <\/strong>god morgen
          Store bogstaver kaldes majuskler <\/strong>GOD MORGEN
          <\/p>\n\n\n\n

          Ordin\u00e6r
          Fed
          Kursiv
          Fed kursiv <\/p>\n\n\n\n

          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          Micro copy<\/p>\n\n\n\n

          Sm\u00e5 ord med meget kraft -P\u00e5virker konvertering og brugeroplevelsen<\/p>\n\n\n\n

          Typer af microcopy<\/strong>:

          – Onboarding teksten:<\/strong> Guider brugerne, n\u00e5r de tilmelder sig et nyt produkt eller en ny tjeneste
          – Fejlmeddelelser:<\/strong> Eks. 404 sider og korte tekster, der informerer om et problem, eks. forkert adgangskode.
          – Succesbeskeder:<\/strong> “Yay, du har opn\u00e5et det her!” – type beskeder der vises, n\u00e5r brugeren har fuldf\u00f8rt en opgave.
          – V\u00e6rkt\u00f8jstip:<\/strong> Tekst der vises, n\u00e5r en bruger holder mark\u00f8ren over eller r\u00f8rer ved et element. V\u00e6rkt\u00f8jstip giver brugeren
          mere information om funktionalitet og funktioner.
          – Tekst i online formularer<\/strong>: super vigtigt for at sikre, at folk ikke giver op, f\u00f8r de udfylder en formular.
          – Tomme tilstande<\/strong>: nogle gange er der intet at vise p\u00e5 sk\u00e6rmen, fordi et v\u00e6rkt\u00f8j eller en tjeneste ikke bruges endnu. Tilf\u00f8j
          en forklarende tekst og\/eller billede, eller forklar, hvorfor siden er tom.
          – Loading tilstande<\/strong>: Mens en bruger venter p\u00e5 at en handling behandles, som “Vent venligst! Dine data hentes \u2013 det b\u00f8r
          ikke tage mere end et minut.”
          – Billedtekster<\/strong>: Korte tekster under et billede, der beskriver dets indhold.
          – Billed-alt-tekster<\/strong>: Korte tekster, der l\u00e6ses op af sk\u00e6rml\u00e6sere og ogs\u00e5 vises, hvis billedet ikke indl\u00e6ses korrekt.
          – Notifikationer<\/strong>: Korte beskeder med vigtig information. For eksempel n\u00e5r en opgradering er tilg\u00e6ngelig.
          – Offboarding-tekst<\/strong>: Den tekst, der vises, n\u00e5r en bruger siger adios til et produkt \/ en tjeneste<\/p>\n\n\n\n

          F\u00e6lles for n\u00e6sten alle typer mikrokopier er, at de driver brugernes handling. Onboarding-tekst guider dig gennem ukendte opgaver p\u00e5 en let-at-f\u00f8lge m\u00e5de. En fejlmeddelelse vil bede dig om at handle ved at l\u00f8se problemet.<\/p>\n\n\n\n

          Farvel\u00e6re og UX<\/strong><\/p>\n\n\n\n

          CMYK=substrativ farvecirkel<\/p>\n\n\n\n

          RGB=additive farvecirkel<\/p>\n\n\n\n

          <\/p>\n\n\n\n

          Affordance<\/strong><\/p>\n\n\n\n

          Affordance<\/strong> betyder helt grundl\u00e6ggende: de muligheder for handling, som et objekt eller en situation tilbyder et menneske (eller et dyr)<\/em>.<\/p>\n\n\n\n

          Det er et begreb fra psykologi og design (opfundet af James J. Gibson), og det handler alts\u00e5 om relationen mellem ting<\/strong> og brugere<\/strong>: hvad kan jeg g\u00f8re med det her?<\/p>\n\n\n\n