abdz—do - Thoughts on design, inspiration, UX career

Faybl Brand Identity: Fubo Studio Designs AI for Financial Advisers

alex — Wed, 08 Apr 2026 14:53:00 +0000

Faybl Brand Identity: Fubo Studio Designs AI for Financial Advisers alex April 08, 2026

Fubo Studio crafts the Faybl brand identity around node symbols and a trust palette, positioning AI for financial advisers as human connections at scale.

The financial services industry faces a quiet crisis. Advisers spend more time on compliance reports, CRM updates, and meeting preparation than on actual client relationships. Faybl, an AI agent built for wealth management firms, was designed to close that gap. Fubo Studio, based in Ho Chi Minh City, developed the Faybl brand identity around a single strategic belief: technology should amplify human connection, not replace it.

The core concept, More Time for What Matters, functions as the operating principle behind every visual decision. The identity avoids the cold efficiency signals common in fintech. Instead, the Faybl brand identity leans into warmth and trust, addressing the tension between operating faster and maintaining depth in client relationships.

Faybl Brand Identity: Node Symbol and Visual System

The primary symbol is built from interconnected nodes representing different layers of the advisory ecosystem: data points, client touchpoints, AI intelligence, and the network of trust connecting them. When assembled, the nodes form a unified cluster that maps the full advisory journey into a single visual form.

Typography follows a dual logic. Headlines carry enterprise-grade confidence through bold, minimal letterforms. Body text opens into breathable spacing that signals accessibility. The palette blends fintech precision with emotional warmth, anchoring the system in tones of trust and clarity.

The grid logic mirrors data flow. Repeated node forms, connecting lines, and deliberate spacing create visual rhythm that reads as information architecture, not decoration. The brand functions as a living system across every product touchpoint.

The project was created by Fubo Studio with An Nguyen, Hoa Pham, Nhi Fubo, Future Box, and TRI MINH VO. Full project on Behance.

CSS Studio: Design Visually, Ship Code with AI

alex — Wed, 08 Apr 2026 14:44:15 +0000

CSS Studio: Design Visually, Ship Code with AI alex April 08, 2026

CSS Studio is a browser-based CSS design tool that lets designers edit styles, layout, and content visually while an AI agent writes every change directly into source code.

The gap between visual design and production code has long been one of the most frustrating parts of frontend work. Designers mock up interfaces in Figma, then hand them to developers who rebuild everything from scratch. CSS Studio, from the team behind Motion, takes a different approach: it puts the design tool directly inside the browser, on the live page, and connects it to an AI coding agent that handles the implementation.

The workflow is built around three steps. First, designers use CSS Studio's on-page editing panel to change colors, layout, typography, transforms, and animations using visual controls. The tool works with any site in Chrome, Safari, or Firefox. Second, those visual changes sync to a local AI agent that finds the right files and applies the edits, whether the project uses React, Vue, plain HTML, or Tailwind CSS. Third, the agent writes the code, the designer reviews the diff, commits, and deploys. No copy-pasting, no context switching between tools.

CSS Design Tool Features Built for Real Front-End Work

The feature set goes well beyond basic color pickers. CSS Studio includes a full animations timeline where designers can scrub through CSS keyframe animations, add and move keyframes, and adjust duration, delay, direction, and easing curves. Spring easings get their own dedicated editor, using Motion's spring system to generate real CSS springs with precise bounce and duration controls. A gradient editor handles linear, radial, and conic gradients with movable color stops. A CSS variables panel detects all variables available on any element and lets designers propagate changes site-wide with a single edit. DOM editing tools allow adding, reordering, duplicating, and deleting elements, with inline text editing on double-click.

CSS Studio is in early access and available as a one-time purchase for $99 with all future updates included. For frontend teams who want to close the loop between visual design decisions and shipped code, it is a direct and practical solution. More at cssstudio.ai.

Wispr Flow: The Voice Dictation App Rethinking Input

kai — Wed, 08 Apr 2026 03:01:00 +0000

Wispr Flow: The Voice Dictation App Rethinking Input kai April 07, 2026

Wispr Flow is a voice dictation app that rewrites scattered, rambling speech into polished prose in real time — silently, across every app on any device.

