Asif Aleem

Rebuilding my template previews to sell the scroll, not just the screens.

Spending this week reworking how I present my Framer templates. The realization: a row of static screenshots undersells a site that is really about motion and flow. So I am recording short scroll-throughs as the primary preview, and keeping the static shots for detail below.

Early takeaway: the scroll clip answers the one question a buyer actually has, "what does this feel like to move through", before they ever open the live preview. Static shots answer "is it pretty". Motion answers "is it built well".

If you sell templates, what is converting better for you right now, static shots or motion previews?

Most Framer sites that feel broken on mobile fail for the same reason: the desktop layout was built first and squeezed down later.

What works is the reverse. I set the phone breakpoint early, get the stack, spacing, and tap targets right there, then let the layout breathe up to tablet and desktop. Mobile is where most of the traffic reads, so it should be the source of truth, not an afterthought.

Three quick checks before I call a page done:

Text never smaller than 16px on the phone frame.

Every button and link at least 44px tall for the thumb.

No fixed heights on sections that hold text, or long copy clips the moment someone edits a word.

Build the phone first and the desktop almost designs itself.

A small Framer habit that saves me hours on every template:

Build your text styles and color styles before you place a single section. Not after.

When they are defined up front, every heading, body, and button pulls from one source. A client wants the brand blue swapped or the type scale tightened, and it is one change, not forty. It also makes the template genuinely editable for the buyer, which is the difference between a listing people keep and one they refund.

I learned this the slow way over years of design and illustration work: systems first, decoration second. What is one small habit that saves the rest of you the most time?

The first-screen test for portfolio sites.

After 19 years designing and building, the portfolio pages that convert almost always pass one test: everything a client needs to decide is on the first screen. My name, what I make, who I make it for, and one clear action. That is it.

The ones that lose people tend to open with a long intro animation, a hero that only says a name, or a wall of tools before any proof.

A quick check I run on every build: load the page, count to three, then ask whether a stranger knows what I do and what to do next. If not, the first screen is doing too little.

Curious what the rest of you lead with on the first screen.

A small Framer habit that saves me hours: I build the mobile breakpoint first, then scale up.

Most people design desktop, then fight to squeeze it into 390px at the end. Flip it. Lay out mobile first with a clean stack and real content, then add columns and breathing room as the screen grows. Auto-layout does the heavy lifting and the desktop almost designs itself.

Two knock-on wins: my type scale stays honest because small screens punish oversized headings, and clients open the site on their phone first, so the view they judge me on is the one I built with the most care.

What is your default, desktop-first or mobile-first?

The corner radius trick I wish I had learned sooner.

Nested cards look off when the inner and outer radius do not agree. The fix is one line of math: outer radius = inner radius + the padding between them.

An 8px inner card with 16px of padding wants a 24px outer radius. Line those up and the corners nest cleanly instead of pinching at the edges.

It costs nothing and it is the fastest way to make a Framer layout feel considered.

The fastest way to lose a Framer template buyer: messy layer names.

A polished template can still feel broken the second a buyer opens it. Not because the design is weak, but because the layers read Frame 412, Group 7, Copy of Copy 3.

Buyers do not admire your template. They edit it. If they cannot find the hero heading in ten seconds, all your polish is invisible.

Before I publish anything, I do one pass:

1. Rename every layer to what it is: Hero heading, Pricing card, Footer CTA.

2. Make text and image slots obvious, so swapping content never breaks the layout.

3. Delete hidden and orphaned layers so the file is not a maze.

Twenty minutes of work. It is the difference between a refund and a five-star review. The build is what you show. The handoff is what you actually sell.

Your preview is doing more selling than your template is.

I spent this morning going through the marketplace feed properly, and most previews lose the buyer before the build ever gets a chance. Three patterns I kept hitting:

1. The reel cycles six templates and names none of them. Someone wants to ask about one and has to describe it from memory. Put the name on every frame.

