Anvend skygge i design

Denne designartikel giver et overblik over anvendelsen og terminologien af skygger i design.

Hvad er en skygge?

En skygge er et mørkt område, hvor det lys, der udsendes fra en lyskilde, er blokeret af et uigennemsigtigt objekt. Skygger er formet, fordi lyset ikke kan passere gennem det uigennemsigtige objekt. Objektet blokerer lyset og tvinger det til at bevæge sig forbi det blokerende objekt og videre til den næste overflade. Den resulterende skygge er en todimensionel form eller en omvendt projektion af det objekt, der blokerer lyset.

Størrelsen af en skygge afhænger af afstanden mellem lyskilden og det objekt, der blokerer den. Jo tættere objektet er på lyskilden, jo mere blokerer det lyset, hvilket resulterer i en større og blødere skygge. Hvis objektet er længere væk, bliver skyggen skarpere og mindre.

Mørke, hårdt kantede drop-shadows antyder et mørkt rum med en enkelt lyskilde. Lyse, blødt kantede drop-shadows antyder et rum med meget diffust lys.

Skyggerne opstår af sollyset, og sollysets vinkel bestemmer længden af skyggen. Kunstige skygger:

Dette omfatter alle skygger, der er skabt af kunstigt lys.

Skyggeapplikationen i design

Skyggernes placering og opførsel er vigtige overvejelser i design. Forløb, fremhævninger og drop shadows skaber dimensioner i dine designelementer og leder beskuerens opmærksomhed. Ved at bruge skygger kan du forbedre dit designs overordnede æstetik og funktionalitet dramatisk og tilføje dybde og realisme.

Generelt skal skygger i design simulere den naturlige, virkelige opførsel af lys og skyggekast (nøgle- og omgivende lys) og passe effektivt ind i designet.

Hvis du vil bruge skygger effektivt i din designproces, skal du først forstå de grundlæggende love for skyggekast og de vigtigste elementer.

Lyskilden

Lyskilden definerer retningen og placeringen af de indkommende stråler fra lyskilden. Naturligt lys har solens position som eneste lyskilde; kunstigt lys tillader flere lyskilder.

Højdepunktet

Defineret som højdepunktet er det område, der skinner klarest på et objekt; det er det punkt, der vender ud mod lyskilden og er tættest på den.

Skyggen/kerne-skyggen

Skyggen/kerneskyggen angiver den mørkeste del af objektet, som er længst væk fra lyskilden. Skyggernes mørke kan variere i nuance. Det mørkeste område af skyggen kaldes kerneskyggen.

Den kastede skygge

Selve skyggen er på objektet, men det er objektet selv, der skaber den kastede skygge. Den kastede skygge projiceres på den overflade, som objektet hviler på. Den kastede skygge peger altid i samme retning som de indgående stråler, men altid til den modsatte side af objektet.

Et opslag delt af inspirationsl0g0 (@inspirationsl0g0)

Anvendelse af skygge i design

En webdesigners ansvar er at skabe farvemønstre til lysemitterende todimensionelle skærme. Brugen af skygger skaber dybde og illusionen af rum i 2D-design. Skyggen er en vigtig del af grafisk design. Der er utallige måder at indarbejde den i billeddesignprocessen.

Drop-shadows og gradienter er to af de mest anvendte designelementer. Andre relevante elementer er skyggens opacitet, skyggevinklen, skyggeforskydningen, skyggeradius og skyggens blødhed (ofte kaldet blur).

drop-shadows og gradient skyggeelementer er meget nemme at lave med ethvert grafikprogram, men ulempen er, at disse to skyggeeffekter ofte bliver overudnyttet.

Skygger i skeuomorfisk design

