Kerromme tämänhetkisiä digitaalisen suunnittelun trendejä, ensin gradientit, yksi eniten mainituista teemoista trenditutkimuksemme tuloksissa, jotka on toteutettu Awwwards-käyttäjien ja tuomariston yhteistyön ansiosta. Tutustu koko kyselyn tuloksiin kirjassamme NYT. A Contemporary Landscape for Digital Thinkers.

Gradientit ovat olleet trendikkäitä jo jonkin aikaa, aluksi ne tekivät paluun perinteisellä tavalla taustoissa ja kuvissa. Spotify teki niistä jälleen suosittuja soveltamalla kaksivärisiä gradientteja valokuvien päälle brändille ominaiseksi elementiksi kampanjoissaan ja mikrosivustoillaan. Löydät täältä pienen tutoriaalin siitä, miten duotone-gradientteja luodaan photoshopissa.

Tänä vuonna olemme nähneet erilaisia monivärisiä gradientteja, joissa on elinvoimaisia väripaletteja ja epäsäännöllisiä muotoja, joissa on epätarkkuus- ja vääristymäefektejä. Gradientteja käytetään tällä hetkellä monin tavoin, mutta trendien kannalta tyypillisintä on niiden käytön laajentaminen sommittelun toissijaisiin elementteihin, kuten hovereihin, otsikoihin, 3D-elementteihin, kuvakkeisiin ja muihin.

• 

iPhone X edustaa vuoden 2018 trendien paratiisia. Sen laskeutumissivulla, mainoksissa ja monissa sen mainoskampanjoiden elementeissä käytetään eri sävyisiä gradientteja otsikoiden, tekstien tai jopa isotypian yläpuolella. Taustoissa ja erityisesti iPhone X:n aloitusnäytön muotoilussa gradientit EIVÄT kuitenkaan ole yhtenäisiä kuten perinteiset lineaariset tai säteittäiset gradientit, vaan monivärisiä ja epäsäännöllisesti sekoittuvia.

Gradientit 3D:nä? Vertex-väri- ja colormap-tyyli

Tuntuu itsestään selvältä puhua gradienteista 3D:ssä, koska kohtauksen valaistus tuottaa valon asteittaisuutta objektin pinnalla, mutta tälle suuntaukselle luonteenomaista on nimenomaan gradienttien käyttö objektin tekstuurina, toisinaan vertex-väri- ja colormap-gradienttitekniikoita jäljitellen. Molemmat tekniikat palvelevat muutakin kuin puhtaasti koristeellista tehtävää, sillä niitä käytetään tietojen esittämiseen tai 3D-objektien kartoittamiseen.

Gradienttien tyypit

Värejä voidaan sekoittaa useilla eri tavoilla, yleisimpinä lineaariset tai säteittäiset gradientit, joilla on erilaisia parametreja, kuten säde, suuntaus, läpinäkymättömyys tai väripisteet. Trendikästä juuri nyt, kuten olemme nähneet iPhoneX:n tapauksessa, on epäyhtenäisten sekoitusten käyttö, joissa käytetään gradienttiverkkoja tai muita tekniikoita. Gradienttiverkon avulla vääristämme gradientin pintaa luodaksemme vapaamuotoisen muodon. Löydämme monenlaisia gradientteja, kuten yksivärisiä, kaksivärisiä, monivärisiä, gradienttiramppeja jne., kuten seuraavassa grafiikassa osoitetaan.

Käyttökelpoisia työkaluja CSS-gradientteihin

Tällaisten efektien luomiseksi CSS:ssä on saatavilla runsaasti työkaluja, joiden avulla niitä voidaan luoda visuaalisten editorien avulla yksinkertaisesti kopioimalla ja liittämällä CSS-koodi, kuten näet tässä: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Lataa Gradients lähdetiedosto!

Harrasta gradientteja, lataa lähdetiedosto ilmaiseksi vektorimuodossa .ai tai pdf tehdäksesi omia suunnittelukokeiluja julisteen gradienttien kanssa.

LATAA TÄSTÄ

Awwwards Gradients Collection

Kuten aina olemme tehneet valikoiman SOTD:itä ja ehdokkaita, jotta voit nähdä näitä efektejä käytössä, toivottavasti löydät inspiraatiota Awwwards-kokoelmista tai kirjastamme NYT. A Contemporary Landscape for Digital Thinkers, jossa käsitellään vuoden tärkeimpiä verkkosuunnittelun trendejä.

• 
• 
• WebGL 3D-malli WebGL:ssä
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• Kotisivu Parallaksessa