När Framer slår Lovable

Två verktyg, olika styrkor. När du ska välja vad.

5 minDesign & bilder
Illustration för lektionen När Framer slår Lovable

Vad du bygger

En tydlig plan för ditt nästa webbprojekt där du har valt rätt verktyg från start. Du får en enkel checklista som visar om din idé gör sig bäst som en designstark hemsida i Framer eller som en smart app i Lovable.

Innan du börjar

  • Ett gratis konto på Framer.
  • Ett konto på Lovable.
  • En klar idé om vad du vill att din blivande webbplats ska göra för dina besökare.

Steg för steg

  1. Skriv ner din huvudfunktion – Formulera på en enda mening vad din besökare ska göra på hemsidan. Är målet att läsa, inspireras och kontakta dig, eller ska besökaren spara egen information i en databas.
  2. Kolla efter hänglåset – Fundera på om sidan kräver att användaren loggar in. Om besökaren behöver skapa ett eget konto för att spara sina uppgifter eller se personliga sidor, då är detta en uppgift för Lovable.
  3. Bedöm vikten av design och rörliga delar – Fundera på hur mycket unika animationer och exakt layout betyder för ditt varumärke. Om du vill ha en hemsida som känns modern, levande och där varje detalj sitter på millimetern, då är det Framer du ska använda.
  4. Välj Framer för det digitala skyltfönstret – Öppna Framer och klicka på New uppe i högra hörnet om du kom fram till att du bygger en landningssida, en portfolio eller en vanlig presentation av ditt företag.
  5. Välj Lovable för den interaktiva tjänsten – Gå till Lovable och klicka på Create new app om du ska bygga ett verktyg, som till exempel en kalkylator för offerter, ett bokningssystem eller en kundportal.

Byggloftets tips

  • Skissa på papper först: Rita upp tre fyrkanter som representerar sidorna du vill ha. Om en av fyrkanterna innehåller ordet "Mina sidor" eller "Logga in", välj Lovable direkt.
  • Bygge tipsar: Det går utmärkt att kombinera båda. Du kan ha din snygga, säljande framsida i Framer och sedan lägga en länk till din smarta app som du har byggt i Lovable. Då får du det bästa av två världar utan krångel.
  • Tänk på mobilen: Framer har färdiga mallar där du enkelt kan justera hur layouten ser ut på en mobilskärm. I Lovable måste du ofta förklara för AI-chatten hur du vill att mobilversionen ska bete sig.

Vanliga fel

  • "Jag valde Framer men kan inte spara mina kunders uppgifter": Framer är byggt för presentation och design, inte för databaser. Om spara-funktionen är kärnan i din tjänst bör du flytta ditt projekt till Lovable.
  • "Min app i Lovable ser väldigt enkel och tråkig ut": Lovable fokuserar på funktion i första hand. Du kan be AI-chatten i Lovable att snygga till färgerna, men vill du ha total designfrihet på pixelnivå är Framer ett mycket bättre val.

Du är klar när…

Du har valt rätt verktyg för din idé och har öppnat ett tomt projekt i antingen Framer eller Lovable, redo att börja bygga med rätt förutsättningar från början.

Steg för steg i bild

Skriv ner din huvudfunktion – Formulera på en enda mening va
1. Skriv ner din huvudfunktion – Formulera på en enda mening va
Kolla efter hänglåset – Fundera på om sidan kräver att använ
2. Kolla efter hänglåset – Fundera på om sidan kräver att använ
Bedöm vikten av design och rörliga delar – Fundera på hur my
3. Bedöm vikten av design och rörliga delar – Fundera på hur my

Det finns en videoversion av den här lektionen för medlemmar. Texten ovan är komplett.