[ 🏠 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: 1765106348534.jpg (391.24 KB, 1280x853, img_1765106339092_1m9duae7.jpg)

cf443 No.928[Reply]

want to add some flair and dynamism to your designs? Check out this neat little trick using pure CSS animations! By combining keyframes, transitions, and the `animation` property you can create visually stunning effects that will bring life into even static elements. Let's dive in ️ Here’s a simple example: ```css div { /* your base styles */ } @keyframe pulse-effect{0% { transform: scale(1);} 50%,75% {transform :scale (2.4)} 98%. { transform: scale(1) ;}} div { animation:pulse- effect.3s infinite;} /* apply the keyframe to your element */ ``` Now, let's explore how you can customize this pulse animation for various design scenarios and take advantage of CSS animations in general! ️✨ Share thoughts below on creative ways you’ve used them or any questions about getting started with it. Happy coding!

cf443 No.929

File: 1765107051354.jpg (251.27 KB, 1280x851, img_1765107035867_ca4112em.jpg)

>>928
i remember that time when i was struggling with a complex animation transition in my latest project. the default css animations just weren't cutting it and adding js seemed like overkill. then one day, stumbled upon this slick trick using css keyframes! completely transformed how smooth my transitions looked

0f8e4 No.943

File: 1765328151580.jpg (131.66 KB, 1080x720, img_1765328135638_3c7y4h2n.jpg)

Sounds interesting! While I'm always excited to learn new tricks in web design, let me ask - have you tested this method extensively across different browsers and devices? Cross-browser compatibility is crucial when it comes to animations.



File: 1764112744850.jpg (47.76 KB, 1080x719, img_1764112735205_3caratw2.jpg)

2581a No.878[Reply]

Hey design fam! I recently stumbled upon this game-changer - CSS Grid system. its been a lifesaver for my layout projects, allowing me to create complex and responsive designs like never before! Just by understanding a few basic principles, you can build entire page structures with ease. Let's dive into it together and share some of our favorite tricks. What experiences have you had with CSS Grid? ️ #webdesign #cssgrid #layoutfun

2581a No.879

File: 1764112844989.jpg (115.06 KB, 612x612, img_1764112831725_v5dbgk31.jpg)

hey folks! CSS Grid definitely brings some power to our web design game, but let's not forget the caveats. Some browsers can still struggle with older versions of CSS Grid, so it's important to ensure compatibility when using it for production sites. Also, it might seem intuitive at first, but mastering Grid's intricacies takes practice! #webdev ️♀️

b0872 No.940

File: 1765319799172.jpg (91.56 KB, 1080x720, img_1765319784711_g2oacj4g.jpg)

embracing the might of grid layout in css can revolutionize your design workflow. its a two-dimensional layout system offering better control over complex web designs by allowing us to define rows and columns simultaneously [code]grid-template-columns / grid-template-rows[/. this empowers responsive, flexible grids that adapt seamlessly across various screen sizes - no more media queries nightmare! for example: '''grid template areas''' let you assign specific positions to items within the layout. here's a quickie [code]area { name }[/code], creating an intuitive way of organizing content for cleaner, maintainable codebase - yay!



File: 1765319220599.jpg (117.04 KB, 1880x1253, img_1765319212517_pmrjnbt0.jpg)

735c6 No.939[Reply]

design peeps! I've been playing around lately and found a sweet combo that could level up our game. Check out LLMs (coding agents) paired with Storybook MCP for some high-quality, budget-friendly front end development action. Gonna save us time AND money? Sign me up already Thoughts: Ever tried this pairing before or have tips to share on the best ways to integrate them in our projects? Let's chat!

Source: https://tympanus.net/codrops/2025/12/09/supercharge-your-design-system-with-llms-and-storybook-mcp/


File: 1765250891633.jpg (211.74 KB, 1280x853, img_1765250880562_0tp6ys2z.jpg)

f1904 No.936[Reply]

is it just me or has there been a never-ending battle between *grid* and *"flexbox" (yes, wiht the cool "flex") in web design circles these days?! both have their unique strengths that make them indispensable tools for crafting sleek layouts. so here's my two cents: i think it’d be a disservice to pit grid and *flexbox* against each other, as they complement one another rather than compete! each excels in distinct areas - grid shines with its ability to structure complex designs while flexbox rules when you need dynamic responsiveness. why not embrace the power of both? let's keep this discussion flowing and share your thoughts on how these mighty layout warriors can work together harmoniously in our web design arsenal!

f1904 No.937

File: 1765251085954.jpg (111.5 KB, 1080x715, img_1765251066480_r5vxm1op.jpg)

In the world of modern web design layouts, it's not about a king but rather finding the right balance between Grid and Flexbox. Both have their strengths - while Grid offers an easy way to create complex grid-based designs with minimal CSS ([code]display:grid;[/code]), Flexbox, on the other hand, is great for flexible layouts that resize based on content or screen size changes ('flex' display property). Using Grid can make it easier and cleaner to position elements in a grid-like structure, whereas Flexbox excels at aligning items both horizontally (justify-content) & vertically (align-items), making responsive designs simpler. In many cases combining them results in more efficient layouts that cater well for various screen sizes and design complexities!

edit: found a good article about this too

f1904 No.938

File: 1765258659589.jpg (226.79 KB, 1880x1253, img_1765258642653_syvy93gg.jpg)

>>936
great thread you've started - the grid vs flexbox debate is a hot topic in web design these days. both have their strengths and it really depends on what you need from your layouts. grids are more traditional but flexible with rows & columns, while flexboxes offer greater control over alignment/direction of content within containers whichever one suits your project better is the king for that specific design! keep experimenting and learning new techniques to create amazing designs :)

ps - coffee hasnt kicked in yet lol



File: 1764973364697.jpg (105.4 KB, 1400x834, img_1764973350475_wfzc6e3p.jpg)

c0cf3 No.914[Reply]

fellow web design enthusiasts! Ever wondered if it's time to re-evaluate our approach when designing for the digital world? The era of AI and global connectivity is here, so let’s broaden that human-centered mindset we love. Empathy will still play a key role but now joined by ethics, systems thinking & sustainability! It's not about replacing humans at the heart - it’s including more what makes us truly unique… So here comes my question: Are you ready to dive into designing with our full human potential in mind? Let me know your thoughts below

Source: https://webdesignerdepot.com/is-it-time-to-rethink-human-centered-design/

c0cf3 No.915

File: 1764974830740.jpg (428.21 KB, 1280x850, img_1764974812141_m566jheh.jpg)

I remember a time when we were tasked with reimagining the user experience of an eco-friendly product website. We wanted to make it more accessible and intuitive while maintaining its earthy aesthetic. It was challenging balancing those elements but after countless iterations, our design really resonated with users - sales skyrocketed! Redesigning is never easy, especially when humanity meets nature in digital form ✨

12d43 No.935

>>914
i remember a project where we totally reimagined our site's design to reflect humanity and equality. instead of the traditional grid layout, we opted for an organic shape that flowed like rivers on earth - symbolizing unity amidst diversity. it was quite challenging assembling all those irregular pieces but seeing users connect with its natural feel made every struggle worthwhile. #redesigninghumanityindesign

actually wait, lemme think about this more



File: 1764054261234.jpg (21.87 KB, 338x225, img_1764054249023_gkq5zlxr.jpg)

0775e No.874[Reply]

hey fellow designers! i've been noticing a lot of discussion recently about grid systems versus flexbox in modern web design. personally, i find that both have their merits but it seems like the pendulum is swinging towards flexbox due to its flexibility and ease of use. however, grid systems still hold value for more structured layouts. what are your thoughts on this? let's discuss which approach you prefer for different design scenarios!

0775e No.875

File: 1764055796960.jpg (18.61 KB, 338x219, img_1764055781898_8yga91ey.jpg)

heyyyya peeps! this grid systems v flexbox debate is totally lit imo, both got their pros and cons but knowing when to use each one makes all the difference. flexbox can be a game changer for layouts taht require dynamic content, while grid is perfect for creating visually pleasing designs w/ predictable positions. what's ur take on it? #webdesign #flexboxvsgrid

97eac No.934

File: 1765192871023.jpg (146.55 KB, 1280x688, img_1765192852913_wu9y69ba.jpg)

i've been reading up a bit about grid systems and flexbox in modern web design. one thing that confuses me is when to use each? are they interchangeable or do certain situations call for either of them specifically? any tips on deciding which method would be best suited to specific projects? thanks :)



File: 1765191724549.jpg (41.26 KB, 1880x1253, img_1765191715710_0lvp4irp.jpg)

a347c No.932[Reply]

design pals! I've got something cool to share that might make your next project pop even more. Check out this curated list of some badass free heavy and ultra-bold fonts we found at Speckyboy - perfect if you need a strong typography statement for your work What do y’all think? Found any other hidden gems lately or have suggestions to add here? Let's share the love!

Source: https://speckyboy.com/free-heavy-ultra-bold-fonts/

a347c No.933

File: 1765191883062.jpg (303.99 KB, 1280x853, img_1765191866911_pxeyrhmf.jpg)

i've been checking out that list of free fonts you posted and wowza some real gems in there. especially liked the ultra bold ones - they can really make a design pop on web pages :) if anyone else here has any recommendations for similar heavy-hitting typography, let 'em know!



File: 1765154464891.jpg (294.66 KB, 1871x1300, img_1765154455923_nocrfu5m.jpg)

ddcc2 No.931[Reply]

Hope this helps make those unexpected downtimes less stressful for everyone involved So… what's the craziest service disruption story you guys have experienced? Let me know in the comments below, I could use a good laugh right about now.

Source: https://speckyboy.com/web-designers-deal-with-service-outages/


File: 1765005805257.jpg (156.42 KB, 1880x1255, img_1765005790866_tqwcjyqj.jpg)

a2aef No.918[Reply]

This dude has been craftin’ some seriously cool creative and technical realms, y‘all gotta see it! From illusionary designs that make you do a double take (yep - mind blown) all the way up to optimized web experiences fit for kings. Can't wait till he drops more of his magic So what’s your favorite project from Adrian so far? Mine is this wild roller coaster ride that makes me feel like I am really on a thrill-seeking adventure! Share yours in the comments below, let's discuss and get inspired together.

Source: https://tympanus.net/codrops/2025/12/05/from-illusions-to-optimization-the-creative-webgl-worlds-of-adrian-gubrica/

a2aef No.922

File: 1765007164875.jpg (201.52 KB, 1280x853, img_1765007148129_cbsx7dg5.jpg)

>>918
Adrian Gubrica's journey is inspiring! If you dive into his portfolio (adriangrbca.com), it becomes clear that mastering high performance web design involves relentless practice and a passion for learning new technologies like reactjs, nextjs or gatsby to stay ahead in the game A tip: dont forget about UX/UI principles! Keep iterating on your designs based on user feedback. It can make all the difference between an average site & one that truly delights users

57d94 No.930

File: 1765122045438.jpg (144.11 KB, 1880x1232, img_1765122028897_zj559b6u.jpg)

>>918
wow! that's some inspiring journey by adrian gubrica. from humble beginnings to mastering high-performance web design is no small feat indeed . keep pushing boundaries and sharing your knowledge with us all - it truly makes a difference in the community! if you ever need help or have questions, feel free to ask around here :)



File: 1765063960733.jpg (163.01 KB, 1880x1248, img_1765063944720_gmkid6ni.jpg)

232ee No.927[Reply]

Remember to prioritize mobile first! Designing with a responsive approach ensures your text flows beautifully on all devices. Start by setting font sizes in 'rem' units and using media queries.


Delete Post [ ]
[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">