Drop-skygger og gradienter er to av de vanligste designelementene på nettet.

Du finner dem som følger med mange forskjellige stiler. De er praktiske effekter for webdesignere fordi de er attraktive, nyttige og enkle å lage med ethvert grafikkprogram. Men de har en mørk side: de blir ofte misbrukt .

Å bruke amatørlige drop-skygger eller gradienter er nesten like ille som å feste et skarlet brev til skjorten din for å la verden få vite at du er nybegynner eller hack. Selv subtile, knapt merkbare feil kan skape spenninger som undergraver ellers vakre og effektive design.

I denne artikkelen ser vi på hvilke fallskygger og gradienter som gjør , vi snakker om hvordan du bruker dem effektivt, og vi vil se på noen eksempler på feil og hvordan du kan fikse dem.

Hva gjør Drop-Shadows og Gradients?

Jobben til en webdesigner er å skape fargemønstre for glødende todimensjonale skjermer . (Det er noen få unntak for dette: Nettsteder kan sees på, for eksempel en tenne-skjerm, som ikke gløder, og nettsider kan skrives ut på papir.) Disse skjermbildene gjenspeiler ikke den virkelige verden; de er ikke engang like mye som den virkelige verden. Av denne grunn har vi ingen reell nødvendighet for å gjøre mønstrene på våre nettsider bære forhold til objekter i den tredimensjonale verden vi lever i.

Operativsystemer som Unix og DOS har et grensesnitt som ikke er farget tekst på en skjerm. Andre, som Windows og Mac OS X, er fylt med illusjoner av ekte objekter. OS X har for eksempel en dockning som ser ut som et bord med en skinnende overflate som avtar i avstanden, en menylinje med fasade kanter som gjør at den ser ut som den bukker ut litt, og rullefelt som ser ut til å ha gjennomskinnelige pastiller.

Alle disse effektene er metaforer. De behandler enkelte elementer som vi kan samhandle med på skjermen som om de var tredimensjonale objekter som samhandler med lyskilder i den måten objekter i den ikke-digitale verden gjør. Det er en morsom ting å gjøre på en måte: alle disse lyskilder og kanter og former er ren fantasi. Fordi objektene på skjermen er imaginære, hvorfor skal vi forholde dem til objektene i den virkelige verden?

Illusjonen av rom forbinder den imaginære til en verden vi er komfortable i.

Den viktigste grunnen til at vi relaterer imaginære objekter til virkelige verden er at vi er eksperter på å samhandle med objekter i vår tredimensjonale verden. Vi har erfaring med å håndtere tredimensjonale objekter, og vi har samlet kunnskap om den visuelle koden som forteller oss om forholdet mellom objekter til hverandre i rommet.

Det er delvis fordi det er så bemerkelsesverdig å tolke lys at vi tar en slik glede i illusjon, eller i å skape utseendet på gjenstander. Vi er ofte mer engasjert av dramatisk livlignende malerier av vanlige gjenstander som hus og epler enn vi er av objektene selv. Vi mennesker har skapt tegninger i tusenvis av år som er ment å presentere ideene til objekter. Illusoriske pastiller og bord på skjermen er bare den siste manifestasjonen av denne lange tradisjonen.

Det er mer til det enn glede, skjønt. Form og posisjon gir oss informasjon om hvordan objekter relaterer seg til hverandre. Den lange vertikale løsningen for rullefeltet i Safari-vinduet, for eksempel, skaper en illusjon at den setter "høyere" eller nærmere meg enn elementene som omgir den. Dette gir det større betydning i designet, som er hensiktsmessig fordi rullefeltet er et viktig grensesnittelement for å navigere på siden.

Visuelle metaforer oppfatter oppfattet bekostning.

Ved å vises som et objekt, oppretter rullefeltet "oppfattet" affordance . "Det vil si at det forbinder seg selv med metafor til egenskapene til ekte objekter som gir seg til spesielle bruksområder. En avskåret knapp på en nettside kommuniserer for eksempel at den gir trykk . Vi kan gjøre noe på en side som kan klikkes, men å knytte et klikkbart element med bildet av noe trykkbart antyder sin funksjon på en klar, åpenbar og til og med behagelig måte.

Drop-skygger og gradienter er grunnleggende verktøy for å skape en illusjon av plass.

