discordJun 8, 2026

Introducing: You Bar (opens in new tab)

Discord’s new You Bar is a mobile navigation redesign intended to simplify movement through the app, emphasize users’ identities, and bring mobile and desktop experiences closer together. Inspired by open-world games, it treats servers as the world users explore and the You Bar as their personal interface for moving through it. Discord says the redesign is rolling out to mobile users, with further customization and voice features planned. ## Simplifying Mobile Navigation - Discord previously used separate navigation systems for servers and non-server destinations, which became increasingly complex. - Because most mobile activity centers on servers and channels, the You Bar organizes navigation around that primary behavior. - Tapping the You Bar opens the profile, including profile editing, Settings, Quests, and the Shop. - Notifications have a dedicated bell icon. - Shortcuts include: - Long-pressing the You Bar to open the account menu and change online status. - Long-pressing the avatar to open Settings. - Swiping across the You Bar to switch between DMs and the current server. - The redesign also provides modest memory and CPU savings. ## Highlighting User Identity - The You Bar creates a dedicated space for users’ visual identities. - It features a larger avatar, more polished display name and status treatments, and greater prominence for Avatar Decorations and Nameplates. - Discord designed the area to make personal customization more expressive and visible. ## Unifying Mobile and Desktop - Discord’s desktop and mobile apps have developed different visual styles and interaction patterns over time. - The You Bar is part of a broader effort to make Discord feel familiar across devices without simply copying the desktop interface onto mobile. - The company says future mobile improvements will continue to be guided by user feedback. ## Planned Improvements - **Per-server You Bar:** The bar will reflect a user’s unique profile for the active server. - **Server Tags:** Favorite or relevant server tags will appear on the bar. - **Activity indicators:** Users will be able to see activities such as gaming or listening to music. - **Animation controls:** Users will control when animated Avatar Decorations and Nameplates play. - Discord is also reconsidering the profile page as a more dynamic, personalized space rather than a static screen. - The You Bar may support a more familiar desktop-like mobile voice experience for joining and leaving voice channels. Discord recommends viewing the You Bar as the foundation for a simpler, more personalized mobile experience. Its current redesign is only the first step toward deeper profile customization, server-aware identity features, and improved mobile voice interactions.

user-interfacediscorddesktop-appvoice-chat+2

kakaoApr 22, 2026

The Calendar We Designed for KakaoTalk Booking (opens in new tab)

KakaoTalk Reservation built a time-block calendar to help sellers understand inventory and bookings more easily than with a card list. The main challenge was arranging bookings with different start times and durations so that they remain readable and use space efficiently. The solution combines sorting rules, graph-based layout calculation, DFS, and additional expansion logic for edge cases. ## Product Requirements - The calendar is designed for the seller-facing reservation management center. - Each time slot can contain up to 10 bookings. - A booking can last from one to six hours. - Booking blocks should be displayed as clearly as possible without leaving unnecessary gaps. - The input data provides booking start and end times, while the frontend must calculate the visual layout. ## Booking Placement Rules - **Sort by earliest start time** - Earlier bookings are placed first to match the seller’s natural workflow. - This also supports the typical visual scanning order from the upper-left toward the lower-right. - **For bookings starting at the same time, sort by longest duration** - Longer bookings can block shorter bookings from expanding. - Placing them first gives them enough space and allows later bookings to occupy the remaining areas more effectively. ## Graph-Based Expansion - The bookings are modeled as nodes in a graph. - Each node stores relationships with preceding and following overlapping bookings. - A depth-first search calculates: - Each node’s depth, representing its horizontal position. - The maximum distance to the final booking in its connected path. - These values are used to calculate: - `left`: the node’s horizontal starting position. - `width`: how far the booking can expand across available space. - Nodes at the far-left edge of the graph are processed first, allowing the bookings to fill the calendar while respecting overlaps. ## Handling Layout Exceptions - The initial graph and DFS calculation did not always fill all available space. - Problems occurred when: - Multiple root nodes existed. - An upper root node had a longer path than a lower root node. - Connected nodes were constrained by earlier width calculations. - The implementation searches for unused gaps between neighboring nodes. - When multiple gaps exist, connected nodes are expanded by the smallest available amount needed to close the gaps. - A gap is detected when the next node’s `left` position is greater than the current node’s `left + width`. ## Lessons from the Implementation - A calendar that appears visually simple can require substantial algorithmic design. - Frontend developers are responsible not only for rendering data, but also for deciding how that data should be presented to users. - The calendar is treated as an evolving implementation that will be refined as new bugs, data patterns, and better algorithms are discovered. The practical approach is to begin with clear sorting rules, represent overlapping bookings as a graph, use DFS to determine layout constraints, and add targeted post-processing for unused space and edge cases.

