Vill du lära dig hur du skapar fina och moderna UI skuggor? Då är det här guiden för dig!
En tydlig trend i UI design är att skapa väldigt mjuka och naturliga UI skuggor. Att lära sig skapa sådana skuggor är viktigt för att kunna skapa mockups som inte ser föråldrade ut.
Steg 1. Skuggans färg
Ett av de vanligaste misstagen som görs med skuggor är att man använder #000 (helsvart) färg för skuggor i digital grafik. Det funkar sällan. Det är lätt att tro att skuggor i verkligheten är svarta, men det är dem inte. Dem är istället ett snäpp mörkare än omgivningen eller har samma färg som objektet själv.
Observera till exempel ett objekt i din närhet som har en skugga, t.ex. vecken på dina kläder eller från en växt. Vilken färg har skuggorna egentligen?
Skuggans färg ska vara lik antingen:
- Bakgrundsfärgen (background-color i CSS). Till exempel med en blå skugga på en blå bakgrund.
- Objektets färg. Till exempel röd skugga bakom ett rött objekt.
Nedan är ett exempel på hur mycket mer naturlig och mjuk en skugga blir om man baserar skuggfärgen på kontexten istället för att endast använda en svart färg.
Steg 2. Stapla flera skuggor på varandra
En annan enkel riktlinje för att skapa mjuka UI skuggor är att stapla åtminstone två olika skuggeffekter (i CSS) på varandra. Det här gör att skuggan blir mer naturlig och dynamisk. Vissa staplar uppemot 5-7 st skuggor på varandra.
Dessutom är det oftast så i verkligheten att ljus kan reflekera och studsa på ett objekt och dess omgivning på flera olika sätt samidigt.
Nedan är exempel på CSS kod för två skuggor som man kan stapla på varandra. X står för hur långt skuggan sträcker sig åt höger (eller vänster om man använder minus värden), Y står för hur långt neråt skuggan sträcker sig, och blur står för hur diffus/hur mycket spridning skuggan ska ha.
- X = 0, Y = 5-10, Blur = 10px
- X = 0, Y = 10(+), Blur = 40-50px
box-shadow: 0 5px 10px rgba(154,160,185,.025), 0 15px 40px rgba(166,173,201,.2);Steg 3. Sänk opacitet för färgen (genomskinlighet)
Den sista riktlinjen är att sänka färg genomskinligheten/opaciteten på skuggorna till åtminstone 20-30%. I vissa fall krävs det att opaciteten är ännu längre, t.ex. 10-12%.
Fina UI skuggor gör stor skillnad
Om man inte har koll på hur man skapar moderna skuggorna kan det gör att hela ens design concept ser gammal och icke-professionell ut. Därför är det bra att alltid se till att skuggor (och andra detaljer) ser så bra ut som möjligt och vara uppdaterad på de designtrender som cirkulerar idag.
Tack för att du läste, och jag hoppas att denna guide kunde lära dig något!
Andra artiklar om UX/UI Design
Här är några fler artiklar om design ifall du vill läsa mer:
