Web Design Basics
87 articles
You’ve typed it a hundred times. font-size: 16px, margin: 8px, width: 320px. But stop for a second: what does px stand for, and why…
You measure something in inches, then the spec sheet in front of you is written in millimeters. Now what? The short answer: one inch…
Two screens can carry the exact same specs on paper and look nothing alike in person. The reason usually comes down to one number.…
You design something bright and clean on screen. It prints, and the greens look muddy, the blues fall flat. That gap is the whole…
Print a photo and it looks blurry. Set your gaming mouse and the cursor flies off screen. Same three letters, two totally different headaches.…
Pick the wrong CSS unit and your text stays frozen while a low-vision reader begs their browser to make it bigger. That single choice…
That frosted glass look on Apple’s macOS Big Sur menus and Microsoft’s Windows 11 panels? It has a name. Glassmorphism is a UI design…
In 2019, a single Dribbble post by Alexander Plyuto changed how thousands of designers thought about depth in digital interfaces. The concept blew up…
Most websites have too much going on. Too many buttons, too many colors, too many things fighting for attention at the same time. Minimal…
Not every site needs to stretch and squish to fit every screen. Sometimes the smarter move is building separate layouts, each one made for…
Every website you visit has a layout system holding it together. Most of the time, that system is a grid layout. A grid layout…
A 13px margin here, a 15px gap there, a 20px padding somewhere else. That is how most interfaces end up looking inconsistent, and nobody…
Most people center everything. And most compositions end up looking flat because of it. Understanding what is the rule of thirds in design changes…
Ever wonder why some layouts feel instantly clear while others make you squint and guess? The answer is usually spacing. Understanding what is proximity…
Every design team hits the same wall eventually. The product grows, screens multiply, and suddenly buttons look different on every page. That is the…
Most teams confuse these two. They use “style guide” when they mean “design system,” then wonder why their product looks inconsistent across three platforms.…
UX design shapes how people interact with products. It’s not just about making things look good. It’s about making them work. The term comes…
Every app you’ve ever rage-quit had a UI problem. Every app you love probably nailed it. So what is UI design, and why does…
Most people use the terms interchangeably. They’re not the same thing, and confusing them costs time, money, and sometimes an entire project. Web design…
Most people think web designers just pick colors and make things look pretty. The actual job is way more involved than that. So what…
Most people use web designer vs web developer like they mean the same thing. They don’t. One builds how a website looks. The other…
Every website you visit was designed by someone who made deliberate choices about layout, color, typography, and how content is organized on screen. Understanding…
That icon you exported from Figma this morning? It’s probably 4 times larger than it needs to be. SVG optimization is the process of…
Most developers learn how to embed SVG in HTML by copying the first method they find, then spend hours debugging why styling and animation don’t work…
Your site looks perfect in Chrome. Open it in Safari and half the layout breaks. That is the core problem cross-browser compatibility exists to…
Scroll down a page and watch the background drift slower than the content in front of it. That gap in speed is the whole…
Every logo, icon, and diagram you see rendered perfectly on both a phone screen and a 4K monitor is almost certainly an SVG file.…
Every time someone opens a web page, they see it through a viewport. Not the full page. Not the screen. Just the visible area…
If users can’t find something on your site within a few clicks, they leave. That’s the whole problem with bad website navigation. Navigation controls how…
Three horizontal lines. One tap. Every piece of navigation a site has, hidden behind the simplest icon on the screen. That is a hamburger…