Drop-skygger og gradienter er to verktøy som bidrar til å skape illusjonen av tredimensionalitet og foreslå romlige forhold mellom objekter på siden. Når det gjøres bra, gjør denne tredimensjonale informasjonen et design vakrere og mer forståelig.

I den virkelige verden dannes skyggeskygger når et objekt blokkerer en lyskilde fra å ramme en overflate som ligger bak den. Dette er en av grunnene til at folk sier at drop-skygger gjør todimensjonale design "pop": fordi de gjør objekter ser ut til å stikke ut fra eller flyte over, andre elementer.

Gradienter vises når en del av et objekt er nærmere en lyskilde enn en annen del. Som et resultat ser den nærmere delen seg lettere, og den lenger delen ser mørkere ut. (Gradienter blir mer komplekse selvfølgelig når flere lyskilder samhandler eller når lyskilder har forskjellige farger.)

Så, ved å etterligne lysets effekter i den virkelige verden, kommuniserer dropshadows og gradienter informasjon om metaforiske objekter, imaginære lyskilder og deres relasjoner.


Slik bruker du Drop-Shadows og Gradients Effectively

Her er en mulighet: Ikke bruk drop-skygger eller gradienter i det hele tatt.

Jeg mener dette, seriøst. Dette er den sikreste måten å unngå fallskygge og gradientfeil, og alternativet bør alltid vurderes.

Fordi kaste dropshadows på tilfeldige objekter er så enkelt, kan de være en unnskyldning for å unngå enklere, bedre løsninger på problemer. For biter av tekst som må være mer fremtredende, for eksempel vil designere ofte forsømme farge, størrelse, vekt av typen og mange andre elementer til fordel for en dråpe-skygge.

På samme måte bruker designere ofte gradienter for å få et fargefelt til å virke mindre kjedelig, uten å finne ut hvorfor den generelle sammensetningen ikke er dynamisk.

Hvis du jobber med en kompis for et nettsted, må du lagre tredimensjonale berøringer, for eksempel fallskygger og gradienter for slutten , hvis det er mulig. Bruk mellomrom, plassering og farge for å gjøre designet effektivt før du legger til det endelige laget av polsk. Hvis du fokuserer på å gjøre designene dine uten disse triksene, kan du oppdage at du ikke trenger dem så ofte, og at de er mer effektive når du bruker dem.

Før du plop i en skygge eller en gradient, spør deg selv: " Er en tredimensjonal metafor nødvendig for denne utformingen?" Bruker jeg den for å legge til nyttig informasjon om måten objekter er relatert til eller som en effektiv komponent i en lyd estetisk tilnærming, eller bruker jeg det som en unnskyldning? "

Den subtilere, jo bedre

For drop-skygger bruker du nesten aldri Photoshops standardinnstillinger. Photoshops standard dråpe-skygge er veldig mørkt og kastet til nederste høyre hjørne av et objekt (standard global lyskilde er 120 °, øverst til venstre).

Skygger forteller deg om lyset i ditt miljø. Anta at du er i et mørkt rom uten vinduer, og du slår på en lommelykt. Ethvert objekt som du skinner på, vil kaste en skygge som er nesten svart. Det er fordi objektet blokkerer lys fra den eneste lyskilden, noe som betyr at det ikke kommer noe annet lys fra noe annet sted for å lyse det området.

Nå vil ikke skyggen være helt svart på grunn av det reflekterte lyset. Noen av lyset fra lommelykten din vil sprette av veggene og treffe det skyggefulle området fra en retning som ikke er blokkert av objektet. Og hvis du slår på en lampe i et annet hjørne av rommet, vil skyggen lyse betydelig. Objektet vil kaste en ny skygge: Den nye skyggen vil dukke opp der lampen fra lampen er blokkert, men vil bli fylt med lyset fra lommelykten, mens området av den første skyggen fortsatt vil bli blokkert av lyset fra lommelykten, men vil bli fylt med lyset fra lampen.

Når vi legger til skygger i våre design, foreslår vi et imaginært miljø for vår nettside. Mørke, hardrevne drop-skygger tyder på et mørkt rom med en enkelt lyskilde. Lys, mykkantede drop-skygger antyder et rom som er rik med diffust lys.

