Blogs geta oft verið vinstri út í kuldanum þegar kemur að hönnun. A einhver fjöldi af okkur afsláttur þörfina fyrir mikla hönnun þegar kemur að bloggum okkar - hvort sem er fyrir fyrirtæki okkar eða okkur sjálf.

En það er mikilvægt að við átta okkur á öllum hliðum sjálfsmyndarinnar á netinu að vera hönnuð á hreint og leiðandi hátt með hvaða stíl sem þú vilt. Þessi ógnvekjandi þáttur í vefvinnu er eitthvað sem við ættum stöðugt að leitast við. Og já, það felur í sér þann tíma sem við eyðum að vinna með blogg.

Mörg tímabloggin glatast í uppstokkunum vegna þess að við hugsum um þær sem gríðarlega "textar hugarangur" þegar kemur að upplýsingasamskiptum, og það er vissulega einn þáttur í sjálfsmynd þeirra, en þeir hafa meiri möguleika en það.

Sumar blogg, þegar þau eru hönnuð á réttan hátt, eru frábær til að sýna hugsun okkar og upplýsingar um eignasöfn, en aðrir eru frábærir til að sýna bæði fréttir og ljósmyndun.

Aðalatriðið er, bloggið getur verið frábær varðveisla fyrir fjölbreytt efni og birtingin sem kemur niður á sérstökum hönnunarkostum sem þú gerir í gegnum. Á undanförnum fimm árum hafa margar hlutir komið fram til að gera heiminn að blogga miklu auðveldara en áður var. Til dæmis er WordPress frábært og þemu gera mikið af hönnunarvinnu fyrir okkur, en ef þú vilt spice hana upp þá eru nokkur atriði sem þú þarft að hafa í huga.

Á sama hátt, ef þú vilt breyta leiðsögn eða útliti þema þá eru líka nokkrir hlutir sem þú vilt vera meðvitaðir um. Það fer fyrir næstum hvaða blogga vél, eða þegar þú vinnur á eigin spýtur. Hér eru nokkrar hugsanir mínar um það sem ég held að þessar mikilvægu bita séu.

Vinna með textaáhrifum sem eru í skugga

Textiáhrif eru góð leið til að kynna haustitla, flakkstikur eða innihaldsefni á blogginu þínu, að því tilskildu að þær séu notaðar sparlega. Skulum fara yfir nokkrar af þeim algengustu áhrifum sem við sjáum ofnotkun á vefnum og hvernig á að nota þau rétt.

Retro texti