user-interfacedata-visualizationfrontendcalendar-ui+2

discordApr 16, 2026

Making Discord on Desktop Look Just Right: Display Settings to Ease the Eyes (opens in new tab)

Discord’s desktop app offers several display and accessibility settings to make conversations more comfortable and easier to read. Users can control when media and spoilers appear, reduce interface color intensity, simplify names and role colors, manage HDR brightness, and adjust UI density and text size. These options let people tailor Discord to their visual preferences without changing how content appears to others. ## Chat Options for Customizing Conversations - In **User Settings > Display > Messages**, users can control whether images and videos appear automatically. - Media can be shown or manually opened when: - Posted as direct links - Uploaded directly to Discord - **Show embeds and link previews** can be disabled to prevent automatic previews for web links. - Alt text can be displayed by default when image descriptions are provided. - Spoiler content can be configured to appear: - **On click** - **Always** - **On servers I moderate** - Links can always be underlined, improving visibility—especially when interface saturation is reduced. ## Toning Down Discord’s Colors - The **Saturation** setting reduces the intensity of interface colors, including buttons, status indicators, and links. - Saturation can also be applied to custom colors such as server role colors. - User-created media—including avatars, custom emoji, photos, and videos—is not affected. - Role colors can be displayed as a dot beside a user’s name instead of coloring the entire name. ## Reducing Brightness and Visual Distractions - HDR-capable displays may show extremely bright images and videos. - In **Accessibility > High Dynamic Range**, users can switch from **Full Dynamic Range** to **Standard Range** to reduce HDR intensity. - Nitro display-name styling can be disabled through **Accessibility > Text Readability > Display Name Styles**. - Disabling these styles restores standard fonts and colors without notifying other users. ## Adjusting UI Density and Text Size - Discord also provides settings to make the interface more or less dense, depending on whether users prefer more information on screen or greater spacing. - The article introduces additional controls for changing the size and spacing of interface content, though the provided text ends before describing them in detail. Overall, Discord’s display settings can be combined to reduce visual overload: hide media until needed, lower saturation, soften HDR content, simplify names, and adjust spacing or text size for a more comfortable setup.

user-interfacediscordaccessibilityresponsive-design+2

discordMar 24, 2026

Discord Update: March 24, 2026 Changelog (opens in new tab)

Discord’s March 24, 2026 changelog focuses on making desktop gaming and navigation faster and more convenient. New features include improved screen sharing, easier voice invitations, expanded game profiles, and gifting for Marvel Rivals items. Discord also introduced browser-style navigation controls, faster performance, role-member lists, and refreshed settings pages. ### Improvements for Game Nights - Screen shares can now be zoomed and panned with a mouse wheel or trackpad. - Single-window Go Live streams should start faster. - A new **Invite to Voice** option recommends server members and nearby friends for voice chats. - The Game Stats Profile Widget now supports **Wuthering Waves**, displaying information such as achievements and favorite Resonators. - Users can wishlist and gift Marvel Rivals items through the game’s Discord server and Game Shop. ### Faster Desktop Navigation - Behind-the-scenes performance improvements reduce lag when moving around the desktop app. - New **Back** and **Forward** buttons work similarly to browser navigation, including support for compatible mouse buttons. - Clicking an `@Role` mention now shows up to 100 users assigned to that role. - The Desktop Settings redesign continues with updated Notifications, Voice and Video, Clips, and Streamer Mode pages. ### Additional Developer News - Discord also highlighted new opportunities for game developers announced at this year’s Game Developers Conference, directing developers to a separate blog post for details. Overall, the update is aimed at smoother desktop performance, easier navigation, and more features for connecting around games.

