Gode designprincipper 12 min.

Vi elsker at designe, og næsten alle vores opgaver indbærer en eller anden form for design. Derfor har vi her samlet nogle gode designprincipper som vi selv anvender i vores arbejde og vejledning. Vi ønsker at dele en god grundforståelse af hvad et godt design kan udspringe fra, og skabe netop det budskab du ønsker at kommunikere.

Når der designes, om det er det kommercielle, den kunstneriske måde eller måske en kombination og flydende overgange, så anvendes der mange virkemidler, elementer og designprincipper der alle er med til at skabe en eller flere forståelser af en designidentitet.

Når vi designer anvendes der mange forskellige elementer, farver, transformeringer og effekter til at skabe en “samlet helhed” (gestaltlovene), kategorisering og hierarki for at få et budskab, til at stå klart frem – i de utroligt mange former de kommer i når det handler om design, kunst, kultur og m.m.

1. Skalering og størrelser

Jo større jo bedre, eller? Dette klassiske mundheld bliver stadig bliver debatteret, og der er ingen tvivl om at størrelse er en de bedste metoder til at understrege og fremhæve visuelle elementer i en design komposition. Simpelt sagt, jo større et design element er, des mere opmærksomhed tiltrækker elementet sig i forhold til de mindre elementer.

Et godt eksempel er de klassiske avisoverskrifter, hvor de store bærende artikler anvender større overskrifter end de andre artikler der bliver vist på samme side. I hvilken som helst designsammensætning, om det er tekster, billeder eller grafik, vil større elementer i designet ikke bare tiltrække sig mere opmærksomhed, men også levere det stærkeste budskab.

For at designprincippet vedr. størrelse og skalering skal komme til sin ret, skal der være et forhold til stede som kan understrege hvad der er stort i forhold til hvad, i det givne design. Hvis et objekt står helt alene, kan du ikke definere om det er stort eller småt. Så sørg altid for at det giver mening.

2. Farver og kontrast

Ligesom de større objekter fremstår mere tydeligt end mindre objekter, kan lysende og livlige farver tiltrække mere opmærksomhed end de mere matte og afdæmpede farver. Hvis en enkelt sætning i en blok af tekst, bliver fremhævet med en livlig farve, vil den med det samme fange læserens opmærksomhed. Det bliver tydeligt at den er vigtigere end resten.

Det er godt at bruge et udvalg af forskellige komplementære farver når der skal laves design kompositioner. Hvis der anvendes for mange farver i et design, kan det komme til at fremstå uorganiseret, og usammenhængende. Det samme kan ske hvis man vælger et farvetema som ikke følger almen farveteori inden for design. At udvælge den rette farvepalette til design, består af meget mere end bare at finde komplementære farver. Dette vil vi uddybe i et kommende indlæg.

Farvernuancer kan bruges til at gruppere relaterede elementer i et design, og farve kan understøtte tyngde og afstand mellem designobjekter. Varme farver såsom rød og gul vil stå tydeligt frem i forgrunden på en mørk baggrund, hvorimod kolde farver som blå og grøn vil smelte mere sammen med en mørk baggrund. Det modsatte sker på en lys eller hvid baggrund, og det er bare sådan vores øjne er indrettet til at opfatte farver og nuancer.

Så ved brug af kombinationen af kolde og varme farver kan skabe en dybdeeffekt og herved perspektiv.

Når vi designer hos Digitypes, udvælger vi 2 – 4 farver og anvender sort og/eller hvid som nulpunktsfarver i de designs vi arbejder med. Det hænder at ud af de udvalgte farver vi vælger, finder en mørkere og lysere nuance til hver farve for at kunne skabe subtile effekter via adskillelse af linjer eller sekundære nedtonede tekster.

Vi har også skrevet et længere indlæg om farver, som beskriver de forskellige farveteorier mere i dybden.

3. Overskrifter, underoverskrifter & brødtekster

De fleste af os har arbejde med tekst i et eller andet omfang. Her kommer designprincipper om størrelse, kontrast, afstand og designhierarki i spil. Hvis man tænker på en indholdsfortegnelse i en bog, består den af Overskrifter (H1) der som regel har den største størrelse og måske er bruges i “fed” font. Underoverskrifterne (H2, H3, H4 etc.) bliver præsenteret i en mindre skriftstørrelse jo længere ned du bevæger dig gennem underoverskrifterne. Så udover at de største “elementer / overskrifter” fremhæver det vigtigste, skaber de også en organisering og klart visuelt hierarki som øjet nemt kan navigere i.

Her en demonstration af en indholdsfortegnelse hvor vi har tilføjet flere af designprincipperne til at fremhæve det væsentlige, og ellers gør det nemt at navigere i teksten.

Til dem dem der går op i design på hjemmesider og gerne vil levere en brugervenlig overskriftstruktur som søgemaskinerne godt kan lide, bør du læse dette indlæg når du har tid.

4. Afstand (Padding!)

Med rette afstand til forskellige objekter/komponenter i design kan man skabe dybe, størrelsesforhold og balance i udtrykket alt efter tema og struktur. Afstand er en vigtig spiller når det kommer til det gode harmoniske udtryk et design bør søge.

Et af de vigtigste virkemidler i gode designkompositioner er det som du udelader, fordi det giver et langt klarere budskab. Ifølge designprincippet “reglen om afstand” skal ethvert æstetisk rettet design, give plads til en masse tomrum (“white space/negative space”) uanset hvilke type baggrundsfarve der er valgt til designet.

Når vi laver webdesigns refererer vi til dette designprincip som “padding”, om elementer eller grupperede elementer, og derfor kalder vi ofte designeren “Paddington Bjørn”, når der arbejdes med det.

