How do I remove the blur effect from my CSS?
I removed but the blur is still there. Any ideas?
filter: blur(5px);
Does work for removing blur from modals?
backdrop-filter: none;
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
If you’ve ever stared at a blank wondering where to start—or felt overwhelmed by picking colors, spacing, or typography—trust me, that’s totally normal… especially for us developers.
In this lecture, we’re going to simplify design and show you how it’s actually built on and —things you're already great at as a developer.
Let’s kick things off with a story.
He's a backend engineer who spent three months building the most elegant, efficient API you've ever seen.
Clean code, perfect documentation, lightning-fast response times.
But when it came time to build the frontend interface for his API testing tool, Marcus froze.
"I don't know the first thing about design," he told me.
I said something to Marcus that changed his entire perspective: "You already think like a designer. You just don't know it yet."
You see, Marcus was approaching design like it was some mystical art form that required years of artistic training.
But the truth is, good design follows —principles that align perfectly with how developers already think about structure, organization, and problem-solving.
By the end of this lecture, you'll understand exactly what Marcus learned: design isn't totally about having an artistic eye.
It's about applying systematic principles that create order, clarity, and visual harmony.
And as someone who already understands the importance of clean, organized code, you're perfectly equipped to master these principles.
Design isn’t just about looks—it’s about , just like code. You write clean code with structure and logic. Great design works the same way.
Messy code confuses developers. Messy design confuses users.
Once you treat design like a , not just an art, it becomes way easier to learn.
Now, let's learn the seven core principles that will improve how you approach interface design.
Remember, these aren't artistic concepts—they're logical, systematic approaches to creating better .
This is perhaps the most impactful change you can make, and it costs you absolutely nothing.
Proper spacing makes everything look more instantly.
Think of spacing like indentation in your code.
When you properly indent your code, it becomes easier to read, understand, and debug.
The same principle applies to your interface.
White space creates visual breathing room that helps users process information more easily.
Here's what proper spacing accomplishes: it groups related elements together, separates unrelated elements, and creates a visual hierarchy that guides the user's eye through your interface.
Just as you use consistent indentation throughout your codebase, you should use consistent spacing throughout your interface.
Just like how you structure your code with headers, functions, and comments to make it scannable, your interface needs hierarchy to help users understand what's most important.
Visual hierarchy is about creating levels of importance through size, color, position, and contrast.
Your primary call-to-action button should be the most prominent element on the screen.
Secondary actions should be visible but not competing for attention.
Supporting text should be present but subdued.
Think about how you write documentation.
You use H1 headers for main sections, H2 for subsections, and body text for details.
Your interface should follow the same .
The most important elements get the visual equivalent of H1 treatment—larger, bolder, more prominent.
Less important elements get progressively less visual weight.
When users land on your page, their eyes should naturally flow to the most important element first, then to the secondary elements, and finally to the supporting details.
This isn't about making things pretty—it's about making them and easy to understand .
Misaligned elements look sloppy, period.
Everything should line up with something else.
This principle is as important in design as proper syntax is in programming.
When elements are properly aligned, your interface automatically looks more polished and professional.
Alignment creates invisible relationships between elements and helps users understand the structure of your interface.
Use grids, both visible and invisible, to create order.
Most design tools, including Figma, have built-in grid systems that make alignment effortless.
Think of grids like code formatters—they enforce consistency and make everything more readable.
Center-aligned text works well for headings and short statements, but left-aligned text is almost always better for body copy and longer content.
Mixed alignment can create visual chaos, just like inconsistent indentation creates code chaos.
Contrast isn't just about light and dark—it's about creating clear distinctions between elements so users can easily between different types of content.
Poor contrast is like using variable names that are too similar to each other.
Just as userData and userDate can cause confusion in code, elements with insufficient contrast cause confusion in interfaces.
Users shouldn't have to strain to read your text or figure out what's clickable.
Color contrast is the most obvious type, but you can also create contrast through size, weight, and spacing.
Your primary buttons should contrast strongly with the background.
Your text should be easily readable against its background. Interactive elements should be clearly distinguishable from static content.
Test your contrast ratios using tools like WebAIM's contrast checker.
Aim for at least 4.5:1 for normal text and 3:1 for large text.
This isn't just good design—it's good and ensures your app works for everyone.
Color in design is like naming conventions in code—when done well, it makes everything clearer and more intuitive.
When done poorly, it creates confusion and chaos.
Start with a simple palette: one primary color, one or two secondary colors, and a range of grays.
Just as you wouldn't use dozens of different naming patterns in your code, you shouldn't use dozens of different colors in your interface.
Your should represent your brand and be used for the most important actions—like your main call-to-action buttons.
Use it sparingly to maintain its impact.
can support your primary color or indicate different states like success, warning, or error.
is your workhorse color. Use different shades of gray for text hierarchy, borders, and backgrounds.
A well-chosen set of grays can carry most of your interface, with your brand colors providing accents and emphasis.
Remember, color should improve meaning, not just decoration.
Work with these conventions rather than against them.
Typography in design is like code comments—it's how you communicate with your users.
Poor typography makes your interface hard to read and understand, just like poor commenting makes code hard to follow.
Start simple: choose one or two fonts maximum.
One font for headings, one for body text, or even the same font for both with different weights and sizes.
Google Fonts offers excellent free options that work well for most applications.
Establish a typographic hierarchy similar to how you structure your code documentation.
Your H1 should be significantly larger than your H2, which should be larger than your body text.
Use consistent sizing throughout your application—if your button text is 16px on one screen, it should be 16px everywhere.
Line spacing matters more than you might think.
Text that's too tightly packed is as hard to read as code with no line breaks. Generally, aim for line heights between 1.4 and 1.6 times your font size for body text.
is another tool in your hierarchy arsenal.
Bold text naturally draws attention, so use it strategically for important information, just like you might use capital letters or in code comments to highlight crucial information.
This final principle ties everything together.
Consistency in design is like following coding standards across your entire project—it makes everything more predictable, maintainable, and professional.
Use the same button styles, colors, fonts, and spacing throughout your app.
Create a small set of and stick to them religiously.
This isn't about being boring—it's about creating a cohesive experience that feels intentional and well-thought-out.
Think of consistency as your , similar to how you might follow ESLint rules or a specific code formatting standard.
Once you establish these rules, every design decision becomes easier because you're not starting from scratch each time.
Document your design decisions just as you document your code.
Write these down and refer to them as you build.
Consistency builds trust.
When users learn how your interface works in one place, they expect it to work the same way everywhere else.
Breaking these patterns without a good reason creates confusion and frustration.
Now that you understand these seven principles, it's time to put them into practice.
Remember, like learning any new technical skill, mastery comes through , not perfect understanding from day one.
Start by auditing your current interface if you have one.
Look at each principle and ask yourself:
If you're starting from scratch, begin with one principle at a time.
Focus on in your first iteration.
Get that right, then move to , then , and so on.
Practice makes progress.
The more you consciously apply these principles, the more naturally they'll become part of your design thinking.
Eventually, following these guidelines will feel as automatic as writing properly indented code.
Remember, you already have the logical thinking skills needed for good design.
These principles simply give you the framework to apply that thinking to visual problems.
You've now learned the seven fundamental principles that separate amateur interfaces from ones.
More importantly, you've learned that good design isn't about artistic talent—it's about systematic application of .
These aren't artistic concepts that require years of training to master.
They're practical guidelines that you can start applying immediately to improve your interfaces.
Every time you
You're thinking like a designer.
The next time you build an interface, you won't be guessing or hoping it looks good.
You'll be intentionally applying that create order, improve usability, and build user trust.
You'll approach proven principles the same way you approach coding challenges — methodically, logically, and with confidence.
Your users don't need another beautiful interface that doesn't work well.
They need functional, clear, and pleasant interfaces that help them accomplish their goals.
With these seven principles in your toolkit, you're fully equipped to give them exactly that.
You've got this. 👋
