Blogger kan ofte bli utelatt i kulde når det gjelder design. Mange av oss diskuterer behovet for intensiv design når det gjelder våre blogger - enten for våre selskaper eller oss selv.

Men det er viktig at vi innser at alle aspekter av vår identitet på nettet skal utformes på en ren og intuitiv måte med hvilken stil du helst foretrekker. Dette unnvikende aspektet av webarbeid er noe vi hele tiden bør streve etter. Og ja, det inkluderer tiden vi bruker med blogger.

Mange blogger går tapt i blandingen fordi vi tenker på dem som massive "tekstdumper" når det gjelder informasjonsarkitektur, og det er absolutt et aspekt til deres identitet, men de har mer potensial enn det.

Noen blogger, når de er utformet på riktig måte, er gode for å vise vår strøm av tanker, så vel som noen porteføljeinformasjon, mens andre er gode for å vise både nyheter og fotografering.

Poenget er, en blogg kan være en stor holdetank for en rekke emner, og displayet av disse kommer ned til de spesifikke designvalgene du lager gjennom. I de siste fem årene har mange ting kommet sammen for å gjøre bloggen verden mye enklere enn det pleide å være. For eksempel er WordPress flott og temaer gjør mye av designarbeidet for oss, men hvis du ønsker å krydre det, så er det noen ting du må huske på.

På samme måte, hvis du vil redigere temaets navigering eller layout, så er det også noen ting du vil være oppmerksom på. Det går for nesten alle blogger, eller når du arbeider på egen hånd. Her er flere av mine tanker om hva jeg tror de viktige biter er.

Arbeider med skyggebaserte teksteffekter

Teksteffekter er gode måter å presentere header titler, navigeringslinjer eller innholdsinnføringer på bloggen din, forutsatt at de brukes sparsomt. La oss gå over noen av de mer vanlige effektene som vi ser overbrudd på nettet, og hvordan du bruker dem riktig.

Retro tekst

