6 måder at forbedre din blogs design på

Blogs kan ofte blive udeladt i kulden, når det kommer til design. Mange af os diskuterer behovet for intensivt design, når det kommer til vores blogs - hvad enten det gælder vores virksomheder eller os selv.

Men det er vigtigt, at vi indser, at alle aspekter af vores identitet online skal udformes på en ren og intuitiv måde, uanset hvilken stil du foretrækker. Dette undvigende aspekt af web-arbejde er noget, vi hele tiden bør stræbe efter. Og ja, det inkluderer den tid, vi bruger til at arbejde med blogs.

Mange tidsblogger går tabt i blandingen, fordi vi tænker på dem som massive "tekstdumper" når det kommer til informationsarkitektur, og det er bestemt et aspekt til deres identitet, men de har mere potentiale end det.

Nogle blogs, når de er designet rigtigt, er gode til at vise vores strøm af tanker såvel som nogle porteføljeoplysninger, mens andre er gode til at vise både nyheder og fotografering.

Pointepunktet er, at en blog kan være en god holdbarhed til en række emner, og hvis visning kommer ned til de specifikke designvalg, du laver i hele. I de sidste fem år er der kommet mange ting sammen for at gøre bloggens verden meget lettere end den plejede at være. For eksempel er WordPress fantastisk, og temaer gør meget af designarbejdet for os, men hvis du gerne vil krydre det, så er der et par ting, du skal huske på.

Tilsvarende, hvis du vil redigere temaets navigation eller layout, så er der også nogle ting, du vil være opmærksom på. Det gælder for næsten enhver blogging motor, eller når du arbejder på egen hånd. Her er flere af mine tanker om, hvad jeg synes er vigtige bits.

Arbejder med skyggebaserede teksteffekter

Teksteffekter er gode måder at præsentere header titler, navigeringsstænger eller indhold introduktioner på din blog, forudsat at de bruges sparsomt. Lad os gå over et par af de mere almindelige effekter, som vi ser overbrugt på internettet, og hvordan man bruger dem korrekt.

Retro tekst

