Grafisk profil del 1: Bildspråk och färger

För att ta fram en genomtänkt design till din hemsida, och kunna kommunicera ditt varumärke enhetligt och professionellt, så behöver du en så kallad "grafisk profil".

En grafisk profil är ett dokument med riktlinjer för hur ett varumärke ska presenteras visuellt. Den innehåller bland annat ett färgschema, en kombination av typsnitt och olika varianter på loggan. Den grafiska profil vi ska skapa nu är väldigt enkel, men du kommer ha stor nytta av den, både när du designar din sajt och när du kommunicerar ditt varumärke till dina kunder.

Vår grafiska profil kommer innehålla:

  • 3-6 bilder

  • 3-4 grundfärger

  • 3 typsnitt

  • En enkel logga

  • En favicon (browser-ikon)

I det här avsnittet ska vi ta itu med de två första bitarna av din profil: bildspråket och färgerna. Men jag ska börja med att introducera dig till ett verktyg som kommer att göra din designprocess mycket enklare. Det heter Canva.

Canva är en onlinetjänst som låter dig skapa grafik direkt i webbläsaren och sedan ladda ner det du skapat. Tänk dig en lightvariant av Photoshop, fast online och med massvis av inbyggda mallar, ikoner och gratisbilder som inspirerar dig och gör det enkelt att komma igång.

Med Canva kommer du kunna skapa snygga headers, loggor och sociala medie-bilder på bråkdelen av den tid det tagit att göra samma sak i t.ex. Photoshop. Och med bråkdelen av kunskapen. Canva är dessutom helt gratis!

Skapa ett bildspråk

Ditt bildspråk, (vilka slags bilder du väljer att använda på din sajt), kommer att agera utgångspunkt för resten av din hemsidas utseende. Vi kommer använda bilder så som en konstnär använder en färgpalett. Det är enklare att börja så än att först välja ut färger ur tomma intet, skapa en logga och designa sajten bara för att sen märka att det inte alls passar ihop med de slags bilder du kommer fylla din hemsida med. Dessutom får du en rejäl skjuts på vägen när du har bilder att basera resten av din design på. Du börjar inte från vitt ark, så att säga.

1. Samla ihop en bildbank för din hemsida.

När du designar din hemsida kommer du behöva ett gäng bilder att använda i sidheaders och övriga delar av dina sidor. Dessa bilder bör vara så högkvalitativa/högupplösta som möjligt, och de bör alla se ut att hänga ihop någorlunda. Det vill säga, de bör likna varandra i ljussättning, färger, miljöer, typ av motiv et.c.

- Gå igenom ditt fotoarkiv och välj ut ett gäng bilder som matchar temat och känslan på din hemsida. Det kan vara bilder från din vardag, från din arbetsprocess, och andra motiv som kommunicerar vem du/ditt företag är.

- Om du säljer produkter så bör du såklart se till att ha många bra bilder på dem.

- Välj minst två bilder som föreställer dig.

Om du har ont om egentagna bilder, eller inte är nöjd med de bilderna du redan har: Leta efter gratisbilder online. Min favoritsida är Unsplash.com. Alla bilder där är gratis att ladda ner och använda på din hemsida, så samla ihop 5-10 stycken så att du har lite att laborera med sen.

2. Gå till www.canva.com och skapa ett gratis konto.

Nu är det dags att skapa själva grafiska profil-dokumentet. Detta ska vi göra i Canva, så gå till deras hemsida och skapa ett konto.

3. Skapa ett nytt dokument.

Klicka på knappen "Create a design" längst upp till vänster och välj en mall att använda. Jag brukar välja "Presentation" eller "A4" för mina grafiska profiler.

Nu kommer du se ett tomt ark i mitten och alla verktyg och funktioner i menyn till vänster. Du får också ett stort antal exempeldesigns från Canva som du kan ta rakt av eller använda som utgångspunkt.

Även om det bara är ett ark/sida vi ser just nu så kan vi alltid skapa nya sidor i samma dokument, liknande hur det fungerar i program som Keynote och Powerpoint. Vi kan också duplicera en befintlig sida, vilket ofta är användbart när man gör olika varianter av samma design.

Vår grafiska profil kommer innehålla flera sidor, och den första sidan kommer vi döpa till "Bildspråk" och fylla med ett urval av bilder som tillsammans skapar ett enhetligt intryck. Så vi börjar med att klicka in på "Text" i vänstermenyn och placera en rubrik (Den största "Add heading"-varianten) på sidan:

Sen vill vi få in våra bilder på sidan, men då måste vi först ladda upp dem till vårt Canva-konto...

4. Ladda upp din bildbank under Uploads

Längst ner i vänstermenyn hittar vi "Uploads". Klicka in där och klicka på knappen "Upload your own images". Ladda upp dina valda bilder.

