For a redesign, choose one to three reference websites, and pick each one for a reason you can name: its typography, its grid, its spacing or the way it uses color. The best references usually come from businesses next to yours rather than your direct competitors, still look good with their photos removed, and are captured as clean, full-page desktop screenshots. Anything you can't explain in one sentence is noise.
Why a reference beats a description
Ask five people to picture a "clean, modern, premium" website and you get five different sites. One imagines a black page with thin white type. Another sees cream backgrounds, a serif headline and lots of air. A third pictures a bright software page with gradients. None of them is wrong, because those words don't describe a design. They describe a feeling.
A reference settles that before anyone builds anything. It shows the type pairing, how much space sits between sections, whether the layout is centered or left-aligned, and how loud the accent color is. That's true when you brief a designer, and it's even more true when you brief an AI. FNJ's AI builder won't start a new site without at least one reference for exactly this reason, and its screenshot-to-website builder treats your screenshots the way a designer treats a moodboard.
So the quality of your references sets the ceiling for the result. It's worth spending an hour on them.
Step 1: Collect wide, then cut hard
Give yourself half an hour to gather 15 to 20 candidates without judging them. Good places to look:
- Businesses next to yours. A physiotherapy clinic can learn more from a boutique gym or a skincare brand than from other clinics. An accounting firm might borrow from a well-designed architecture studio or a software company.
- Brands your customers already buy from, whose visual language they already trust.
- Type foundry and design studio sites, for headings and text columns set with unusual care.
- Curated design galleries such as Awwwards, SiteInspire or Land-book. Be careful here: gallery favorites often lean on motion and experiments that make poor references for a working business site.
- Your own current site, if you're redesigning. Note what's worth keeping before you replace it.
Then cut the pile down to three. The cutting matters more than the collecting.
Step 2: Finish the sentence for each one
For every candidate, finish this sentence: "From this site, I want the ___."
- "From this site, I want the large serif headlines and the narrow text column."
- "From this site, I want the way each section sits on a slightly different warm neutral."
- "From this site, I want the service cards: flat, thin borders, no shadows."
If you can't finish the sentence, you have a vibe, not a reference. Drop it. If two references give the same answer, keep the stronger one.
What to study in a reference
Look past whether you "like" a site and break it into the decisions that made it.
Typography
Is it a serif, a sans-serif or a mix? How many families does it use? Watch the size contrast: a very large headline over small body text feels editorial and confident, while headings only a little bigger than the body feel quiet and practical. Notice weights, letter spacing and whether small labels are set in capitals.
Grid and alignment
Is content centered or aligned to the left edge? How many columns do the card rows use? Many strong sites use uneven splits, with text taking the narrower side and an image the wider one. Check the maximum content width too: some sites keep everything in a narrow column, others run images edge to edge.
Density
How much fits in the first screen? How much space separates sections? Squint at the page until the text blurs: you'll see whether it's mostly air or mostly content. Density is the quality people notice without being able to name, and it's the easiest one to get wrong when you mix references.
Color roles
"They use green" isn't useful. Note what each color does: page background, text, accent, borders, card surfaces. Then note how much accent there is. A single bright color used only on buttons gives a very different site from one that fills whole sections with it. While you're there, check the text against its background. Pale grey body text looks elegant in a screenshot and fails people in real use; the W3C's guidance on minimum text contrast explains the ratios to aim for.
Components
Look at the navigation (logo left, links right, one button?), the buttons (pill or square, filled or outlined), the cards (border, shadow or flat), and the footer.
Image treatment
You'll supply your own photos, but the way a site frames them is still a reference: full-bleed or boxed, rounded corners or square, tall portraits or wide crops, color or black and white.
Here's a compact way to take notes:
| Layer | Question to ask | Example note |
|---|---|---|
| Type | Which families, and how big is the headline next to the body? | Serif headlines, very large; plain sans body |
| Grid | Centered or left-aligned? How many columns? | Left-aligned, text on the narrow side, image on the wide side |
| Density | Airy or packed? | Very airy, one idea per screen |
| Color | What does each color do, and how much accent? | Warm off-white base, near-black text, rust accent on buttons only |
| Components | Buttons, cards, nav style? | Pill buttons, flat cards with thin borders |
| Images | How are photos framed? | Full-bleed, no rounded corners |
Step 3: Decide how many references and in what order
- One reference is right when a single site has almost everything you want. It's the fastest route to a coherent design.
- Two references is often the sweet spot: one for type and color, one for layout.
- Three is the most worth using. Beyond that, references start canceling each other out and the result drifts toward average.
Order matters. Put the reference you care about most first. FNJ's builder accepts up to three references per prompt, blends what they share and follows the first where they disagree, so your first choice wins the arguments.
Combining references without making mud
Mix references that agree on density. A sparse editorial site and a packed software comparison page will fight over every section. If they agree on density, you can split them by layer and say so in your prompt:
A website for a family-run bakery in Leeds: home, our breads, wholesale and visit us. Take the typography and colors from the first screenshot and the layout of the product sections from the second.
Red flags: references that won't survive
Some sites look wonderful and still make poor references.
- The photography is doing all the work. Imagine the site with every image replaced by a grey box. If nothing interesting is left, the reference is really a photo shoot you don't have. FNJ's builder never takes a reference's images and has no stock-photo library; it leaves styled spaces for photos you upload.
- The look depends on motion. Scroll effects, video backgrounds and 3D scenes don't survive a still screenshot.
- The style is built on custom illustration you won't be able to commission.
- It was built for a different job. An app dashboard has the wrong density for a marketing page, and a fashion lookbook has the wrong structure for a plumber.
- It's your direct competitor in your own market. Customers may confuse the two of you, and that's a legal and positioning risk. Where the line between inspiration and copying sits is covered in its own post.
- It only looks good on desktop. Open the reference on your phone before you commit to it.
Step 4: Take screenshots that carry the detail
A sloppy screenshot hides exactly the details you chose the site for.
- Set your browser window to roughly desktop width (around 1440px) at 100% zoom.
- Close cookie banners, chat bubbles and newsletter pop-ups.
- Scroll to the bottom first so lazy-loaded images appear, then scroll back up.
- Take a full-page capture. In Chrome, open DevTools, press Ctrl+Shift+P (Cmd+Shift+P on a Mac) and run "Capture full size screenshot". In Firefox, right-click the page, choose Take Screenshot and then Save full page.
- Crop when you want one specific thing, such as a pricing table, so the reference can't be misread.
- Never photograph a screen with your phone; glare and angle destroy the type and color detail.
- Name the files for their job, such as
01-type-and-color.pngand02-layout.png, so the order is obvious.
FNJ accepts screenshots by upload, paste or drag and drop, slices tall full-page captures automatically, and doesn't store them after the prompt.
Screenshot or link?
They carry different information. A screenshot shows composition: how sections are arranged and how the page feels. A link lets the builder read exact design signals such as font families, type scale, colors by role, corner radii, shadows and button styles. When you want both the feel and the precise values, use one of each; there's more on that in the guide to building from a website link.
Write the short brief that goes with them
References show the look. The brief supplies the facts: what the business is, who it serves, which pages you need, what to take from each reference and what to avoid. If you already have brand files, you can skip describing colors and type entirely; using brand guidelines with an AI website builder explains how.
Putting your references to work
Once you have one to three references you can explain, you can turn your screenshots into a responsive site with FNJ's AI builder. It takes the look of your references, never their words, logos or images, writes copy for your business, and lays out every page at desktop, tablet and phone widths on a canvas you can keep editing.
Frequently asked questions
How many reference websites should I use?
Use one to three. One gives the most coherent result, two lets you take type and color from one site and layout from another, and more than three tends to blur into an average design.
Should my reference websites come from my own industry?
Not necessarily, and often they shouldn't. Sites from neighboring industries give you a fresh look without making you resemble a direct competitor, and they still suit your customers if the density and tone fit.
Can I use a competitor's website as a reference?
You can study any site for ideas about layout and style, but a direct competitor in your own market is a risky choice because customers might confuse the two businesses. Never reuse another site's text, logos or photos. This is general information, not legal advice, and the rules vary by country.
Is a screenshot or a link better as a reference?
They complement each other. A screenshot shows composition and feel, while a link gives exact fonts, colors and component styles, so using one of each is often the most precise option.