Stitch

Vad du får ut av det här

Efter den här guiden har du en bild av hur din startsida och din produktsida ska se ut, framtagen på en eftermiddag i stället för en månad av tyckande. Du kan visa den för en rådgivare, en kund eller en samarbetspartner, och du kan ge den till den i företaget som bygger hemsidan, tillsammans med färdig kod att utgå ifrån.

Stitch är Google Labs verktyg för att göra gränssnitt. Du beskriver en skärm i vanlig text, verktyget ritar upp den, och du ändrar genom att skriva vad du vill ha annorlunda. Ingen förkunskap i design krävs. Det Stitch inte är: en färdig hemsida. Utkastet är utgångspunkten, inte målet.

Det här behöver du innan du börjar

• Ett Google-konto och att du har fyllt 18 år. Stitch är öppet för användare från 18 år i de länder där Gemini finns, och Sverige är ett av dem. Är ingen i företaget 18 än, gör skisserna i Excalidraw och bygg dem sedan i Penpot, som inte har någon sådan gräns.
• Beslut om vad sidan ska få besökaren att göra. Köpa, boka, kontakta dig, skriva upp sig på en lista. En sida med tre olika mål blir en sida utan mål.
• Din text. Rubrik, en kort beskrivning av produkten, priset om du satt det, och din kontaktväg. Stitch fyller annars med påhittad text som ser ut som riktig text.
• Två eller tre färger och ett typsnitt som du redan bestämt, eller viljan att bestämma dem nu.
• En handritad skiss på papper, fotad med mobilen. Frivilligt, men det ger mycket bättre resultat än enbart text.

Tidsåtgång och svårighetsgrad

Det första utkastet tar 20 minuter. Att förfina det tills företaget är överens tar ytterligare en timme, och den timmen går åt till diskussion snarare än till verktyget. Svårighetsgraden är låg att komma igång med och medel att få ett bra resultat, eftersom kvaliteten på det som kommer ut helt följer hur konkret du beskriver det du vill ha.

Skriv underlaget innan du öppnar verktyget

1. Skriv ner vem sidan är till för, i en mening. Inte ”alla”, utan till exempel ”föräldrar i Linköping som ska köpa en present och har 200 kronor att spendera”.
2. Räkna upp vilka block sidan ska innehålla, uppifrån och ner. Till exempel: logotyp och meny, stor bild med rubrik och köpknapp, tre produkter med pris, ett stycke om vem du är, kontaktuppgifter.
3. Bestäm om du ritar mobil eller dator först. Nästan alla dina besökare kommer från mobilen, så börja där och låt datorversionen komma sedan.
4. Samla texten i ett dokument så att den går att klistra in. Det är skillnaden mellan ett utkast du kan visa och ett utkast fullt av påhittade ord.

Gör ditt första utkast

1. Gå till stitch.withgoogle.com och logga in med ditt Google-konto. Verktyget är gratis så länge det ligger kvar som förhandsversion i Google Labs, med ett tak för hur många genereringar du får göra. Verktyget visar hur många du har kvar.
2. Skriv din beskrivning i promptrutan. En prompt är den instruktion du ger verktyget. Var konkret om sidtyp, målgrupp, innehåll och känsla, i den ordningen. Exempel:

   En startsida för mobil för företaget Ljusgården,
   som säljer handgjorda ljusstakar i återvunnen betong.
   
   Uppifrån och ner:
   logotyp och meny, stor produktbild med rubriken
   "Ljus som håller hela vintern" och en köpknapp,
   tre produkter i rad med bild, namn och pris,
   ett stycke om att vi är ett litet företag i Linköping,
   kontaktuppgifter i sidfoten.
   
   Färger: varm grå, off-white, en mörkgrön knappfärg.
   Rundade hörn, mycket luft, inga skuggor.

   Den ordningen fungerar därför att verktyget bygger uppifrån och ner precis som du skrev den, och för att färg och känsla sist inte tränger undan innehållet.
