mobile-app-design

4 posts

discord

Squircles, Styles, and Spacing: How Your Feedback is Helping Improve Mobile (opens in new tab)

Discord is updating its mobile app to align more closely with the refreshed desktop experience. The changes introduce consistent themes and shape conventions, improve accessibility and customization, and simplify the chat bar. The overall goal is to make Discord feel familiar and consistent regardless of platform. ## Desktop Themes Come to Mobile - Mobile now includes all four desktop base themes: - Light - Ash - Dark - Onyx - Ash restores the classic dark appearance with improved contrast for accessibility. - Onyx provides true black AMOLED backgrounds instead of dark gray, potentially reducing battery use on OLED displays. - Users can adjust contrast and saturation through Accessibility settings. - Nitro users’ voice and video tile backgrounds now match their selected profile theme across desktop and mobile. ## More Flexible Theme Customization - Users can choose which Light and Dark themes activate based on their device’s appearance mode. - The “Same as Device Theme” option is available under Appearance settings. - Device-theme synchronization takes priority over “Sync Across Devices.” - Themes such as Mint Apple for Light mode and Noir for Dark mode can be assigned to different times of day. ## Consistent Shapes Across the Interface - Discord now follows a simple visual rule: - People, including friends and bots, use circular avatars. - Servers and apps use squircle-shaped icons. - The distinction helps users identify people versus things while scanning lists. - Rounded corners on buttons, inputs, and containers have also been standardized. - Direct messages and group DMs remain circular to preserve their “friend circle” identity. ## A Less Crowded Chat Bar - The chat bar has been reorganized to create more space for composing messages. - Emoji, Gift, Voice Message, and frequently used quick actions remain visible near the right side. - Threads and app usage have moved into the **+** menu. - Long-pressing **+** provides a shortcut to any action without opening the full menu. - Although Threads and Apps now require an additional tap, the long-press gesture is intended to keep them readily accessible. Together, these updates make mobile Discord more visually consistent with desktop while giving users greater control over themes and preserving quick access to common actions.

figma

In Good Company: How Publishers Use Figma to Help Design the News | Figma Blog (opens in new tab)

Publishers are adapting to digital-first journalism by redesigning products, developing new visual identities, and experimenting with formats that attract and retain readers. The article argues that Figma helps media organizations coordinate designers, editors, engineers, and executives while maintaining accuracy, clarity, and accessibility. The New York Times’ redesigned app illustrates how collaborative prototyping can support a broader subscription ecosystem without losing journalism’s central role. ## The shift toward digital-first publishing - Legacy publishers face accelerating change as audiences move from print to web and mobile. - Subscription models are becoming more important amid an unpredictable advertising market, although many readers remain reluctant to pay for online news. - Media teams must build stronger relationships with readers while exploring new products and formats. - Figma supports this work by keeping multidisciplinary teams aligned during design and experimentation. ## The New York Times’ redesigned app - Relaunched in October 2024, the app reflects The Times’ strategy of connecting multiple products, including News, Games, Cooking, Audio, Wirecutter, and The Athletic. - The redesign places the **Today** section and the latest news at the center of the experience. - A top navigation system makes other verticals easier to discover, with each product receiving its own home screen. - Rather than creating one “super app” feed, the design gives each section a distinct visual identity: - Lifestyle uses image-heavy grids with headline overlays, based on a component called a “poster.” - Opinion uses stylized headlines to communicate its different editorial perspective. - The overall concept treats journalism as the central “sun,” with other products orbiting around it. ## Figma as a newsroom collaboration space - The project involved section editors, engineers, senior management, product designers, and The Times’ storytelling group. - Teams used Figma asynchronously to explore layouts combining text, images, video, and audio. - Designers could share interactive prototypes directly instead of preparing as many presentation decks or relying on screen-sharing meetings. - The shared workspace helped stakeholders see colleagues’ work immediately and participate in shaping the app’s editorial formats. The article’s broader recommendation is that collaborative design tools can help publishers manage complex digital transformations while preserving strong editorial identities.

figma

Pablo Sánchez’s 7 Rules for Designing the Unexpected | Figma Blog (opens in new tab)