Það er oft sársauki að vinna með, en það virðist hafa verið umferðir undanfarin hálft ár þrátt fyrir það. Og með tilkomu CSS3 er það miklu auðveldara að vinna og finna það fullkomna skygging. Ég er með dæmi hér til að hjálpa okkur að skilja hvernig á að búa til þessa áhrif á réttan hátt, þá mun ég fara yfir hvenær og hvenær eigi að nota það. Nafn leiksins með afturáhrifum er ekki óskýrra radíus, og með tvöföldum skugganum. Svo segjum að við erum að vinna með dökklit letri (# 707070I), við viljum nota tvöfalda textaskugga til að ná þessu. Það myndi líta svona út:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

Það ætti að gefa þér gott tvöfalt landamæri áhrif, með mjög 70 er að líta á það. Auðvitað, til þess að fá þessi sanna gildi 70, gætir þú þurft að bæta við alls konar litaviðgerð, en að minnsta kosti höfum við grunnáhrifin niður. Mundu þó, ekki fara of brjálaður við litunina - og vertu örugglega ekki of brjálaður með x og y móti fyrir textaskugga (eins og það gæti reynst ólæsilegt mjög hratt). Þegar það kemur að því að nota afturáhrif, er best að nota í heitum titlum. Þetta er ekki áhrif sem myndi virka vel með litlum texta eða lýsandi upplýsingum. Best að láta það standa efst á blogginu þínu og láta það vera einn.

Bókstafir og innsláttartexta

Annar vinsælur eiginleiki sem tilboð CSS3 skuggans er innsláttartegund stíl, annars þekktur sem 'letterpress'. Þetta er örugglega heitt umræðuefni í heimi textaáhrifa CSS3, þannig að við skulum fara yfir hvernig við gerum þær rétt. Stærð innsetningar er venjulega náð með því að staðsetja Y-ásinn örlítið magn til að gefa til kynna lúmskur hápunktur innan viðliggjandi bakgrunns textans. Oft sinnum munt þú sjá að það sé notað sem andstæða við bakgrunnsskugga (ljós á móti dökkum) þannig að áhrifin hafi meiri áhrif á lesandann. Skulum læra dæmi.

Ljós bakgrunnur, dökk texti:

body { background-color: #888; text-shadow: 0px 2px 3px #666;}

Myrkur bakgrunnur, léttur texti

body {background-color: #666; text-shadow: 0px 2px 3px #888;}

Það mun gefa af sér mjög gott lagskipt / innskot sem hægt er að nota fyrir haus eða blogg titla. Notaðu það sparlega þó um allt svæðið, því ekkert er verra en einhver ofnotkun á textaáhrifum. Í þessu tilfelli myndi það vera í lagi að nota í ýmsum undirhausum eða með ýmsum hliðarbeltum eða fótumþáttum - en bara vertu viss um að þú notir ekki þetta á lýsandi upplýsingum. Aftur á móti ætti ekki að nota slíka textaáhrif í skugga.

Vinna með myndum á blogginu þínu

Við skulum líta á það, eins og vefhönnuðir, við elskum að sýna fram á verk okkar. Við elskum það svo mikið að jafnvel persónulegu bloggin okkar geti orðið riddled með eigu myndum og myndritum hljóp um. Svo hvers vegna ekki treysta þeim tveimur? Besta leiðin til að vinna með upplýsingar um texta er að innihalda viðeigandi upplýsingar innan myndarinnar sjálft og besta leiðin til að gera það er að framkvæma CSS3 áhrif beint á myndina.

Ef þú ert forvitinn af því hvers vegna ég held að þetta sé svo mikilvægur þáttur í að vinna með myndir skaltu bara fara yfir á Google Chrome vefverslunina (viðbætur). Þeir geta birt þúsundir mynda án texta í kringum þau og gefið okkur samt nægar upplýsingar um myndina til að vita hvort við viljum smella á það eða ekki. Það er ljómandi og margt fleira af okkur ætti að vera að innleiða slíka tækni til að hreinsa ekki óþarfa texta fyrir texta, heldur einnig til að auka upplifun í reynslu notenda.

Svo skulum við endurskapa það fyrir persónulega bloggið þitt, en með eigin snertingu þína, svo að þú getir birt upplýsingar um viðskiptavini fyrir vefsíðuna sem þú hefur unnið á:

Í fyrsta lagi þurfum við að búa til ílát fyrir myndina og svo innan við þurfum við að búa til annan gám fyrir texta sem við viljum nota. Í þessu tilfelli munum við nota undirhaus, smá texta og tengil. þá inni sem búa til gám fyrir texta og tengla á heimasíðu viðskiptavinarins sem við erum að sýna.

Í þessum kafla er það sem við erum að gera að fá raunveruleg mynd til að skipta út, og prepping fyrir textann til umskipunar inn. Við erum líka að bera kennsl á að við viljum að myndin sé eftir með X-ásnum og ekki Y-ásnum, þannig að það þýðir við munum hafa rennihurð gerð áhrif.

Nú munum við setja upp músarbendilinn, og fá umskipti til að hefja þennan atburð.

Eins og þú sérð hérna, það sem við gerðum var svipað og við gerðum hér fyrir myndina. Við fórum einfaldlega í textann eftir myndina til vinstri og gaf það + 0.1s frest til að ganga úr skugga um að það fari vel. Og það er um það.

Það eru fullt af öðrum aðferðum sem þú getur sérsniðið þetta og ákveðið tonn af öðrum breytingum sem þú getur notað. Mundu þó að ef þú vinnur með háþróaðri umbreytingum skaltu ekki nota þær í svo endurteknum hætti sem þú myndir með eitthvað eins einfalt og þetta. Þeir eru best notaðar sparlega til að leggja áherslu á lykilmyndir.

Vinna með skapandi skipulag

Oft, sem vefhönnuðir, munum við sjá of mikið notaðar strauma sem hafa verið misnotuð ár á ári og ári út og vilja vera rödd til breytinga varðandi þá. En að fara á móti korninu getur verið áhættusöm æfa, sérstaklega ef þú ert ekki að gera það rétt (eins og athugasemd - ég segi ekki að þú verður að vera skapandi á "réttan hátt" vegna þess að það er engin "rétt leið" til að vera skapandi). Ég nefndi að vegna þess að ég held að vera skapandi er með mjög skilgreiningu sinni að binda okkur frá þvingun eða skapandi reglum og í raun myndi ég hvetja það en ég held líka að við ættum að vera á varðbergi gagnvart því að slíkar reglur hafa verið gerðar í vefnum okkar hönnun þemu og hvað við getum gert til að vera nýjungar með þeim, með það í huga.

Unique text alignment

Þegar þú vinnur með texta á skapandi eða einstaka hátt (þ.e. ekki 12 punkta Arial miðstöð) þá er það mjög mikilvægt að muna að textinn þinn sé ekki aðalatriðið á síðunni lengur. Það hefur verið dregið til stuðningsþáttar, þó mikilvægt.

Ein spurning til að spyrja sjálfan þig hvenær sem er með texta er: "Er þetta jafnvægi vel við restina af síðunni?" Það kann að vera við hliðina á einhverjum eignavinnu, einhverjum handahófi mynd, eða bara ýmis önnur textasúlur hvoru megin við síðunni.

En án tillits til þess sem það er aðliggjandi eða hornrétt á þig þarftu að reyna að jafnvægi það út eins og best þú getur. Hugsaðu um ristilínur og athugaðu ristakerfi þarna úti ef þú verður að 960 ristakerfi er það sem ég myndi mæla með). Rannsakaðu þar sem þeir hafa sett töflureikninguna á síðunni og spyrðu sjálfan þig hvers vegna - þá dregðu úr því hvort þitt sé jafn jafnvægið og það. Ímyndaðu þér að þú leggir efnið þitt inn á ristarkerfið sjálft og reyndu að hugsa um hvað það myndi líta út í því tilfelli-þá endurtaka það í CSS.

Skapandi fætur

Skapandi fótur getur raunverulega bætt mikið af persónuleika við blogg eða vefsíðu og það virðist eins og gagnvirkt til að hugsa svo. Hvort sem við erum að tala um jQuery rolla sem lendir okkur í fallegu fótumþema í "undir jörðu" stíl, eða bara fyrir neðst á vefsíðu fyrirtækis eða bloggsíðu, er það mjög lítill hluti vefsvæðis en einn sem er getur haft mjög öflug áhrif. Álit er skipt á hve miklu leyti þetta er og hvers vegna það gæti verið. Ég hef eigin kenningu: Þegar við lesum vefsíðu sem við byrjum efst og fara til botns, og það er við hliðina á síðunni að við teiknum ályktanir okkar um það sem við höfum lesið.

Þegar þú vinnur með skapandi fótum eru nokkrir hlutir sem þú vilt hafa í huga og nokkrar góðar starfsvenjur sem ég hef tekið eftir að nota í fótunum sem ég elska mest. Fyrir mig er mikilvægasti hluti þess að nota fótfestu á þennan hátt að nota sama litasamsetningu og vefsíðuna þína, en með mismunandi andstæðum. Þetta er ótrúlega mikilvægt og þú getur auðvitað dælt andstæða upp eða niður á leturlitnum með tilliti til andstæðunnar sem þú ert að vinna með í heildarþema á fótinn í fyrsta lagi.

Mikilvægt að muna er að þú viljir hafa góða djúpa stíl fyrir þennan hluta. Það gefur góðan skilning á síðunni. Þegar þú notar þessa tækni er hægt að gera fóturinn eins hátt og þú vilt, með ástæðu, vegna þess að með litamyndavélinni er augljóst að þetta er örugglega fótgangandi.

Hvað varðar efni fer í heimi nýja fótsporsins getur það verið viðeigandi að bæta við lógómyndinni og blogginu þínu, félagslegu netmyndunum þínum eða tenglum, nýjustu kvakinu þínu og jafnvel fallegt einfalt sambandsform. Þetta getur auðvitað verið breytilegt miðað við persónulegar óskir þínar en áherslan mín á að sýna allar þessar valkosti er að sýna þróunina frá fortíð til kynna í því sem rétt er að birta neðst á vefsíðu eða bloggi.

jQuery rolla

Þetta er ein af uppáhalds leiðunum mínum til að gera leiðsögn á vefsíðu, og ég held líka að það sé sérstaklega við um færslur á blogginu. Það eru nokkrar mismunandi leiðir til að vinna með jQuery fyrir þetta, þannig að ég mun fara yfir það sem er ein af uppáhalds (og auðveldustu) leiðunum mínum til að gera sléttri flettingu og fara síðan í gegnum það sem er að gerast og hvernig á að framkvæma það.

Þetta er kóða fyrir lóðrétta fletta, þar sem lárétt skrun er ekki eins æskilegt.

$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}  , 1000); event.preventDefault ();}};}); 