Det er ofte en smerte å jobbe med, men det synes å ha vært rundene de siste halvannen år, til tross for det faktum. Og med adventen til CSS3 er det mye lettere å manipulere og finne den perfekte skyggingen. Jeg har et eksempel her for å hjelpe oss å forstå hvordan å skape denne effekten ordentlig, så vil jeg gå over når og når jeg ikke skal bruke den. Navnet på spillet med retro-effekter er ingen uklarhet, og bruk av to skygger. Så la oss si at vi jobber med en mørk farget skrift (# 707070I), vi vil bruke en dobbelt tekstskygge for å oppnå dette. Det ville se slik ut:

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

Det burde gi deg en fin dobbel grenseffekt, med en veldig 70-talls titt på den. Selvfølgelig, for å få den sanne 70-sangen, må du kanskje legge til alle slags fargemanipulering, men i det minste har vi grunnen effekten ned. Husk imidlertid, ikke gå for gal med fargen - og vær definitivt ikke så gal med x og y offset for tekstskyggene (som det kan vise seg å være ulæselig veldig fort). Når det gjelder å bruke en retro-effekt, er den beste bruken i overskriftstitler. Dette er ikke en effekt som vil fungere godt med liten tekst eller beskrivende informasjon. Best å la det holde seg på toppen av bloggen din og la den stå alene.

Letterpress & input-tekst

En annen populær funksjon som CSS3-skyggenes tilbud er en innstilt type styling, ellers kjent som "letterpress". Dette er definitivt et hett emne i verden av CSS3 tekst effekter, så la oss gå over hvordan du gjør dem riktig. En innstilt styling oppnås vanligvis ved å kompensere Y-aksen for et lite beløp for å gi inntrykk av et subtilt høydepunkt i umiddelbar bakgrunn av teksten. Ofte vil du se det bli brukt som et motsatte mot bakgrunnskontrasten (lys mot mørke) slik at effekten har mer innvirkning på leseren. La oss kjøre ned et eksempel.

Lys bakgrunn, mørk tekst:

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

Mørk bakgrunn, lys tekst

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

Det vil gi av en veldig fin lagdelt / innspillingseffekt som kan brukes til topptekst eller bloggtitler. Bruk det sparsomt, men gjennom hele nettstedet, fordi ingenting er verre enn noen overusing tekst-effekter. I dette tilfellet ville det være greit å bruke i ulike underoverskrifter eller med ulike sidebjelker eller bunnelementer - men bare vær sikker på at du ikke bruker dette på en beskrivende informasjon. Igjen, ingen skyggebaserte teksteffekter bør ikke brukes til en slik ting.

Arbeider med bilder på bloggen din

La oss innse det, som webdesignere vi elsker å vise frem vårt arbeid. Vi elsker det så mye at selv våre personlige blogger kan bli riddled med porteføljebilder, og bildetekster strekkes om. Så hvorfor ikke konsolidere disse to? Den beste måten å jobbe med bildetekstinformasjon på, er å inneholde relevant informasjon i selve bildet, og den beste måten å gjøre det på er å implementere en CSS3-effekt direkte på bildet.

Hvis du er nysgjerrig på hvorfor jeg synes dette er et så viktig aspekt ved å jobbe med bilder, bare gå videre til Google Chrome nettbutikk (tilleggsprogrammer). De kan vise tusenvis av bilder uten tekst rundt dem i det hele tatt, og likevel gi oss nok informasjon om det nevnte bildet for å vite om vi vil klikke på det eller ikke. Det er strålende, og mange av oss bør implementere en slik teknikk for ikke bare å rydde opp unødvendig teksttekst, men også å gi et løft i brukeropplevelsen.

Så la oss omskape det til din personlige blogg, men med din egen berøring, slik at du kan vise klientinformasjon for nettsidebilder du har jobbet med:

Først må vi lage en beholder for bildet, og så inne i det må vi lage en annen beholder for teksten vi vil bruke. I dette tilfellet bruker vi en underoverskrift, litt tekst og en lenke. så inne som lager en container for teksten og koblinger til kundens nettsted vi viser.

I dette avsnittet gjør vi det faktiske bildet for å overgå, og prepping for teksten til overgang i. Vi identifiserer også at vi vil at bildet skal gå langs X-aksen og ikke Y-aksen, så det betyr at Vi vil ha en skyvedørstype effekt.

Nå skal vi sette opp musepekeren og få overgangen til å starte på denne hendelsen.

Som du kan se her, det vi gjorde var som det vi gjorde over for bildet. Vi tok rett og slett inn teksten etter bildet igjen, og ga det en + 0,1s forsinkelse for å sikre at det går jevnt. Og det handler om det.

Det er en rekke andre måter som du kan tilpasse dette, og definitivt massevis av andre overgangseffekter du kan bruke. Husk at hvis du arbeider med mer avanserte overganger, ikke bruk dem på en så repeterende måte som du ville med noe så enkelt som dette. De er best brukt sparsomt for å understreke viktige bilder.

Arbeider med kreative layouter

Ofte, som webdesignere, vil vi se de over brukte trender som har blitt misbrukt år inn og år ut, og ønsker å være en stemme for endring angående dem. Men å gå mot kornet kan være en risikofylt praksis, spesielt hvis du ikke gjør det ordentlig (som et notat - jeg sier ikke at du må være kreativ på riktig måte fordi det ikke er noen riktig måte å vær kreativ). Jeg nevnte at fordi jeg tror å være kreativ, er det selvsagt å være ubinding av oss selv fra begrensninger eller kreative normer, og faktisk vil jeg oppmuntre det, men jeg tror også at vi bør være forsiktige med årsaken til at slike normer har blitt innblandet i vår web design temaer og hva vi kan gjøre for å være nyskapende med dem, med det i tankene.

Unik tekstjustering

Når du arbeider med tekst på kreative eller unike måter (det vil si ikke 12 Arial Center-aligned), er det veldig viktig å huske at teksten din ikke er hovedinnholdet på siden lenger. Det har blitt henvist til et støtteelement, om enn en viktig.

Et spørsmål om å alltid spørre deg selv når du arbeider med tekst er, "Gjør dette balansen godt med resten av siden?" Det kan være tilstøtende med noen porteføljearbeid, noe tilfeldig bilde, eller kanskje bare flere andre kolonner med tekst på hver side av siden.

Men uavhengig av hva det er tilstøtende eller vinkelrett på, må du prøve å balansere det så godt du kan. Tenk på rutenettlinjer, og studer nettverkssystemene der ute hvis du må ( 960 grid system er det jeg vil anbefale). Undersøk hvor de har plassert gridoppsettet på siden, og spør deg selv hvorfor - så avgjøre om din er like balansert som den. Tenk deg at du legger innholdet ditt langs selve rutenettet, og prøv å tenke på hvordan det vil se ut i det tilfellet - så gjenta det i CSS.

Creative footers

Kreative footers kan virkelig legge til mye personlighet på en blogg eller et nettsted, og det virker som en slags mot-intuitiv å tenke på det. Enten vi snakker om jQuery-rulling som lander oss i en vakker footer-tema i en "under-the-Earth" -stil, eller bare på bunnen av selskapets nettside eller blogg, er det en veldig liten del av et nettsted, men en som kan ha en svært kraftig innvirkning. Meninger er delt på i hvilken grad dette er tilfelle, og hvorfor det kan være Jeg har min egen teori: Når vi leser en nettside starter vi på toppen og går til bunnen, og det er ved foten av siden at vi trekker våre konklusjoner om hva vi har lest.

Når du jobber med en kreativ footer, er det noen ting du vil huske på, og noen få gode praksiser jeg har lagt merke til blir brukt i footers som jeg elsker mest. For meg er den viktigste delen av å bruke en bunntekst på denne måten å bruke samme fargevalg som nettstedet ditt, men med en annen kontrast. Dette er utrolig viktig, og du kan selvfølgelig pumpe kontrast opp eller ned på skrifttypens farge med hensyn til kontrasten du jobber med for det overordnede temaet på footeren i utgangspunktet.

Det viktige å huske er at du vil ha en fin dyp stil-sett for denne delen. Det gir en fin følelse av ferdigstillelse til nettstedet. Når du bruker denne teknikken, kan du gjøre fotfoten så høy som du vil, innenfor grunn, fordi med kontrastfargevalg er det åpenbart at dette faktisk er en footer-seksjon.

Når det gjelder innhold, kan det være hensiktsmessig å legge til logo-illustrasjonen og bloggnavnet, ditt sosiale nettverk bilder eller linker, din siste tweet, og til og med en fin, enkel kontaktskjema. Dette kan selvsagt variere basert på dine personlige preferanser, men mitt poeng med å vise alle disse alternativene er å illustrere evolusjonen fra fortiden til stede i det som er riktig å vise nederst på et nettsted eller en blogg.

jQuery ruller

Dette er en av mine favoritt måter å gjøre navigering på et nettsted, og jeg tror også det er spesielt aktuelt for å navigere innlegg på en blogg. Det er noen forskjellige måter å jobbe med jQuery på for dette, så her vil jeg gå over hva som er en av mine favoritt (og enkleste) måter å gjøre litt jevn rulling på, og deretter gå gjennom hva som skjer og hvordan å implementere det.

Dette er kode for vertikal rulling, da horisontal rulling ikke er like ønskelig.

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

Det som skjer her kan se komplisert, men det er faktisk ganske enkelt. Vi åpner en funksjon på ".class" av navigasjonselementet som vi skal klikke på (vi kaller dette et klikk-arrangement). Så den viktigste delen her er at tittelen klassen av listen (ul) til "nav". Eller erstatt "nav" i koden med hva du har kalt den klassen. Og det er ganske mye det for en fungerende jQuery-rulle, bare kaste det inn på nettstedet ditt og lenke til minifisert jQuery (foretrukket) og du er klar til å gå.

Så langt som bruk går med en vertikal rulle som dette, er det ganske ubegrenset. Mange mennesker liker ikke å rulle ned manuelt, de virkelig liker siden å gjøre det for dem, og det er også en glimrende måte å flytte fra innlegg til innlegg på et nettsted, spesielt hvis disse innleggene er store. Jeg vil ofte bruke den til å flytte til ulike portefølje-underavdelinger i mine blogger eller gjennom kategorier på nettsteder. Det er også en perfekt teknikk hvis du temaer nettstedet ditt, for eksempel å gjøre et dag til natt tema, eller temaer for kategorier eller bloggemner.

Jeg håper noen av disse teknikkene var nyttige for deg alle i å prøve å bruke ulike designestetikk på bloggen din. Husk, bruk dem sparsomt og prøv å sørge for at du handler med din beste dømmekraft når du bruker prangende effekter. Vi har plikt til å skape et internett som ikke er så stygg som visse aspekter av omverdenen er blitt. Selv om det er en stor og overveldende oppgave, er det en som vi kan oppnå hvis vi bare tar det ett design om gangen og en dag av gangen. Hold det enkelt, hold det ærlig, hold det ekte, og legg alltid lidenskap i det du gjør - som det alltid kommer til å skinne gjennom.

Hva er dine beste bloggdesign tips? Hva gir en virkelig flott bloggdesign? Gi oss beskjed i kommentarene!