Tips för en finare blogg

Att ha en fin blogg är verkligen en fördel då det är designen som ger det första intrycket när man besöker en ny blogg och i många fall är designen avgörande för mig om jag besöker bloggen igen. Har personen en seriöst webbdesign där man enkelt kan läsa inlägg, navigera och en bra helhet återkommer jag gärna. I det här inlägget tänkte jag dela min mig av några tips för en "finare blogg". Vad som är fint är såklart olika från person till person och jag har till stor del utgått från mina åsikter samt de större bloggarnas stilar, då det verkar locka.

  

Enkel navigering

Enkel och snygg navigering är smidigt. Du vill att dina läsare ska klicka runt i dina olika kategorier och arkiv och på så sätt fastna för dina inlägg. En sidomeny är inget måste, jag tycker att en horisontell funkar minst lika bra om man har med det viktigaste.

 

Enkelt och stilrent

Är din favoritfärg limegrön behöver du kanske inte ha den färgen på texten. Tänk enkelt och lyft fram det du vill i din blogg. Jag vill ha fokus på bilder och text, men mest bilderna. Därför har jag hyfsat stora bilder men en enkel bakgrund som passar bra till det mesta. Hade jag haft en bild jag själv fotat som bakgrund hade det förstört intrycket av bilderna i inlägget.

 

Återkommande färger

Visst, färger är fint men att blanda alla dina 7 olika favoritfärger kan bli aningen rörigt. Välj istället ut några få som du utgår ifrån. Jag har ofta kring två neutrala som jag använder som bakgrund och en "färg" som används på speciella ställen. Att göra en color board/color palette/färgschema är ett stort tips som underlättar väldigt mycket. Väljer du ut de färger du vill utgå ifrån i början blir det lättare senare när du ska koda.

 
 
Såhär ser mitt nuvarande färgschema ut. Min design går i grått med blå detaljer. Färgen längst till vänster återfinns på text och i footern längst ner. Färg 2 är wrappern. Den blå finns på länkar och detaljer. Färg 4 är bakgrunden och färg 5 finns i menyn.

 

Texten och typsnitt

En blogg utgörs till stor del av text och det är väldigt viktigt att den är lättläst. Jag vet inte hur många gånger jag hamnat på bloggar där texten är jättelite, superstor eller en färg som är snarlik som dens bakgrund. Det är aningen jobbigt att läsa om man varje gång måste zooma in eller ut. Att välja ett lättläst typsnitt är också smart. Använd av kring två typsnitt i din blogg. Kanske en i inläggen och en på rubriker. Detsamma gäller header, blanda inte 7 olika typsnitt utan håll dig kring två.

 

Mobilanpassa din blogg

Att ha en responsiv webbdesign är väldigt bra, för då kommer din blogg att vara fin och läsbar i vilken device dina läsare än använder. Nu för tiden läser vi inte bara bloggar från datorer, utan även från surfplattor och mobiler. Jag gjorde nyligen ett inlägg på hur man gör samt mina bästa tips, LÄNK.

 

Tänk återkommande

Återkommande bredd på bilden, återkommande färger, återkommande typsnitt, återkommande avstånd. Allt blir med enhetligt och smälter ihop om saker och ting återkommer. Det blir som en röd tråd och betydligt behagligare gör ögat att kolla på.

 

Låt designen berätta vad du bloggar om

Det första man ser när man kommer in på en blogg är headern så varför inte låta den visa vad du bloggar om och vem du är. Driver du en mat eller bakblogg kanske en bild på mat eller dig i köket är passande. Bloggar du om hästar så är en bild på dig på en hästrygg ett bra tips. Jag som driver en personlig/vardagsblogg tänker att då den handlar om mig är en bild på mig aningen passande att ha som header. 

 

Behöver du lite hjälp med din design? jag gör designer till andra och mer info om det hittar du här.

Mobilanpassa din blogg.se

När jag för första gången skulle testa att mobilanpassa min sida så tyckte jag det var aningen svårt. Jag var inte van med hur man skulle tänka men när jag väl kom in i det så var det inte längre några problem alls. I det här inlägget tänkte jag visa hur du gör din nuvarande blogg responsiv med Media Queries samt dela med mig av några av mina bästa tips.
 