user-interfacediscorduxperformance-optimization+4

figmaJan 4, 2026

Press Start: How Controllers Shaped Video Game Design—and Where Interfaces May Go Next | Figma Blog (opens in new tab)

Video game interfaces evolved from simple start screens into complex systems of menus, maps, inventories, and customization. Yet the controller’s directional inputs and buttons have remained a consistent foundation, shaping navigation patterns and preserving players’ muscle memory. The article argues that understanding how input devices define interfaces will be essential as AR, VR, and other technologies introduce new ways to interact with digital worlds. ## From Simple Screens to Complex Game Hubs - Early games such as *Tennis for Two*, *Pong*, *PAC-MAN*, and *Super Mario Bros.* offered minimal interfaces, often requiring only a coin insertion or a start button. - Modern AAA games support many features, including: - Multiple game modes - Character customization - Cosmetics stores - Maps and inventories - Quests and settings - These features have transformed games into interconnected hubs of screens, menus, and tabs. - The growth of gaming has helped make it a major cultural and economic industry, supported by livestreaming, esports, and Olympic recognition. ## Controllers as a Design Foundation - From the Atari 2600 to the PlayStation 5, controllers have consistently combined directional controls with buttons. - This consistency allows players to transfer familiar muscle memory between generations of games. - Established controller conventions create predictable navigation patterns for players. - Designers and developers benefit from these conventions because they reduce the need to create entirely new interaction models for every game. ## The Input Defines the Interface - Every platform has a dominant input method that shapes its interface: - Desktop: mouse - Mobile: fingers and touch gestures - Television: remote controls - Mouse interfaces can use small, dense controls because the pointer is fast and precise. - Touch interfaces require larger, more widely spaced controls because fingers are less precise than cursors. - Mobile design also takes advantage of gestures such as tapping, swiping, and pinching. - The article’s broader point is that interface design must reflect the physical capabilities and limitations of the device used to navigate it. ## Preparing for New Forms of Interaction - Game interfaces increasingly connect 2D navigation systems with 3D worlds. - AR and VR controllers may allow players to engage with their physical surroundings as well as digital environments. - As input methods evolve, designers will need to rethink how people move through interfaces, rather than simply adapting existing controller-based patterns. The practical recommendation is to treat input as a core design constraint. By studying how controllers shaped game navigation—and how emerging technologies change physical interaction—designers can build interfaces that feel intuitive across future platforms.

user-interfaceux-designaugmented-realityvirtual-reality+3

figmaDec 15, 2025

Chat, Are We Cooked? How Language Has Become the New Metric of Virality | Figma Blog (opens in new tab)

Social media algorithms are reshaping language by turning words into signals of virality. Linguist Adam Aleksic argues that platforms influence not only how people speak, but also how they understand identity, culture, and one another. While this linguistic creativity is not inherently harmful, users should recognize how algorithms can strip terms from their original contexts and spread ideological ideas. ## Products Shape Communication and Identity - Interfaces communicate values as well as functionality, reflecting Marshall McLuhan’s idea that “the medium is the message.” - Tinder’s swiping system commoditizes dating and reinforces associations such as “right” being positive and “left” being negative. - Dating platforms encourage users to perform and categorize themselves according to available features: - Hinge prompts users to present a structured story. - Grindr encourages identity categories such as “bear” or “twink.” - These design choices can affect both outward self-expression and people’s internal understanding of identity. ## Algorithms Accelerate Linguistic Change - Online communities create slang, while recommendation algorithms expose it to much larger audiences. - This produces “context collapse”: users encounter words outside the communities and cultural settings where they originated. - Platform metadata now includes every word users write or say, not just hashtags, making language itself a mechanism for discovering and promoting content. - Influencers can popularize expressions whose origins their audiences may not recognize. ## From Ballroom Slang to Mainstream Vocabulary - Terms such as “slay,” “serve,” “queen,” “cooked,” “ate,” “bussin’,” and “it’s giving” have roots in African American and queer ballroom culture. - Historically, slang spread gradually through connected social groups; algorithms now accelerate that process dramatically. - As words become mainstream, their original connotations may weaken or change. - Aleksic emphasizes the importance of understanding these origins rather than treating viral slang as context-free vocabulary. ## Memes as Cultural and Ideological Vehicles - Aleksic is less concerned with linguistic change itself than with the ideas carried by newly popular terms. - Expressions from online subcultures, including incel communities, can enter mainstream usage through meme circulation. - Terms such as “looksmaxxing” and “-pilled” may spread because memes make unfamiliar or troubling ideas more accessible. - Memes can effectively “Trojan-horse” concepts into broader culture, though critical awareness can reduce their potential harm. Users should enjoy the flexibility and creativity of evolving language while remaining attentive to where viral terms come from, what meanings they lose, and which beliefs they may carry into the mainstream.

