20 näidet tühiku kasutamisest veebidisainis
Oletame, et olete raamatukogus. Poleks üldse tore, kui sa ei saaks ülerahvastatud riiulite ja saalide tõttu ringi liikuda, samal ajal kui raamatukoguhoidja sind pidevalt viimaste saabunud raamatutega utsitab. Sama on veebidisainis kasutatava tühikuga: see annab hingamisruumi paljudele veebilehe elementidele.
Valge ruum on veebidisainis äärmiselt oluline kasutatavuse ja loetavuse jaoks ning see rõhutab konkreetseid elemente. Kujutage ette, kuidas oleks, kui oleks palju sõnu. Kasutajakogemus oleks kindlasti väga ebameeldiv ja veebilehel olevate sõnumite mõistmine nõuaks palju vaeva.
Valget ruumi nimetatakse ka "negatiivseks ruumiks" ja see viitab tühjale ruumile kujunduse või lehepaigutuse mitme elemendi ümber ja vahel. Seda tuntakse ka kui "hingamisruumi". Ja see ei pea olema valge. Tegelikult värv sobiks seni, kuni see loob puhta ja kena kujunduse. Isegi kui negatiivne ruum ei sisalda midagi, võib see positiivset ruumi määratleda ja täiustada.
Valge ruum – aktiivne element
Negatiivset ruumi on peetud passiivseks elemendiks, kuid see mängib äärmiselt olulist rolli kaubamärgi eksponeerimise suurendamisel ja kogu visuaalse paigutuse täiustamisel. Suurepärase kasutuskogemuse loomine ja pakkumine hõlmab enamat kui tühiku kasutamist, kuid me ei saa eitada selle elemendi tohutut tähtsust. See juhendab kasutajaid lehel, loob keerukuse ja harmoonilise paigutuse, annab teada, mis vajab veebisaidil rohkem tähelepanu, ja hõlbustab skannitavust.
Valget ruumi kasutatakse mitme elemendi, näiteks külgribade, tekstide, jaluste, päiste ja piltide vahel. Segane leht, eriti kui teksti sees puudub hierarhia, halvendab lugemiskiirust ja arusaamist.
Negatiivne ruum võib saada sama väärtuslikuks kui sisu ise. See kehtib eriti oluliste kaubamärkide kohta, kuna see lisab elegantsi.
Valge tühiku roll veebidisainis
Valget ruumi on kahte tüüpi: mikro ja makro. Mikrotühik on ruum nende väiksemate elementide vahel: tähtede, sõnade, loendiüksuste, pildi ja pealkirja vahel. Mõelge näiteks veebilehele. Sellel peab olema ruumi tähemärkide ümber ja lõikude vahel, et muuta sisu hõlpsasti loetavaks ning anda ajalehele puhas ja kerge tunne.
Makroruum tähendab ruumi suuremate elementide vahel, mida kasutatakse palju näiteks Google’i veebisaidi jaoks. See on puhta kujundusega, keskendudes lehe põhieesmärgile, samas kui muud aspektid pole nii rõhutatud.
Et testida, kuidas loodava veebisait värvide poolest välja näeb, on Adobe Kuler õige tööriist. Saate luua, redigeerida ja üles laadida erinevaid värvilahendusi.
Lisaks, kui kahtlete ega tea, millised fondid oleksid sobivamad, proovige Google’i veebifonte. Valige erinevad fondid ja vaadake, kuidas need tühikuga põimuvad.
Kui te pole kindel, kus ja kuidas saidi loomisel ja kohandamisel tühikuid kasutada, võib Balsamiq olla abiks. See aitab teil töötada kiiremini ja lihtsamalt, reprodutseerides visandit tahvlil, kuid arvuti kaudu.
Nagu kõigil veebisaitidel on veebivormid. On äärmiselt oluline, kuhu te need paigutate ja kuidas te selles kontekstis negatiivset ruumi kasutate. Kuna veebivormide loomine hõlmab tavaliselt kodeerimist, on teil vaja tööriista, mis lihtsustab teie tööd ja säästab teie aega. 123ContactForm veebivormi koostaja ei vaja kodeerimist ja sobib ideaalselt ka siis, kui kasutate veebivormi koostamiseks tühikuid.
Valge ruum võib olla aktiivne ja passiivne. Aktiivne negatiivne ruum juhib lugeja ühest elemendist teise, loob harmooniat ja suudab brändi palju paremini positsioneerida. Passiivne tühiruum on tegelikult lehe väliskülge ümbritsev tühi ruum või sisu sees olevad tühjad alad, mida mõnikord peetakse halvaks kujunduseks.
Negatiivne ruum loob tasakaalu, hea üldise voolu ja mõjutab lugejaid, pannes nad rohkem lehel püsima. Ja see ei kehti mitte ainult veebiajalehe, vaid iga veebisaidi kohta. Mõnikord seisavad veebidisainerid silmitsi erinevate platvormide, ekraani eraldusvõime või brauseriga. Seetõttu on veebidisaini tudengitele mõeldud kompositsiooniharjutused. Need harjutused aitavad neil mõista negatiivse ruumi tähtsust ja seda, kuidas seda tõhusalt kasutada.
Negatiivsel ruumil on tohutu mõju. Uuri välja, miks!
Valge ruum annab ajule visuaalseid vihjeid selle kohta, millised elemendid on eraldatud ja millised kuuluvad kokku. Parim näide koosneb mitmest telefoninumbrite või e-posti aadresside realt saidil, mis on eraldatud tühikuga, mis annab teie ajule märku, et igaüks neist on erinev jada ja mitte väga pikk number.
Kui ruumi on rohkem, näeb veebisait stiilsem välja. Selline negatiivse ruumi kasutamine on levinud kallites ja stiilsetes naisteajakirjades. Peaaegu kõikidel reklaamidel on palju valget ruumi, taustafotode jaoks on piisavalt ruumi ja tekste napib.
Vastupidine näide on otsene meilireklaam, mida me kõik oleme vähemalt korra saanud. Kas mäletate, et negatiivset ruumi oli nii vähe koos paljude ja suurte tekstiplokkidega, mis ei näinud hästi välja? Seega on sellel tohutu mõju. Seetõttu peavad veebidisainerid enne konkreetse saidi loomist ja kohandamist seda silmas pidama.
Hea veebilehe kujunduse loomiseks on mõned põhiprintsiibid. Negatiivne ruum peaks eraldama sellised elemendid nagu päis, jalus ja navigeerimine. Ja järgmine kord, kui kujundate lehte, analüüsige rohkem veeriseid ja polsterdust, selle asemel, et mõelda, kui palju ruumi teksti jaoks vajate.
Kliendid peaksid mõistma ka tühiku tähtsust
Kui teil on kahtlusi või kui teie kliendid ei mõista negatiivse ruumi tähtsust päris hästi, saate teha järgmist: koostage oma kujundus kahel erineval viisil. Üks sisaldab vähem negatiivset ruumi, et anda edasi praktilisemat ja madalamat tooni, ja teises on rohkem valget ruumi keerukama tunde loomiseks. Pidage meeles, et peaksite oma kahes kujunduses kasutama samu elemente. Ainus asi, mida peaksite tegema teisiti, on muuta kõigi nende elementide vahekaugust.
Võib-olla on parim viis tühiku kasutuse nägemiseks ja selle tähtsuse kohta lisateabe saamiseks vaadata mitut veebisaiti. Nad võivad inspireerida ja aidata teid tulevastes projektides. Heitke pilk järgmistele veebisaitidele, vabastage oma kujutlusvõime ja tulemused on suurepärased!
Madebysofa.com kasutab puhta ja minimalistliku välimuse loomiseks tühikuid. Nii on rõhk veebisaidi kategooriatel ja linkidel.
Vertigo Visual muudab selle lihtsaks ja kasutab stiili ja isikupära lisamiseks palju vaba ruumi.
Cultured Code on näide, kus valge ruum ei ole valge, vaid helesinine. Samuti on mõned värvilised geomeetrilised elemendid, mis täiustavad teatud kategooriaid.
Philip House NYCis on palju vaba ruumi. Eesmärk on püüda pilku ja täiustada mõningaid veebilehel olevaid pilte ja kategooriaid.
Buffalo ehitatud kasutab valget ruumi väga targalt. See rõhutab kõiki kategooriaid ja logo. Lehe keskel on mitu värvilist jaotist, mis viivad olulise teabeni. Alla kerides on märgata, et endiselt domineerib tühik, kuid fookus on siiski muudel osadel.
Ditto on ka veebisait, mis kasutab rafineerituse ja elegantsi lisamiseks tühikuid. Samal ajal kasutatakse toodete paremaks esitlemiseks negatiivset ruumi.
Metta Skincare on elegantse disainiga. Keskendutakse toodetele, USP-le ja veebisaitide kategooriatele.
Fell Swoop sisaldas emotsioonide tekitamiseks ja kasutajate seotuse suurendamiseks tühikuid.
Attitude Design ühendab valge ruumi "värvilise" valge ruumiga, et juhtida tähelepanu mõnele veebisaidi põhipunktile. Lihtne, kuid tõhus!
Super Reali veebisaidil on tühimiku tõttu elegantsi ja keerukust. Negatiivset ruumi kasutatakse siin põhikategooriate täiustamiseks.
Handiemail pakub lihtsat valget paigutust, mis hoiab külastajad huvitatud. Tänu puhtale disainile on kõike nii lihtne lugeda.
Suki on veebisait, mis köidab teie tähelepanu peaaegu kohe. On hämmastav, kuidas negatiivne ruum vaheldub piltide, videote ja üleskutsega tegevusele. Lihtsalt vaadake!
Tom Reinert on veebisait, millel valge tühiku ülekaal eraldab mitu elementi. Üldmulje on puhas, ilus ja kergesti loetav leht.
Webydo kasutab ära negatiivset ruumi, kasutades seda piltide, veergude ja tegevusele kutsumiste ümber, et tutvustada veebisaidi erinevaid osi, kontaktandmeid ja muud.
PlainWhite on veel üks suurepärane näide veebidisainis kasutatud tühikutest. Nagu me siin näeme, juhib see teie pilku ja aitab kaasa kenale ja õhulisele disainile. Nii kuvatakse kaunilt kõik veebisaidi kategooriad.
Beanstalk on suurepärane näide sellest, kuidas valge ruum ei ole ainult "valge". See loob harmooniat, tasakaalu, muudab veebisaidi segamatuks ja tõstab sisu esile.
Pulp Fingers demonstreerib ka "värvilise" negatiivse ruumi tõhusust. Siin on meil paks värv, mis tõstab esile sõnumid, kutsed tegevusele, sotsiaalmeedia nupud, kontaktiväljad ja saidikategooriad.
No Leath sisaldab valget ruumi, mis on tegelikult helehall toon koos suure graafikaga, et oma tooteid võimalikult hästi kuvada.
Dropbox on negatiivse ruumi pooldaja. See veebisait näitab, et vähem on rohkem. Ja see saavutatakse, säilitades ainult need elemendid, mis on tõesti olulised. Siinne tühi ruum suurendab loetavust ja kasutatavust, muutes kõik veebisaidil leiduva äärmiselt hõlpsasti loetavaks ja arusaadavaks.
Something Splendid sisaldab palju valget ruumi koos värviliste elementidega. See muudab lehel navigeerimise äärmiselt lihtsaks. Lisaks on sellise veebisaidiga suhtlemine meeldiv kogemus. Iga kategooria on paremini märgatav, muutmata kujundust segaseks.
Need on vaid mõned veebisaidid, mis kasutavad tühja ruumi hästi ära. Kuigi tühi ruum on vastuoluline element, leiate selle eeliste tõttu mitu saiti, mis seda kasutavad. Kui seda kasutatakse nii nagu peaks, aitab negatiivne ruum kaasa suurepärasele kasutajakogemusele.
Valge ruum põhjustab sageli hõõrdumist veebidisainerite ja nende klientide vahel. Mõnikord ei taha kliendid oma veebisaidil tühja kohta näha, arvates, et see peab olema sisuga kaetud. Seetõttu peavad disainerid oma klientidele selgitama negatiivse ruumi rolli.
Vähemalt algajatel võib olla raske selle mõju sõnastada. Sellegipoolest ärge mõelge tühja ruumi kui "tühja ruumi" tähenduseta. Jah, see võib tunduda tühi ja tavaline, kuid pidage meeles, et olete seda kasutanud eelkõige seetõttu, et see tõesti parandab üldist disaini, mitte sellepärast, et sinna poleks midagi muud lisada. Seda võib olla keeruline oma klientidele selgitada, kuid loodan, et see artikkel aitab teid selles.