3. Ladda upp din handritade skiss om du gjort en, och be verktyget använda den som utgångspunkt för layouten. Det är ofta snabbare än att beskriva placeringar i ord.
4. Titta på det som kommer tillbaka och ändra en sak i taget. Skriv Gör köpknappen mörkgrön och flytta upp den ovanför produktbilden, inte fem ändringar i samma mening. Med en ändring i taget vet du vilken ändring som gjorde det bättre.
5. Byt ut all påhittad text mot din egen. Klistra in de riktiga rubrikerna och de riktiga priserna. Ett utkast med låtsastext ser färdigt ut och luras därför.
6. Be om produktsidan när startsidan sitter, och be uttryckligen om samma färger, samma typsnitt och samma knapputseende. Två sidor som ser ut som två olika företag är det vanligaste felet här.

Så här vet du att det funkade

Du kan hålla upp skärmen framför någon som inte varit med i arbetet och den personen kan på fem sekunder säga vad du säljer och var man klickar för att köpa. All text på sidan är din egen. Startsidan och produktsidan ser ut att höra ihop. Klarar utkastet det är det redo att visas för fler, och först då är det värt att lägga tid på bygget.

Ta utkastet vidare till en riktig sida

1. Gör en klickbar version av utkastet så att du kan visa hur besökaren rör sig mellan sidorna. Att klicka sig fram säger mer i en monter än en stillbild.
2. Exportera koden när utseendet är klart. Stitch ger dig kod för sidan som den som bygger hemsidan kan utgå ifrån.
3. Kopiera designen till Figma om någon i företaget ska förfina den i ett riktigt designprogram. Du kan också ta skärmbilder och lägga in dem i Penpot om du hellre håller dig till gratis och öppna verktyg.
4. Ta med utkastet in i bygget. Bygger du i WordPress är utkastet din mall: samma ordning på blocken, samma färger, samma rubriker. Det är mycket snabbare än att designa i byggverktyget medan man bygger.
5. Spara utkasten och datumen. Att kunna visa hur designen såg ut i början och hur den ser ut nu är ett av de enklaste sätten att visa en kund eller investerare att du arbetat metodiskt.

Koden som kommer ut är ett utkast, inte en färdig hemsida. Den saknar det som gör en sida användbar på riktigt: säker betalning, hantering av kunduppgifter, och kontroll av att sidan fungerar för den som använder skärmläsare. Lägg heller aldrig upp andra företags logotyper, produktbilder eller texter som underlag. Det du får tillbaka ser då ut som deras sida, och att sälja under någon annans utseende är inte tillåtet, inte ens i ett litet projekt.

Om det går fel

• Du kommer inte in och får ett meddelande om ålder: gränsen är 18 år och den går inte runt. Låt en i företaget som fyllt 18 köra verktyget, eller gör skisserna i Excalidraw och Penpot i stället.
• Utkastet ser generiskt ut och skulle kunna vara vilket företag som helst: beskrivningen saknar din egen text. Klistra in riktiga rubriker, riktiga priser och en mening om vem du är, och kör om.
• Varje ny version ändrar saker du redan var nöjd med: skriv ut vad som ska ligga kvar. En formulering som Behåll layouten och färgerna exakt som de är, ändra bara sidfoten fungerar.
• Sidan ser bra ut på datorn men trång på mobilen: du har designat i fel ordning. Be om mobilversionen först och låt datorversionen byggas utifrån den.
• Genereringarna tar slut mitt i arbetet: taket gäller per konto. Planera de tunga ändringarna i förväg, skriv en genomtänkt beskrivning i stället för att prova dig fram, och låt en annan i företaget ta över på sitt eget konto.
• Koden fungerar inte när någon klistrar in den i hemsidan: koden förutsätter oftast att bilder och typsnitt hämtas från annat håll. Behandla den som en mall för utseendet, och bygg sedan sidan i det verktyg du faktiskt ska driva den i.

Vad du gör härnäst

Utkastet ska bli en sida som går att besöka. Börja med Installera WordPress och fortsätt med WordPress med WooCommerce när du ska ta emot betalningar. Ska texterna på sidan skrivas om ordentligt först finns Kom igång med Google AI Studio.