#ui-design
#ui-design

Keep it together: 5 essential design patterns for dev tool UIs-Martian Chronicles, Evil Martians' team blog

UI design is crucial for developer tools; tabs are essential for multitasking and organizing workspaces. [ more ]

Medium

1 week ago

Principles of Typography in UI Design

Typography is a crucial aspect in UI design, impacting readability, brand tone, and user experience. [ more ]

Lukew

LukeW | Pinball User Interface

Pinball UI refers to a disorganized arrangement of user interface elements on a screen, making navigation difficult.

Intentional layout of UI elements is crucial to guide users through processes and relationships clearly. [ more ]

LogRocket Blog

Why you shouldn't use vertical trim in Figma (yet) - LogRocket Blog

Figma's vertical trim feature helps solve spacing issues caused by excess leading, enhancing design accuracy and easing development adjustments. [ more ]

Medium

Responsive layout grid in Figma

Responsive layout grids in Figma ensure design adaptability across screens.

Creating columns grid in Figma aids in aligning UI elements horizontally. [ more ]

Medium

Making of true multi-brand design system

Decouple components and styles in Figma for easy maintenance and flexibility.

Use style components in Figma similar to CSS classes to create reusable UI element styles. [ more ]

Creative Bloq

It seems Adobe's given up on UI design (for now)

Adobe XD will remain in 'maintenance mode' with no major updates or investment.

Adobe has ruled out resurrecting XD or launching a new UI design tool, but is open to exploring partnerships in the space. [ more ]

eLearning

Navigating the Digital Landscape: Understanding the Intricacies Between UX and UI Design - eLearning

UX and UI design are distinct facets with unique influences on the user journey.

Embracing the nuances leads to creating experiences that leave a lasting impact on users. [ more ]

LogRocket Blog

All accessible touch target sizes - LogRocket Blog

Accessibility in UX design is vital for enhancing usability and user satisfaction.

Target size in UI design is crucial for ensuring user interaction consistency. [ more ]

LogRocket Blog

Pop-ups, popovers, and poppers: What are they and when do you use them? - LogRocket Blog

Establishing a consistent terminology is important in UX and UI design teams for clear communication and collaboration.

Pop-ups, popovers, and poppers are commonly conflated terms in UI design and have different functions. [ more ]

eLearning

What Does Make UI/UX Essential in Software Development? - eLearning

UI/UX design is critical to the success of a software product

The global UI and UX Design Software market is predicted to reach USD 4093.63 million by 2028 [ more ]

Medium

Why UI designers should understand Flexbox and CSS Grid

Move beyond rigid column-based layouts with modern CSS for dynamic designs.

Understanding each other's tools and limitations is crucial for collaboration between designers and developers. [ more ]

Medium

Why UI designers should understand Flexbox and CSS Grid

Move beyond responsive column-based design with modern CSS layouts

Understanding each other's tools and limitations is crucial for collaboration in design and development [ more ]

moreresponsive-design

user-experience

Medium

My favorite UX & UI design courses

Being self-taught in design is facilitated by a plethora of online courses.

Understanding user expectations and mental models is crucial in design. [ more ]

Medium

58 rules for beautiful UI design

The right UI can make a difference in user engagement

The article provides 58 rules for UI design [ more ]

Adropincalm

Bump up modal accessibility with aria attributes and focus trap. Implementations in vanilla JavaScript and React.

Modals are a popular UI feature, but there are important details to consider for a smooth user experience.

The dialog HTML tag, role, aria-modal attribute, and aria-label or aria-labelledby attributes are used to define and identify modals for assistive technology.

Ensuring proper focus management is important for modal interactions, including setting focus inside the modal when it opens and restoring focus when it closes. [ more ]

LogRocket Blog

Checkbox UI design: Best practices and examples - LogRocket Blog

Checkboxes allow users to select multiple options while radio buttons allow only one option. Checkbox requires the user to submit information while toggle switches provide an immediate response.

A checkbox consists of an input element, a label, and a sign that can be either none, checked, or intermediate. [ more ]

Rauno

What should we ship?

The new homepage for Vercel prioritizes performance, constraint in visual flair, and aesthetic coherence.

Universally experienced elements of an interface include page speed, legible typography, layout stability, and accessibility. [ more ]

moreaccessibility

Medium

1 week ago

Dark patterns versus behavioural nudges in UX

UI design is heavily influenced by psychology, with ethical considerations playing a crucial role in distinguishing between behavioral nudges and dark patterns. [ more ]

Medium

There is a huge problem about Fake UI Designers