2. The clip opens on a logo, a title card, or a frame that has not finished loading. That is your best second gone. Open on the strongest section of the actual site.

3. The hero asks before it earns. A contact form above the fold with no credential, no result, no proof anywhere near it. High intent niches can carry a form early, but only after something makes the visitor believe you.

None of this is about build quality. Most of these templates are well made. It is about whether a stranger can decide in two seconds. The one that is easiest to judge usually gets the click.

A quick tip for the animated hero everyone is shipping right now.

Animated WebGL and video heroes look incredible, and they are also the fastest way to tank your mobile scores and lose motion-sensitive visitors. Three things I always do in Framer before I call a hero done:

1. Add a prefers-reduced-motion variant that swaps the animation for a clean static frame. Framer respects the setting, so nobody gets forced motion.

2. Pause anything heavy once it scrolls offscreen, so it is not burning GPU below the fold.

3. Paint a lightweight poster image first, then load the effect. The page feels instant even on a slow phone.

Same wow, none of the tax. What is your go-to trick for keeping a heavy hero fast?

One habit that makes a Framer template read as expensive: pick one spacing unit and let everything snap to it.

I work off an 8px base and only allow gaps of 8, 16, 24, 40, 64. No 13, no 27, no eyeballed one-offs. It feels rigid for about ten minutes, then it becomes the difference between a page that looks designed and one that looks assembled.

The real trick is setting those as variables before you place a single section, not after. Retrofitting spacing is where the hours vanish. Decide the rhythm up front and sections just drop in and sit right, and anyone remixing the template inherits that discipline for free.

19 years in and this is still the first thing I lock before layout. What is your base unit?

The most common Framer mistake I see: putting the layout inside the component. Component internals do not respond to breakpoints. So the moment your grid, your column count, or your section padding lives inside a component, you have locked it. Then you build a second variant just to get one column on phone, and now you maintain two of everything. The fix is a boundary. The component owns the item. The page owns the layout. Card, accordion row, testimonial, logo tile: component. Grid, columns, gaps, alignment: page. Do that and responsive is just changing the column count per breakpoint. No variants, no detaching, no duplicate maintenance. 19 years in design and I still catch myself doing it the wrong way round when I am moving fast.

A fast hero beats a fancy one.

One habit that lifted my template sales: I stopped shipping heroes with a huge background video or a heavy image above the fold. On mobile that is the first thing Google measures (LCP) and the first thing a buyer feels.

What I do now: a poster image first, video lazy-loaded after it, hero art exported as WebP and sized to the actual breakpoint, and no font blocking the first paint. The hero looks identical and loads in a fraction of the time.

If you sell templates, a fast first screen is a feature buyers can feel even if they never read the specs.

A small illustration trick that makes a flat Framer hero feel human

Most SaaS heroes I see are technically clean but emotionally flat: headline, screenshot, button. After years of illustration work, the fix I keep reaching for is one restrained vector accent, not a full scene. A single spot illustration behind the headline, or a light line motif along one edge, adds warmth without stealing from the message.

Three rules I hold myself to so the art helps instead of hurts:

1. One accent per fold. If a visitor notices the art before the headline, it failed.

2. Match the stroke weight to your type. Thin display type next to a heavy illustration line reads as two different brands.

3. Export as SVG and watch the fold weight. A hero that loads slow undoes any charm the art added.

Been applying this across a vector set I am building and the lift in how finished a page feels is bigger than the effort. Happy to look at anyone's hero if you drop it below.

One change that made my Framer builds feel more premium: I stopped animating every section on scroll.

When everything fades and slides in, nothing stands out and the page starts to feel heavy. Now I pick two or three moments that actually earn attention (the hero, one product row, the final call to action) and let the rest just be there.

The effects you keep hit harder, and the page feels faster because the browser is doing less work on every scroll.

If your site feels busy but you cannot say why, try deleting half your appear effects. Most of the time you do not miss them.