TLDR Design

TLDR DESIGN 2024-05-09

5 sections15 entrieslinks blockcomplete parse

Parse notes

  • Subscription/account footer truncated before parsefooter_truncated

02OPINIONS & TUTORIALS

CASE STUDY: SERRA. IDENTITY AND PRODUCT DESIGN FOR FINANCIAL APP

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.

blog.tubikstudio.com4 min read

GOING FROM DESIGNER TO DESIGN MANAGER IN AN ORGANIZATION WITH A LOW DESIGN MATURITY

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.

medium.com5 min read

WHY & HOW ETHICS MATTER IN DESIGN

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.

mathijssterrenburg.medium.com9 min read

03LAUNCHES & TOOLS

700+ FREE UI COMPONENTS WITH CODE EDITOR

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.

easyfrontend.comTool

EXTEND YOUR TAILWIND COLORS

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.

fullwindcss.comTool

04MISCELLANEOUS

DECLARATIVE DESIGN

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.

adactio.com31 min read

KEEP IT TOGETHER: 5 ESSENTIAL DESIGN PATTERNS FOR DEV TOOL UIS

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.

evilmartians.com10 min read

TRANSPARENT BORDERS

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.

bradfrost.com2 min read