Browsing social networks is a key source of inspiration for many UI designers.

A concerning trend of 'fake' UI designers creating designs lacking functionality and meaning is emerging. [ more ]

Medium

What can we learn from Japan for UI Design

Japanese aesthetic emphasizes simplicity and functionality

Incorporating cultural principles like Ma and Wabi-Sabi enriches UI design [ more ]

Medium

5 Underrated Tools Revolutionizing UI Design

The Figma Community offers templates and plugins for inspiration and efficiency.

AI tools and traditional methods like pencil and highlighters are valuable in UI design. [ more ]

blog.logrocket.com

Apple vs. Android Design: How their design philosophies influence the past and present - LogRocket Blog

Adobe Firefly uses generative AI and machine learning for image creation and editing.

Tips for UI design with Adobe Firefly. [ more ]

LogRocket Blog

Sheets vs. dialogs vs. snackbars: What to use when - LogRocket Blog

User feedback is essential in UX design for error prevention and guiding users.

Dialogs, bottom sheets, and toast notifications provide distinct types of user feedback in UI design. [ more ]

Creative Bloq

6 days ago

Whatsapp's UI redesign looks clean and fresh

WhatsApp has revamped its UI design with a new color palette and improved accessibility features. [ more ]

Medium

Using a single dimension scale for all numbers in your UI designs

Defining a dimension scale is a crucial step in a design system to enhance consistency and reduce errors in screen designs and production code. [ more ]

Medium

The Hybrid Designer: Mastering UI Design and Web Integration

Combining UI Design and web integration skills enhances design professionals' value and understanding of technology.

Mastery of both skills leads to better-designed interfaces and improved collaboration with development teams. [ more ]

Medium

5 Essential Tools for Building UI Libraries Like a Pro

UI libraries are crucial in web development for consistent design

Clear design language and standards ensure UI library consistency

Robust tooling is necessary for UI library management [ more ]

Creative Bloq

Are the Microsoft To Do icons really that bad?

Icons are crucial for clear and quick communication in UI design.

Microsoft To Do app icons faced mixed reactions from Reddit users for their design. [ more ]

Kotaku

RIP To The Best Part Of Persona 3's UI

Reload is a remake of the 2006 original Persona 3 with graphical updates, new social link content, and quality-of-life improvements.

The original Persona 3 had a unique UI design that constantly reminded the player of the theme of death, while Reload removes this visual reference. [ more ]

Bestjquery

2 weeks ago

jQuery

Counter Style 279

Embrace creativity in UI design by leveraging interactive elements like 3D slider, auto-complete, barcode, etc., enhancing user experience. [ more ]

Creative Bloq

Oreo reckons it inspired the design of an ubiquitous UI icon

The hamburger menu commonly seen on websites and apps was potentially inspired by the Big Mac and Oreo cookies.

Brands like McDonald's and Oreo are playfully claiming credit for the design of the hamburger menu.

There is speculation about potential sponsorship opportunities through naming rights for app menus. [ more ]

Medium

Design Monthly Vol. 8

Inspiration is everywhere if you have the right mindset.

Drawing inspiration from various fields like architecture and graphic design is beneficial. [ more ]

Python GUIs

Adding images to PySide6 applications, using QLabel and QPixmap

Qt uses QLabel, not QImage, to display images in applications.

Qt Designer can be used to easily insert and display external images in a PySide6 application. [ more ]

Alvinalexander

Data science

How to set a Java JFrame title

Two ways to set JFrame title: during construction or using setTitle method.

setTitle method can change title of an existing JFrame. [ more ]

LogRocket Blog

Web development

Mojo CSS vs. Tailwind: Choosing the best CSS framework - LogRocket Blog

CSS frameworks like Tailwind and Mojo CSS enhance web design by offering customizable components and improved performance.

Mojo CSS introduces a revolutionary approach by building UI without shipping CSS, aiming to enhance web performance significantly. [ more ]

Kyle Shevlin's Blog

Web development

No Outer margin | Kyle Shevlin

Avoid applying outer margins and paddings to the outermost element of a component.

External spacing should not be the responsibility of a reusable component. [ more ]

Berlin Startup Jobs

Job Vacancy: Unity 2D Game Artist * // GameDuell | Design / UX Jobs | Berlin Startup Jobs

Passion for high-quality games and superior customer experience drives GameDuell's success.

Unity 2D Game Artist role involves creating UI elements and collaborating with diverse teams. [ more ]

Vue.js Examples

Vue

A Vue.js app designed to help users manage and track their projects effectively

