6 sätt att förbättra din blogg design

Bloggar kan ofta vara borta i kylan när det gäller design. Många av oss diskonterar behovet av intensiv design när det gäller våra bloggar, vare sig för våra företag eller oss själva.

Men det är viktigt att vi inser att alla aspekter av vår identitet online ska utformas på ett rent och intuitivt sätt med vilken stil du föredrar. Denna elusiva aspekt av webbarbetet är något vi ständigt bör sträva efter. Och ja det inkluderar den tid vi spenderar på att arbeta med bloggar.

Många tidsbloggar går vilse i blandningen eftersom vi tycker om dem som massiva "textdump" när det gäller informationsarkitektur, och det är verkligen en aspekt av deras identitet, men de har mer potential än det.

Vissa bloggar, när de är utformade på ett korrekt sätt, är bra för att visa vår ström av tankar och viss portföljinformation, medan andra är bra för att visa både nyheter och fotografering.

Poängen är, en blogg kan vara en bra hålltank för en mängd olika ämnen och vars display kommer ner till de specifika designalternativen du gör hela tiden. Under de senaste fem åren har det kommit många saker att göra bloggens värld mycket enklare än det brukade vara. Exempelvis är WordPress bra och teman gör mycket av designarbetet för oss, men om du vill krydda det är det några saker du behöver tänka på.

På samma sätt, om du vill redigera tematets navigering eller layout så finns det också några saker du vill vara medveten om. Det gäller nästan alla bloggar, eller när du arbetar ensam. Här är flera av mina tankar om vad jag tycker är de viktiga bitarna.

Arbetar med skuggbaserade texteffekter

Texteffekter är bra sätt att presentera rubrikrubriker, navigeringsfält eller innehållsinställningar på din blogg förutsatt att de används sparsamt. Låt oss gå över några av de mer vanliga effekterna som vi ser överanvändna på webben och hur man använder dem ordentligt.

Retro text

