Best of UI/UX — October 2024

1. 1
   Article

   DEV·2y

   Best Icon Libraries

   The landscape of icon libraries has significantly evolved in 2024, offering designers and developers more options, better integration, and enhanced customization. Notable mentions include Lineicons V5 with over 30,000 icons and advanced features like a free CDN and icon editor. Heroicons, Uicons, Iconify, Streamline Icons, and others are also highlighted for their unique offerings and ease of use. Many of these libraries are free or open-source, making them accessible for various project needs.

   844

   19
2. 2
   Article

   Community Picks·2y

   Best design system examples

   Exploring top design system examples to help build or improve your own, this post covers the essentials like consistency, efficiency, scalability, collaboration, and quality control. Featuring IBM's Carbon, Atlassian's, and Adobe's Spectrum design systems, it offers insights into unique approaches and best practices in design systems.

   330

   6
3. 3
   Article

   Povio·2y

   Choosing the Perfect Font

   Success in mobile app development is often found in the details, and fonts are a key aspect that can make a significant difference. This post provides 8 essential questions to guide you in choosing the perfect font for your app, focusing on factors like readability, accessibility, and design flexibility. Also, it offers a list of 13 recommended fonts to enhance both the aesthetic appeal and functionality of your mobile project.

   136

   2
4. 4
   Article

   Community Picks·2y

   Top 50 Google Font Pairings [Handpicked by Pro Designers]

   Selecting the right fonts can significantly impact website design. The post showcases 50 handpicked Google font pairings categorized by styles such as classic, elegant, modern, creative, and minimalist. These combinations are chosen for their legibility, design flexibility, and overall aesthetic. Suggestions are provided to inspire your next project, and readers are encouraged to experiment with Pagecloud's editor and site-wide color feature.

   117

   2
5. 5
   Article

   Community Picks·2y

   The List of Public Design Systems

   Weekly updated list of public design systems and resources. Subscribe to receive weekly tips on design systems and strategy.

   109

   2
6. 6
   Video

   Tech With Tim·2y

   Streamlit Mini Course - Make Websites With ONLY Python

   This post introduces Streamlit, a powerful Python UI library for quickly building web interfaces using only Python code. It covers the basic and advanced features of Streamlit, including support for data visualization tools like pandas, matplotlib, and numpy. The post also offers a hands-on tutorial for setting up a Streamlit project, installing necessary dependencies, and building simple applications. Additionally, it highlights a free resource guide on landing a developer role in the AI field, sponsored by HubSpot.

   87

   5
7. 7
   Article

   Medium·2y

   Design systems: simplifying documentation writing

   Creating a design system documentation can be daunting but essential for effective usage. Documentation is split into intangible parts (principles) and tangible parts (patterns, components). Using a Work Breakdown Structure (WBS) can simplify this task by breaking it into manageable pieces, prioritizing tasks, and tracking progress. Helpful techniques include using templates and examples from other design systems. Always consider the audience, steal useful ideas, aim for functionality over perfection, and maintain documentation through continuous feedback and alignment across teams. Existing systems like Tailwind or Material UI can also be beneficial, especially for smaller teams.

   86

   1
8. 8
   Article

   Codrops·2y

   Inspirational Websites Roundup: Webflow Special #6

   This roundup highlights a selection of inspiring Webflow websites, showcasing the creativity and technical brilliance of various studios, agencies, and freelancers. Featured entities include DivBlockers, Sonar Music, OFF+BRAND, NAGARA, and many more, each demonstrating unique approaches in design, music, production, branding, and technology.

   57
9. 9
   Video

   DesignCourse·2y

   How to avoid designing BORING layouts

   Many UI/UX designers create uninspired marketing landing pages by simply arranging cards. To stand out, one should focus on unique and creative designs. The post demonstrates a reimagined layout for a pet rental service using MidJourney for asset generation and tools like RVE to create scroll-based animations. Designers are encouraged to show visuals of people interacting with pets instead of text, emphasizing unique approaches in portfolios. Today, tools like Webflow and Framer allow designers to implement interactive animations without extensive coding knowledge.

   55

   3
10. 10
    Article

    UX/UI·2y

    Open source tool for creating beautiful user flow prototypes

    Wireflow is a free, online, and open-source tool designed for creating user flow prototypes without the need for Photoshop skills.

    37
11. 11
    Article

    CSS-Tricks·2y

    You can use text-wrap: balance; on icons

    Terence Eden discusses using `text-wrap: balance` in CSS for more than just headings, highlighting its utility for any content, including icons. This property helps prevent awkward line breaks in narrow viewports by ensuring better balance. The spec suggests potential future updates, including line length minimums.

    26

    3
12. 12
    Article

    Very Good Ventures·2y

    Flutter Glossary

    Flutter is a cost-effective platform that allows development with a single codebase across multiple platforms. Very Good Ventures (VGV) has created a glossary to help developers understand key concepts, terms, and acronyms in Flutter. This resource aims to strengthen foundational expertise in Flutter by explaining different components like Animation, AppBar, Dart, BLoC, and many more. VGV also provides code reviews, training workshops, and supports open-source tools to help maximize the framework's potential.

    26

    1