Master the fundamentals of web design to communicate effectively with AI and create stunning websites
Choosing the right fonts is crucial for readability and brand identity. Here are popular font combinations and how to specify them when working with the AI.
Perfect for tech startups and SaaS products. Clean, highly readable, and works great at any size.
Great for creative agencies and consumer products. Geometric and friendly with excellent legibility.
Ideal for luxury brands and editorial content. High-contrast serif that commands attention.
Works well for corporate and professional sites. Strong, geometric, and highly versatile.
Use one font for headings and another for body text. Try pairing Poppins (headings) with Inter (body) or Playfair Display (headings) with Source Sans Pro (body).
"Use Inter for body text and Poppins Bold for all headings. Make the main heading 48px and body text 16px."
"Change the typography to use Montserrat for all text with font weights of 400 for normal text and 700 for bold."
Colors define your brand's personality and guide user attention. Use these resources to find perfect color combinations and learn how to specify them precisely.
These websites provide professionally curated color palettes you can reference in your AI prompts:
Generate perfect color combinations with a single spacebar press
Discover thousands of hand-picked color palettes from designers
Advanced color scheme designer with color theory principles
Visualize color palettes on real website layouts instantly
"Use #3b82f6 as the primary color for buttons and links, #1e40af for hover states, and #f3f4f6 for the background."
"Create a color scheme with purple as the primary color (#8b5cf6), pink accents (#ec4899), and a dark background (#1f2937)."
Understanding standard web design terminology helps you communicate precisely with the AI. Here are the most common section names and what they mean.
The first section visitors see at the top of your page. Typically contains a large headline, subheadline, call-to-action button, and hero image or video. Most important section for conversions.
The menu at the top of your website containing links to main pages. Usually includes your logo on the left and menu items on the right. Can be sticky (follows you when scrolling).
A section or button designed to prompt an immediate action from visitors. Examples include "Sign Up Now," "Start Free Trial," or "Get a Quote." Usually stands out with contrasting colors.
Showcases your product or service's main benefits or features. Typically displayed as a grid of cards with icons, headings, and short descriptions. Often uses 3 or 4 columns.
Displays customer reviews, quotes, or success stories. Often includes customer photos, names, and their company or role. Builds trust and social proof.
Shows your pricing plans or packages. Usually displayed as cards in columns (Basic, Pro, Enterprise) with features listed and a CTA button for each tier.
Frequently Asked Questions section that answers common customer questions. Often uses an accordion or expandable format so answers are hidden until clicked.
The bottom section of your website containing links to important pages, contact information, social media icons, copyright notice, and sometimes a newsletter signup form.
Tells your company's story, mission, or values. Often includes team photos, company history, or statistics. Can use two-column layout with text and images.
Provides ways for visitors to reach you. Typically includes a contact form, email address, phone number, physical address, and sometimes a map.
Now that you understand fonts, colors, and section names, here's how to combine them into effective prompts.
"Create a landing page with a hero section that has a bold headline in Poppins font. Use #3b82f6 as the primary color for the CTA button. Below that, add a features section with 3 columns showing our key benefits. Include a testimonials section with customer quotes, and finish with a footer containing links and social media icons."
"Make it look more modern"
"Use Inter font, increase spacing to 40px, and update colors to #3b82f6"
Armed with these fundamentals, you're ready to create beautiful websites with AI. Start with clear specifications and iterate to perfection.
Start Designing Now