6 tapaa parantaa blogisi suunnittelua
Blogit voidaan usein jättää pois kylmänä, kun on kyse suunnittelusta. Monet meistä vähentävät intensiivisen suunnittelun tarvetta blogeissamme - joko yrityksissämme tai itsestämme.
Mutta on tärkeää, että ymmärrämme, että identiteettimme kaikki osa-alueet on suunniteltava puhtaalla ja intuitiivisella tavalla haluamallasi tyylillä. Tämä web-työn harvoja näkökulma on jotain, jota meidän on jatkuvasti pyrittävä. Ja kyllä, siihen sisältyy aika, jonka käytämme blogien kanssa.
Paljon aikaa blogeja menetetään sekamelssa, koska ajattelemme niitä massiivisina "tekstin kaatopaikoina", kun kyseessä on informaatioarkkitehtuuri, ja tämä on varmasti yksi osa identiteettiä, mutta niillä on enemmän potentiaalia kuin se.
Jotkut blogit, kun ne on suunniteltu oikein, ovat erinomaisia ajattelutapamme ja eräiden salkutustietojen näyttämiseen, kun taas toiset ovat hyviä sekä uutisten että valokuvauksen näyttämiseen.
Tärkeintä on, että blogi voi olla hyvä säilytysankki monille aiheille, ja sen näyttäminen tulee alaspäin tiettyihin suunnittelutarpeisiin, joita teet koko ajan. Viimeisten viiden vuoden aikana on tullut paljon asioita, jotta blogin maailma olisi paljon helpompaa kuin aiemmin. Esimerkiksi WordPress on hieno ja teemat tekevät paljon suunnittelutyötä meille, mutta jos haluat maistaa sen, on olemassa muutamia asioita, jotka sinun pitää muistaa.
Samoin, jos haluat muokata teeman navigointia tai ulkoasua, niin on myös joitain asioita, joista haluat olla tietoinen. Tämä koskee lähes kaikkia bloggaajia, tai kun työskentelet omasta. Tässä on useita ajatuksiani siitä, mitä mielestäni nämä tärkeät bitit ovat.
Varjopohjaisten tekstitehosteiden käyttö
Tekstin vaikutukset ovat erinomaisia tapoja esitellä otsikkosi otsikoita, navigointipalkkeja tai sisällön esittelyjä blogissasi edellyttäen, että niitä käytetään säästeliäästi. Mennään muutamia yleisimpiä efektejä, joita näemme verkon yli käytössä ja miten niitä käytetään oikein.
Retro teksti
Usein on tuskaa työskennellä, mutta näyttää siltä, että kierrokset ovat olleet viime vuoden ja puoliksi huolimatta tästä. Ja CSS3: n myötä on paljon helpompaa manipuloida ja löytää täydellinen varjostus. Minulla on esimerkki täältä, jotta voimme ymmärtää, miten tämä vaikutus luodaan oikein. Sitten siirryn siihen, milloin ja milloin sitä ei käytetä. Retroefektin pelin nimi ei ole hämärtymusäde ja kahden varjon käyttäminen. Joten sanotaan, että työskentelemme tumman värisen fontin kanssa (# 707070I), haluamme käyttää kaksoiskappaleen varjoa tämän saavuttamiseksi. Se näyttäisi näin:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Sen pitäisi antaa sinulle mukava kaksoisrajainen vaikutus, jolla on hyvin 70-luku. Tietenkin, jotta saisit tuon tosi 70-luvun tunnelman, saatat joutua lisäämään kaikenlaisia värin manipulointeja, mutta ainakin meillä on perustaajuus alaspäin. Muista kuitenkin, älä mene liian hulluksi väritys - ja varmasti älä mene liian hulluksi x ja y poikkeama tekstin varjot (koska se voi osoittautua lukukelvoton erittäin nopeasti). Kun käytetään retro-vaikutusta, paras käyttö on otsakkeen otsikoissa. Tämä ei ole vaikutelma, joka toimisi hyvin pienikokoisella tekstillä tai kuvaavilla tiedoilla. Parasta antaa sen pysyä blogisi yläosassa ja jättää se yksin.
Kirjoituspainike ja tekstin lisäys
Toinen suosittu ominaisuus, että CSS3 varjostin tarjous on tyyppinen muotoilu, joka tunnetaan myös nimellä "kohopaino". Tämä on ehdottomasti kuuma aihe CSS3-tekstitehosteiden maailmassa, joten siirrymme siihen, miten ne toimivat oikein. Yläosoitin saavutetaan tyypillisesti korvaamalla Y-akselilla pieni määrä, joka antaa vaikutelman hienovaraisesta kohokohdasta tekstin välittömässä taustassa. Usein kertoo, että sitä käytetään vastakkaisena taustaserkkona (valo vs. tumma) niin, että vaikutuksella on enemmän vaikutusta lukijaan. Let's ajaa alas esimerkki.
Vaalea tausta, tumma teksti:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Tumma tausta, kevyt teksti
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Se antaa todella mukavan kerrostetun / sisäänvedetyn vaikutelman, jota voidaan käyttää otsikoissa tai blogin otsikoissa. Käytä sitä säästeliäästi koko sivuston kautta, koska mikään ei ole pahempi kuin joku ylivääriin teksteillä. Tällöin olisi hyvä käyttää useissa alaotsikoissa tai erilaisilla sivupalkkeilla tai alatunnisteilla - mutta varmista, ettet käytä tätä kuvailevissa tiedoissa. Jälleen mitään varjopohjaisia tekstitehosteita ei pitäisi käyttää tällaiseen asiaan.
Kuvien käsittely blogissasi
Katsotaanpa kohta, koska web-suunnittelijat haluamme osoittaa työtämme. Me rakastamme sitä niin paljon, että jopa henkilökohtaiset blogimme voivat täynnä salkkukuvia ja kappalemäärityksiä. Joten miksi ei vahvisteta näitä kahta? Paras tapa käsitellä otsikkotietojen tietoja on sisällyttää asiaankuuluvat tiedot itse kuvan sisällä, ja paras tapa tehdä tämä on toteuttaa CSS3-vaikutus suoraan kuvaan.
Jos olet utelias, miksi mielestäni tämä on tärkeä osa kuvamateriaalin käsittelyä, siirry Googlen verkkokauppaan (lisäosat). He pystyvät näyttämään tuhansia kuvia ilman lainkaan tekstiä ympärillään, mutta silti antaa meille tarpeeksi tietoa kyseisestä kuvasta tietääksemme haluammeko napsauttaa sitä vai ei. Tämä on loistavaa, ja paljon enemmän meistä pitäisi ottaa käyttöön sellainen tekniikka, joka ei pelkästään siivota tarpeettomia otsikkotekstiä vaan myös lisää käyttäjän kokemuksia.
Luomme sen uudelleen omalle blogillesi, mutta omalla kosketuksella, jotta voit näyttää asiakkaiden tietoja verkkosivuilla, joita olet työskennellyt:
Ensin meidän on luotava kontti kuvaan, ja sen sisällä meidän täytyy luoda toinen kontti tekstille, jota haluamme käyttää. Tässä tapauksessa käytämme alaotsikkoa, vähän tekstiä ja linkkiä. sitten sisällä, joka luo säiliön tekstin ja linkit asiakkaan verkkosivuilla näytämme.
Tässä osiossa, mitä teemme, on saada todellinen kuva siirtyä ulos ja valmistaa tekstiä siirtymään sisään. Tunnistamme myös, että haluamme, että kuva lähtee X-akselilta eikä Y-akselilta, joten se tarkoittaa meillä on liukuovi vaikutus.
Nyt asetamme hiiren leijuvälin vaikutuksen ja saamme siirtymisen aloittamaan tämän tapahtuman.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Kuten näette täällä, se, mitä teimme, oli samanlainen kuin mitä teimme yllä kuvassa. Olemme yksinkertaisesti tuoneet tekstin kuvan jäljessä ja antoivat sille + 0,1 sekunnin viiveen varmistaakseen, että se menee sujuvasti. Ja se on siitä.
On olemassa joukko muitakin tapoja, joilla voit muokata tätä, ja varmasti monia muita siirtymän vaikutuksia, joita voit käyttää. Muista kuitenkin, että jos käytät kehittyneempiä siirtymiä, älä käytä niitä niin toistuvasti kuin haluat. Niitä käytetään parhaiten säästelemällä keskeisiä kuvia.
Työskentely luovien asettelujen kanssa
Usein web-suunnittelijoina näemme liikaa käytettyjä trendejä, joita on käytetty väärin vuosiin ja vuosiin, ja haluamme olla ääni muutoksista. Mutta jouduttaminen viljaa vastaan voi olla riskialtista käytäntöä, varsinkin jos et tee sitä oikein (merkkinä - en sano, että sinun on oltava luova "oikealla tavalla", koska ei ole "oikeaa tapaa" ole luova). Mainitsin sen, että koska luullakseni luova on sen määritelmän mukaan sitova itsemme rajoituksista tai luovista normeista ja itse asiassa kannustan sitä, mutta uskon myös, että meidän on varottava syystä, miksi tällaiset normit ovat juurtuneet verkkoympäristöömme suunnitteluaiheita ja mitä voimme tehdä innovatiivisuudelle heidän kanssaan.
Ainutlaatuinen tekstin kohdistaminen
Kun työskentelet tekstiä luovilla tai ainutlaatuisilla tavoilla (ts. Ei 12pt Arial-keskitasoa), on todella tärkeää muistaa, että teksti ei ole enää sivun tärkein sisältö. Se on siirretty tukielementtiin, vaikkakin tärkeäksi.
Yksi kysymys, joka aina kysyy, kun työskentelet tekstin kanssa, on: "Onko tämä tasapaino hyvin loppusivun kanssa?" Se voi olla jonkin salkun työn, jonkin satunnaisen kuvan tai ehkä muutaman tekstin sarakkeen molemmin puolin sivu.
Mutta riippumatta siitä, mikä se on vierekkäin tai kohtisuorassa sinä, sinun täytyy yrittää tasapainottaa sitä parhaalla mahdollisella tavalla. Ajattele ristikkorakenteita ja tutki verkkojärjestelmät siellä, jos haluat ( 960 -verkkojärjestelmä on se, mitä suosittelisin). Tutki, missä he ovat asettaneet ruudukon ulkoasun sivulle, ja sitten kysy itseltäsi miksi - sitten päätellä, jos oma on yhtä tasapainoinen kuin se. Kuvittele, että asetat sisällön itse ruudukkojärjestelmää pitkin ja yritä miettiä, miltä se näyttää siinä tapauksessa - sitten kopioi se CSS: ssä.
Luova alatunniste
Luova alatunniste voi todella lisätä persoonallisuutta blogiin tai verkkosivustoon, ja se tuntuu vasta-intuitiiviselta ajatella niin. Riippumatta siitä, puhumme jQuery-rullauksesta, joka maistaa meidät kauniin alatunnisteen alla olevasta "maan alla" -tyylistä tai vain yrityksen verkkosivuston tai blogin pohjasta, se on hyvin pieni osa verkkosivustoa, mutta se on voi olla erittäin voimakas vaikutus. Lausunnot jaetaan, missä määrin tämä on ja miksi se voi olla. Minulla on oma teoriansa: kun luemme verkkosivun, aloitamme ylhäältä ja siirtymme alareunaan, ja sivun alareunassa teemme päätelmämme siitä, mitä olemme lukeneet.
Luovaa alatunnistetta käytettäessä on muutamia asioita, jotka haluat pitää mielessä ja muutamia parhaita käytäntöjä, joita olen huomannut käyttävän niitä alatunnisteita, joita eniten rakastan. Minulle tärkein osa alatunnisteen käyttämisestä tällä tavoin on käyttää samaa värimalleja kuin verkkosivustosi, mutta eri kontrasti. Tämä on uskomattoman tärkeää, ja voit luonnollisesti pumpata kontrastia ylös tai alas fontin värin suhteen kontrastin kanssa, jonka kanssa työskentelet alatunnisteen yleisen teeman kohdalla.
Tärkeää on muistaa, että haluat olla mukava syvä tyyli-asetettu tähän osaan. Se antaa mukavan lopputuloksen sivustolle. Kun käytät tätä tekniikkaa, voit tehdä alatunnistimen niin korkeaksi kuin haluat, syystä, koska vastakkaisella värimallilla on selvää, että tämä on todellakin alatunniste.
Sisällön osalta uuden alatunnisteen maailmassa voi olla sopivaa lisätä logoilmeesi ja blogin nimi, sosiaalisen verkoston kuvat tai linkit, uusin tweetsi ja jopa mukava yksinkertainen yhteydenottolomake. Tämä voi luonnollisesti vaihdella henkilökohtaisten mieltymyksiesi perusteella, mutta kohta, jossa esitetään kaikki nämä vaihtoehdot, on havainnollistaa evoluutio menneisyydestä läsnäoloon, mikä on tarkoituksenmukaista näyttää verkkosivuston tai blogin alaosassa.
jQuery-rullaus
Tämä on yksi suosituimmista tavoista tehdä navigointi verkkosivustolla, ja uskon myös, että se soveltuu erityisesti blogien viestien navigointiin. On olemassa muutamia erilaisia tapoja työskennellä jQueryin tämän kanssa, joten täältä pääsen läpi, mikä on yksi suosikeistani (ja helpoimmista) tavoista tehdä sileästi rullata ja sitten käydä läpi mitä tapahtuu ja miten se toteutetaan.
Tämä on pystysuoran vierityksen koodi, sillä vaakasuora vieritys ei ole toivottavaa.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000), event.preventDefault ();});});Täällä voi olla monimutkaista, mutta se on oikeastaan melko yksinkertainen. Avaamme toiminnon navigointielementin ".class", jonka aiomme napsauttaa (kutsumme tätä click-tapahtumaksi). Joten tärkein osa tässä on otsikko luettelon luokka (ul) "nav". Vaihtoehtoisesti korvata "nav" koodilla mitä tahansa nimesi mukaan. Ja se on melko paljon toimivaa jQuery-rullaa, vain heittää sen verkkosivustollesi ja linkki siihen minified jQuery (mieluummin) ja olet valmis menemään.
Sikäli kuin käyttö kulkee pystysuoralla selauksella, se on melko rajoittamaton. Monet ihmiset nauttivat siitä, ettei heidän tarvitse vierailla alaspäin käsin, ja he todella nauttivat siitä, kun sivu tekee heistä, ja se on myös loistava tapa siirtyä postista postitse verkkosivustoon, varsinkin jos nämä viestit ovat suuria. Käytän usein sitä siirtyäksesi erilaisiin salkun osa-alueisiin blogissani tai verkkosivustojen luokkien kautta. Se on myös täydellinen tekniikka, jos muokkaat sivustosi, kuten päivä-ilta-teemaa tai teemoja luokkiisi tai blogeihisi.
Toivon, että jotkut näistä tekniikoista olisivat hyödyllisiä, kun yrität soveltaa erilaisia suunnittelun estetiikkaa blogissasi. Muista, käytä niitä säästeliäästi ja yritä varmistaa, että toimisit parhaalla mahdollisella tavalla käytettäessä hauskoja vaikutuksia. Meillä on velvollisuus luoda internet, joka ei ole yhtä ruma kuin tietyt ulkomaailman näkökohdat. Vaikka se on suuri ja ylivoimainen tehtävä, se on sellainen, että voimme toteuttaa, jos vain otat sen yhden mallin kerrallaan ja eräänä päivänä kerrallaan. Pidä se yksinkertaisena, pidä se rehellisenä, pidä se oikeana ja aina innostus siihen, mitä teet - sillä se loistaa aina.
Mitkä ovat parhaimmat blogin suunnittelun vinkit? Mikä tekee todella hienosta blogin suunnittelusta? Kerro meille kommentit!