Hvað er að gerast hér kann að líta flókið út, en það er í raun frekar einfalt. Við erum að opna aðgerð á ".class" í leiðsögninni sem við erum að fara að smella á (við köllum þetta smellahóp). Svo mikilvægasti hluturinn hér er að titla bekknum listans (ul) til "nav". Eða skiptu um "nav" í kóðanum með hvað sem þú hefur nefnt þann flokk. Og það er frekar það að virka jQuery rolla, bara henda því inn á vefsvæðið þitt og tengdu við minnkað jQuery (æskilegt) og þú ert tilbúinn að fara.

Eins og langt eins og notkun fer með lóðréttu skrúfu eins og þetta, er það ansi ótakmarkað. Mjög margir njóta þess að þurfa ekki að skruna niður handvirkt, þeir njóta virkilega síðuna sem gerir það fyrir þá og það er líka frábært leið til að flytja frá færslu til færslu á vefsíðu, sérstaklega ef þessi færslur eru stórar. Ég mun nota það oft til að flytja til ýmissa eigna undirflokka innan blogganna mínar eða í gegnum flokka á vefsíðum. Það er líka fullkomin tækni ef þú ert að þema á síðuna þína, svo sem að gera dagþemaþema eða þemu fyrir flokka eða bloggþemu.

Ég vona að sum þessara aðferða væru gagnleg fyrir þig alla í að reyna að beita ýmsum fagurfræðilegum fagurfræði á blogginu þínu. Mundu að nota þau sparlega og reyndu að ganga úr skugga um að þú sért með bestu dómgreind þegar þú notar áberandi áhrif. Við skuldbindum okkur til að búa til internet sem er ekki eins ljótt og ákveðnar þættir umheimsins hafa orðið. Þótt það sé stórt og yfirþyrmandi verkefni, þá er það eitt sem við getum náð ef við tökum bara eina hönnun í einu og einum degi í einu. Haltu því einfalt, varðveistu það heiðarlegt, varðveitt það og leggðu alltaf ástríðu í því sem þú gerir - eins og það mun alltaf skína í gegnum.

Hverjir eru bestu ábendingar um blogghönnun? Hvað gerir fyrir mjög frábær blogghönnun? Láttu okkur vita í athugasemdum!