The keyboard has dominated input for 150 years. Most people type somewhere around 45 words per minute. Speaking, on the other hand, runs closer to 220 words per minute — nearly five times faster. That gap has always existed, but the tools to close it have been disappointing. Old-school dictation software produced literal transcripts full of false starts, repeated words, and verbal tics that needed heavy manual cleanup. Wispr Flow takes a different approach. This voice dictation app does not just transcribe speech; it processes and edits it on the fly, removing filler words, correcting grammar, and shaping the output into clean, context-aware prose before it lands in whatever field the user is typing into.

What makes this a design story is how the product chooses to show up. Flow does not launch a separate window or demand a dedicated app screen. Instead, it appears as a minimal dark floating overlay — a slim, unobtrusive panel that activates with a hotkey and sits quietly over whichever application is in use. The visual language is deliberately restrained: dark background, subtle waveform animation while listening, and a near-instant transition to finished text. There is no mode-switching, no intermediary editing step, and no visible complexity. The UI asks almost nothing of the user.

A Voice Dictation App Built Around Context

One of Flow's more considered design decisions is its context-awareness. The voice dictation app automatically adjusts tone depending on which application is active. A message drafted in Slack gets a conversational register. A document in Google Docs gets something closer to formal prose. This kind of ambient intelligence is hard to surface visually, but it changes how the tool feels to use — more like a collaborator that reads the room than a generic transcription engine.

The personal dictionary feature shows the same attention to practical friction. Flow learns custom names, technical terms, and brand-specific vocabulary over time, adding them to a user-managed dictionary panel with a clean list interface rendered in light mode against the otherwise dark product aesthetic. The snippet library extends this further: users can define voice shortcuts that expand into full formatted blocks of text. Saying a cue word triggers the full text — a scheduling link, an FAQ answer, a boilerplate opening. It is a small feature with a disproportionate effect on daily workflow.

Cross-Platform Design Consistency

Flow runs on Mac, Windows, iPhone, and Android. The product screenshots show a deliberate effort to maintain visual and functional consistency across these contexts. The Mac and Windows versions use the floating overlay model. The mobile versions adapt the same core interaction — activate, speak, receive polished text — to a compact format that fits naturally into the iOS and Android input paradigms. The before-and-after demonstration on the homepage makes the core value proposition concrete: raw spoken input on the left, finished prose on the right, with the transformation happening in milliseconds.

The speed comparison graphic is worth noting as a design choice. Rather than using abstract marketing language, the team used a side-by-side animation: a keyboard input stream at 45 wpm versus the voice dictation app output at 220 wpm, with the visual gap between them widening in real time. It is a clear, quantitative argument made with motion rather than copy.

Wispr Flow is a voice dictation app available at wisprflow.ai with plans for individuals, teams, and enterprise use.

Surveys Mobile App UX That Pays Users to Respond

kai — Tue, 07 Apr 2026 14:16:00 +0000

Surveys Mobile App UX That Pays Users to Respond kai April 07, 2026

microfeller® studio designed this mobile app UX for Surveys, a mini-app on the World Network where users earn Worldcoin by responding to short questions.

The design brief behind Surveys was clear: make earning feel effortless. microfeller® studio, working alongside collaborators Ilya Murashko and Alex Kush, created a mobile app UX that sits inside the World Network—Sam Altman’s human-verification ecosystem—and serves two audiences at once. Regular users open the app, pick a survey, answer a few questions, and pocket Worldcoin directly into their World App wallet. Businesses get a manager console to build and launch custom surveys and pull results as CSV exports. The interface has to speak fluently to both sides without feeling cluttered or compromised.

What sets the visual direction apart is its deep, almost midnight navy background, lit by sweeping teal and cyan gradient accents. This is not the blank white canvas typical of survey tools. The dark base makes the glowing card elements feel focused and premium, directing the eye to the action on screen. Survey cards surface with readable type, estimated completion time, and a clear earnings figure—everything a user needs to decide in under three seconds.

The mobile app UX behind the two-sided survey experience

Navigation stays simple. A persistent bottom bar with icon tabs and an active-state highlight pill keeps orientation clear throughout the flow. The onboarding sequence uses step-progress indicators and a calm, linear path—no unnecessary friction between signup and first survey taken. Survey questions appear in a single-focus format: one question per screen, with large touch targets and no visual noise around them.

