The Only 5 Web Design Skills That Actually Matter (2026)

Great video but as a developer, DO NOT VIBE CODE A PAYMENT PROCESS! I work with LLMs in my coding, and there are so many things they get wrong that look correct at first glance. You don't want to be the cause of a data breach. Find a third party service and go with their recommendation, it's much, much safer for your users.

As a designer its hard to find quality content that contains all the aspects which designers need ... thank you

Type Questions: 1. How do I pick the right fonts for my project? (fontshare, uncut, etc. Based on branding and desired messaging) 2. How do you set up your fonts? (Cohesive and -predictable yet tasteful, not robotic.) i. Typescale System: 1. Font Size Base font size (<p> = 16px) Scale by ratios (major third = 1.25x) p = 16px, h6 = 20px, h5 = 25px, etc. 2. Letter Spacing p = default h6 = -0.5% h3 = -1.5% h1 = -2% 3. Line-height p = 150% h4 = 130% h2 = 110% h1 = 100% Grid System: 12 columns for desktop 8 columns for tablet 4 columns for mobile Figma --> select background --> layout guide --> column --> 75 width, 20 gutter, center Spacing System: All spacing is placed on the page based on a grid using a multiple of eight. Figma --> select background --> layout guide --> grid --> multiple of eight (8, 32, 126, etc.) Visual Hierarchy Guide eyes from most important to least important info. Proximity – Put related things close together as if they are on the same page. Size – make more important things larger and less important things smaller (image text, etc.) Contrast – use size weight or color or opacity to make things stand out Alignment – good alignment of text, images, etc. will show a clear structure and help guide the eye. Color Use color theory to find matches. 1. Limit your color palette. (Use max 2-3 colors for a project) 2. Give each color a job. 60 30 10 rule a. 60% primary for text and background; black white grey) b. 30% secondary different backgrounds, visuals, texts, etc. c. 10% accent for things that really need to stand out like CTAs Use opacity rather than adding more colors to your design palette. This will help create a more fluent design and a more simplistic and aesthetic look. 1 well used color beats 5 poorly used colors every day. Prioritize contrast 1. Highest contrast = 21:1 2. Passable contrast = 3:1(on larger text) to 4.5:1(on smaller text) 3. Failed Contrast = 2.9:1 or lower This is the contrast between your background and the foreground text. If the contrast is too low prospects won’t be able to read it easily and it will decrease conversion. Figma has a contrast checker --> select text to check --> fill --> contrast icon --> drag and look for the pass icon. Don’t build color palettes from scratch. You can check a websites color palette by right click --> inspect element --> 3 dots top right --> more tools --> CSS Overview --> Press Capture --> scroll down Code (optional but helpful to get to the top 1%) HTML (structure) CSS (style) JavaScript (interaction) If using Wordpress (PHP basics are helpful) Conversion Design for conversion not aesthetics. Sometimes they go hand in hand. Sometimes they don’t. Every page needs to have 1 goal. Get the person to buy, get a lead magnet, or book a call. The whole point of the website should be to land one of these CTAs. Use clear, strategic, visible CTAs. Should be able to spot them within a second of entering the page. Use the above tactics to achieve this. Good rule of thumb is CTA in hero, navigation, and 1 every 2-3 seconds as a user skims. Trust, clarity, and feelings should be the main points to target through the site. People buy from brands that they feel have messaging clearly directed at them, brands they can trust, and brands that give them a good feeling. They must know, like, trust, and FEEL something from your brand. 1. Speak to their motivations. 2. Show clear value. 3. Show them they are not alone/others have succeeded. Thanks for the awesome video. Just posting my notes here for later. This was so helpful to me!!

This is one of the best, most informative web design videos I’ve ever seen on YouTube. Kudos.

I Just found the best video on web design. I am in UI UX field since 2 years, Never saw this kind of information in one video.

The easiest way to tell if a website was designed by a professional web designer is: is it incredibly annoying to use because there are random "features" thrown in that just get in the way, like images flying up out of nowhere and taking your attention away from useful information? I prefer websites made by either noobs or backend engineers who understand that UI is only there as a means for delivering the information the user cares about.

This is high quality material. Way to go.

Many of your videos are master classes, this is one of them.

Check out 50 tips and tricks to level 🆙→ /rRFD6tENX2U

This is super helpful! I had no idea about css overview in developer tools. Game changing knowledge! Thanks man!

One note about color: using opacity alone for generating shades doesn’t work well for maintaining perceived hue between shades. You also need to use hue shifting!

I was sceptical at first, but I have to say, this sums up almost everything. Kudos.

11:42 This can be dangerous. It's also not future-proof if you don't understand what you're doing.

Fantastic video and info. As a designer for the last 15+ years, ALL of these learnings I had to learn myself the hard way. Every tip here is high value with absolutely nothing i would cut out. This is now my new go to for mentoring early designers and those PMs that want to get better at design, thank you!

The information you've been sharing on your videos are goldmine. Thank you and God Bless You! You have no idea how it boots my confidence when I implement these in my projects.

Woah exactly what I’ve been struggling with lately thank you so much man for this video it has helped me understand a lot more about basic design rules

Dude.. I typically don’t leave comments .. But I wanted to make sure you know how much I appreciated and learned from this video .. well done!

everytime I've watched one of your videos, I feel so confident that I really can be a webdesigner. So thanks Chris, it's highly appreciated! Dankeschön :)

Great video! I have been developing websites for over two decades, yet I still learned new things. Anyone who works in front-end development should watch this video. 🙏

A clear and comprehensive guide, not just for beginners, but for all designers. Even after 4 years in Web & Product design, I still find some things that I will incorporate in my process - simply, learning never stops. I appreciate your work a lot, you're taking the web design profession to the next level!