Anledningen till att ha en responsiv blogg eller hemsida är att tekniken har förändrats och att vi idag inte endast surfar med datorer. Du vill ju att dina inlägg ska vara läsabara i alla de olika format det finns som dator, surfplatta och mobil. 
 
Steg ett - Koden 
 
Såhär ser den ut och den lägger du i din stilmall, det är alltså en CSS kod som sköter allt. Mellan klamrarna där det står "kod" lägger du in det som ska ändras. Vill du att bakgrunden ska vara rosa när man besöka din hemsida via en mobil så kopierar du bodykoden du har längre upp i din stilmall och ändrar bakgrundsfärgen.
body {
background-color: pink;
}
I steg tre går jag igenom några av de sakerna du behöver ändra för att få din webbdesign anpassade för en mobil.
 

Steg två - Breakpoints.
Om man vill ha en anpassning för mobil och en för surplattor, hur gör man då? Det är då breakpoints kommer in i bilden och i kodsnutten längre upp ser du att det står 767px. Det är för skärmar upp till 767px och som jag har förstått så är ofta en surfplatts 768px bred eller bredare. Vill du göra en anpassning för en ipad eller annan surfplatta skriver du etc "@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)" istället. Du kan ha flera breakpoints och du lägger till dom genom att kopiera koden här ovan och ändra storleken på max-width. Vill du veta vilken storlek som du behöver för just den skärm du söker så är det bara att googla. Det du skriver inom koden med "max-width: 767px" kommer endast att ändras för skärmar mindre än 767px, det kommer inte att påverka det som syns i en dator.
 
 
Steg tre - Tänk i procent, inte pixlar
Min bloggdesign som syns i en dator är gjort i måttet pixlar. Mina inlägg är 900px breda för att mina bilder som är 900px ska synas. Min meny är 250px bred och där emellan finns ett mellanrum som avgörs av hur bred min wrapper är. Är min wrapper 1170px bred kommer mellanrummet vara 30px (1180-900-250=30) (egentligen är mellanrummet mindre för det finns space på sidorna men ni fattar tänket). Skulle du visa exakt samma koder i en mobil skulle du behöva zooma in för att ens kunna läsa inläggen, allt skulle bli smått och ha konstiga proportioner. Det är då man ska använda sig av procent, för du kan inte veta om personen som besöker din sida ha en skärm som är 400px bred eller 1234px bred.
 
 
Det var att tänka i procent som var aningen klurigt i början men det är egentligen betydligt lättare än pixlar. Jag brukar börja efter det större sakerna, som wrapper, content (inläggen) och side (menyn). Wrappern som tidigare var 900px i en dator vill jag nu ska täcka hela skärmen i en mobil. Då lägger jag till koden inom klamrarna i @media koden.
wrapper {
max-width: 100%;
}
Content som ligger i wrappern vill jag ska vara väldigt stor den med men jag vill ändå ha lite space på sidorna så man kan se bakgrunden. Då lägger jag till width: 96% för content. Det är väldigt vanligt att flytta ner sin sidor meny under inläggen när man anpassar sin mobil för mindre skärmar. Vill du ha din meny lika bred som dina inlägg lägger du till samma bredd. Nu borde det se ut något såhär:
 
 
Vill du anpassa din sida för en surfplatta kan du använda samma kod som ovan men du byter ut 767px mot önskat antal.
 
Tips
- Kopiera koderna från längre upp i stilmallen och sedan ändra det som behöver ändras och radera det som inte behövs i din mobilversion.
- Har du angett dina font-storleker i px kan det se aningen tokigt ut i mobilen. Att använda enheten em är många gånger smartare.
- Händer det att dina bilder blir för stora? Sök reda på vad dina bilder har för tagg, troligen img. Lägg in koden img { max-width: 100%; } mellan klamrarna i för att bilderna max ska vara lika breda som dina inlägg, även om du laddat upp dom i 900px för att passa i en dator.
- Förhandsgrandska din webbsida som en mobil och surfplatta i datorn. Använder du Chorme klickar du på dom tre prickarna längst upp till höger -> fler verktyg -> verktyg för utvecklare. Till vänster om elements (längst upp ovan koden) finns en icon på en mobil, klicka på den och sedan kan du välja vilken device du vill se. Använder du Safari klicka du utvecklare -> använd responsiv design.
 
