Framer

Create Project And Generate Draft Using AI

Start a new project and use the AI feature to create the first draft design.

Go to Framer, select "Generate with AI", enter the business description and the page goals (for example: product introduction, collecting trial sign-ups).

Clearly describe the target customer audience so that the AI can choose appropriate colors and styles from the beginning.

Choose A Design As A Starting Point

Review the design options suggested by AI and select the one that is closest to your idea for further editing.

Browse through the generated drafts, select one, and click "Use this design" to open it in the editing canvas.

Prioritize selecting the design with the most accurate layout even if the colors are not to your liking, as changing colors is easier than changing layouts.

Edit Content And Images

Replace placeholder content with actual business information and real product images.

Click directly on each text box to edit the content, drag-and-drop new images into the existing image frames.

Compress images before uploading to ensure the page loads quickly, avoiding large file sizes that slow down the page.

Add Animation And Transition Effects

Enhance the professionalism of the page with motion effects when scrolling.

Select the element to add effects to, go to the Interactions panel on the right, and select the type of animation (fade in, slide up) for scroll.

Use animation sparingly; avoid overusing effects on every element as it can make the page look cluttered.

Connect Custom Domain And Configure SEO

Link your business's custom domain and optimize basic SEO tags before publishing.

Go to Site Settings > Domain to point to your custom domain, then go to the SEO tab to fill in the title, and meta description for each page.

Fill in the Open Graph image so that when sharing the link on Facebook/Zalo, a nice image is displayed instead of being blank.

Publish And Monitor Analytics

Publish the official page and start monitoring traffic and user behavior.

Click the Publish button in the top right corner, then enable integrated Framer Analytics to track views and conversion rates.

Check the page on a real phone after publishing to ensure it displays responsively well on mobile.