user-interfacealgorithmsmetadatasocial-media-algorithms+2

figmaDec 6, 2023

From Slack-lash to Toggle Tax: The New Vernacular of Work | Figma Blog (opens in new tab)

The article presents a playful glossary for the changing realities of digital and hybrid work. These terms capture common frustrations, habits, and moments in modern workplaces—from endless notifications and multitasking to awkward meetings and collaborative design. Together, they suggest that humor and shared language help people navigate an increasingly virtual work environment. ## Balancing Effort and Iteration - **Fidelity Fluency:** Knowing how polished a project needs to be, and avoiding unnecessary pixel-perfect work when a rough concept is sufficient. - **WIP Waltz:** The continual cycle of revising, tweaking, and rethinking work as it develops. - **Style Guide Safari:** Exploring a design system’s typography, colors, and other visual elements to find the right creative direction. - **UI Lock Ness Monster:** A frequently discussed interface feature that is always expected in a future update but never appears. ## Digital Overload and Distraction - **Keyboard Cardio:** The frantic effort of sending emails and Slack messages, likened to an intense keyboard workout. - **Slack-lash:** The shock of being hit by a sudden flood of Slack notifications and messages. - **Tab Tsunami:** Having so many browser tabs open that the screen—and one’s attention—feels overwhelmed. - **Toggle Tax:** The mental cost of constantly switching between tasks and contexts. - **Workplace Whack-a-Mole:** Repeatedly responding to incoming tasks, alerts, and emails as soon as they appear. ## Virtual Meeting Experiences - **Icebroken:** Oversharing during an icebreaker and turning a friendly introduction into an uncomfortable moment. - **Screenshare Scramble:** Quickly hiding embarrassing or irrelevant browser tabs before sharing a screen. - **Zoombie:** Someone who appears present on a video call but is mentally disengaged. - **Zoom Zen:** The rare, highly effective meeting where the agenda is clear, participation runs smoothly, and the call ends on time. ## Collaboration and Social Validation - **Sudden Heavy Stamping:** Receiving an unexpected rush of positive reactions—such as hearts or “+1” votes—on a collaborative idea. - **Fidelity Fluency** also reflects collaborative judgment: teams must match the level of detail to the project’s actual needs rather than overinvesting in polish. The glossary turns the habits and tensions of modern work into memorable expressions. Recognizing these patterns can make digital collaboration more manageable—and encourage teams to protect focus, communicate intentionally, and find humor in workplace chaos.

user-interfacefigmadesign-systemsslack+3

figmaMar 8, 2021

Behind the feature: comments, contextually | Figma Blog (opens in new tab)

