Kuvakkeet ovat olennainen osa suunnittelua. Ne ovat visuaalisia vihjeitä, jotka osoittavat erilaisia ​​toimintoja, ja ne voivat antaa tuotteelle ainutlaatuisen identiteetin. Mutta monta kertaa päätämme juhlia sen merkitystä lataamalla samat kuvakesarjat ja tekemällä jokaisen verkkosivuston jokaisesta kuvakkeesta sama kuin edellinen. Mikä tapa käsitellä jotain niin tärkeää!

Tämän ongelman ratkaisemiseksi olen luonut oppaan, jonka avulla suunnittelijat voivat lisätä kuvakkeisiinsa visuaalista syvyyttä ja tehdä niistä yksilöllisiä edustamalleen tuotteelle. Tämä opetusohjelma on pitkälti innoittamana Google Material Design -oppaasta.

Googlen materiaalisuunnittelun periaatteet

Miten sanotaan Google 'Materiaali on metafora.' Lainaa visuaalisia vihjeitä fyysisestä maailmasta ja luo uusi visuaalinen kieli kaikkien käyttöliittymiesi standardoimiseksi. Materiaalisuunnittelun periaatteet ovat saatavilla ja sitä voidaan käyttää nopeasti eri käyttöliittymien visuaalisen houkuttelevuuden ja käyttökokemuksen parantamiseksi.

1. Käytä yksinkertaisia ​​geometrisia muotoja ja silmiinpistäviä värejä

Materiaalisuunnittelun 'tasainen' suunnittelutrendi, joka perustuu myös tasaisiin muotoihin, valitsi huolellisesti, mikä muoto kuvasi parhaiten elementtiä, jota kuvake edustaa. Valitse huolellisesti, mikä muoto edustaa parhaiten elementtiä, jota kuvake kuvaa.

2. Lisää syvyys hienovaraisilla varjoilla

Varjo on hyvä tapa huijata silmiä ja antaa suunnittelulle syvyyden tunne, koska se simuloi valon vaikutusta esineeseen.

Huomaa, että luonnonvaloa simuloidaan usein tulevan vasemmasta yläkulmasta.

3. Korvaa Drop Shadows värisävyillä

Kutakin väriä käytetään useina sävyinä visuaalisen syvyyden simuloimiseksi. Esimerkiksi Gmail-kuvakkeessa näkyy erilaisia ​​punaisia ​​sävyjä, joita käytetään M-muotoon, ja kirjekuoren läpän alla käytetään tummempaa sävyä harmaalle.

Kuinka voit tehdä sen: Vaiheittaiset esittelyt

Sovellamme yksinkertaisempaa versiota materiaalisuunnittelutyylistä, ja jokaiselle kuvakkeelle käytämme vain kolmea samanväristä sävyä ja pidämme varjot tasaisina ja lyhyinä yleisen 'pitkä varjo' -efektin sijaan.

Resurssit

• Lataa kymmenen kuvaketta, joiden kanssa työskentelemme seuraavaksi tässä .
• Katso Googlen koko ilmainen kuvakesarja tässä .

Aloitetaan.

1. Salaman kuvake

Jaa kuvake kahtia ja tee yläosasta kohotettu. Voit saavuttaa tämän luomalla varjoefektin molempien muotojen leikkauspisteeseen. Käytä kolmea keltaista sävyä - vaaleain päällä, tummempi pohjassa ja pidä varjoa varten vielä tummempi.

2. Chat-kuvake

Alkuperäisessä kuvakkeessa meillä on vähän varjoefektiä kahden kuplan välisessä tilassa, ja sinä luot varjon.

Valitse alla olevasta muodosta piste oikeassa kulmassa avaruudessa ja siirrä sitä ylöspäin vasemmalle, kunnes muodostat suoran kulman vasempaan yläkulmaan.

Kopioi ylempi kupla ja siirrä kopiota alas ja oikealle. Valitse kopio ja alla oleva kuplan muoto, luo siivu Pathfinderillä ja pidä vain yksi leikkauspiste edellisen kopion kanssa.

Nyt voit levittää kolme sinistä sävyä ja laittaa vaaleampi päälle, toinen tummempi keskelle ja toinen tummempi alapuolelle.

3. Valitse Mark-kuvake

Luomme taitetun paperitehosteen. Kopioi kuvake ja poista kaksi ylimääräistä kärkeä oikeassa yläkulmassa ja sitten vasen puoli toisella puolella poistaaksesi vielä kaksi kappaletta.

Kopioi taitto vasemmalla ja siirrä se oikealle.

Luo varjoefekti leikkaamalla nämä kaksi muotoa. Levitä sitten kolme värisävyä jättämällä tummimmat varjoon, toiset tummimmat pisimpään kappaleeseen ja vaaleimmat yläosaan. ### 4. Lippukuvake

