{"id":249932,"date":"2023-12-09T09:10:00","date_gmt":"2023-12-09T06:10:00","guid":{"rendered":"https:\/\/inform.click\/20-esimerkkia-tyhjan-tilan-kaytosta-web-suunnittelussa\/"},"modified":"2023-12-09T09:10:00","modified_gmt":"2023-12-09T06:10:00","slug":"20-esimerkkia-tyhjan-tilan-kaytosta-web-suunnittelussa","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/20-esimerkkia-tyhjan-tilan-kaytosta-web-suunnittelussa\/","title":{"rendered":"20 esimerkki\u00e4 tyhj\u00e4n tilan k\u00e4yt\u00f6st\u00e4 web-suunnittelussa"},"content":{"rendered":"<p>\n  Oletetaan, ett\u00e4 olet kirjastossa. Ei olisi ollenkaan mukavaa, jos et p\u00e4\u00e4sisi liikkumaan t\u00e4p\u00f6t\u00e4yteisten hyllyjen ja k\u00e4yt\u00e4vien takia, kun kirjastonhoitaja jatkuvasti kehuu uusimmilla saapuneilla kirjoilla. Sama koskee web-suunnittelussa k\u00e4ytetty\u00e4 tyhj\u00e4\u00e4 tilaa: se antaa tilaa hengitt\u00e4\u00e4 monille verkkosivuston elementeille.\n<\/p>\n<p>\n  Valkoinen tila on eritt\u00e4in t\u00e4rke\u00e4 web-suunnittelussa k\u00e4ytett\u00e4vyyden ja luettavuuden kannalta ja se korostaa tiettyj\u00e4 elementtej\u00e4. Kuvittele, kuinka olisi, jos monta sanaa olisi juuttunut yhteen. K\u00e4ytt\u00e4j\u00e4kokemus olisi varmasti eritt\u00e4in ep\u00e4miellytt\u00e4v\u00e4 ja vaatisi paljon vaivaa ymm\u00e4rt\u00e4\u00e4ksesi verkkosivuston viestit.\n<\/p>\n<p>\n  Valkoinen tila tunnetaan my\u00f6s &#8221;negatiivisena tilana&#8221;, ja se viittaa tyhj\u00e4\u00e4n tilaan useiden suunnittelun tai sivuasettelun elementtien ymp\u00e4rill\u00e4 ja v\u00e4lill\u00e4. Sit\u00e4 kutsutaan my\u00f6s &#8221;hengitystilaksi&#8221;. Eik\u00e4 sen tarvitse olla valkoista. Itse asiassa mik\u00e4 tahansa v\u00e4ri sopisi niin kauan, kun se luo puhtaan ja mukavan designin.Vaikka negatiivinen tila ei sis\u00e4ll\u00e4 mit\u00e4\u00e4n, se voi m\u00e4\u00e4ritell\u00e4 ja korostaa positiivista tilaa.\n<\/p>\n<h5>\n  Valkoinen tila \u2013 aktiivinen elementti<br \/>\n<\/h5>\n<p>\n  Negatiivista tilaa on pidetty passiivisena elementtin\u00e4, mutta sill\u00e4 on eritt\u00e4in t\u00e4rke\u00e4 rooli br\u00e4ndin n\u00e4kyvyyden lis\u00e4\u00e4misess\u00e4 ja koko visuaalisen asettelun parantamisessa. Erinomaisen k\u00e4ytt\u00f6kokemuksen luominen ja tarjoaminen edellytt\u00e4\u00e4 muutakin kuin v\u00e4lily\u00f6nnin k\u00e4ytt\u00f6\u00e4, mutta emme voi kiist\u00e4\u00e4 t\u00e4m\u00e4n elementin suurta merkityst\u00e4. Se opastaa k\u00e4ytt\u00e4ji\u00e4 sivulla, luo hienostuneisuutta ja harmonisen asettelun, viestii, mik\u00e4 vaatii enemm\u00e4n huomiota verkkosivustolla ja helpottaa skannaustavuutta.\n<\/p>\n<p>\n  Valkoista tilaa k\u00e4ytet\u00e4\u00e4n useiden elementtien, kuten sivupalkkien, tekstien, alatunnisteiden, otsikoiden ja kuvien v\u00e4lill\u00e4. Sekava sivu, varsinkin jos tekstiss\u00e4 ei ole hierarkiaa, heikent\u00e4\u00e4 lukunopeutta ja ymm\u00e4rt\u00e4mist\u00e4.\n<\/p>\n<p>\n  Negatiivinen tila voi tulla yht\u00e4 arvokasta kuin itse sis\u00e4lt\u00f6. T\u00e4m\u00e4 koskee erityisesti t\u00e4rkeit\u00e4 tuotemerkkej\u00e4, koska se lis\u00e4\u00e4 eleganssia.\n<\/p>\n<h5>\n  Valkoisen tilan rooli web-suunnittelussa<br \/>\n<\/h5>\n<p>\n  Valkotilaa on kahta tyyppi\u00e4: mikro- ja makrovalkotila. Mikrovalkov\u00e4li on tila n\u00e4iden pienempien elementtien v\u00e4lill\u00e4: kirjainten, sanojen, luettelokohteiden, kuvan ja kuvatekstin v\u00e4lill\u00e4. Ajattele esimerkiksi verkkolehte\u00e4. Siin\u00e4 on oltava tilaa merkkien ymp\u00e4rille ja kappaleiden v\u00e4liin, jotta sis\u00e4lt\u00f6 olisi helppolukuista ja antaa lehdelle puhtaan ja kevyen tunnelman.\n<\/p>\n<p>\n  Makrotila tarkoittaa isompien elementtien v\u00e4list\u00e4 tilaa, jota k\u00e4ytet\u00e4\u00e4n paljon esimerkiksi Googlen verkkosivuilla. Sen muotoilu on selke\u00e4, painopiste on sivun p\u00e4\u00e4tarkoituksessa, kun taas muita n\u00e4k\u00f6kohtia ei niin korosteta.\n<\/p>\n<p>\n  Adobe Kuler on oikea ty\u00f6kalu testataksesi, milt\u00e4 rakentamasi verkkosivusto n\u00e4ytt\u00e4\u00e4 v\u00e4rien suhteen. Voit luoda, muokata ja ladata erilaisia \u200b\u200bv\u00e4riteemoja.\n<\/p>\n<p>\n  Lis\u00e4ksi, jos olet ep\u00e4varma etk\u00e4 tied\u00e4, mitk\u00e4 kirjasimet olisivat sopivampia, kokeile Google Webfontsia. Valitse erilaisia \u200b\u200bfontteja ja katso, kuinka ne nivoutuvat v\u00e4lily\u00f6ntiin.\n<\/p>\n<p>\n  Jos et ole varma, miss\u00e4 ja miten v\u00e4lily\u00f6ntej\u00e4 k\u00e4ytet\u00e4\u00e4n sivustoa rakentaessasi ja mukauttaessasi, Balsamiqista voi olla apua. Se auttaa sinua ty\u00f6skentelem\u00e4\u00e4n nopeammin ja helpommin toistamalla luonnoksen taululle, mutta tietokoneen kautta.\n<\/p>\n<p>\n  Kuten kaikilla verkkosivuilla on verkkolomakkeita. On eritt\u00e4in t\u00e4rke\u00e4\u00e4, mihin sijoitat ne ja miten k\u00e4yt\u00e4t negatiivista tilaa t\u00e4ss\u00e4 yhteydess\u00e4. Ja koska verkkolomakkeiden luomiseen liittyy yleens\u00e4 koodausta, tarvitset ty\u00f6kalun, joka yksinkertaistaa ty\u00f6t\u00e4si ja s\u00e4\u00e4st\u00e4\u00e4 aikaasi. 123ContactForm verkkolomakkeen rakennusty\u00f6kalu ei vaadi koodausta ja on ihanteellinen my\u00f6s silloin, kun k\u00e4yt\u00e4t tyhj\u00e4\u00e4 tilaa verkkolomakkeen rakentamiseen.\n<\/p>\n<p>\n  Valkoinen tila voi olla aktiivinen ja passiivinen. Aktiivinen negatiivinen tila johdattaa lukijan elementist\u00e4 toiseen, luo harmoniaa ja voi sijoittaa br\u00e4ndin paljon paremmin. Passiivinen v\u00e4lily\u00f6nti on itse asiassa sivun ulkopuolella olevaa tyhj\u00e4\u00e4 tilaa tai sis\u00e4ll\u00f6n sis\u00e4ll\u00e4 olevia tyhji\u00e4 alueita, joita joskus pidet\u00e4\u00e4n huonona suunnitteluna.\n<\/p>\n<p>\n  Negatiivinen tila luo tasapainoa, hyv\u00e4n kokonaisvirran ja vaikuttaa lukijoihin, mik\u00e4 saa heid\u00e4t pysym\u00e4\u00e4n enemm\u00e4n sivulla. Ja t\u00e4m\u00e4 ei koske vain verkkolehte\u00e4, vaan mit\u00e4 tahansa verkkosivustoa. Joskus web-suunnittelijat kohtaavat erilaisia \u200b\u200balustoja, n\u00e4yt\u00f6n resoluutioita tai selaimia. Siksi web-suunnittelun opiskelijoille on olemassa s\u00e4vellysharjoituksia. N\u00e4m\u00e4 harjoitukset auttavat heit\u00e4 ymm\u00e4rt\u00e4m\u00e4\u00e4n negatiivisen tilan t\u00e4rkeyden ja sen tehokkaan k\u00e4yt\u00f6n.\n<\/p>\n<h5>\n  Negatiivinen tila vaikuttaa valtavasti. Selvitt\u00e4\u00e4 miksi!<br \/>\n<\/h5>\n<p>\n  Valkoinen tila antaa aivoille visuaalisia vihjeit\u00e4 siit\u00e4, mitk\u00e4 elementit ovat erotettuja ja mitk\u00e4 kuuluvat yhteen. Paras esimerkki koostuu useista riveist\u00e4 puhelinnumeroita tai s\u00e4hk\u00f6postiosoitteita sivustolla erotettuina v\u00e4lily\u00f6nnill\u00e4, mik\u00e4 osoittaa aivoillesi, ett\u00e4 jokainen on eri sarja eik\u00e4 kovin pitk\u00e4 numero.\n<\/p>\n<p>\n  Jos tyhj\u00e4\u00e4 tilaa on enemm\u00e4n, verkkosivusto n\u00e4ytt\u00e4\u00e4 tyylikk\u00e4\u00e4mm\u00e4lt\u00e4. T\u00e4m\u00e4 negatiivisen tilan k\u00e4ytt\u00f6 on yleist\u00e4 kalliissa ja tyylikk\u00e4iss\u00e4 naisten aikakauslehdiss\u00e4. L\u00e4hes kaikissa mainoksissa on paljon valkoista tilaa, tilaa on riitt\u00e4v\u00e4sti taustakuville ja tekstej\u00e4 on v\u00e4h\u00e4n.\n<\/p>\n<p>\n  P\u00e4invastainen esimerkki on suora s\u00e4hk\u00f6postimainos, jonka olemme kaikki saaneet ainakin kerran. Muistatko, ett\u00e4 negatiivista tilaa oli niin v\u00e4h\u00e4n yhdistettyn\u00e4 moniin ja suuriin tekstilohkoihin, jotka eiv\u00e4t n\u00e4ytt\u00e4neet hyv\u00e4lt\u00e4? Sill\u00e4 on siis valtava vaikutus. Siksi web-suunnittelijoiden on otettava se huomioon ennen tietyn sivuston luomista ja mukauttamista.\n<\/p>\n<p>\n  On olemassa joitakin perusperiaatteita hyv\u00e4n web-sivun suunnittelussa. Negatiivisen tilan tulee erottaa elementit, kuten otsikko, alatunniste ja navigointi. Ja seuraavan kerran, kun suunnittelet sivua, analysoi marginaalit ja pehmusteet enemm\u00e4n sen sijaan, ett\u00e4 mietit, kuinka paljon tilaa tarvitset tekstille.\n<\/p>\n<h5>\n  Asiakkaiden tulee my\u00f6s ymm\u00e4rt\u00e4\u00e4 tyhj\u00e4n tilan merkitys<br \/>\n<\/h5>\n<p>\n  Jos sinulla on ep\u00e4ilyksi\u00e4 tai asiakkaasi eiv\u00e4t ymm\u00e4rr\u00e4 oikein hyvin negatiivisen tilan merkityst\u00e4, voit tehd\u00e4 n\u00e4in: rakentaa suunnittelusi kahdella eri tavalla. Toisessa on v\u00e4hemm\u00e4n negatiivista tilaa k\u00e4yt\u00e4nn\u00f6llisemm\u00e4n ja halvemman s\u00e4vyn v\u00e4litt\u00e4miseksi ja toisessa enemm\u00e4n valkoista tilaa hienostuneen tunnelman luomiseksi. Muista, ett\u00e4 sinun tulee k\u00e4ytt\u00e4\u00e4 samoja elementtej\u00e4 kahdessa mallissasi. Ainoa asia, joka sinun pit\u00e4isi tehd\u00e4 toisin, on muuttaa kaikkien n\u00e4iden elementtien v\u00e4li\u00e4.\n<\/p>\n<p>\n  Ehk\u00e4 paras tapa n\u00e4hd\u00e4, miten tyhj\u00e4\u00e4 tilaa k\u00e4ytet\u00e4\u00e4n ja oppia lis\u00e4\u00e4 sen t\u00e4rkeydest\u00e4, on katsoa useita verkkosivustoja. He voivat inspiroida ja auttaa sinua tulevissa projekteissasi. Vilkaise vain seuraavia verkkosivustoja, vapauta mielikuvituksesi ja tulokset ovat erinomaisia!\n<\/p>\n<p>\n  <a href=\"http:\/\/www.madebysofa.com\/\" target=\"_blank\" rel=\"noopener\">Madebysofa.com<\/a> k\u00e4ytt\u00e4\u00e4 tyhj\u00e4\u00e4 tilaa puhtaan, minimalistisen ilmeen luomiseen. T\u00e4ll\u00e4 tavalla painopiste on verkkosivustojen luokissa ja linkeiss\u00e4.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.madebysofa.com\/\" target=\"_blank\" rel=\"noopener\"><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.vertigo.com.mk\/\" target=\"_blank\" rel=\"noopener\">Vertigo Visual<\/a> pit\u00e4\u00e4 sen yksinkertaisena ja k\u00e4ytt\u00e4\u00e4 runsaasti valkoista tilaa lis\u00e4t\u00e4kseen ripauksen tyyli\u00e4 ja persoonallisuutta.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.vertigo.com.mk\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a85653624.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"https:\/\/culturedcode.com\/\" target=\"_blank\" rel=\"noopener\">Cultural Code<\/a> on esimerkki, jossa valkoinen tila ei ole valkoinen, vaan vaaleansininen. On my\u00f6s muutamia v\u00e4rillisi\u00e4 geometrisia elementtej\u00e4, jotka parantavat tiettyj\u00e4 luokkia.\n<\/p>\n<p>\n  <a href=\"https:\/\/culturedcode.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a858ea9fb.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.philiphousenyc.com\/\" target=\"_blank\" rel=\"noopener\">Philip House NYC<\/a> :ss\u00e4 on paljon tyhj\u00e4\u00e4 tilaa. Tarkoituksena on kiinnitt\u00e4\u00e4 huomiota ja parantaa joitain verkkosivulla olevia kuvia ja luokkia.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.philiphousenyc.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a85babacf.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/builtbybuffalo.com\/\" target=\"_blank\" rel=\"noopener\">Buffalon rakentama<\/a> k\u00e4ytt\u00e4\u00e4 valkoista tilaa eritt\u00e4in viisaasti. Se korostaa kaikkia luokkia ja logoa. Sivun keskell\u00e4 on useita v\u00e4rillisi\u00e4 osioita, jotka johtavat t\u00e4rkeisiin tietoihin. Kun rullaat alasp\u00e4in, voit huomata, ett\u00e4 v\u00e4lily\u00f6nti hallitsee edelleen, mutta painopiste on edelleen muissa osissa.\n<\/p>\n<p>\n  <a href=\"http:\/\/builtbybuffalo.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a85ddd371.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"https:\/\/www.ditto.com\/\" target=\"_blank\" rel=\"noopener\">Ditto<\/a> on my\u00f6s verkkosivusto, joka k\u00e4ytt\u00e4\u00e4 tyhj\u00e4\u00e4 tilaa lis\u00e4t\u00e4kseen hienostuneisuutta ja eleganssia. Samaan aikaan negatiivista tilaa k\u00e4ytet\u00e4\u00e4n tuotteiden esittelyyn paremmin.\n<\/p>\n<p>\n  <a href=\"https:\/\/www.ditto.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a8604acc8.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.mettaskincare.com\/\" target=\"_blank\" rel=\"noopener\">Metta Skincare<\/a> on tyylik\u00e4s muotoilu. Painopiste on tuotteissa, USP- ja verkkosivustoluokissa.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.mettaskincare.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a863ab550.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.fellswoop.com\/\" target=\"_blank\" rel=\"noopener\">Fell Swoop<\/a> sis\u00e4lsi v\u00e4lily\u00f6nnit tunteiden luomiseksi ja k\u00e4ytt\u00e4jien sitoutumisen lis\u00e4\u00e4miseksi.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.fellswoop.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a86597f6a.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.attitudedesign.co.uk\/\" target=\"_blank\" rel=\"noopener\">Attitude Design<\/a> yhdist\u00e4\u00e4 valkoisen tilan &#8221;v\u00e4rilliseen&#8221; valkoiseen tilaan kiinnitt\u00e4\u00e4kseen huomion muutamiin verkkosivuston avainkohtiin. Yksinkertainen mutta tehokas!\n<\/p>\n<p>\n  <a href=\"http:\/\/www.attitudedesign.co.uk\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a867639ee.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.superreal.de\/\" target=\"_blank\" rel=\"noopener\">Super Real<\/a> -sivustolla on ripaus eleganssia ja hienostuneisuutta valkoisen tilan ansiosta. Negatiivista tilaa k\u00e4ytet\u00e4\u00e4n t\u00e4ss\u00e4 parantamaan p\u00e4\u00e4kategorioita.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.superreal.de\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a869212af.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.handiemail.com\/\" target=\"_blank\" rel=\"noopener\">Handiemailissa<\/a> on yksinkertainen, valkoinen ulkoasu, joka pit\u00e4\u00e4 vierailijat kiinnostuneena. Kaikki on niin helppolukuista puhtaan suunnittelun ansiosta.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.handiemail.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a86ad5f53.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.suki.co.il\/\" target=\"_blank\" rel=\"noopener\">Suki<\/a> on verkkosivusto, joka kiinnitt\u00e4\u00e4 huomiosi melkein v\u00e4litt\u00f6m\u00e4sti. On h\u00e4mm\u00e4stytt\u00e4v\u00e4\u00e4, kuinka negatiivinen tila vuorottelee kuvien, videoiden ja toimintakehotusten kanssa. Katso vain!\n<\/p>\n<p>\n  <a href=\"http:\/\/www.suki.co.il\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a86d150cb.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.tomreinert.de\/\" target=\"_blank\" rel=\"noopener\">Tom Reinert<\/a> on verkkosivusto, jossa valkoinen v\u00e4li erottaa useita elementtej\u00e4. Kokonaisvaikutelma on siisti, kaunis ja helppolukuinen sivu.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.tomreinert.de\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a87068553.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\" rel=\"noopener\">Webydo<\/a> hy\u00f6dynt\u00e4\u00e4 negatiivista tilaa ja k\u00e4ytt\u00e4\u00e4 sit\u00e4 kuvien, sarakkeiden ja toimintakehotusten ymp\u00e4rill\u00e4 esitell\u00e4kseen verkkosivuston eri osia, yhteystietoja ja paljon muuta.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.webydo.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a87345543.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/plainwhite.co\/\" target=\"_blank\" rel=\"noopener\">PlainWhite<\/a> on toinen loistava esimerkki web-suunnittelussa k\u00e4ytetyst\u00e4 tyhj\u00e4st\u00e4 tilasta. Kuten t\u00e4\u00e4ll\u00e4 n\u00e4emme, se ohjaa silmi\u00e4si ja my\u00f6t\u00e4vaikuttaa mukavaan ja ilmavaan muotoiluun. T\u00e4ll\u00e4 tavalla kaikki verkkosivustojen luokat n\u00e4kyv\u00e4t kauniisti.\n<\/p>\n<p>\n  <a href=\"http:\/\/plainwhite.co\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a8755fa81.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/beanstalkapp.com\/\" target=\"_blank\" rel=\"noopener\">Beanstalk<\/a> on loistava esimerkki siit\u00e4, kuinka valkoinen tila ei ole vain &#8221;valkoista&#8221;. Se luo harmoniaa, tasapainoa, saa sivuston n\u00e4ytt\u00e4m\u00e4\u00e4n selke\u00e4lt\u00e4 ja korostaa sis\u00e4lt\u00f6\u00e4.\n<\/p>\n<p>\n  <a href=\"http:\/\/beanstalkapp.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a877831d2.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/pulpfingers.com\/\" target=\"_blank\" rel=\"noopener\">Pulp Fingers<\/a> osoittaa my\u00f6s &#8221;v\u00e4rillisen&#8221; negatiivisen tilan tehokkuuden. T\u00e4\u00e4ll\u00e4 meill\u00e4 on lihavoitu v\u00e4ri, joka korostaa viestej\u00e4, toimintakehotuksia, sosiaalisen median painikkeita, yhteystietokentti\u00e4 ja sivustoluokkia.\n<\/p>\n<p>\n  <a href=\"http:\/\/pulpfingers.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a87976f11.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/www.noleath.com\/noleath\/\" target=\"_blank\" rel=\"noopener\">No Leathiss\u00e4<\/a> on valkoista tilaa, joka on itse asiassa vaaleanharmaa s\u00e4vy yhdistettyn\u00e4 suureen grafiikkaan, jotta heid\u00e4n tuotteet n\u00e4kyv\u00e4t mahdollisimman hyvin.\n<\/p>\n<p>\n  <a href=\"http:\/\/www.noleath.com\/noleath\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a87b885c2.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"https:\/\/www.dropbox.com\/\" target=\"_blank\" rel=\"noopener\">Dropbox<\/a> on negatiivisen tilan puolestapuhuja. T\u00e4m\u00e4 sivusto osoittaa, ett\u00e4 v\u00e4hemm\u00e4n on enemm\u00e4n. Ja t\u00e4m\u00e4 saavutetaan pit\u00e4m\u00e4ll\u00e4 vain ne elementit, jotka ovat todella t\u00e4rkeit\u00e4. Valkoinen tila lis\u00e4\u00e4 luettavuutta ja k\u00e4ytett\u00e4vyytt\u00e4, mik\u00e4 tekee kaikesta verkkosivustolla eritt\u00e4in helposti luettavaa ja ymm\u00e4rrett\u00e4v\u00e4\u00e4.\n<\/p>\n<p>\n  <a href=\"https:\/\/www.dropbox.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a87d49889.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  <a href=\"http:\/\/somethingsplendid.com\/\" target=\"_blank\" rel=\"noopener\">Something Splendidiss\u00e4<\/a> on paljon valkoista tilaa yhdistettyn\u00e4 v\u00e4rikk\u00e4isiin elementteihin. T\u00e4m\u00e4 tekee sivulla eritt\u00e4in helppok\u00e4ytt\u00f6isen. Lis\u00e4ksi vuorovaikutus t\u00e4llaisen verkkosivuston kanssa on miellytt\u00e4v\u00e4 kokemus. Jokainen luokka on n\u00e4kyv\u00e4mpi ilman, ett\u00e4 suunnittelu on sotkuista.\n<\/p>\n<p>\n  <a href=\"http:\/\/somethingsplendid.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-210837-6381a87f4e651.webp\" alt=\"\" \/><\/a>\n<\/p>\n<p>\n  N\u00e4m\u00e4 ovat vain muutamia niist\u00e4 verkkosivustoista, jotka hy\u00f6dynt\u00e4v\u00e4t tyhj\u00e4\u00e4 tilaa. Vaikka tyhj\u00e4 tila on kiistanalainen elementti, l\u00f6yd\u00e4t useita sivustoja, jotka k\u00e4ytt\u00e4v\u00e4t sit\u00e4 sen etujen vuoksi. Jos sit\u00e4 k\u00e4ytet\u00e4\u00e4n niin kuin pit\u00e4isi, negatiivinen tila edist\u00e4\u00e4 erinomaisia \u200b\u200bk\u00e4ytt\u00f6kokemuksia.\n<\/p>\n<p>\n  Valkoinen tila aiheuttaa usein kitkaa web-suunnittelijoiden ja heid\u00e4n asiakkaidensa v\u00e4lill\u00e4. Joskus asiakkaat eiv\u00e4t halua n\u00e4hd\u00e4 verkkosivuillaan tyhj\u00e4\u00e4 tilaa, koska ne ajattelevat, ett\u00e4 se on peitetty sis\u00e4ll\u00f6ll\u00e4. Siksi suunnittelijoiden on selitett\u00e4v\u00e4 asiakkailleen negatiivisen tilan rooli.\n<\/p>\n<p>\n  Ainakin aloittelijoille voi olla vaikeaa ilmaista sen vaikutusta. \u00c4l\u00e4 kuitenkaan ajattele tyhj\u00e4\u00e4 tilaa &#8221;tyhj\u00e4n\u00e4 tilana&#8221;, ilman merkityst\u00e4. Kyll\u00e4, se voi n\u00e4ytt\u00e4\u00e4 tyhj\u00e4lt\u00e4 ja tavalliselta, mutta muista, ett\u00e4 olet k\u00e4ytt\u00e4nyt sit\u00e4 varsinkin siksi, ett\u00e4 se todella parantaa yleist\u00e4 muotoilua, ei siksi, ett\u00e4 siihen ei olisi lis\u00e4tt\u00e4v\u00e4\u00e4. Voi olla vaikea selitt\u00e4\u00e4 sit\u00e4 asiakkaillesi, mutta toivon, ett\u00e4 t\u00e4m\u00e4 artikkeli auttaa sinua siin\u00e4.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  : <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/02\/26\/white-space-in-web-design\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Oletetaan, ett\u00e4 olet kirjastossa. Ei olisi ollenkaan mukavaa, jos et p\u00e4\u00e4sisi liikkumaan t\u00e4p\u00f6t\u00e4yteisten hyllyjen ja k\u00e4yt\u00e4vien takia, kun kirjastonhoitaja jatkuvasti kehuu uusimmilla saapuneilla kirjoilla. Sama koskee web-suunnittelussa k\u00e4ytetty\u00e4 tyhj\u00e4\u00e4 tilaa: se antaa tilaa hengitt\u00e4\u00e4 monille verkkosivuston elementeille. Valkoinen tila on eritt\u00e4in t\u00e4rke\u00e4 web-suunnittelussa k\u00e4ytett\u00e4vyyden ja luettavuuden kannalta ja se korostaa tiettyj\u00e4 elementtej\u00e4. Kuvittele, kuinka olisi, jos monta sanaa olisi juuttunut yhteen. K\u00e4ytt\u00e4j\u00e4kokemus olisi varmasti eritt\u00e4in ep\u00e4miellytt\u00e4v\u00e4 ja vaatisi paljon vaivaa\u2026<\/p>\n","protected":false},"author":1,"featured_media":131571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[53,196,144],"tags":[],"class_list":["post-249932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-ja-wordpress-2","category-web-suunnittelu","category-web-vinkkeja-ja-vinkkeja"],"_links":{"self":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/comments?post=249932"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media\/131571"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media?parent=249932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/categories?post=249932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/tags?post=249932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}