🔗 Want my full process for finding clients and delivering elite websites? Sign up for the waitlist: https://selfmadewebdesigner.com/waitlist It was tough but I fit 10 years of web design expertise in a 7 minute video. Turns out you know just about everything you need to know about designing websites with three core principles: layout, color, and typography. I talk about the importance of visual hierarchy over the outdated F-pattern, show you the 60-30-10 rule for picking color palettes, and highlight the significance of readability in typography. We also provide insights into good conversion practices that go beyond aesthetics to drive user engagement and sales. Stay updated with the ever-evolving web design industry and find out how continuous learning can keep you ahead of the game. Listen now to level up your web design skills. Check out the episodes web page! https://selfmadewebdesigner.com/free-web-design-project-management-template/ Other helpful resources: 🔎 14 Ways to Land Freelance Clients https://youtu.be/jGDrKhaLWyw?si=QyZTo7qPnLs0Ztiw 📈 Web Design Trends 2025 https://youtu.be/DRmnkaWQp4o 💻 Check out my free Web Designer Starter Kit course and get your web design journey started on the right foot! https://selfmadewebdesigner.com 👨🏼💻My favorite website builder: https://selfmadewebdesigner.com/showit 🎙️ Want to follow along on the podcast? https://podcasts.apple.com/us/podcast/self-made-web-designer/id1498724299 Say hey on insta!https://www.instagram.com/chrismisterek/ 00:00 Introduction: 10 Years of Web Design in 7 Minutes 00:12 The Three Pillars of Web Design: Layout, Color, and Typography 01:19 Mastering Layout: Visual Hierarchy and User Guidance 02:20 Effective Use of Color: Accessibility and Contrast 03:47 Typography: Enhancing Readability and User Experience 04:42 Conversion Practices: Designing for Results 06:00 Designing for the Right Audience 06:23 Continuous Learning: Staying Ahead in Web Design 07:03 Conclusion and Next Steps Here are some links to the equipment I use for my podcast and videos. These are affiliate links. Clicking on these will help me keep the channel and podcast running Camera - Panasonic Lumix G7https://selfmadewebdesigner.com/camera Lens - Samyang 12mm F2https://selfmadewebdesigner.com/lens Audio Interface - UA Apollo Twin Duohttps://selfmadewebdesigner.com/interface Microphone - Shure SM7Bhttps://selfmadewebdesigner.com/sm7b Lighting - El Gato Key Lighthttps://selfmadewebdesigner.com/lighting Recording Software - ecammhttps://selfmadewebdesigner.com/ecamm #selfmadewebdesigner #webdesign #freelancewebdesigning #webdesigner #webdesignlife #webdesignerlife #uxdesign #uxdesigner #uxuidesigner #careerchange #careeropportunities #freelancewebdesign #inmy30sandlovingit #careerchangeinspiration #selftaughtwebdesigner #selftaughtwebdesign #webdesignmentor #learnwebdesign #wpbeginner #programminglife #programmerslife #codingdays #code #programming #codinglife #newpodcast #techpodcast
ADVERTISEMENT
After A/B testing thousands of B2B landing pages, I discovered that fancy designs are made for designers, not ordinary users, and usually generate much lower conversion rates 💁
In 24 years of web design, I have to disagree with the ghost button comment. A ghost button can be especially useful for Cancel or Delete type actions. I don't want a potentially destructive action to dominate a page or a form. Instead of stop using ghost buttons all together, I think you meant to say... stop using them for primary actions.
Yess this is what matters! got tired of a design that start with "create to impress other designer" not the users and stakeholders, Simplicity Wins. Every Time.
Thank you for this. I spared you 7minutes, and thankfully you didn't try to sell me any course or affiliate link
Ghost Button is great if you have 2 buttons and you want them to click on one only. It's just not good when your button supposed to be standing out.
🏃🏼♂️➡️Learn how to master website layouts! /EF_ucfA3CJs
4:00 Important to note: visual size has nothing to do with the heading levels you should choose in HTML. You can have an H1 that's smaller than your H2s. It's about creating a hierarchy assistive tech (and thus your users) can make sense of, so use the h1 for the page title (or something close to it) and otherwise use headings to subdivide content without skipping levels (i.e. each h4 should have an h3 it belongs to, and that h3 should have an h2, etc). A lot of people get this wrong.
I understand your viewpoint and I completely agree but I have had the misfortune of meeting clients that just dont care about these things. They just want their websites to look good and "out of the box" as they put it
As a senior designer, all right except the ghost button thing, one of the first things you learn as a designer is hierarchy, you never want to have 2 buttons that are the same next to each other, and the ghost button are used in these situations, like I'm noticing right now, also YouTube did it when commenting with the buttons "Comment" and "Cancel"
Love how you tied empathy into strategy. Super insightful.
I started learning web dev a couple months ago and found this channel recently. I'm really enjoying your perspective and insight! As a viewer I do find the background music a little too loud on some the videos, but I'm enjoying the content.
Came across this video and thought the voice was familiar! I've listened to a lot of content from your podcast but had never seen this channel. Thanks for all the information and help you give out freely.
I love that you included accessibility 🙌 A lot of web designers do not even take that into account
You're a legend for making this video! Wishing you lots of success mate
great stuff man, really enjoyed the video
this video had that super smooth “easy to binge” vibe where every scene actually felt connected 😭 clean pacing, satisfying editing and zero moments that felt random or dragged out
This is top-notch content all the way through!
I just watched the full 7 minutes and this breakdown of layout, color, and typography is gold for designers at any level. The emphasis on visual hierarchy and user guidance really resonates—those fundamentals are what separate good designs from great ones. This kind of short, focused training is exactly what helpful creators should make more often. Thanks for condensing years of experience into such clear, actionable takeaways!
This is top-tier content, no question!
This completely changed the game for me!