These are general guidelines on how your landing page should look. To use my personal SaaS boilerplate, check out [[SaaS Boilerplate]]. # Principles The site should be easy to navigate, and extremely clear in expressing what your startup does. If a user can't repeat back exactly what problem you help with, and what you do, within 30 seconds of being on the page, it probably needs some work. Keep language simple, clean, and easy. Don't overwhelm the user. They came to understand what you do, not to be impressed by flashy frontends. If you're selling enterprise B2B, make sure the site is up to enterprise standards with design. No random padding missing, etc. # Coding specifics Max width: 1280px - Standard tailwind size - Standard desktop size, and media query size General content order: - Header - CTA - Headline - Tagline - Button - Image/demo/example - trusted by _ companies - Features x2-3 - Headline of feature - some graphic - Maybe a grid of a few quick things the SaaS does - Comparisons - Pricing (optional) - FAQ (optional) - Footer Header - Desktop - Usually around 48px height - 14 px font size - Show all options, dropdown menu for categories if too large - login and signup on right, signup is extra noticeable - Mobile - Usually around 56px height - 14 px font size - Show name, logo, login+signup, and a menu icon - Generally, a border at the bottom to separate it from the page is useful... can either be screen width, or max-content-width CTA Text - Usually right below the header, with nothing in between - Anywhere from 48 - 80px large - Looks great with either a gradient, or color separation between words - **40-50 characters** for the main big text - Around a 100-140 character subtitle below it. Subtitle is usually smaller and non-bolder or a muted color compared to header Image / demo / example - either full content width (1280px) or on the right of your tagline. - Can be a video, just make it short and to the point. - A screenshot of inside the platform works well if it's obvious what the product is doing # References ### Good pre or early launch sites: https://www.joinalacrity.com/ https://www.taiki.ai/ https://granzabio.com/ ### Good post-launch sites: https://blacksmith.sh/ https://linear.app/ https://million.dev/ https://www.quivr.app/ https://radiyal.framer.website/ ### Useful landing page directories for examples: https://www.ycombinator.com/companies?batch=W24 - YC's directory of startups. To see more early stage startups, filter to the latest batch. To see more established pages, pick older batches. https://www.landingfolio.com/inspiration/landing-page/saas - Great inspiration, these sites are a bit more popular. Beware sometimes they'll try to charge you for a template. I look at these purely for inspiration. ### Great Youtube videos to understand what a good landing page looks like: [Critiquing AI Startup Websites with YC President Garry Tan](https://www.youtube.com/watch?v=uIYujpFmvo8) - YC has a whole series about critiquing startup websites.