Redesigning a website for scannability from @pixeldesignlab

The creator explains that people scan websites instead of reading them and demonstrates how to improve a text-heavy design. She critiques a 'before' version, then walks through her redesign process, creating a clear hero section, adding a running text bar, and structuring content to follow the Z-pattern of eye movement. She concludes by showing the 'before' and 'after' designs side-by-side to highlight the improved scannability and user experience.

Creator: @pixeldesignlab on TikTok

Video format

Split screen

Video outline

  1. State universal user behavior
  2. Demonstrate a strategic fix
  3. Justify with a core principle
  4. Reveal the final transformation

Hook overview

A bold, relatable declaration about modern user behavior that establishes a common problem and frames the creator as an authority.

Title hook

Make Your Website Scannable 👀

Verbal hook

People don't read nowadays.

Visual hook

A split-screen view showing a speaker in the bottom frame and a website design mockup in the top frame, creating a dynamic layout for an educational video.

Hook strategies

  1. transformation-payoff

Payoff

A personal endorsement of the final result, which acts as social proof and validates the success of the transformation, leaving the viewer with a sense of completion and trust in the creator's skill.

Narrative framework

The Expert Redesign Framework

Narrative framework logic

To demonstrate expertise by identifying a common problem, executing a step-by-step solution, and justifying the changes with an underlying expert principle, culminating in a satisfying before-and-after transformation.

Narrative framework breakdown

  • frameworkName: The Expert Redesign Framework
  • frameworkType: Standard Narrative
  • coreLogic: To demonstrate expertise by identifying a common problem, executing a step-by-step solution, and justifying the changes with an underlying expert principle, culminating in a satisfying before-and-after transformation.
  • confidence: 95
  • pendingStatus: created

Topics: Design, Marketing, Graphic Design, Content Strategy

Concepts: Tutorial / How To, Before/After Transformation

Formats: Split screen

Elements: Screen Recording, Text Overlay, Picture-in-Picture, Graphic Overlay

Account types: Personal Brand, Brand

Transcript excerpt

People don't read nowadays. They only scan with their eyes. So what can we do to make this chunk of text easier for people to read and scan and understand what is actually going on? So we will divide it visually into two sections, and this one is called a hero section. We explain who you are, what you do, and how can you help in a clear and engaging way. I edit this section better those two sections. It's gonna be a running text on a website. And so now we continue with text on the left side because that's where our eyes naturally land. We naturally read in the z pattern from left to right. We need to create a storytelling so people can just scan. They don't spend a lot of energy. Remember, we are lazy, and we read in that z pattern. I must say, I would be intrigued to work with you if I see this website.

193,300 views