The business side of Surveys operates in a different register. The manager console presents survey creation as a structured grid of question-format options, letting operators choose from multiple-choice, rating scales, or open text without consulting documentation. Results display in a clean data view with export controls positioned at the top. The entire experience—from survey build to insight download—is compressed into a focused, distraction-free workspace.

What microfeller® studio achieved with this mobile app UX is a product design that earns trust from both sides of a two-sided market. The consumer interface feels like a rewards app. The business interface feels like a lightweight analytics tool. The visual language—dark backgrounds, teal gradients, rounded card modules, and high-contrast type—holds both experiences together under one coherent design system. Every screen in this mobile app UX carries the same intention: minimal, purposeful, and built for speed. That coherence is what makes Surveys feel like a finished product rather than a prototype.

Vandal Co.: Santiago Valencia’s Disruptive Brand Identity

sofia — Tue, 07 Apr 2026 13:01:00 +0000

Vandal Co.: Santiago Valencia’s Disruptive Brand Identity sofia April 07, 2026

Vandal Co. is Santiago Valencia’s brand identity studio from Colombia: electric orange, raw black, and type that refuses to stay inside any grid or rule.

Santiago Valencia launched Vandal Co. from Colombia’s Coffee Axis with a clear statement: design is not decoration. The studio’s brand identity system is built on confrontation. Three phrases repeat across every surface: “Disrupt the form,” “Rage against the grid,” and “Tear the grid.” These are operating principles, not taglines.

The visual language centers on electric orange and raw black against off-white. A custom diamond-badge logomark carries the “VANDAL Co.” name with sharp, compressed letterforms. The wordmark variant strips it to “VNDL” with high-contrast negative space. Both marks read clearly from a distance.

Brand Identity Design That Treats Every Surface as a Statement

Valencia applies the brand identity design system consistently across every touchpoint. Billboard mockups show three-column poster layouts where typography stacks at competing angles, deliberately fighting for dominance. A tote bag reads “Break the uniform” in circular type. A backlit city pillar ad says “No filter. Just disclaimer” in block sans-serif. The studio website uses the same orange-black system with “No straight thinking” as the hero headline.

A social media grid shows the full brand identity design in context: orange panels alternate with black, each holding a fragment of copy or a geometric mark. The grid-as-anti-grid idea is the whole point. The work is self-referential without being ironic. Valencia operates as a freelance designer offering branding, illustration, and lettering through his Behance portfolio. Vandal Co. earns attention through relentless consistency. Every piece reinforces the same stance. That is what makes it work.

Photoshop 2026 AI Assistant and Firefly Boards

prya — Tue, 07 Apr 2026 10:25:50 +0000

Photoshop 2026 AI Assistant and Firefly Boards prya April 07, 2026

Adobe's Photoshop 2026 AI assistant chains multi-step edits from one prompt. Firefly Boards integration now bridges ideation with precise finishing work.

Adobe shipped version 27.5 of Photoshop in April 2026 with two updates that shift how designers engage with the software. The Photoshop 2026 AI assistant enters public beta as a conversational editing layer supporting two modes. Automatic mode resolves straightforward tasks in a single step. Guided mode steps through each action with explanations, making it equally practical for learning and for production work. Voice input on mobile extends the assistant beyond the desktop.

Creative Cloud subscribers receive unlimited generations at launch, with AI Markup letting users draw on the canvas and pair annotations with text prompts to control where changes happen. Adobe also provides access to multiple third-party models, including Google Gemini 3 and Black Forest Labs FLUX.2 Pro, alongside twenty-five-plus custom models in beta.

Photoshop 2026 AI assistant and the Firefly Boards workflow

Firefly Boards integration is the other significant change in version 27.5. Designers can open Photoshop cloud documents inside Firefly Boards, generate variations and style transfers, then send selected outputs back to Photoshop for precision finishing. The two tools now share a connected pipeline rather than requiring manual file exports.

Firefly Image 4 now ships as the default generation engine, producing 2K resolution output with improved prompt adherence and fewer artifacts. Non-destructive Clarity, Dehaze, and Grain adjustment layers added in version 27.3 remain available, and Generative Remove has been rebuilt on diffusion models for cleaner portrait and landscape reconstruction. Full details on the Photoshop 2026 AI assistant update are available at Photoshop News.

Bonetti Kozerski Studio New York: Inside Their Chinatown Loft

alex — Tue, 07 Apr 2026 01:48:27 +0000

