How to Design a Landing Page in Prototyper
In this post, I'll explain how to design a cool landing page in Prototyper.
Written by
Thijs Verreck
Published on
Designing a Landing Page in Prototyper
We all know: a visually appealing and functional landing page is crucial for capturing the attention of your audience. But sometimes it is just hard to get started, especially if you have to build a landing page in React. Luckily you can use Prototyper to quickly get you over that writer's block. So, in this blog post, I'll walk you through the process of designing a landing page using Prototyper, explain how to use iterative design and some good prompts that guided each step.
Initial Concept
My initial idea was to create a landing page with text in all four corners and a prominent central text. The central text was to be rotated slightly and centered, with different font sizes for mobile and desktop views. I always recomend people to start with the skeleton of what it is what you want to build in and fill in the structure later on.
Prompt:
1I want to start working on a cool landing page, making a website layout: text in all four corners and then big text in the middle with another text node on top of the text in the center rotate this text node negative 15 degrees make sure the text in the center is center aligned and on mobile take it's font size down to 80px, 120px on desktop
First Iteration
Next up, it was time to get a real test case. I decided on YC, it has an iconic brand so seemed like a fun case to try. The best thing here is to distill the core brand essentials down to some basic prompt elements. In the case of YC, it's iconic orange background color.
Prompt:
1Give the page a crispy orange background and make the overlapping text white, make the landing page about Ycombinator and put relevant items in the four corners.
Second Iteration
The next step was to change the text color to black, except for the overlapping text, which I actually like in white. This provided a strong contrast and improved readability.
Prompt:
1Make the text black except for the overlapping text.
Third Iteration
To add a creative touch, the rotated text was circled as if marked with a pencil. This required generating an SVG to achieve the desired effect.
Prompt:
1Can you make the rotated text circled, like it is marked with a pencil? Generate a SVG for that.
Fourth Iteration
The final step was to fix the SVG, ensuring it was visible and correctly positioned on the page. This sometimes happens when working with LLMs, so don't be afraid to call it out when it makes a mistake!
Prompt:
1fix the svg, I don't see it.
Final Design & Code
I'm actually quite happy with the end result (see it here!). Big fan of the bold orange background. If you want to have a look at the code, see it here below:
1import {
2 Button
3} from "ui"
4
5export default function LandingPage() {
6 return (
7 <div className="relative h-screen bg-orange-500 text-center p-10">
8 <div className="absolute top-8 left-4">
9 <h2 className="text-lg md:text-2xl text-black">Startups</h2>
10 </div>
11 <div className="absolute top-8 right-4">
12 <h2 className="text-lg md:text-2xl text-black">Investors</h2>
13 </div>
14 <div className="absolute bottom-8 left-4">
15 <h2 className="text-lg md:text-2xl text-black">Events</h2>
16 </div>
17 <div className="absolute bottom-8 right-4">
18 <h2 className="text-lg md:text-2xl text-black">Resources</h2>
19 </div>
20 <div className="relative flex h-full flex-col items-center justify-center">
21 <div className="relative">
22 <h3
23 className="text-4xl relative z-20 md:text-5xl lg:text-6xl text-white tracking-tighter"
24 style={{
25 transform: "rotate(-5deg)"
26 }}
27 >
28 Make something people want
29 </h3>
30 <svg
31 viewBox="0 0 200 60"
32 className="absolute top-full left-0 w-full"
33 style={{transform: "rotate(-15deg)"}}
34 >
35 <path d="M10 30 Q 50 10, 90 30 Q 130 50, 170 30 Q 150 10, 110 30 Q 70 50, 30 30 Z" stroke="white" strokeWidth="2" fill="none" />
36 </svg>
37 </div>
38 <h1 className="mt-6 text-6xl md:text-9xl font-bold text-black tracking-tighter z-10">Y Combinator</h1>
39 </div>
40 </div>
41 )
42}
Conclusion
Desiging a landing page in Prototyper definitely involves a series of iterations and refinements. But, by following good prompts and making adjustments based on feedback, it's definitely possible to create a good landing page.
Stay tuned for more design tips and tutorials!