Pablo Sánchez argues that memorable digital products come from personal conviction, unexpected sources of inspiration, and a willingness to imagine alternatives to the present. His work on Ableton Note demonstrates this approach: instead of reproducing conventional music-production tools, the app emphasizes tactile, immediate experimentation through features like “Capture,” which loops phrases after they are played. ## Design for Yourself - Strong design begins with personal conviction rather than detached objectivity. - Designers should create something that inspires them, since personal enthusiasm can make the final product feel authentic. - For Ableton Note, Sánchez replaced an expected MIDI editor with directly playable instruments suited to mobile interaction. - User testing later validated the direction, and the app launched without a MIDI editor. - Note lets users tap rhythms on a 16-pad grid, play melodies and chords, and develop variations in Session View. ## Brainstorm Without References - Starting with existing design references can lock a team into familiar solutions. - Brainstorming without references encourages ideas drawn from personal experience and absorbed cultural influences. - Sánchez describes this process as creating an “assemblage” from the collective ideas designers carry with them. - Although Note’s influences were not copied directly, apps such as Samplr and Borderlands Granular contributed to its creative foundation. ## Look Beyond Design - Inspiration can come from literature, dance, nature, science, emotions, and personal memories—not only other interfaces. - Sánchez wanted Note to feel as immediate as picking up a guitar and experimenting. - He also drew from Brutalist architecture, particularly its emphasis on materiality, simplicity, and the removal of unnecessary ornament. - This led to a minimal interface that reduces the complexity of music production and lets users interact directly with sound. - Note includes features such as a microphone-based sampler and a visual sound interface. ## Design for Tomorrow - Sánchez distinguishes between: - **Affirmative design**, which solves existing problems and reinforces the current world. - **Critical design**, which questions current conditions and explores how the world could be different. - Unexpected design combines both approaches by imagining new possibilities while encouraging people to investigate them. - Designers are encouraged to speculate beyond present assumptions rather than simply repeating familiar patterns. - The article invokes xenofeminist thinking—“If nature is unjust, change nature!”—as an example of challenging supposedly fixed conditions. The excerpt presents unexpected design as a practice of trusting personal intuition, combining diverse influences, and designing toward possibilities that do not yet exist. Ableton Note illustrates how a focused, unconventional vision can produce a more playful and distinctive experience than simply implementing expected features.

figma

Figma 3.0 (!) | Styles, prototyping++ and design at scale | Figma Blog (opens in new tab)

Figma 3.0 aims to replace fragmented, desktop-based design workflows with a unified web platform. Its major additions—more capable prototyping, shared styles and libraries, and an Organization tier—help teams keep designs, feedback, prototypes, and systems connected. The overall goal is to reduce tool switching, synchronization work, and redundant subscriptions. ## More Capable Prototyping Figma 3.0 expands prototyping so teams can create realistic interactive experiences directly from their designs: - **Device frames** provide context for designs across iPhones, Android devices, and Apple Watch. - **Fixed objects** keep headers, footers, status bars, and buttons attached to frame edges during scrolling. - **Scrollable areas** support nested frames, vertical lists, horizontal carousels, and scrolling in any direction. - **Transitions** such as dissolve, slide, and push make prototypes resemble native mobile applications. - Prototypes remain synchronized with the underlying design, eliminating screen exports and manual updating. - Comments stay linked to the design, while prototypes can be presented from a mobile browser. - Figma is also investing in an API for integrations with other prototyping tools and web applications. ## Styles and Team Libraries Figma Styles is now generally available, following extensive user research and a private beta. - Styles and Team Libraries allow companies to create and maintain shared design systems. - Teams can centralize reusable visual attributes and apply them consistently across projects. - The feature is intended to reduce inconsistencies and help organizations manage company-wide design standards. ## Organization Tier Figma is previewing a new Organization tier designed for larger companies. - It focuses on scaling design management across large organizations. - Together with shared components, commenting, developer handoff, and web-based collaboration, it is intended to support moving most of a team’s workflow into Figma. Figma 3.0’s practical recommendation is to consolidate design, prototyping, feedback, and design-system management in one web-based environment, while using Figma’s API when specialized integrations are still necessary.