Sisällysluettelo
Täydellinen opas visuaalisen suunnittelun perusteiden oppimiseen.
Miljoonan dollarin kysymys: mikä on hyvän suunnittelun salaisuus?
Voimme puhua tästä filosofisesti, mutta yleisesti ottaen hyvän suunnittelun sananlaskuinen "salaisuus" piilee tavassa, jolla järjestät visuaaliset elementit suhteessa kankaaseen ja toisiinsa. Periaatteessa kuvasimme juuri ulkoasun suunnittelua, joka on kaikkialla, minne katsotkin, kun ajattelet sitä.
Otetaan esimerkiksi lehtien ulkoasu. Niiden ulkoasu noudattaa klassista ruudukkojärjestelmää (opimme kohta kaiken ruudukoista). Kaikki on yleensä kohdistettu vasemmalle, oikealle ja alareunaan. Erityisesti palstoilla on selkeä perusteltu linjaus, joka tekee sivusta paitsi visuaalisesti houkuttelevan, myös helppolukuisen ja arvovaltaisen. Suuret otsikot houkuttelevat katsojan huomion.huomion, kun taas alaotsikko on kooltaan kontrasti, joka luo visuaalisen tietohierarkian.
Linda Gaom, Behance
Kaikki nämä ominaisuudet tekevät sivujen suunnittelusta siistiä, jäsenneltyä ja helppolukuista, ja ne ovat sopusoinnussa vinkkien kanssa, joista puhumme seuraavaksi. Mutta aluksi kerrotaan lisää itse ulkoasun suunnittelusta.
Mitä on ulkoasun suunnittelu?
Ulkoasun suunnittelussa on kyse graafisten elementtien sijoittelusta lukijan huomion herättämiseksi ja tietyn viestin välittämiseksi visuaalisesti houkuttelevalla tavalla.Kyse ei siis ole logosuunnittelusta, vaan painetun materiaalin, kuten sanomalehtien, aikakauslehtien ja julisteiden, sekä niiden digitaalisten vastineiden suunnittelusta, samoin kuin web-, sovellus- tai UX/UI-suunnittelusta.
Sana 'layout' antaa meille paljon vihjeitä. Se tarkoittaa ennalta määrättyjen elementtien sijoittelua sivulla.
Kun ulkoasu on tehokas, se näyttää hyvältä ja ohjaa katsojaa ymmärtämään viestin, joka suunnittelulla pyritään välittämään. Ulkoasun ymmärtäminen on siis avainasemassa, kun luodaan mukaansatempaavia, tehokkaita, käyttäjäystävällisiä ja miellyttäviä ulkoasuja.
Jos ulkoasu ei välitä sanomaansa hyvin yleisölle, toisin sanoen se ei "lue hyvin", ulkoasu on tehoton, vaikka se näyttäisi kuinka trendikkäältä tahansa. Ulkoasun suunnittelussa sisältö menee trendien ja kikkailujen edelle.
Ulkoasun suunnittelun tarkoitus
Viestin välittäminen nopeasti
Tämä on avainasemassa. Ulkoasun suunnittelussa luodaan graafisten elementtien väliset suhteet, jotta silmänliikkeet saadaan sujuvasti kulkemaan mahdollisimman tehokkaasti ja vaikuttavasti.
Tasapainon luominen
Ulkoasun suunnittelun periaatteiden käyttäminen on suoraviivaisin tapa luoda tasapainon ja symmetrian tunnetta suunnitteluprojekteihisi ilman, että siitä tulee tylsää.
Yhteenkuuluvuuden luominen
Ulkoasu auttaa sinua järjestämään suunnittelun monet elementit helposti omaksuttavaan, johdonmukaiseen ja loogiseen muotoon.
Luoda kauneutta
Tasapaino ja rakenne luovat luonnostaan kauneutta. Jos ulkoasun suunnittelu on tehty oikein, siitä tulee automaattisesti visuaalisesti houkutteleva katsojan silmissä. Mitä vähemmän katsojien täytyy nähdä vaivaa ymmärtääkseen viestin, sitä houkuttelevammalta ulkoasusi näyttää.
Frank Philippinin suunnittelema kirja "I Used to Be a Design Student: Then - Now." Lähde: DesignBoom.
Ulkoasun suunnittelun elementit
Teksti
Tämä ei koske vain tekstirunkoa tai kappaleita, vaan myös otsikoita, väliotsikoita, otsikoita ja alatunnisteita. Typografian, värin ja koon valinnalla saavutetaan erilaisia vaikutuksia siihen, miten ulkoasu välittyy yleisölle.
Kuva
Yleisimpiä kuvatyyppejä ovat valokuvat, kuvitukset ja infografiikat.
Muodot
Muodot voivat olla geometrisia, jolloin ne ovat hyvin kulmikkaita, tai orgaanisia, jolloin ne jäljittelevät luontoa. Ne voivat olla myös abstrakteja. Abstraktit muodot ovat olleet hyvin trendikkäitä viime vuonna, sillä olemme nähneet web-suunnittelijoiden sisällyttävän niitä monimutkaisiin ja laajoihin kokonaisuuksiin.
Muodot voivat korvata kuvan, tai niitä voidaan käyttää lisäämään graafisia elementtejä sivulle, korostamaan tekstiä tai rajaamaan tilaa muiden visuaalisten elementtien välillä.
Valkoinen tila
Kaikissa ulkoasusuunnitelmissa on tietty määrä valkoista tilaa, jonka avulla elementit voivat hengittää ja erottua itsenäisesti.
Ulkoasun suunnittelun kultaiset periaatteet
Huomaat, että ulkoasun suunnittelun periaatteet noudattavat monia suunnittelun perusperiaatteita, kuten värien käyttöä tietyllä tavalla, typografiaa, toistoa, kontrastia, hierarkiaa ja tasapainoa.
Periaate #1. Käytä ristikoita
Ruudukot auttavat suunnittelijoita sijoittamaan eri suunnitteluelementtejä, kuten tekstiä ja kuvia, siten, että ne näyttävät yhtenäisiltä ja helposti seurattavilta.
Ne luovat järjestyksen tunnetta, estävät elementtejä peittämästä toisiaan, ja mikä tärkeintä, ruudukot myös korjaavat linjausta. Työsi tuntuu siistimmältä ja ammattimaisemmalta.
Lähde: hgmlegal.com
Ristikoiden anatomia
Saatat luulla, että se koostuu vain pysty- ja vaakasuorista viivoista, mutta ruudukko koostuu useista osista. Itse asiassa monista. Seuraavassa on tärkeimpiä termejä, jotka sinun on tiedettävä perusruutuun liittyen:
- Muotoilu Jos siis suunnittelet jotakin painotuotteita varten, formaatti on sivu, ja jos olet verkkosuunnittelija, formaatti on verkkosivu tai selainikkuna.
- Marginaalit ovat tarkoituksellisia tyhjiä tiloja formaatin ja muotoilun välillä.
- Virtauslinjat ovat vaakasuoria viivoja, jotka jakavat ulkoasun samansuuntaisiin osiin. Virtausviivat auttavat ulkoasun luettavuudessa ja ohjaavat lukijaa seuraamaan sisältöä oikein.
- Moduulit ovat lohkoja, jotka muodostuvat minkä tahansa ruudukon vaaka- ja pystysuorista virtaviivoista. Jos ajattelet asiaa, ne ovat minkä tahansa ruudukon rakennuspalikoita. Kaikki pystysuorat moduulisi muodostavat sarakkeet, kun taas kaikki vaakasuorat ruudut muodostavat rivit.
- Alueet ovat toisiinsa liitettyjen moduulien ryhmiä, joko pysty- tai vaakasuunnassa. Ei ole mitään sääntöjä siitä, miten nämä moduulit järjestetään.
Lähde: Radversity
Verkkotyypit
Asetteluristikoita käytettiin alun perin käsinkirjoituksen järjestämiseen paperille.
Ne juontavat juurensa jo 1200-luvulta, jolloin ranskalainen taiteilija Villard De yhdisti ruudukkojärjestelmän ja kultaisen leikkauksen tuottaakseen painettuja sivuasetteluja, joissa on marginaalit. Tämä ruudukkojärjestelmä on nähtävissä tänäkin päivänä, kuten suurin osa painettujen kirjojen ja lehtien asetteluista osoittaa. Kustantajat, toimittajat ja suunnittelijat käyttävät mieluiten vakioruudukkoja, ei ainoastaan siksi, että ne näyttävät hyvältä, vaan myös siksi, että lukijat ovat tottuneet siihen.odottaa tiettyjen suunnitteluelementtien olevan tietyssä paikassa.
Ristikot voidaan suunnitella kahdella tavalla: symmetrisesti tai epäsymmetrisesti. Symmetriset verkot noudattavat keskilinjaa, jossa pysty- ja vaakasuuntaiset alueet ovat yhtä suuret kuin toisissaan, ja sarakkeet ovat yhtä leveät.
Eräässä epäsymmetrinen verkko , kuten nimestä voi päätellä, marginaalit ja sarakkeet eivät ole kaikki samanlaisia.
Tämän luokittelun perusteella maailmassa käytetään viittä pääasiallista asetteluruudukkoa, joihin voit luottaa:
Käsikirjoitusverkot ovat asiakirjojen yleisin ruudukkomuoto. Ne erottavat otsikon, alatunnisteen ja marginaalit toisistaan ja luovat periaatteessa suorakulmion formaatin (tai sivun) sisälle, joka muodostaa tekstin rajat. Ne ovat aikakauslehtien, sanomalehtien ja kirjojen perusta. Se on siis luultavasti sinulle tutuin ulkoasu.
Lähde: UXplanet
Lähde: Radversity
Pylväsverkot ovat toinen suosikki aikakauslehtien julkaisemisessa. Tyypillisessä aikakauslehden ulkoasussa käytetään pylväsristikoita erottamaan teksti helposti luettaviin osioihin. Mutta ne ovat hyvin suosittuja myös verkkosivustoilla. Voit käyttää mitä tahansa kahdesta kuuteen ristikosta. Enemmänkin on mahdollista, mutta ei yleistä. Erittäin tärkeää pylväsristikoissa on, että pylväiden välit eli kourut ovat yhtä kaukana toisistaan.muut.
Esimerkiksi sanomalehdet käyttävät symmetrisiä pylväsruutuja, kun taas verkkosuunnittelussa suositaan epäsymmetristä pylväsruutua.
Lähde: UX Planet
Lähde: Radversity
Modulaariset verkot ovat samanlaisia kuin pylväsruutu, mutta niissä otetaan huomioon myös vaakasuuntaiset virtausviivat. Tämäntyyppistä ruutua tarvitaan, kun ulkoasussa on järjestettävä erilaisia elementtejä ja pylväsruutu ei yksinkertaisesti riitä.
Modulaarisissa ruuduissa on samankokoisia moduuleja, joiden avulla tilavyöhykkeet on helppo visualisoida eri tavoin.
Lähde: UX Planet
Lähde: Radversity
Perusverkot ovat loistavia tekstipohjaisissa koosteissa. Perusviiva on viiva, johon teksti jää kirjoittaessasi, ja etumerkki on kahden perusviivan välinen väli. Mietitkö, kuinka suuria otsikoiden tai väliotsikoiden pitäisi olla?
Perusviivaverkot auttavat antamaan tekstillesi sujuvan rytmin.
Lähde: UX Planet
Lähde: Fragaria
Hierarkkiset verkot eivät näytä yhtä paljon ruudukolta kuin kaikki niiden vastineet. Siitä huolimatta ne ovat erittäin käyttökelpoisia, kun suunnitteluelementtejä järjestetään tärkeysjärjestykseen. Hierarkkiset ruudukot voivat perustua modulaarisiin ruudukkoihin, tai voit jopa luoda oman. Verkkosivustot käyttävät tätä ruudukkoa paljon, erityisesti digitaaliset aikakauslehdet ja sanomalehdet luottavat yleensä enemmän hierarkkisiin ruudukkoihin kuin pylväsruutuihin siirtyessään muuttumaandigitaalinen.
Lähde: UX Plane
Periaate #2. Käytä negatiivista tilaa
Ajattelemme usein, että tyhjyys, hiljaisuus tai värien puute on huono asia, mutta emme ota huomioon, miten ne ovat kontrastin vankka perusta.
Negatiivinen tila, jota kutsutaan myös valkoiseksi tilaksi, on se alue suunnittelussasi, jossa ei ole mitään varsinaisia elementtejä. Se on tyhjäksi jätetty alue. Se ei vain ympäröi aineistojasi, vaan luo myös tarvittavat siteet niiden välille. Tämän vuoksi negatiivinen tila on oikeutettu suunnitteluelementti, ja sillä on valtava vaikutus siihen, kuinka tehokas ulkoasun suunnittelu on.
Hyvä vs huono negatiivinen tila
Negatiivinen tila auttaa erottamaan suunnittelun eri alueet toisistaan ja antaa samalla ulkoasun hengittää. Se auttaa visuaalisen hierarkian ja visuaalisen tasapainon kanssa; se kiinnittää käyttäjän huomion keskeisiin elementteihin; se vähentää häiriötekijöiden määrää; ja lopuksi se lisää suunnittelun tyyliä ja eleganssia.
Kokemattomilla suunnittelijoilla saattaa olla taipumus täyttää mahdollisimman suuri osa kankaasta suurentamalla tekstiä tai suurentamalla logoa tai kuvaa. Kun elementeille annetaan tilaa, katsoja voi kuitenkin havaita tietyt vihjeet nopeammin ja helpommin.
Jos kaikki huutaa katsojan huomiota, mitään ei kuulla.- Aaron Walter, 'Design for emotion'.
Helppo tapa määrittää negatiivinen tila on käyttää modulaarista ruudukkoa. Kun asetat sen suunnittelusi päälle, voit helposti visualisoida, mitkä moduulit voivat jäädä tyhjiksi ja mitkä pitäisi täyttää.
Suunnittelija: Brunswicker, Lähde: Codesignmag.com
Periaate #3. Valitse yksi painopistealue
Onko asiakas koskaan pyytänyt sinua tekemään logosta isomman? Ja sitten vielä isomman otsikon?
Kaikkea ei voi korostaa, sillä se kumoaa hyvän suunnittelun tarkoituksen. Aivan kuten aika, keskittyminen on suhteellista. Jotta jokin elementti erottuu, toisen täytyy toimia taustana. Joidenkin elementtien täytyy dominoida toisia, jotta suunnittelussa näkyy visuaalinen hierarkia.
Suunnittelun keskipiste on elementti, jolla on suurin visuaalinen painoarvo. Se on elementti, joka vetää silmää puoleensa ensimmäisenä, enemmän kuin mikään muu ulkoasussa.Keskipiste ilmoittaa yleisöllesi, mistä heidän katselumatkansa alkaa. Se on siis kertomasi tarinan alku.
Tämä voidaan yleensä saavuttaa käyttämällä suurta kuvaa tai suurta typografista lähdettä. Huomaa, kuinka tehokas alla oleva keskipiste on.
Suunnittelija: Braulio Amado, Bloomberg Businessweek, Lähde: On mukavaa, että
Mutta vaikka keskipiste vetää yleisön huomion puoleensa, seuraava sääntö auttaa ohjaamaan sitä.
Periaate #4. Ajattele läheisyyttä ja virtausta.
Läheisyysperiaate on yksinkertainen: varmista, että toisiinsa liittyvät elementit sijoitetaan yhteen.
Läheisyys osoittaa, että visuaaliset elementit ovat yhteydessä toisiinsa ja muodostavat yhden visuaalisen kokonaisuuden, joka auttaa jäsentämään ulkoasua.Ryhmittele siis vain sellaisia suunnittelun kohteita, joilla on yhteys toisiinsa, ja käytä suunnittelun informaatiotaskuja ohjaamaan yleisösi kulloinkin tarvittavaan sisältöön. Tätä kutsutaan myös virtausperiaatteeksi.
Lähde: Satori Graphics
Katso myös: 12 kuvitustyyliä, jotka jokaisen kuvittajan tulisi tunteaHyvin virtaava ulkoasu johdattaa katsojan katseen helposti koko ulkoasun läpi, elementistä toiseen. Keskeiset kohdat vetävät katseen puoleensa, ja niistä tulee levähdyspaikka, kun taas muut elementit antavat suuntaa.
Yksinkertainen tapa ymmärtää tämä on ottaa esimerkiksi verkkosivumme esimerkki. Grafiikka on erotettu selkeästi tekstistä, samoin kuin toimintakutsut, joten katsojan huomio siirtyy informaatiokokonaisuudesta toiseen.
Periaate #5. Käytä kontrastia
Varmista, että suunnittelussa on riittävästi kontrastia.
Kontrasti auttaa jäsentämään ulkoasua, luo kaivattua hierarkiaa ja korostaa sitä, mikä on tärkeää.Lisäksi kontrastin hyvä käyttö lisää visuaalista mielenkiintoa koko ulkoasuun. On totta, että ulkoasu, jossa kaikki on samankokoista, -muotoista tai -väristä, näyttää tylsältä. Kontrasti piristää asioita.
Ensimmäinen ajatuksesi saattaa olla värikontrasti, kuten lämmin vs. viileä, tumma vs. vaalea, sininen vs. oranssi. Mutta vaikka väri on äärimmäisen tärkeä kontrastin periaate, on olemassa myös tyypin, linjauksen ja koon kontrasti. Muista, että kontrasti on myös suhteellista, sillä sillä on merkitystä vain, kun se asetetaan vastakkain muiden elementtien kanssa.
Katso myös: Mitkä ovat Gestalt-periaatteet & Miten niitä sovelletaan?Seuraavassa on joitakin esimerkkejä ulkoasusta, jossa tätä sääntöä käytetään fiksusti ja kauniisti. Huomaa typografian, värien ja jopa elementtien koon kontrasti.
Lähde: IAG:n sovittelutoimintasuunnitelma
Periaate #6. Toisto, kuvio, rytmi.
Kun ajattelemme toistoa, ajattelemme samaa elementtiä yhä uudelleen ja uudelleen.
Mutta muotoilussa se on erilaista. Se ei todellakaan ole niin tylsää. Kun toistoa käytetään oikein, se voi itse asiassa vahvistaa muotoilua.
Yritä tunnistaa ja käyttää uudelleen motiivia koko ulkoasussasi, jotta eri alueet tuntuvat olevan yhteydessä toisiinsa ja olevan osa samaa sommitelmaa. Se auttaa suunnittelua saamaan teeman. Toistamalla elementtejä, et ainoastaan toimita yleisön odotusten mukaisesti, vaan parannat myös käyttäjäkokemusta. Johdonmukaisuus saa käyttäjät tuntemaan olonsa mukavammaksi.
Voit tehdä tämän toistamalla muotoja tai symboleja tai jopa värimaailmaa, kirjasintyyppiä ja yleisesti ottaen samaa tyyliä.
Hyvä tapa ottaa käyttöön on käyttää kirjasintyyppiä, jolla on suuri kirjasintuoteperhe. Rajoita erilaisten kuvioiden, viivapainojen/-tyylien ja värien määrää ja toista niitä kauttaaltaan. Pyri myös pitämään kuvien ja grafiikan tyyli samana. Käytä esimerkiksi saman taiteilijan kuvituksia.
Lähde: Thepentool.co
Siinä kaikki. Nämä kuusi periaatetta auttavat sinua järjestämään suunnittelusi ja saamaan siitä siistimmän, ammattimaisemman ja tasapainoisemman ulkoasun.
Mutta matkasi ei pääty tähän. Graafinen suunnittelu ei ole täsmällistä tiedettä, eikä sitä pidä rajoittaa vain vinkkeihin ja periaatteisiin. Kuten kaikilla luomisen aloilla, ei ole olemassa mitään kovaa nyrkkisääntöä. Näiden vinkkien rikkominen hienovaraisilla tavoilla lisää syvyyttä ja vaihtelua suunnittelukuviisi.
Ne ovat kuitenkin hyvä lähtökohta, ja kehotamme sinua kokeilemaan niitä ja kertomaan meille, miten ne toimivat!
Lataa Vectornator aloittaaksesi
Vie suunnittelusi seuraavalle tasolle.
Lataa tiedosto
