Dos ja Don's of Dark Web Design
Tumman verkkomallit ovat hyvin suosittuja ja niillä voi olla tyylikäs ja luova houkutus.
Ne ovat myös täydellisiä moniin asiakastyyppeihin, mutta ne eivät ole sopivia kaikille verkkosivuille, ja niitä tulisi käyttää vain silloin, kun niitä tarvitaan.
Huolimatta silmiinpistävästä visuaalisesta vaikutuksesta, joka näillä tummilla kuvioilla voi olla, monet suunnittelijat eivät tiedä, miten ne voidaan tehokkaasti vetää pois poistamatta kävijää.
Pimeässä rakenteessa on vähemmän luettavuutta , vähemmän valinnanvaraa useimmille lukijoille ja vähemmän mahdollisuuksia tavanomaisiin suunnitteluelementteihin.
Tässä viestissä keskustelemme muutamasta vinkistä, joiden avulla seuraava pimeä verkkosivuston muotoilu on valittavissa laajemmalle yleisölle , ja antaa sinulle, suunnittelija, ilmaista luovuutesi.
recent poll viimeisimmän kyselyn ehdottaa, että yleinen verkkomainen yleisö mieluummin suosittelee 47%. Tärkein syy on luettavuus . Useimmat ihmiset eivät pidä katselemassa valoa tekstiä tummasta taustasta verkkosivuilla, koska se rasittaa silmänsä ja tekee siitä paljon vähemmän nautinnollista kokemusta.
Sitä vastoin 10 prosenttia kyselyyn vastanneista sanoi, että he aina suosivat verkkosivujen tummat taustat, kun taas toiset 36 prosenttia sanoivat, että paras valinta riippuisi verkkosivustyypistä.
Joten, mikä on oikea vastaus? Kun se tulee alas, jokaisella on oma mielipiteensä, ja se on niin.
Mutta niin suuri prosenttiosuus käyttäjistä sanoo, että tummat verkkosivustot ovat siedettäviä ja joskus edes mieluummin, meidän web-suunnittelijoiden on opittava luomaan tehokkaita tummia malleja itsellemme ja asiakkaillemme.
Tämä tarkoittaa sitä, että kaikki todelliset uskovaiset vakuuttavat, että tumma muotoilu voi olla luettavissa ja käyttäjäystävällisempi.
Käytä enemmän valkoista tilaa
Vai onko sitä kutsuttu "mustaa tilaa"? Valkotilan tehokas käyttö on tärkeää kaikentyyppiselle suunnittelulle, mutta se on välttämätöntä, jos sivustoja on tummilla taustoilla.
Tummilla malleilla on taipumus tuntea "raskasta" , ja pimennellä niitä voi vahvistaa tätä tunnetta. Katso alla olevia suosittuja pimeitä web-malleja ja huomaa, että niiden vapaata tilaa käytetään hyvin.
Musta Estate näkyy Internetissä pimeässä web-suunnittelussa. Se on todellakin kaunis muotoilu ja arvokasta kaiken huomiota. Suunnittelussa käytetään paljon valkoista tilaa, ja mikä tekee tästä erityisestä suunnittelusta ainutlaatuisen, on se, miten valkoista tilaa käytetään erottamaan tiettyjä elementtejä niin tehokkaasti.
Logon ympärillä on paljon valkoista tilaa ja se on ensimmäinen asia, jota näemme vierailijoina. Näemme tärkeimmän sisällön ja pullon oikealla seuraavalla. Kuten näet, valkoista tilaa käytetään täydellisesti korostamaan pullon tekstiä ja päätiedoston otsikkoa.
Sisältynyt sisältö Tictoc ja mukana oleva kuva tässä suunnittelussa on kehystetty eniten valkoista tilaa. Kun siirrymme alas, näemme vähemmän valkoista tilaa, mikä tekee meistä kiinnittää huomiota näytettävään sisältöön.
Tässä on kyse siitä, että valkoinen tila ohjaa käyttäjää asteittain sivun loppuun .
Tumma tausta lisää syvyyttä muotoiluun. Koska sivusto luottaa niin paljon valkoiseen tilaan, se olisi vähemmän mielenkiintoista ilman tumma taustan luovaa vaikutusta.
Mark Dearman Mark Dearman verkkosivusto on vapaata ja tasaisesti jakautunut koko tilan kokoon.
Valkoisella tilalla jokaisen salkun palatessa on runsaasti hengityskonetta sisältöön, ja se on mukava lepopaikka ennen siirtymistä seuraavaan kappaleeseen.
Paljon tilaa on tummille malleille, koska se auttaa paitsi purkamaan asettelua, mutta muotoilemaan tärkeitä elementtejä ja lisäämällä tyylikkyyttä yleiseen ilmeeseen.
Tekstuaalinen valkoinen tila
Koska luettavuus on niiden ihmisten eniten huolta, jotka eivät pidä tummia taustoja, suunnittelijoiden on kiinnitettävä erityistä huomiota itse tekstiin.
Aivan kuten yleisessä suunnittelussa, yksi tapa parantaa luettavuutta tummilla verkkosivustoilla on lisätä valkoista tilaa säätämällä kappaleen kokoa, leikkaamista ja johtamista .
Alla oleva esimerkki osoittaa, mitä eroa merkkien välinen ja niiden välinen etäisyys tekee pimeiden ja kevyiden asettelujen vertailussa.
Toinen tapa parantaa luettavuutta tummissa kuvioissa on lisätä kirjasinkokoa . Kuten useimmat tämän säännön muut säännöt, suuremmat fonttikokot merkitsevät enemmän tilaa. Mitä suurempi kirjaimet ovat, sitä enemmän valkoista tilaa ilmestyy ympärille ja kunkin kirjeen sisällä.
Esimerkiksi alla oleva kirjain "a" saa enemmän valkotasoa, kun se kasvaa, sekä sen ympärillä olevasta alueesta että a-kotelon sisällä olevasta tilasta ja ylhäältä.
Huomaa, kuinka pienen tekstin lukeminen on helpompaa vaalealla taustalla kuin tummalla. Kun asetat typografian uudelle verkkosivustolle, muista tarkastella jotain tyhjää tekstiä varmistaaksesi, että se on luettavissa . Jos ei, katso, lisääkö tekstin kokoa.
Tekstin kontrasti
Monet ihmiset suostuisivat siihen, että huonosti suunnitellut pimeät sivustot aiheuttavat silmäkohtaa. Liian suuri tai liian pieni kontrasti on yleensä syyllinen. Miten löydämme täydellisen tasapainon?
Jos olet huoneessa, joka on pimeä musta, yhtäkkiä etsivät suoraan valoon ei ole miellyttävä. Mutta katsomassa vähemmän kirkasta valoa vähemmän tummassa huoneessa on hienosti. Sama periaate koskee web-suunnittelua.
Täydellisen kontrastin löytäminen tarkoittaa taustan pimeyden tasapainottamista tekstin keveydellä .
Alla on (erittäin) karkea opas, joka osoittaa, miten kontrasti tekstin ja taustan välillä toimii. Yksi huomaa, että kun tausta saa kevyemmän, niin tekstiä.
Tekstin miellyttävän kontrastin löytäminen on paljon vaikeampaa puhtaalla mustalla taustalla.
Löydä täydellinen tasapaino kokeilemaan erilaisia sävyjä. Paras tulos on yleensä tausta, joka ei ole puhdas musta ja teksti, joka ei ole puhdas valkoinen.
Fonttien käsittely
Fontit ovat tärkeä rooli suunnittelussa, ja ne on ehdottomasti otettava harkitsevaan näkökulmaan tummien ulkoasujen kanssa. Alla olevassa kuvassa on 14 pisteen fontti tummalla pohjalla sekä serifissa että sans-serif -fontissa.
Sans-serif-fontti on selvästi luettavissa . Mutta monet suunnittelijat valitsevat silti fontit tyylikkäänsä.
Tehtävä on kuitenkin laittaa vain suurempi teksti serif-fontteihin, jotta ylimääräinen valkoinen tila tulvii jokaisen merkin ympärille ja tekee tekstistä hyvin luettavissa.
Alla oleva kuvakaappaus on tämän artikkelin aikaisemmin käsitelty verkkosivusto. Siinä on sekä serif- että sans-serif -fontteja, mutta käyttää niitä älykkäästi.
Suurempi teksti, kuten otsikot, navigointi ja otsikot, on serif-fontti, jolla lisätään tyylikkyyttä. Paremman kontrastin ja paremman luettavuuden vuoksi kehon teksti on puhtaassa sans-serif -fontissa.
Käytä Minimal Color Schemes -ohjelmaa
Jotta tummat mallit saisivat puhtaan ja selkeän ilmeen, suunnittelijoiden olisi aina valittava vähäiset värimallit .
Alla olevista muutamista esimerkkeistä voimme nähdä, että kiireiset väriteemat todella tulevat tummien taustojen tapaan, koska kontrasti on liian terävä.
Kiinnitä yksi tai kaksi väriä . Jos haluat lisätä väriä, kokeile tummaa väriä.
Hyväksytty, monilla pimeillä web-malleilla on jännittävämpiä värimaailmaa. Joten tämä sääntö on usein rikki, mutta vain oikeilla tekniikoilla.
Yleensä kuitenkin väri on usein se, mikä tekee sivustosta liian varattu . Koska tummilla verkkosivustoilla on jo syvyys, käytä väriä varoen.
Tarjoa tyyli vaihtaja
Vaikka käytössämme on monia hyviä käytäntöjä tehdä tummien verkkojen houkuttelevammaksi, kukaan ei voi tyydyttää minkäänlaista työtä.
Muista sisällyttää tyyli vaihtaja , jotta käyttäjät voivat lopulta nähdä tumman tekstin vaalealla taustalla.
Tähän tarvitaan kaksi tyyliarkkia, joista toinen on oletuksena tumma asettelu ja toinen vaihtoehtoiselle valosuunnalle.
SitePointilla on erinomainen opetusohjelma tästä: Rakenna Simple Style Switcher CSS: ssä . Oppimateriaalin "oranssi", "sininen" ja "valkoinen" versiot eivät käytä vain "kevyitä" ja "tummia" tyyliarkkeja.
Kun Dark Web Design toimii parhaiten
Kuten totesi, suuri osa verkkokäyttäjistä uskoo, että tumma web-suunnittelu voisi toimia tietyille verkkosivustoille. Mutta tutkimus on epämääräinen siitä, mitä nämä tyypit ovat.
Yleisesti ottaen tummat toimii parhaiten luoville tai tyylikkäille malleille . Moderni tyylikäs verkkosivusto, tummat taustat lisäävät tyylikkyyttä. Harmaata tai käsin piirrettyjä tyylejä varten tummat taustat lisäävät ulkoasun luovuutta.
Tyylikäs tumma muotoilu
Tumma voi olla syvä, arvovaltainen ja voimakas ja usein tyylikäs, kun sitä käytetään oikein. Seuraavassa on muutamia esimerkkejä ja joitain tekniikoita, jotka tuovat esiin tyylikkyyden pimeässä suunnittelussa.
Sivusto Larissa Meek on yksinkertainen vintage-tyylinen kuvio taustalla, jossa tyylikäs sävy. Muita omituisempia ominaisuuksia lisäävät henkilökohtaisen kosketuksen suunnitteluun.
Tätä tekniikkaa voidaan käyttää monenlaisiin verkkosivustoihin. Vintage- tai klassiset kuvioinnit ja tekstuurit voivat luoda tyylikkään ja ikään sopivan ulkoasun .
Useimmat meistä yhdistävät vintage-malleja korkean luokan kanssa, joten korkealaatuisten verkkosivustojen luominen tällä tavalla on helppoa.
Syvyysydin on erittäin puhdas muotoilu, tumma tausta, joka lisää tyylin ja luokan. Suunnittelussa näkyy myös auktoriteetti. Tämä tyylikkyys voi myös tehdä suunnittelija salkun työ näyttää arvokkaampia seurauksena.
Huomaa, että tässä mallissa ei ole rakenteita tai kuvia kuin salkun paloja ja logoa. Muussa tapauksessa malli olisi ollut liian kiireinen; kuten se on, sisältö on neulottu hyvin yhteen.
Hyvä prosessi on ensin lisätä olennaista sisältöä ja tuoda tarvittaessa sisustuselementtejä . Suunnittelija voi sitten pysäyttää ja heijastaa, kun jokainen uusi elementti lisätään, varmista, ettei asettelua ole liikaa.
Aivan kuten taideteokset voivat näyttää arvokkaammalta tyylikkäässä suunnittelussa, niin myös tuotteita. Pimeä ja tyylikäs muotoilu, kuten Tapbots ja niin monet muutkin, auttavat näyttämään myytävää tuotetta.
Suunnittelu heijastaa itse laitetta , sen kaltevuudet ja valaistusvaikutukset; jotkut mallit jopa jäljittelevät korkealaatuisten tuotteidensa tekstuuria.
Creative Dark Design
Sen lisäksi, että tyylikkäät, pimeät verkkosivustot voivat näkyä, ne voivat myös herättää enemmän emotionaalisia vastauksia kuin tavalliset valokuvat, joten ne ovat ihanteellisia luovia projekteja varten. Katsotaanpa muutamia esimerkkejä mahdollisista luovista kuvioista.
site paikka alla on hyvin vähän sisältöä, mutta on ainutlaatuinen ulkoasu ja tummat värit syvyyteen. Tummat taustat ovat täydellisiä verkkosivustoille, joilla on vain vähän sisältöä .
Ja koska ne vaativat enemmän tilaa, suunnittelija on enemmän tilaa työskennellä.
Grunge-web-suunnittelu on monessa muodossa, ja koska grunge on "tumma ja likainen", tummat taustat ovat yksi näistä muodoista.
Tummat grunge-mallit, kuten Trozo näyttävät rikkovan kaikki säännöt: kiireiset tekstuurit, täynnä taitto ja laaja valikoima värejä. Ja vielä tämä sivusto toimii edelleen. Kuinka se on mahdollista?
Niin monia sotkuisia elementtejä, joiden avulla voidaan työskennellä, grunge-muotoilu voi olla hankala aloittelijoille. Mikä tekee tämän työn, on sen organisaatio .
Taustalla on selkeästi määritellyt lohkot, jotka ohjaavat käyttäjän silmää ja auttavat jakamaan sisällön hallittaviksi osuuksiksi.
Toiseksi sillä on tonni valkoista tilaa . Tausta saattaa olla kuvioitu, mutta käyttäjä näkee toistuvan kuvion valkoisena, mikä helpottaa suunnittelun keventämistä.
Tämä valkoinen tila on näkyvä logo vasemmalla puolella, navigoinnin ja oikealla puolella.
Myös "Näyttely 01" ja "Näyttely 02" välissä on enemmän tilaa kuin tavallisesti tällaisella verkkosivustolla.
Valkotasapaino mittaa asioita, vaikka se ei näytä valkoiselta tilalta, koska se on tekstuuria . Minimaalinen teksti ja muutamat leikkeet (vain kolme) edistävät myös tätä yksinkertaisuutta.
Suunnittelu Drew Wilson ehdottomasti rikkoo sääntöä, jossa käytetään vähäistä väriä. Silti se toimii, koska kirkas värinen otsikko on yksi harvoista ominaisuuksista tässä harvinaisessa suunnittelussa, joten mitään ei ylikuormita sitä.
Ja tumma tausta tekee otsakkeen kirkkaammaksi ja satunnaisemmaksi.
Tumma taustat käytetään usein valaistuksen vaikutusten ja kirkkaiden värejä erottamaan enemmän .
Tällaiset mallit ovat ihanan luovia poikkeuksia minimaalisesta väristä. Mutta sääntö tulisi rikkoa varoen: vältä häiritseviä kaltevuuksia, tekstuureja ja värejä sivun alareunassa.
Käärimistä
Tummat taustat antavat tyylikkään ja luovan tunnelman web-malleille, mikä tekee niistä täydellisiä tietyille salkkuille, mutta ne eivät sovi kaikille sivustoille.
Suuremmat verkkosivut, erityisesti heikkouksia ja muita vammaisia käyttävät, tummat mallit ovat ei-ei, vaikka tyyli vaihtaja.
Toivottavasti kun aika tulee, että sinun täytyy suunnitella verkkosivusto, jossa on tumma tausta, nämä vinkit ja strategiat auttavat.
Kirjoitettu yksinomaan WDD: lle Kayla Knight .
On olemassa monia muita tekniikoita ja strategioita, joilla parannetaan tummia verkkomalleja, joten ole hyvä ja kerro niistä, jotka olette nähneet alla olevissa kommenttiosioissa.