Comprehensive Vue.js Project Tracker

Key Features: Project Management, Filtering, UI Enhancements [ more ]

LogRocket Blog

Glassmorphism: What it is and how it's going - LogRocket Blog

Glassmorphism is a UI trend that creates the illusion of a glass-like texture in interfaces.

Glassmorphism incorporates transparency, layers, background blur, gradients, and shadows to achieve a floating glass effect. [ more ]

Creative Bloq

Early mockups reignite debate over Nintendo Switch UI design

The appearance of early mockups of the Nintendo Switch UI design has reignited the debate among fans.

The mockups show a busier menu design with more options for customization and familiar icons from the Wii U and 3DS consoles. [ more ]

www.gsmarena.com

HarmonyOS Next gets closer to prime time, video shows off the new UI design language

HarmonyOS Next is getting closer to release with an updated UI design language.

Huawei is dropping Android support in China for HarmonyOS Next, but retaining it internationally. [ more ]

Smashing Magazine

The Complex But Awesome CSS border-image Property - Smashing Magazine

The CSS border-image property can be used to create decorative accents and shapes in UI designs.

Understanding how the border-image property works and its syntax can help dispel confusion and make it easier to use. [ more ]

LogRocket Blog

Creating a setup wizard (and when you shouldn't) - LogRocket Blog

A wizard UI is like a guide that leads users through a complex digital interface with ease and efficiency.

A setup wizard is a step-by-step process that allows users to input information in a prescribed order, while a product walkthrough tooltip provides optional information. [ more ]

LogRocket Blog

Creating a UI style guide - LogRocket Blog

A style guide in UI helps define the foundational elements of design, such as color, fonts, typography, and buttons.

The purpose of a style guide is to make purpose-led decisions and create a beautiful UI for the product. [ more ]

LogRocket Blog

How to handle Figma's "missing fonts" warning - LogRocket Blog

Figma is the most used tool for UI design and prototyping, but it has an issue with missing fonts.

If you encounter missing fonts in Figma, make sure you have the font installed, choose a replacement font, or install the Figma font installer for your operating system. [ more ]

LogRocket Blog

A UX designer's guide to 40 essential UI elements - LogRocket Blog

UI elements provide navigational support and help users control the system they are using.

This article covers forty essential UI design elements that UX designers should be familiar with. [ more ]

LogRocket Blog

Shadows in UI design: Tips and best practices - LogRocket Blog

Shadows in UI design help create depth and visual hierarchy, making the interface more realistic and intuitive.

Good shadows in UI design are softer and more subtle, with a lower level of contrast compared to the background. [ more ]

Usability Geek

Unveiling Inspiring UI Design Examples and Insights - Usability Geek

UI design is the fusion of form and function, creating seamless and intuitive digital experiences.

UI designers transform complexity into elegant and user-friendly interactions. [ more ]

uxplanet.org

7 UX/UI Design Trends in 2023: Innovations in User Experience

Buttonless UI is an emerging trend in UI/UX design as technology advances.

Buttonless interfaces use alternative methods like gestures and voice commands for user interaction. [ more ]

Medium

Dark Mode UI Design Best Practices

Dark mode is a popular UI design style that features dimmed, dark, and grey color themes.

The dark mode trend gained significant momentum in 2019, with the introduction of systemwide dark modes on Android 10 and iOS 13. [ more ]

moreDesign

uxplanet.org

If I started UX Design in 2024, Here's What I'd Do!

https://undraw.co Most beginners associate UX design with the use of Figma.

But UI/UX design is a broader field of knowledge and skills.

Stephanie Walter - Senior UX Designer, Mobile Expert, Conference Speaker, Blog writer and Teacher.

Pixels of the Week - December 17, 2023 by Stephanie Walter - UX Researcher & Designer.

Curated articles and resources about UX Design, User Research, UI and mobile design, HTML, CSS, and the web industry

Experimenting with a foil quill for the Cameo 4 and creating metallic gel pen Winter solstice cards [ more ]

LogRocket Blog

UI card design: Definition, tutorial, and examples - LogRocket Blog

Cards are a prominent UI element because they present clear information in digestible chunks.

Cards offer enhanced visual appeal, improved information organization, simplified navigation, and adaptability in app design. [ more ]

uxplanet.org

Typography

Typography essentials

Textual information is crucial in UI design for creating a positive user experience.

Typography essentials include understanding typefaces, fonts, and their appropriate use in different contexts.

Serif, sans serif, monospace, and handwritten typefaces each have distinct characteristics and applications. [ more ]

Medium