{"id":250001,"date":"2023-04-12T14:34:00","date_gmt":"2023-04-12T11:34:00","guid":{"rendered":"https:\/\/inform.click\/ajattele-negatiivista-rakentaaksesi-vahva-ja-vakuuttava-verkkosuunnittelu\/"},"modified":"2023-04-12T15:25:00","modified_gmt":"2023-04-12T12:25:00","slug":"ajattele-negatiivista-rakentaaksesi-vahva-ja-vakuuttava-verkkosuunnittelu","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/ajattele-negatiivista-rakentaaksesi-vahva-ja-vakuuttava-verkkosuunnittelu\/","title":{"rendered":"Ajattele negatiivista rakentaaksesi vahva ja vakuuttava verkkosuunnittelu"},"content":{"rendered":"

\n Kuka tahansa t\u00e4m\u00e4n lainauksen keksi, voi olla kaikkea muuta kuin web-suunnittelija. Se johtuu siit\u00e4, ett\u00e4 web-suunnittelijoiden on ty\u00f6skennelt\u00e4v\u00e4 sek\u00e4 my\u00f6nteisten ett\u00e4 negatiivisten elementtien kanssa verkkosivustoa suunniteltaessa.\n<\/p>\n

\n Positiivisia elementtej\u00e4 ovat kuvat, sis\u00e4lt\u00f6, video, navigointi jne. Negatiivinen elementti on tyhj\u00e4 tai pikemminkin tyhj\u00e4 tila, joka sinun on t\u00e4ytynyt n\u00e4hd\u00e4 useimmilla verkkosivustoilla. Toisinaan web-suunnittelijat k\u00e4ytt\u00e4v\u00e4t tarpeettomia positiivisia elementtej\u00e4 ja t\u00e4ytt\u00e4v\u00e4t verkkosivuston ammattikielt\u00e4. Negatiivinen tila puolestaan \u200b\u200bsaa suunnittelun n\u00e4ytt\u00e4m\u00e4\u00e4n j\u00e4sennellymm\u00e4lt\u00e4 ja autenttisemmalta.\n<\/p>\n

\n Siksi ”negatiivinen” ajattelu johtaa yleens\u00e4 luovaan ideaan web-suunnittelijoille, kuten sin\u00e4 ja min\u00e4. Se luo kaivattua et\u00e4isyytt\u00e4 web-suunnitteluelementtien v\u00e4lille. Ei ihme, sit\u00e4 pidet\u00e4\u00e4n yhten\u00e4 web-suunnittelun t\u00e4rkeimmist\u00e4 visuaalisista komponenteista. Jos haluat tiet\u00e4\u00e4 siit\u00e4 lis\u00e4\u00e4, lue t\u00e4m\u00e4 blogi, jotta ymm\u00e4rr\u00e4t, mit\u00e4 negatiivinen tila on, sen merkitys ja kuinka voit ottaa tilan k\u00e4ytt\u00f6\u00f6n web-suunnittelussasi. Aloitetaan.\n<\/p>\n

\n

\n Negatiivisuus on luovuuden vihollinen.\n <\/p>\n

\n -David Lynch\n <\/p>\n<\/blockquote>\n

\n Mik\u00e4 on negatiivinen tai valkoinen tila?
\n<\/h5>\n

\n Negatiivinen tila on sivustosi alue, jolla ei ole teksti\u00e4, sis\u00e4lt\u00f6\u00e4, kuvaa tai videota. Yksinkertaisesti sanottuna se on vain verkkosivuston tyhj\u00e4 tila, ja sit\u00e4 k\u00e4ytet\u00e4\u00e4n yleens\u00e4 erottamaan sivun positiiviset elementit. Sit\u00e4 kutsutaan usein valkoiseksi tilaksi.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Jos haluat menesty\u00e4 web-suunnittelun alalla, et saa j\u00e4tt\u00e4\u00e4 huomiotta negatiivisen tilan merkityst\u00e4 hinnalla mill\u00e4 hyv\u00e4ns\u00e4. Parasta negatiivisessa tilassa on, ett\u00e4 se lis\u00e4\u00e4 symmetriaa verkkosivustosi koko ulkoasuun. Asianmukainen tyhj\u00e4 tila saa verkkosivustosi n\u00e4ytt\u00e4m\u00e4\u00e4n puhtaalta ja vierailijasi voivat skannata verkkosivuston helposti.\n<\/p>\n

\n Mit\u00e4 tapahtuu, jos verkkosivustollasi ei ole negatiivista tilaa?\n<\/p>\n

\n Kuvittele olevasi pieness\u00e4 pime\u00e4ss\u00e4 huoneessa, jossa ei ole ikkunoita ja ovia. Sinulla ei ole tilaa hengitt\u00e4\u00e4. Eik\u00f6 sinusta tulisi klaustrofobista oloa edes ajatuksesta, ett\u00e4 j\u00e4\u00e4t jumiin paikkaan, jossa et voi hengitt\u00e4\u00e4? Nettisivut, joissa ei ole negatiivista tilaa, v\u00e4litt\u00e4v\u00e4t jonkin verran samaa tunnelmaa, koska valkoinen tila luo katsojille virtuaalisen hengitystilan.\n<\/p>\n

\n N\u00e4in tapahtuu, jos et j\u00e4t\u00e4 mustaa tilaa web-suunnitteluun.\n<\/p>\n

\n Ei taukoja sivulla
\n<\/h5>\n

\n Oletetaan, ett\u00e4 haluat lukea majoitusoppaan verkkosivustolla ChesterTourist.com. Nyt l\u00f6yd\u00e4t oppaan t\u00e4ytt\u00e4v\u00e4n koko verkkosivun ilman taukoja. Tekstien v\u00e4liss\u00e4 ei ole kappaleita tai v\u00e4lily\u00f6ntej\u00e4. Olisiko sinun sitten helpompi seurata ohjetta? Ilmeisesti ei. Saatat joutua j\u00e4nnitykseen silmiss\u00e4si ja lopulta poistua verkkosivustolta oman edun vuoksi. Katso alla oleva kuva.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Valkoinen tila est\u00e4\u00e4 kohdeyleis\u00f6\u00e4si h\u00e4iritsem\u00e4st\u00e4. Lukijat pystyv\u00e4t helposti tunnistamaan sis\u00e4ll\u00f6n tai sivun tarkoituksen. Oletetaan, ett\u00e4 sivusi haluaa lukijan painavan toimintakehotuspainiketta. Ent\u00e4 jos vierailijasi eiv\u00e4t pysty painamaan painiketta, koska verkkosivusi on t\u00e4ynn\u00e4 ammattikielt\u00e4?\n<\/p>\n

\n Ensisijainen viestisi j\u00e4\u00e4 huomaamatta
\n<\/h5>\n

\n Oletetaan, ett\u00e4 olet suunnitellut verkkosivustollesi sivun, joka pakottaa lukijasi k\u00e4ytt\u00e4m\u00e4\u00e4n alennuskoodeja kassalla. Lukijasi eiv\u00e4t ehk\u00e4 edes huomaa keskeist\u00e4 viesti\u00e4, jos verkkosivustosi on t\u00e4ynn\u00e4 my\u00f6nteisi\u00e4 web-suunnitteluelementtej\u00e4. Sinun tulee ohjata lukijasi verkkosivusi keskeiseen viestiin. Negatiivinen tila auttaa sinua tekem\u00e4\u00e4n sen helposti, kuten alla olevassa kuvassa.\n<\/p>\n

\n Negatiivinen tila auttaa lukijoitasi keskittym\u00e4\u00e4n tiettyihin termeihin ja kehitt\u00e4m\u00e4\u00e4n vahvan tunteen kyseisen sivun tarkoituksessa. K\u00e4yt\u00e4 negatiivista tilaa tehokkaasti ja teet verkkosivustosi sis\u00e4ll\u00f6st\u00e4 luettavissa nopeasti. Mik\u00e4 t\u00e4rkeint\u00e4, sinun ei tarvitse muuttaa kirjasintyyli\u00e4 tai kokoa houkutellaksesi lukijoitasi sis\u00e4lt\u00f6\u00f6n. Sinun tarvitsee vain k\u00e4ytt\u00e4\u00e4 negatiivinen tila oikein.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Suunnan puute Web-sivullasi
\n<\/h5>\n

\n Jokainen verkkosivu koostuu motiivista. Oletetaan, ett\u00e4 olet suunnitellut verkkosivuston plagioinnin tarkistusty\u00f6kaluista. Haluat lukijasi lukevan sivun ensimm\u00e4isen taiton, siirtyv\u00e4n toiselle sivulle, jolla on plagioinnin tarkistus, ja viime k\u00e4dess\u00e4 tarkistavan sis\u00e4lt\u00f6ns\u00e4 plagioinnin varalta kyseisell\u00e4 ty\u00f6kalulla. Liian monet positiiviset elementit saavat lukijat h\u00e4mmentyneiksi, eiv\u00e4tk\u00e4 he v\u00e4ltt\u00e4m\u00e4tt\u00e4 pysty seuraamaan ohjeidesi mukaista mallia.\n<\/p>\n

\"\"<\/a><\/p>\n

\n K\u00e4yt\u00e4 negatiivista tilaa oikeissa paikoissa ja ohjaa lukijoitasi sen mukaisesti, kuten yll\u00e4 olevassa kuvassa n\u00e4kyy. Haluatko heid\u00e4n vieriv\u00e4n alas saadaksesi lis\u00e4tietoja? Haluatko lukijasi tarkastelevan tiettyj\u00e4 elementtej\u00e4 erityisesti? Negatiivisen tilan oikea k\u00e4ytt\u00f6 antaa vakaan suunnan web-sivusi kulkuun.\n<\/p>\n

\n Nyt negatiivisten tilojen ja passiivisesti toimivien tyhjien tilojen v\u00e4lill\u00e4 on ohut raja. Ensimm\u00e4inen parantaa verkkosivustosi rakennetta, kun taas j\u00e4lkimm\u00e4inen pilaa sen. Katso alla olevaa kuvaa.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Se on maalaamon verkkosivujen suunnittelu. Kuten n\u00e4et, web-suunnittelu koostuu oikein sijoitetusta negatiivista tilasta. Mutta se sis\u00e4lt\u00e4\u00e4 my\u00f6s passiivista tyhj\u00e4\u00e4 tilaa. T\u00e4m\u00e4 tyhj\u00e4 tila voi saada lukijasi h\u00e4mmentym\u00e4\u00e4n siit\u00e4, onko verkkosivustolla virheit\u00e4 tai onko sill\u00e4 ep\u00e4t\u00e4ydellisi\u00e4 tietoja.\n<\/p>\n

\n Siten tyhj\u00e4t passiiviset tilat luovat offset-visuaalisen elementin. Yksinkertaisesti sanottuna on parempi v\u00e4ltt\u00e4\u00e4 passiivisia tiloja, koska ne saavat verkkosivustosi n\u00e4ytt\u00e4m\u00e4\u00e4n ep\u00e4ammattimaiselta ja ep\u00e4t\u00e4ydelliselt\u00e4.\n<\/p>\n

\n 5 parasta tapaa k\u00e4ytt\u00e4\u00e4 negatiivista tilaa houkuttelevien verkkosivustojen luomiseen
\n<\/h3>\n

\n Negatiivisen tilan lis\u00e4\u00e4minen verkkosivuston ulkoasuun ei ole niin helppoa kuin milt\u00e4 se kuulostaa. Sinulla on oltava harjoiteltu silm\u00e4, jotta voit keksi\u00e4 harkittuja ideoita verkkosivustosi negatiivisen tilan k\u00e4ytt\u00e4miseksi. Voit jopa pyyt\u00e4\u00e4 ohjelmointiapua verkkosivustosi kehitt\u00e4misen aikana varmistaaksesi, ett\u00e4 negatiivinen tila auttaa sinua korostamaan sivun p\u00e4\u00e4viesti\u00e4. Katso 7 parasta tapaa, joilla voit k\u00e4ytt\u00e4\u00e4 negatiivista tilaa tukemaan verkkosivusi yleist\u00e4 ulkoasua.\n<\/p>\n

\n Negatiivisen tilan ei tarvitse olla valkoinen
\n<\/h5>\n

\n On myytti, ett\u00e4 negatiivinen tila voi olla vain valkoinen. Voit k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa punaisesta mustaan, kunhan v\u00e4ri ei riko verkkosivustosi teemaa. Tarkista Apple.comin v\u00e4ri ja l\u00f6yd\u00e4t negatiivisen tilan heid\u00e4n verkkosivuillaan valkoisena ja vaaleanharmaana\n<\/p>\n

\"\"<\/a><\/p>\n

\n Negatiivinen avaruus voi olla aivan nurkan takana
\n<\/h5>\n

\n Negatiiviset tilat ovat l\u00e4sn\u00e4 l\u00e4hes kaikissa logoissa, bannereissa ja taideteoksissa, joita saatat kohdata jokap\u00e4iv\u00e4isess\u00e4 el\u00e4m\u00e4ss\u00e4si. Etsitp\u00e4 sitten koodausopasta aloittelijoille.\n<\/p>\n

\"\"<\/a><\/p>\n

\n On aina parempi v\u00e4ltt\u00e4\u00e4 yksitoikkoisuutta
\n<\/h5>\n

\n Oletko huomannut kuvien asettelun Pinterestiss\u00e4? Kaikki kuvat ovat erikokoisia, eik\u00f6 niin? T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 k\u00e4yt\u00e4tp\u00e4 negatiivista tilaa tai kuvalohkoja, oikea tasapaino on ratkaisevan t\u00e4rke\u00e4\u00e4 sivun symmetrian s\u00e4ilytt\u00e4misen sijaan. Negatiiviset v\u00e4lily\u00f6nnit toimivat vain, jos k\u00e4yt\u00e4t niit\u00e4 hyvin m\u00e4\u00e4riteltyjen positiivisten v\u00e4lily\u00f6ntien kanssa.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Pid\u00e4 se yksinkertaisena
\n<\/h5>\n

\n \u00c4l\u00e4 k\u00e4yt\u00e4 negatiivisia v\u00e4lily\u00f6ntej\u00e4 verkkosivustosi suunnittelun satunnaisessa osassa. J\u00e4rjest\u00e4 verkkosivuston elementit huolellisesti, jotta se saa yhteyden lukijoihisi emotionaalisesti. Negatiivisen tilan ja verkkosivun muiden positiivisten osien pit\u00e4isi kyet\u00e4 pakottamaan k\u00e4vij\u00e4t ryhtym\u00e4\u00e4n haluamiisi toimiin.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Kerrostele elementit niiden t\u00e4rkeyden mukaan
\n<\/h5>\n

\n K\u00e4yt\u00e4 web-suunnittelun elementtej\u00e4 sek\u00e4 tasapainoista negatiivista tilaa niiden t\u00e4rkeyden mukaan. Voit esimerkiksi pit\u00e4\u00e4 t\u00e4rkeimm\u00e4t viestit suoraan verkkosivusi yl\u00e4reunassa ja k\u00e4ytt\u00e4\u00e4 negatiivista tilaa ohjataksesi lukijaasi liikkumaan sujuvasti sivulla. Negatiivinen tila toimii oppaana lukijasi silmiin.\n<\/p>\n

\n Jotkut ihmiset pit\u00e4v\u00e4t negatiivista tilaa web-suunnittelun j\u00e4lkik\u00e4teen\u00e4. Se on itse asiassa yksi strategisimmista tavoista parantaa verkkosivustosi n\u00e4kyvyytt\u00e4, sujuvuutta, luettavuutta ja syvyytt\u00e4.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Mitk\u00e4 ovat erilaiset negatiiviset tilat web-suunnittelussa?
\n<\/h3>\n

\n Nyt kun tied\u00e4t eri tekniikoista negatiivisen tilan k\u00e4ytt\u00e4miseksi web-suunnittelussa, keskustellaan kahdesta negatiivisen tilan tyypist\u00e4, joita voit hy\u00f6dynt\u00e4\u00e4.\n<\/p>\n

\n Mikronegatiivinen tila
\n<\/h5>\n

\n Sivusi pieniss\u00e4 osissa olevaa tilaa kutsutaan mikronegatiiviseksi tilaksi. Se sis\u00e4lt\u00e4\u00e4 kirjainten, merkkien tai sanojen v\u00e4liset marginaalit ja v\u00e4lily\u00f6nnit. Oletetaan, ett\u00e4 olet aikeissa k\u00e4ytt\u00e4\u00e4 kuvaa verkkosivullasi ja olet k\u00e4ytt\u00e4nyt my\u00f6s kuvateksti\u00e4 sen alla. Siten kuvan ja kuvatekstin v\u00e4linen tila on negatiivinen mikrotila.\n<\/p>\n

\n Voit k\u00e4ytt\u00e4\u00e4 negatiivista mikrotilaa typografisissa malleissa, koska se parantaa tekstisi luettavuutta ja luettavuutta. Verkkosivusi sis\u00e4lt\u00f6lohkojen v\u00e4listen tilojen tulee olla tarpeeksi tiukkoja, jotta ne mahtuvat negatiiviseen mikrotilaan. \u00c4l\u00e4 lis\u00e4\u00e4 liikaa rivinkorkeutta kappaleiden ja otsikon v\u00e4liin varmistaaksesi, ettei negatiivinen tila saa sis\u00e4ll\u00f6n n\u00e4ytt\u00e4m\u00e4\u00e4n tungosta.\n<\/p>\n

\n Katso alla oleva BuzzFeed-sivusto ymm\u00e4rt\u00e4\u00e4ksesi negatiivisen mikrotilan oikean k\u00e4yt\u00f6n. Kuten n\u00e4ette, sivusto koostuu monesta sis\u00e4ll\u00f6st\u00e4, mutta ulkoasu ei kuitenkaan h\u00e4mmenn\u00e4 lukijoita.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Makro negatiivinen tila
\n<\/h5>\n

\n T\u00e4rkeimpien web-suunnitteluelementtien v\u00e4liss\u00e4 olevat tilat tunnetaan negatiivisena makrotilana. N\u00e4m\u00e4 tilat ovat leve\u00e4mpi\u00e4 ja siksi ne usein tunnistetaan v\u00e4litt\u00f6m\u00e4sti. Otsikoiden, sis\u00e4ll\u00f6n, navigointi- ja alatunnistealueiden v\u00e4linen tila koostuu negatiivisesta makrotilasta. Makronegatiivista tilaa k\u00e4ytet\u00e4\u00e4n my\u00f6s verkkosivun taustalla, sivupalkissa ja muissa osissa.\n<\/p>\n

\n Negatiivinen makrotila auttaa erottamaan ja yhdist\u00e4m\u00e4\u00e4n eri verkkosuunnitteluelementit tehokkaasti. Esimerkiksi leve\u00e4mpi tila auttaa sinua erottamaan elementit, kun taas kapeampi tila auttaa yhdist\u00e4m\u00e4\u00e4n ne. Kaiken kaikkiaan negatiivinen makrotila saa verkkosivusi n\u00e4ytt\u00e4m\u00e4\u00e4n kompaktilta ja pit\u00e4\u00e4 koko sivun sis\u00e4ll\u00f6n yhten\u00e4isen\u00e4.\n<\/p>\n

\n T\u00e4ss\u00e4 on Dropboxin aloitussivu, joka osoittaa selv\u00e4sti negatiivisen makrotilan h\u00e4mm\u00e4stytt\u00e4v\u00e4n k\u00e4yt\u00f6n. Kuten n\u00e4et, toimintakehotusten ymp\u00e4rill\u00e4 on merkitt\u00e4v\u00e4 negatiivinen tila. Tarkista my\u00f6s, kuinka navigointikohteet on sijoitettu otsikkoon negatiivisen makrotilan \u00e4lykk\u00e4\u00e4n k\u00e4yt\u00f6n ansiosta.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Esimerkkej\u00e4 negatiivisesta tilasta web-suunnittelussa
\n<\/h3>\n

\n Olen laatinut t\u00e4m\u00e4n luettelon h\u00e4mm\u00e4stytt\u00e4vist\u00e4 esimerkeist\u00e4 negatiivisesta tilasta, jota k\u00e4ytet\u00e4\u00e4n verkkosivuston eri markkinarakoissa. Katso kaikki verkkosivustot ja n\u00e4et, kuinka negatiivinen tila tarjoaa\n<\/p>\n