Website Design & UX Research

Resend

2026-10-27 | https://resend.com/ | Mode: Daily | Source: sample site for a demo run

Research reliability: Capture A | Interaction — (not measured in Daily) | Responsive A | DOM/CSS — (not measured in Daily) |

Overall A (how reliable the evidence capture was, not how good the site's design is)

Capture (Final Capture Quality, quality_check.py final): desktop Initial A → Fallback not needed →

Final A; mobile Initial A → Fallback not needed →

Final A; gaps: none (two ~300px blank bands on desktop, y=9360–9660 and y=11392–11696, are normal spacing between blocks on the slices)

What this site does: Resend is an email-sending service for developers (transactional and marketing email). The page asks visitors to click "Get started" and sign up. The audience is engineers who want to wire email into their own code.

3 things learned today

Make "send your first email" the star of the page. The screen right below the hero is "Integrate tonight": an 18-line Node.js example (new Resend(...), emails.send) with 13 language tabs above it (Node.js, Serverless, Ruby, Python, PHP, CLI, Go, Rust and more) and framework tabs inside the code box (Next.js, Remix, Express, Nuxt…) (screenshots: d00, d01).
Why it works: a developer's biggest worry is "how long will integration take?", and runnable code answers it faster than any adjective. How I can use it: for a product sold to engineers, put the shortest runnable example on the second screen and switch languages with tabs, instead of writing "integrate in minutes".
2. A black page, a serif headline and one textured object create a quiet, upscale feel. The background is black, the hero headline "Email for developers" is set in a serif face while body text is sans-serif, and a black 3D puzzle cube sits on the right (screenshot: d00). The branding tool estimates h1 ≈ 96px, h2 ≈ 56px, body 18px, with the heading font stack starting with domaine and body in Inter.
Why it works: most email services lead with envelopes and blue; this page deliberately doesn't, turning a utility into an object with taste. How I can use it: a technical product that wants to stand out from its category can change only the headline typeface and the hero object instead of redesigning the whole interface.
3.

Use the product itself as the evidence for each feature. The Test mode HTTP 200 response list and the Webhooks event cards (Clicked, Opened) (screenshot: d01), the React example source next to the email it renders (screenshot: d03), and a real-looking metrics dashboard (screenshot: d04) are interface or source code, not illustrations.
Why it works: visitors see "what I will actually see" rather than a description of the feature. How I can use it: give each feature block one readable real fragment (a log, a setting, an output) on the same screen as its explanation.

Dimension notes (one or two lines each)

Business / conversion: sign-up → primary CTA "Get started" (about 4 times on the screenshots: nav, hero, React section, footer; secondary "Documentation", "Check the docs", "Explore Enterprise"). Path: hero → customer logo wall → code example → feature cards → CEO quote → dashboard → customer quotes (horizontal cards cropped at the edges, may auto-scroll (inference)) → footer CTA "Email reimagined. Available today." (screenshots: d00, d03, d05). The clearest mechanism is placing the "first email" code very early; no obvious conversion friction was observed this time.

Brand / style: probably wants developers to feel "stable, polished, no fluff" (inference), mainly through the black background, serif headline and a single 3D object; the copy is short engineer-to-engineer sentences ("We are a team of engineers who love building tools for other engineers").

Visual: background #000000, body grey #A1A4A5 (branding estimate). The branding tool reports the primary button as blue #00A3FF, but on the screenshot the nav and hero "Get started" buttons are dark-grey pills (screenshot: d00); the blue appears only in the example email's button code (screenshot: d03), so the screenshot wins.

UX: the nav has 7 items (six with dropdowns, plus Pricing), one Log in and one Get started; the page is a single-column long page where each block carries one claim and usually one "Learn more"; no sidebar is visible (screenshots: d00, d01).

Motion: the Test mode and Webhooks cards show truncated lists (screenshot: d01) that may auto-scroll (inference); the hero 3D cube may be video or WebGL (inference). Motion was not measured this time.

Responsive: on mobile (360 wide) the nav collapses to a menu button; the hero cube shrinks and moves above the headline; the logo wall goes from 12 logos on desktop (two rows of 6) to 6 visible logos (three rows of 2); "Get started" becomes a full-width button (screenshot: m00).

Patterns: ① "big heading + one or two sentences + Learn more" repeats in Test mode, Modular webhooks, Contact management and Broadcast analytics; ② every product block uses a real interface or code as evidence — the code example, Test mode, the React example and the dashboard (screenshots: d01, d02, d03, d04).

What not to copy (at most 3)

• Small grey text (#A1A4A5) on pure black may be weak for long explanations (inference; contrast was not measured).
• The 3D cube relates only indirectly to "email"; it relies on brand feel rather than explanation. Without such a brand asset, the hero may not show what is being sold.

One-line takeaway: it wants engineers to "try it right now", builds trust with a quiet black look, and finishes the persuasion with code that runs.

Still uncertain: motion and hover/click interactions were not measured this time; the CTA count was counted from screenshots (Capture A, 100% coverage); the Contact management and Broadcast analytics cards show only cropped lists (screenshot: d02).