Best of UI/UX — 2024

  1. 1
    Article
    Avatar of devtoDEV·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.

  2. 2
    Article
    Avatar of communityCommunity 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.

  3. 3
    Article
    Avatar of asayerasayer·2y

    6 Tips: Why Front-End Developers should be Entrepreneurs

    An entrepreneurial mindset significantly enhances front-end developers' impact and career success. It facilitates a user-centered approach, innovation, and creativity, aligning their work with broader company goals. Key benefits include leveraging unique technical skills, gaining creative freedom, achieving financial independence, building a personal brand, and driving innovation. While this approach offers extensive growth potential and market differentiation, common challenges include balancing technical and business skills, financial management, market competition, and maintaining a healthy work-life balance.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    Atomic Design Pattern: Structuring Your React Application

    The Atomic Design Pattern is a methodology for structuring React applications by breaking down interfaces into fundamental building blocks called atoms, molecules, organisms, templates, and pages. This approach enhances modularity, readability, maintainability, and flexibility. By organizing components into distinct levels, managing state appropriately, and thoroughly documenting components, developers can create scalable and consistent user interfaces. The methodology has been successfully adopted by companies like Shopify and IBM for their design systems.

  5. 5
    Article
    Avatar of medium_jsMedium·2y

    Figma fiasco.

    Figma's latest updates, featuring new AI capabilities and a revamped user interface, have generated significant dissatisfaction among users. Critics argue that the changes prioritize profit over user experience, complicate simple tasks, and cater to non-designers. The restructured UI and AI functionalities are considered not only unnecessary but also detrimental to the workflow of professional designers. Many are considering alternatives like Penpot and Sketch due to these frustrations.

  6. 6
    Article
    Avatar of devsquadDev Squad·1y

    🚀 New Professional Portfolio!

    Exciting news! A new portfolio website is now live, showcasing a journey and skillset, insights on adding value to teams, and highlighted projects demonstrating expertise. Feedback and interactions are welcomed.

  7. 7
    Article
    Avatar of fullstackdeveloperFullstack Developer·1y

    A Creative Site Worth Exploring

    The site exhibits an impressive UI and superb interactions, showcasing the excellent work of the front-end developers.

  8. 8
    Article
    Avatar of bootcampuxdesignBootcamp·2y

    7 Ideas to make UI/UX on E-Learning platforms more creative and user-friendly.

    Ideas to improve UI/UX on E-Learning platforms: gamification elements, interactive quizzes and assessments, personalized learning paths, social learning features, rich multimedia content, mobile-friendly design, progress tracking and analytics.

  9. 9
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Design-first VS Logic-first Approach – How Should You Start Your Front-end Projects?

    Front-end development involves building user-friendly interfaces, and developers often face the dilemma of choosing between a design-first or a logic-first approach. The design-first approach prioritizes visual elements and user experience, while the logic-first approach focuses on core functionalities and data architecture. A hybrid approach combines the strengths of both methods, promoting parallel development and enhancing communication between design and logic teams. The best approach depends on the project type, target market, and team preference.

  10. 10
    Article
    Avatar of codepenCodePen·2y

    Exploring 21 Unique Custom Cursors for Your Site – CodePen

    Microinteractions, such as custom cursors, can enhance user experiences by adding uniqueness and interactivity to a site. The post explores various types of custom cursors, including trailing, revealing, and interactive game cursors, along with their implementation techniques using CSS and JavaScript. Performance and accessibility considerations are also discussed. Real-life application examples and relevant CodePen demos provide practical insights for web design and development.

  11. 11
    Article
    Avatar of povioPovio·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.

  12. 12
    Article
    Avatar of devsquadDev Squad·2y

    Animate SVGs Without Code! 🚀 Meet SVGator – Your New Animation Toolkit 🖌️✨

    SVGator allows you to animate SVG designs without any coding through a drag-and-drop interface. You can create interactive animations triggered by clicks and scrolls, and export them in various formats like SVG, Lottie, GIF, or video. It's ideal for enhancing UI/UX on both web and mobile platforms.

  13. 13
    Article
    Avatar of communityCommunity 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.

  14. 14
    Article
    Avatar of communityCommunity 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.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Why toggle switches suck (and what to do instead)

    Toggle switches, although popular for their perceived simplicity and immediate action, often lead to user confusion and accessibility issues. Reasons include difficulty in understanding toggle states, potential inconsistencies, reliance on JavaScript, and concerns about saving settings. Alternative approaches like radio buttons and checkboxes offer more clarity and better user experience in many cases.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    Design Engineering 101

    Design engineering in tech is a fusion of visual design and software development, distinct from its traditional industrial and mechanical roots. The role demands extensive skills in both fields, as design engineers handle tasks from marketing websites to product polish and R&D prototypes. With few dedicated educational resources, aspiring design engineers typically dual-class by learning design and engineering separately. Future resources are expected to emerge, making the discipline more accessible.

  17. 17
    Video
    Avatar of TechWithTimTech 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.

  18. 18
    Video
    Avatar of kevinpowellKevin Powell·2y

    Stop Writing Extra Code: HTML Inputs Are More Powerful Than You Think

    Developers often overlook the capabilities of HTML inputs and CSS. For example, number inputs can be limited using min and max attributes. CSS pseudo-classes like 'in-range' can enhance user feedback. The color picker input allows users to choose colors from any open window. There's an array of native input features and pseudo-classes that can enrich user interfaces.

  19. 19
    Article
    Avatar of medium_jsMedium·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.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    Bloo Low Fidelity Wireframe Kit

    An open-source wireframe kit designed for quick design and prototyping, featuring over 250 components, support for dark mode, and 150 ready-to-use mobile screens. It's free for commercial and personal use under the CC0 License.

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    Contra Wireframe Kit

    Contra Wireframe Kit is an open-source resource for rapid design and prototyping. It offers over 150 components and 50 ready-to-use mobile screens. Users can also easily create new components and screens with the help of an included style guide. The kit is free for both commercial and personal use under a CC0 License.

  22. 22
    Article
    Avatar of logrocketLogRocket·2y

    Understanding optimistic UI and React’s useOptimistic Hook

    Optimistic UI updates enhance user experience by immediately reflecting UI changes based on user's actions, assuming background operations will succeed. React’s `useOptimistic` Hook facilitates these updates by showing a different state while an asynchronous operation is underway. This approach ensures faster and more responsive interactions, reducing perceived wait times. The Hook assumes the API response will be successful and reverts changes if an error occurs, maintaining a balance between perceived speed and data integrity.

  23. 23
    Article
    Avatar of uxplanetUX Planet·1y

    Splash Screen Design Best Practices

    Splash screens, the first screen users see when launching a mobile app, instantly form first impressions about the product. Key practices for effective splash screen design include keeping it simple with minimal text and visuals, using subtle animations to enhance visual appeal, and avoiding prolonged loading states to prevent creating impressions of a slow app.

  24. 24
    Article
    Avatar of medium_jsMedium·2y

    Design System from scratch in Flutter

    This post provides a detailed guide on creating a design system from scratch in Flutter to share design code across mobile, web, and desktop apps. It covers the steps from defining atomic parts like colors and shadows to developing themes and components such as buttons and text fields. The post also explains how to manage theme modes and assets independently, and ends by emphasizing the importance of testing the design system.

  25. 25
    Article
    Avatar of codropsCodrops·2y

    Case Study: ChainGPT Labs

    Explore the creative journey behind ChainGPT Labs, developed by Sigma Software Design, showcasing the development of a visually cohesive and functionally advanced platform for Web3 startups. Highlights include branding, 3D design, and interactive web development using tools like Webflow, GSAP, and FFmpeg. The cohesive visual identity, incorporation of 3D elements, and experimental layout designs demonstrate innovative solutions tailored for the Web3 ecosystem.

See all UI/UX archives