Det er ofte en smerte at arbejde med, men det ser ud til at have lavet runderne de sidste halvanden år trods det faktum. Og med fremkomsten af ​​CSS3 er det meget nemmere at manipulere og finde den perfekte skygge. Jeg har et eksempel her for at hjælpe os med at forstå, hvordan man skaber denne effekt korrekt, så vil jeg gå over, hvornår og hvornår man ikke skal bruge den. Navnet på spillet med retro-effekter er ikke sløret radius og bruger to skygger. Så lad os sige, at vi arbejder med en mørk farvet skrifttype (# 707070I), vi vil bruge en dobbelt tekstskygge til at opnå dette. Det ville se sådan ud:

Det burde give dig en fin dobbelt grænseffekt, med en meget 70'ers kig på det. Selvfølgelig, for at få den sande 70's vibe, må du måske tilføje alle former for farvemanipulation, men i det mindste har vi bunden effekten nede. Husk dog, gå ikke for vild med farvningen - og absolut ikke gå for gal med x og y offset for tekstskyggerne (da det kan vise sig at være ulæseligt meget hurtigt). Når det kommer til at bruge en retro effekt, er den bedste brug i overskrift titler. Dette er ikke en effekt, der ville fungere godt med lille tekst eller beskrivende information. Bedst at lade det holde på toppen af ​​din blog og lade det være alene.

Letterpress & input tekst

Et andet populært træk, at CSS3-skyggen tilbyder er en indstillingstype styling, ellers kendt som 'letterpress'. Dette er helt sikkert et varmt emne i verden af ​​CSS3-teksteffekter, så lad os gå over, hvordan man gør dem ordentligt. En indsats styling opnås typisk ved at kompensere Y-aksen for et lille beløb for at give indtryk af en subtil højdepunkt inden for den umiddelbare baggrund af teksten. Ofte vil du se det blive brugt som modsætning til baggrunds-kontrast (lys mod mørke), så effekten har mere indflydelse på læseren. Lad os køre et eksempel.

Det vil give afkald på en rigtig flot lagdelt / indsats-effekt, som kan bruges til overskrifter eller blogtitler. Brug det sparsomt, men gennem hele webstedet, fordi intet er værre end nogen overbruger tekst-effekter. I dette tilfælde ville det være okay at bruge i forskellige underoverskrifter eller med forskellige sidebjælker eller sidefødningselementer - men bare sørg for at du ikke bruger dette på en beskrivende information. Igen bør eventuelle skyggebaserede teksteffekter ikke bruges til sådan en ting.

Arbejder med billeder på din blog

Lad os se det som webdesignere, vi elsker at vise ud af vores arbejde. Vi elsker det så meget, at selv vores personlige blogs kan blive riddled med portefølje billeder, og billedtekster strødt om. Så hvorfor ikke konsolidere de to? Den bedste måde at arbejde med billedoplysninger på, er at indeholde relevant info inden for selve billedet, og den bedste måde at gøre det på er at implementere en CSS3-effekt direkte på billedet.

Hvis du er nysgerrig om, hvorfor jeg synes, at dette er et vigtigt aspekt ved at arbejde med billeder, skal du bare gå videre til Google Chrome webshop (add-ons). De kan vise tusindvis af billeder uden nogen tekst omkring dem overhovedet, og alligevel give os nok information om det nævnte billede for at vide, om vi vil klikke på det eller ej. Det er strålende, og mange af os bør implementere en sådan teknik, så det ikke kun rydder op unødvendig billedtekst, men også at give et løft i brugeroplevelsen.

Så lad os genskabe det til din personlige blog, men med dit eget tryk, så du kan vise kundeoplysninger til websider, du har arbejdet med:

Først skal vi oprette en beholder til billedet, og så inde i det skal vi oprette en anden beholder til den tekst, vi vil bruge. I dette tilfælde bruger vi en underoverskrift, en smule tekst og et link. så inde i det skaber en beholder til teksten og links til kundens hjemmeside, vi viser.

I dette afsnit er det, vi gør, at få det faktiske billede til at overgå, og at prepping for teksten til overgang i. Vi identificerer også, at vi ønsker at billedet skal forlade langs X-aksen og ikke Y-aksen, så det betyder vi vil have en glidende dør type effekt.

Nu vil vi oprette musens hover-over effekt, og få overgangen til at starte på denne begivenhed.

Som du kan se her, hvad vi gjorde, lignede det, vi gjorde ovenfor for billedet. Vi hentede simpelthen teksten efter billedet tilbage, og gav det en + 0,1s forsinkelse for at sikre det går glat. Og det handler om det.

Der er en masse andre måder, som du kan tilpasse dette, og helt sikkert et ton af andre overgangseffekter, du kan bruge. Husk dog, at hvis du arbejder med mere avancerede overgange, ikke bruge dem på en sådan gentagne måde som du ville med noget så simpelt som dette. De bruges bedst til at understrege nøglebilleder.

Arbejder med kreative layouter

Ofte vil vi som webdesignere se de overudnyttede tendenser, der er blevet misbrugt år i og år ud, og ønsker at være en stemme til forandring vedrørende dem. Men at gå imod kornet kan være en risikabel praksis, især hvis du ikke gør det ordentligt (som et notat - jeg siger ikke, at du skal være kreativ på den rigtige måde, fordi der ikke er nogen rigtig måde at Vær kreativ). Jeg nævnte, at fordi jeg tror, ​​at være kreativ, er selve definitionen ubinding af os selv fra begrænsninger eller kreative normer, og jeg vil faktisk opmuntre det, men jeg tror også, at vi skal være forsigtige med årsagen til, at sådanne normer er blevet indblandet i vores web design temaer og hvad vi kan gøre for at være innovative med dem, med det i tankerne.

Unik tekstjustering

Når du arbejder med tekst på kreative eller unikke måder (dvs. ikke 12 Arial center-aligned), er det meget vigtigt at huske, at din tekst ikke længere er hovedindholdet på siden. Det er blevet henvist til et støtteelement, omend en vigtig.

Et spørgsmål om altid at spørge dig selv, når du arbejder med tekst er "Gør det en god balance med resten af ​​siden?" Det kan være ved siden af ​​noget porteføljearbejde, et tilfældigt billede eller måske bare forskellige andre kolonner med tekst på hver side af siden.

Men uanset hvad det er tilstødende eller vinkelret på dig, skal du forsøge at afbalancere det så godt du kan. Tænk på netlinjer, og studer gridsystemerne derude, hvis du skal 960 gitter system er det jeg vil anbefale). Undersøg hvor de har placeret netopbygningen på siden, og spørg dig selv hvorfor - så afled, om din er lige så afbalanceret som den. Forestil dig at du lægger dit indhold langs selve rutenettet, og prøv at tænke på, hvordan det ser ud i det tilfælde - så replikér det i CSS.

