Skip to main content
When you upload a website screenshot to KwikUI, our system uses that image to automatically detect key navigation elements and infer which pages your project should include. The quality of your screenshot directly impacts how accurately KwikUI can map out your site structure. So, what kind of screenshot works best for page detection? Let’s break it down.

​
1. Capture the Full Header or Navbar

Your screenshot should always include:
  • The logo (top-left, where most brands place it)
  • Menu items like “Home,” “About,” “Services,” “Contact”
  • Call-to-action (CTA) buttons, such as Sign Up or Get Started
Why? Because KwikUI primarily reads the header/navigation bar to identify the key pages of your website. If your screenshot cuts off the header, the system may miss important page signals. This leads to incomplete or inaccurate project setup.
Think of it as giving KwikUI the roadmap. Without the header, it’s like asking someone to navigate without a map.

​
2. Use a Sharp, High-Contrast Image

Avoid uploading screenshots that are:
  • Blurry
  • Overly compressed
  • Low resolution
Why? A sharp, high-contrast image helps KwikUI recognize text, icons, and layout elements more precisely. Poor image quality increases the chance of misreads—especially when menu items or CTA buttons use light fonts on light backgrounds.
Pro Move: Take a direct desktop screenshot (e.g., with your browser’s built-in screenshot tool) instead of snapping a photo with your phone.

​
3. Stick to the Default Desktop View

When taking your screenshot, capture the website in its default desktop state, before opening dropdown menus or toggling overlays.
Why? Dropdowns and overlays can clutter the navigation area and confuse page detection. KwikUI works best with a clean, default view where the primary navigation is visible but not expanded.
Example: If your site has a “Products” menu with 10 dropdown items, keep it closed in the screenshot. KwikUI will still identify “Products” as a main page.

​
4. Make Sure Sticky Headers Are Visible

Many modern sites use sticky headers—navigation bars that remain visible as you scroll. If your website has one, capture a state where the sticky header is clearly visible. This ensures KwikUI can correctly interpret the navigation across different scrolling positions.
Scroll down slightly until the sticky header locks into place, then take your screenshot.

​
Why These Guidelines Matter

KwikUI relies on the visual cues in your header/navbar to automatically infer which pages should be included in your project. The better your screenshot, the less manual correction you’ll need later. Think of it like this: if your header is your website’s blueprint, your screenshot is the scanned copy KwikUI reads. Clearer scans = better results.

​
Bonus: File Upload Guidelines

Besides the screenshot quality, it’s also important to follow file upload best practices:
  • File size: Upload screenshots that are optimized (not too large, not too compressed)
  • File type: Standard formats like PNG or JPEG work best

​
Quick Checklist

If you want KwikUI to detect your pages with minimal effort on your part, give it the clearest possible screenshot of your site’s header:
✅ Include the full navbar (logo, menu items, CTAs)
✅ Use a sharp, high-quality image
✅ Capture the default desktop view
✅ Ensure sticky headers are visible
Follow these tips, and you’ll save time while setting up your project, letting KwikUI do the heavy lifting for you.