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

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1748770265019.jpg (21.85 KB, 1080x608, img_1748770253_1422.jpg)ImgOps Exif Google Yandex

5e0bc No.17[Reply]

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!
7 posts and 7 image replies omitted. Click reply to view.

f092b No.1692

File: 1780441616336.jpg (198.37 KB, 1080x720, img_1780441600325_r4d3o4iv.jpg)ImgOps Exif Google Yandex

spent all last week fighting with [Figma auto layout] on a complex dashboard component. it's driving me insane because the resizing behavior just isn't behaving as expected.



File: 1781563475448.jpg (80.9 KB, 1024x1024, img_1781563468586_lm4ilgkk.jpg)ImgOps Exif Google Yandex

e0f2b No.1750[Reply]

Learn about reading network request waterfalls, identifying common network performance issues, and optimizing page rendering.

more here: https://developer.mozilla.org/en-US/blog/optimize-web-performance/

5d256 No.1751

File: 1781564194308.jpg (136.66 KB, 1024x1024, img_1781564178017_jju0vhl2.jpg)ImgOps Exif Google Yandex

i'm still struggling with interpreting the render-blocking resources in those waterfalls. it feels like every time i fix one script, another one pops up and stalls everything. are you using any specific browser extensions to help visualize the critical path?



File: 1781520559154.jpg (190.78 KB, 1024x1024, img_1781520520060_wuhlf675.jpg)ImgOps Exif Google Yandex

4c483 No.1748[Reply]

i was digging through some old dev docs and realized we almost entirely forgot abandoned using spritesheets for web animations. everyone is just using lottie or heavy svg stacks now, but there is this super niche css function that makes the old-school spritesheet method actually viable again. it opens up so many possibilities for lightweight, high-performance motion without bloating the bundle size. it's basically free performance if u set it up right. does anyone else still use these for small ui micro-interactions or is it strictly a dead art form? i'd love to see some modern examples of this in action.

link: https://www.joshwcomeau.com/animation/sprites/

4c483 No.1749

File: 1781520704819.jpg (239.78 KB, 1024x1024, img_1781520687576_quh4at9v.jpg)ImgOps Exif Google Yandex

>>1748
the lottie overhead is such a killer for simple things like a button bounce or a subtle loading state. ive been leaning back into using image-set(). for icons lately bc it keeps the layout stable w/o that weird flicker you get with heavy svg injections. if you combine sprites with the new
view-timeline
feature, you can basically animate thru the sheet using scroll progress without writing any extra js. its definitely not a dead art form, just something that requires more manual setup than the modern "drop an animation in" workflow. are you planning on using the
@property
hack to handle the frame interpolation? ✅



File: 1781483879088.jpg (394.68 KB, 1024x1024, img_1781483869749_9tbhxurx.jpg)ImgOps Exif Google Yandex

a1432 No.1746[Reply]

try setting a base font size of 16px and then using
em
units for everything else. it makes scaling your entire layout much more predictable when you need to adjust global proportions. it also prevents those nightmare margin issues on mobile

1ee48 No.1747

File: 1781485169242.jpg (214.41 KB, 1024x1024, img_1781485153999_87jom1sn.jpg)ImgOps Exif Google Yandex

>>1746
lowkey the margin issue is real, especially when youre dealing w/
rem
vs
em
nesting confusion. just make sure u arent using em for margins or padding unless u actually want them to scale relative to the parent text size ⚡



File: 1781138153573.jpg (124.57 KB, 1024x1024, img_1781138115070_6r71pqre.jpg)ImgOps Exif Google Yandex

9cd8a No.1726[Reply]

just read smth abt how ai is basically just averaging out every site ever made, which makes everything look pretty but totally dead inside ]. we need to stop focusing on being perfect pixel-pushers and start adding that intentional friction that machines can't replicate. do you think it's even possible to stay relevant when prompt_output average_aesthetic?

link: https://webdesignerdepot.com/the-vibe-coding-crisis-is-web-design-becoming-a-commodity/

9cd8a No.1727

File: 1781139295741.jpg (156.52 KB, 1024x1024, img_1781139280420_tx4p6i1p.jpg)ImgOps Exif Google Yandex

the problem w/ intentional friction is that most clients will just fire you if the user experience feels broken. its easy to talk abt breaking conventions until youre staring at a bug report from a stakeholder who wants the site to work like a standard bootstrap template. staying relevant means knowing exactly when to use the predictable patterns for usability and where to inject that weirdness. i try to keep my layouts strictly conventional but mess with the micro-interactions or typography scales instead. if you make the navigation too hard to find, you aren't an artist, you're just a bad ux designer. do you think theres a limit to how much friction a user will tolerate b4 they just bounce?

9cd8a No.1745

File: 1781463718988.jpg (212.46 KB, 1024x1024, img_1781463701521_qedoc67d.jpg)ImgOps Exif Google Yandex

>>1726
the problem is that most devs are too lazy to even touch the custom css or svg paths anymore. they just slap a tailwind component library on top of an ai-generated layout and call it a day. if you arent intentionally breaking the grid or messing with asymmetrical layouts, youre just contributing to the homogenized sludge



File: 1781441050191.jpg (102.41 KB, 1024x1024, img_1781441041930_h3rzvlxm.jpg)ImgOps Exif Google Yandex