Creative footers

Kreative footers kan virkelig føje en masse personlighed til en blog eller et websted, og det virker slags mod-intuitivt at tænke på det. Uanset om vi taler om jQuery-scrolling, som lander os i en smuk footer-tema i en "under-the-Earth" -stil eller bare i bunden af ​​en virksomheds hjemmeside eller blog, er det en meget lille del af et websted, men en der kan have en meget kraftig indvirkning. Meningerne er opdelt i, i hvilket omfang dette er tilfældet, og hvorfor det kan være. Jeg har min egen teori: Når vi læser en webside starter vi øverst og flytter til bunden, og det er ved siden af ​​siden, at vi trækker vores konklusioner om, hvad vi har læst.

Når du arbejder med en kreativ footer, er der et par ting, du vil huske på, og nogle få bedste fremgangsmåder, jeg har bemærket, at blive brugt i de footers, som jeg elsker mest. For mig er den vigtigste del af brugen af ​​en footer på denne måde at bruge det samme farveskema som dit website, men med en anden kontrast. Dette er utrolig vigtigt, og du kan selvfølgelig pumpe kontrast op eller ned på skrifttypens farve med hensyn til den kontrast, du arbejder med for det overordnede tema på footeren i første omgang.

Den vigtige ting at huske er, at du vil have en god dyb stil-sæt til dette afsnit. Det giver en god følelse af færdiggørelse til webstedet. Når du bruger denne teknik, kan du gøre fodfoden så høj som du vil, inden for grunden, fordi med det kontrastfarvede farveskema er det indlysende, at dette faktisk er en fodersektion.

Hvad nyt indhold angår, kan det være hensigtsmæssigt at tilføje din logoillustration og blognavn, dine sociale netværk billeder eller links, din seneste tweet og endda en dejlig, forenklet kontaktformular. Dette kan selvfølgelig variere ud fra dine personlige præferencer, men mit punkt med at vise alle disse muligheder er at illustrere evolutionen fra fortid til nutid i, hvad der er hensigtsmæssigt at vise nederst på et websted eller en blog.

jQuery rulle

Dette er en af ​​mine foretrukne måder at gøre navigation på et websted, og jeg synes også, det er specifikt anvendeligt til at navigere indlæg på en blog. Der er et par forskellige måder at arbejde med jQuery på for dette, så her vil jeg gå over, hvad der er en af ​​mine foretrukne (og nemmeste) måder at gøre noget glat rulning på og derefter gennemgå, hvad der sker, og hvordan man implementerer det.

Hvad der foregår her kan se kompliceret ud, men det er faktisk ret simpelt. Vi åbner en funktion på ".class" i navigationselementet, som vi skal klikke på (vi kalder dette et klik-arrangement). Så den vigtigste del her er at titlen klassen af ​​listen (ul) til "nav". Eller erstat "nav" i koden med hvad du endda har nævnt den pågældende klasse. Og det er stort set det for en fungerende jQuery-rulle, skal du bare smide det ind på dit websted og link til minificeret jQuery (foretrækkes) og du er klar til at gå.

Så vidt brugen går med en lodret rulle som denne, er den temmelig ubegrænset. Mange mennesker nyder ikke at rulle ned manuelt, de nyder virkelig den side, der gør det for dem, og det er også en fantastisk måde at flytte fra indlæg til indlæg på en hjemmeside, især hvis disse stillinger er store. Jeg bruger det ofte til at flytte til forskellige porteføljesegmenter i mine blogs eller gennem kategorier på hjemmesider. Det er også en perfekt teknik, hvis du temaer dit websted som f.eks. Et dag til nat tema eller temaer til dine kategorier eller blogemner.

Jeg håber, at nogle af disse teknikker var nyttige for jer alle sammen i forsøg på at anvende forskellige design æstetik på din blog. Husk, brug dem sparsomt og prøv at sikre dig, at du handler med din bedste dømmekraft, når du bruger prangende effekter. Vi har pligt til at oprette et internet, der ikke er så grimt som visse aspekter af omverdenen er blevet. Selv om det er en stor og overvældende opgave, er det en, som vi kan opnå, hvis vi bare tager det et design ad gangen og en dag ad gangen. Hold det enkelt, hold det ærligt, hold det rigtigt, og læg altid lidenskab i hvad du gør - som det altid kommer til at skinne igennem.

Hvad er dine bedste blog design tips? Hvad skaber et rigtig godt blogdesign? Lad os vide i kommentarerne!