Stitch

Vad ni får ut av det här

Efter den här guiden har ni en bild av hur er startsida och er produktsida ska se ut, framtagen på en eftermiddag i stället för en månad av tyckande. Ni kan visa den för en rådgivare, en kund eller en samarbetspartner, och ni 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. Ni beskriver en skärm i vanlig text, verktyget ritar upp den, och ni ändrar genom att skriva vad ni 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 ni innan ni börjar

• Ett Google-konto och att ni 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 er, skriva upp sig på en lista. En sida med tre olika mål blir en sida utan mål.
• Er text. Rubrik, en kort beskrivning av produkten, priset om ni satt det, och er kontaktväg. Stitch fyller annars med påhittad text som ser ut som riktig text.
• Två eller tre färger och ett typsnitt som ni 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 ni beskriver det ni vill ha.

Skriv underlaget innan ni ö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 vilka ni är, kontaktuppgifter.
3. Bestäm om ni ritar mobil eller dator först. Nästan alla era 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 ni kan visa och ett utkast fullt av påhittade ord.

Gör ert första utkast

1. Gå till stitch.withgoogle.com och logga in med ert 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 ni får göra. Verktyget visar hur många ni har kvar.
2. Skriv er beskrivning i promptrutan. En prompt är den instruktion ni 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 ni skrev den, och för att färg och känsla sist inte tränger undan innehållet.
3. Ladda upp er handritade skiss om ni 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 ni vilken ändring som gjorde det bättre.
5. Byt ut all påhittad text mot er 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 ni att det funkade

Ni 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 ni säljer och var man klickar för att köpa. All text på sidan är er 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 ni 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 er 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. Ni kan också ta skärmbilder och lägga in dem i Penpot om ni hellre håller er till gratis och öppna verktyg.
4. Ta med utkastet in i bygget. Bygger ni i WordPress är utkastet er 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 ni 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 ni 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

• Ni 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 er egen text. Klistra in riktiga rubriker, riktiga priser och en mening om vilka ni är, och kör om.
• Varje ny version ändrar saker ni redan var nöjda 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: ni 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 er 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 ni faktiskt ska driva den i.

Vad ni 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 ni ska ta emot betalningar. Ska texterna på sidan skrivas om ordentligt först finns Kom igång med Google AI Studio.