Figma’s Community comments feature was designed to turn a mostly one-way publishing platform into a space for direct creator–audience communication. The team combined general feed comments with spatial, in-editor-style comments, while carefully adapting interactions to preserve the file-viewing experience. Technical constraints mattered, but the hardest work involved resolving subtle interaction and edge-case decisions. ## Why Community Comments Were Needed - Community users could browse, duplicate, and install resources, but had no straightforward way to contact creators. - Figma wanted the Community to support deeper engagement through questions, feedback, and discussion. - The feature introduced two comment types: - **General comments**, displayed in a feed beneath the file. - **Contextual comments**, attached to specific locations within the design. ## Adapting the Existing Commenting System - The team initially expected to reuse Figma’s existing in-editor comments with minor changes. - They replaced the previous iframe-based file preview to enable communication of viewport information. - They also had to consider performance when files contained many comments. - The larger challenge was interaction design: - Community files traditionally supported one-way creator-to-audience communication. - Comments created a two-way channel between audiences and creators. - Contextual comments required spatial navigation rather than a simple linear feed. - Users needed to inspect comment locations while still being able to pan across the canvas. - The team aimed to encourage commenting without diminishing the existing view-only experience. ## Exploring the User Experience - Engineering, design, and product worked in a close feedback loop. - Designers used animated prototypes and GIFs rather than only static wireframes because commenting depended heavily on interaction behavior. - Explorations considered: - Sidebar comment feeds. - Different ways to embed comments around the viewer. - Mini-viewers and canvas interactions for locating comments. - Prototypes helped the team evaluate ideas against technical feasibility, UI edge cases, and the launch schedule. ## Launch Priorities and Design Decisions The team prioritized three goals: - Make entering the commenting experience quick and intuitive. - Give contextual comments enough surrounding space to understand their position in the file. - Deliver a technically feasible, appropriately simple solution within the project timeline. As a result, contextual comments were limited to fullscreen view, where users had enough space to understand the design context. Clicking the minimized canvas expanded it into fullscreen mode, while clicking and panning were disabled in the smaller preview to avoid compromising the primary browsing experience. The feature ultimately required more than porting existing code: it demanded a new interaction model for combining comments, spatial context, and file browsing. Figma’s approach shows the importance of iterative cross-functional prototyping when adapting a familiar feature to a fundamentally different product environment.

user-interfacefigmainteraction-designiframe+2

figmaApr 3, 2019

We refreshed Figma's UI: An inside look at our process | Figma Blog (opens in new tab)

Figma’s 2019 UI refresh aimed to modernize the product without disrupting users. Rather than redesigning its structure, the team focused on visual inconsistencies in typography, layout, color, and iconography, using extensive research and internal discussion to guide decisions. The process began by cataloging problems, then organizing them into broader themes. ## Why Figma Needed a Refresh - The interface had evolved piecemeal as the product expanded. - Teams created custom components when existing patterns no longer fit, producing inconsistent: - Tables, buttons, and input controls - Shades of gray, red, and blue - Visual and interaction patterns - The original UI foundation predated major features such as Multiplayer and Components. - Both users and employees increasingly noticed the inconsistencies. ## Step One: Brainstorming the Problems - Figma held a two-hour session with the entire design team. - Designers explored the product firsthand, documenting quirks, shortcomings, and successful patterns with notes and screenshots. - Findings were collected in a shared Figma file and text document. - Strong group reactions—such as an “oh shit, that’s bad” response—helped identify issues likely to have broad impact. - The team deliberately paused for several days afterward, allowing opinions to settle and new insights to emerge. ## Step Two: Organizing and Synthesizing Findings - The team revisited the brainstorm after the reflection period and debated which problems mattered most. - Designers converted detailed observations into broader post-it themes. For example: - Several notification inconsistencies became “We need a system for how we handle notifications.” - Notes were grouped by similarity, such as: - Color - Legibility - White space - Notifications - This clustering reduced noise and revealed larger systemic issues, including typography, icons, dialogs, toolbars, sharing, layers, components, and file browsing. - Figma found that grouping was useful but overly complex classification was not. - The team abandoned an additional “visual to foundational” axis because it made the framework harder to use. ## Lessons from the Process - A visual refresh often becomes necessary gradually rather than because of one decisive moment. - Broad, understandable categories are more useful than abstract or overly narrow ones. - Time between brainstorming and synthesis helps teams reassess initial reactions. - The refresh prioritized surface-level improvements so users could benefit from a more coherent interface without learning an entirely new product.

user-interfacefigmadesign-systemsui-ux+2