Bygg strukturen

Vad du bygger

Du skapar grundstrukturen för din företagskunds nya hemsida i AI-verktyget Lovable. Du bygger en komplett, mobilanpassad startsida fördelad på de fem viktigaste sektionerna som varje lokal småföretagare behöver för att förvandla besökare till kunder.

Innan du börjar

• Ett registrerat konto på Lovable.
• Grundläggande information om företaget: namn, ort, samt 3–5 huvudsakliga tjänster.
• En klar idé om vad hemsidans viktigaste mål är, till exempel att kunden ska ringa ett nummer eller fylla i ett formulär.

Steg för steg

1. Öppna ditt projekt – Starta ett nytt projekt i Lovable genom att klicka på knappen för att skapa en ny app eller webbsida från startskärmen.
2. Skriv din strukturprompt – Gå till chatt-rutan och beskriv kundens verksamhet tillsammans med de fem sektionerna. Genom att ange ordningen direkt i din första prompt sparar du mycket tid.

   Bygg en modern och mobilvänlig hemsida för Anders VVS i Enköping. Sidan ska ha följande sektioner i denna ordning:

   1. Hero: stor rubrik som direkt beskriver vad vi gör, en kort undertext samt en stor knapp med texten "Boka besök".
   2. Om oss: kort text om hur vi hjälpt kunder i 15 år.
   3. Tjänster: fyra snygga kort för nyinstallation, service, akut och badrumsrenovering.
   4. Recensioner: tre korta kundbetyg med stjärnor.
   5. Kontakt: ett enkelt kontaktformulär samt en sidfot med telefonnummer och organisationsnummer.

3. Skicka prompten och följ bygget – Klicka på skicka-knappen i chatten. Låt AI:n arbeta i några sekunder och se hur de olika sektionerna växer fram i förhandsgranskningen på höger sida.
4. Byt till mobilvy – Klicka på mobilikonen i förhandsgranskningens övre meny. Eftersom de flesta av din kunds besökare kommer att använda mobilen är det här du ska göra alla dina bedömningar.
5. Gör femsekunderstestet – Titta på den översta sektionen, din Hero. Kan en helt ny besökare förstå vad företaget erbjuder och hur man går vidare inom fem sekunder. Om svaret är nej, be chatten att förenkla rubriken.
6. Justera i rätt ordningsföljd – När du vill göra ändringar ska du arbeta systematiskt. Be AI:n att först fixa layouten, därefter texterna, sedan färgerna och allra sist bilderna. Detta håller koden ren och strukturerad.

Byggloftets tips

• Tänk på kundens problem: Vår isbjörn Bygge brukar påminna om att besökare bryr sig mer om sina egna problem än om företagets maskiner. Låt rubriken i din Hero fokusera på lösningen, till exempel "Vi löser ditt stopp i avloppet idag" istället för bara "Välkommen till Anders VVS".
• Håll texterna korta: De flesta skummar igenom hemsidor på mobilen. Håll beskrivningarna av tjänsterna till max två till tre meningar per kort. Det är mycket lättare att lägga till mer text senare än att rensa upp i långa textblock.

Vanliga fel

• "AI:n hittade på helt fel tjänster": Om du är för generell i din första beskrivning gissar AI:n själv. Skriv i chatten: "Ta bort tjänsterna och ersätt dem med exakt dessa tre: [Tjänst 1, Tjänst 2, Tjänst 3]".
• "Knappen högst upp gör ingenting när man klickar på den": Knappen i Hero-sektionen måste kopplas till kontaktformuläret. Skriv i chatten: "Gör så att knappen i vår Hero skrollar ner till kontaktformuläret på ett mjukt sätt när man klickar på den".
• "Allt ser bra ut på datorn men rörigt ut i mobilen": Detta händer om du bygger för mycket i datorläge. Byt till mobilvy i verktyget och skriv: "Justera avstånden och textstorleken i mobilvyn så att ingenting krockar eller hamnar utanför skärmen".

Du är klar när…

Du ser din kunds nya webbplats uppdelad i fem tydliga och logiska sektioner i mobilvyn, och du kan scrolla från en snygg välkomstskärm hela vägen ner till kontaktformuläret och sidfoten.