Det är ofta en smärta att arbeta med, men det verkar ha gjort rundorna det senaste halvåret trots det faktum. Och med tillkomsten av CSS3 är det mycket lättare att manipulera och hitta den perfekta skuggningen. Jag har ett exempel här för att hjälpa oss att förstå hur man skapar denna effekt på rätt sätt, då ska jag gå över när och när jag inte ska använda den. Namnet på spelet med retro-effekter är ingen oskarpa radie och med dubbla skuggor. Så låt oss säga att vi arbetar med ett mörkt färgat teckensnitt (# 707070I), vi vill använda en dubbel textskugga för att uppnå detta. Det skulle se ut så här:

Det borde ge dig en fin dubbelgränsseffekt, med en mycket 70-talets titt på den. Naturligtvis, för att få den sanna 70-känslan kan du behöva lägga till alla typer av färgmanipulation, men minst har vi grunden effekten ner. Kom dock ihåg att du inte går för galen med färgningen och definitivt inte gå för galen med x och y förskjutna för textskuggorna (eftersom det kan visa sig vara oläsligt mycket snabbt). När det gäller att använda en retro-effekt är den bästa användningen i rubrikrubriker. Detta är inte en effekt som skulle fungera bra med liten text eller beskrivande information. Bäst att låta det stå på toppen av din blogg och lämna det ensam.

Letterpress & insert text

En annan populär egenskap som CSS3-skuggans erbjudande är en typ av inslagstyp, annars kallad "brevpress". Detta är definitivt ett hett ämne i världen av CSS3-texteffekter, så låt oss gå över hur man gör dem ordentligt. En insetstyling uppnås vanligen genom att kompensera Y-axeln en liten mängd för att ge intrycket av en subtil markering inom textens omedelbara bakgrund. Ofta ser du att den används som motsats till bakgrundskontrast (ljus mot mörk) så att effekten har en större inverkan på läsaren. Låt oss springa ner ett exempel.

Det kommer att ge bort en riktigt fin skiktad / inslagseffekt som kan användas för rubriker eller bloggtitlar. Använd det sparsamt men hela webbplatsen, för att inget är värre än någon som använder textuella effekter. I det här fallet skulle det vara okej att använda i olika underrubriker eller med olika sidofält eller sidfot - men bara se till att du inte använder det här på en beskrivande information. Återigen bör eventuella skuggbaserade texteffekter inte användas för en sådan sak.

Arbeta med bilder på din blogg

Låt oss möta det, som webbdesigners vi älskar att visa upp vårt arbete. Vi älskar det så mycket att även våra personliga bloggar kan bli riddled med portföljen bilder, och textning strös om. Så varför inte konsolidera de två? Det bästa sättet att arbeta med bildtextinformation är att innehålla relevant information inom själva bilden, och det bästa sättet att göra det är att implementera en CSS3-effekt direkt på bilden.

Om du är nyfiken på varför jag tycker att detta är en så viktig aspekt av att arbeta med bilder, gå bara vidare till Google Chrome webbutik (tillägg). De kan visa tusentals bilder utan någon text runt dem alls och ändå ge oss tillräckligt med information om nämnda bild för att veta om vi vill klicka på det eller inte. Det är briljant, och mycket mer av oss borde genomföra en sådan teknik för att inte bara rensa onödig texttext, men också för att öka användarupplevelsen.

Så låt oss omskapa det för din personliga blogg, men med din egen kontakt så att du kan visa klientinformation för webbsidor som du har arbetat med:

Först måste vi skapa en behållare för bilden, och sedan inuti det behöver vi skapa en annan behållare för texten som vi vill använda. I det här fallet använder vi en underrubrik, lite text och en länk. sedan inuti som skapar en behållare för texten och länkar till kundens hemsida som vi visar.

I det här avsnittet får vi den faktiska bilden att övergå och prepping för texten till övergången. Vi identifierar också att vi vill att bilden ska gå längs X-axeln och inte Y-axeln, så det betyder att vi kommer att ha en skjutdörr typ av effekt.

Nu ska vi ställa in muspekareffekten och få övergången till att börja med den här händelsen.

Som vi kan se här, så gjorde vi vad vi gjorde ovan för bilden. Vi lade helt enkelt in texten efter bilden kvar och gav den en + 0,1 s fördröjning för att se till att det gick smidigt. Och det handlar om det.

Det finns en massa andra sätt att du kan anpassa detta, och definitivt ett ton andra övergångseffekter du kan använda. Kom dock ihåg att om du arbetar med mer avancerade övergångar, använder du dem inte på ett så repetitivt sätt som du vill med något så enkelt som det här. De används bäst för att betona viktiga bilder.

Arbetar med kreativa layouter

Ofta, som webbdesigners, ser vi de överdrivna trenderna som har missbrukats år in och år ut och vill vara en röst för förändring om dem. Men att gå mot kornet kan vara en riskabel övning, speciellt om du inte gör det ordentligt (som en anteckning - jag säger inte att du måste vara kreativ på "rätt sätt" eftersom det inte finns någon "rätt väg" att vara kreativ). Jag nämnde att eftersom jag tycker att vara kreativ, är den självklart det självklart att det inte är bindande eller kreativa normer, och jag skulle faktiskt vilja uppmuntra det, men jag tror också att vi bör vara försiktiga med orsaken till att sådana normer har blivit inkräkta på vår webb utforma teman och vad vi kan göra för att vara innovativa med dem, med det i åtanke.

Unik textjustering

När du arbetar med text på kreativa eller unika sätt (det vill säga inte 12 Arial center-aligned) är det verkligen viktigt att komma ihåg att texten inte är huvudinnehållet på sidan längre. Det har förvandlats till ett stödjande element, om än en viktig.

En fråga att alltid ställa dig själv när du arbetar med text är "Gör det bra med resten av sidan?" Det kan vara intill något portföljarbete, en slumpmässig bild eller kanske bara andra andra kolumner på båda sidor av sidan.

Men oavsett vad den ligger intill eller vinkelrätt mot dig måste du försöka balansera det så gott du kan. Tänk på rutnät och studera nätsystemet där ute om du måste 960 nät system är vad jag skulle rekommendera). Studera där de har placerat rutnätlayouten på sidan, och fråga dig själv varför - ta sedan av om din är lika balanserad som den. Tänk dig att du lägger ditt innehåll längs nätverket själv och försök att tänka på hur det skulle se ut i det fallet - replikera sedan det i CSS.

Creative footers

