No items found.
No items found.
Wall of Love

CF #25: The essential landing page hero checklist

Key points


  • A captivating landing page hero section requires excellent execution in all 4 of the following areas: Content, Layout, Visual Identity, and Accessibility
  • To shrink the heck out of any image file, following this protocol: 1) Resize 2) Convert to WebP 3) Lossy compress
  • Take a week off planning, structure, and your goals and let your genuine curiosity lead the way. You'll rediscover your genuine interests
  • Automate your mundane tasks with, track your habits with Everyday, and sketch ideas with the Moleskine dotted notebook
  • Don't feel bad if you can't get through a book. Most nonfiction books should've been blog posts
  • The worst mistake a dancer can make is think
  • Find out what feeds you internally by rediscovering your inner child

An interactive checklist for those who design and build landing pages, image file size minimization, the freestyle week, no-code tools and much more

Creatorfuel helps you master high-value skills of the digital era. Learn more.

weekly creatorfuel
Actionable tips & tools for creative minds.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.

3 effective tips

1) How to create a captivating landing page hero section that makes a lasting impression

This was a subscriber request from Bertan – a great question about a fun topic that I love.

I created an interactive checklist you can use every time you want to put together a high-impact landing page hero:


A screenshot of the landing page hero section checklist page

I'll put the checklist here as well:


✅ Headline Convey the value you provide. Make it specific and useful. WeWeb does this well.

Pro tip: Overused sayings like “For creators, by creators” are not useful or memorable. Instead, say what the product/service is OR say what you can do with it OR say what you get.

✅ Subheadline Elaborate on the headline. Focus on the "how". WeWeb example.

✅ Imagery Give a clear preview. Allow the user to envision it. (A great example).

✅ Proof Show off any real results or testimonials.

✅ Call-to-action (button, form etc) make it specific and easy. (A great example).


✅ Spatial Elements are aligned, sized, and spaced consistently. Consider using the 8pt spatial system where everything (sizes and spaces) is a multiple of 8.

✅ Hierarchy There is a clear visual hierarchy. A good visual hierarchy makes it so that users encounter information in an order that is consistent with the intended meaning of the content.

✅ Grouping Related elements are grouped together using proximity, boundary, or similarity.

✅ Consistency The layout is consistent internally and externally.

External consistency example: Your buttons look like buttons.

Internal consistency example: Your style of buttons is similar throughout the layout.

✅ Scannability The layout is scannable. Use the 5-second test with a team member/friend.

Pro tip: You can make a layout scannable by including the most pertinent info in headings, decorated text, first few words of paragraphs, imagery, lists, and tables.

Visual identity

✅ Motif There is a visual idea that repeats in multiple formats and gives the design an identity.

The motif here is rectangles.

The motif here is hand-drawn lines.

✅ Balance The layout's balance aligns with the intended mood.

Asymmetrical layouts are dynamic, playful, engaging.

Symmetrical layouts feel stable, static, and authoritative.

Off-balance layouts create a feeling of tension, intrigue or discomfort (very viable).

✅ Typography The choice of font aligns with the intended mood. The concept of mood lines should help you select appropriate typefaces.

✅ Color The choice of color aligns with the intended mood. Keep in mind that there is even variety in color meaning within the same hue. Use Plutchik’s color wheel of emotions.

✅ Visual treatment Similar to motifs. Are you styling other parts of the design in a way that aligns with the intended mood? We're talking borders, corners, shapes, patterns, textures, shadows.

E.g. Round corners feel playful. Sharp corners feel more stern.


✅ Contrast Foreground and background elements have enough contrast (Check using WebAIM).

✅ Typography Words are comfortably discernible. Shape and sizing are paramount here. Learn more about type accessibility here. Consider investing in Stark to check type accessibility.

✅ Touch targets Buttons and links are big enough on both mobile and desktop (easy to activate). Consider investing in Stark to more easily check touch target accessibility.

✅ Focus order Users can easily tab through your page's elements. Learn more about focus order here.

✅ Disabilities Can users with disabilities use this layout? Users can have visual, auditory, and motor disabilities.

For visual disabilities: Ensure proper HTML structure and alt-text (H1, H2, etc) for screen readers.

For auditory disabilities: Ensure the presence of subtitles for videos and audioclips.

For motor disabilities: See "Touch targets" and "Focus order" above.

2) My 3-step process for shrinking the heck out of any image file (while maintaining quality)

