Best of UI Design — June 2024
- 1
- 2
Codemotion·2y
Creating a Fallout-Style UI Using Modern CSS
Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers semantic HTML, responsiveness, typography and colors, responsive layout, visual effects and animations, and using generative AI for sci-fi content.
- 3
UX Planet·2y
The Only 8 Fonts You Will Ever Need
Typography has evolved significantly, offering an extensive array of typefaces. Despite the abundance, eight fonts have stood out for their unique characteristics: Garamond, Bodoni, Baskerville, Times New Roman, Century Expanded, Futura, Helvetica, and Inter. Each font brings its own historical significance and design ethos, from classics like Garamond and Baskerville that improve readability, to modern fonts like Inter designed for digital interfaces. These fonts are essential tools for any designer, adaptable to various projects from traditional print to contemporary digital design.
- 4
Community Picks·2y
What is this weird CSS Syntax?
Learn about an interesting CSS syntax involving the adjacent sibling combinator (+) and the asterisk (*) to select non-immediate adjacent elements of the same class. This allows styles to be applied to specific siblings a few elements away when hovering over a targeted element.
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
freeCodeCamp·2y
Media Queries vs Container Queries – Which Should You Use and When?
As the web evolves, new tools like media queries and container queries emerge, offering web developers various ways to make responsive designs. Media queries adapt styles based on the overall viewport size, suitable for different devices. Container queries, however, base their styles on the size of individual containers, promoting modularity and flexibility. While media queries are less effective for complex layouts, container queries support more adaptive component-based designs. Understanding each tool's strengths and considering project requirements will guide their best use in web design.
- 14
- 15
Kevin Powell·2y
"Smart" design patterns with container queries
Container queries are a powerful CSS feature that allows styling based on the size of an element's container, rather than the viewport. This can lead to more flexible and meaningful breakpoints, particularly for component-based designs. The post explores practical examples, including making components adapt to the number of columns in a layout and how units like REM and EM work differently in container queries. The ability to create more intelligent design patterns without relying solely on viewport-based media queries is a key advantage.
- 16
Roots of UI/UX Design Book
Discover an extensive guide to UI/UX design with 322 pages of insights, practical examples, Figma files, and AI prompts. This book is inspired by Material Tailwind and is divided into 7 parts and 55 chapters that cover everything from mastering pixel-perfect elements to building complete web pages. It's trusted by top companies and includes real-life examples accessible via QR codes. Various purchase options are available, including digital and physical copies.
- 17
Juxtopposed·2y
world's shortest Framer course
Learn how to quickly create stunning websites using Framer without any coding. The Framer interface is intuitive and similar to other design platforms, providing tools for adding elements, managing pages, and customizing design properties. By mastering responsive designs, layout structuring, and component creation, you can enhance your web projects. The key to proficiency in Framer is practice. The post also includes a link for getting started with Framer.