Et godt opplyst rom er det mest komfortable miljøet for brukere, fordi det ligner på det slags miljø der vi bruker våre datamaskiner: et kontor eller en studie. Med mindre vi bevisst ønsker å unngå denne komfortsonen, bør vi bringe dropshadow-innstillingene i Photoshop helt ned fra standardverdiene. Ta opaciteten ned til 30 eller 40%, eller enda lavere.

Også, hold ting enkelt slik at folk forstår metaforen uten å tenke på det. En lyskilde ved 120 ° gir ikke mye mening. Mac OS X, for eksempel, setter sin lyskilde på 90 °, eller rett over, noe som virker mer logisk. Jeg liker å gjøre det enda enklere og sette lyskilden direkte vinkelrett på skjermen. For å gjøre dette, bare ta avstandsinnstillingen på dropshadow til null (dette representerer avstanden fra objektet som støtter dropshadow til objektet under det). På dette punktet betyr det ikke noe globalt lys: det er rett og slett som om en stor diffus lyskilde kommer fra brukeren bak for å belyse designet.

Denne effekten er svært vanlig i "trompe-l'œil" -design, hvorav de vanligste har bakgrunnsbilde eller ramme på en panneflate, som om man så på den fra rett over. Filmregissører som Alfred Hitchcock, Martin Scorcese og Wes Anderson ansett den samme effekten for deres signatur Guds øyeutsikt. Slike webdesign har en slags uanstrengt forståelighet, og opprettholdelse av konsistens på tvers av et design blir enklere for designeren.

