Squarespace-skolan del 3: Designa din sajt

Squarespace-skolan Designa din sajt i Style Editor

I förra delen av Squarespace-skolan handlade det om hur man strukturerar upp sin sajt och skapar sidor och menyer. Nu ska vi ta itu med designen av vår sajt, med hjälp av Style Editorn. Det är här du gör alla utseenderelaterade inställningar för din blogg, så som att ladda upp en logga och favicon, välja typsnitt och färger och fixa till avstånd och utrymmen på din sajt.

Skillnaden mellan att designa en sajt i Squarespace jämfört med t.ex. Wordpress är att när du tidigare varit begränsad till endast de saker som mall-skaparna tyckt att du ska få ändra, eller behövt sitta och gräva bland koden i stilmallarna och kämpa fram en personlig design, så låter Squarespace dig ändra på nästan allt du ser.

Templatet du valt agerar utgångspunkt, och de inställningar du ser i Style Editor, (som du hittar genom att gå in på Design i huvudmenyn och sen in på Style Editor), varierar lite beroende på vilket template du använder och vilken del av din sajt du tittar på. Ibland tillkommer designreglage för mallspecifika element och funktioner, men du kan alltid ändra färger, typsnitt, avstånd, bredder, et.c.

Squarespace designinställningar Style Editor

Som du kommer se när du själv börjar fixa med inställningarna i Style Editor så syns det direkt hur dina ändringar påverkar sajtens utseende. Du kan till och med klicka direkt på de element du vill ändra och så kommer bara de relevanta inställningarna upp i vänstermenyn. Det är tack vare detta som det går så mycket snabbare att designa en hemsida i Squarespace. Du behöver inte gissa dig fram, utan kommer snabbt åt rätt reglage och ser hur designen blir.

Var börjar vi då? Jag rekommenderar en lugn och metodisk genomgång av designen i följande ordning:

  1. Header
  2. Navigation
  3. Footer
  4. Övrigt (layout, avstånd och storlekar)

Tips: Se till så att du har dina viktigaste sidor, samt ett gäng blogginlägg, publicerade innan du sätter igång, så att du har något att designa. Vissa inställningar i Style Editor blir nämligen inte synliga om du inte är på en sida där ett sånt elementet finns, t.ex. en knapp, ett formulär eller en rubrik.

Designa header

Jag gillar att börja med den aspekt av en sajt som står för majoriteten av det första intrycket, nämligen headern.

Headers och headerinställningar ser olika ut för olika templates. Här är några saker du kan tänka på när du designar dem...

Checklista:

  • Om ditt template har stöd för bildheaders: testa olika bilder på dina sidor.
  • Om du kan: reglera headerhöjden.
  • Byt färg eller transparens på hinnan som ligger över dina headerbilder ("Banner overlay color".)
  • Byt storlek, färg och typsnitt på rubriker och texter i dina headers.
  • Designa eventuella knappar i headern.

Designa navigationen

I många templates är navigationsmenyn belägen högst upp på sidan, men i andra templates kan den ligga under headerbilden eller i form av en ikon som man får klicka på för att få fram menyn. I många templates går det också att ändra plats eller utseende på navigationsmenyn.

Checklista:

  • Reglera höjden på din navigationsmeny.
  • Reglera marginaler och avstånd mellan knappar i menyn.
  • Designa ditt sajtnamn eller storleken på din logga.
  • Byt färg på menyn eller testa att göra den transparent mot en ev. bildbakgrund. (Tänk dock på att knapparnas texter ska synas ordentligt mot bakgrunden.)
  • Välj typsnitt och storlek på texten i menyknapparna.

Designa footer

Nästa fasta avdelning på alla våra sidor är footern, även kallad "sidfot". Innan vi kan designa footern behöver vi fylla den med innehåll. Vad har man i en footer, undrar du? Tja, det varierar. Några av de vanligaste komponenterna är:

  • En extra navigationsmeny (som länkar till de viktigaste sidorna)
  • En logga
  • En kort presentationstext
  • Sociala medie-länkar (Du kan använda blocket "Social links" för detta.)
  • Copyright-text

Dessa saker lägger du in på sajten från Pages-menyn, den sida vi befann oss på i förra delen av Squarespace-skolan. Footern är ett fält som du redigerar på samma sätt som en vanlig sida, genom att hovra över den och klicka "Edit".

På en ny Squarespacesajt ligger troligtvis redan en text i footern som säger "Powered by Squarespace" i footern. Ett förslag är att ta bort den och ersätta med en egen copyright-text och logga. Du kan också skapa en egen extrameny i form av en centrerad text länkad till dina olika sidor:

Squarespace designa footer

Den största delen av footer-arbetet är nu över. Det brukar inte finns så många designinställnignar i Style Editor för den här delen av sajten. Men några saker du kan göra...

Checklista:

  • Byta bakgrundsfärg på din footer, och i vissa fall även din "pre-footer" (fältet ovanför footern.
  • Byta färg på texten i din footer.
  • Reglera avstånd och marginaler i footern.

Övriga designinställningar

Vad mer kan man tänkas vilja ändra i sin design? Kom ihåg att du alltid kan klicka på "Show all" i Style Editor-menyn för att se precis alla inställningar och gå igenom dem i tur och ordning. Men du kan bara styla det du ser på den sidan du är, så för att komma åt allting behöver du navigera runt på din sajts alla sidor och vyer.

Checklista:

  • Text och rubriker
  • Länkar
  • Knappar
  • Formulär eller nyhetsbrevsboxar
  • Citat
  • Bildgallerier
  • Bloggstartsidan (som visar ditt bloggflöde) och blogginläggssidan (som visar ett enskilt blogginlägg)
  • Shopsidan och produktsidan (om du har såna)

 

Slutligen bör du alltid ta en titt på mobilversionen av din sajt. Detta är enkelt i Squarespace, du klickar bara ner den (förvisso knappt synliga) menyn i toppen av sidan och klickar på symbolerna för surfplatta respektive mobil...

Squarespace responsiv mobilsajt mobilvy

Och vips så ser du din sajt precis så som den ser ut på en mobilskärm.

Här kan du i många templates hitta ytterligare inställningar specifika för mobilversionen, t.ex. hur menyn ska se ut.

Tanken från Squarespaces håll är att du inte tänka för mycket på hur din sajt ser ut i andra skärmstorlekar, allting skalas om automatiskt. Men det är alltid bra att kasta ett öga på det, så att inget ser knasigt ut eller fungerar dåligt.

 

I min Squarespace-kurs går jag även in på vad som utgör en bra webbdesign, hur du hittar och planerar din personliga stil i form av en grafisk profil, hur du designar loggor för din hemsida och hur du gör med avancerade designinställningar. Om du behöver mer hjälp med din hemsidedesign rekommenderar jag att du kikar på kursen. =)


Bygg din egen hemsida med min webbkurs!

Webbkurs Squarespace mockup.png

Behöver du en ny hemsida men vill undvika att anlita en webbdesigner? 

Gör det själv, med min nya webbkurs: "Bygg din egen hemsida". I den lär du dig allt du behöver veta för att designa, bygga och lansera en komplett hemsida med blogg och webbutik, på plattformen Squarespace. Inga teknik- eller designkunskaper krävs!