Inlägget kanske blev aningen rörigt men det finns så otroligt många möjligheter med media queries. Jag hoppas att du fått en inblick i hur det funkar. Har du frågor är det bara att lämna en kommentar!

Centrera ALLA bilder i inläggen blogg.se

Jag insåg precis att det var över ett år sedan jag postade ett bloggdesign-tips (förutom tipset jag postade förra veckan)! Jag som tycker det är så kul att koda och ofta får frågor kring olika saker borde verkligen göra det oftare. Idag tänkte jag tipsa om hur du centrerar ALLA dina bilder i inläggen. Tex om du tidigare laddat upp dina bilder i 700px och ändrat i din design så att du i fortsättningen kommer ladda upp dom i 800px, då kommer alla äldre bilder vara för små och hamna till vänster. Personligen föredrar jag dom centrerade och det görs hur enkelt som helst.
 
Klista in koden här nedan i din Stilmall, kanske under klassen entrybody (sök: ctrl +f). 
 
Margin: auto; gör att ALLA bilder i dina inlägg kommer att hamna i mitten.
 

Annat typsnitt (från Google Font) blogg.se

Att ha ett snyggt och stilrent typsnitt är viktigt när det kommer till bloggdesign, man vill ju att läsarna ska kunna läsa inläggen. Kanske har du inte hittat någon av de vanliga så som Arial, Times New Roman eller Helvetica och istället vill ha ett lite annorlunda till dina rubriker eller liknade. Då rekommenderar jag dig att använda google fonts. För det räcker nämligen inte att DU laddar ner ett typsnitt i din dator, för då är det endast de med samma typsnitt i sin dator som kan se det. För att alla dina bloggläsare ska kunna se dina typsnitt kan du göra såhär:
 