Kreativa fotbollar kan verkligen lägga till en hel del personlighet på en blogg eller hemsida, och det verkar typ av mot-intuitivt att tänka på det. Oavsett om vi pratar om jQuery-rullning som landar oss i en vacker footer-tema i en "underjordisk" stil, eller bara längst ner på företagets hemsida eller blogg, är det en mycket liten del av en webbplats men en som kan ha en mycket kraftfull inverkan. Åsikterna är indelade i i vilken utsträckning detta är fallet och varför det kan vara. Jag har min egen teori: När vi läser en webbsida börjar vi längst upp och flytta till botten, och det är vid sidan av sidan att vi drar våra slutsatser om vad vi har läst.

När du arbetar med en kreativ footer finns det några saker du vill komma ihåg, och några bra metoder som jag har märkt att användas i de footers som jag älskar mest. För mig är den viktigaste delen av att använda en footer på detta sätt att använda samma färgschema som din webbplats, men med en annan kontrast. Det här är otroligt viktigt, och du kan naturligtvis pumpa kontrasten uppåt eller nedåt på teckensfärgen med hänsyn till kontrast du arbetar med för det övergripande temat på sidfoten i första hand.

Det viktiga att komma ihåg är att du vill ha en fin djup stil för detta avsnitt. Det ger en fin känsla av färdigställande till webbplatsen. När du använder den här tekniken kan du göra fotfoten så lång som du vill, med anledning, eftersom det med kontrastfärgschemat är uppenbart att detta verkligen är en sidfot.

När det gäller innehållet, kan det vara lämpligt att lägga till din logotillustration och bloggnamn, dina sociala nätverk bilder eller länkar, din senaste tweet och till och med en trevlig enkel kontaktform i världen av nyfoten. Det här kan givetvis variera beroende på dina personliga preferenser, men min punkt med att visa alla dessa alternativ är att illustrera utvecklingen från tidigare till nutid i vad som är lämpligt att visa längst ned på en webbplats eller blogg.

jQuery rullning

Detta är ett av mina favorit sätt att göra navigering på en webbplats, och jag tycker också att det är specifikt tillämpligt för navigering av inlägg på en blogg. Det finns några olika sätt att arbeta med jQuery för detta, så här kommer jag att gå över vad som är ett av mina favorit (och enklaste) sätt att göra en smidig rullning och sedan gå igenom vad som händer och hur man implementerar det.

Vad som händer här kan se komplicerat ut, men det är faktiskt ganska enkelt. Vi öppnar en funktion på ".class" i navigeringselementet som vi kommer att klicka på (vi kallar detta ett klick-event). Så den viktigaste delen här är att titla klassen av listan (ul) till "nav". Eller ersätt "nav" i koden med vad du än namngav den klassen. Och det är ganska mycket det för en fungerande jQuery-bläddring, bara kasta den in på din webbplats och länka till minifierad jQuery (föredraget) och du är redo att gå.

Såvitt användningen går med en vertikal rullning så här är den ganska obegränsad. Många människor tycker om att inte behöva rulla ner manuellt, de tycker verkligen om sidan som gör det för dem, och det är också ett utmärkt sätt att flytta från inlägg till inlägg på en webbplats, speciellt om de är stora. Jag brukar använda den för att flytta till olika portföljavsnitt inom mina bloggar eller genom kategorier på webbplatser. Det är också en perfekt teknik om du temaer din webbplats, t.ex. att göra ett dag till natt tema, eller teman för dina kategorier eller bloggämnen.

Jag hoppas att några av dessa tekniker var till hjälp för dig alla när du försökte tillämpa olika designestetik på din blogg. Kom ihåg, använd dem sparsamt och försäkra dig om att du agerar med din bästa bedömning när du använder flashiga effekter. Vi har en skyldighet att skapa ett internet som inte är så fult som vissa aspekter av omvärlden har blivit. Även om det är en stor och överväldigande uppgift, är det en som vi kan uppnå om vi bara tar den en design i taget och en dag i taget. Håll det enkelt, håll det ärligt, håll det riktigt, och lägg alltid passion i vad du gör - som det alltid kommer att skina igenom.

Vilka är dina bästa bloggdesigntips? Vad gör för en riktigt bra bloggdesign? Låt oss veta i kommentarerna!