Især i de Skeuomorfisk design periode, der toppede i brugen fra begyndelsen til midten af 2000'erne, udnyttede designerne lagtyperne i Photoshop og lignende softwareprogrammer til deres maksimale kapacitet, hvilket fik især skærme i mindre størrelser til at føles meget rodet og overfyldte. Ikonerne blev skabt med refleksioner, skygger og korrekte justeringslinjer, hvilket gav en 3D-fornemmelse.

Selv om de visuelle elementer kan variere, kan brugerne altid gøre disse to antagelser:

• elementer, der ser hævede ud, kan trykkes ned (f.eks. knapper)
• elementer, der ser ud til at være forsænket, kan udfyldes (f.eks. indtastningsfelter)

Billede til venstre: Windows 95 Setup-skærm, billedkilde: extremetech. Billede til højre: Apple skeuomorphic Homescreen, billedkilde: materialdesignblog

Skygger i Material Design

I midten af 2010'erne svingede det kreative pendul tilbage til en mere minimalistisk tilgang med den Fladt design tendens og udviklingen af den Material UI-designsprog .

Sammenligning af Flat Design og Material Design. Billedkilde: Medium

Designet og skyggeadfærd handlede ikke om at afbilde genstande fra den virkelige verden så nøjagtigt som muligt. Det handlede om klarhed, orden, kontinuitet og enkelhed. Fladt design For at opnå den ultimative enkelhed udelod man z-aksen. Manglen på z-akse gjorde det overflødigt at indarbejde skygger i brugergrænsefladeelementerne.

Material Design-sprog , der oprindeligt blev udviklet af Google, inkorporerede z-aksen i sin rene og enkle tilgang, fokuserede på strenge regler for dens kontinuitet og havde ofte animerede overgange. Minimalistiske skygger blev brugt til at skabe illusionen af dybde. Den nye designtilgang gav nye muligheder for at bruge farver og rum.

Skygger i neumorfisk design

Efter næsten et årti med en mere forenklet 2D-designtilgang opstod der et nyt designsprog: Neumorfisme er fremtrædende i macOS Big Sur. Ikonerne og brugergrænsefladeelementerne er designet med skygger og fremhævninger fra en lyskilde klokken 12. Det giver en genforbindelse til den fysiske, haptiske tilgang fra den skeuomorfisk design, men uden overdrevne skygger i lagtypen.

Skyggens opførsel og projektion er helt anderledes i materialet og i neumorfe designstil.

Sammenligning Skeuomorphisme, flat design og neumorphisme. Billedkilde: justinmind

Materielt design kortene ser ud som om, de svæver med en uendelig skygge.

Neumorfe Design kortene ser ud, som om de er udtrukket fra baggrunden. Skyggeprojektionen og dens samspil med lyset er helt anderledes.

Sammenligning af neumorphic card og material card. Billedkilde: uxdesign

Sammenligning af neumorphic card og material card. Billedkilde: uxdesign

Hvorfor du bør indarbejde skygger i dit design

Formålet med skygger i 2D/UI-design er ikke primært at simulere 3D-objekter så realistisk som muligt for brugeren, men at styre og lette navigationen i brugerfladen på en subtil måde.

Integrering af skygger med en subtil, omhyggeligt beregnet projektion er en ideel måde at gøre designet mere tilgængeligt for brugerne.

Hvis du vælger at indarbejde skygger i dit design, skal du huske, at der er mange måder at implementere dem på. Leg lidt rundt og test de forskellige parametre, vi nævnte i vores artikel. Se, hvordan disse indstillinger påvirker dit designs udseende og tilgængelighed.

Hvis du ændrer skyggens opacitet, vinkel eller farve, kan det gøre en verden til forskel for, hvordan dit design virker på beskueren. Du kan forvandle dit design fra business-stil til legende og sjov ved blot at ændre skyggens farveattributter, f.eks.

Ved at justere skyggernes slør- eller forskydningsattributter kan du rette brugerens opmærksomhed mod tidligere oversete designelementer.

Husk de grundlæggende retningslinjer, vi gav dig, og mor dig med at lege med skyggeattributterne!