1. Gå in på fonts.google.com och sök efter det perfekta typsnittet
 
 
2. När du hittat ett typsnitt du gillar: Klicka på pluset som är inringat och sedan där det står "Family Selected".
 
 
3. Kopiera koden som står under Standard (<link href="https......) och klistra in den i din kodmall ovanför </head>.
 
 
4. Kopiera koden som står under Specify in CSS (font-family...) och klistra in den vars i stilmallen du vill ha typsnittet. Är det till rubriker på inläggen kan det vara under h3, är det typsnittet i inläggen kolla under entrybody.
 
Hände du inte riktigt med får du gärna lämna en kommentar!

Hur jag redigerar i photoshop

 
Det händer då och då att jag får frågor om hur jag redigerar mina bilder som jag postar här på bloggen. Ni som själva redigerar lite smått förstår att det kan vara lite svårt att beskriva. Visst, det går, men jag kände att det var enklare att göra en liten video på det där jag visar en bild som ni sett på bloggen. 
 
Har du en sekund över skulle jag bli såså glad om du ville nominera mig till Blogg.se-priset (såklart om du tycker jag förtjänar det). Det gör du HÄR.

Popup fönster

Om du klickar där det står "Om mig" i min meny öppnas ett nytt fönster med bilder och information. I det här inlägget har jag tänkt förklara hur jag gjorde själva popup fönstret. Det är egentligen väldigt enkelt.
 
 
1. Skapa en bild i ex photoshop med det du vill ha i ditt popup fönster. Jag har som sagt information om mig, du kanske vill ha något helt annat. Ladda sedan upp bilden och kopiera url-adressen.
 
2. Kopiera koden i rutan här under och klistar in den ovanför </head> i din kodmall på alla sidor där du vill ha popupen.
 
 
3. Där det står "http://adressentilldinbild.se" byter du ut mot din kod från bilden du nyss laddade upp. Du kan även ändra storlek genom att ändra siffrorna som står vid width och height.
 
4. Koden här under klistarar du in där du vill ha länken. "Din text" kan du byta ut mot det du vill ska stå på länken innan och koden går att placeras ex i din meny.
 

Icon bredvid bloggadressen "favicon"

Du kanske har sett att olika sidor, bloggar, företag osv har en lite icon bredvid sidan adress? Det kallas favicon och är väldigt enkelt att lägga till på sin egna blogg för en proffsig touch.
Jag har för tillfället en cirkel där det står AL. Så i det här inlägget har jag tänkt visa hur du gör för din blogg.se blogg.
 
Först behöver du en bild eller en icon. Antingen gör du en egen, exempel 30x30px stor. Annars finns det mängder om du googlar pixel, icon, favicon eller något sånt. Du laddar upp den på din blogg eller annan sida för att få fram url-koden.
Koden här under kopierar du och klistrar in på din blogg ovanför </head> i din kodmall (alla sidorna). 
 
Där det står "din bild" klistar du in adressen till din bild. Super enkelt!

Hur jag gör mina bloggdesigner

Efter hyffsat efterfrågat inlägg är hur jag gör mina bloggdesigner. För er som har missat det så gör jag mina egna designer och även designer för andra, mer info här. I det här inlägget har jag tänkt gå igenom tre steg hur jag gör. Ni kanske inte blir så mycket klokare men ni kanske förstår hur jag tänker och gör.
 
Det första jag gör när jag ska göra en design är att skissa den, för hand. Jag gör en ruta som ska föreställa en skärm sen ritar jag in vart inläggen, menyn och headern ska vara. Om det ska vara någon yttligare meny, om det ska vara en wrapper osv. Sedan kan jag även rita en sepparat bild för menyns upplägg. Från bilden drar jag sedan pilar eller skriver små kommentarer bredvid. Ex att bakgrunden ska vara #c0c0c0, 250px bred meny, rubrik i typsnitt blabla, skugga runt wrapper osvosv. Det är inte alltid det blir som jag tänkt men jag har iallafall något att utgå ifrån. 
 
Sedan öppnar jag photoshop och en vit bild. Där målar jag olika färger som designen skulle kunna gå i. Jag har oftast 2-3 färger (förutom vitt och svart som min bakgrund i menyn/inläggen och text är). Ofta googla jag colour board + spring/autumn/blog/pink beronde på vad jag söker för färger. Sedan klickar jag ut de färger jag gillar och ser då tydligt vilka som passar ihop. Här under är två av mina senaste colour boards, höst15 och vår16.
 
Jag utgår oftast från min senaste design när jag gör en egen till min egna blogg. När jag gör till andra har jag färdiga mallar, jag väljer då den som passar kundens önskemål bäst. När planeringen är klar går jag vidare men att bygga själv grunden. Jag flyttar om i kodmallen (html) för att få det att se ut som jag vill. Flyttar saker upp och ner i menyn, lägger till nya menyer. Jag ändrar mått och de lite större sakerna i stilmallen (css) för att få grunden att se bra ut. 
 
Sista steget som är mitt favorit steg är att ändra så designen blir "fin". Ändra färger, bakgrund, header, bilder, typsnitt osv för att ge designen sitt utseende. Det är ibland det steget som tar längst tid, har jag ingen header eller bakgrund jag gillar så kan det ta ett tag att få ihop en bra. Ibland kan färgerna krångla till det här, att hitta en bra färg om det inte blev som jag tänkt från början.
 
Ett stort tips till er som gör era egna designer är att göra den på en test blogg, inte på den riktiga där ni bloggar. Jag gör väldigt sällan nu för tiden klart en design på en dag och det är inte så kul att lämna designen halvt kaos fram till nästa gång jag har tid att koda på den.
Hoppas att inlägget uppskattas och har du frågor är det bara att fråga!

Hur jag redigerade

Ett efterfrågat inlägg är hur jag redigerar. Jag brukar inte redigera så mycket, men litegran bara för att piffa upp bilden lite innan jag lägger upp den på bloggen. Här ovan ser ni före och efter och nu har jag tänkt visa lite hur jag har gjort. Oftast ser redigeringen något liknande som den jag har gjort på den här bilden.
 
Jag började med att beskära ner bilden lite innan jag la på ett kurvlager. Just till den här bilden valde jag att börja min kurva sådär. Jag använder för det mesta en S-kurva men får testa mig fram beroende på hur bilden ser ut.    //    Sedan ökade jag kontrasten och intensiteten.
 
Lite mer lyster för att framhäva färgerna    //   Jag brukar ofta ändra färgbalasen lite, lite mer cyan, grön och blå för att få en kallare ton i bilden.
 
Jag "målade" lite skräpa på bilden med hjälp av skärpaverktyget och minskade bilden till 800px innan jag sparade den i PNG för att sedan ladda upp den på bloggen. Att minska bilden till samma storlek som du laddar upp den på bloggen tycker jag gör stor skillad på kvaliten.

Spotify musikspelar blogg.se

Att lägga in en spotifyspelare på sin blogg är väldigt enkelt. När jag gör det går jag inte på den här sidan. Där står det även beskrivet väldigt bra med bilder hur du ska göra.
Du kopierar koden från spotify, klistar in den på sidan, ändrar storlek och kopierar den färdiga koden som ska klistras in i ett inlägg.
Om jag vill ha tre rutor i rad sätter jag min width på 230px, då min content är 700px bred. Men det ändrar du självklart efter hur du vill ha det och hur det ska passa på just din blogg. 
 

Photoshop tips - action

Här kommer ett litet photoshop tips då jag har insätt att den kategorien är lite tom.
Actions eller funktionsmakron. En av mina favorit funktioner i photoshop. Vad gör en action? Det är som "är en förinspelad serie av kommandon i Photoshop". Tycker det är himla smidigt och går fort. Man kan ladda ner färdiga eller skapa egna. Och i det här inlägget tänker jag visa hur jag laddar ner. 
 
1. Jag börjar med att hitta en action att ladda ner. Exempelvis från deviantart.com eller googla. 
2. Öppna sedan photoshop och action/funktionsmakro menyn (1). Om du inte har den öppen eller inte använt den tidigare hittar du åt den under Fönster/Window - Funktionsmakron/Actions. 
2. För att öppna din action i photoshop klickar du på den rullgardninsmenyn (2) och välj Load actions eller Läs in makron. Du väljer den action du vill ha och poff så har du det i till PS.
3. För att använda din action klickar du bara på play knappen (3) så är det klart. Värderna kan ändras för att passa just den bilden du vill redigera. Men här under ser ni för och efter bilder med bara några klicka.
 

Skapa en ruta med text/koder

Jag ha fått ett gäng frågor hur jag gör för att få en ruta där jag skriver koder. Det är super enkelt.
 
 
 
1. Skriv ett inlägg, markera där du vill ha rutan genom att skriva ex HEEEJ
2. När du är klar med ditt inlägg klickar du "ändra redigerare" (längst ner till höger)
3. Där det står HEEEJ klistarar du in koden som står här under.
4. Där det står "DIN TEXT" skriver du din text som ska stå i rutan.
 
<textarea readonly=”readonly” onclick=”this.select();” onfocus=”this.select();” wrap=”soft” cols=”40″ rows=”1″>DIN TEXT</textarea> 
 
Hoppas ni hängde med, annars är det bara att slänga iväg en kommentar.

Bakgrunds tips

Kanske nästan den svåraste delen engligt mig när det kommer till bloggdesign i bakgrunden! Det är ofta där jag brukar fastna när jag bestämmt mig för hur designen ska se ut. 
Jag gör oftaste mina egna i photoshop, men om man inte kan/vill/orkar så finns det ju mängder av gratis bakgrund man får använda. Jag har tänkt länka några av mina favorit sidor så kanske ni får lite tips.
 
 
Här är mina 9 senaste bakgrunder jag har gjort själv!
 
Hur sätta man in en bakgrund på sin blogg? Du hittar ett inlägg här

Egen bakgrund blogg.se

Att lägga in en egen bakgrund kanske är något av det enklaste man kan göra i sin blogg design, och det gör stor skillnad. Men hur gör man då?
 
Sök upp stycket (ganska högt upp):
body {
  background: #fff; url(http://RTYFHJCGVHBJ);
}
 
Det är "url(http://RTYFHJCGVHBJ)" man ändrar. För att få en bild som bakgrund kopierar man bildens URL (hur får man bildens URL [länk]) och klistrar in koden mellan parantesen. 
Har du ingen url( ) kan du bara lägga till den i din kod. Se till att du inte tar bort några tecken.
 
 

Mina favorittypsnitt #2

En uppdaterad verson på min favoritttypsnitt. Den första videon hittar du här och en video på hur man laddar ner typsnitt (pc) har jag gjort en video för längesen här.

Skugga runt din blogg

Super lätt och blir verkligen snyggt! Man kan fixa skugga med hjälp av bilden, men personligen tycker jag att det är lättare med en kod.
Kopiera koden i rutan här nedan och klistra in den i din stilmall beroende på vart du vill ha skugga. Ex runt menyn#side ) inläggen#content ) eller runt hela bloggen ( #wrapper )
 
 
Där det står #888; ändrar du färgen på din skugga. Om du vill ha ex röd skriver du #ff0000;
 
Hoppas att du förstod (:

Photoshoptips - Gör din egna vattenstämpel

Att göra sin egna vattenstämpel är super lätt, här kommer ett enkelt photoshop tips.
 
Öppna en ny bild maybe 1000x200px med genomskinlig bakgrund. Arkiv > Nytt (File > New)
Skriv en text med svart färg. Tex ditt namn, bloggnamn eller vad du nu vill ska stå på stämpel. 
Klicka Redigera > Definera Penselförinställningar (Edit > define brush preset)
Döp din pensel
Klart
 
När du vill använda din pensel väljer du brush verktyget (klicka på tangenten "B") och välj din pensel.

Ett tips:
- Öppna bilden du vill stämpla
- Gör ett nytt lager och markera det nya lagret
- Välj stämpel verktyget och din stämpel
- Välj svart färg och ändra storleken & stämpla
- Sen efteråt kan du ändra opaciteten på lagret. Som du ser på min bild är texten ganska genomskinlig.

Bra kvalité

Jag får ofta frågor hur jag gör för att få bra kvalité på bilderna när jag laddar upp dom på blogg.se. Här kommer ett litet tips ni kan tänka på:
 
Ändra storleken på bilden i ditt redigeringsprogram innan du laddar upp bilden på bloggen. När jag fotar bilder med min kamera är dom ungefär 3000-5000 px bred. Men min blogg är bara 700px bred. Då brukar jag minska bildens bred till 700px i photoshop innan jag sparar den.
 
random bild från arkivet

Snö på bloggen

Här kommer ett super enkelt design tips.
 
Kopiera koden i rutan här under och klista in den ovanför <head> i alla kodmallar du vill ha snö i.
 
 
Sen är det bara att ändra värderna i koden. Vad det är du ändrar står bredvid, tex hur mycket det ska snö, hur stora, hur fort osv. Testa runt tills du är nöjd.
 
Men om du vill ha en annan färg på din snö, eller att det ska falla ner något annat ändrar du det i där här stycket som du hittar ungefär i mitten av koden:
 
document.write("<div id='Obj" + i + "' style='position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#fff; font-weight:normal; font-family:Verdana;   (klicka f5 om du inte hittar det och skriva in en bit av koden)
 
För att ändra färg:
Ändra color:#fff; till önskad färg, ex color:#f00000; för röd färg
 
För att ändra vad som faller ner:
ändra det som står mellan >< i den här raden  font-size:"+StarSize[i]+"pt'>•</div> till valfri symbol, ex ♣Ω ♥ ♦ ☆ ♫ * ¤ •∞◊↓

Photoshop tips - text effekter

Glitter penslar finns att ladda ner på brusheezy.com
 
En snabb tutorial på hur man ändrar texten i photoshop. Förstår du inte eller har frågor är det bara att kommentera! Vill ni ha fler photoshop tips? bara att säga till.

Välkommen till min blogg! Jag heter Alice, är 20 år (född 1998), bor i Norrland och jag har sedan 2011 drivit den här bloggen där jag skriver om mitt liv som innebär vardag, bilder, tankar, tips, kläder, skönhet, resor och mycket mer. Är du nyfiken på att veta mer om du mig kan du läsa mer om lilla jag HÄR.


För kontakt, samarbete eller liknande nås jag på blogg.alicelindstrom@hotmail.com


  • Läsvärda inlägg





  • follow me @alicelindstroom



    bloglovin