5. Nærhed – samlet forståelse

Designprincippet om nærhed handler om at skabe en forståelse af samhørighed blandt flere separate designelementer. F.eks. avisartikler hvor billedet, overskrift og teasende tekst til hver artikel er placeret tæt sammen, og måske har en boks eller direkte linjeindramning. På den måde hjælper designet hjernen med at forstå at designelementer hører sammen, uden nødvendigvis at forstå dem enkeltvist.

Med nærhed kan du altså gruppere, kategorisere og lave et klart hierarki der gør det nemt for seeren at få et overblik og få forståelsen af gruppering og organiseringer i den samlede helhed, som designidentiteten gerne skulle skabe.

6. White space/negative space

Når designet bliver arrangeret med få og velproportionerede objekter, skaber designeren et tomrum rundt om det han ønsker der skal være i fokus. Hvis der er for mange objekter vil det blive uklart hvor fokusset skal være. Dette kan da også være ønskværdigt i nogle tilfælde. Vi tror dog på at hvert design skal have ét skarpt budskab, som er dominerende. Designs har jo personligheder og unikke identiteter – ja designidentiteter kan vi godt lide at kalde dem.

Se også: White space

7. Justering & arrangering

Justering kender nogen fra tekstprogrammer hvor man kan justerer sine tekstblokke til venstre, til højre eller i midten. Dette er for at skabe en sammenhæng i måden elementerne hænger sammen på, for at give et mere helt og sammenhængende udtryk. Her kan man undgå at ordene er spredt tilfældigt ude på siden og skaber et kaotisk og ikke sammenhængende udtryk.

De fleste visuelle designs er centrerede, eller justeret til højre eller venstre, som skaber et såkaldt F-mønster. Alle 3 arrangeringer kan anvendes i en kombination for at skabe et Z-mønster på indholdet, som hjernen har nemt ved at scanne og få et overblik over.

8. Balance

Når der skal arrangeres designelementer i en designidentitet afhænger størrelse og dybde i opsætningen meget af hvilken type balance der skal skabes. Dog er det vigtigt at arrangering af designidentitetens komponenter ikke skaber overvægt og ubalance, da det kan forstyrre oplevelsen af budskabet.

9. Gentagelse & helhed

Ligesom kontrast skaber opmærksomhed rettet mod et designelement, skaber gentagelse helhed og genkendelse.

Hvis du forestiller dig en bog, så har overskrifterne ét udseende og størrelse, det samme gælder brødtekster. Og sådan er det gennem hele bogen. Dette er med til at skabe en sammenhængende oplevelse og en forståelse som en helhed.

I dette indlæg har vi forsøgt at skabe en rød tråd via de grafiske elementer der indeholder hunde, og farvetemaet som er gennemgående for skabe en helhedsforståelse af indholdet og det budskabet vi forsøger at levere om gode designprincipper.

10. Ledende linjer og stier

Bevægelse og retning er en af de bedste måder at tiltrække en seers opmærksomhed, især hvis det er indtænkt i en stillestående designidentitet. Linjer er åbenlyst gode til at at pege til et element – bare tænk på en pil. Men de behøver ikke at være direkte tilstede i designet for at virke.

Her har vi brugt et stisystem i en park til understøtte en retning i designidentiteten, og en indirekte pil som peger mod solen og silhuetten i horisonten af parken.

11. En tredjedels princippet / det gyldne snit / gitre

Nogle af de allermest effektive designkompositioner er styret og indstillet efter et gitter. De mest typiske gitre består horisontale og vertikale linjer.

Kunstnere, fotografer, og grafiske designere har længe brugt “en tredjedels gitter” for at forbedre den overordnede balance i deres designkompositioner. En tredjedels gitter designprincippet går ud på at inddele et designs fokuselementer i et gitter bestående af 2 horisontale linjer og 2 vertikale linjer, placeret en tredjedel fra hinanden, hvorved de skaber 9 separate sektioner.

Vigtige visuelle elementer i designidentiteten skal placeres langs disse linjer, med særlig fokus på hvor de vertikale og horisontale linjer krydser. Ikke-midterorienterede billeder er som regel mere æstetisk tilfredsstillende for øjet, især når dette simple gitter anvendes til at skabe en dybde og balance med flere elementer og klar for-, midte og baggrund.

12. Valg af perspektiv

Når man bruger designprincipper der anvender perspektiv som virkemiddel for at skabe et klart budskab og understrege et fokus, kan man skabe en illusion af dybde i den virkelige verden. Hvor designelementer der er tæt på, fremstår meget større end selve baggrunden, og derfor tiltrækker sig en masse opmærksomhed i designidentiteten.

Et veludført perspektiv vil fremhæve både skalering og proportioner, for at kommunikere faktisk afstand i designet. Som en vej der forsvinder i horisonten med en baggrund der sender et understøttende signal til budskabet.

Designprincipper kan anvendes alle steder!

Disse designprincipper anvendes i dag og har været anvendt og udviklet gennem mange hundrede års kunst, design og visuel kommunikation. De anvendes i overraskende mange sammenhænge. De kan anvendes på tekstniveauer i artikler, rapporter o.l. Måske i kombination med understøttende grafer, modeller, billeder, grafikker og ikoner? Ja hvorfor ikke styrke kommunikationen med en eller flere af disse virkelig brugbare og logiske designprincipper?

Det synes vi, så held og lykke med din at tage disse designprincipper i brug, og vi håber vores formidling har givet dig noget du kunne bruge.

Og du er altid velkommen til at kontakte os hvis du har brug for vores hjælp til dine designs.