Aug 8, 2023

How to make a simple landing page with Framer & Midjourney

Arjun Phlox

Aug 8, 2023

How to make a simple landing page with Framer & Midjourney

Arjun Phlox

Aug 8, 2023

How to make a simple landing page with Framer & Midjourney

Arjun Phlox

Aug 8, 2023

How to make a simple landing page with Framer & Midjourney

Arjun Phlox

Aug 8, 2023

How to make a simple landing page with Framer & Midjourney

Arjun Phlox

Aug 8, 2023

How to make a simple landing page with Framer & Midjourney

Arjun Phlox

With the Midjourney x Framer, you can quickly create landing pages like a hypothetical robot suitcase product which is available to download as an App via the App Store.

See how quickly you go from concept to website under 6 steps ↓

With the Midjourney x Framer, you can quickly create landing pages like a hypothetical robot suitcase product which is available to download as an App via the App Store.

See how quickly you go from concept to website under 6 steps ↓

With the Midjourney x Framer, you can quickly create landing pages like a hypothetical robot suitcase product which is available to download as an App via the App Store.

See how quickly you go from concept to website under 6 steps ↓

With the Midjourney x Framer, you can quickly create landing pages like a hypothetical robot suitcase product which is available to download as an App via the App Store.

See how quickly you go from concept to website under 6 steps ↓

With the Midjourney x Framer, you can quickly create landing pages like a hypothetical robot suitcase product which is available to download as an App via the App Store.

See how quickly you go from concept to website under 6 steps ↓

With the Midjourney x Framer, you can quickly create landing pages like a hypothetical robot suitcase product which is available to download as an App via the App Store.

See how quickly you go from concept to website under 6 steps ↓

Step 1: Visualise the concept

Our goal was to create a hypothetical robot suitcase that follows you around the airport so you don't have to carry it. We started by heading to @midjourney and setting up a prompt.



Step 2: Refine your Midjourney prompt

We experimented with a few different variations before settling on a style we liked with a prompt change.

Step 3: Our Final concept refined and upscaled.

More prompt changes led to this super cute result.


Step 4: Back to Framer 

Next, we switched back to Framer and set up a basic canvas for an app landing page where users can click and download the hypothetical app.


Step 5: Responsive Design in Framer

We made sure the landing page was responsive and would load on all devices including Tablet and Mobile resolutions. This is a crucial step as we cannot anticipate where your users will visit the website from.

© 2024 Xperian School | PINATION PTE