--- title: Best UI Design posts — October 2022 | daily.dev description: The most upvoted UI Design posts from October 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/ui-design/best-of/2022/10 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/ui-design/best-of/2022/10 og:type: website og:site_name: daily.dev og:title: Best UI Design posts — October 2022 | daily.dev og:description: The most upvoted UI Design posts from October 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of UI Design — October 2022 1. 1 [](https://daily.dev/posts/what-are-good-css-breakpoint-values-for-responsive-design--gp5tqzpcn "What are good CSS Breakpoint values for Responsive Design?") Article Community Picks·4y What are good CSS Breakpoint values for Responsive Design? CSS Breakpoint values for Responsive Design can be used to design for larger and bigger screens. Designing mobile-first and using min-width seems the most accepted and used solution nowadays. 59 2. 2 [](https://daily.dev/posts/implementing-claymorphism-with-css-0gvv3ud8k "Implementing Claymorphism with CSS") Article asayer·4y Implementing Claymorphism with CSS Claymorphism is based on 3D-like objects made from clay, with inner and outer shadows to create depth. The Origin of Claymorphism It’s 2022, and a design pattern has vastly emerged and become famous in Dribble and Behance. We want to show the completeness of claymorphic design patterns. The result is: Open Source Session Replay. 48 3 3. 3 [](https://daily.dev/posts/applying-atomic-design-to-your-next-js-project-mwquqbi7o "Applying Atomic Design to your Next.js project") Article LogRocket·4y Applying Atomic Design to your Next.js project Atomic Design was inspired by chemistry, which is why the building blocks are called atoms, molecules, organisms, templates, and pages. In this tutorial, we will focus on Atomic Design, learn its Create a components/Navbar.js file and paste the code. To edit the styling, add a navbar.scss file to styles andpaste the styles below. The author�’s molecule will contain the author's image and name. In this tutorials, we’ll use the Image component. 32 [See all UI Design archives](/tags/ui-design/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/ui-design/best-of/2022/10#page","url":"https://daily.dev/tags/ui-design/best-of/2022/10","name":"Best UI Design Posts — October 2022","description":"The most upvoted UI Design posts from October 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/ui-design/best-of/2022/10#items","numberOfItems":3,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/what-are-good-css-breakpoint-values-for-responsive-design--gp5tqzpcn","name":"What are good CSS Breakpoint values for Responsive Design?"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/implementing-claymorphism-with-css-0gvv3ud8k","name":"Implementing Claymorphism with CSS"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/applying-atomic-design-to-your-next-js-project-mwquqbi7o","name":"Applying Atomic Design to your Next.js project"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"UI Design","item":"https://daily.dev/tags/ui-design"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/ui-design/best-of"},{"@type":"ListItem","position":5,"name":"October 2022"}]}]} ```