Hvis du har brakt avstandsinnstillingen til 0 og opaciteten ned til ca 30%, har du et godt utgangspunkt for en dråpe-skygge. Spill rundt med størrelsen for å endre hvor langt overflaten av objektet ser ut til å være fra bakgrunnen som den sitter på. Angi størrelsen til 1 piksel, for eksempel, gir deg en vakker effekt som er nesten usynlig, men ganske behagelig. Designer Dan Cederholm har gjort små, enkle effekter som dette en integrert del av hans stil (som vist i hans seminal A List Apart-artikkel om " Mountaintop Corners “).

Du kan helt sikkert ta oppaktheten opp hvis effekten er usynlig, men begynner å bli subtil, og deretter ringe opp er mye bedre enn det motsatte. Effekten bør ikke være den minste litt mer åpen enn den må være.

For gradienter har Photoshop mange fancy standardinnstillinger. Disse kan ha noen gode bruksområder, men de har absolutt ubegrenset dårlig bruk, så styring av dem er vanligvis klok.

I stedet velger du standard svart-hvitt gradient. Deretter velger du både den svarte og den hvite og gjør dem til begge grunnfargene til elementet ditt. Nå som du har en base, velg enten den mørke siden eller lyssiden og juster den for å være litt mørkere eller lettere. Igjen, jo subtilere, jo bedre . (Noen av de beste gradienter jeg har kommet over, jeg måtte verifisere med eyedropper-verktøyet i Photoshop for å sikre at de var der i det hele tatt!)

Jo større kontrast mellom lys og mørke, rounder overflaten vil vises. For noen ting, for eksempel navigasjonsmenyer og knapper, er det noen rundhet som passer. Men for gjenstander som skal vises flat, hold kontrasten lav.

Og husk at den lettere siden skal møte retningen til lyskilden din.

Denne typen gradient er fantastisk fordi den etterligner gradienter vi ser rundt oss hele tiden. Ingenting i den virkelige verden er virkelig et enkelt fargefelt, fordi det alltid har en slags forhold til en lyskilde. Se nøye på sidene i en bok eller i taket rundt overlyset ditt: Du finner gradvis overalt.

Eksempler på feil og hvordan å fikse dem

Internett har mange åpenbart stygge gradienter, men disse gjøres vanligvis ikke av profesjonelle designere. I stedet for å vise ekstreme feil, illustrerer jeg noen måter hvor subtile feil kan skape spenninger i ellers gode design.

Enslige skygger for overlappende objekter

Overlappende objekter medfører en forskjell i deres avstand fra deg (bestemt delvis av tykkelsen). Designere bruker imidlertid ofte identiske dropshadows for overlappende objekter. Dermed er informasjonen fra drop-skyggene i konflikt med informasjonen som overlappes, og undergraver illusjonen om dimensjonalitet.

Å se konflikter som disse gjør meg urolig, og jo mer jeg fokuserer på dem, jo ​​mer hodet mitt gjør vondt. Brukere bør ta glede i designet, ikke føle smerte!

Du kan lese mer om dette problemet i " Bygg en bedre drop-shadow , "En guide av Jacci Howard Bear på About.com.


Brå kanter

Hjørner av ekte drop-skygger ville ikke ha harde kanter med mindre de hadde absolutt ingen reflektert lys - noe som ville være en svært uvanlig situasjon. Snarere er deres hjørner vanligvis avrundet av lysstrålene som kryper rundt dem.

Her er en dråpe-skygge med en urealistisk hard kant:

Dette ellers flotte designet har nesten ingen dimensjonal illusjon hvor som helst, men har en dråpe-skygge langs høyre sidefelt. Designeren ønsket kanskje å senke sidebarens hierarki på siden, en effekt som den blå bakgrunnen bidrar til å oppnå. Ikke bare er det unødvendig mørkt, men den utrolige harde kanten stirrer besøkende i ansiktet.

På bunnen av sidefeltet kan du se en avrundet overgang, der designeren har skapt en mer troverdig effekt. Men du kan se hvorfor han ikke gjentok det øverst, fordi det ville kaste med den rene, horisontale linjen satt av de godt justerte toppelementene. I stedet for å kreve realismen av denne avrundede overgangen, la oss fikse det ved å toning ned dråpeskyggen så mye som mulig.

Her har jeg gjort dråpe-skyggen så lett at den gjør lite mer enn at det sitter lengre tilbake. Fordi det er så lett, er den rene overgangen ikke stygge eller distraherende.


Hva pokker går bak den gjenstanden?

Noen ganger går en dråpe-skygge av nøtter uten åpenbar grunn, som med den blå boksen rundt W3C-logoen nedenfor.

Hvorfor er dropshadowen så langt tilbake fra objektet, og så avrundet? Jo mer jeg prøver å forstå historien som blir fortalt av denne dropshadowen, jo mer forvirret får jeg. Mitt gjetning er at designeren ønsket å gi mer prominens og vekt til logoen, som dropshadow hjelper med å oppnå, men det forstyrrer sidens harmoni så mye at det ikke er verdt det.


Ikke la dine gradienter foreslå forskjellige lyskilder.

I denne ellers utmerkede designen til WolframAlpha har objekter på siden graderinger fra hvite til lys oransje. Problemet er at gradienten i topptekstregionen har hvit øverst, noe som tilsier lys ovenfra, mens sidelementene senker ned, har hvite i bunnen, noe som betyr lys fra under.

Du kan argumentere for at jeg tenker over dette, at gradienter ikke trenger å matche opp med lyskilder. Det er mulig, men subtile gradienter som disse har et inneboende metaforisk forhold til gradienter vi ser i den virkelige verden. La oss bytte retning av gradienter nedre ned på siden slik at de innebærer en lyskilde ovenfra:

Og vi får lyskilde harmoni.

Til slutt, du er fri til å gjøre som du vil.

Fordi objektene på en nettside kun relaterer til virkelige objekter bare av metafor, er deres effektivitet i hovedsak subjektiv. Forbindelsen mellom et bilde av en knapp og en faktisk knapp har ingen realitet utover brukerens sinn.

Vi designere er ikke pålagt å gjøre våre metaforer konsistente med virkeligheten, men å være gjennomtenkt og forsiktig med de mange nivåene av kommunikasjon i et design, hjelper oss med å gjøre våre nettsider mer harmoniske.

Og vår omsorg og konsistens bidrar til å gjøre brukerens opplevelse av nettstedet komfortabelt og til og med herlig.


Skrevet utelukkende for WDD av Nate Eagle . Han studerte filosofi på college, en utdanning som forberedte ham perfekt til å designe og utvikle nettsider for PBS KIDS. Du kan lese mer fra ham og hans PBS-medarbeidere på Design.PBS .

Tror du at dette detaljnivået er viktig når du designer dropshadows og gradienter? Har du ditt eget kjærlighetsdokument om hvordan drop-shadows og gradienter brukes?