5. Skapa ett bildkollage

Du kan nu dra och släppa dina uppladdade bilder på sidan, men för att göra det lite enklare för oss kan vi använda en så kallad "grid" - en färdig rutnätsmall för ett bildkollage.

I vänstermenyn, gå till "Elements". Här hittar du bland annat gratis bilder, illustrationer och ikoner du kan använda i dina designs, men också ramar, geometriska figurer och mallar av olika slag.

Vi vill ha ett rutnät att lägga bilder i så vi väljer Grids och klickar på ett rutnät. Jag väljer ett med tre bilder, vilket är lagom många för att etablera en stil och välja färger utifrån:

Sen går jag tillbaka till Uploads där mina bilder ligger och drar och släpper dem i de rutor jag vill ha dem:

I verktygsraden ovanför sidan kan du redigera bilderna ("Filter"), beskära dem ("Crop"), spegelvända dem ("Flip") och öka eller minska avståndet mellan bilderna ("Spacing"). Om du t.ex. vill ändra vilken del av bilden som visas i rutan kan du klicka på "Crop" och sedan ompositionera bilden i rutan:

Testa att kombinera olika bilder i olika konstellationer och se vilken du gillar bäst. Försök få en bra mix av ljust och mörkt, samt olika färger som passar bra ihop.

Välj färger

Nu när vi har hittat vårt bildspråk ska vi använda våra bilder för att ta fram ett färgschema. Det kommer gå till som så att vi plockar vi ut 3-4 färger ur vårt bildkollage.

Hur får vi ut färgkoderna ur bilderna? Googla "pick colors from an image" så kommer du hitta en rad olika sidor där du kan ladda upp en bild och klicka på den för att se färgkoden för det fält du klickat på. Här är två bra sidor:

http://www.ginifab.com/feeds/pms/pms_color_in_imag...

https://imagecolorpicker.com/en

Du börjar då med att spara ner sidan med ditt bildkollage till datorn, så att du kan ladda upp det på någon av dessa sajter. Klicka på knappen "Download" i menyn längst upp till höger och välj filformatet jpg.

Och ladda upp din bild, (här använder jag den här sidan):

Nu är det bara att hovra och klicka på olika ställen i bilden för att se de sexsiffriga färgkoderna. (De som ser ut såhär: #354687 eller såhär: #98D6A3.)

Tips: Ett ännu enklare sätt att plocka färger är att installera ett pipettverktyg i din browser som gör att du kan klicka varsomhelst på en hemsida och få ut färgkoden för det fält du klickade på. Jag har ett som heter ColorZilla för Chrome och det finns säkert motsvarande add-ons för Safari, Firefox eller vilken browser du än använder.

För att kunna avgöra vilka färger vi ska välja behöver vi se dem intill varandra. Därför skapar jag en ny sidan i min grafiska profil och ger den rubriken "Färger". Sen kopierar jag över mitt bildkollage till den nya sidan genom att klicka på bildkollaget och välja "Copy" i menyn uppe till höger. Drar och släpper kopian på den nya sidan:

Sen gör jag ett gäng fält intill bildkollaget där jag både visar och skriver in färgkoden för mina olika färger. För att skapa en enkel ruta eller rektangel går du till Elements i vänstermenyn och väljer Shapes. Klicka på fyrkanten så hamnar det en stor, färgad fyrkant på din sida, vars storlek du kan ändra genom att dra i reglagen på sidorna:

Jag gör om denna fyrkant till en mindre rektangel som jag placerar vit text ovanpå. Sen grupperar jag (markerarr både rektangel och text och klickar på "Group" i menyn uppe till höger), och kopierar upp så många jag vill ha. Så här ser det ut när jag är klar:

Nu är jag redo att lägga in mina färger i de olika fälten och hitta en kombination jag gillar.

Enklast här är förstås att ha en färgpipett-addon installerad i din browser, för då kan du klicka direkt på bilden och mata in färgkoderna i dina olika fält utan att lämna Canva. I annat fall får du hoppa mellan Canva och sidan där du laddat upp ditt bildkollage.

Du byter färg på fälten genom att klicka på dem, klicka på det lilla färgfältet i menyn uppe till vänster och där mata in din färgkod i rutan:

Vilka färger ska vi välja då? Du kommer behöva en mörk färg och en ljus till att börja med. Så leta i de mörkaste delarna och de ljusaste delarna av dina bilder efter färger som kompletterar varandra bra. Välj sedan 1-2 andra färger som passar in i färgschemat. Så här blev mitt färgschema:

Jag valde en mörkblå färg från havet, en rosa från himlen, en grön från näckrosorna och en ljust grå från stenstranden. Jag har sedan skrivit in respektive färgkod i fälten för att enkelt kunna komma åt dem senare.