Firstly, a few scenarios where this is useful:

  • You're building an image-containing web page and need the page to load super fast (only fair to your users)
  • You're uploading a profile photo and there's a size limit
  • You're sending files to someone and there's a size limit

Step 1: Resize

Does your layout require that your image be a massive 2200x3500px?

Probably doesn't!

Use the "resize" tool on and shrink it down to dimensions that make sense for your case.

An interior design image that was resized (1.11MB to 201KB)

Step 2: Convert to a smaller image format like WebP

Still in, go to your resized image, under which you'll see a "to WebP" button.

An interior design image of which the format was changed from JPG (201KB) to WebP (119KB)

Step 3: Optimize (via lossy compression)

Still in, go to your resulting WebP image, under which you'll be able to click on the "optimize" button.

An interior design image that was optimized with lossy compression (119KB to 83KB)

Done. Still looks good right?

An interior design image file that was shrunk from 1.11MB to 83KB

3) The Freestyle Week: How to rediscover your genuine interests

At the end of last year, I suffered an abdominal hernia which forced me to be sedentary.

I hate being sedentary. So I was pretty bummed out by the situation.

At the beginning of this year, I took a week off all my projects because I lost interest in everything.

I told myself: "I'm just going to do whatever I want this week".

What happened next was remarkable.

Removing all the structure, planning, and goals allowed me to follow my genuine curiosity. I naturally gravitated toward things.

No pressure. No stress. It was an absolute blast.

So, what did I do?

  • Experimented with no-code web app development (the Creatorfuel website was my playground)
  • Mastered to automate all the mundane tasks that I hated doing
  • Hacked together a testimonial collection tool

The result:

  • Gigantic improvements as a developer. I now look forward to both design and development equally
  • Turned the Creatorfuel website into a fully custom membership web app
  • Freed up a ton of time with automation

I'm calling this The Freestyle Week and I recommend you try it.

Take a week off and let your genuine curiosity lead the way. You just might surprise yourself.

3 useful tools


I think every single person reading this could benefit from in one way or another. allows you to automate your repetitive tasks or "glue together" the tools you already use.

I've used Make to:

  • Automatically create a task in my project management tool when a certain type of email lands in my inbox
  • Add data from a fitness app to a column in Google Sheets
  • Send Telegram or Slack messages when a specific event happens on a client's website
  • Turn form submissions into content on a website

The interface is awesome and their free plan is extremely generous.

Screenshot of the UI

How you could use

  • Create a task on your to-do app from an email that you starred in your inbox
  • Save new email attachments to your cloud storage
  • Send a weekly reminder to a team member via email

2) The Everyday habit tracker

A simple and flexible habit tracker that allows you to visualize your progress. Been using it nearly every single day since 2019.

It has helped me:

  • Reduce my caffeine consumption (and a couple of other vices 🤷🏻‍♂️)
  • Improve my sleeping habits
  • Be more consistent with exercise

Here's a screenshot of my habit tracker (2257 marked habits!):

Screenshot of the UI
The Everyday App

3) A dotted notebook

Starting an idea with a quick sketch can get the ball rolling in most cases.

The dotted notebook is an absolute essential for creators.

The key here is DOTTED.

You get the cleanliness of blank pages with the structure and guidelines of a grid page. Write, sketch, draw, do anything.

Here's my red Moleskine (there are other brands too):

A photo of my red Moleskine dotted notebook


The no-code/low-code toolkit for DIY creators who care about being able to build a fully customizable web application:

After creating my Layout Mastery course, I realized something:

I didn't want some rigid 3rd party platform to host my course (e.g. Teachable, Thinkific, Podia, etc).

I wanted to have complete control over the member experience, both visually and functionally, right down to the finest details.

So I built my own course platform (and much much more).

Here's what I used:

Figma to design the frontend

Webflow to build the frontend, visually

Memberstack for a no-code backend (user authentication, payments, dynamic content)

Hyvor Talk for ad-free, SSO, visually bespoke comments sections

Likebtn for like buttons

Fathom for easy, 1-page, cookieless analytics (no 🍪 banner needed)

Go ahead and build anything 🙌. It is now easier than ever for thoughts to become things.

3 ideas to think about

1) Don't feel bad if you can't finish a book. Here's why

I know the feeling.

You get super excited about a book. You buy it, start reading, and after just a couple of chapters, you’re already dreading reading it.

