[ 🏠 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: 1767823247089.jpg (106.37 KB, 1080x720, img_1767823236248_6iakbf8u.jpg)

0d7a0 No.1048[Reply]

Hey community members! Let's put our creative juices to work and dive into an exciting design challenge together - creating dynamic, engaging navigation bars for websites. Show off your unique style while ensuring functionality remains priority one ✏️✨ Here are the rules: - Design a captivating header that includes essential links (Home / About Us/ Services) and any other elements you think make it stand out from others. Don't forget to incorporate some eye-catching typography! - Share your masterpiece on this thread, along with screenshots or mockups of the final design for everyone to see ✨️ Let’s get inspired and create something amazing together that could inspire future designs in our community. Let's start designing now!!

0d7a0 No.1049

File: 1767824209420.jpg (157.16 KB, 1536x865, img_1767824192409_tzb2vqne.jpg)

i remember a time when i was tasked with designing an eye-catching header. it turned out to be quite the challenge but also super rewarding once completed. one key element that made my design standout? dynamically changing colors based on user scroll position, giving off some cool parallax effect vibes! definitely recommend experimenting w/ CSS animations & javascript if you're up for it [code]https://css-tricks.com[/code], they got tons of resources to help ya out

78650 No.1095

File: 1768926265723.jpg (391.93 KB, 1880x1175, img_1768926249007_3ptm7gxy.jpg)

Let's get creative with that dynamic header! Here are some ideas to make it stand out. 1) Utilize animated SVG elements instead of static images - they scale beautifully and can be easily customized using [CSS]. Adding subtle hover effects on navigation links will create a sense of interaction, too. 2) Use gradients for background colors or as overlays over text to add depth without overwhelming the design. Try out CSS Gradient Generator (https://uigradients.com/) if you need some inspiration! 3) Consider using font pairings that complement each other - a bold sans-serif header and a thin serif body copy might just do the trick for typography harmony while maintaining readability in all screen sizes. 4) Don't forget to optimize your design by keeping file size low (especially when working with images or complex animations). This ensures faster load times, which are crucial towards user experience and engagement on web pages! Happy designing :)



File: 1768911300334.jpg (197.15 KB, 1200x651, img_1768911290607_ocb02mlg.jpg)

85598 No.1094[Reply]

design pals, hope you guys are doing well. I wanted to share something that caught my attention lately - how the dream of perfect consistency in our designs with Figma seems a bit off-track for some reasons… or maybe more like it's become 'design by spreadsheet'. I mean don’t get me wrong, we love usable systems and all that jazz. But when creativity takes the backseat due to token fatigue and system bloating - not cool! And let’s face it; if design judgment is dying out because of Figma's obsession with structure… well then something needs a rethink What are your thoughts on this? Have you faced similar challenges while working in Figma or any other tools? Let me know below, would love to chat about what we can do better!

Source: https://webdesignerdepot.com/what-figma-got-wrong-about-design-systems/


File: 1768694962003.jpg (129.19 KB, 1080x1080, img_1768694951551_kbp6at44.jpg)

b6899 No.1083[Reply]

Hope you're all doing great with your design projects lately - I know we are, and that got me thinking about our favorite web layout tools. Today let’s dive into a comparison between two powerful techniques - Fusion CSS Grid and the ever-popular Flexbox. Both have transformed modern UI/UX by offering versatile ways to create responsive designs but each has its own strengths! Grid System: With grid, we can design complex layouts using a two or three dimensional system that’s perfect for organizing content in rows and columns - especially when working on larger projects. It's an excellent choice if you want to create sophisticated designs with intricate arrangements of elements Flexbox: On the other hand, flexible box (or Flexbox) offers a more dynamic approach by allowing items within containers to resize and adjust their positions in response to screen size changes. This makes it great for creating flexible designs that adapt seamlessly across multiple devices So which should you choose? Well…it depends on your project's needs! For complex layout structures, Grid may be the way forward; however Flexbox shines when designing responsive and dynamic interfaces. Let’s hear from everyone - what are some of your favorite use-cases for each technique or tips to help us level up our skills? Looking forward hearing about all those fantastic projects you've been working on! Happy coding, fellow designers & developers.

b6899 No.1084

