Drop-Shadows en Gradients: Wees consistent in je visuele metaforen
Slagschaduwen en verlopen zijn twee van de meest voorkomende ontwerpelementen op internet.
Je vindt ze bij veel verschillende stijlen. Het zijn handige effecten voor webontwerpers omdat ze aantrekkelijk, nuttig en gemakkelijk te maken zijn met elk grafisch programma. Maar ze hebben een duistere kant: ze worden vaak misbruikt .
Het gebruik van amateuristische slagschaduwen of -verlopen is bijna net zo erg als het aanbrengen van een scharlaken letter op je shirt om de wereld te laten weten dat je een beginner of een hack bent. Zelfs subtiele, nauwelijks merkbare fouten kunnen spanningen veroorzaken die anderszins mooie en effectieve ontwerpen ondermijnen.
In dit artikel bekijken we welke slagschaduwen en verlopen er zijn , bespreken we hoe u deze effectief kunt gebruiken en bekijken we enkele voorbeelden van fouten en hoe u deze kunt oplossen.
Wat doen drop-shadows en gradienten?
De taak van een webontwerper is om kleurpatronen te maken voor gloeiende tweedimensionale schermen . (Er zijn een paar uitzonderingen hierop: websites kunnen bijvoorbeeld worden bekeken op een Kindle-scherm dat niet gloeit en websites kunnen op papier worden afgedrukt.) Deze schermen weerspiegelen niet de echte wereld; ze lijken niet eens echt op de echte wereld. Om deze reden hebben we geen echte noodzaak om de patronen op onze websites een relatie te laten maken met objecten in de driedimensionale wereld waarin we leven.
Besturingssystemen zoals Unix en DOS hebben een interface die niets anders is dan gekleurde tekst op een scherm. Anderen, zoals Windows en Mac OS X, zijn gevuld met de illusies van echte objecten. OS X heeft bijvoorbeeld een dock die eruitziet als een tafel met een glanzend oppervlak dat in de verte verdwijnt, een menubalk waarvan de afgeschuinde randen ervoor zorgen dat deze enigszins uitpuilt, en schuifbalken die lijken op doorzichtige zuigtabletten.
Al deze effecten zijn metaforen. Ze behandelen bepaalde elementen waarmee we kunnen communiceren op het scherm alsof het driedimensionale objecten zijn die interactie hebben met lichtbronnen op de manier waarop objecten in de niet-digitale wereld dat doen. In zekere zin is het grappig om te doen: al deze lichtbronnen en randen en vormen zijn pure fantasie. Omdat de objecten op het scherm denkbeeldig zijn, waarom zouden we ze dan relateren aan de objecten in de echte wereld?
De illusie van ruimte verbindt het denkbeeldige met een wereld waarin we ons thuis voelen.
De belangrijkste reden waarom we denkbeeldige objecten in verband brengen met echte objecten is dat we experts zijn in het omgaan met objecten in onze driedimensionale wereld. We hebben ervaring met het omgaan met driedimensionale objecten en we hebben kennis opgebouwd van de visuele code die ons vertelt over de relaties van objecten met elkaar in de ruimte.
Het is gedeeltelijk omdat de prestatie van het interpreteren van licht zo opmerkelijk is dat we ons zo verheugen in illusie, of in het creëren van het uiterlijk van objecten. We zijn vaak meer betrokken bij dramatisch levensechte schilderijen van alledaagse objecten zoals huizen en appels dan bij de objecten zelf. Wij mensen hebben al duizenden jaren tekeningen gemaakt die bedoeld zijn om de ideeën van objecten te presenteren. Illusoire zuigtabletten en tafels op het scherm zijn niets anders dan de meest recente manifestatie van deze lange traditie.
Maar er is meer dan plezier. Vorm en positie geven ons informatie over hoe objecten zich tot elkaar verhouden. De lange verticale ruitvorm van de schuifbalk in het Safari-venster, bijvoorbeeld, creëert de illusie dat het 'hoger' of dichter bij me zit dan de elementen eromheen. Dit geeft het meer belang in het ontwerp, wat geschikt is omdat de schuifbalk een essentieel interface-element is voor het navigeren op de pagina.
Visuele metaforen creëren waargenomen bekwaamheid.
Door te verschijnen als een object, creëert de schuifbalk "waargenomen" affordance . "Dat wil zeggen, het verbindt zichzelf door middel van een metafoor tot de eigenschappen van echte objecten die zich lenen voor een specifiek gebruik. Een afgeschuinde knop op een webpagina, bijvoorbeeld, communiceert dat het persen mogelijk maakt . We kunnen alles op een pagina klikbaar maken, maar een klikbaar element koppelen aan het beeld van iets dat kan worden geperst, suggereert zijn functie op een duidelijke, voor de hand liggende en zelfs aangename manier.
Slagschaduwen en verlopen zijn basishulpmiddelen om de illusie van ruimte te creëren.
Slagschaduwen en verlopen zijn twee gereedschappen die helpen de illusie van driedimensionaliteit te creëren en de ruimtelijke relaties van objecten op de pagina voorstellen. Als het goed is gedaan, maakt deze driedimensionale informatie een ontwerp mooier en begrijpelijker.
In de echte wereld worden drop-shadows gemaakt wanneer een object een lichtbron blokkeert om een oppervlak te raken dat erachter ligt. Dit is een van de redenen waarom mensen zeggen dat drop-shadows tweedimensionale ontwerpen "pop" maken: omdat ze objecten lijken te laten uitsteken boven andere elementen.
Verlopen verschijnen wanneer een deel van een object dichter bij een lichtbron staat dan in een ander deel. Het resultaat is dat het dichtstbijzijnde gedeelte lichter lijkt en het verder gelegen deel donkerder. (Verlopen worden complexer, natuurlijk wanneer meerdere lichtbronnen samenwerken of wanneer lichtbronnen verschillende kleuren hebben.)
Dus, door de effecten van licht in de echte wereld na te bootsen, communiceren slagschaduwen en verlopen informatie over metaforische objecten, denkbeeldige lichtbronnen en hun relaties.
Hoe u slagschaduwen en hellingen effectief kunt gebruiken
Hier is een mogelijkheid: gebruik geen slagschaduwen of verlopen.
Ik meen dit, serieus. Dit is de beste manier om schaduwschaduw en verloopfouten te voorkomen, en de optie moet altijd worden overwogen.
Omdat het werpen van slagschaduwen op willekeurige objecten zo gemakkelijk is, kunnen ze een excuus zijn om eenvoudiger, betere oplossingen voor problemen te voorkomen. Voor stukjes tekst die meer prominent moeten zijn, bijvoorbeeld, zullen ontwerpers vaak de kleur, grootte, het gewicht van het type en vele andere elementen verwaarlozen ten gunste van een slagschaduw.
Op dezelfde manier gebruiken ontwerpers vaak gradiënten om een kleurveld minder saai te maken, zonder uit te zoeken waarom de algehele compositie niet dynamisch is.
Als u aan een comp werkt voor een website, bewaar driedimensionale aanrakingen zoals slagschaduwen en verlopen voor het einde , indien mogelijk. Gebruik spatiëring, plaatsing en kleur om het ontwerp effectief te maken voordat u de laatste laag polish toevoegt. Als je je erop concentreert dat je ontwerpen zonder deze trucjes werken, zul je merken dat je ze niet zo vaak nodig hebt en dat ze effectiever zijn als je ze gebruikt.
Voordat je in een slagschaduw of een verloop valt, vraag je jezelf af: " Is een driedimensionale metafoor nodig voor dit ontwerp?" Gebruik ik het om nuttige informatie toe te voegen over de manier waarop objecten gerelateerd zijn of als een effectief onderdeel van een geluid esthetische benadering, of gebruik ik het als een excuus? "
De Subtler, hoe beter
Gebruik voor drop-shadows bijna nooit de standaardinstellingen van Photoshop. De standaard slagschaduw van Photoshop is erg donker en wordt gegoten in de rechterbenedenhoek van een object (de standaard globale lichtbron is 120 ° linksboven).
Schaduwen vertellen je over het licht in je omgeving. Stel dat je in een donkere kamer zonder ramen bent en je een zaklantaarn aanzet. Elk object waarop je het scheen, werpt een schaduw die bijna zwart is. Dat komt omdat het object licht blokkeert van de enige lichtbron, wat betekent dat er geen ander licht van ergens anders vandaan komt om dat gebied op te fleuren.
Nu zal de schaduw niet helemaal zwart zijn vanwege het gereflecteerde licht. Een deel van het licht van je zaklamp kaatst tegen de muren en raakt het gearceerde gebied vanuit een richting die niet wordt geblokkeerd door het object. En als u een lamp in een andere hoek van de kamer aanzet, wordt de schaduw aanzienlijk helderder. Het object werpt een tweede schaduw: de nieuwe schaduw verschijnt waar het licht van de lamp wordt geblokkeerd maar wordt gevuld met het licht van de zaklantaarn, terwijl het gebied van de eerste schaduw nog steeds wordt geblokkeerd door het licht van de zaklantaarn, maar zal worden gevuld met het licht van de lamp.
Wanneer we slagschaduwen aan onze ontwerpen toevoegen, stellen we een denkbeeldige omgeving voor onze webpagina voor. Donkere, harde randen met slagschaduwen suggereren een donkere kamer met een enkele lichtbron. Lichte, zachte randen met slagschaduwen suggereren een ruimte die rijk is aan diffuus licht.
Een goed verlichte ruimte is de meest comfortabele omgeving voor gebruikers, omdat deze vergelijkbaar is met het soort omgeving waarin we onze computers gebruiken: een kantoor of studeerkamer. Tenzij we bewust die comfortzone willen vermijden, moeten we de instellingen voor slagschaduw in Photoshop ver beneden hun standaardwaarden brengen. Breng de dekking terug naar 30 of 40%, of nog lager.
Houd de dingen ook eenvoudig zodat mensen de metafoor begrijpen zonder erover na te denken. Een lichtbron van 120 ° heeft niet veel zin. Mac OS X, bijvoorbeeld, plaatst zijn lichtbron op 90 °, of recht erboven, wat logischer lijkt. Ik maak het nog eenvoudiger en zet de lichtbron direct loodrecht op het scherm. Om dit te doen, breng je gewoon de afstandsinstelling op je slagschaduw naar nul (dit geeft de afstand weer van het object dat de slagschaduw naar het object eronder werpt). Op dit moment doet mondiaal licht er niet toe: het is net alsof er een grote diffuse lichtbron achter de gebruiker komt om het ontwerp te verlichten.
Dit effect is heel gebruikelijk in "trompe-l'œil" -ontwerpen, waarvan de meest voorkomende het achtergrondbeeld of frame van een bureaublad weergeeft, alsof iemand ernaar kijkt van recht erboven. Filmregisseurs zoals Alfred Hitchcock, Martin Scorcese en Wes Anderson gebruik hetzelfde effect voor hun kenmerkende shots met oogwenk. Zulke webontwerpen hebben een soort moeiteloze begrijpelijkheid en het behouden van consistentie in een ontwerp wordt gemakkelijker voor de ontwerper.
Als je de afstandsinstelling hebt ingesteld op 0 en de dekking tot ongeveer 30% verlaagd, heb je een goed startpunt voor een slagschaduw. Speel met de grootte om te bepalen hoe ver het oppervlak van het object lijkt te zijn van de achtergrond waarop het zich bevindt. Als je bijvoorbeeld de grootte instelt op 1 pixel, krijg je een prachtig effect dat bijna onzichtbaar is maar heel prettig. Ontwerper Dan Cederholm heeft kleine, simpele effecten als deze tot een integraal onderdeel van zijn stijl gemaakt (zoals aangetoond in zijn baanbrekende A List Apart-artikel over " Mountaintop Corners “).
Je kunt de dekking ongetwijfeld verhogen als het effect onzichtbaar is, maar subtiel beginnen en het nummer bellen is veel beter dan het tegenovergestelde. Het effect zou niet het geringste beetje duidelijker moeten zijn dan het zou moeten zijn.
Voor verlopen heeft Photoshop veel mooie standaardwaarden. Deze kunnen een aantal goede toepassingen hebben, maar ze hebben zeker onbeperkte slechte toepassingen, dus het is meestal verstandig om er weg te blijven.
Selecteer in plaats daarvan het standaard zwart-wit verloop. Selecteer vervolgens zowel het zwart als het wit en maak ze beide de basiskleur van uw element. Nu dat je een basis hebt, kies je de donkere kant of de lichte kant en pas je deze aan om net iets donkerder of lichter te zijn. Nogmaals, hoe subtieler, hoe beter . (Enkele van de beste verlopen die ik ben tegengekomen, moest ik verifiëren met de pipet in Photoshop om er zeker van te zijn dat ze er waren!)
Hoe groter het contrast tussen het licht en het donker, hoe ronder het oppervlak zal verschijnen. Voor sommige dingen, zoals navigatiemenu's en knoppen, is enige rondheid geschikt. Maar voor objecten die plat lijken, houdt u het contrast laag.
En vergeet niet dat de lichtere kant in de richting van uw lichtbron moet wijzen.
Dit soort verloop is prachtig omdat het de gradiënten nabootst die we altijd om ons heen zien. Niets in de echte wereld is echt een kleurveld, omdat het altijd een soort relatie heeft met een lichtbron. Kijk goed naar de pagina's in een boek of naar het plafond rond je bovenlicht: overal vind je hellingen.
Voorbeelden van fouten en hoe ze te verhelpen
Het web heeft veel duidelijk lelijke gradiënten, maar deze worden meestal niet gedaan door professionele ontwerpers. In plaats van dat ik flagrante fouten vertoon, zal ik een paar manieren illustreren waarin subtiele fouten spanningen kunnen veroorzaken in verder uitstekende ontwerpen.
Uniforme schaduwen voor overlappende objecten
Overlappende objecten impliceren een verschil in afstand tot u (bepaald door hun dikte). Ontwerpers maken echter vaak gebruik van identieke slagschaduwen voor overlappende objecten. De informatie die wordt overgebracht door de slagschaduwen botst dus met de informatie die door de overlapping wordt overgedragen, waardoor de illusie van de dimensionaliteit wordt ondermijnd.
Het zien van dergelijke conflicten maakt me ongemakkelijk, en hoe meer ik me erop concentreer, hoe meer mijn hoofd pijn doet. Gebruikers moeten plezier hebben in uw ontwerp, geen pijn voelen!
U kunt meer over dit probleem lezen in " Bouw een betere slagschaduw , "Een gids door Jacci Howard Bear op About.com.
Abrupte randen
De hoeken van echte slagschaduwen zouden geen harde randen hebben tenzij ze absoluut geen gereflecteerd licht hadden - wat een zeer ongebruikelijke situatie zou zijn. Integendeel, hun hoeken worden meestal afgerond door de lichtstralen die om hen heen kruipen.
Hier is een slagschaduw met een onrealistisch harde rand:
Dit anders mooie ontwerp heeft bijna geen dimensionale illusie, maar heeft een slagschaduw langs de rechterzijbalk. De ontwerper wilde misschien de hiërarchie van de zijbalk op de pagina verlagen, een effect dat door de blauwe achtergrond wordt bereikt. Niet alleen is het echter onnodig donker, maar de onwaarschijnlijk harde kant staart de bezoeker in het gezicht.
Onderaan de zijbalk ziet u een afgeronde overgang, waarbij de ontwerper een meer plausibel effect heeft gecreëerd. Maar je kunt zien waarom hij het niet bovenaan heeft herhaald, omdat het in de horizontale lijn zou schuiven die was ingesteld door de goed uitgelijnde topelementen. In plaats van het realisme van deze afgeronde overgang te eisen, laten we het oplossen door de slagschaduw zoveel mogelijk af te zwakken.
Hier heb ik de slagschaduw zo licht gemaakt dat hij weinig meer doet dan suggereren dat hij verder terug zit. Omdat het zo licht is, is de schone overgangslijn niet lelijk of afleidend.
Wat is er achter dat object aan de hand?
Soms wordt een slagschaduw zonder duidelijke reden gek, zoals bij de blauwe doos rond het W3C-logo hieronder.
Waarom is de slagschaduw zo ver terug van het object en zo afgerond? Hoe meer ik probeer het verhaal te begrijpen dat verteld wordt door deze slagschaduw, hoe verwarder ik word. Ik vermoed dat de ontwerper meer bekendheid en gewicht aan het logo wilde geven, wat de slagschaduw helpt bereiken, maar het verstoort de harmonie van de pagina zo erg dat het het niet waard is.
Laat uw gradiënten geen verschillende lichtbronnen suggereren.
In dit verder uitstekende ontwerp voor WolframAlpha hebben objecten op de pagina hellingen van wit tot licht oranje. Het probleem is dat de gradiënt in het kopgebied bovenaan wit is, wat licht van boven impliceert, terwijl de pagina-elementen die lager liggen onderaan wit hebben, wat licht van onderen impliceert.
Je zou kunnen beweren dat ik dit overdrijf, dat hellingen niet hoeven te kloppen met lichtbronnen. Dat is mogelijk, maar subtiele gradiënten zoals deze hebben een inherent metaforisch verband met de gradiënten die we in de echte wereld zien. Laten we de richting van de verlopen lager op de pagina wijzigen, zodat ze van bovenaf een lichtbron impliceren:
En we krijgen lichtbron-harmonie.
Uiteindelijk bent u vrij om te doen wat u wilt.
Omdat de objecten op een webpagina alleen betrekking hebben op echte objecten door een metafoor, is hun effectiviteit in essentie subjectief. De verbinding tussen een afbeelding van een knop en een echte knop heeft geen werkelijkheid die de gebruiker te boven gaat.
Wij ontwerpers zijn niet verplicht om onze metaforen consistent te maken met de realiteit, maar doordacht en zorgvuldig omgaan met de vele communicatieniveaus in een ontwerp helpt ons onze websites meer harmonieus te maken.
En onze zorg en consistentie helpen de gebruikerservaring van de website comfortabel en zelfs verrukkelijk te maken.
Exclusief geschreven voor WDD door Nate Eagle . Hij studeerde filosofie aan de universiteit, een opleiding die hem perfect voorbereidde om webpagina's voor PBS KIDS te ontwerpen en te ontwikkelen. Je kunt meer van hem en zijn PBS-collega's lezen op Design.PBS .
Denk je dat dit detailniveau belangrijk is bij het ontwerpen van slagschaduwen en verlopen? Heeft u uw eigen huisdier peeves over hoe drop-shadows en verlopen worden gebruikt?