TLDR Design 2024-05-09

Circle to Search on iPhone πŸ”, Final Cut Camera App πŸ“·, Sonos App Redesign πŸ”Š

πŸ“±
News & Trends

Google brings a variation on β€˜Circle to Search' to iPhone users (1 minute read)

Google has introduced a shortcut for iPhone 15 Pro users to perform visual searches using Google Lens by pressing the Action Button, circumventing iOS limitations on gesture-based interactions. To utilize this feature, users must install the Google app and assign the visual search shortcut to their iPhone's Action Button.

Apple Launches Final Cut Camera App to Support Multicam Productions (1 minute read)

Apple has released Final Cut Camera for iPhone and iPad, allowing filmmakers to take video and stream it live back to an iPad for a multicam shoot. The updated Final Cut 2 app allows users to can control each Final Cut Camera-running device connected to it with a multiscreen view. Users can switch between production and editing anytime to live-cut their projects in the new version.

The new Sonos app is missing a lot of features, and people aren't happy (1 minute read)

Sonos released a redesigned mobile app that promised a more personalized and modern experience with a customizable home screen, but the update removed several features, prompting mixed reactions from users. While some praise the improved responsiveness and intuitive design, others, especially those relying on local music libraries and sleep timers, are frustrated with the app's regression in functionality and accessibility.
πŸš€
Opinions & Tutorials

Case Study: Serra. Identity and Product Design for Financial App (4 minute read)

Serra is an iOS/Android app that aims to solve locals' real-life challenges by building a culturally aware financial application from the ground up in Montserrat (the Caribbean region). The brand logo, a bold wordmark mixing typographic and calligraphic elements, strives for legibility and emotional connection through handwriting association. Its color palette, predominantly green with contrastive orange, evokes trust and friendliness, and is complemented by the neat and readable Mabry Pro typography.

Going from Designer to Design Manager in an Organization with a Low Design Maturity (5 minute read)

Transitioning from a designer to a design manager in organizations needing more design maturity presents challenges. Designers often defend their decisions, while managers must justify the team's fundamental value. These struggles are observed in organizations categorized at lower levels of design maturity, suggesting underlying cultural issues rather than solely communication or strategic shortcomings.

Why & how ethics matter in design (9 minute read)

While design's visual appeal often takes the spotlight with its trendy aesthetics and flashy packaging, the essence of design as a problem-solving process is overlooked in pursuit of profit. This piece emphasizes the need for ethical considerations in design. It encourages designers to contribute positively to pressing global issues and outlines resources for those seeking to make an impact through their work.
πŸ’»
Launches & Tools

The AI Design Tool for Product Photoshoots (Website)

With an intuitive, user-friendly interface and a powerful AI engine, Flair AI can generate high-quality product photoshoots in seconds.

700+ Free UI Components with Code Editor (Website)

EasyFrontend offers a collection of UI Components, Blocks, and Sections built with HTML, React, Bootstrap, and Tailwind CSS to enable you to make a site in minutes.

Extend Your Tailwind Colors (Website)

fullwindcss is a Tailwind CSS plugin that lets you unlock 1,001 shades for every tailwind color instead of being limited to the default 11 shades.
🎁
Miscellaneous

Declarative Design (31 minute read)

Design tools are typically imperative, allowing us to create pixel-perfect interfaces. In contrast, CSS is a declarative language that sets boundary conditions and lets the browser handle the details. Some designers avoid CSS at all costs, while others jump into designing in the browser. However, an exciting alternative is to use the browser to make design decisions instead of creating on it.

Keep it together: 5 essential design patterns for dev tool UIs (10 minute read)

Tabs must be distinct, flexible, and intuitive for multitasking, while toolbars should prioritize common actions without overcrowding or inconsistency. Navigation sidebars should be well-organized, collapsible, searchable, and customizable. Properties panels need to be clear, concise, and easily accessible for attribute editing.

Transparent borders (2 minute read)

Removing borders with CSS can pose accessibility issues, especially in high contrast mode. Setting border color: transparency enables changing border color without affecting the box model. It is helpful for hover effects without layout alterations. This approach also aids in themeable design systems by offering flexibility for various brands and themes, reducing misalignment and unexpected behavior caused by different border widths, and minimizing QA efforts.
⚑️
Quick Links

Cicadas Rising (Website)

This spring, two broods of cicadas β€” one that lives on a 13-year cycle and the other that lives on a 17-year cycle β€” will emerge simultaneously from underground in a rare, synchronized event that last occurred in 1803.

Designer engagement survey (Website)

How happy are UX and Product Designers at work?
Curated tools πŸ–ŒοΈ , trends 🎨, and inspiration πŸ’‘ for design professionals
Join 300,000 readers for