Bonetti Kozerski Studio New York: Inside Their Chinatown Loft alex April 06, 2026

The Bonetti Kozerski studio New York just relocated to Chinatown, designing their own HQ as a 23-meter loft where the Manhattan Bridge frames their work.

After 23 years working from the same SoHo building, Enrico Bonetti and Dominic Kozerski moved deliberately to Canal Street. The duo, known for interiors that balance restraint with warmth, treated their new headquarters like any other commission: a design problem with a specific brief, a defined budget, and a client with strong opinions. In this case, the client was themselves.

The result reads as a portfolio argument in built form. A 23-meter open floor plan runs the width of the building, its south wall a continuous band of floor-to-ceiling windows framing the Manhattan Bridge approach. A matte-black exposed-beam ceiling meets white epoxy resin floors, keeping the space grounded without losing the light. Custom walnut work tables run through the center. Metal shelving units stretch 12 meters along the walls, stacked with books and vintage objects accumulated over decades.

Inside the Bonetti Kozerski Studio New York

A wall of vintage speakers doubles as acoustic treatment and a material statement: the studio is as interested in what surrounds the work as in the work itself. The entry features a teak console, a marble table, and an oak bench beside paintings and a large city map. Vitra furniture fills the conference area, alongside cement-bonded particle boards sourced from Portugal.

Bonetti and Kozerski documented the project for Wallpaper* magazine in March 2026. The Chinatown HQ is a working studio, a material library, and a clear argument for what happens when the architect controls every decision.

Bar Branding Identity for Pavilhão, Rio de Janeiro

abduzeedo — Mon, 06 Apr 2026 15:17:00 +0000

Bar Branding Identity for Pavilhão, Rio de Janeiro abduzeedo April 06, 2026

Pavilhão bar branding identity by Gabriel Soulza blends Art Déco geometry with samba school colors to honor the culture and soul of Lapa, Rio de Janeiro.

Pavilhão is a bar in Lapa, Rio de Janeiro's most storied bohemian district. The neighborhood sits on a layered urban ground: Art Déco buildings line the streets, rodas de samba gather outside, and venues like Circo Voador have shaped a generation of musicians. When designer Gabriel Soulza took on the commission to develop a full bar branding identity for Pavilhão, the challenge was not just to make a logo — it was to translate all of that cultural weight into something legible, durable, and honest.

The brief covered two locations: Pavilhão Lapa and Pavilhão Botafogo. Both venues orbit three pillars — bar, culture, and gastronomy. The bar branding identity had to carry all three without collapsing into cliché. Rio de Janeiro's visual history runs deep and fast toward stereotype. Soulza's solution was to anchor the work in the building's own architecture: the Art Déco structure of the Lapa venue became the formal starting point for the logo and lettering.

A Bar Branding Identity Rooted in Place and History

The logotype draws from Art Déco geometry — angular, structured, set with a controlled weight that holds across scales. On a bottle cap, on a menu, on a staff uniform, it reads clearly. The color palette is borrowed directly from a traditional escola de samba, the samba schools that march through Rio every Carnival. These are not arbitrary cultural references. Samba schools each have a registered palette — bold combinations of primary and secondary colors that carry meaning and identity across the city. Using those colors inside a bar branding identity system grounds Pavilhão in Rio's living culture rather than in a nostalgic postcard version of it.

Beyond the logo, Soulza developed a full suite of brand applications: custom illustrations, menu design, and uniform graphics. The illustrations draw from the same visual language as the logo — geometric, flat, confident in silhouette. They reference the types of people and scenes that pass through Lapa: musicians, partygoers, the street itself. On the menu, the typography sets a clean hierarchy without competing with the illustrative elements. The uniform graphics bring the bar branding identity into the physical space, making staff part of the visual system rather than an afterthought.

The result is a coherent bar branding identity that reads as local without performing locality. It does not try to be vintage, nor does it reach for a modernist neutral. It holds its ground between the Art Déco past and the living present of the neighborhood. Gabriel Soulza's portfolio is at behance.net/gabrielsoulza and shows a consistent ability to build identity systems from place-based research rather than from visual trend cycles.

Kokkōpi: Bold Coffee Branding by Impro Studio

abduzeedo — Mon, 06 Apr 2026 13:12:00 +0000