Aloita pyöristämällä reunat ja poista sitten lipun pohja.

Luo taittovaikutus, piirrä kaksi leikkaavaa viivaa vinosti. Käytä Pathfinder-ohjelmaa, jaa lipun muoto viivoilla ja levitä lippuun kolme vihreää sävyä jättämällä pohja harmaaksi.

5. Sydämen kuvake

Kopioi sydämen kuvake.

Eristä muodon vasen puolisko.

Piirrä diagonaalinen viiva alas oikeasta yläkulmasta.

Peitä tuloksena oleva muoto sydämellä ja siirrä sitä sitten oikealle vähentääksesi muodon varjosta. Levitä kolme vaaleanpunaisen sävyä.

6. Vuoret-kuvake

Alkuperäisen kuvakkeen sisällä oleva tyhjä tila osoittaa, mihin voimme asettaa varjon.

Luo kaksi kolmion muotoa kustakin huipusta.

Siirrä kopio pienemmästä oikealle ja pura tuloksena oleva leikkauspiste varjomuodoksi.

Levitä kolme ruskeaa sävyä vaaleammalla vasemmalla, toisella vaaleammalla suurimmalla kolmiolla ja tummimmalla keskellä olevalla varjolla. Levitä pieni säde kulmaan tuloksen tasoittamiseksi.

7. Ihmiset-kuvake

Valitse vasemmanpuoleisen henkilön alaosa ja kopioi se. Kohdista kopio oikealla olevan henkilön kanssa. Valitse nyt kolme päällekkäistä muotoa ja käytä 'Jaa' -työkalua 'Pathfinder' -paneelista. Ota nyt värit loppuun.

8. Neliön kelluva kuvake

Valitse pohjan muoto ja siirrä sitten yläosan keskikohtaa ylöspäin, kunnes se näyttää timantilta.

Kopioi timantin yläosa ja siirrä kopiota 10 tai 20 kuvapistettä alaspäin.

Valitse kaksi alempaa muotoa ja käytä 'Jaa' -työkalua 'Pathfinder' -paneelista.

Pidä tuloksena olevista leikkaavista muodoista vain kaksi alaosaa ja poista mahdolliset lisäpisteet.

Viimeistele soveltamalla kolmea punaista sävyä ja samalla keskittämällä tummin.

9. Kirjainkuvake

Valitse ”Suora valinta” -työkalulla (A) kirjainmuodon toiseksi korkein kohta.

Lisää piste segmenttiin oikealle 'Kynä' -työkalulla.

Nyt kun sinulla on ylimääräinen piste, voit muotoilla negatiivisen tilan uudelleen, jotta se näyttäisi paperilta nostamalla kahta ylempää pistettä ja siirtämällä niitä oikealle ja vasemmalle kuvan osoittamalla tavalla.

Valitse kaikki ja käytä jakajan muotoa 'Pathfinder' -paneelista. Erota paperin ylempi muoto kirjekuoresta ja kopioi sitten kirjekuoren yläosa paperin päälle leikkaaksesi varjon muoto ennen kolmen sinisen sävyn levittämistä.

10. Kakku-kuvake

Eristä kakun pohjan kaksoiskappale.

Se pienentää sen leveyttä siirtämällä vasenta ja oikeaa reunaa sisäänpäin.

Siirrä tuloksena oleva muoto alkuperäisen kuvakkeen päälle ja pidennä korkeimmat kohdat päällekkäin himmeän muodon kanssa.

Luo jako kaikista päällekkäisistä muodoista 'Pathfinder' -sovelluksella ja poista ylimääräiset pisteet aiemmin luomasi kakun kapean pohjan vierestä.

Täydennä kakkusi levittämällä vaalean oranssia kuoreen ja kynttilään, tummempi sävy pohjassa ja jopa tummempi oranssi liekin muotoon ja reunavarjoon.

Paranna kuvakesarjan ulkoasua

Kuvakkeiden luominen Materiaalityylillä voidaan suorittaa yksinkertaisella tavalla. Tarvitset vain hyvän yhdistelmän harkittuja geometrisia muotoja, rikkaita värisävyjä ja varjoefektejä.

Hyvä uutinen on, että sinun ei tarvitse luoda kaikkia kuvakkeita tyhjästä, kuten teimme tässä opetusohjelmassa. Voit aloittaa ilmaisista, olemassa olevista litteistä kuvakkeista ja soveltaa yksinkertaisia ​​oppimiasi tekniikoita.

Haluaisin todella nähdä, mitä luot. Voit vapaasti jakaa kommenttisi ja mukautetut kuvakkeet.