Kaikki visuaalisesta suunnittelusta
Opi visuaalisen suunnittelun periaatteet ja miten hyödynnät niitä tehokkaasti verkkosivustoilla, brändäyksessä ja markkinointimateriaaleissa.
Värioppi selittää, miten sävyt liittyvät toisiinsa, miten ne yhdistyvät ja miten ne vaikuttavat havaintoon ruudulla ja painettuna. Tässä luvussa…
Lue lisääVärien psykologia tutkii, miten värit vaikuttavat tunnelmaan, muistiin ja toimintaan. Tässä luvussa kerrotaan värien psykologiasta ja siitä, miten…
Lue lisääVärien psykologia markkinoinnissa yhdistää paletin valinnat kampanjan tavoitteisiin ja brändin persoonallisuuteen. Tässä luvussa kerrotaan värien…
Lue lisääVärien psykologian käyttö brändäyksessä tarkoittaa sellaisten sävyjen valitsemista, jotka vastaavat asiakkaille lupaamaasi persoonallisuutta. Tässä…
Lue lisääSinisen värin psykologia viestii usein luottamuksesta, rauhallisuudesta ja ammattimaisuudesta. Tässä luvussa kerrotaan sinisen värin psykologiasta ja…
Lue lisääVihreän värin psykologia liitetään yleensä kasvuun, terveyteen ja luontoon. Tässä luvussa kerrotaan vihreän värin psykologiasta ja siitä, miten…
Lue lisääPunaisen värin psykologia voi viestiä kiireellisyyttä, intohimoa tai ruokahalua sävystä riippuen. Tässä luvussa kerrotaan punaisen värin psykologiasta…
Lue lisääToimivissa väriyhdistelmissä on yksi hallitseva sävy, neutraaleja värejä ja yksi korostusväri toimintoja varten. Tässä luvussa kerrotaan…
Lue lisääVärympyrä järjestää sävyt niin, että näet ensisijaisten, toissijaisten ja kolmannen asteen värien väliset suhteet. Tässä luvussa kerrotaan…
Lue lisääBrändin väripaletti listaa logoihin, verkkoon, printtiin ja somegrafiikoihin hyväksytyt värit. Tässä luvussa kerrotaan brändin väripaletista ja siitä,…
Lue lisääVärikontrasti mittaa tekstin ja taustan vaaleuseroa. Tässä luvussa kerrotaan värikontrastista ja siitä, miten hyödynnät sitä verkkosivustollasi ja…
Lue lisääVärimaailma on suunniteltu joukko sävyjä, joita käytetään koko suunnittelussa sopusoinnun luomiseksi. Tässä luvussa kerrotaan värimaailmasta ja siitä,…
Lue lisääYleisiä verkkosivun värivirheitä ovat heikko kontrasti, liian monta sävyä ja epäyhtenäiset painikkeet. Tässä luvussa käydään läpi verkkosivun…
Lue lisääSosiaalisen median suunnittelu mukauttaa brändin visuaalisen ilmeen nopeasti neliö-, pysty- ja vaakamuotoihin. Tässä luvussa käydään läpi sosiaalisen…
Lue lisääMarkkinointisuunnittelu luo visuaalisen ilmeen kampanjoihin mainoksissa, sähköpostissa, verkossa ja printissä. Tässä luvussa käydään läpi…
Lue lisääSähköpostin suunnittelun parhaita käytäntöjä ovat yksipalstainen asettelu, isot napautuskohteet ja vaihtoehtoiset tekstit kuville. Tässä luvussa…
Lue lisääUutiskirjeen suunnittelussa yhdistyvät vahvat otsikkorivit, silmäiltävät osiot ja yksi pääasiallinen linkki. Tässä luvussa käydään läpi uutiskirjeen…
Lue lisääVerkkobannerin suunnittelu tasapainottaa brändin, tarjouksen selkeyden ja tiedostokoon mainosverkostoja ja sivuston omia kampanjoita varten. Tässä…
Lue lisääEsitteen suunnittelu jäsentää palvelut, todisteet ja yhteydenottotavat painettuun tai PDF-ladattavaan muotoon. Tässä luvussa käydään läpi esitteen…
Lue lisääSaavutettava verkkosivusuunnittelu varmistaa, että vammaiset ihmiset voivat havaita, selata ja käyttää sivustoasi. Tässä luvussa käydään läpi…
Lue lisääVerkkosivun tekeminen ADA-yhteensopivaksi tarkoittaa kontrastia, vaihtoehtoisia tekstejä, näppäimistökäyttöä ja selkeää rakennetta. Tässä luvussa…
Lue lisääADA-yhteensopiva verkkosivusuunnittelu noudattaa tunnustettuja standardeja havaittavista ja käytettävistä käyttöliittymistä. Tässä luvussa käydään…
Lue lisääOsallistava suunnittelu rakentaa tuotteita, joita mahdollisimman monenlaiset ihmiset voivat käyttää ilman erillisiä versioita. Tässä luvussa käydään…
Lue lisääVerkkosivun saavutettavuusseloste kertoo standardit, tunnetut puutteet ja palautekanavan. Tässä luvussa käydään läpi verkkosivun saavutettavuusseloste…
Lue lisääVuoden 2025 verkkosuunnittelun trendeissä painottuvat nopeus, rohkea typografia, hienovarainen liike ja saavutettavat värit. Tässä luvussa käydään…
Lue lisääYritysten graafisen suunnittelun trendeihin kuuluvat aito valokuvaus, joustavat brändijärjestelmät ja yksinkertainen geometria. Tässä luvussa käydään…
Lue lisääHero-kuva on sivun yläosan iso kuva, joka tukee pääviestiä. Tässä luvussa käydään läpi hero-kuva ja se, miten voit hyödyntää sitä verkkosivullasi ja…
Lue lisääHero-kuva verkkosivulla tarkoittaa tärkeiden sivujen päähuomiota herättävää bannerikuvaa. Tässä luvussa käydään läpi, mikä hero-kuva on ja miten voit…
Lue lisääKuvien SEO optimoi tiedostonimet, vaihtoehtoiset tekstit, koon ja muodon niin, että kuvat tukevat näkyvyyttä hauissa. Tässä luvussa käydään läpi kuvat…
Lue lisääAlt-tekstien esimerkit kuvaavat kuvan sisällön ja tehtävän tiiviisti ja selkeästi. Tässä luvussa käydään läpi alt-tekstien esimerkit ja se, miten voit…
Lue lisääYleisiä kuvatiedostotyyppejä ovat JPEG, PNG, WebP, SVG ja GIF, ja niillä kaikilla on omat käyttötarkoituksensa. Tässä luvussa käydään läpi…
Lue lisääKuvien optimointi verkkoon pienentää tiedostokokoa ja säilyttää samalla riittävän kuvanlaadun. Tässä luvussa käydään läpi kuvien optimointi verkkoon…
Lue lisääVerkkosivun kuvien pitäisi tukea viestiäsi, sopia brändin sävyyn ja tuntua aidoilta. Tässä luvussa käydään läpi verkkosivun kuvat ja se, miten voit…
Lue lisääNegatiivisen tilan valokuvauksessa jätetään tyhjiä alueita, jotka korostavat kohdetta. Tässä luvussa käydään läpi negatiivisen tilan valokuvaus ja se,…
Lue lisääVerkkosivun taustakuvien pitää olla vähäkontrastisia tekstin takana tai peitetty vahvalla kerroksella. Tässä luvussa käydään läpi verkkosivun…
Lue lisääVerkkosivujen kuvapankkikuvat toimivat, kun ne sopivat väripalettiisi, rajataan omaperäisesti ja yhdistetään oikeisiin kuviin. Tässä luvussa käydään…
Lue lisääSosiaalisen median kuvakoot vaihtelevat kanavan ja sijoituspaikan mukaan, joten valmiit vientiasetukset säästävät aikaa. Tässä luvussa käydään läpi…
Lue lisääKuvien alt-teksti kuvaa sisällön ja tarkoituksen mahdollisuuksien mukaan noin 125 merkillä. Tässä luvussa käydään läpi kuvien alt-teksti ja se, miten…
Lue lisääKuvien laatu brändissä viestii ammattimaisuudesta jo ennen kuin kävijät lukevat tekstin. Tässä luvussa käydään läpi kuvien laatu brändissä ja se,…
Lue lisääVisuaalinen hierarkia järjestää elementit niin, että katsoja näkee tärkeimmän tiedon ensin. Tässä luvussa käydään läpi visuaalinen hierarkia ja se,…
Lue lisääNegatiivinen tila on suunnitteluelementtien ympärillä ja välissä oleva tyhjä alue. Tässä luvussa käydään läpi, mitä on negatiivinen tila, ja se, miten…
Lue lisääValkoinen tila on tarkoituksellista tyhjää tilaa, jota käytetään selkeyden ja fokuksen vuoksi. Se ei ole hukkaan heitettyä tilaa. Tässä luvussa…
Lue lisääValkoinen tila suunnittelussa erottaa osiot toisistaan, korostaa painikkeita ja parantaa ymmärrettävyyttä. Tässä luvussa käydään läpi valkoinen tila…
Lue lisääGestalt-periaatteet kuvaavat, miten ihmiset hahmottavat ryhmiä, kuvioita ja kokonaisia asetteluja. Tässä luvussa käydään läpi gestalt-periaatteet ja…
Lue lisääAsettelun suunnittelu järjestää sisältölohkot, navigoinnin ja median sivulle tai näytölle. Tässä luvussa käydään läpi asettelun suunnittelu ja se,…
Lue lisääVerkkosivun asettelutyyppeihin kuuluvat yksipalstainen, jaettu, ruudukko- ja lehtityyliset mallit. Tässä luvussa käydään läpi verkkosivun asettelu ja…
Lue lisääVisuaalinen tasapaino suunnittelussa jakaa visuaalisen painon niin, että sivu tuntuu vakaalta. Tässä luvussa käydään läpi visuaalinen tasapaino…
Lue lisääTasaus suunnittelussa kohdistaa reunat ja peruslinjat niin, että asettelut tuntuvat harkituilta. Tässä luvussa käydään läpi tasaus suunnittelussa ja…
Lue lisääKontrasti suunnittelussa käyttää koko-, väri- ja painoeroja tärkeiden elementtien korostamiseen. Tässä luvussa käydään läpi kontrasti suunnittelussa…
Lue lisääPositiivinen ja negatiivinen tila yhdessä määrittelevät muotoja ja ohjaavat huomiota sommitelmissa. Tässä luvussa käydään läpi positiivinen ja…
Lue lisääToisto suunnittelussa toistaa värejä, muotoja ja välejä, jotta sivut näyttävät yhtenäisiltä. Tässä luvussa käydään läpi toisto suunnittelussa ja se,…
Lue lisääBrändi-identiteetin suunnittelu on visuaalinen ja sanallinen järjestelmä, joka tekee brändistä tunnistettavan. Tässä luvussa käydään läpi…
Lue lisääBrändisuunnittelu on strategista ja visuaalista työtä, joka muokkaa sitä, miten yritys koetaan. Tässä luvussa käydään läpi, mitä on brändisuunnittelu,…
Lue lisääLogotyyppejä ovat sanamerkit, kirjainmerkit, kuvamerkit, abstraktit merkit, maskotit ja yhdistelmät. Tässä luvussa käydään läpi logotyypit ja se,…
Lue lisääHyvä logo on yksinkertainen, mieleenpainuva, monikäyttöinen ja sopiva yleisöllesi. Tässä luvussa käydään läpi, mikä tekee logosta hyvän, ja se, miten…
Lue lisääYrityksen graafisen suunnittelun lajeja ovat brändäys, markkinointi, verkko, pakkaukset ja liikegrafiikka. Tässä luvussa käydään läpi graafisen…
Lue lisääLogon suunnittelussa yrittäjän kannattaa huolehtia selkeästä toimeksiannosta, kilpailijoiden katsauksesta ja vektoritiedostoista. Tässä luvussa…
Lue lisääVisuaalinen identiteetti on brändin koko ilme: logo, värit, kirjasimet, kuvitus ja asettelu. Tässä luvussa kerrotaan, miten visuaalista identiteettiä…
Lue lisääInfografiikka esittää tietoa tai vaiheita kuvina, jolloin monimutkainen asia on helppo silmäillä. Tässä luvussa kerrotaan, mitä infografiikka on ja…
Lue lisääInfografiikan teko alkaa rungosta, tietojen tarkistuksesta, visuaalisesta hierarkiasta ja verkkoon sopivasta viennistä. Tässä luvussa kerrotaan, miten…
Lue lisääDesign-järjestelmään kootaan osat, muuttujat ja säännöt, joilla rakennetaan yhdenmukaisia käyttöliittymiä. Tässä luvussa kerrotaan, mikä…
Lue lisääBrändin tyyliopas kirjaa ylös logon käytön, värit, kirjasimet, kuvat ja äänensävyn. Tässä luvussa kerrotaan, miten tyyliopasta käytetään sivustolla ja…
Lue lisääSuunnittelutoimeksianto kertoo tavoitteet, kohderyhmän, toimitettavat työt, aikataulun ja esimerkit, joista pidät tai et pidä. Tässä luvussa…
Lue lisääTypografia on kirjasinten asettelun taito ja tekniikka, jolla kieli on luettavaa ja miellyttävää katsoa. Tässä luvussa kerrotaan, mitä typografia on…
Lue lisääSerif-fonttien kirjainten päissä on pieniä viimeistelyviivoja, sans serif -fonteissa ei. Tässä luvussa kerrotaan, miten serif- ja sans serif -fontteja…
Lue lisääFonttien yhdistämisessä käytetään kahta tai useampaa kirjasintyyppiä, jotka erottuvat toisistaan mutta sopivat silti yhteen. Tässä luvussa kerrotaan,…
Lue lisääVerkkoturvalliset fontit ovat kirjasintyyppejä, jotka näkyvät todennäköisesti samanlaisina selaimesta ja laitteesta riippumatta. Tässä luvussa…
Lue lisääVerkkosivuston leipätekstiin parhaat fontit ovat sellaisia, jotka pysyvät luettavina pienessä koossa näytöllä. Tässä luvussa kerrotaan, miten fontteja…
Lue lisääFonttien luettavuus riippuu koosta, rivin pituudesta, riviväleistä ja tekstin kontrastista taustaan. Tässä luvussa kerrotaan, miten luettavuutta…
Lue lisääFonttihierarkia näyttää koon, painon ja välien avulla, mikä teksti on tärkeintä. Tässä luvussa kerrotaan, miten fonttihierarkiaa käytetään sivustolla…
Lue lisääTypografia verkkosuunnittelussa vaikuttaa luottamukseen, ymmärtämiseen ja sivulla vietettyyn aikaan. Tässä luvussa kerrotaan, miten typografiaa…
Lue lisääFonttityyppejä ovat serif, sans serif, slab, käsinkirjoitettu ja koristefontit. Tässä luvussa kerrotaan, miten fonttityyppejä käytetään sivustolla ja…
Lue lisääTypografian säännöt koskevat fonttien määrän rajaamista, yhtenäistä hierarkiaa ja riittäviä välejä. Tässä luvussa kerrotaan, miten sääntöjä käytetään…
Lue lisääGoogle Fonts tarjoaa ilmaisia, verkkoon optimoituja fonttiperheitä, jotka voit upottaa sivustollesi. Tässä luvussa kerrotaan, miten Google Fontsia…
Lue lisääTypografian virheitä ovat liian monet fontit, heikko kontrasti ja keskitetyt pitkät kappaleet. Tässä luvussa kerrotaan, miten virheet tunnistetaan…
Lue lisääBrändifonttisi kertoo persoonallisuudestasi jo ennen kuin kävijä lukee kokonaista lausetta. Tässä luvussa kerrotaan, miten brändifonttia käytetään…
Lue lisääUX-suunnittelu keskittyy siihen, miltä tuote tai verkkosivusto tuntuu ja miten se toimii käyttäjälle. Tässä luvussa kerrotaan, mitä UX-suunnittelu on…
Lue lisääUI-suunnittelu kattaa ne visuaaliset ja vuorovaikutteiset pinnat, joita käyttäjät napauttavat ja klikkaavat. Tässä luvussa kerrotaan, mitä…
Lue lisääUI vs UX vertaa käyttöliittymän ulkoasua kokonaiskokemukseen ja siihen, onnistuuko käyttäjä tehtävässään. Tässä luvussa käydään läpi ui vs ux ja se,…
Lue lisääKäytettävyystestauksessa seurataan, kun oikeat ihmiset yrittävät tehdä tehtäviä sivustollasi tai prototyypissäsi. Tässä luvussa käydään läpi…
Lue lisääKäyttöliittymäsuunnittelun periaatteisiin kuuluvat johdonmukaisuus, palaute, näkyvyys ja virheiden ehkäisy. Tässä luvussa käydään läpi…
Lue lisääKäyttäjälähtöinen suunnittelu rakentuu tutkimuksen, palautteen ja oikeilla käyttäjillä tehtävän toistuvan testauksen varaan. Tässä luvussa käydään…
Lue lisääUX-suunnittelu yritykselle yhdistää sujuvammat polut parempaan konversioon ja asiakkaiden pysyvyyteen. Tässä luvussa käydään läpi UX-suunnittelu…
Lue lisääMobiilisovelluksen suunnittelussa korostuvat peukalon ulottuma-alueet, yksinkertainen navigointi ja offline-tilat. Tässä luvussa käydään läpi…
Lue lisääVerkkosivuston käyttökokemusta parannetaan korjaamalla navigointia, nopeutta, luettavuutta ja lomakkeiden kitkaa. Tässä luvussa käydään läpi…
Lue lisääVerkkosivuston käytettävyys tarkoittaa, että kävijät löytävät tiedon ja saavat tehtävänsä tehtyä ilman vaivaa. Tässä luvussa käydään läpi…
Lue lisääSuunnittelun johdonmukaisuus toistaa painikkeiden, välien ja sävyn malleja sivulta toiselle. Tässä luvussa käydään läpi suunnittelun johdonmukaisuus…
Lue lisääVerkkosivuston suunnittelun testaus yhdistää analytiikan, käytettävyysistunnot ja A/B-vertailut. Tässä luvussa käydään läpi verkkosivuston…
Lue lisääVerkkosuunnittelu on sen suunnittelua ja tyylittelyä, miltä verkkosivustot näyttävät, miten ne luetaan ja miten ne toimivat kävijälle. Tässä luvussa…
Lue lisääMobiiliystävällinen verkkosivusto on luettavissa ilman zoomausta, pienten linkkien näpyttelyä tai vaakavieritystä. Tässä luvussa käydään läpi, miten…
Lue lisääMobile first -suunnittelu alkaa älypuhelimen asettelusta ja laajentaa ominaisuudet sitten suuremmille näytöille. Tässä luvussa käydään läpi mobile…
Lue lisääVerkkosivuston uudistus päivittää sivustosi rakenteen, ulkoasun, sisällön ja usein myös sen taustalla olevan tekniikan. Tässä luvussa käydään läpi…
Lue lisääVerkkosivuston ylätunnisteen suunnitteluun kuuluvat logon sijoittelu, navigointi ja avaintoiminnot, jotka näkyvät sivun yläreunassa. Tässä luvussa…
Lue lisääVerkkosivuston alatunniste toistaa yhteystiedot, lakilinkit ja toissijaisen navigoinnin. Tässä luvussa käydään läpi verkkosivuston alatunnisteen…
Lue lisääVerkkosivuston navigoinnissa pitäisi käyttää tuttuja nimikkeitä ja korostaa kävijän nykyistä osiota. Tässä luvussa käydään läpi verkkosivuston…
Lue lisääEtusivun suunnittelun pitäisi kertoa sekunneissa, ketä autat, mitä tarjoat ja mikä on seuraava askel. Tässä luvussa käydään läpi etusivun suunnittelu…
Lue lisääAbove the fold on sisältö, joka näkyy ennen vierittämistä tietyllä näytön koolla. Tässä luvussa käydään läpi above the fold ja se, miten käytät sitä…
Lue lisääLaskeutumissivun suunnittelussa keskitytään yhteen tarjoukseen ja minimoidaan navigoinnin aiheuttamat häiriöt. Tässä luvussa käydään läpi, miten…
Lue lisääLaskeutumissivun suunnittelun parhaisiin käytäntöihin kuuluvat selkeät otsikot, silmäiltävät luettelot ja luottamusta herättävät elementit. Tässä…
Lue lisääPainikkeen suunnittelussa koko, väri, teksti ja sijoittelu kutsuvat klikkaamaan. Tässä luvussa käydään läpi painikkeiden suunnittelu ja se, miten…
Lue lisääPienyrityksen verkkosivujen suunnittelussa tärkeintä ovat toimivuus puhelimella, selkeät palvelut ja helppo yhteydenotto. Tässä luvussa käydään läpi…
Lue lisääGraafinen suunnittelu on taitoa yhdistää teksti, kuvat ja asettelu viestiksi, joka välittyy visuaalisesti. Tässä luvussa käydään läpi, mitä graafinen…
Lue lisääSuunnittelun elementit ovat viiva, muoto, väri, tekstuuri, tila, hahmo ja sävy. Tässä luvussa käydään läpi suunnittelun elementit ja se, miten käytät…
Lue lisääSuunnittelun periaatteet ohjaavat sitä, miten elementit suhtautuvat toisiinsa tasapainon, kontrastin, korostuksen, liikkeen, kuvion, rytmin,…
Lue lisääVisuaalisen suunnittelun periaatteet ovat käytännön sääntöjä tekstin, värien, kuvien ja tilan järjestämiseen näytöillä ja sivuilla. Tässä luvussa…
Lue lisääSuunnittelun elementit ja periaatteet ovat saman järjestelmän kaksi puolta: osat ja se, miten ne vaikuttavat toisiinsa. Tässä luvussa käydään läpi…
Lue lisääSuunnittelun periaatteet kertovat, miten visuaaliset elementit järjestetään niin, että lopputulos tuntuu harkitulta. Tässä luvussa käydään läpi, mitkä…
Lue lisääVisuaalinen suunnittelu tarkoittaa visuaalisten elementtien järjestämistä niin, että tieto on selkeää, houkuttelevaa ja tavoitteen mukaista. Tässä…
Lue lisääSuunnitteluprosessi etenee tutkimuksesta ja tavoitteista luonnosten ja palautteen kautta lopulliseen viimeistelyyn. Tässä luvussa käydään läpi…
Lue lisääRautalankamalli on yksinkertainen asettelukartta, joka näyttää sisältölohkot ja navigoinnin ilman lopullista tyyliä. Tässä luvussa käydään läpi, mitä…
Lue lisääHyvissä verkkosivujen suunnittelun esimerkeissä on selkeä navigointi, luettava teksti, yhtenäinen brändi ja selvät seuraavat askeleet. Tässä luvussa…
Lue lisääHuono verkkosivujen suunnittelu näkyy sekavuutena, pienenä tekstinä, hitaana latautumisena ja hämmentävinä valikkoina. Tässä luvussa käydään läpi…
Lue lisääVerkkosivujen suunnittelun hinta vaihtelee sivumäärän, räätälöityjen ominaisuuksien, sisältötarpeiden ja tekijän mukaan. Tässä luvussa käydään läpi…
Lue lisääOta se heti käyttöön
omalla verkkosivullasi.
Aloita ilmaiseksi WEMASYlla ja rakenna sivusi muutamassa minuutissa.