Grafisk profil del 3: Logga och favicon

Varför ska vi göra en logga, behövs det verkligen? Om du har bråttom och bara vill få upp en enkel sajt så nej, då är en logga inte superviktigt just nu. Då kan det räcka att välja rätt typsnitt för ditt sajtnamn så har du en enkel slags logga.

Men det finns fördelar med att gå ett steg längre och designa en formell logga för ditt varumärke. Du kan visa den upptill på din sajt istället för sajtnamnet, eller så kan du lägga loggan i footern, längst ner på din sida. Du kan också använda din logga i andra sammanhang än på din sajt: t.ex. i sociala medier, presentationer, visitkort eller i din emailsignatur.

Logotyp

Att designa sin egen logga behöver inte vara komplicerat. De loggor jag skapar är ofta superenkla och textbaserade och utifrån dem leker jag fram lite olika varianter. Jag kanske lägger till en enkel symbol eller illustration (det finns jättemånga gratis i Canva), för att få min logga att förmedla lite mer av en stil och känsla. Jag kanske leker med flera slags typsnitt i min logga. Och så kanske jag inkluderar en undertext i loggan som gör den ännu mer beskrivande.

Följande saker tänker jag på när jag designar en logga:

  • Den ska passa bra där jag tänker mig att den ska ligga. (Om jag t.ex. vill ha min logga i en smal navigationsmeny upptill på min sajt så kan jag inte designa en för hög logga. Den måste alltså vara liggande och lite långsmal. Men om jag tänker mig min logga i lite större sammanhang så skulle jag t.ex. kunna designa en rund logga eller bygga ord på höjden.)

  • Den ska kunna fungera mot både ljus och mörk bakgrund. (Därför gör jag alltid minst två varianter av loggan, en med mörk text som passar till ljusa bakgrunder och en med vit text för mörka bakgrunder.)

  • Den ska fungera i olika storlekar. (Kommer loggan synas bra i mobilversionen av min sajt? Om jag använder för snirklig eller liten text så kommer den antagligen inte det.)

Så här ser min designprocess ut för min exempelsajts logga:

1. Jag skapar en ny sida i min grafiska profil och börjar med att experimentera med blandade typsnitt i mitt sajtnamn:

Screen Shot 2018-01-17 at 14.40.02.png

Jag lägger också en färgad fyrkant i underdelen av sidan för att se mina loggor mot en mörk bakgrund, (den mörkaste färgen i mitt färgschema.)

Av dessa två varianter gillar jag den till vänster bäst. Men jag vill leka vidare med loggan lite och kanske hitta några alternativa varianter för andra sammanhang...

2. Hur skulle t.ex. en rund eller staplad logga kunna se ut? Jag testar lite olika möjligheter och använder mig av Shapes för att skapa ramar runt min logga:

Screen Shot 2018-01-17 at 15.01.34.png

Den fyrkantiga loggan till vänster gillar jag, så den behåller jag. Den kommer passar bra i footern, och som sociala medie-grafik.

Jag känner mig nöjd med min två logotypvarianter, men du kan experimentera vidare om du vill. Testa att:

  • Ändra storleken på dina textbitar och arrangera dem på olika sätt.

  • Använda Shapes och Lines för att rama in din text, stryka under ord, et.c.

  • Använda Canvas färdiga Icons och Illustrations (som du kan ändra färg på) och jobba in dem i din logga.

  • Byta färg på ett av dina ord till någon av färgerna i ditt färgschema.

Favicon

Nästa sak vi ska designa är en favicon: du vet den där lilla symbolen som syns bredvid sidtiteln uppe i browserfönstret. En egen favicon är en detalj som genast får din sajt att kännas proffsigare och personligare. Men i nuläget har min exempelsajt Squarespaces lilla gråa kub som favicon:

Screen Shot 2018-01-17 at 15.24.04.png

Det ska vi ändra på!

Med din favicon ska du tänka väldigt minimalistiskt. Ikonen kommer vara pytteliten, bara en eller max två bokstäver kommer gå att urskilja, och bara de allra enklaste former.

Mina favicons brukar oftast bestå av en färgad bakgrund i form av en cirkel, med första bokstaven i sajtnamnet på. Alternativt bara bokstaven i en färg som syns mot den transparenta bakgrunden. Om jag hade använd en ikon i min logga så kan det hända att den fungerat för sig själv som favicon också.

För min exempelsajt skapar jag fyra varianter:

Screen Shot 2018-01-17 at 15.33.32.png

Alla dessa skulle kunna fungera i pytteskala. Jag gör alltid några olika alternativ att testa att ladda upp, för det är inte förrän ikonen ligger i browserfönstret som man verkligen kan avgöra om den funkar eller inte.

Spara ner dina filer och testa på hemsidan

När du känner dig nöjd med dina loggor och din favicon är det dags att ladda ner dem från Canva och testa dem på din sajt.

Till att börja med behöver du återskapa dina loggor och favicons i separata Canva-dokument, så att du kan spara ner dem var och en för sig. Gå därför tillbaka till hemskärmen i Canva och klicka på "Create a design"-knappen. Istället för att klicka på någon av de föreslagna formaten kan du klicka på knappen ute till höger för "Use custom dimensions", och där skriva in exakt hur bred och hög din grafik ska vara.

Se till att dina dokument för loggor är åtminstone 500 pixlar breda, (jag väljer t.ex. 600px x 200px för min liggande textlogga och 500px x 500px för min fyrkantiga). För faviconen kan du välja 50px x 50px för ditt dokument.

Tips: I din grafiska profil, markera alla komponenter i din logga, klicka på "Group" i menyn uppe till höger och kopiera sen gruppen (Cmd + C på Mac. Ctrl + C på PC.) Nu kommer du kunna använda Cmd/Ctrl + V för att klistra in loggan i ditt nya dokument.

Gör alltid en vit variant av dina loggor, utifall att du vill placera dem mot en mörk bakgrund. Du kan duplicera sidan med din logga för att få fram en ny sida med en kopia, sen byter du färg på kopian till vit. När du sen laddar ner filen skapas en komprimerad fil med alla dina varianter. Likadant kan du göra med dina favicon-varianter:

Screen Shot 2018-01-17 at 15.53.40.png

När du sparar ner dina filer ska du tänka på att välja filformatet PNG och kryssa i att bakgrunden ska vara transparent:

Detta gör att du kan lägga bilderna ovanpå vilken bakgrund som helst, och bakgrunden kommer att synas mellan dina bokstäver. I annat fall kommer det ligga en vit ruta bakom texten och det kommer se knasigt ut på alla bakgrunder som inte är helt vita.

Jag sparar ner mina filer. Sen går jag till Design och klickar på Logo & Title. Här laddar jag upp min logga under "Logo image", och min favicon under "Browser icon":

Sparar. Sen uppdaterar jag sidan för att se resultatet...

Tadaa! Favicon på plats:

Screen Shot 2018-01-17 at 15.57.20.png

Och loggan:

Loggan är på tok för liten, men det ska vi alldeles strax fixa. Nästa destination är nämligen Style Editorn, där vi ska designa resten av vår sajt!