[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

Catalog (/wd/)

Sort by: Image size:
R: 0 / I: 0

using aspect-ratio for image placeholders

stop letting layout shifts ruin your lcp. just set an aspect-ratio: 16 / 9 on the img tag so the browser actually reserves the space before the asset loads. helps a lot when you're dealing with some bloated cms that won't give you dimensions in the api
R: 1 / I: 1

line height on variable fonts

been messing with some newer weights lately and the default leading is such a mess. it's fine for standard static files but once you start tweaking weight via css interpolation things get weird fast. i tried a test where i locked the line height to a fixed pixel value regardless of the font-weight change. looks garbage on the heavier stems. the text just feels crushed and loses all that nice breathing room. always use relative units when you're playing with variable axes or you'll regret it during a client review. i'm trying an experiment this week to see if there's a sweet spot for a mathematical formula using cap height as the base. might try something like 1.4em + (weight * 0.001). probably overcomplicating it but standard defaults aren't cutting it for the high-contrast stuff i'm working on right now. just want to see if we can automate a decent baseline without manual overrides on every single class.
R: 0 / I: 0

ballet national de marseille's css loops are sick

Just stumbled onto this ballet site and man, those 3D CSS transforms for the text thumbnails are something else. It actually looks smooth when you hover and doesn't tank the frame rate at all. Most arts sites are such a drag with their boring ticketing grids, but seeing that huge black grotesk type paired with the sticky panels is really cool.
>Live text thumbnails use 3D CSS transforms to bend titles into circular, looping rings
The way they used those dashed borders for the content cards gives it such a sharp, editorial vibe. I've been trying to play around with similar layered stacking in my own projects but I always end up with some weird overflow issue or broken z-index. It's really impressive how they kept the touring calendar from looking like a total spreadsheet mess too. I wonder if that much heavy type is going to cause issues on slower mobile connections though.

https://abduzeedo.com/ballet-national-de-marseille-kinetic-web-design-css-type/
R: 0 / I: 0

calmaria's cross-platform layout

the way they handled foldables with that split-screen view is actually decent. it's just two halves with numbers on one side and the breathing animation on the other. i'm still skeptical about how that 60fps 3d sphere is going to perform on a low-end android watch though. does anyone know if they're using webgl for those themes?

full read: https://abduzeedo.com/app-and-web-design-calmaria-quiet-place-breathe/
R: 3 / I: 1

museum department looks alright

finally something that isn't just a chronological graveyard of dead links. im liking how they link everything back to the foundry, like seeing all the dinamo projects in one spot instead of hunting through random blogs.
>treats every piece of contemporary visual culture as an interconnected node
still skeptical about the crawlability though. looks like a nightmare for indexation if it's all just nodes and shortcuts.

https://abduzeedo.com/web-design-museum-department-contemporary-archive/
R: 0 / I: 0

text rendering for small text

been seeing way too many sites with blurry tiny captions lately. most people forget that browsers handle font smoothing differently depending on how you layer things. if you're working with a dark background and light text, the weight always looks thinner than it should. i always add this to my global css to keep everything looking crisp and even across different engines.

-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;


it's not magic but it stops that weird fuzzy look on macos. just don't use it on huge headers because it can make them look too thin. does anyone actually use font-smoothing properties anymore or is it just a habit?
R: 0 / I: 0

subtle grain overlays on flat backgrounds

i've been seeing so much noise lately where people are layering grainy textures over solid hex colors just to make them feel less sterile, but it's starting to look like digital dust and actually makes the text harder to read for anyone with visual impairments.
>it adds organic depth and warmth

but honestly, i'm worried we're sacrificing accessibility just for a certain aesthetic vibe. does the grain ever get too distracting when you're trying to focus on the actual content?
R: 3 / I: 0

that address 338 grid system

the black ink on that cream paper stock looks so sharp. i wonder if those heavy line weights would actually hold up if we tried to scale them down for something like a small mobile app icon.

https://abduzeedo.com/address-338-architecture-studio-branding-and-visual-system/
R: 0 / I: 0

optical sizing issues with serif italics

trying to match the x-height of my italic running text to the roman uprights but it's driving me insane. i'm using a variable font where the optical size axis should handle the weight shifts, but the italic glyphs look way too spindly and thin compared to the roman capitals. it's like the designers forgot that italics need a bit more presence when they're sitting next to heavy-duty romans in a long block of text. i tried manually bumping the weight axis up by about 50 units, but then the strokes get all weird and thick where they shouldn't be. now it just looks like a printing error i also messed with the weight and width axes together to try and beef them up, but the kerning is totally trashed now. everything looks bloated and it's ruining the whole hierarchy of the page. has anyone figured out a way to lock the x-height visually without destroying the delicate stroke transitions? i've been staring at this paragraph for two hours and it's starting to look like garbage.
R: 3 / I: 1

vlc redesign is just fan art

saw that video by juxtaposed earlier and it's honestly depressing that it isn't an actual official project. seeing someone put that much brainpower into fixing a player that hasn't changed in 25 years makes the current ui look even more ancient. i don't care if it's not real, the way they handled the interface changes is exactly what we need. it's such a waste to see good design work just sitting there as a concept video. i can't imagine how hard it would be to actually implement any of this without breaking all the legacy codecs though. do you think anyone at videolan even looks at these kinds of redesigns?

article: https://blog.master.dev/i-redesigned-vlc-after-25-years/
R: 0 / I: 0

tightening tracking on uppercase subheads

Someone's really out here using standard letter spacing for tiny all-caps labels. It looks so sloppy when the characters are drifting apart like that. it's literally just a one or two percent negative tracking adjustment and it fixes everything.
R: 3 / I: 0

touchdesigner generative stuff for montreal jazz

saw this concept for the montreal jazz fest earlier. using touchdesigner to generate trumpet forms based on sound waves sounds cool in theory but i'd be worried about the load. that node-based approach for banners and transit posters seems like a nightmare to keep consistent across so many different physical assets. the idea of infinite variations is fine for a digital screen but managing all those different outputs for things like enamel keychains or woven wristbands sounds like a tracking disaster. it's basically just using generative patterns to hide a lack of fixed brand guidelines. that tall condensed font they used looks okay enough for a display face, and the hand-drawn lettering helps with the jazz vibe. but i don't see how you maintain any actual brand recognition if no two touchpoints look the same. it's all fun until someone asks for an exact hex code match on a print run and you can't find it in the procedural mess. seems like more of a motion graphics flex than a real scalable system.

link: https://abduzeedo.com/visual-identity-montreal-jazz-festival-concept/
R: 2 / I: 1

subtle color overlays for grainy textures

i've been using this trick to stop those grain overlays from looking like cheap garbage on top of images. just slap a semi-transparent color over your noise pattern in the css to match the site's theme.
.grain {background-color: rgba(20, 20, 25, 0.15);mix-blend-mode: multiply;}

what color are you guys using for the grain on dark mode?
R: 3 / I: 1

kurppa hosk's work for alleima is actually so clean

i was just looking at this new identity for alleima and i love how they didn't just go for a generic corporate look. the way they used that molten orange against dark steel blue feels really grounded, especially since it's meant to work on things like plywood shipping crates and even hard hats. seeing the details about those technical binders with the martensitic stainless chromium steel specs made me think about how much effort goes into making sure a brand actually survives a warehouse environment. it's rare to see someone design for such heavy industry without it feeling messy or overly aggressive. i wonder if that customized neurial typeface holds up as well in a high-glare outdoor setting as it does on the screen though. do you think that much orange is too distracting for safety gear?

article: https://abduzeedo.com/alleima-inside-kurppa-hosks-visual-identity/
R: 0 / I: 0

finally something besides Inter

Found another list of independent foundries that actually have some soul. Most of these are doing much weirder, expressive stuff than the usual safe-bets we see on every SAAS landing page. I'm tired of seeing the same five grotesque families everywhere. A few of these might actually make me never touch Inter again which sounds great until I realize how much a massive variable font file weighs down a site. It's all very expressive and hard to ignore, but honestly, I worry about the legibility when things get too weird. Some of these faces look like they'd be a nightmare for long-form reading or anything with tight leading. I love the idea of moving away from the 'safe' look, but I can't imagine using some of these for a client who actually wants people to read their content. Too much personality for a basic UI probably. Still, it's better than another boring sans-serif clone. Most of this stuff is just too high-contrast for a standard grid system.

more here: https://webdesignerdepot.com/5-creative-type-foundries-you-should-know-about/
R: 3 / I: 3

lenticular eyes for that slovenian festival

the lenticular printing on those posters is such a flex but seems like a nightmare for production budgets. i'm not sure how they even handled the transition to the animated social clips without it looking tacky.

link: https://abduzeedo.com/editorial-design-words-eye-crtomir-just/
R: 0 / I: 0

cuberto's magma site is overkill

glTF models from blender paired with GSAP scrolltrigger. honestly looks smooth but i bet that payload size kills mobile users. pretty sick use of though, even if it is just another flashy web3 thing

more here: https://abduzeedo.com/cuberto-unveils-magma-web-design-interactive-3d-ui/
R: 0 / I: 0

that maggi soup badge idea is wild

matúš hnát went full scrapbook with those color blocks and that river barge stamp. it's a lot of heavy lifting for indesign and illustrator to make all those layers look like actual linen texture without it getting muddy. do you think that much halftone work even holds up when printing on cheap paper?

found this here: https://abduzeedo.com/inside-matus-hnats-book-design-peter-esterhazy/
R: 3 / I: 1

linen binding on that Hickmann monograph looks sick

That grey linen and hot foil combo is such a flex. I'm obsessed with the way they used a two-column grid for the bilingual text to keep everything from looking cluttered messy, but I wonder if those full-bleed spreads actually hold up well on heavy uncoated stock without some weird ink bleed.

https://abduzeedo.com/editorial-design-fons-hickmann-posters-slanted/
R: 3 / I: 3

using em units for margin bottom on text blocks

I'm so tired of seeing devs hardcode pixels into every single text element. It makes it impossible to scale the whole type system when a client wants to bump the base size up. If you use ems, the vertical rhythm actually stays intact because the spacing scales with the font size. I saw this one site today where the margins were totally disconnected from the font scale and it looked completely broken on mobile.
>the margins are just fixed pixels everywhere
It's such a lazy way to handle layout. Just use relative units so the hierarchy doesn't collapse when the viewport changes. It takes like two seconds to set up a proper rhythm with CSS variables and some basic math.
R: 0 / I: 0

that podium red spotlight thing

Saw this Humbleteam project for Podium today. That Pantone 185 red is so loud it almost hurts my eyes after looking at it too long. They're using this huge red disc in the wordmark that breaks right past the cap height and baseline. It looks cool on those motion reels with the dark stage backgrounds, but I can't imagine trying to use that much heavy red for a full dashboard without it getting exhausting. The way they did the business cards with the blind-debossed letters is pretty clever though.
>the letter O expands into a solid Pantone 185 red disc
It's a nice touch for print, but I wonder how they handle the actual UI components. They're calling it this modular system with these interface cards, but if everything is tied to that one circular spotlight motif, things might get messy fast when you have more data on screen. It works for a brand identity showcase, but I'd be worried about accessibility or just general visual noise in a real working environment. The technical P monogram from the radial coordinates is definitely the best part of the whole thing.

https://abduzeedo.com/humbleteam-unveils-podium-uiux-design-web-system/
R: 3 / I: 1

aspect-ratio for responsive images

i've been getting so tired of seeing layout shifts during page loads because the browser doesn't know how much space to reserve for an image before it actually downloads. using the aspect-ratio property on your img tags is such a simple fix for preventing that annoying jumping effect when users are trying to read.

img {width: 100%;height: auto;aspect-ratio: 16 / 9;}


it really helps the user stay focused on the content without the page jittering under their fingers as things pop in. does anyone else still rely on padding-bottom hacks for this?
R: 3 / I: 0

optical sizing on inter variable font

tried adjusting the opsz axis manually in figma but it's not reflecting the actual glyph weight changes like it does in my browser inspector. looks like it's just scaling the whole thing instead of actually swapping the cuts.
>it doesn't look different at all. i've tried checking the 'axes' panel in the font settings but nothing happens when i slide it down to 12. it's making the fine details disappear on the larger weights too. don't trust figma's variable sliders for actual optical sizing because it's clearly just a visual hack right now. does anyone know if there's a plugin that actually forces the correct glyph set?
R: 0 / I: 0

css mask image with svg paths

Trying to use an inline svg path as a mask for some overlapping div layers but the opacity is behaving weirdly on mobile. I tried using the mask-image property with a standard url reference but it keeps clipping the edges of my text content.
R: 3 / I: 1

scrolling blur on that pov site is wild

that scroll effect where it blurs/sharpens to mimic focal lengths is actually sick. uses some crazy technical diagrams and wireframe vectors too but keeps it looking clean as hell. wonder how much of a performance hit that is on mobile though. looks like a nightmare for low end devices.

found this here: https://abduzeedo.com/web-design-point-view-anna-hodarkovskaya/
R: 3 / I: 1

sociodesign's owl project is kind of a vibe

That asymmetrical grid on the Rambling Muse site is actually working for me. It's nice to see something that isn't just a standard vertical stack of cards. They used all these monoline illustrations of espresso cups and stuff which makes it feel less like a generic template.
>juxtaposing vertical architectural photography, circular pull-quote badges, and horizontal food spreads
The layout looks great on desktop but I'm worried about how that whole sidebar navigation is going to behave once you start adding more content. It might get cluttered fast if the hierarchy isn't perfect. The pink and charcoal palette is pretty soft too. too much white space though

found this here: https://abduzeedo.com/editorial-web-design-rambling-muse-sociodesign/
R: 3 / I: 1

that pensatori irrazionali site is doing too much

the mix of heavy helvetica now with those renaissance angel etchings is such an eyesore. using three.js for ribbons while trying to keep sixty frames per second sounds like a performance nightmare once you add real content. it's all cool until the lenis scroll breaks on a mobile browser. anyone actually tried building something this heavy without killing the battery?

more here: https://abduzeedo.com/web-design-pensatori-irrazionali-digital-atelier/
R: 3 / I: 1

text-wrap property for long headlines

been trying to fix those awkward gaps in large hero text lately. instead of manually adding breaks or messing with widths, i've just been using text-wrap: balance; on the headers. it works great for titles up to a few lines but don't use it on huge blocks of body copy because it'll look like a total disaster.
h1 {text-wrap: balance;}

does anyone actually use text-wrap: pretty yet?
R: 3 / I: 0

tight kerning on small body text

spent all Tuesday fixing a client's accessibility disaster. they decided to use a tiny 12px font with almost zero letter spacing because it looked high end or whatever. it's literally unreadable for anyone without perfect vision. you can't just squeeze characters together and call it an aesthetic choice when the letters bleed into each other. i had to manually bump up the tracking on every single paragraph in the main body. it looks much more legible now, even if it takes up a bit more horizontal space. turns out minimalist design shouldn't mean invisible impossible text.
R: 0 / I: 0

indesign resume templates are kinda messy

Found some free layouts for indesign but most of them look way too busy for an ATS. That one linear template with the bold type is pretty cool though, even if it's three pages long which feels like overkill too much.
>a detailed creative layout may work well when contacting a studio directly

found this here: https://speckyboy.com/free-adobe-indesign-resume-templates/
R: 3 / I: 0

ochi's slide mechanics are overkill

that whole idea of using overlapping slides for the entire site architecture sounds like a nightmare for accessibility.
>the entire web design architecture around overlapping slide mechanics is pretty wild if you actually try to use it on mobile. i don't know how they even handle the scroll position without it feeling broken, especially with those eye spheres tracking the cursor everywhere. it's alright for a portfolio piece but i'd hate trying to build a real client site like that. does anyone else think these heavy transition-based layouts are just becoming too much of a gimmick?

more here: https://abduzeedo.com/inside-craft-ochi-design-web-design-obys-agency/
R: 3 / I: 1

shadow blur radius on cards

i'm seeing so many devs just cranking up the blur to 50px or 100px thinking it looks soft, but it actually just makes the interface feel unanchored and messy. when the shadow is that huge it loses all sense of depth and just looks like a smudge on the screen instead of a real layer. does anyone else find that tight, dark shadows actually help with cognitive load?
R: 0 / I: 0

line height on serif headings

can't get this tight without making the descenders look like they're touching the next line. tried negative margins but it's just breaking the layout on mobile. anyone found a better way to handle it for multi-line headers?
R: 1 / I: 0

keyboard shortcuts are a nightmare to implement properly

been thinking about this since i saw that breakdown on custom shortcuts for web apps. it's way more than just adding a listener to the window. managing focus and making sure you aren't breaking existing browser defaults is such a headache. testing every single edge case sounds like a soul crushing task if you're working on a large scale app. i've tried implementing some basic ones before and ended up overriding something important by accident. it's easy to underestimate how much research goes into just a few keybindings. does anyone actually find these useful in a production environment or is it mostly just for show?

https://blog.master.dev/how-an-accessibility-designer-adds-keyboard-shortcuts-to-a-web-app/
R: 1 / I: 0

atlas for mac landing page is actually clean

Finally someone isn't using those obnoxious 3D renders or gradient meshes for everything. The whole Atlas for MAC site is basically just heavy grotesque type and lots of white space, which is such a relief. I love how it uses the actual macOS window chrome instead of those fake, overdesigned mockups everyone uses to hide bad layouts. Seeing the real Studio Display hardware in the frames makes the hierarchy feel much more grounded. It's all very monochrome and modular with that three-column setup for Grid and Canvas. Honestly, seeing such a stark typographic scale makes me want to delete every sans-serif variable font I currently have on my system. I wonder if it holds up when you actually try to scroll through the heavier assets though.

found this here: https://abduzeedo.com/web-design-atlas-mac-alexey-sekachov/
R: 3 / I: 1

timeless type's interactive playground looks like a mess

That 3D circular dial sounds like a nightmare for performance once you actually load it.
>transforming traditional specimen evaluation into an intuitive, tactile creative workshop
I don't see how anyone can judge weight or tracking accurately with all those flight telemetry widgets and moving parts in the way. Probably just looks good on a high-end macbook

found this here: https://abduzeedo.com/timeless-unveils-interactive-web-design-timeless-type/
R: 0 / I: 0

keyframes looks pretty clean for finding motion work

Finally found a place that isn't just scrolling through random vimeo feeds or social media noise. It uses geist for the typography which is a nice touch and the filtering by 2d or 3d makes it easy to skip the stuff i don't need. I'm curious if the lack of follower counts makes it harder to find the bigger studios though. Just tried playing around with some of the qatsi studio clips and the quality is insane.

link: https://abduzeedo.com/web-design-keyframes-motion-graphics-service/
R: 2 / I: 0

claude making videos via gsap is getting weird

saw that thing about claude spinning up mp4s by basically just running a headless browser and stitching frames with ffmpeg. it's pretty wild that people are using opus 5.5 to generate actual motion graphics files instead of just writing css. saw the numbers too, like how gsap downloads spiked to 7 million in a single week because everyone was tagging them in these ai demos. it's clever for making quick clips, but i don't trust that homemade engine stuff at all. if you aren't prompting it specifically for gsap, it just rolls its own logic which sounds like a nightmare to debug later. sure, it looks fine when it's baked into pixels for a video, but trying to maintain that kind of custom code on a live site seems like asking for trouble when browsers update. i can't imagine how much work it'll be to fix the bugs once those ai-generated animations are actually in production. anyone tried using this workflow for anything besides just making pretty social posts?

full read: https://webflowmarketingmain.com/blog/animating-with-claude-and-gsap
R: 3 / I: 3

onsite semimono feels like a clever fix for that annoying whitespace

i'm actually pretty into how they used proportional spacing with those mono-style serifs to stop letters from looking so stretched out, especially since the 828 glyph count sounds massive. it's definitely better than dealing with the usual gaps in standard monospace when you're trying to build a clean editorial layout, but i wonder if those pill-shaped badge frames might get too distracting in a dense data dashboard?

more here: https://abduzeedo.com/type-design-onsite-mono-sociotype-foundry/
R: 0 / I: 0

letter spacing on variable fonts is getting out of hand

everyone's just cranking up the tracking to 0.05em now to look premium or whatever. looks like a typo to me tbh.
R: 0 / I: 0

another generic list of fonts for logos

saw this list going around and it's mostly just stuff we've used for a decade. they're pushing Helvetica and Roboto like it's some big revelation. the advice on spacing is basically common sense.
>Use high-quality fonts.
it's basically just telling people to pay for licenses instead of using free stuff. seeing 'tremos' or 'miller' as the go-to for serious brands is pretty standard, but there's nothing really new here. honestly, it's all just the same old classics rebranded for a new year. does anyone actually use 'quicksand' anymore without it looking like a preschool flyer?

more here: https://speckyboy.com/logo-typeface-font/
R: 3 / I: 1

text-wrap balance for uneven headlines

stop using those hacky manual line breaks in your headers. if you're dealing with weirdly short lines in a hero section, just use the property. it keeps the width even so you don't get that one lonely word hanging out on its own line. works great for big display fonts where the rhythm matters.

h1 {text-wrap: balance;}


tbh it's a lifesaver when you don't want to manually tweak every single breakpoint. just don't use it on huge blocks of body text or your browser will crawl. keeps the typographic rhythm much cleaner without all the extra work
R: 3 / I: 0

artah's new look is actually decent

the matte black jars and that sharp serif font for artah are working. it's way better than those generic pharmacy vibes everyone uses. i like how they used the thick white paperboard with glossy embossing to make it feel expensive instead of just medical. the high-contrast typography makes the ingredient lists much easier to scan on a crowded shelf. still wondering if that monochrome palette is going to get lost once it's surrounded by all the colorful junk in boots stores. hope the embossed text doesn't smudge during shipping do you think this kind of heavy tactile stuff scales well for digital?

link: https://abduzeedo.com/how-two-times-elliott-reimagined-branding-design-artah/
R: 0 / I: 0

figma variable modes for light and dark themes

i'm tired of manually swapping tokens every time i switch frames. it's way faster to just use 'variable modes' but setting up the initial collection is a total headache. does anyone actually use nested modes or is that just overkill?
R: 1 / I: 0

fraktion mono is trying way too hard to be pretty

juri zaech is trying to make monospaced type look less like a terminal with these neo-grotesque curves.
>modern typography release proves that code fonts belong in bold display roles
it's got all those fancy opentype features like slashed zeros and case-sensitive punctuation, but i don't know if the 'clean tension' actually works for heavy body copy. seems like it'll just look messy on a low-res screen once you start using the black weight. anyone used pangram pangram fonts in a real production environment yet?

article: https://abduzeedo.com/juri-zaech-unveils-fraktion-mono-typography/
R: 3 / I: 0

college degrees vs youtube university

Degrees are basically useless now when you can just use AI or watch tutorials to learn actual building skills. It's getting harder to justify that tuition cost when most students are just competing with youtube anyway.

link: https://webdesignerdepot.com/web-design-schools-have-a-giant-youtube-university-problem-and-ai-just-made-it-worse/
R: 1 / I: 0

subtle color transitions for dark mode

i've been struggling with how jarring it feels when users toggle dark mode and everything just snaps instantly, so i started using a global transition on the body to make the background and text colors bleed into each other more softly. it works best if you keep the duration short though, because anything longer than 0.4s starts feeling laggy heavy and sluggish for the user.
body {transition: background-color 0.4s ease, color 0.4s ease;}

does anyone else find that animating the actual border colors of inputs during this switch makes the whole interface feel more cohesive?
R: 3 / I: 2

swedish book catalogue is actually insane

Taking apart twenty-five different books just to use their actual pages in a catalogue seems like a massive headache for production.
>Workers sorted and collated original printed leaves by hand.
The idea of using Tid for the typography is cool, but I can't imagine trying to manage that much physical paper weight variation without everything looking messy.

more here: https://abduzeedo.com/svensk-bokkonst-masterclass-editorial-design/
R: 0 / I: 0

bigcommerce limits are such a trap

BigCommerce forcing you into a higher tier once sales hit certain limits is going to kill so many small shops. I was just playing around with Webflow for a side project and the lack of transaction fees on the Plus plan sounds way better than dealing with those GMV caps.
>forces stores up a tier once trailing sales pass its plans' limits
It's such a headache when you finally start making money and then suddenly your overhead spikes for no reason.

full read: https://webflowmarketingmain.com/blog/best-ecommerce-website-builders-small-business
R: 2 / I: 0

webflow mcp can finally handle interactions

it's wild that webflow mcp is just running GSAP under the hood now for those native animations. i don't know if it'll actually handle the complex stuff without breaking, especially since
>not all GSAP features map one-to-one with Webflow Interaction properties
does anyone think this is actually usable for anything beyond basic hover effects?

found this here: https://webflowmarketingmain.com/blog/interactions-gsap-mcp
R: 2 / I: 1

a24's layout is actually decent

saw some stuff today that reminded me of why scale matters. A24 is doing that thing where they just bury the menu under huge film titles to let the moving images do the heavy lifting.
>Large type leads the eye, while the image beneath it sets the mood.
it's fine for a film studio but i don't think i could pull off that much empty space on a client site without them calling me lazy incompetent. does anyone actually use those thin lines like the white desert site for structure or is it just too much work to align everything?

full read: https://abduzeedo.com/web-design-inspiration-01/
R: 3 / I: 1

one-person agencies are finally happening

really tired of seeing people obsess over memorizing yet another framework when we should be focusing on actual product launches. it's all about being a builder now instead of just writing boilerplate.
>The age of the one-person software company has arrived.
the idea that we can replace entire teams with just one person is wildly optimistic if you actually have to handle scaling or security later on. i don't see how anyone handles the business side without at least some help once the product grows beyond a prototype. it's fine to skip the boring parts, but someone still has to manage the mess. what's the plan for when the codebase gets too big for one brain?

found this here: https://webdesignerdepot.com/traditional-web-development-is-dead-and-honestly-good-riddance/
R: 0 / I: 0

cuberto's zelt project is a bit much

the 3d isometric stuff feels like it belongs in a different decade. i get the vibe they're going for with those brass coins and safe vaults, but it's hard to imagine that scaling for a real product. using Noi Grotesk for headlines looks okay, but all that motion and the spring-loaded toggles seems like a nightmare for actual usability. if you've got users managing github permissions and payroll data, they probably don't want a cinematic experience every time they click a button. it's definitely too much fluff for a tool that's supposed to be functional. do you think anyone actually builds heavy enterprise dashboards like this?

article: https://abduzeedo.com/inside-craft-zelt-web-design-cuberto/
R: 3 / I: 2

optical sizing on variable fonts

been messing with some new weights and honestly the auto-adjusting strokes in optical sizing is such a lifesaver for small captions. it's way better than manually tweaking tracking every single time to make things readable. it actually works when you pick the right font files.
R: 2 / I: 0

obys' library layout is wild

i was just looking at that obys project and honestly i can't decide if it's brilliant or just pure chaos. they ditched the whole home
> category
> item flow for this layered stack where every single page stays visible on screen at once. it's trying to mimic a physical desk with different paper textures, but i keep wondering about the cognitive load when you're actually trying to find something specific.
> All the pages are visible at once.
it feels so much more tactile than a standard grid, and being able to reorder the stack is such a cool idea for exploration, but it seems like it would get overwhelming if the library ever actually got large. i love the vibe of paper-like surfaces, but does anyone else think this only works for small curated collections?

article: https://www.awwwards.com/obys-design-books.html
R: 0 / I: 0

resn's click-and-hold thing is wild

>holding down the cursor triggers dynamic transformations
That whole mechanic with the WebGL shaders looks incredible, but I can't imagine trying to build that for a client who actually needs to find info quickly. It's too much of a sensory overload for a standard landing page.

article: https://abduzeedo.com/resn-website-masterclass-web-design-marcus-brown/
R: 3 / I: 2

gestura looks pretty interesting if you're into that old-style vibe

i was just scrolling through sociotype's update and saw they finally dropped gestura. it's got those wedge terminals that remind me way too much of galliard, which is cool but also a bit much for my taste. the contrast in the display optical size looks almost aggressive. i'm curious about how the text grade actually holds up though. they're claiming some crazy level of legibility with those open apertures and robust stems, but high-contrast serifs always make me nervous in long blocks of copy. seeing forty-two styles is a lot to manage without everything turning into a muddy mess on the page. i like that they used the sociotype journal to test it out under real pressure. if the italics are as calligraphic and fluid as they say, it might be fun for pull quotes. still, i'm skeptical about using those sharp incisions for anything other than big headlines. sounds like a headache to kern properly in a dense layout.

article: https://abduzeedo.com/sociotype-foundry-unveils-gestura-typography-design/
R: 3 / I: 1

cuberto's iceberg concept is actually kind of genius

i was just looking at this kelvin zero project and i can't stop thinking about that transition from the bright glacier tip down into those deep cobalt and obsidian layers. it feels so much more human than the usual boring corporate layouts we see for cybersecurity stuff. using space mono specifically for the technical metadata and biometric prompts is such a smart way to signal security without making the whole interface feel unreadable or intimidating. i love how they're leveraging webgl and blender scenes to create that sense of depth, especially with the glassmorphic overlays and those refractive crystal assets. it makes the digital access part feel much more tangible and real. but i am a little worried about the performance trade-offs when you start layering heavy volumetric lighting and custom 3d models like that across different viewports. even if they're scaling it for mobile, it seems like such a lot of heavy lifting for a browser to handle smoothly. it's beautiful, but i wonder if the loading friction might actually hurt the user experience for someone just trying to check their status quickly. do you think this kind of high-fidelity motion is sustainable for more standard enterprise dashboards?

more here: https://abduzeedo.com/inside-craft-kelvin-zero-web-design-cuberto/
R: 1 / I: 1

aspect-ratio for responsive images

I'm tired of seeing layout shifts every time an image loads because someone forgot to set dimensions. Use this in your CSS so the browser reserves the space before the asset even arrives.
img {width: 100%;height: auto;aspect-ratio: 16 / 9;}

>it's making my performance scores tank
it's actually just bad implementation
R: 0 / I: 0

kerning pairs in illustrator vs indesign

i've been stuck moving glyphs around in illustrator all morning and it's driving me insane. indesign actually respects my manual kerning adjustments when i export to pdf but illustrator just resets everything to the default metrics. it's such a waste of time to redo the same work every time i need a vector asset. do you guys just stick to indesign for all your final type setting?
R: 3 / I: 0

canela and cabinet grotesk combo

saw this layout for that japan book earlier. it's pretty clean if you're into that minimal aesthetic. using 'Cabinet Grotesk Medium' for the body at twelve points keeps things readable enough even with those huge margins. i like how the red pull quotes pop against the white space, but i'm not sure about that 420 by 595 page size. it's a massive spread to manage if you're actually printing something this heavy.
>The grid uses two wide text columns split by slim white gaps.
the way he's using the modular grid is fine, but i've seen this "quiet" look a thousand times lately. it's basically just playing with whitespace and hoping for the best. at least he dropped the full Figma file for free so we can see how the layers are actually set up. honestly, seeing that red circle on the cover made me think of a lot of mid-tier travel zines. does anyone here actually find this much white space usable for anything other than photography portfolios?

https://abduzeedo.com/editorial-design-minimal-book-layout-design-ashutosh-rana/
R: 0 / I: 0

vitra's gift finder layout is pretty neat

that floating grid with all the icons drifting around looks fun but i can't imagine trying to manage that much manual positioning for a huge catalog without it becoming a nightmare.
>fine-tuning the positioning and scaling of every single element
it's basically manual labor disguised as art. do you think anyone actually uses those personality tags like "bookworm" or is it just fluff?

full read: https://abduzeedo.com/web-design-vitra-gift-finder-build-amsterdam/
R: 3 / I: 2

everything's turning into a single text box

i'm getting tired of seeing menus and tabs just vanish for some empty prompt field.
>we're gaining incredible speed-but we may be losing something unexpected
it's fine if it works for simple tasks, but i don't want to have to type out every single navigation step like i'm talking to a chatbot. good luck finding anything without a sidebar do you guys actually prefer navigating via search/prompt over a standard menu?

more here: https://webdesignerdepot.com/how-the-prompt-box-is-swallowing-website-interfaces-whole/
R: 1 / I: 0

grain texture on flat vector illustrations

i've been seeing so much of this lately where designers just slap a noise overlay on top of every single vector graphic to make it look more organic. it feels like a lazy shortcut to hide the lack of actual depth or interesting lighting in the work. it's getting hard to tell if someone actually put effort into the shading or if they just used a grainy filter to mask the simplicity. has anyone else noticed this becoming a bit of a crutch for mid-tier illustration styles?
R: 3 / I: 1

rocket type system's emotional weight

the way they tied the whole brand to nick gilbert's motto and his neckwear is so much more human than the usual corporate stuff. it's wild how they're using custom delta hints just to keep things sharp for mortgage charts in 'WNTL', but i wonder if that level of technical calibration is even possible when you're working with standard web fonts.
>the naming honors Nick Gilbert, the late son of the company's founder
i love the idea of a typeface having this much personal history behind it, though i'm always skeptical about how much that sentimentality actually carries through once you're staring at dense data cards all day.

article: https://abduzeedo.com/typography-design-rocket-type-system-typetype-foundry/
R: 3 / I: 1

another custom animation library

saw this thing for stringtune today and the whole katana/sensei theme is a bit much. they're saying it uses mostly css and attributes to keep things lightweight but i'm skeptical if it actually beats the standard stuff when things get heavy. anyone tried running this through a stress test yet?

link: https://www.awwwards.com/stringtune-for-core-web-animations.html
R: 2 / I: 2

shadow opacity for depth in cards

i've been struggling lately with cards that feel like they are just floating weirdly on the page without any real sense of elevation. instead of using a heavy dark shadow, i started layering two different shadows with very low opacity and different blur radii to mimic how light actually hits objects. it makes the interface feel way more organic and less like a bunch of stickers slapped onto a background. it's a small change but it really helps users understand the hierarchy when things are overlapping. does anyone else find that single large shadows always look a bit muddy on high-res screens?
R: 0 / I: 0

using photoshop for resumes is a disaster

it's such a bad idea to use photoshop for text-heavy layouts when you've got inidesign right there. even if they have some free figma or illustrator templates, i don't see how anyone survives the easy nightmare of editing all that copy later.

full read: https://speckyboy.com/free-resume-templates-designers/
R: 3 / I: 2

kerning issues with italicized serif bodies

I'm losing my mind on this client project because the text looks so broken in certain paragraph blocks. We're using an old-school Garamond specimen and the italics are just. bad. Every time I hit a specific sequence of characters, the spacing falls apart and creates these huge gaps that look like someone used a hammer on the kerning. It's driving me insane. I tried manually adjusting the letter-spacing in CSS but it just makes the rest of the line look like a mess. I even attempted to use
font-feature-settings
to force some OpenType alternates, but it didn't fix the specific overlaps in the lowercase 'f' and 'i' combos. It looks totally professional amateurish right now. I can't just ignore it because the whole point of this brand is "elegant heritage." If I have to manually wrap every single word with a span tag, I'm going to quit. I'll probably end up just swapping to a different font and lying about the client's request
R: 3 / I: 1

letter spacing on small headers

trying to fix this tiny 14px uppercase label for a client. i tried setting letter spacing to 0.1em but it looks way too gappy now. looks like the font is just too thin for that much air. swapped it to a slightly heavier weight but still feels off. maybe i should try negative tracking instead? tried -0.02em but it's basically unreadable on retina displays. honestly if people can't read a single line of text at this size they shouldn't be on the site anyway. i dont think changing the font family is an option because client is obsessed with this specific brand typeface. looks super amateurish when the kerning is this broken. anyone else dealt with this specific weight/size combo before? tbh it feels like a losing battle without custom glyphs
R: 0 / I: 0

some free minimal fonts to check out

found this list of some decent free typefaces while digging for assets. Giraffey looks like it'd work well for that fashion client i'm working on, and I've been messing around with Gidole lately for a side project too. Dublin Minimal seems pretty sharp if you need something monospaced but probably too much for a big body of text. Not sure about Athena though since you only get the regular style for free which is such a pain.

link: https://speckyboy.com/free-minimal-fonts/
R: 2 / I: 0

zeroheight maturity model feels a bit arbitrary

>AI Readiness
Adding AI to a list with foundations and governance seems like a stretch. I don't see how you even measure impact without a much longer test duration or more concrete metrics than just adoption.

full read: https://bradfrost.com/links/post/design-system-maturity-model-zeroheight/
R: 0 / I: 0

subtle border radius on high density data tables

trying to use 4px on all cells but it looks weirdly disconnected from the outer container. i tried increasing the padding to compensate but now the rows feel too chunky and lose that compact look. does anyone actually use a larger radius for nested borders or is it better to just stick to sharp corners here?
R: 2 / I: 2

landing page builders are still messy

Landingi is such a joke if you're trying to hide the vendor.
>the client login stays under new. landingi.com
It's basically useless for branding if the URL gives them away immediately. Duda seems okay for the full rebrand, but I bet their template gallery looks like absolute trash without custom pricing. Hard to trust any of these when the hierarchy is so broken.

https://webflowmarketingmain.com/blog/white-label-landing-page-builders
R: 2 / I: 1

designing with old references

Saw some stuff about using Tschichold's Penguin Books style for a redesign. It's cool to see that full-bleed CSS utility being used as an example too, but I wonder if leaning too hard on those classic bookish vibes makes everything look modern dated.

full read: https://robinrendle.com/notes/an-abundance-of-inspiration/
R: 3 / I: 1

cheating with video layers for transitions

Using videos with blend modes instead of heavy shaders is such a smart way to save on performance.
>It's the cheat: videos layered with opacity and blend modes.
I wonder if that trick would actually hold up on mobile without killing the battery life though.

https://www.awwwards.com/designing-for-an-identity-that-shapeshifts.html
R: 0 / I: 0

line-height on tight multi-column layouts

stuck on this client project where the columns are super narrow. if i bump the leading to make it readable, the whole block looks like a mess of white space. tried setting a fixed pixel value but then it breaks when the viewport shrinks.
>the text is basically just a vertical stripe
it's making the whole layout look totally broken on mobile. i've been playing with relative em units for a bit now but the rhythm feels off. anyone else dealing with weirdly tight column widths lately?
R: 1 / I: 0

stock libraries are basically just ai sludge now

>the human-made web isn't dead yet
it's getting harder to find anything that doesn't look like a fever dream of six fingers and melting backgrounds. 25 sites is a decent list but i'm skeptical about the commercial use licenses on half of them. probably still gonna end up using unsplash anyway anyone actually checking these licenses anymore?

https://webdesignerdepot.com/25-places-designers-can-still-find-free-non-ai-images-for-commercial-use/
R: 3 / I: 1

color palette tools are getting a bit bloated

I was scrolling through some design resources earlier and noticed how much these generators are trying to do now. Coolors is basically an entire suite at this point with the Tailwind helpers and contrast checkers included. It's fine, but it feels like a lot when you just need a quick hex code. Grabient is alright if you're stuck on hero sections, but I still usually end up writing my own CSS for gradients to keep things clean. ColorHub is actually interesting though because it shows the palettes in actual UI layouts instead of just squares. It helps avoid that mistake where a palette looks great in a vacuum but fails the moment it hits a real interface. Color Hunt is still basically just browsing through moods like pastel or neon, which works for some things. I don't know if relying on these 'hand-picked' collections actually saves time or if you just end up staring at the screen for an hour. It's easy to get lost in the presets and forget about actual accessibility requirements.

article: https://www.hongkiat.com/blog/best-color-palette-gradient-generator/
R: 3 / I: 1

wp plugins for accessibility are such a joke

another list of plugins that basically just slap on some ARIA labels or fake focus outlines without fixing the actual markup. even the alt text ai thing is just a way to drain your credits for mediocre descriptions.
>It won't fix every issue, but they can help you learn and improve your site.
tbh if you're relying on a toolbar for color contrast instead of just writing proper css it's pretty bad

article: https://speckyboy.com/wordpress-plugins-website-accessibility/
R: 0 / I: 0

brendan dawes on escaping ai sludge

saw that bit about using craft and judgment to beat average outputs.
>craft+judgement+people+time is the formula
it's a nice sentiment but feels a bit vague idealistic when you're staring at a layout with terrible kerning and zero hierarchy. i'm still trying to figure out how that actually scales for anyone not doing high-end documentary tech like his Eno project.

full read: https://bradfrost.com/blog/post/adaptability-curiosity-creative-breadth-with-brendan-dawes/
R: 0 / I: 0

blueprint animations are actually decent

that custom line art following the cursor for the floor plans is pretty slick. i'm not sure if that kind of soft ink effect would get too heavy if someone has a massive project archive to scroll through.

https://abduzeedo.com/web-design-kononenko-architectural-website-artem-shcherban/
R: 1 / I: 0

lucide is such a lifesaver for my react projects lately

I just stumbled on this list of icon sites and lucide's packages for stuff like svelte and astro are honestly so convenient. Iconsax looks pretty wild with that ai generation feature too, but I wonder if the sheer volume makes it hard to stay consistent without a huge Figma plugin.

full read: https://www.hongkiat.com/blog/icon-pack-websites-designers-should-bookmark/
R: 1 / I: 1

mozilla chickening out on project nova

mozilla's basically pulling back from all those bold changes for firefox because they're scared of everyone hating rounded corners. it's a massive total mess when you see them ditching the best ideas just to avoid the usual internet freakout. i don't think project nova is even going to feel different if they keep playing it this safe. anyone actually still using firefox for work?

found this here: https://webdesignerdepot.com/firefox-is-getting-its-biggest-redesign-in-years-then-mozilla-got-cold-feet/
R: 1 / I: 0

radial gradient borders on cards

everyone's obsessed with those thin strokes but try using a 2px radial-gradient instead of just border-color. it makes the edges look way more organic than that fake glassmorphism nonsense. i'm testing it on some simple div containers today to see if it actually holds up without looking messy
R: 0 / I: 0

fixing cursor's terrible taste with markdown skills

tried installing that oklch-skill for my tailwind v4 projects because i'm sick of the muddy colors agents always spit out. it's supposed to handle the lightness manipulation and stuff automatically, which sounds nice but i don't know if it'll actually hold up on complex dark mode themes.
>it has no sense of taste
honestly most of these agent outputs look like generic bootstrap junk anyway. anyone tried that swiss design skill for grid layouts yet?

more here: https://www.hongkiat.com/blog/ai-skills-coding-agent-design/
R: 0 / I: 0

art deco font list is mostly fluff

>You'll have a head start on creating a timeless look.

another generic list of freebies that's basically just marketing hype for things we've seen a million times. senilità and catallina aren't exactly hidden gems, so why bother? anyone actually using these for anything besides a cheap shitty cafe logo?

https://speckyboy.com/free-art-deco-fonts/
R: 1 / I: 0

asymmetric grid layouts for landing pages

been looking at too many perfectly balanced grids lately and it's making my eyes rot. try building a hero section using an uneven 12-column setup where the main content is shoved way off to one side, centered left. it'll look broken until you actually see it work
R: 1 / I: 1

subtle shadows on buttons

been seeing way too many designers using that massive, blurry glow effect for buttons lately. it looks like someone spilled ink on the screen. i saw a landing page yesterday where the shadow was so huge you couldn't even tell where the button ended and the background started. it's making everything look muddy and unreadable. shadows should be tight and slightly offset to give some depth, not act like a neon halo. honestly, it's lazy just bad execution of elevation. if you can't see the edge of the element, why is it even there? i prefer much smaller, darker blurs that actually mimic how light works in real life. it's weird seeing such high-end hardware being used to render basically zero detail. has anyone found a decent way to bake these shadows without killing the performance on mobile?
R: 3 / I: 1

inp rates are dropping again

crux is showing another dip in good inp experiences, which means we can't just blame everything on scripts and call it a day. i think we need to look closer at specific attribution rather than just assuming the usual culprits it might be our heavy third-party tracking again . anyone else seeing weird spikes in their recent audits?

more here: https://csswizardry.com/2026/09/web-perf-wednesday-008-good-inp-rates-keep-falling/
R: 3 / I: 2

death of serif hierarchy

everything is starting to look like a single, flat layer of text. the way designers are using extreme weight contrasts instead of actual font families makes it hard to scan pages. it feels like we are just reverting to brutalist defaults because i can no longer tell where one section ends and another begins lol
R: 0 / I: 0

browser apps are getting too good

some guy's actually considering ditching his local installs for just a browser. he's talking about figma and even photoshop online like they're perfect enough to replace desktop powerhouses. i'm pretty skeptical because once you need heavy lifting, web standards still feel like a joke. ime seeing more of this trend though and it's getting annoying.

more here: https://speckyboy.com/browser-based-apps-enough-web-designers/
R: 2 / I: 1

center text with single line clamp

stop using overly complex margins to handle text overflow. use
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
to create a cleaner multi-line truncation effect. it keeps your card components consistent without breaking the layout. it works on almost all modern browsers now. ⚡
R: 3 / I: 1

variable fonts vs static weights

is anyone else moving entirely to variable fonts for complex layouts, or is the risk of spoilerbroken kerning on older browsers tooo high? i feel like static files are becoming obsolete a relic of the past.
R: 0 / I: 0

letter spacing on small sans serifs

can't get the tracking right on this 10px font without it looking like a mess. tried increasing the letter-spacing by 0.02em but now the characters are practically disconnected. anyone have a go-to value for tiny body text?
R: 1 / I: 1

ai agents are getting way too much hype lately

reactbench is trying to rank models on actual production quality but i doubt it's better than just looking at the output yourself. codiff might be handy for reviews if you hate github's default diff view though. anyone actually using openchamber for real work yet?

link: https://www.hongkiat.com/blog/designers-developers-monthly-07-2026/
R: 3 / I: 1

struggling with font pairings for bento grids

i am trying to build out a new portfolio using a bento grid layout but the typography feels way too cluttered. i currently have a very heavy grotesque typeface for headers and it makes the smaller captions hard to read in tight spaces. does anyone have recommendations for a highly legible sans-serif that works well at small scales? i wanna avoid the overused inter/roboto combo if possible. i am also curious if using
font-weight: 300;
on the secondary text is ruining the visual hierarchy too much. any advice on balancing high contrast weights would be appreciated.
R: 2 / I: 1

tiktok minis are basically turning the app into a browser

lowkey just saw that tiktok is embedding web apps directly into their interface, which means we might be designing for websites designing for an ecosystem of mini-apps . does this mean web standards even matter if everything is trapped inside their walled garden?

article: https://webdesignerdepot.com/tiktok-is-quietly-putting-web-apps-inside-tiktok/
R: 1 / I: 1

rendering 3d models directly in figma

finally some way to avoid jumping into blender just to check lighting. it's using three.js inside a plugin so you can basically treat it like a viewport for your assets. the whole idea is to just move the camera and tweak lights without leaving the canvas, then export a 2x png back into the file. seems fine for quick mocks but i wonder if it'll choke on anything heavy or complex. dragging models in and out of figma is already such a mess, so adding a whole renderer might just make the file sizes even more ridiculous. does anyone actually use cinema 4d for web assets anymore?

link: https://tympanus.net/codrops/2026/09/13/building-depth-designing-and-developing-a-3d-renderer-inside-figma/
R: 8 / I: 8 (sticky)

What's new in web design?

Starting a discussion thread for /wd/.

This board focuses on Web Design. Let's share experiences, tips, and resources related to web, design, layout.

What are you working on? What challenges are you facing? Share your thoughts!