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:

​LANDING PAGE HERO CHECKLIST​

I'll put the checklist here as well:

‍

Content

✅ 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).

​

Layout

✅ 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.

​

Accessibility

✅ 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 ezgif.com and shrink it down to dimensions that make sense for your case.

Step 2: Convert to a smaller image format like WebP

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

Step 3: Optimize (via lossy compression)

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

Done. Still looks good right?

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 Make.com 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

1) Make.com

I think every single person reading this could benefit from Make.com in one way or another.

Make.com 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.

How you could use Make.com:

• 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!):

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):

💎 BONUS RESOURCES THAT I'M LOVING:

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)