Community Picks·3y16 little UI design rules that make a big impact
Learn about 16 UI design rules and guidelines that can make a big impact on the usability and aesthetics of an interface. Explore topics such as using space to group related elements, being consistent in design, creating a clear visual hierarchy, and selecting the right typeface.
Hacker News·3yMonaspace
Monaspace is a new type system that advances the display of code on screen. It offers a more expressive palette for code, introduces texture healing to even out the density of monospaced type, provides three axes for font customization, and includes code ligatures for various languages.
asayer·3yUX: best practices for developers
User experience (UX) is a critical component of web development that can make or break the success of a website or application. UX refers to the user’s overall experience when interacting with a website, app, or product. A well-designed UX can increase user engagement, retention, and conversions, resulting in better commercial outcomes.
UX Planet·3yTypography Trends in Web Design 2023
The importance of typography in web design keeps waxing and waning every few years. In 2023, the web typography world has enjoyed an explosion of creativity. Richer typefaces, 3D styles, bold fonts, and various other interesting typography trends have taken over the world of web design.
Community Picks·3yWhat is Tailwind Theming and How to use it in 2024
Tailwind Theming allows developers to create custom designs that match the branding of their projects. By customizing the default styles provided by Tailwind, developers can create unique and functional designs that are visually appealing and easy to use.
Community Picks·2yCreating and coding a Design System from scratch (co-authored by Zuzanna Sobiecka)
Guidelines and considerations for creating and coding a Design System from scratch. A Design System provides consistency for a brand, speed for designers, and a modular and reliable Component Library for developers. Starting a Design System can be done by deriving it from existing design or code. The DS doesn't need to be complete to be useful. Tokens play a key role in the Design System, simplifying communication between Dev and Design. The DS can evolve and should be coded as a system. Translation of the Design System into code involves creating utility classes based on tokens. Following rules and exceptions ensures fast and consistent UI development.
Product Hunt·3yFonty.io - Product Information, Latest Updates, and Reviews 2024
Fonty.io is a tool that analyzes the fonts used on a website and displays them for users to view. It is helpful for web designers and developers looking to learn more about the typography on a specific website. Recent launches include a font analysis tool and the ability for users to leave reviews and pro tips.
Community Picks·3yNext.js App Router
Next.js App Router implements React Server Components, a new feature introduced in React 18. To support the App Router, currently all components and hooks from MUI libraries are exported with the directive. Using Material UI with the default theme, you can add Material UI components to Next.js routing files without any additional configuration.
UX Planet·3yFirst step to becoming a self-taught UX/UI designer.
First step to becoming a self-taught UX/UI designer is getting familiar with the basics of UI and UX design. Learn typography basics like serif vs. sans serif fonts, font pairings, line height, letter spacing, etc. Take note of how colors make you feel on websites and apps you visit.
CSS {IRL}·3yVideo: Modern CSS Layout is Awesome
Back in May I had the privilege of speaking at Beyond Tellerand, an incredible conference in Düsseldorf, Germany. My own talk was on CSS layout, including some of the exciting new features we have at our disposal. Here's a wrap up from the conference too.
asayer·3yWhich is easier to customize: Tailwind CSS or Material UI?
Back Tailwind CSS and Material UI are well-known, widely used CSS frameworks. This article will compare them both, so you can decide which one better suits your needs in terms of allowing all kinds of customization. In this tutorial, we will walk through which is easier to customize, TailwindCSS or Material-UI.
Community Picks·3yStarlight 🌟 Build documentation sites with Astro
Astro is the all-in-one web framework designed for speed. Starlight gives you built-in frontmatter validation with TypeScript type-safety. Extend with React, Vue, Svelte, Solid, and more. Pull your content from anywhere and deploy everywhere.
asayer·2yThe Art of Styling Text with CSS Orientation
CSS text orientation is a powerful tool that enhances readability, design flexibility, and cross-platform consistency. It is crucial for multilingual websites, vertical text, right-to-left languages, responsive design, typography, and user interfaces. Best practices include maintaining readability, cultural awareness, establishing visual hierarchy, and balancing with other design elements.