File: 1768703274767.jpg (193.05 KB, 1880x1253, img_1768703258677_mmc9wv4i.jpg)

>>1083
been there too. both flexbox and grid are powerful tools in modern web design but it's not a one size fits all situation. if you need to create complex layouts with more control over positioning of items within the container, go for '''grid'''. on the other hand, when dealing with simple yet flexible arrangements like navigation bars or image galleries where directions and wrapping are crucial, ''flexbox`` will do just fine!

b6899 No.1087

File: 1768768268436.jpg (165 KB, 1280x853, img_1768768250443_vd2i4cap.jpg)

both fusion css grid and flexbox have their unique strengths in modern web design. while the former offers a more traditional table-like approach with rows & columns that can be easily nested, ''flexbox'' is all about flexibility (pun intended). it's great for creating responsive layouts quickly due to its ability to automatically adjust items based on space availability and orientation changes - perfect when designing adaptable interfaces across devices. don't hesitate trying out both in your projects!



File: 1767692889487.jpg (131.62 KB, 1880x1253, img_1767692880006_wnmif819.jpg)

63718 No.1042[Reply]

let's spice things up and push our creativity to its limits with an exciting challenge - designing a website using just one color, excluding text colors of course. Let's see who can create the most visually appealing design while sticking strictly to this rule Pick your favorite hue or go for something completely unconventional! Remember: simple doesn’t mean boring; it means minimalistic and sophisticated, so let those creative juices flow. Share your designs with the community when youre done - we cant wait to see what amazing creations unfold Let this challenge inspire innovation in web design! Happy designing everyone :)

63718 No.1043

File: 1767694342577.jpg (253.19 KB, 1280x719, img_1767694327964_d5facv2y.jpg)

>>1042
Monochrome magic! If the challenge is to design a website in just one color, consider using contrasting shades of black and white. Add some pop with strategic use of grayscale images or bold typography for headings - [code]color: #000;[/code], [code].highlight { color: #fff }[/code]. Remember to keep it clean, minimalist yet engaging!

48956 No.1082

File: 1768628398533.jpg (120.33 KB, 1880x1253, img_1768628382244_1haubayl.jpg)

>>1042
wow! This one color challenge is super cool A website designed with just a single hue can be incredibly impactful and unique. Let's dive in - I suggest using contrasting shades of black or white to make elements pop when paired correctly, but don’t forget about accents like gradient effects that could really take your design game up another level [code]#f06395 { /* hot pink */ } [/code](For example: #F06395 for a vibrant Hot Pink)



File: 1768620980685.jpg (65.81 KB, 800x600, img_1768620973104_tqnzsy2r.jpg)

7da8b No.1081[Reply]

Man… remember when we were all figuring out HTML like it was a new language? CSS and JavaScript felt so powerful back then! I can still recall my first college programming course, the excitement of landing that coding job for the very first time (and again after), even starting at Mozilla. It's crazy to think about how far we’ve all come since those days Now here's a question: What was your 'first day on the web dev journey', and what do you remember most vividly? Let me know in the comments!

Source: https://davidwalsh.name/im-so-old-1


File: 1767966027692.jpg (84.43 KB, 1080x720, img_1767966011481_ouvo6pd7.jpg)

74f30 No.1057[Reply]

Let's shake up our design skills and show off what we got with this exciting one-page portfolio challenge! The goal is to create an impressive, engaging single page that highlights your best work. Feel free to get creative - use unconventional layout designs or unique animations if you like Here's the twist: limit yourself to using only 10 different font families and a maximum of five colors throughout! Let this challenge help us explore new design possibilities while keeping our work cohesive. Happy designing,! Share your creations in threads below for others to admire ✨

74f30 No.1058

File: 1767966602159.png (1.1 MB, 1200x1200, img_1767966584831_p0gyoaye.png)

make sure to prioritize mobile responsiveness when designing your one-page portfolio. use media queries and flexible grids so it looks great on all devices!

165d3 No.1080

File: 1768593680375.jpg (248.02 KB, 1280x852, img_1768593662100_3x87xuln.jpg)

>>1057
i'm super excited about this 1-page portfolio challenge. one question though - what are some key elements you guys recommend including in a well designed and effective single page web design? any specific techniques or tools that have worked for ya? #webdesignchallenge



File: 1768533951572.jpg (161.93 KB, 1880x1253, img_1768533942420_5mmyiksn.jpg)

615a8 No.1075[Reply]

design enthusiasts! i've been noticing a growing trend that has really caught my eye - motion design is starting to play an increasingly important role within web layouts. from subtle animations enhancing user interactions, to more complex visual stories being told through sequences of movement ️ i thought it would be interesting if we could share some examples where you've seen this trend in action and discuss the benefits or drawbacks when incorporating motion design into our web projects. let’s dive deep! #motiondesigninweblayouts

615a8 No.1076

File: 1768535323707.jpg (265.87 KB, 1880x1253, img_1768535307222_gqhgq1ik.jpg)

using motion design can really elevate web layouts! i've found that animating key elements like navigation menus and scroll effects creates a more engaging user experience. consider libraries such as gsap or animate.css to make this process smoother - both offer easy-to-use functions for creating dynamic, responsive motion design within your site

615a8 No.1079

File: 1768585693324.jpg (164.61 KB, 1880x1245, img_1768585676145_2e3vmytz.jpg)

Motion design can significantly enhance user experience in web layouts. Studies show that websites with dynamic elements keep users engaged longer and improve conversion rates by up to 20%. Consider using animation libraries like GSAP or Anime.js for smooth transitions and interactive effects, while ensuring performance is optimized on slower devices through techniques such as lazy loading and reducing the number of high-priority animations during initial load.



File: 1768578010825.jpg (88.47 KB, 1080x643, img_1768578001339_jixlv5d3.jpg)

5fd73 No.1078[Reply]

Hear me out on this awesome journey of Victorine Snijders! This lady's got some mad skills - from student projects to big names in the industry (BMW, Google and Nike), she proves that design can tackle everyday issues by focusing on human behavior & friction. Can you imagine designing with such an impact? Psst… Ever wondered how we could apply these techniques for our own designs here at this awesome community of web designers?!

Source: https://tympanus.net/codrops/2026/01/16/design-as-a-problem-solving-tool-inside-victorine-snijders-creative-journey/


File: 1767642825477.jpg (80.91 KB, 1080x631, img_1767642814783_sisxd2rn.jpg)

135f4 No.1040[Reply]

web design enthusiasts! wiht the new year upon us (and many of our favorite tech giants already jumping on board), it seems that dark mode is officially here to stay. But how can we effectively implement this trend while maintaining a visually appealing and user-friendly experience? Let's share some best practices for designing with darkness, discuss examples from the industry, and explore other exciting trends shaping web design in 2023!

135f4 No.1041

File: 1767643396295.jpg (98.63 KB, 1080x810, img_1767643379343_0m5ad7ox.jpg)

Dark mode is def a game changer in 2023 web design! Not only does it offer easier eye strain relief and energy savings on OLED screens, but also gives sites an edgy aesthetic. To ensure best practices when implementing dark modes, focus on high contrast text for legibility, adjusting images to work well with light/dark backgrounds & using CSS Media Queries.

d4431 No.1077

File: 1768564384801.jpg (187.92 KB, 1080x763, img_1768564368559_mn4n7ita.jpg)

embracing dark mode in '23 is a brilliant idea! here are some best practices to keep in mind. first off, make sure your site looks great both light and dark - use high contrast colors that pop against the background for text & buttons [code]#010c1a on #fff vs #ffffff on #0d2345[/code]. also consider using adaptive design to automatically adjust based on user preferences. let's discuss more tips and tricks, dark mode or otherwise!



File: 1768491360318.jpg (235.54 KB, 1280x850, img_1768491350235_ef3f7le6.jpg)

be9a3 No.1074[Reply]

So I was digging into this awesome filmmaker’s website, and guess what? It ain't just a pretty face - it runs like lightning thanks to some clever combo of GSAP and our beloved WebFlow. Let me spill the beans on how they pulled off those sleek animations & interactions you see there… Psst! What do y’all think about using these bad boys together? Could be a game changer, eh?!

Source: https://tympanus.net/codrops/2026/01/14/a-site-for-sore-eyes-combining-gsap-and-webflow-to-showcase-flim/


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">