Circle to Search on iPhone ๐, Final Cut Camera App ๐ท, Sonos App Redesign ๐
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="x-apple-disable-message-reformatting">
<title>TLDR Design</title>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
:root {
color-scheme: light dark; supported-color-schemes: light dark;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
* {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
html,
body,
.document {
width: 100% !important; height: 100% !important; margin: 0; padding: 0;
}
body {
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt; mso-table-rspace: 0pt;
}
table {
border-spacing: 0; border-collapse: collapse; table-layout: fixed; margin: 0 auto;
}
img {
-ms-interpolation-mode: bicubic; max-width: 100%; border: 0;
}
*[x-apple-data-detectors] {
color: inherit !important; text-decoration: none !important;
}
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important; cursor: default !important;
}
.btn {
-webkit-transition: all 200ms ease; transition: all 200ms ease;
}
.btn:hover {
background-color: #f67575; border-color: #f67575;
}
* {
font-family: Arial, Helvetica, sans-serif; font-size: 18px;
}
@media screen and (max-width: 600px) {
.container {
width: 100%; margin: auto;
}
.stack {
display: block!important; width: 100%!important; max-width: 100%!important;
}
.btn {
display: block; width: 100%; text-align: center;
}
}
body,
p,
td,
tr,
.body,
table,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span {
background-color: #FEFEFE !important; color: #010101 !important;
}
@media (prefers-color-scheme: dark) {
body,
p,
td,
tr,
.body,
table,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span {
background-color: #27292D !important; color: #FEFEFE !important;
}
}
a {
color: inherit !important; text-decoration: underline !important;
}
</style>
<!--[if mso | ie]>
<style type="text/css">
a {
background-color: #FEFEFE !important; color: #010101 !important;
}
@media (prefers-color-scheme: dark) {
a {
background-color: #27292D !important; color: #FEFEFE !important;
}
}
</style>
<![endif]-->
</head>
<body class="">
<div style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">Google has introduced a shortcut for iPhone 15 Pro users to perform visual searches using Google Lens by pressing the Action Buttonย </div>
<div style="display: none; max-height: 0px; overflow: hidden;">
<br>
</div>
<table align="center" class="document"><tbody><tr><td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600"><tbody><tr class="inner-body"><td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody>
<tr class="header"><td bgcolor="" class="container">
<table width="100%"><tbody><tr><td class="container">
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" style="margin-top: 0px;" width="100%"><tbody><tr><td style="padding: 0px;">
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div style="text-align: center;">
<span style="margin-right: 0px;"><a href="https://tldr.tech/design" rel="noopener noreferrer" target="_blank"><span>Sign Up</span></a>
|<span style="margin-right: 2px; margin-left: 2px;"><a href="/tldr-marketing-and-design-sponsorship-opportunities/" rel="noopener noreferrer" target="_blank"><span>Advertise</span></a></span>|<span style="margin-left: 2px;"><a href="https://a.tldrnewsletter.com/web-version"><span>View Online</span></a></span>
<br>
</span>
</div>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="text-align: center;">
<span data-darkreader-inline-color="" style="--darkreader-inline-color:#3db3ff; color: rgb(51, 175, 255) !important; font-size: 30px;">T</span><span style="font-size: 30px;"><span data-darkreader-inline-color="" style="color: rgb(232, 192, 96) !important; --darkreader-inline-color:#e8c163; font-size:30px;">L</span><span data-darkreader-inline-color="" style="color: rgb(101, 195, 173) !important; --darkreader-inline-color:#6ec7b2; font-size:30px;">D</span></span><span data-darkreader-inline-color="" style="--darkreader-inline-color:#dd6e6e; color: rgb(220, 107, 107) !important; font-size: 30px;">R</span>
<br>
</td></tr></tbody></table>
<br>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody></tbody></table>
<table style="table-layout: fixed; width:100%;" width="100%"><tbody><tr><td style="padding:0;border-collapse:collapse;border-spacing:0;margin:0;">
<div style="text-align: center;">
<h1><strong>TLDR Design <span id="date">2024-05-09</span></strong></h1>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr>
<tr bgcolor=""><td class="container">
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td style="padding: 0px;">
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;"><span style="font-size: 36px;">๐ฑ</span></div>
</div>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;">
<h1><strong>News & Trends</strong></h1>
</div>
</div>
</td></tr></tbody></table>
<table style="table-layout: fixed; width: 100%;" width="100%"><tbody><tr><td style="padding:0;border-collapse:collapse;border-spacing:0;margin:0;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://techcrunch.com/2024/05/08/google-brings-a-variation-on-circle-to-search-to-iphone-users/">
<span>
<strong>Google brings a variation on โCircle to Search' to iPhone users (1 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://www.theverge.com/2024/5/7/24151109/apple-final-cut-camera-app-support-multicam-ipad">
<span>
<strong>Apple Launches Final Cut Camera App to Support Multicam Productions (1 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://www.theverge.com/2024/5/8/24151704/sonos-new-app-bad-reviews-missing-features">
<span>
<strong>The new Sonos app is missing a lot of features, and people aren't happy (1 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;"><span style="font-size: 36px;">๐</span></div>
</div>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;">
<h1><strong>Opinions & Tutorials</strong></h1>
</div>
</div>
</td></tr></tbody></table>
<table style="table-layout: fixed; width: 100%;" width="100%"><tbody><tr><td style="padding:0;border-collapse:collapse;border-spacing:0;margin:0;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://blog.tubikstudio.com/case-study-identity-product-design-financial-app/">
<span>
<strong>Case Study: Serra. Identity and Product Design for Financial App (4 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://medium.com/@callibrate/going-from-designer-to-design-manager-in-an-organization-with-a-low-design-maturity-f0091ff440ec">
<span>
<strong>Going from Designer to Design Manager in an Organization with a Low Design Maturity (5 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://mathijssterrenburg.medium.com/the-design-industry-lacks-a-moral-compass-c2940f71031c">
<span>
<strong>Why & how ethics matter in design (9 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;"><span style="font-size: 36px;">๐ป</span></div>
</div>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;">
<h1><strong>Launches & Tools</strong></h1>
</div>
</div>
</td></tr></tbody></table>
<table style="table-layout: fixed; width: 100%;" width="100%"><tbody><tr><td style="padding:0;border-collapse:collapse;border-spacing:0;margin:0;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://flair.ai/">
<span>
<strong>The AI Design Tool for Product Photoshoots (Website)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
With an intuitive, user-friendly interface and a powerful AI engine, Flair AI can generate high-quality product photoshoots in seconds.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://easyfrontend.com/">
<span>
<strong>700+ Free UI Components with Code Editor (Website)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://fullwindcss.com/">
<span>
<strong>Extend Your Tailwind Colors (Website)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;"><span style="font-size: 36px;">๐</span></div>
</div>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;"><strong><h1>Miscellaneous</h1></strong></div>
</div>
</td></tr></tbody></table>
<table bgcolor="" style="table-layout: fixed; width: 100%;" width="100%"><tbody><tr><td style="padding:0;border-collapse:collapse;border-spacing:0;margin:0;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://adactio.com/articles/21110">
<span>
<strong>Declarative Design (31 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://evilmartians.com/chronicles/keep-it-together-5-essential-design-patterns-for-dev-tool-uis">
<span>
<strong>Keep it together: 5 essential design patterns for dev tool UIs (10 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://bradfrost.com/blog/post/transparent-borders/">
<span>
<strong>Transparent borders (2 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;"><span style="font-size: 36px;">โก</span></div>
</div>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding-top: 0px; padding-bottom: 0px;">
<div class="text-block">
<div style="text-align: center;">
<h1><strong>Quick Links</strong></h1>
</div>
</div>
</td></tr></tbody></table>
<table bgcolor="" style="table-layout: fixed; width: 100%;" width="100%"><tbody><tr><td style="padding:0;border-collapse:collapse;border-spacing:0;margin:0;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://matejlatin.com/designer-engagement-survey/">
<span>
<strong>Designer engagement survey (Website)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
How happy are UX and Product Designers at work?
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://www.itsnicethat.com/articles/stefano-colferai-animation-project-070424">
<span>
<strong>The anatomy of imperfection: Inside Stefano Colferai's playful stop motion animations of everyday life (3 minute read)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
The work of Stefano Colferai makes light of life's imperfections.
</span>
</span>
</div>
</td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block">
<span>
<a href="https://edition.cnn.com/interactive/2024/04/us/periodical-cicada-2024-visual-guide-scn-dg/">
<span>
<strong>Cicadas Rising (Website)</strong>
</span>
</a>
<br>
<br>
<span style='font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;'>
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.
</span>
</span>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody>
<tr><td align="left" style="word-break: break-word; vertical-align: top; padding: 5px 10px;">
<p style="padding: 0; margin: 0; font-size: 22px; color: #000000; line-height: 1.6; font-weight: bold;">
Want to advertise in TLDR? ๐ฐ
</p>
</td></tr>
<tr><td class="container" style="padding: 0px 10px 15px;">
<div class="text-block">
If your company is interested in reaching an audience of design professionals and decision makers, you may want to <a href="/tldr-marketing-and-design-sponsorship-opportunities/"><strong><span>advertise with us</span></strong></a>.
</div>
<br>
<div class="text-block">
If you have any comments or feedback, just respond to this email!
<br>
<br> Thanks for reading,
<br>
<span>Jae Lee</span>, <span>Matej Latin</span> & <span>Ralph Brinker</span>
<br>
<br>
</div>
<br>
</td></tr>
</tbody></table>
<table align="center" bgcolor="" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="container" style="padding: 15px 15px;">
<div class="text-block" id="testing-id">If you don't want to receive future editions of TLDR Design, pleaseย <a href="#"><span>unsubscribe</span></a>.
<br>
<br>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<img alt="" src="http://tracking.tldrnewsletter.com/CI0/0100018f5d42f9f3-b4cdec0b-9b2c-478a-8ab3-d1867918a7e8-000000/TqLuj9kjDDaDGOkjYWxdLTERbRd3ddTeI3eOlYXj14M=352" style="display: none; width: 1px; height: 1px;">
</body>
</html>
Google has introduced a shortcut for iPhone 15 Pro users to perform
visual searches using Google Lens by pressing the Action Buttonย
Sign Up [1] |Advertise [2]|View Online [3]
TLDR
TLDR DESIGN 2024-05-09
๐ฑ
NEWS & TRENDS
GOOGLE BRINGS A VARIATION ON โCIRCLE TO SEARCH' TO IPHONE USERS (1
MINUTE READ) [4]
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) [5]
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) [6]
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) [7]
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) [8]
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) [9]
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) [10]
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) [11]
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) [12]
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) [13]
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) [14]
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) [15]
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
DESIGNER ENGAGEMENT SURVEY (WEBSITE) [16]
How happy are UX and Product Designers at work?
THE ANATOMY OF IMPERFECTION: INSIDE STEFANO COLFERAI'S PLAYFUL STOP
MOTION ANIMATIONS OF EVERYDAY LIFE (3 MINUTE READ) [17]
The work of Stefano Colferai makes light of life's imperfections.
CICADAS RISING (WEBSITE) [18]
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.
Want to advertise in TLDR? ๐ฐ
If your company is interested in reaching an audience of design
professionals and decision makers, you may want to ADVERTISE WITH US
[19].
If you have any comments or feedback, just respond to this email!
Thanks for reading,
Jae Lee, Matej Latin & Ralph Brinker
If you don't want to receive future editions of TLDR Design,
pleaseย unsubscribe [20].
Links:
------
[1] https://tldr.tech/design?utm_source=tldrdesign
[2] https://advertise.tldr.tech/tldr-marketing-and-design-sponsorship-opportunities?utm_source=tldrdesign&utm_medium=newsletter&utm_campaign=advertisetopnav
[3] https://a.tldrnewsletter.com/web-version?ep=1&lc=8da0e7b2-57b3-11ee-9b14-1b573c414657&p=432cd132-0dc5-11ef-807e-75013a97e65e&pt=campaign&t=1715256621&s=0b9c2285b16e3b259027abfbb547c563d09789f7942f40fde939811e38e9a2bd
[4] https://techcrunch.com/2024/05/08/google-brings-a-variation-on-circle-to-search-to-iphone-users/?utm_source=tldrdesign
[5] https://www.theverge.com/2024/5/7/24151109/apple-final-cut-camera-app-support-multicam-ipad?utm_source=tldrdesign
[6] https://www.theverge.com/2024/5/8/24151704/sonos-new-app-bad-reviews-missing-features?utm_source=tldrdesign
[7] https://blog.tubikstudio.com/case-study-identity-product-design-financial-app/?utm_source=tldrdesign
[8] https://medium.com/@callibrate/going-from-designer-to-design-manager-in-an-organization-with-a-low-design-maturity-f0091ff440ec?utm_source=tldrdesign
[9] https://mathijssterrenburg.medium.com/the-design-industry-lacks-a-moral-compass-c2940f71031c?utm_source=tldrdesign
[10] https://flair.ai/?utm_source=tldrdesign
[11] https://easyfrontend.com/?utm_source=tldrdesign
[12] https://fullwindcss.com/?utm_source=tldrdesign
[13] https://adactio.com/articles/21110?utm_source=tldrdesign
[14] https://evilmartians.com/chronicles/keep-it-together-5-essential-design-patterns-for-dev-tool-uis?utm_source=tldrdesign
[15] https://bradfrost.com/blog/post/transparent-borders/?utm_source=tldrdesign
[16] https://matejlatin.com/designer-engagement-survey/?utm_source=tldrdesign
[17] https://www.itsnicethat.com/articles/stefano-colferai-animation-project-070424?utm_source=tldrdesign
[18] https://edition.cnn.com/interactive/2024/04/us/periodical-cicada-2024-visual-guide-scn-dg/?utm_source=tldrdesign
[19] https://advertise.tldr.tech/tldr-marketing-and-design-sponsorship-opportunities?utm_source=tldrdesign&utm_medium=newsletter&utm_campaign=advertisecta
[20] https://a.tldrnewsletter.com/unsubscribe?ep=1&l=e1c4e253-3e90-11ed-9a32-0241b9615763&lc=8da0e7b2-57b3-11ee-9b14-1b573c414657&p=432cd132-0dc5-11ef-807e-75013a97e65e&pt=campaign&pv=4&spa=1715256242&t=1715256621&s=fa2e024434e066d18f410dfc33d87cb427317782458cfa595930cae585b67013
Email Information
- Subject Line
- Circle to Search on iPhone ๐, Final Cut Camera App ๐ท, Sonos App Redesign ๐
- Emails
- TLDR Emails
- Send Date
- May 9, 2024 08:10 AM
- Coupons
- TLDR Coupons
- Tags
- Images
- 1
- Links
- 20
- Preview Text
Other Recent Emails from TLDR
Design docs at Google ๐, testing ChatGPT-4o ๐ค, โโState of HTML 2023 ๐
TLDR
May 17, 2024 07:16 AM
Vercel Raise $250M at $3.25B ๐, Building for Longevity ๐งฌ, Blinded By Metrics ๐
TLDR
May 17, 2024 08:08 AM
Chainlinkโs Tokenization Pilot โ๏ธ, Senate Votes to Kill SEC Crypto Policy ๐ณ๏ธ, Pump.fun exploited ๐ฅท
TLDR
May 17, 2024 08:10 AM
Apple Eye Tracking ๐, Strava Dark Mode ๐โโ๏ธ, Quilt Redesign Heat Pumps ๐ก๏ธ
TLDR
May 17, 2024 08:12 AM
New WIFI attack ๐ถ, Cloud Defense Strategies ๐ฆ๏ธ, Android with Gemini screens scammers ๐ฑ
TLDR
May 17, 2024 09:07 AM
OpenAI & Reddit partnership ๐ค, Hugging Face $10M compute ๐ฐ, Llama 3 in NumPy ๐ป
TLDR
May 17, 2024 09:16 AM
Account Needed
You need to create an account for this feature. It takes less than 60 seconds.