Skip to content
BetaFree MCP server

Loom

loom.com/

Loom is a screen- and camera-recording tool for sending asynchronous video messages instead of live meetings or long text explanations, aimed at workplace use cases like sales, engineering, and customer support. Its hero line, "One video is worth a thousand words," leads into a specific recent feature rather than a general pitch: automatic conversion of a recorded video walkthrough into a populated Jira ticket with technical detail already filled in, under the line "Ship faster with AI bug reports." It states it's used by "millions of people across 400,000 companies" and supports transcription and captions in 50+ languages. The homepage is organized by named use case rather than by feature category. No About page link was found in the content reviewed.

Category
Productivity & Collaboration
Style
LightColorful
Stack
Next.jsTailwind CSSCSS-in-JS
Fonts
Charlie DisplayCharlie Text
Palette
Meta title
Free screen recorder for Mac and PC | Loom
Sections
5
Updated

Loom's landing page, section by section

Each section below is cropped straight from Loom's live page — useful references for productivity & collaboration landing page design.

Loom design review: how the homepage is built

The desktop homepage runs 12,768 pixels, stacking an announcement bar, a navigation row, a centred hero, a logo strip, feature blocks, use-case cards, a blog block, an enterprise panel and a footer. The header pairs the Atlassian lockup with the Loom wordmark, so the page presents Loom under Atlassian branding. Colour is driven by the saturated blue #1868db across the announcement bar, buttons and two large rounded panels, with white sections between. Type is Charlie Display for headings and Charlie Text for body copy. Most visuals show real people and product screens.

Above the fold

The hero sits on white beneath a blue bar reading "NEW: Show it with Loom. Ship it in Cursor." The headline "One video is worth a thousand words" sits on one centred line, above the subhead and two buttons: a solid blue "Get Loom for free" and a pale "Install Chrome Extension". Below them, a large rounded video frame shows an office scene with a blue play button and a "1.2×" speed chip.

Logo strip and Loom for Mac panel

Below the hero, "Millions of people across 400,000 companies choose Loom" sits over one "Get Loom for free" button, then grey logo rows follow, including HubSpot, Lacoste and Disney. A full-width rounded blue panel carries "New!" and "Meet the all-new Loom for Mac" with a "Download now" button beside a camera-bubble mock-up. Below it, "Lightning fast screen recording" sits beside a pale yellow timeline mock-up.

Feature rows, use-case cards and checklist

Three feature rows follow: "Edit your videos like a pro" beside an editor mock-up, "Share or embed video anywhere you work" beside a lilac chat-bubble panel, and "Engage and connect with video" beside a code-editor screenshot with green reaction bubbles. Four pastel cards headed "Sales", "Engineering", "Customer support" and "Design" each show a preview. A checklist of eight features sits in two columns.

Closing section and footer

A dark rounded panel headed "Loom for Enterprise" shows layered product screens above a "Learn more" button. A testimonial carousel quotes "Alexis Ohanian" as founder of SevenSevenSix, and a white card closes the page with a blue "Get Loom for free" button. The footer sits on pale blue with link columns headed "APP", "SOLUTIONS", "FOR BUSINESS", "DOWNLOADS", "RESOURCES" and "COMPANY", and a base row with "Loom Terms & Policies" and an "ATLASSIAN" mark.

On mobile

At 390px the hero headline wraps onto two lines, and "Get Loom for free" becomes a full-width blue button under the subhead, ahead of the video. The logo strip shrinks to three columns with a "View more" pill beneath it. Side-by-side feature rows stack into single columns with the illustration first, and the enterprise carousel shows one card. The footer link groups become one long vertical list starting with "APP".

Worth borrowing

  • Placing the product video directly under the hero buttons keeps the product on the first screen.
  • Four pastel cards, each with a small preview, show one product across several job roles.
  • Four rows of unlabelled grey logos let customer names carry the proof without extra copy.
Linktr landing page design
Linktr
Productivity & Collaborationlinktr.ee/
Granola landing page design
Granola
Productivity & Collaborationgranola.ai/
Clueso landing page design
Clueso
Productivity & Collaborationclueso.io/
Pasteapp landing page design
Pasteapp
Productivity & Collaborationpasteapp.io/
Basewell landing page design
Basewell
Productivity & Collaborationbasewell.com/
Craft landing page design
Craft
Productivity & Collaborationcraft.do/