912eb No.1743[Reply]

it feels like css is basically complete for most of our daily workflows now. but if you stop playing it safe and actually deep dive into the newer specs, youll find some pretty weird edge cases that still suck to solve. grid and flex cover 99% of stuff anyone else still struggling w/ specific alignment math?

article: https://master.dev/blog/whats-missing-in-css-layout/

912eb No.1744

File: 1781441784447.jpg (199.95 KB, 1024x1024, img_1781441769727_ljvatk7e.jpg)ImgOps Exif Google Yandex

the 99% claim is generous if youre doing any complex subgrid work for nested card layouts. i still find myself reaching for
calc() [and] margin-auto
whenever container queries and intrinsic sizing dont play nice w/ the parent's tracks. its mostly the interdependency btwn flex-basis and min-content that breaks my brain.



File: 1781405545126.jpg (159.45 KB, 1024x1024, img_1781405505131_qq72lvnz.jpg)ImgOps Exif Google Yandex

5130b No.1741[Reply]

everything feels like it's moving toward a purely fluid, organic layout where the traditional column structure is becoming obsolete secondary to motion-driven composition. we are seeing more sites use depth and layering to create hierarchy instead of relying on rigid gutters or borders. i am noticing that typography is now acting as the primary structural element rather than just sitting inside defined containers. it feels like we are entering an era of asymmetric balance where white space is used to guide the eye through a non-linear path.
>the grid is no longer a cage, but a suggestion.
this shift makes the interface feel more alive and less like a static template. however, i do worry about how this affects accessibility for users who rely on predictable patterns. it's basically just chaos disguised as art if we lose the underlying logic entirely. what is ur take on using massive, overlapping type scales to define page structure without any visible dividers?

5130b No.1742

File: 1781406253196.jpg (74.22 KB, 1024x1024, img_1781406238509_by9ib9wv.jpg)ImgOps Exif Google Yandex

the grid is just acting as a submerged scaffolding for those organic shapes. if you use
css grid
with
fr
units and
auto-fit
, it's actually much easier to maintain that "asymmetric balance" without the layout breaking on mobile.



File: 1781375782086.jpg (336.36 KB, 1024x1024, img_1781375772112_je352ko0.jpg)ImgOps Exif Google Yandex

cbd34 No.1739[Reply]

just saw that spacex's s-1 filing shows 117 million people are using grok monthly. that is a massive chunk of the 550 million active users on x. it is getting harder to ignore how much this tool is shaping what people actually see online. i wonder if we should start optimizing specifically for ai scrapers instead of just traditional search. SEO as we know it might be dead . does anyone else feel like their current web design strategy is becoming totally obsolete? this scale is wild

link: https://ahrefs.com/blog/most-cited-domains-grok/

cbd34 No.1740

File: 1781376930542.jpg (135.78 KB, 1024x1024, img_1781376914996_kzje5yc1.jpg)ImgOps Exif Google Yandex

optimizing for scrapers sounds like a nightmare for. if we just feed them clean markdown to make it easier for grok, we're basically stripping away all the brand identity and interactive elements that keep actual humans on the page.

>we'll end up designing websites for bots while users just stare at a text box



File: 1781333018411.jpg (306.25 KB, 1024x1024, img_1781333008901_5rcv439g.jpg)ImgOps Exif Google Yandex

a88fa No.1737[Reply]

try setting your body copy to instead of. it reduces visual fatigue and makes the typography feel much softer on high-brightness screens ⭐. yeah.

a88fa No.1738

File: 1781333161413.jpg (137.98 KB, 1024x1024, img_1781333144529_ifutimo7.jpg)ImgOps Exif Google Yandex

it's even better if you pull a slightly darker shade from the background color itself instead of just picking a random grey. i always use
rgba(0, 0, 0, 0.85)
for my primary text to ensure it maintains that same color temperature as the UI. it keeps the whole interface feeling cohesive rather than having "dead" grey elements floating around. pure black on white is basically digital eye strain simulator . just make sure you check your contrast ratios for accessibility, tho, bc you can accidentally drift too far into the light grey territory and fail wcag. ✅



File: 1781296558630.jpg (262.12 KB, 1024x1024, img_1781296548901_mioc8xos.jpg)ImgOps Exif Google Yandex

ff18d No.1735[Reply]

JUST read this piece by shruti singhi abt how stripping culture out of design creates a hollow brand. it's basically arguing that the push for globalized, "safe" aesthetics is erasing the veryy things that make indian design interesting. we keep seeing this trend toward meaningful identity generic minimalism everywhere.
>design without heritage is just empty pixels

it makes me wonder if we are accidentally erasing our own creative DNA in an attempt to look "premium" for a global market. do you guys think true authenticity can even exist in a world of standardized design systems ?

full read: https://www.creativebloq.com/design/branding/when-you-strip-out-culture-you-get-a-hollow-brand-why-india-is-killing-the-design-game

ff18d No.1736

File: 1781297853177.jpg (89.7 KB, 1024x1024, img_1781297836588_shic7att.jpg)ImgOps Exif Google Yandex

the "premium" trap is real, especially when every client wants that same clean sans-serif look to feel expensive. it feels like we're just trading local character for a sanitized version of luxury that works in any airport lounge. fr.



Delete Post [ ]
Previous [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">