Best of UI DesignAugust 2023

  1. 1
    Article
    Avatar of communityCommunity Picks·3y

    Web UX: Study Guide

    The resources here are grouped under the following topics: General Consideration on Web Usage Viewing Behaviors on the Web Eyetracking Gaze Patterns Web Interaction Design Content. This section introduces fundamental theories and key research on information-seeking behaviors on the web.

  2. 2
    Article
    Avatar of builderiobuilder.io·3y

    Closing the Gap: Simplify Your Web Layouts with the CSS Gap Property

    The CSS Gap Property is a shorthand for the size of the gap between the rows and columns in, or multi-column layouts. Using the gap property instead of margins, you can use the CSS gap property to achieve the same effect with a single line of code. It simplifies layouts, improves readability, enables responsive design, reduces code complexity and improves browser performance.

  3. 3
    Article
    Avatar of uxplanetUX Planet·3y

    10 AI website builders every UI/UX designer must try

    Keep an eye on these top 10 fantastic AI builder platforms I came across. Framer AI One my favourite website builders out there. Dora AI One of the forefront in bringing AI to website building. Kleap Kleap is not only built your website with AI but also helps you choose the right words and pics for you.

  4. 4
    Article
    Avatar of uxplanetUX Planet·3y

    Top 5 Design Systems That Streamline Design Process

    For each design system, we will provide a Figma UI kit so you don’t need to create UI elements from scratch. The HIG is a must-have tool for anyone who wants to build a product for the Apple ecosystem. Microsoft Fluent 2 is the next evolution of Microsoft’s design system.

  5. 5
    Article
    Avatar of uxplanetUX Planet·3y

    Design System — Fundamental principles for designing and developing a robust Design System.

    A Design System is a large set of reusable components combined with a set of rules, using visual design elements like colors, spacing, or shapes. It enables you to deliver a consistent design in less time. It doesn’t only save your time but it helps in maintaining a consistent experience.

  6. 6
    Article
    Avatar of lambdatestLambdaTest·3y

    Complete Guide to Color Contrast Accessibility

    WebAIM (Web Accessibility in Mind) is a platform that provides guidelines on how accessibility should be adopted across the web. This is where the CSS color-contrast() feature can help developers provide adequately contrasting and accessible modern web designs. We explore color contrast accessibility in CSS, its implementation, and how to test websites or mobile applications.

  7. 7
    Article
    Avatar of hackernoonHacker Noon·3y

    12 Project Ideas for Aspiring Web and Mobile Developers

    The article emphasizes the importance of focusing on user interface and experience, while the projects serve as valuable learning experiences and portfolio pieces. For mobile developers, suggested projects encompass an ecommerce app, diet tracking app, personal finance app, movie review app, photo editing app, and social networking app.

  8. 8
    Article
    Avatar of codemotionCodemotion·3y

    The Rise of ViteJS: Unraveling its Popularity

    ViteJS is fundamentally a build tool and local development server. It is designed to streamline the front-end development of modern web apps by reloading code modules dynamically to avoid recompiling the entire application. Vite is, in part, built on Rollup, but bottlenecks can be a problem for developers with complex code.

  9. 9
    Article
    Avatar of uxplanetUX Planet·3y

    20 essential Figma plugins every designer must try

    Most Figma plugins in this list are available for free. Remove BG allows you to remove the background of images with just a single click. Icons8 provides access to 3,000,000+ icons (consistent, pixel-perfect, in 40+ styles), photos (flat and 3D, vector and raster) and illustrations.

  10. 10
    Article
    Avatar of freecodecampfreeCodeCamp·3y

    How to Use Un-Styled UI Components – Guide for Front-End Developers

    The term "un-styled" doesn't signify a lack of design – rather, it refers to a blank slate that lets you infuse your creativity and branding without the limitations that come with traditional UI elements. Un-Styled UI components give you the freedom to mold every detail to align with your app's design and purpose.

  11. 11
    Article
    Avatar of asayerasayer·3y

    Effective Cross-Browser Testing Strategies

    Cross-browser testing involves testing a web application to ensure it functions and appears on different browsers and versions. It involves verifying that websites or web applications work and look the same across different web browsers and their versions. This article explores the best practices and strategies for efficient cross- browser testing.

  12. 12
    Article
    Avatar of asayerasayer·3y

    Hacking the Brain: Unleashing the Power of Neuroscience for Web Design

    Hacking the Brain: Unleashing the power of the brain to design a web site. This article covers different ways we can leverage the principles of neuroscience to craft remarkable user experiences that will leave our visitors wanting more. The most effective websites are those that engage all brains with all brains.

  13. 13
    Article
    Avatar of asayerasayer·3y

    Create Stunning Pages with React and Shoelace CSS

    Shoelace CSS is a lightweight and modular CSS framework that provides developers with a simple and efficient way to style their web applications while focusing on flexibility. This article will show you all the needed details so you can immediately start using the framework. In this section, we’ll be working with components and elements which are very simple to use.