Kokkōpi: Bold Coffee Branding by Impro Studio abduzeedo April 06, 2026

Impro Studio built coffee branding for Kokkōpi around a caffeinated rooster, tilted letterforms, and loud primary colors that absolutely refuse to blend.

There is a design philosophy buried inside the name Kokkōpi. It pulls from kokekokkō — the Japanese rooster's crow — and mixes it with kopi, the Indonesian word for coffee. The result is a brand name that already sounds like it has too much energy. Impro Studio, a Jakarta-based creative team, ran with that energy and built an entire coffee branding system around it.

The project was published in August 2025 and became one of Behance's most-appreciated branding features of that season, collecting over 7,500 appreciations. The team behind it included a creative director, art director, graphic designer, illustrator, 3D specialist, motion designer, and project manager — seven people building one loud coffee brand. That scale shows in the work.

Coffee Branding That Wears Its Personality Loud

The logotype is the first thing that signals intent. Each letterform in "Kokkōpi" sits at a slightly different angle, as though the letters themselves have had too many espressos. It is not careless. It is deliberate — a coffee branding decision that communicates personality before the brand says a single word. The tilt is consistent enough to feel systematic, loose enough to feel alive.

The rooster mascot follows the same logic. Illustrator Adrian Baihaqi drew a character that is rough where it could be clean, energetic where it could be still. The linework carries a deliberate irregularity — not the kind that comes from lack of skill, but the kind that comes from knowing exactly when to pull back. The mascot reads as a caffeine-powered anomaly, which is exactly the brief the team describes in their project notes.

Color plays the third major role in this coffee branding identity. The palette runs on bold reds, deep blacks, and warm yellows — loud primaries with high contrast and no apologies. There are no muted tones, no soft gradients to soften the brand's edges. The packaging mockups — cups, bags, and branded materials — show how the palette holds its charge even at small sizes and across different materials.

How the System Holds Together

What makes this coffee branding work as a system is the internal consistency across its most different elements. The tilted type, the rough mascot, the loud palette — these three things could easily clash if they were pulling in different directions. They do not. They share an energy level. They were each designed to feel like they came from the same place: a brand that is small, caffeinated, and not interested in being refined.

The Kokkōpi identity was created by Impro Studio for the brand itself, which positions as a coffee label built for people who want their mornings loud. The branding reflects that brief without overexplaining it. Ganang Cakra served as creative director, Luthfi Muhammad Latif as art director, with the full team — including motion and 3D work — rounding out an identity that moves as well as it sits still. The full project is on Behance at Impro Studio's profile.

Animating 160,000 Cubes: A Three.js Dithering Visualization

jeff — Mon, 06 Apr 2026 01:56:34 +0000

Animating 160,000 Cubes: A Three.js Dithering Visualization jeff April 05, 2026

Developer Damar Aji Pramudita's Three.js dithering visualization renders 160,000 GPU-instanced cubes animated via GLSL shaders to decode halftone images.

Dithering is a technique older than digital computing itself, used in print and early displays to simulate tonal gradients with limited color palettes. Pramudita's project lifts that analog concept into the browser, mapping any photograph to a 400x400 grid of 160,000 independent cube instances. Each cube receives a brightness value sampled from the source image, then animates along its z-axis in response to that value, creating a three-dimensional halftone effect that breathes with the underlying image.

The performance behind this effect depends entirely on Three.js InstancedMesh, which sends all 160,000 transformation matrices to the GPU in a single draw call. Per-cube delay factors, scale targets, and position offsets are calculated inside a GLSL vertex shader, keeping JavaScript out of the animation loop entirely. The result is a smooth, real-time render that would grind to a halt if each cube were updated individually in JavaScript.

How Three.js Dithering Visualization Works

Pramudita published a detailed 10-step tutorial on Codrops covering the full implementation, from geometry setup and texture sampling through threshold mapping and animation via shader uniforms. The Three.js dithering visualization doubles as a generative art primer, showing how a structured algorithm can produce outputs that feel organic and alive. Custom GLSL fragment shaders read normalized cell indices and compare sampled luminance against a threshold matrix, toggling cube visibility to recreate the halftone grid at any resolution.

The demo, full source code, and a step-by-step walkthrough are available on Codrops. Source: Animating 160,000 Cubes in Three.js to Visualize Dithering by Damar Aji Pramudita.