Beginner4 min readShare
Was this chapter helpful?
Share
Every great designer starts by studying what works. Learn to see, describe, and recreate.
Here's something professional designers won't always tell you: they study other designs all the time. Every architect walks through beautiful buildings. Every chef eats at other restaurants. Every musician listens to music they love. That's how creative skills grow.
There's a famous idea often linked to Picasso: "Good artists borrow, great artists steal." It doesn't mean literally taking someone's work. It means understanding why something works so well that you can make it your own. You study the patterns, the spacing, the way colors work together — and then you use those lessons in your own project with your own content and brand.
You're not stealing code. You're not copying someone's business. You're learning design patterns — the same way every designer before you did.
When you find a site you like, slow down and notice these six things.
Open the site and capture a full-page screenshot. On most browsers you can right-click and choose "Save full page screenshot" or use a browser extension. This gives you a reference image you can paste into AI tools later.
Tip: Use your browser's built-in screenshot tool or try the GoFullPage extension.
How is the page organized? Is it one column or two? Where does the navigation bar sit — top, side, or both? Is the content narrow and centered, or does it stretch edge to edge?
Tip: Squint your eyes — you'll see the big shapes and blocks more clearly.
What's the main color? Is there an accent color for buttons or links? What's the background — pure white, light gray, or something else? Most good sites use just 2-3 colors plus neutrals.
Tip: Look at the buttons and links — that's usually the primary accent color.
Are the headings big and bold? Is the body text clean and easy to read? Does the site use one font for everything, or different fonts for headings vs body? How large is the text?
Tip: Headings are usually bold and tight. Body text is usually lighter and more spaced out.
Is there lots of breathing room between sections (white space), or is everything packed tight? How much padding do cards and buttons have? Good spacing is often what separates amateur from professional.
Tip: Professional sites almost always have more white space than you'd expect.
Most websites follow a pattern: Hero (the big intro at the top) → Features → Testimonials or Social Proof → Call to Action → Footer. Write down the order of sections you see.
Tip: Knowing the section order helps you describe the full page to AI in one prompt.
Your browser has a hidden tool that lets you peek behind any website's design.
Right-click on anything on a webpage and choose "Inspect"(or "Inspect Element"). A panel opens showing the behind-the-scenes details. You don't need to understand the code — you're just looking for specific values to copy.
Look for "color" and "background-color" in the right panel. You'll see values like #8B5CF6 or rgb(139, 92, 246). Copy these exact values to give your AI tool.
color: #1a1a3eLook for "font-family" to see the font name. You'll see something like "Inter" or "DM Sans". Also check "font-size" and "font-weight" for the size and boldness.
font-family: "Inter", sans-serifLook for "padding" (space inside an element) and "margin" (space outside). These tell you how much breathing room things have. Values are in pixels (px).
padding: 24px; margin-bottom: 16pxLook for "max-width" to see how wide the content area is. Look for "border-radius" to see how rounded the corners are.
max-width: 1200px; border-radius: 12pxRemember:You don't need to understand the code. Just copy the values (color codes, font names, pixel numbers) and paste them into your prompt to AI. That's it.
This is the most valuable skill on this page. A good description gets you 80% of the way there on the first try.
"I want my website to look like [reference site or screenshot]. Specifically:
- Layout: [describe the structure]
- Colors: [list the main colors you noticed]
- Fonts: [describe the heading and body text style]
- Spacing: [describe the overall feel — airy or compact]
- Sections: [list the sections in order]
Here's a screenshot for reference: [paste image]"
I want a clean SaaS landing page similar to Linear.app or Vercel.com. Specifically: - Layout: Centered content, max-width around 1100px. Single column with full-width sections. - Colors: Dark background (#0A0A0A), white text for headings, gray (#888) for body text, and a purple (#8B5CF6) accent for buttons and highlights. - Fonts: Large bold headings (around 48px) with tight letter-spacing. Clean, small body text (16px). - Spacing: Very generous — at least 80px between sections. Cards should have 24px padding. - Sections: Hero with headline + subtitle + CTA button → Feature grid (3 columns) → Testimonial quote → Pricing table → Footer. Here's a screenshot for reference: [paste screenshot]
I want a portfolio site with big, beautiful images — similar to a photographer's or designer's site. Specifically: - Layout: Full-width hero image at the top, then a masonry-style grid of project thumbnails below. - Colors: White background, dark charcoal text (#1A1A2E), minimal accent color — just a subtle warm beige (#F5F0EB) for hover states. - Fonts: Elegant serif font for the name/logo (like Playfair Display), clean sans-serif for everything else (like Inter). - Spacing: Lots of breathing room. The grid should have 16px gaps. Each project thumbnail should show on hover with a title overlay. - Sections: Full-screen hero with name and tagline → Project grid (6-8 items) → Short about section → Contact with email link. Here's a screenshot for reference: [paste screenshot]
I want a modern, readable blog layout like the ones on Notion's blog or Stripe's blog. Specifically: - Layout: Two-column on desktop — main content on the left (max-width 680px), sidebar with categories on the right. Single column on mobile. - Colors: Clean white background, very dark text (#111827) for headings, medium gray (#6B7280) for meta info like dates and tags. Blue (#3B82F6) for links. - Fonts: Bold sans-serif headings (like Inter or DM Sans), comfortable body text at 18px with generous line-height (1.8). - Spacing: Blog post cards should have 20px padding and 12px gap between them. Comfortable reading width. - Sections: Header with logo + navigation → Featured post (large card) → Recent posts grid (2 columns) → Categories sidebar → Newsletter signup → Footer. Here's a screenshot for reference: [paste screenshot]
Bookmark these sites. When you need ideas, browse them and screenshot what you like.
The largest designer community. Search for "landing page", "dashboard", or "portfolio" to find polished UI concepts and mockups.
Best for: Polished UI concepts and component ideas
Award-winning real websites judged by design professionals. These are actual live sites you can visit, not just mockups.
Best for: Award-winning real websites
Full project showcases from designers worldwide. Great for seeing the thinking behind a design, not just the final result.
Best for: Full project case studies
A curated gallery of the best web designs on the internet. Clean, modern, and well-organized. Updated frequently.
Best for: Modern web design trends
Real mobile app and web design patterns from top companies. Great for seeing how popular apps handle common screens.
Best for: Mobile app design patterns
A huge collection of landing pages organized by type — SaaS, agency, portfolio, startup, and more.
Best for: Landing page designs specifically
The line is simple: copy the structure, make the identity yours.