
An interactive checklist for those who design and build landing pages, image file size minimization, the freestyle week, no-code tools and much more
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:
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.
✅ 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.
Firstly, a few scenarios where this is useful:
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.
Still in ezgif.com, go to your resized image, under which you'll see a "to WebP" button.
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?
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?
The result:
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.
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:
The interface is awesome and their free plan is extremely generous.
How you could use Make.com:
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:
Here's a screenshot of my habit tracker (2257 marked habits!):
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):
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.
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.
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.
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:
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.
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)