After dealing with this for years, I’ve come to the conclusion that most non-fiction books could’ve just been blog posts.

A lot of these books share a handful of ideas that could easily fit inside a 1500-word article.

I'm of the opinion that, most of the time, it’s the author’s fault for being repetitive.

So yeah, I don't worry about it anymore.

A nonfiction book that’s well done is Chris Do’s Pocket Full of Do. Every page hits you with a new idea and provides one example before moving on to the next new idea.

In any case, read what you like. If it ends up being a drag, read something else. It's way more fun that way. Keep it natural.

2) "The worst mistake a dancer can make is think" - Michael Jackson 🕺

As an introverted dude that's in his head a lot, regularly recalling the above quote helps a ton. It's applicable to nearly everything.

It has helped me realize that the answer is usually obvious and natural.

I know some overthinkers are reading this right now.

Thinking a lot just leads to anxiety and complexity.

Keep MJ in mind next time you find yourself indecisive. It works.​

3) Rediscover your inner child. You'll learn a lot about yourself

Earlier this year, I realized that I didn't know what I did for fun anymore.

"What do I do that has no outcome other than pure joy?"

So, I decided to look back at what I used to love doing as a kid.

I made the following list:

  • Collecting Yu-Gi-Oh cards
  • Playing football (soccer for N.A. readers)
  • Drawing Manga
  • Collecting marbles
  • Playing video games (WoW, Halo)

The thought of collecting Yu-Gi-Oh cards again actually had me mildly excited.

Coincidentally, Konami (Yu-Gi-Oh) had just announced the re-release of their original 24-pack booster boxes for their 25th anniversary.

Finding that out got me super pumped. So I bought a bunch of the cards I used to collect.

What happened?

I rediscovered that I love being a collector.

I started playing football a couple of times a week.

I rediscovered that I need competition.

Go ahead, make that list, and try it out.

It'll help you rediscover what feeds you internally and that may just lead to a little quality-of-life boost.​

Shower thoughts

1) Generally speaking, when you feel stupid it’s because you just got smarter.

2) People laugh about how cats love boxes, but if there was suddenly a box bigger than you in your living room, you’d probably go in it too.

3) A guy walking around with one crowbar is more suspicious than a guy walking around with three crowbars.

Via Reddit (u/jacklupin, u/yourshadowtwin, u/justnumbers8338)

weekly creatorfuel
I share tips & tools every creator should know.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.
weekly redesigns
Learn design through redesigns
Every Tuesday, I redesign something you send me and explain my exact thought process
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
“I'm floored by how much content you deliver in these emails. Again, thank you!” -Lindsey O.

Fresh Youtube videos



Have you forgotten about the fundamentals?

I’ve learned that no amount of coaching, fancy apps, “creativity hacks & tips” etc, will make up for:

  • Subpar sleep
  • Low vitamin D3 (lack of direct sunlight exposure)
  • Lack of movement (sports, resistance training, cardio)
  • Poor diet (macro and micronutrients)
  • Nonexistent stress management

Get these right first.

They are the highest impact things you can do.

Ignoring these is like a student ignoring the fundamental concepts needed to ace an exam and instead focusing on color-coding their notes, using fancy study apps, and organizing their study space with intricate decorations.

Master the basics. Everything else falls into place. full post
Aug 15, 2023

Nonfiction books are too long

Most nonfiction books should've been 1000-word articles.

I find myself abandoning a lot of books right around the 25-30% mark.

Not because they're bad, but because I fully get the gist by that point and it's right around when the repetition of examples and ideas begins.

I'm okay with abandoning a book midway now. Just a couple years ago, I would power through the whole thing in fear of missing out on some crucial ideas in the later chapters.

Now, I just have fun with it. If it piques my interest, great – I'll buy it, read the chapters that seem interesting, get what I came for and move onto the next one.

I think a lot of these authors are just trying to meet some sort of quota. I dunno.

There's elegance in brevity. full post
Aug 14, 2023

A note on this weird cold plunge trend

So many of these "gurus" telling us to take cold showers and cold plunges 😂 😂

If you’re tired all the time:

  • Go get your bloodwork done and see what you’re deficient in
  • Get outside. Get some damn sun
  • Sleep well
  • Use your mind to build something – It'll energize you

Stick to high-impact basics. These little micro-optimizations aren't going to change anything.

Enjoy your hot showers 🔥🚿 full post
Jul 21, 2023