/wd/ - Web Design

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/

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/

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/

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/

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/

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

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/

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

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/

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