📱 The foldable is real. iPhone Duo, 7.6 inches open, $1,999, ships October 23. The crease is still there. Apple never actually said it wouldn’t be.
📸 iPhone 18 Pro got a real aperture. ƒ/1.48 to ƒ/4 on six laser-cut blades, plus manual shutter speed. Actual optics, not a blur slider.
🔒 Photos can now prove they’re photos. Apple Reference Image signs the sensor data. Apple skipped the industry standard to build it.
🪟 Liquid Glass got rebuilt. Users now control transparency themselves, which means your UI has to survive a range instead of a look.
📐 Your layouts need work. Two size classes, three reserved regions, and “poses” instead of orientations. The dock went vertical.
🗓️ iOS 27 shipped September 14. No regular iPhone 18 until spring 2027. First keynote under CEO John Ternus.
Apple’s September keynote is usually a spec sheet with a soundtrack. A number goes up. Someone says “our most advanced ever.” The stock moves two percent.
This one was different.
On September 9, John Ternus walked out at Apple Park as CEO, eight days into the job, and folded an iPhone in half on stage.
Predictably, the internet spent the next 24 hours arguing about a crease.
Fine. But the crease is the least interesting thing that happened. The parts that actually land on your desk happened around the edges: a rebuilt Liquid Glass, a cryptographic receipt for photographs, and a set of layout rules that quietly break a habit iOS has had since 2007.
Here’s all of it, and what it costs you.
iPhone Duo in Star White and Night Sky. Image: Apple
Everything Apple announced
📱 iPhone Duo
$1,999 / 256GB · Pre-order Oct 16 · Ships Oct 23
The foldable. 5.4 inches closed, 7.6 open, both displays Super Retina XDR at 3000 nits with ProMotion and always-on.
Grade 5 titanium, mirror-polished, with a 3D-printed hinge cover and a hinge made of more than 100 components. The inner screen gets a nano-texture finish.
Face ID didn’t fit, so Touch ID moved into the side button and the FaceTime camera hides under the inner display. A20 Pro chip, dual 48MP Fusion cameras, 4K120 in Dolby Vision.
Two colors: Star White and Night Sky. Ships in 70-plus countries running iOS 27.1 out of the box.
📸 iPhone 18 Pro and Pro Max
$1,199 / $1,299 · Pre-order Sep 12 · Ships Sep 18
The A20 Pro is the first 2nm chip in a phone. Nice, but not the story.
The story is the camera. A real variable aperture on the main lens, six laser-cut blades moving between ƒ/1.48, ƒ/1.8 and ƒ/4. Manual shutter speed control. Texture and grain sliders in Photographic Styles.
That’s a physical iris in a phone. Depth of field you commit to at capture instead of faking afterward.
Dynamic Island shrank and now holds three live activities. Battery goes to 36 and 45 hours of video. Four finishes: black, silver, glacier, burgundy.
Oh, and there’s no regular iPhone 18 this fall. That one slips to spring 2027. If you wanted a normal iPhone, your options are last year’s or $1,199.
⌚ Apple Watch Series 12 and Ultra 4
$399 / $799 · Ceramic from $899 · Ships Sep 18
New Health Sensing System, S11 chip, a Readiness app, and Audio Intelligence features including Live Rewind, which keeps the last 15 seconds of a conversation. Make of that what you will.
The material news is genuinely better. Ceramic is back after seven years, in pearl white and night blue. Aluminum cases move to Ceramic Shield 2. New Sport Loops use inkjet printing for plaid patterns, and Hermès brought a Rocabar Club band with a three-dimensional H.
🎧 AirPods 5
$129 · $149 with wireless charging
ANC is now in the $129 base model and removes up to 50 percent more noise than AirPods 4. The $149 version adds a wireless charging case, stem volume controls and an extra hour.
The cheapest thing announced is also the best value by a mile. Funny how that works.
Also: Siri’s AI features now have a daily usage cap, with expanded access sold separately. Nobody clapped for that one.
iPhone 18 Pro, four finishes. Image: Apple
About that crease
Apple’s engineering answer is genuinely clever, and it’s basically expensive bookbinding.
Optically clear adhesives let the display layers slide against each other as the screen folds, so the stack isn’t fighting itself at the bend. Apple’s own words are that the layers glide “like pages in a book.” On top sits a nano-texture finish, a matte surface that scatters the reflection you’d otherwise use to spot the fold.
Clever. Now read the copy again.
Apple says the construction “minimizes stress and crease.” Minimizes. Not eliminates. That is not sloppy marketing, that is a legal team doing its job.
Then there’s the number Apple didn’t publish. Samsung rates the Z Fold8 for 500,000 folds. Apple published no fold-cycle rating at all.
When a company that will happily tell you its glass is 3x more scratch resistant suddenly goes quiet on a durability number, the silence is the number.
Hands-on reports landed within hours. 9to5Google found the crease about as visible as on any Android foldable.
That gap between the engineering story and the thing in your hand is the most honest detail of the whole keynote.
5.4 inches closed, 7.6 open. Image: Apple
What designers actually said
The design press was noticeably warmer than the spec-sheet press. There’s a reason.
The Duo is the first foldable that reads as a designed object rather than two phones in a trench coat.
Yanko Design went furthest, arguing it stops being an iPhone without becoming an iPad.
Their best observation is about the asymmetry: two rounded corners on the right, squared geometry at the hinge. Your hand knows which edge to open before your eyes do. They compare it to a small hardcover.
But their sharpest line is about software, not hardware. On the open display, the Dynamic Island rotates sideways along the edge and the dock goes vertical.
As Yanko put it: nobody outside Apple would have been permitted to move that dock.
“New but remarkably familiar, the same size as your passport.”
Molly Anderson, Apple VP of industrial design, to Wallpaper*
That’s better product framing than anything in the actual keynote script.
Now the skepticism, which is just as specific.
Yanko called Touch ID instead of Face ID a real step back on a two thousand dollar phone. Hard to argue.
PetaPixel pointed out the Duo runs the previous-generation main sensor, with no variable aperture and no dedicated telephoto.
Read that again: the most expensive iPhone Apple sells has the worst camera of the three phones announced.
Macworld’s verdict on the event was that it delivered more Shine than Surprise, with one editor summarizing the pricing tiers as: the more you pay, the less fun you get.
PetaPixel did find the one genuinely new creative trick, though. Fold it halfway, stand it on a table, and it’s a tripod that previews your framing on the outer screen while both cameras record.
That isn’t a spec. That’s a shooting posture that didn’t exist last week.
One more piece of context worth having. Alan Dye left for Meta at the end of 2025 after nearly twenty years running design at Apple. Steve Lemay took human interface. Molly Anderson took industrial design.
“Surprise and Shine” is the first launch where both hardware and software carry the new team’s fingerprints end to end. Keep that in mind while you judge it.
Liquid Glass finally grew up
Remember the iOS 26 backlash?
Apple shipped what amounted to a frosted shower door installed in a conference room. Gorgeous in the render. Unreadable in the meeting.
Transparency everywhere, text you had to squint at, and developers annoyed that perfectly working apps suddenly needed a visual pass.
Here’s what I respect: Apple didn’t retreat, it rebuilt.
Shubham Kedia, Apple’s human interface design director, says the material now diffuses complex content behind it far more aggressively while adding depth and separation.
In plain terms: darker outlines around translucent elements, stronger contrast, and backgrounds that actually blur instead of politely tinting.
Three changes hit your work directly.
🎚 There’s a transparency slider now. Users drag Liquid Glass from ultra clear to fully tinted. Which means you’re no longer designing a look. You’re designing a range, and your contrast has to hold at both ends of it.
🖼 App icons changed. Liquid Glass layers are composited into the artwork itself with a new rendering path, so icons come out sharper. Icon Composer is how you build them.
📏 macOS Golden Gate corrects inconsistent corner radii across every app, including third-party ones, with zero developer work.
That last one deserves a second read. Apple is now quietly fixing everyone’s corner radii for them. Whether they asked or not.
Honestly? Half of you needed it.
A photo that can prove it’s a photo
This is the feature I keep thinking about, and almost nobody led with it.
Apple Reference Image on the 18 Pro is, functionally, a birth certificate for a photograph.
The camera captures signed sensor data. Private Cloud Compute develops that into a reference version you can’t alter, which Apple describes as something close to a digital negative. Any edited copy gets checked against it.
Retouched? Generated? The comparison shows it.
Here’s the spicy part. Nikon, Canon and Google all back C2PA Content Credentials, a metadata standard that travels alongside a file.
Apple looked at an open industry standard backed by half the camera business and said no thanks.
And annoyingly, Apple has a point. Metadata is a sticker on the box. It can’t catch an AI edit made to a genuinely credentialed photo. Apple anchored the pixels instead of labeling the file.
Nieman Lab covered it as a newsroom tool, which is exactly the right frame.
If your work is photographic, this is the first mainstream attempt at proving provenance that doesn’t depend on a label nobody checks.
Comparing an edit against its reference image. Image: Apple
Now the homework
Good news first. Apple already updated Design Resources with iPhone Duo and iPhone 18 Pro bezels. Open and closed, both colors, Photoshop and PNG.
Grab them before your PM asks for “just a quick mockup.”
📐 Design against two size classes, not two screens. Outer display is compact width. Inner is regular width. Apple is blunt about this: avoid fixed widths, breakpoints, or any metric tied to a specific screen. The inner canvas is roughly 80 percent bigger than an iPhone 18 Pro, which is enough for split views, two-column reflows, and tab bars that become sidebars.
🚧 Learn the reserved regions. There are three. The fold itself, which Apple calls a division region and which has zero width when the device is flat. Plus the inner and outer cameras, which only activate when the camera is in use. Think of them as support columns in an open-plan office. You can’t move them, so you plan around them. Sheets, alerts, menus and popovers dodge them automatically. Anything you lay out by hand does not.
🔢 Keep an even number of columns whenever a division region exists, active or not. Memorize that one, it’s the rule people will get wrong.
🤸 Think in poses, not orientations. Book pose is half-open and vertical, so alerts and menus shift to the trailing side where the thumb is. Table pose is propped, so glanceable content goes up top and touch controls go to the bottom. Scrolling content is exempt, because scrolling already solved this problem.
🧰 Go look at your toolbar. On the open display, icon-only items rotate to a vertical bar at the edge while text items stay horizontal. If yours mixes icons and labels, it’s about to look broken. I’ll wait.
Split View on the inner display. Image: Apple
Worth bookmarking
Everything below is first-party and free. If you only open two, make it Design Resources for the bezels and the Duo tech talk for the layout rules.
📦 Assets to download
Apple Design Resources. Device bezels, Sketch and Photoshop libraries, now including iPhone Duo open and closed in both colors.
SF Symbols. The icon set, the Mac app, and the variable-weight rules that keep icons matching your type.
Layout. Size classes, safe areas, and the reserved regions the fold introduces.
Materials. How Liquid Glass is meant to behave over content, and when not to use it.
Toolbars. Read this before your mixed icon and label toolbar meets the vertical bar.
Multitasking. Split View and the poses, which now matter on a phone.
Accessibility. The contrast section is the one that survived the Liquid Glass backlash.
🛠 Shipping for iOS 27
Prepare your app for iPhone Duo. The tech talk with the actual adaptation rules: reflow, displacement, and what never moves.
Adopting Liquid Glass. What changed under the material this year, written for people shipping against it.
Icon Composer. Builds the layered icons the new rendering path expects.
GeometryProxy. Where the reserved-regions API lives if you’re laying out around the fold by hand.
🔍 On provenance
C2PA Content Credentials. The standard Apple declined to adopt. Understand it before you pick a side.
Designing for iOS. The platform overview, useful as a sanity check when a foldable tempts you into iPad patterns.
So, was it good?
The Duo isn’t the crease-free miracle the supply-chain leaks promised. At $1,999 with the second-best camera in its own lineup, it’s a hard object to defend on a spreadsheet.
But it’s the first foldable where the industrial design has an argument instead of an excuse. And the software concessions Apple made for it are more radical than the hinge.
The rest of the event was a good year, not a strange one. Better cameras. Better watches. Cheaper noise cancellation. Liquid Glass you can finally read.
Apple Reference Image might matter more in five years than the foldable does.
But here’s the thing I’d actually watch: Apple moved the dock. Vertical, after nineteen years, for a device most people will never buy.
That’s not a hardware decision. That’s a company telling you which conventions are still negotiable.
So don’t wait for October. Open Design Resources, drop the Duo bezels into your busiest screen, and see what breaks.
The reserved regions will find your bugs whether you look now or not. Better they find them before your users do.
A bold digital portfolio that blends expressive typography, motion, and editorial-inspired layouts into a striking visual experience. Every transition feels intentional, creating a website that rewards exploration without overwhelming the viewer.
A nostalgic interactive experience inspired by classic Olympic video games. Combining retro aesthetics with polished animation and playful interactions, it captures the spirit of vintage gaming through a modern web experience.
A cinematic personal website built around strong storytelling and elegant typography. Rich imagery, smooth transitions, and carefully paced interactions create an experience that complements the personality behind the project.
A polished studio website that puts cinematic visuals front and center. Large-scale photography, immersive motion, and refined layouts communicate the team’s creative direction while keeping navigation simple and intuitive.
A premium fashion e-commerce concept focused on generous whitespace, refined typography, and carefully balanced product presentation. The clean interface lets the products take center stage while maintaining an elegant shopping experience.
A thoughtful branding project built around a cohesive visual system, expressive typography, and confident color choices. The identity feels contemporary while remaining flexible across multiple touchpoints.
A beautifully designed report that transforms complex information into an engaging visual narrative. Editorial layouts, strong hierarchy, and subtle motion create an experience that remains both informative and visually compelling.
A portfolio that combines minimal layouts with expressive visual storytelling. The project demonstrates careful attention to composition, pacing, and interaction, resulting in an engaging showcase of creative work.
A growing creative community built around inspiration, discussions, resources, and shared design experiments. It’s a great place to discover new ideas while connecting with fellow designers.
A curated collection of AI tools designed to help creators discover practical solutions for design, development, writing, and productivity. Its organized directory makes finding the right tool fast and effortless.
Modulify helps designers and builders generate modular website sections using AI. It’s a practical way to speed up landing page creation while keeping layouts clean and customizable.
Shieldfont introduces a distinctive typeface with a strong visual personality, making it well suited for branding, editorial design, and expressive digital experiences. A solid addition for designers looking to expand their typography toolkit.
Brik is an AI-powered design platform that helps creatives turn ideas into reusable interactive design systems instead of one-off assets. The launch site showcases that vision through cinematic motion, immersive storytelling, and polished interactions that demonstrate the product as much as they explain it.
Illoca explores immersive storytelling through cinematic WebGL scenes, refined motion, and a carefully restrained visual language. Every transition supports the narrative, creating an experience that feels both polished and effortless.
Clipo turns a simple waitlist into an engaging product experience through bold typography, crisp layouts, and polished motion. The page balances strong visual hierarchy with playful interactions, making the pre-launch feel as intentional as the product itself.
Alkor’s portfolio embraces a retro-inspired aesthetic, combining WebGL effects, dithered textures, and clean typography into a cohesive studio identity. The experience feels experimental while remaining easy to navigate, showcasing how expressive visuals can support a clear portfolio structure.
An interactive editorial experience by Merci-Michel that transforms a simple story into a playful digital journey. Dynamic transitions, clever storytelling, and polished animations make every interaction feel purposeful while keeping the narrative at the center.
Built for a film production studio, this website uses cinematic pacing, bold typography, and immersive transitions to reflect the craft behind every production. The visual language stays minimal, allowing motion and storytelling to take the lead.
A bold identity system that pairs expressive typography with vibrant packaging to create a memorable brand presence. The project balances playful visual elements with a structured design system that works across multiple touchpoints.
Studio Freight crafted Huxley as a visually rich web experience where editorial layouts, refined motion, and immersive storytelling come together seamlessly. Every interaction feels carefully considered, reinforcing the brand through design rather than decoration.
A beautifully restrained portfolio that combines elegant typography, thoughtful layouts, and subtle interactions to showcase creative work with confidence. The minimalist approach keeps the focus on the projects while rewarding exploration with polished details.
A local-first note-taking app built for focused writing without unnecessary complexity. Notes are stored as Markdown files, with features like backlinks, reminders, split view, and distraction-free editing designed to keep ideas flowing.
An open source collection of interactive WebGL and HTML canvas components for modern websites. Every component is fully customizable, framework agnostic, and available as source code, making it easy to integrate advanced visual effects into your projects.
An AI-powered email design tool that helps you generate polished, on-brand email layouts from a simple prompt. Designs can be refined visually and exported as HTML or sent directly through Flodesk.
A premium Framer template designed for creative studios, freelancers, and modern portfolios. With flexible layouts, polished interactions, and CMS support, it’s a strong starting point for launching a professional website.
House Of Yellow is a creative content agency that takes ideas from concept to production and beyond. Its presentation pairs a motion-led visual language with a direct studio structure that reflects the agency’s focus on speed and craft.
Raphael Segerman’s portfolio presents creative development as a blend of engineering, motion, and interaction. The work focuses on high-performance web experiences, with the site showing how code can shape the visual character of a project.
Aardvark Book Club turns monthly book discovery into a playful subscription experience, letting members choose up to three new-release hardcovers and join the conversation around them. The site combines editorial typography, illustrated packaging, and a warm visual system to make choosing a book feel like opening a gift.
Sunfreaks introduces a biotech sunscreen brand rooted in molecular skin science, with a focus on melanin-rich skin and a retro 80s and 90s visual attitude. Its waitlist site builds the brand through editorial headlines, Polaroid-style cards, vivid photography, and a bold sun-soaked palette.
Sirnik is a minimal digital portfolio built around the balance between logic and emotion in design. Typography, strong hierarchy, and generous negative space create a calm interface for presenting digital work, design thinking, and product mindset.
Tether Bank is a banking concept centered on one clear principle: security first. The project uses a restrained interface and a product-focused visual language to turn trust, protection, and financial control into the central design message.
Clipo’s waitlist page introduces a forthcoming app for creatives through a focused, motion-led landing experience. The single-purpose page keeps attention on the product promise and the invitation to join before launch.
Roshan Sahu’s portfolio brings together creative development, web development, and UI/UX design in one interactive showcase. GSAP, motion, and carefully built interface details help the site communicate both technical range and visual craft.
What makes a project stand out to the Muzli editorial team? This guide explains how nominations work, what editors look for, and how to present creative work so it can be evaluated clearly.
animos is a browser-based library of 25 ready-made motion templates for presenting design work. Drop in images or videos, adjust the animation, and export MP4 or WebM without leaving the browser.
Text Effects is a collection of 27 animated text experiments built with Framer Agents. Browse the examples, customize the direction, then copy the prompt or CSS for use in your own project.
Dispatch is a Framer template for AI and B2B SaaS products, with a terminal-inspired visual language and a clear content structure. It includes sections for workflows, capabilities, updates, and calls to action, making it easy to adapt for a product site.
Framer’s new AI Agents bring a conversational workflow to website creation, making it easy to generate, refine, and maintain complete websites from simple prompts. Whether you’re starting from scratch or updating an existing project, the experience keeps everything inside the familiar Framer environment.
Zero reimagines the hiring journey through a polished digital experience that blends storytelling, motion, and interactive design. The website introduces a fresh approach to connecting talent with opportunities while maintaining a clean visual language throughout.
This portfolio transforms hand drawn sketches into an interactive 3D experience powered by WebGL. Smooth transitions, playful interactions, and carefully crafted details turn a personal portfolio into a memorable creative showcase.
House of Honey brings together editorial inspired layouts, expressive typography, and beautifully curated imagery into a sophisticated website experience. Every section feels carefully composed, balancing visual elegance with effortless navigation.
Benjamin’s portfolio combines cinematic visuals with refined interactions to showcase design work in a highly personal way. The site uses animation and thoughtful pacing to guide visitors through projects without overwhelming the content.
Iconsax is a growing icon library built for designers and developers looking for a consistent visual language. The project presents a large collection of carefully crafted icons through a fast, minimal interface that makes browsing and selecting assets effortless.
The State of the Gallery explores immersive digital storytelling through a combination of 3D visuals, motion, and experimental layouts. The project demonstrates how interactive experiences can transform traditional galleries into engaging online spaces.
Melius is an AI powered creative workspace built for designers, marketers, filmmakers, and creative teams. Instead of relying on a single prompt, it combines specialized AI agents that can generate concept boards, campaign visuals, storyboards, product imagery, and marketing assets inside one collaborative canvas.
Fudge lets Shopify teams build and edit storefronts simply by describing what they want in plain language. It generates clean, editable theme code, understands your existing brand and products, and keeps every change in draft until you’re ready to publish.
Raylight is a desktop application that brings powerful visual editing tools into a focused workspace for designers and creators. With an interface built for speed and clarity, it helps teams iterate on visual content without unnecessary complexity.
Meshy AI makes creating high quality 3D assets dramatically faster with AI powered text to 3D and image to 3D generation. Designers, game developers, and creative teams can generate textured models in minutes, making it an excellent companion for rapid prototyping and production workflows.
A beautifully crafted icon collection inspired by Dieter Rams’ timeless design principles. Every icon combines subtle depth, realistic materials, and meticulous attention to detail, creating a fresh interpretation of skeuomorphic design for modern interfaces.
A bold portfolio experience that blends WebGL, shaders, and cinematic transitions into a seamless interactive journey. Every interaction feels intentional, demonstrating how creative development can transform a personal portfolio into an immersive digital showcase.
A refined brand experience for a fictional spirits label, pairing sophisticated typography, rich art direction, and elegant storytelling. The project balances premium aesthetics with playful personality across every touchpoint.
An immersive digital experience celebrating MIU MIU through editorial layouts, cinematic visuals, and carefully choreographed interactions. The project combines fashion, architecture, and storytelling into a polished web experience that feels both luxurious and contemporary.
A fashion ecommerce concept that combines editorial layouts with smooth motion and refined interactions. The case study explores how animation, navigation, and storytelling can turn online shopping into a more engaging visual experience.
An experimental interactive project that mixes physics, 3D animation, and playful motion design. Built with GSAP and WebGL, it demonstrates how creative coding can produce rich, game-like web experiences.
A modern website concept for an advanced materials manufacturer, combining clean layouts with custom 3D visuals and refined interactions. The design transforms complex industrial processes into an engaging digital experience, balancing technical precision with contemporary visual storytelling.
A digital gallery showcasing artwork inside an immersive 3D environment powered by Three.js. Visitors can freely explore the space, creating an experience that feels closer to walking through an exhibition than browsing a traditional portfolio.
An open source framework that helps AI coding assistants generate more thoughtful, polished frontends instead of generic layouts. It introduces design principles for typography, spacing, composition, and motion, making it a valuable companion for designers and developers building with AI.
A curated gallery of outstanding web experiences, highlighting the interaction patterns, transitions, layouts, and visual details behind some of the world’s best websites. It’s an excellent resource for collecting references before starting your next project.
A lightweight browser extension that lets you inspect, swap, and preview fonts directly on live websites without opening DevTools or editing CSS. It’s a fast way to experiment with typography using real content and layouts.
A premium Framer template designed for creative agencies and portfolios, featuring bold typography, refined layouts, and smooth interactions. It’s a solid starting point for studios looking to launch a polished website with minimal setup.
A polished ecommerce case study that focuses on visual storytelling, product presentation, and premium interactions. The project combines clean layouts with refined motion to create a shopping experience that feels both editorial and commercial.
A cinematic event website celebrating one of motorsport’s most iconic races. Rich photography, elegant typography, and smooth transitions create an immersive digital experience worthy of the Le Mans legacy.
An awareness campaign that balances accessibility with engaging storytelling. Bold graphics, thoughtful content hierarchy, and interactive elements help deliver an important public health message.
A modern product site introducing an open-source approach to AGI development. The experience combines technical clarity with striking visual design, making complex ideas easy to navigate.
A bold agency website featuring expressive typography, fluid motion, and carefully crafted interactions. The project showcases how strong visual identity can support a modern studio portfolio.
A cinematic production studio website with immersive video, clean layouts, and confident pacing. The presentation highlights the studio’s work without overwhelming the visitor.
A browser game inspired by minimalist aesthetics and retro digital environments. The restrained visual language makes every interaction feel intentional and memorable.
An interface concept imagining an operating system built around AI-first workflows. Clean UI patterns and futuristic visual direction make it an intriguing exploration of productivity design.
Couldn’t make it to Config this year? Figma wrapped up the biggest announcements, product launches, and key sessions in one comprehensive recap. A great way to catch up on everything shaping the future of design workflows.
Prepros is an all-in-one development companion for front-end designers and developers. Compile Sass, Less, and TypeScript, optimize assets, and preview changes instantly, all from a clean desktop interface.
GetCompress helps you reduce the size of images, videos, GIFs, and PDFs without sacrificing quality. It’s a practical utility for anyone looking to speed up websites, optimize assets, or free up storage space.
A cinematic showcase experience that blends WebGL, immersive transitions, and polished motion design into a single narrative journey. The project demonstrates how interaction and storytelling can work together without overwhelming the content.
VERO combines premium art direction, elegant 3D elements, and thoughtful interactions to create a memorable digital experience. Every detail feels intentional, from the visual rhythm to the smooth navigation flow.
Shopify’s latest Editions page presents a dense product story through a calm, well-structured interface. The page is useful as a reference for product storytelling, visual hierarchy, and launch-page pacing.
A playful browser project that turns the familiar football sticker album format into a digital collecting experience. The visual system is bright, nostalgic, and immediately understandable.
A vibrant restaurant experience that brings together bold typography, playful branding, and rich visual storytelling. The site captures the energy of the brand through strong color choices, custom illustrations, and a clear digital identity.
Created as a pitch concept for Laboratoires Filorga, this project reimagines the skincare brand through fluid motion, immersive transitions, and a more expressive digital language. Soft gradients, elegant product storytelling, and carefully crafted interactions transform a traditional beauty website into a richer brand experience.
This project redefines the agency’s visual identity through a bold, high-contrast digital ecosystem that emphasizes cinematic storytelling and brand authority.
A clean mobile app concept designed to simplify daily nutrition tracking. Thoughtful information hierarchy, friendly visual language, and well-structured dashboards make complex health data easy to understand at a glance.
Cooldock transforms unused screen space into a customizable productivity dock packed with live widgets, quick actions, and workflow shortcuts. It feels native to macOS while providing a practical way to keep tools and information within reach throughout the day.
Hiding Elephant is the AI canvas for real design work. Generate, edit, and scale on-brand visuals in one workspace for marketing teams, ecommerce brands, and creative agencies.
Adscent is a modern, multi-page website template crafted specifically for advertising and creative agencies looking to build a strong and impactful digital presence.
A playground of digital experiments from the Obys team, showcasing interactive concepts, motion studies, and unconventional web experiences. Each piece explores a different approach to storytelling, animation, and creative technology.
Studio K95 presents a portfolio experience built around bold typography, fluid transitions, and refined interaction design. The site balances strong visual identity with a clean presentation of the studio’s work.
Created by Merci Michel, this campaign experience combines playful motion, immersive visuals, and game-inspired interactions. The project transforms a promotional website into an engaging digital experience.
An editorial storytelling project that documents the transformation of Twitter through long-form narratives, visual timelines, and custom layouts. The experience demonstrates how journalism and interactive design can work together to tell complex stories.
A mobility concept exploring a modern car-sharing experience through clean layouts, thoughtful user flows, and a polished visual language. The project focuses on accessibility and clarity across the booking journey.
A visual exploration that blends editorial design principles with AI-generated imagery. The project experiments with composition, atmosphere, and narrative-driven art direction to create a cohesive digital publication aesthetic.
A complete visual system combining branding, website design, and 3D visualization. Industrial subject matter is translated into a contemporary identity through structured layouts and realistic digital environments.
A modern, minimalist digital portfolio showcasing alternative website layouts, each bringing its own unique character to light. The design stands out through clean compositions, seamless transitions, and an inspiring, dynamic user experience.
A curated place for design assets, templates, and creative resources from the Muzli ecosystem. If you’re looking for something practical to save, use, or remix in your next project, this is a good place to start.
A free to use parametric design studio in your browser. Pattern engines, layout grids, typography, photo treatments export print-res PNG and perfect-loop MP4.
An interactive brand experience that reimagines the iconic Lacoste polo through immersive storytelling and refined digital craftsmanship. Rich motion, detailed visuals, and thoughtful interactions turn a product showcase into a memorable journey.
A cinematic website that blends motion, typography, and editorial presentation into a cohesive narrative. Every section feels carefully choreographed, creating a strong sense of atmosphere and storytelling.
Created around the energy of Roland-Garros, this experience combines gaming mechanics, sports culture, and premium branding. The result is a playful digital campaign that feels both engaging and distinctly Lacoste.
A bold studio website showcasing the intersection of AI, design, and development. Dynamic visuals, smooth transitions, and strong art direction reinforce the studio’s forward-looking approach.
A fresh visual exploration of what Siri could become in a more expressive and intelligent future. The concept combines polished interface design with a clear vision for conversational experiences.
A visually rich portfolio experience that showcases the studio’s work through bold layouts and immersive interactions. The presentation highlights craft, motion, and storytelling in equal measure.
A playful pre-launch experience built around strong branding and character-driven visuals. The project uses color, typography, and motion to create anticipation before launch.
An editorial-inspired interface concept designed to present historical content in a structured and engaging way. The layout balances readability with strong visual hierarchy and contemporary web design patterns.
A comprehensive look at the trends, technologies, and behaviors shaping creative work today. The report offers valuable insights for designers, creators, and teams navigating an evolving landscape.
A lightweight utility that keeps your clipboard history organized and instantly accessible. Built for Mac users, it helps streamline repetitive workflows without getting in the way.
A modern Framer template designed for logistics, transport, and technology businesses. Clean layouts, strong visual hierarchy, and polished interactions make it easy to launch a professional web presence.
A Framer component that helps creators build dynamic, infinitely scrolling CMS-powered layouts without custom development. Perfect for portfolios, directories, content hubs, and inspiration galleries.
A portfolio experience from Rogue Studio that blends motion, storytelling, and cinematic transitions into a single immersive showcase. Every interaction feels intentional, making it a strong example of how animation can support a brand narrative rather than distract from it.
A beautifully crafted visual identity inspired by the heritage and texture of traditional oil painting. The project balances classic artistic references with a contemporary design system that feels both premium and timeless.
An ambitious digital storytelling experience exploring the future of AI infrastructure and energy. Rich visuals, smooth transitions, and layered interactions transform a technical topic into an engaging journey.
UXBERT Labs offers an immersive, scroll-driven narrative that chronicles the evolution of design and innovation, from ancient civilizations to the modern digital era. Through a highly interactive “click & hold” interface and advanced 3D visual storytelling, the agency effectively positions its global digital consultancy services within a grand historical context.
A playful project that turns motion into visual exploration. The concept is simple, but the execution creates an engaging interactive experience that invites experimentation and curiosity.
This mobile-optimized website features a sophisticated, dark-themed interface accented with high-contrast lime-green elements. It utilizes smooth, scroll-triggered animations to effectively present high-impact engineering services, industry expertise, and founder testimonials in a clean, professional manner.
Playfight is a creative, story, and production studio that challenges the norm, proving that “Different is Everything.” Their website is a masterclass in immersive storytelling, blending artistic narrative with high-end commercial production across film, photography, and digital design.
A branding project built around a modern eyewear concept. The visual system combines elegant typography, minimal layouts, and product-focused imagery to create a distinctive and cohesive identity.
Supaste is a local-first clipboard and screenshot history app for Mac. Save copied text, links, images, files, code, colors, and screenshots in a beautiful searchable timeline.
Auto Type is a powerful Figma plugin that instantly analyzes frames to generate, apply, and link structured local text styles. It enables designers to create responsive, clean, and developer-friendly typography systems in a single click, automatically organizing text into semantic tokens for headings and body copy.
A comprehensive branding toolkit designed for agencies and designers building identity systems. It includes presentation-ready guidelines, documentation layouts, and brand management assets.
A premium and modern Framer template for real estate developers, luxury apartment projects, and property agencies built to showcase high-end living experiences with clarity and confidence.
A sharp and surprisingly grounded report exploring how AI is actually changing design workflows right now. Instead of vague predictions, it focuses on real behavior shifts, creative habits, and the tools designers are already integrating into daily work.
Cyera’s latest campaign, designed by Active Theory, blends cinematic 3D visuals, atmospheric lighting, and futuristic UI language into a polished AI security experience. The entire presentation feels more like a sci-fi product trailer than a traditional enterprise site.
An industrial production studio website that feels raw, cinematic, and highly physical. Strong typography, metallic textures, and film-inspired transitions give the experience a unique visual identity.
A playful and energetic brand experience packed with bold color combinations, fluid motion, and expressive typography. The visual system feels loud in the best possible way, while still staying surprisingly cohesive.
An interactive graphic novel celebrating ten years of Studio375 through real stories, characters, and studio moments. The experience turns an agency milestone into something much more personal: a playful, animated web comic with sound, pacing, and a strong narrative layer.
Casa Comfort Arreda keeps things calm and intentional, using warm interiors, refined typography, and generous spacing to create a premium editorial feel without relying on heavy effects or trends.
A premium sportswear concept combining sharp product presentation with strong editorial direction. The visual system feels athletic without falling into generic performance-brand clichés.
This dynamic mobile app interface features a sleek, sports-focused design with a clean aesthetic and bold typography. The user-friendly layout utilizes vibrant color blocking and engaging, high-quality imagery to deliver an immersive football experience.
Figma’s latest AI update feels less like a shortcut generator and more like a real collaborative layer inside the design process. This breakdown explores what the new agent can actually do, where it helps, and where designers will probably still want control.
One of the cleanest UI component ecosystems right now for designers and developers building modern products. Fast, flexible, beautifully structured, and surprisingly easy to customize without fighting the system.
A bold Framer portfolio template mixing cinematic layouts, oversized typography, and dark editorial styling. The experience feels polished and atmospheric, with just enough motion to make the work feel immersive without becoming distracting.
A polished UI kit packed with modern dashboards, mobile screens, components, and clean SaaS flows. The system feels practical and production-ready while still keeping a premium visual layer.
Figma’s new Design Agent lives on the canvas, knows your design system, and edits the same file you’re working in. We break down what it changes for designers, what it doesn’t, and the real question it forces every team to answer.
For two years, “AI in design” mostly meant a sidebar that generated a UI you would never actually ship. Pretty mockups, wrong components, no design system, no context, no use. Today Figma shipped something different. The Figma Design Agent is not a generator bolted onto the canvas. It is an agent that lives inside the file, reads your design system, and edits your work the same way a teammate would.
It is in beta starting today, May 20, 2026, on Professional, Organization, and Enterprise seats. During beta, it does not consume AI credits. After that, it will. The product leads are Rodrigo Davies (PM) and Tammy Taabassum (Product Designer).
That is the announcement. The interesting part is what it changes about the job.
What the Agent Actually Does
The Figma Agent operates from the left rail and acts directly on layers. You can prompt it from any selection. You can reference specific components, variables, and tokens with @ mentions. It runs alongside you in the same file, which means you keep editing while it edits, and neither of you blocks the other.
Three things it is built to do well:
Parallel exploration. Ask it for several stylistic directions to the same problem at once. Different information architectures for a settings page. Three checkout flows with different trust signals. Two onboarding patterns built from the same component library. You pick the direction before you commit hands-on time.
Bulk editing. Rename variables across a file. Swap components across many screens. Apply padding changes across a full flow. Populate frames with realistic content. Convert a flow to dark mode. Push design system updates through a sprawling file in minutes instead of an afternoon.
Feedback integration. Drop the agent into a file full of comments and it will cluster them by theme, surface the conflicts, and generate revisions that incorporate the feedback. It is not deciding for you. It is doing the part of design review that nobody wants to do manually.
The agent also talks to the Figma MCP server and the use_figma capability, which means design context can move between code and canvas without losing fidelity. That matters more than it sounds. The handoff layer is where most “AI design” demos quietly fall apart.
Why This Is Different From the Last Wave of AI Design Tools
The last 24 months of AI design tools mostly produced two patterns. Tools that generated images of interfaces (beautiful, unshippable). Tools that generated React code from a prompt (interesting, often disconnected from a real design system).
Both treat design as a one-shot generation problem. You type, you get an artifact, you start over.
The Figma Agent treats design as an editing problem on a file that already exists. The file has components. The components have tokens. The tokens have rules. The agent reads all of that as context before it touches a layer. When it produces a variation, the variation respects your system because it was generated inside your system.
That is the gap. Generation tools work on a blank canvas. The Figma Agent works on your canvas, which is the only canvas that actually ships.
This also reframes the partnership debate. Designers have spent the year arguing about whether AI replaces them or assists them. The Figma Agent is built around a third answer: AI does the parts of the file that are mechanical, repetitive, or exploratory, and humans do the parts that require taste and decision. It is not a co-pilot. It is more like a junior designer who can hold a hundred files in their head and never gets tired of renaming variables.
What About Claude Design?
One month before the Figma Agent launched, Anthropic shipped Claude Design, an Anthropic Labs product that lets you create prototypes, slides, one-pagers, and visual work from a prompt. It reads your codebase and design files during onboarding, builds a design system from that, and applies it to every project after. It is powered by Claude Opus 4.7 and available to Pro, Max, Team, and Enterprise subscribers. VentureBeat called it a challenge to Figma. That framing is understandable and mostly wrong.
Claude Design and the Figma Agent are aimed at genuinely different problems.
Claude Design is a creation tool. You start from nothing. You describe what you need, Claude builds a first version, you refine through conversation or direct edits, and you export to PDF, PPTX, Canva, or standalone HTML. When a prototype is ready to build, it packages into a handoff bundle for Claude Code. It is fast, it is good for stakeholder decks and quick prototypes, and it does not require a Figma seat or a design file to already exist. The design system promise is real, but it works by reading your codebase. Not by reading a Figma file that your design team has maintained for three years.
The Figma Agent is an editing tool. You start from a file that already exists, with components that already exist, with a system that the design team already owns. The agent does not build a design system from your codebase. It works inside the one you built.
The gap comes down to who is in the seat. Claude Design is genuinely useful for product managers, founders, and developers who need visual output quickly and do not live in Figma. The Figma Agent is for designers who do live in Figma and want mechanical work to take a fraction of the time it currently takes.
Both tools made the same promise: AI that understands your design system. They just answered it from opposite ends of the process.
What Changes for Designers Day to Day
Three workflows shift immediately.
Exploration gets cheaper. Most designers ship the second or third idea they had, not the eighth, because the eighth was too expensive to mock up. When the cost of exploring a direction drops to a prompt, the ratio of explored to shipped goes up. Teams will see more variations before lock-in. That is healthy if the team has taste. It is dangerous if the team treats “more options” as a substitute for opinion.
Design system enforcement stops being a chore. Every design system team has the same backlog: screens built before the system existed, components that drifted, padding that nobody updated. The agent collapses that backlog. Swap, rename, conform, repeat. The work that used to take a quarter takes a sprint.
Review cycles get tighter. The feedback summarization feature is small in description and large in practice. Design reviews drag because nobody wants to sit through 47 comments and decide which ones matter. If the agent clusters comments by theme and produces revisions that address them, the review meeting changes shape. You arrive with directions, not arguments.
The thing that does not change: the decision. The agent will not tell you which checkout flow is right. It will give you three. You still have to know why one of them is wrong.
What It Cannot Do (Yet, or by Design)
The announcement is honest about scope. The agent is a design agent. It is not a strategy agent, a research agent, or a product manager. It does not know what your users actually need. It does not know what your business is trying to prove next quarter. It does not know that the CEO hates the color teal.
It also operates inside one file at a time. It is not yet a cross-file refactor tool, and it is not a project-wide auditor. The dream of “agent, please audit every product surface for accessibility issues and fix them” is not what shipped today. What shipped is an agent that makes one file faster.
And, as with every AI editing tool, the risk surface is the same: confident edits that look right and are subtly wrong. Tokens applied to the wrong layer. Variables renamed in a way that breaks a downstream import. The agent does not absolve the designer of reviewing the diff. It just changes what the diff looks like.
The Real Question This Forces Every Team to Answer
If the mechanical 40 percent of design work compresses by 5x, what do designers do with the time?
That is the actual question. The optimistic answer is that designers go deeper on the strategic, conceptual, research-heavy parts of the job that they always claimed they did not have time for. The cynical answer is that org charts compress and three designers do what five used to do.
Both answers will be true at different companies. The teams that come out ahead will treat the agent as a multiplier on judgment, not as a replacement for it. The teams that come out behind will treat it as a way to ship more screens without thinking harder about them.
For anyone tracking the broader category, this announcement sits next to a year of AI design tools we have reviewed in Best AI Design Tools for UI/UX (2026). The shift is that the agent moved from a separate product to a feature inside the file where the work actually lives. That is a big move. The other tools now have to answer it.
The Figma Agent is in beta from today. Designers on eligible plans can opt in. The honest recommendation: try it on a real file, not a demo file. The interesting failures and the interesting wins both live in the messy, real-world projects, not in the toy ones.
BRIK turns creative direction into modular living systems instead of static mockups. The experience feels somewhere between a design tool and a visual playground, with strong motion language and a surprisingly tactile interface.
A good reminder that creative tooling doesn’t have to look like enterprise software.
Spotify’s updated disco icon sparked a surprisingly big design conversation this week. Some people love the nostalgic energy, others think it feels disconnected from the brand system.
Either way, it’s interesting to watch how small visual changes can trigger massive reactions online.
Noomo Agency built an immersive 3D storytelling experience that feels cinematic without losing clarity. The transitions, lighting, and pacing work together to create a scroll experience that feels intentional from start to finish.
This one is packed with small interaction details worth studying.
A beautifully crafted portfolio experience with a strong editorial feel. Large typography, restrained motion, and confident spacing make the entire site feel calm, sharp, and expensive in the best possible way.
Proof that minimal design still works when the craft is there.
A beautifully directed campaign experience blending music, Android branding, and cinematic storytelling. The warm lighting, soft typography, and documentary-style visuals give the entire project a human, almost film-like atmosphere.
One of those branded experiences that feels emotional instead of overly polished.
A sharp product and merch presentation with a dark, polished interface language. The project combines jewelry, e-commerce, and brand detail into a focused visual system that feels refined without becoming overly decorative.
A creative studio template with a cinematic, portfolio-first structure. The layouts give plenty of space to motion, large imagery, and project storytelling, making it a strong reference for agencies that want a more atmospheric web presence.
A clean, elegant website with a quiet editorial feel. The restrained palette, spacious layout, and soft visual rhythm make the experience feel calm, premium, and carefully composed.
A curated place for design assets, templates, and creative resources from the Muzli ecosystem. If you’re looking for something practical to save, use, or remix in your next project, this is a good place to start.
A growing collection of clean, presentation-ready mockups for designers, brands, and creative studios. The library focuses on modern layouts, realistic product scenes, and assets that are easy to drop directly into presentations or portfolio work.
A solid bookmark for anyone building case studies, landing pages, or visual identity presentations.
A useful resource library focused entirely on SVG assets, icons, and scalable vector graphics for modern web projects. The collection feels lightweight, practical, and easy to integrate into UI, branding, motion, and front-end workflows.
Especially useful for designers and developers looking for clean vector assets without digging through bloated marketplaces.
A beautifully minimal portfolio and digital studio experience with refined typography, soft transitions, and strong spatial composition. The site balances editorial elegance with modern interaction design, creating an atmosphere that feels both premium and approachable.
A strong reference for anyone exploring minimalist web direction without losing personality.
A cinematic WebGL experience built around the world of AI and blockchain investing. The site combines immersive motion, layered transitions, and a polished dark visual system that gives the project a futuristic but premium feel.
A bold corporate experience with strong editorial layouts, oversized typography, and rich motion details throughout the journey. The project balances high-energy visuals with a clean structure that keeps the experience sharp and easy to navigate.
A crypto-focused product site with vibrant gradients, fluid animations, and a sleek interface language. The visual direction feels modern and approachable while still delivering the fast-paced energy expected from the Web3 space.
A fashion-driven digital experience blending minimal layouts with expressive photography and refined typography. The site creates a strong visual rhythm through clean spacing, subtle interactions, and confident art direction.
A detailed enterprise platform concept combining clean dashboards, structured layouts, and a modern SaaS visual language. The project stands out through its polished data presentation, balanced spacing, and highly scalable interface system.
A stylish one-page portfolio template built for creatives who want motion and personality without sacrificing clarity. Smooth transitions, layered typography, and minimal compositions give the template a refined editorial feel.
A bold branding project with a clean contemporary identity system and confident visual direction. The combination of typography, composition, and product-focused presentation creates a strong and memorable brand presence.
An immersive Three.js concept inspired by the scale and atmosphere of Dubai’s iconic skyline. The project blends cinematic motion, interactive 3D environments, and dramatic visual storytelling into a rich web experience.
An experimental AI-powered workspace from Google Labs designed to help users organize ideas, research, and workflows visually. The interface feels lightweight and polished, with a strong focus on creative productivity and collaboration.
A beautifully crafted website builder focused on speed, simplicity, and elegant presentation. Dina combines modern layouts, clean typography, and smooth interactions into a product that feels both approachable and highly refined.
A sleek Framer template designed for startups, SaaS products, and creative businesses looking for a modern online presence. The template uses strong visual hierarchy, subtle motion, and flexible sections that are easy to customize.
A premium finance-focused UI kit packed with polished charts, dashboards, and data visualization components. The system is ideal for fintech products, analytics platforms, and modern SaaS interfaces that need clean and scalable financial visuals.
A bold, video-first agency website that leans heavily into motion and storytelling. The layout feels minimal at first, but quickly reveals a layered structure built around cinematic content and strong pacing.
Upperquad delivers a clean, structured agency experience with a strong focus on typography and grid systems. The design feels controlled and confident, with subtle interactions that add depth without distracting from the content.
An immersive portfolio built with WebGL, blending 3D environments with a personal narrative. Navigation feels exploratory rather than linear, turning the portfolio into an interactive experience rather than a static showcase.
A high-impact studio website that embraces bold colors, layered visuals, and expressive typography. The experience feels energetic and experimental, with a clear focus on visual identity and brand attitude.
A sleek, high-end venture capital website that blends AI and blockchain aesthetics into a clean, structured experience. The design leans on subtle motion and a refined visual system to communicate credibility without overloading the interface.
A sharp landing page concept that balances clarity and visual appeal for a complex AI product. Strong hierarchy, clear messaging blocks, and well-paced sections make the experience easy to scan while still feeling premium.
A detailed UI exploration of an AI workflow builder, focused on modularity and system thinking. The interface feels flexible and scalable, with node-based structures that reflect how modern automation tools are evolving.
A conceptual take on AI-assisted coding interfaces, combining minimal UI with strong visual identity. The design explores how development environments can feel lighter and more intuitive without losing functionality.
A curated roundup of standout websites from April, featuring a mix of experimental builds, agency work, and product design. A good reference point if you want to quickly scan what’s trending in web design right now.
Figma expands into illustration with a native drawing tool built directly into the product. It’s a practical addition for quick sketches, diagrams, and visual ideas without switching tools.
A compact icon set built on an 8×8 grid, focusing on clarity and consistency. Works especially well for retro-inspired interfaces, dashboards, or lightweight visual systems.
A clean, modern Framer template designed for product and SaaS websites. Strong layout structure and typography make it a solid starting point for fast builds.
A focused UI kit built around renewable energy products and dashboards. Useful for early-stage concepts or teams working on sustainability-related interfaces.
Based on what designers actually clicked on Muzli Picks
Every day, thousands of designers explore Muzli Picks. Some projects get a quick look, others pull people in and keep them there.
This list is based on real clicks, the websites designers chose to open, explore, and revisit.
If you want your work to appear here, create a profile on Muzli Me, upload your project, and it might get featured on Muzli Picks, reaching thousands of designers.
The Floema website features a refined, minimalist design that seamlessly blends high-quality environmental photography with clean typography and expansive whitespace. Interactive elements and smooth scroll transitions highlight their sustainable urban furniture through a sophisticated, modern editorial lens.
An immersive WebGL experience featuring high-end 3D environments, dynamic data landscapes, and a sophisticated dark aesthetic. The site blends cinematic transitions with interactive mapping to showcase architectural innovation through a sleek, futuristic lens.
A visceral WebGL experience merging gritty cyberpunk aesthetics with high-octane interactivity. Featuring a seamless transition from atmospheric character customization to top-down combat, it pushes browser-based gaming limits through dynamic lighting and immersive spatial design.
A futuristic agency interface blending a dark UI with high-fidelity 3D renderings and structured layouts. The experience moves seamlessly from cinematic storytelling to clean service grids, maintaining a sharp, high-impact digital tone.
A bold, modernist-inspired digital experience built around primary colors, sharp geometry, and a strong grid system. The composition feels like a living canvas, balancing art, motion, and interaction into one cohesive visual statement.
A bold freelance portfolio blending creative direction, development, and strategy into a vibrant, personality-driven experience. Playful visuals, strong illustration, and confident typography create an engaging and memorable first impression.
A bold product experience exploring the future of AI-driven payments. The site blends strong storytelling with futuristic visuals, turning complex fintech concepts into a clear and engaging narrative.
An experimental interactive experience built around motion, rhythm, and looping visuals. The project stands out with playful interactions and a strong visual identity driven by animation.
A high-energy automotive website with a sharp visual language and fast transitions. Bold typography and vibrant color usage create a dynamic and modern feel throughout the experience.
An immersive real estate experience combining WebGL and 3D elements to create depth and interaction. The project turns traditional property presentation into something exploratory and visually engaging.
A cinematic portfolio website with a refined visual atmosphere and strong motion-driven presentation. The project blends film, motion, and digital storytelling into a polished experience.
A clean archive-style experience with a minimal visual direction. The layout and subtle interactions keep the focus on the content and structure of the work.
A dark, cinematic photographer portfolio with strong art direction and smooth motion. The experience highlights visual work through transitions and carefully controlled pacing.
A concept-driven project exploring fully generated applications and content powered by AI workflows. The work highlights how design and generation systems can merge into a single creative process.
A deep dive into real workflows using Claude for design, content, and development. The article breaks down practical use cases, showing how structured context and repeatable systems can improve output quality over time.
A minimal and highly visual color palette generator built for fast exploration. It allows designers to quickly browse and combine palettes for UI, branding, or inspiration.
A next-generation design environment that unifies 2D, 3D, and AR into a single AI-powered canvas. The project highlights a shift toward collaborative, end-to-end workflows, from ideation to fully realized 3D design in one place.
A modern Framer template designed for creative portfolios and studios. Clean layouts, strong typography, and smooth interactions make it a solid starting point for showcasing work.
A follow-up to Getting Started with Claude Design– what designers, marketers, and indie builders have actually learned after seven days of pushing the tool to its limits.
— -
It’s been a week since Anthropic Labs dropped Claude Design on April 17, and the design community has been busy. Pizza brands shipped in 30 minutes. Investor decks built in eight. Landing pages live in production by morning. Figma’s stock dropped 7% on launch day, and people are still arguing on X about what that means.
But the real story isn’t the headlines, it’s the patterns. The little workflow shifts that separate people who ship from people who burn through their weekly allowance in 30 minutes and rage-quit. After reading every hands-on review, every X thread, every Substack teardown, and every community gist I could find, here’s the distilled playbook.
If the first post was what Claude Design is, this one is how to actually use it well.
— -
1. The single biggest realization: the Tweaks panel is not the chat
Most people use Claude Design like a chatbot. They type, regenerate, type, regenerate. Then they wonder where their weekly allowance went.
Here’s the secret veterans like Anthropic’s own Austin Lau have been demoing on launch day: the Tweaks panel doesn’t burn chat tokens.
Sliders for typography scale, color temperature, spacing density, and section ordering live in a side panel that adjusts the design without round-tripping through the model. Reorder hero sections. Swap variant cards. Tighten density. None of it costs you a chat turn.
The rule: Use chat for structural and conceptual changes (“add a testimonial section,” “make it feel editorial instead of corporate”). Use Tweaks for everything else. If you can move a slider to fix it, never type it.
— -
2. Density beats brevity in your first prompt
The instinct from regular Claude chat , start vague, refine through conversation , is the wrong instinct here.
The pattern showing up across every walkthrough (Tom’s Guide, Peter Yang’s 16-minute everything-build, the Techsy 7-prompt teardown) is the same: dense, single-paragraph prompts that name the audience, the content, and the visual feel land usable first drafts roughly two-thirds of the time. Vague prompts land usable drafts roughly never.
A good first prompt looks like this:
“Design a 10-slide investor pitch deck for a pre-seed B2B fintech selling fraud detection to SMB lenders. Audience is sector-focused VCs at the early-stage stage. Tone: confident but not aggressive. Visual feel: editorial, restrained, type-led, no stock photos, no purple gradients. Use a serif display face with a geometric sans for body. Include problem, solution, market, traction, team, ask.”
Compare that to “make me a pitch deck” and you can see why density matters. Opus 4.7, the model under Claude Design , was specifically tuned to follow concrete specs and to need less hand-holding than 4.6. Use that. Front-load everything.
— -
3. Kill the “AI slop” aesthetic before it lands
Without explicit constraints, Claude Design drifts toward what the community has named AI slop: Inter or Roboto, white-to-purple gradients, evenly-spaced cards, that vaguely-Linear-vaguely-Stripe SaaS feel.
The fix is documented directly in Anthropic’s own frontend-aesthetics cookbook. Drop something like this into your first prompt or your project’s CLAUDE.md / DESIGN.md:
“Avoid generic AI-generated aesthetics: overused fonts (Inter, Roboto, Arial, system fonts), clichéd color schemes (especially purple gradients on white or dark backgrounds), predictable layouts, cookie-cutter components. Make distinctive, context-specific choices. Pick one decisive font and use it confidently. Commit to a cohesive aesthetic with dominant colors and sharp accents rather than timid evenly-distributed palettes.”
Two follow-up tricks the community has converged on:
Specify a concrete alternative, not a negative. “Don’t use cream backgrounds” tends to push the model to a different default. “Use pale silver-gray tones deepening into blue-gray, with 4px corner radius and a square angular sans-serif” actually works.
Reference cultural aesthetics, not other websites. “Solarpunk,” “Swiss editorial,” “Japanese minimalism,” “early-2000s zine” gives the model a richer space to work in than “make it look like Linear.”
Opus 4.7 has its own house style it falls back to (warm cream backgrounds, Fraunces-style serifs, terracotta accents), beautiful for hospitality and editorial, wrong for fintech and dashboards. Override it explicitly.
— -
4. Build your brand kit on day one, and treat it as the foundation
Every serious user who’s reviewed the tool independently arrived at the same conclusion: the brand kit is the highest-leverage thing you’ll do, and your first session should be dedicated to it.
Point Claude Design at your GitHub repo, your live site, or your existing slide deck. Let it explore the codebase, read your CSS files, identify your brand signatures (one reviewer’s heartbeat ECG motif from itbroke.dev got identified and turned into a live canvas component automatically). Let it generate the SKILL.md, the UI kit, the component patterns.
This will eat a chunk of your weekly allowance. That’s fine. It’s the most durable output you’ll make, every future project pulls from it, and the consistency it gives you across landing pages, decks, and emails is what makes Claude Design feel like a design system rather than a prompt-to-HTML toy.
A pro tip from Claudia + AI’s starter guide: if your assets are scattered, ask Cowork (Anthropic’s desktop product) to “produce a full design system document covering fonts, colors, graphical styles, component patterns, voice, and layout conventions, with anything missing flagged” first. Use the resulting clean DESIGN.md as input to Claude Design’s onboarding instead of feeding it raw assets. Coherent input, coherent output.
— -
5. Watch the weekly allowance, and know its quirks
This is the #2 community complaint after AI slop, and it’s worth understanding properly:
It’s a separate meter from regular Claude chat. Burning your design allowance doesn’t affect your chat allowance and vice versa.
It’s per-user, not pooled. Teams cannot share. Admins can’t redistribute leftover budget from a coworker.
Weekly, not daily. Resets every seven days. There’s no dramatic warning when you hit the limit, the session just continues on paid overage credits if you have them enabled.
Promotional credit gets consumed first. Anthropic shipped paying users a one-time credit at launch (roughly equivalent to a typical $20 prompt, expiring 2026–07–17). Spend it on experiments. Save the recurring weekly allowance for production work.
Real number from the wild: Josua Golden posted on X that two full design sessions burned through 58% of his weekly Pro limit. Plan accordingly. Treat each session as a planned production run, not an open sandbox.
— -
6. The comment-paste workaround (and why you’ll need it)
This is the single most-cited known bug, documented in the official help center and confirmed by basically every reviewer: inline comments occasionally vanish before Claude reads them.
The workaround is dumb but reliable: if a comment doesn’t get picked up after a beat, copy the text and paste it into the chat panel. Always works.
John Voorhees at MacStories went further and observed that “comment-on-element covered 95% of what I needed” once you adapt to it. The pattern that works:
Inline comments for targeted, component-level tweaks. “This button text should be white.” “Add 8px padding here.” “Change this card to a horizontal layout.” Click the element, comment, done.
Chat for structural changes, new sections, aesthetic shifts, or anything that requires explanation. “Save what we have and try a completely different approach” is a real command, Claude saves your current version and explores a new direction without losing the original.
— -
7. The /packages/ui pro-tip nobody talks about
Surfaced in ADPList community threads and quietly powerful: when you link a codebase, point Claude Design at the `/packages/ui` subdirectory if your repo is a monorepo, not the root.
Claude Design’s design-system extraction works by reading actual code — colors, typography tokens, component patterns. Pointing it at the root of a 50-package monorepo means it spends tokens spelunking through unrelated services. Pointing it directly at your UI package gives it exactly the surface area it needs and produces a noticeably tighter, more brand-accurate kit.
— -
8. Use the “show me three variations” command, always
Two-thirds of reviewers independently called this out. When you’re not sure what you want, and most of the time you aren’t, don’t refine in a straight line. Ask for variations.
“Show me three versions of this dashboard: one editorial and type-led, one dense and data-forward, one playful with strong color blocks.”
Claude keeps each version accessible. You can mix pieces from different variants. You learn what you actually want by comparing, and comparison is exponentially faster than guessing-and-iterating.
Same logic applies inside a single design: “Give me 3+ atomic variations of the hero section” is a documented pattern in Claude Design’s own system prompt. The product is built to explore, not converge. Use that.
— -
9. Know what to skip Claude Design for
Honest constraints from a week of community testing:
No native image generation. Claude Design renders SVG and HTML drawings, not Nano Banana or Midjourney output. SVGs are great for icons, diagrams, and brand illustrations. They’re terrible for photographic realism. The community fix is the “Unsplash swap” prompt, generate the layout with placeholder SVG, then swap in real Unsplash imagery via prompt.
Video is weak. The feature exists and will produce a passable launch teaser. It’s nowhere near Veo or Runway. Don’t use it for assets that matter.
No real multiplayer. Figma’s killer feature, multiple designers in the same file in real time, isn’t here. Team plans add workspace-level sharing, not co-editing. If your workflow is two designers in a file together, stay in Figma.
No public API yet. As of launch, you can’t script generation, automate variant production, or embed Claude Design output programmatically. That’s coming “in the coming weeks” per Anthropic, but it’s not here yet.
Production handoff for mature design systems. Claude Design is a brilliant starting point. For anything landing in a 50-screen production system with strict component governance, the source of truth still lives in Figma.
Tom Warren’s rule of thumb that’s emerging across reviewers: Claude Design for speed and intent. Figma for systems and source-of-truth. They coexist.
— -
10. The handoff to Claude Code is the actual superpower
If you take only one thing from this whole post, take this. The export options that get the most launch-week ink, PDF, PPTX, Canva , are useful but not new. Lots of tools do those.
The handoff to Claude Code is genuinely new. When you press “Hand off to Claude Code,” it doesn’t just dump HTML. It packages the design with the intent, component choices, and architectural decisions preserved as context. Claude Code then builds on top of the design instead of reinterpreting it.
Austin Lau’s launch-day workflow — recreate a live page in Claude Design, A/B test copy and layout in the Tweaks panel, hand off the winning variant to Claude Code, ship — is the single most production-ready demo of the tool I’ve seen. Marketing teams replacing the “designer + frontend dev + 2-week sprint” loop with “marketer + Claude Design + Claude Code + same afternoon” is happening right now, in production, at companies like Mercury and Datadog according to launch coverage.
This is the loop that makes Claude Design more than a prototype tool. It’s the design layer that finally talks fluently to the build layer.
— -
11. Small workflow hacks worth stealing
A grab bag from the community gists, X threads, and Substack teardowns:
Edit your previous message instead of sending a new one. Same trick that works in regular Claude chat works here. Going back and editing a prompt replaces the old exchange instead of stacking it. Massive token savings on long iteration sessions.
Speak your prompts, don’t type them. Voice-dictated prompts are naturally denser than typed ones. You’ll give Claude more context per turn, which means fewer back-and-forth corrections.
Use “scrap this and try the elegant version, knowing what you know now” when a design is stuck in a mediocre place. Forcing a clean restart from accumulated context beats trying to push a bad version into a good one.
Generate speaker notes from a generated deck. Once a pitch deck is built, ask Claude Design to extract delivery-ready speaker notes for each slide. Free deliverable, almost nobody does it.
Always plan to rewrite the copy. Claude writes serviceable placeholder copy. Ship it as-is and you ship AI slop. The marketing-team consensus from Stack & Scale’s playbook: rewrite every word before publishing.
Compact view triggers save errors on certain layouts. Switch to full view if a save fails. Documented bug, easy fix.
Large codebases cause browser lag. Don’t link your entire enterprise monorepo. Link the UI package or a representative subset.
— -
What actually changed this week
The interesting thing about Claude Design’s first week isn’t that designers love it or hate it. It’s that it surfaced a different question altogether: what is design for now?
When a non-designer running a plant nursery in Sri Lanka can produce a launch-ready brand kit and pitch deck in an afternoon, the ground shifts. Not because designers go away, every reviewer who actually shipped something noted that taste, judgment, and rewriting the AI’s mediocre defaults was where the real work lived. But because the bottleneck moved.
Tool fluency mattered for a decade. It mattered less this week than last.
The designers having fun with Claude Design, the ones publishing the best work, the ones whose threads keep getting screenshotted, aren’t the ones who memorized Figma shortcuts. They’re the ones who can describe what they want with enough specificity and taste that the model can actually execute.
That’s a different skill. It’s also a more interesting one.
— -
What’s coming, what to watch
A few things on the watch list as Claude Design moves from preview to product:
The custom integrations / API surface Anthropic flagged for “the coming weeks.” Once you can script this, the workflow story changes substantially.
Export fidelity across PDF, PPTX, and Canva. HTML export is solid. The others have been spottier in community testing, fonts substitute on PPTX, individual slide export to Canva isn’t there yet.
Whether Figma ships its competitive answer. They acquired Diagram, they have Make, and there’s clearly an integration story coming. Whatever they ship will have the design-system-source-of-truth advantage.
Whether the weekly allowance gets reworked. The volume of complaints suggests pricing tweaks are likely.
This is a genuine version-one product. It shows in places. But the trajectory is right, the loop is real, and the design-to-code handoff is the first one that actually feels like it works.
The week-one verdict from the community is roughly: worth using now, worth planning your workflow around within a quarter, and a meaningful piece of how design happens in 2026.
Skip the hype. Pick three of the patterns above. Try them tomorrow. One that sticks is worth more than ten you bookmarked.
— -
Found this useful? The first post in this series, Getting Started with Claude Design, covers the fundamentals, the dual-canvas interface, and where Claude Design sits in the broader Vibe Design movement. Read it first if you haven’t.
A vibrant digital experience celebrating the Amazon through immersive visuals and rich storytelling. The design blends bold color palettes with layered imagery, creating a strong sense of place and environmental depth.
A highly expressive creative project combining motion, interaction, and experimental layouts. The experience feels fluid and dynamic, with transitions that guide the user through a visually driven narrative.
A bold studio website showcasing product design and creative development through heavy use of 3D, motion, and interaction. Built with modern tools like WebGL and GSAP, it delivers a highly immersive browsing experience.
A visually refined website combining editorial layout with strong typographic hierarchy. The design balances minimalism with character, using subtle textures and color tones to create a calm but distinctive identity.
An expressive motion piece exploring color, light, and organic transformation. The animation feels fluid and experimental, with gradients and transitions that create a hypnotic visual rhythm.
A modern portfolio built with smooth scrolling and refined motion interactions. The experience balances minimal layout with subtle animation, allowing the work to stand out without overwhelming the user.
A minimal yet immersive web experience centered around interaction and flow. The scrolling behavior and structure create a continuous journey that feels both controlled and exploratory.
A clean and structured SaaS interface focused on clarity and usability. The layout emphasizes hierarchy and scalability, making complex enterprise data feel accessible and easy to navigate.
A practical look at how design is shifting from tools to collaboration with AI. Instead of focusing on shortcuts, the workflow centers on clearly articulating ideas and letting AI handle execution, enabling faster iteration and fewer context switches.
An open-source React and shadcn component library for building polished voice agent interfaces. It comes with production-ready building blocks like audio visualizers, chat transcripts, control bars, and full session views, while still allowing deep customization for branding and interaction design.
A premium Framer template built for SaaS, AI products, cloud platforms, and modern B2B startups. It combines a polished visual system with flexible layouts, CMS support, light and dark themes, and strong built-in features for product marketing sites that need to feel both professional and distinctive.
A high-quality mobile mockup designed to present apps, websites, or UI concepts in a clean and realistic environment. The concrete backdrop and natural lighting create a grounded, professional look that helps highlight interface details without distractions. Ideal for showcasing product visuals, case studies, or marketing assets.
Claude Design, Anthropic’s new conversational design tool, removes the friction between thinking and making. Instead of bouncing between chat and canvas, explaining what you want in Slack and executing in Figma, you work in one place: describe your idea to Claude, watch it generate on the canvas, refine through conversation, and ship directly to code.
For designers tired of tool-switching and developers wishing they could express design intent without writing code, this changes how design happens. The real power: you can take your design conversation and turn it into working HTML or Claude Code. No handoff limbo. No “I built this in Figma, now someone needs to rebuild it in React.”
What Is Claude Design?
Claude Design is a research preview tool built by Anthropic Labs. It sits between ChatGPT’s pure conversation and Figma’s interface-first design. The dual interface works like this: chat window on the left, live canvas on the right. You describe a design problem. Claude generates working designs. You refine them through conversation (broad changes via chat) or precision editing (inline comments on components). The design updates in real-time as you talk.
The core idea is radical in its simplicity: design isn’t about learning tool shortcuts. It’s about articulating what you want and collaborating with intelligence that can execute.
Who is it for? Designers who spend more time context-switching than creating. Product managers who can’t quite explain their vision in Figma. Developers who want to design but don’t have a design background. Teams where design happens across too many tools.
What problem does it solve? The gap between intent and execution. Right now, you have to choose between tools. Use Figma to collaborate with designers, but communicate intent in Slack. Use Miro for brainstorming, but export to Figma to polish. Use Claude to iterate on copy, but nobody’s working on the canvas. Claude Design closes that gap. Your entire conversation becomes your design.
Key Features That Matter
Dual Interface: Chat Plus Canvas
The interface is clean. Left side is conversation. Right side is your design. You type a request. Claude generates components, layouts, or full screens. You ask questions. It adjusts. You comment on specific elements. It refines. There’s no “export design to code” step because the canvas is always renderable: PDF, PPTX, HTML, ZIP, Canva, or Claude Code.
Design System Integration
Here’s what makes this genuinely powerful: Claude Design reads your codebase. During setup, point it to your design files or repository. Claude analyzes your actual colors, typography, component patterns, and spacing rules. Not approximations. Your actual design system. Then it applies that to every design it generates.
This isn’t you uploading a Figma file and hoping it sticks. It’s Claude understanding your design language at the code level. Every design it creates respects your brand automatically. Consistency without manual enforcement.
If you’re designing for a client or building something standalone, you don’t need a pre-built system. One message sets it: “Use a blue and gray palette. Typography is Inter. Components include buttons, cards, and modals.” Claude holds it through the entire conversation.
The difference: Figma forces you to build the system first, then design within it. Claude Design reads your system as context and designs from day one.
Iterative Workflow
Three ways to refine:
Chat-based iteration: “Make this form more compact.” “Change the hero section to a two-column layout.” “Add a sidebar navigation.” Claude rewrites the canvas without you leaving the conversation.
Inline comments: Click on a component, leave a comment. Claude sees it and responds. Precision beats bulk-editing for detail work.
Version management: Explore alternatives without losing work. Say “show me three variations of this dashboard.” Claude keeps each version accessible. Choose which to build on, or mix pieces from different versions.
Collaboration Built In
Unlike the isolation of a designer working alone in Figma, Claude Design treats collaboration as a core feature. Share designs with your organization. Set granular permissions: keep designs private, share view-only access for feedback, or grant edit access so multiple people can iterate with Claude in the same project.
This changes how teams work. Instead of “designer finishes, then shares to Figma, then engineers review,” everyone’s in the conversation. A product manager can jump in, leave a comment. An engineer can see the design and the rationale behind it simultaneously. The feedback loop collapses from days to minutes.
Export Flexibility
Once your design is done, you’re not locked in. Export as PDF for stakeholder presentations. PPTX for Powerpoint decks. HTML for usable prototypes. ZIP for files you can code from. Canva if you need quick social assets. Claude Code if the design is a starting point for building.
In 7 minutes, Anthropic walks through the entire workflow: describing an idea, Claude generating the design, iterating through conversation, and exporting to code. Watch this first if you want to see what you’re actually getting into.
Claude Design is available as a research preview on Pro, Max, Team, and Enterprise plans (Enterprise has it off by default, but your admin can enable it). Log into Claude.ai, and look for “Claude Design” in the apps menu. Click to create a new design project.
The onboarding asks one question: “What do you do?” Pick your role (Design, Engineering, Product, Sales, Data, Marketing, Other). Claude uses this to shape how it works with you.
Step 2: Define Your Context
Start with intent, not tooling. Your first message should answer: What are we building? Who uses it? What problem does it solve?
You can provide context multiple ways:
Type a description: “I’m designing an onboarding form for a SaaS product. Users are busy product managers. The form should ask for company name, role, and team size. It needs to feel fast and not overwhelming. Use a clean, minimal aesthetic.”
Upload reference files: DOCX, PPTX, XLSX, images, screenshots of your current product
Point Claude to your codebase: Claude reads your actual design tokens and components
Use the web capture tool: Grab elements directly from your existing website. Claude uses those as reference and builds prototypes that look like your actual product
Add a design system: Let Claude manage consistency automatically
Claude uses this context to make decisions about hierarchy, spacing, interaction patterns. You’re not describing buttons and boxes. You’re describing intent. Claude translates that to design. And it stays true to what already exists.
Step 3: Iterate Through Conversation
Claude generates a starting design. Now the work happens through natural conversation.
“The company input should be a dropdown of pre-filled options.” “Make the progress indicator more obvious.” “Can we move the ‘Learn more’ link to the footer?” “Show me what this looks like on mobile.”
Each message updates the canvas. You’re having a design critique with someone who executes instantly. No Figma jumping. No waiting for a designer to implement your feedback.
Step 4: Use Inline Feedback for Details
For specific adjustments, click a component and leave a comment. “This button text should be white, not gray.” “Add 8px padding here.” Claude reads the comment and adjusts only what you flagged.
Step 5: Export and Ship (This Is the Game Changer)
This is where Claude Design becomes a development tool, not just a design tool.
Once done, choose your path. Sharing a concept with stakeholders? Export PDF or PPTX and they see exactly what you imagined. Needing social quick-assets? Canva export. But here’s the key: when you hand off to engineers, you’re not handing off a static Figma file asking them to “rebuild this in React.”
Export as HTML and they have a working prototype. Export as Claude Code and they have production-ready component scaffolding. The design becomes the starting point for development, not a specification to interpret. Engineers are writing features on top of your design, not rebuilding it from scratch. Fewer misunderstandings. Fewer “can you tweak the padding” rounds. Faster to ship.
This is the shift. Design isn’t the end of thinking. It’s the beginning of building.
When Claude Design Shines
Rapid Prototyping
You have an idea. You need to see it in 10 minutes. Traditional flow: sketch in Figma (or pen and paper), refine, add polish. Claude Design flow: describe the idea, refine through conversation, export. The feedback loop is instant.
Cross-Functional Collaboration
Designer and product manager working together. Designer says “Here’s what I’m thinking.” They paste the Figma link. Silence. Nobody engages with the Figma file. Switch to Claude Design. Product manager sits next to designer. They iterate together in real-time through chat. Designer makes decisions faster because feedback isn’t async.
Design-to-Development Handoff (The Most Powerful Use Case)
This is where Claude Design shines hardest. Forget 40-page Figma files with pixel-perfect annotations that engineers then rebuild from scratch in code.
Export as HTML and the engineer has a working prototype. Export as Claude Code and they have component scaffolding that’s already in their language. The design is no longer a specification. It’s a starting point. They’re not asking “did you mean this padding?” They’re asking “should we add validation here?” They’re building features, not rebuilding designs.
The handoff isn’t a translation task anymore. It’s a collaboration continuation. Designers hand off working artifacts that engineers build on top of, not redesign from.
Personal Projects and Experiments
You’re exploring a side project. You don’t need a full design system yet. Tell Claude what you’re building. It generates a cohesive design. You tweak it. You export. You build. No process overhead.
What takes weeks in Figma can happen in hours. Complex interactive visualizations. Data dashboards. Network maps. Anything visual, any complexity level. Claude handles the execution.
When You’re Not Sure What You Want
Ideation mode. You know the problem but not the solution. “I’m building a financial dashboard. Show me what that could look like.” Claude generates an option. You hate the layout but love the color scheme. “Keep the colors but try a sidebar navigation instead of top nav.” It adapts. You discover what you actually want through conversation.
What It Means for Designers
Claude Design doesn’t eliminate designers. It changes what design means.
Right now, design is expensive because it requires deep expertise in specific tools. You need Figma fluency to move fast. You need to know grid systems, shadow values, and spacing scales. You need to anticipate how design systems work. Those skills matter. They’re not going away.
But they shift from “how do I use this tool” to “do I know what good design looks like?”
Claude Design is part of a larger movement called vibe design. Vibe design is the practice of expressing design intent in natural language, letting AI handle execution. Instead of learning Figma shortcuts, you learn to articulate what you want. Instead of moving pixels, you move conversations. This isn’t less work. It’s different work, and it’s more interesting.
Claude Design hands off the execution. You handle the judgment. You decide what feels fast versus slow. You know when a form is intimidating and when it’s inviting. You recognize when spacing feels wrong. You catch inconsistencies. You direct the intelligence toward solutions that matter.
This is a small difference that compounds. Designers spend less time in menus and more time thinking. More time debating what a user actually needs. More time exploring alternatives because iteration is free. More time mentoring, because the tool gets the tedious parts.
For product teams without dedicated designers, Claude Design is the difference between “we can’t afford design” and “we can explore design ideas in the time we’d spend writing an email.”
For engineers, Claude Design bridges the design-to-code gap. You get HTML or component code that’s already been iterated on and approved. You’re not rebuilding a Figma mockup. You’re extending it. You’re implementing features, not reinterpreting specifications.
For design leaders, it changes hiring. You still need taste, judgment, and principles. You need people who understand human psychology and business strategy. You don’t need everyone to be a Figma expert. That bar moves. And the design-to-code handoff becomes a conversation, not a translation.
In 2026, this shift is already underway. Claude Design is one more piece of that puzzle. Tools get smarter. Design gets faster. The work becomes more interesting, not less.
Claude Design vs. Figma: The Real Story
Here’s what everyone’s asking: Does Claude Design kill Figma?
Short answer: No. But it will force Figma to evolve, which is healthy.
The distinction matters. Figma is a collaborative design system and source of truth. It’s where teams align on components, spacing rules, and brand standards. It’s built for precision, review, and long-term maintenance. If you’re managing a design system for a mature product with 50+ screens, you’re not moving away from Figma.
Claude Design is for speed and intent. It’s built for: “I have an idea and need to see it in 10 minutes.” Or: “I’m a product manager and I can’t express this in Figma but I can describe it.” Or: “I’m shipping an MVP and I don’t have time for design iteration theatre.”
In practice, they coexist. Design team uses Claude Design for rapid ideation, then brings approved designs into Figma for the design system. Engineers use Claude Design to export HTML, but designers manage the source of truth in Figma. Product manager rapid-tests ideas in Claude Design, then hands off production work to the Figma file.
What Figma could do. Figma will likely build something similar (they acquired Diagram for AI capabilities, and they have Make for some of this). When they do, they’ll have an advantage: integration with their existing design system tools. Figma is bigger and slower to move. Claude Design is newer and built specifically for this workflow.
What matters for you. Don’t think “Figma or Claude Design.” Think: “Which tool is right for this problem right now?” For ideation and rapid prototyping, Claude Design is faster. For systems and collaboration, Figma wins. For design-to-code, Claude Design has the advantage today. That could change.
The real winner in this competition is you. More tools that understand design intent. More options for different problems. More pressure on vendors to make design less about tool expertise and more about thinking.
My Take: Why This Matters More Than You Think
I’ve been watching design tools evolve for a while. Figma was the disruption that made design collaborative. Claude Design is the next disruption: making design conversational.
Here’s what bothers me about the last 10 years of design culture: we made design unbearable for most designers.
Let’s be specific. The last decade sold us a story. We need design systems. We need token architecture. We need component libraries with perfect specs. We need design-to-development handoff precision. All of that became the work. For many designers, it became almost all of the work.
And I watch designers drowning in this. Spending days building complex components in Figma. Managing spacing tokens that change every quarter. Maintaining design systems that become outdated before they’re finished. Creating intricate layouts that take hours to build and hours more to keep consistent. Arguing about whether a padding value should be 12px or 16px while the actual design problem goes unsolved.
This isn’t a complaint about tools. It’s a complaint about what we decided design is.
Design used to be about solving user problems. About thinking creatively. About seeing a gap and filling it. About getting excited when you find the right solution. That’s the core of what we do.
But we buried it. We got so focused on structure, tokens, components, and specifications that the actual design thinking became secondary work. Designers became operators of design systems instead of solvers of problems. The busywork expanded to fill the entire day. The creative thinking got squeezed into the margins.
Many designers are exhausted. Not because design is hard. But because we made it tedious.
Claude Design changes this. Specifically. It removes the actual burden.
You don’t spend hours building complex components in Figma and then maintaining them. You describe the component. Claude builds it. You iterate on whether it solves the problem, not whether the padding is correct. You don’t spend a week architecting a token system. You describe your design language once. Claude applies it everywhere. Automatically. Consistently.
The tedious structural work that’s been eating your time? It’s gone. You don’t build intricate layouts manually. You describe them. You don’t argue about spacing values. You express intent. The tool figures out the specs.
What this actually means: For the first time, designers can skip the busywork and go straight to the thinking. What does the user actually need? What problem are we solving? What should this feel like? Those are the questions that should take your energy. Not “how do I organize this 40-component library” or “is this token value consistent across 12 files.”
This is actually radical. It means you don’t have to be a Figma power user. You need to be able to think. To articulate what you want. To recognize when something feels wrong. To solve actual user problems. That’s it.
That scares some designers. It should. Because designers who’ve spent the last decade becoming expert Figma operators but never learned to think about design problems are about to learn that tool expertise was never the valuable part.
But if you’re good at the actual work — solving problems, thinking creatively, understanding users — you’re about to get your job back.
For the first time in years, you won’t spend your day managing tokens and components. You’ll spend it thinking about solutions. Your energy goes to the work that actually matters. The problem-solving. The thinking. The creativity. The excitement that made you a designer in the first place.
I’m genuinely excited about this. Not because Claude Design is a perfect tool. It’s not. It’s early. It’ll have gaps. But because it’s permission to stop doing the busywork. Because it gives us back design as thinking, not design as token management.
In 2026, we’re finally moving toward a place where design can be about what it should have always been about. Solving problems. Creating experiences. Thinking carefully about what users need.
Not spending eight hours managing a component library.
What’s Coming: Over the coming weeks, Anthropic is making it easier to build integrations with Claude Design, opening the door for custom tool connections and workflows. Watch the announcement page for updates.
Curious about other tools changing how designers work? Check out Muzli’s guide to design tools and workflows to stay ahead of what’s next. We track launches, test new platforms, and share what matters for your practice. 🎨
A high-end WebGL experience that blends motion, lighting, and spatial design. It feels more like a digital installation than a traditional website, pushing interaction into a fully immersive space.
An experimental and visually expressive project that leans into bold identity and unconventional composition. Feels more like a digital art piece than a traditional website.
A high-end digital agency experience known for its smooth transitions and refined motion design. Every interaction feels polished, with a strong sense of rhythm and control.
Want to get featured? Upload your work to Muzli.me
The Blackbird Awards
A bold and immersive digital experience where creative storytelling meets interactive design. Strong visual direction and cinematic execution make it stand out immediately.
A deep dive into how AI-generated UI is shaping the way designers think and build. Focuses on the shift from static design to dynamic, generative systems.
A powerful tool for designing layered shader compositions, almost like Photoshop but for real-time visuals. It lets you build, tweak, and export high-quality shader-based assets with a modular workflow.
A visual creation tool focused on generative imagery and experimental workflows. It enables designers to explore new aesthetic directions through dynamic, AI-driven visuals.
AI-generated interfaces are becoming a baseline. Here’s what actually shifts, what doesn’t, and what the designer’s role is when the machine builds the UI in 30 seconds.
In February 2025, Andrej Karpathy coined “vibe coding” to describe building software by directing an AI with natural language instead of writing code yourself. The UI equivalent followed within months. Type a description. Get a functioning interface. Adjust by prompting. The whole surface of the product exists in minutes.
The question is not whether this is real. It is. The question is what it actually changes for professional designers who know the difference between a UI that looks right and one that works for the right reasons.
What “Vibe Design” Describes
The term covers a set of behaviors rather than a single tool. At its core: natural language to rendered UI. Describe an interface, get an interface, iterate through description rather than direct manipulation.
The tool that put the phrase on the map is Google Stitch. Launched as a Google Labs experiment at I/O 2025 (and built from the team and IP of Galileo AI, which Google acquired and folded into the product), Stitch generates high-fidelity UI from prompts on an AI-native infinite canvas. It introduced “Vibe Design mode” as an explicit feature: input a business objective or a desired user feeling, and Stitch generates multiple design directions for exploration, skipping wireframes entirely. A March 2026 update added multi-screen generation (up to five screens at once), a Voice Canvas for spoken commands, and DESIGN.md, which extracts design rules from existing sites and saves them as portable files. It is still a Google Labs beta, free, with generation limits, and not yet at enterprise scale. But it is the product that named this shift.
The rest of the landscape is less designer-specific in origin but genuinely used by designers. Lovable takes a plain-language brief to a full-stack, deployable application. v0 from Vercel generates React and Tailwind components at the individual level: one component described, one component produced, paste into project. Both default to Shadcn/UI patterns, which is why every AI-generated product in 2026 reads as a variation of the same three SaaS templates.
Claude occupies two positions in this stack. As Claude Artifacts (claude.ai), it generates fully interactive React and HTML components directly in a chat window, no setup, shareable by link, running in an isolated preview. For quick concept exploration and stakeholder alignment, this is the lowest-friction entry point in the category. As Claude Code paired with the Figma MCP, it becomes a precision tool: Claude reads your Figma file directly, generates production-quality component code from your actual design system, and can push generated UI back into Figma as editable frames. These are meaningfully different use cases, handled by the same model at different levels of the workflow.
“Vibe design” as a practice, separate from any specific tool, is what you get when someone with no design background directs one of these tools without a considered brief. The output is the AI’s best guess at a SaaS product UI: a blue accent color, an Inter-like font at default weight, a sidebar with icons and labels, a card grid, a data table. It functions. It communicates nothing specific about the product, the users, or any intentional design decision.
This is the context that makes the designer’s role clearer, not more threatened.
What Actually Changes
The floor rises. This is the most significant structural shift. A non-designer building an internal tool in 2026 produces something usable where they previously would have produced something broken. A PM building a product concept to test with users can now produce a clickable prototype without a designer’s time. The worst-case UI got substantially better.
Prototyping economics change. When a functional, clickable prototype costs 20 minutes instead of two days, the number of directions worth testing in a product cycle increases. This is a compounding advantage for teams that use it correctly. More directions tested means better decisions made before committing to implementation.
The volume expectation rises. When screens are cheap to generate, stakeholders will generate more of them. The “just mock up a few more ideas” request accelerates. This is a productivity pressure on design review and design critique processes that most teams have not yet adapted to.
The B2B SaaS baseline shifts. Every competitor has access to the same tools. The generic-looking product UI that used to distinguish a bootstrapped startup from a funded product no longer does. The floor of visual competence is higher everywhere, which means differentiation requires more intentionality, not less.
What Does Not Change
Interaction design requires understanding the user’s actual mental model. An AI has no mental model of your specific users. It has an averaged model of users in general, drawn from training data that skews heavily toward certain product categories and certain user behaviors. The precision required to design a workflow for a logistics dispatcher, a radiologist, or a commercial real estate broker is not approximated by average.
Design systems require intentionality about naming, consistency, token architecture, and the relationship between components. AI generation produces components per prompt. It does not produce a system. The button generated for screen A and the button generated for screen B may share a visual appearance without sharing a component, a token reference, or a maintainable relationship.
Edge cases are not vibe-designed. The happy path, yes. The empty state when the API returns nothing, the error state when the payment fails, the loading state for a table with 50,000 rows, the disabled state for a feature behind a paywall: these are designed by someone who thought about them, or they are absent. AI generates what was asked. Everything unasked is not there.
Brand differentiation is a human judgment. The product that feels unmistakably like itself, the interface with a visual character distinct enough to be recognized without a logo, the micro-interaction that communicates the brand’s personality in motion: none of these emerge from a prompt. They emerge from a designer with a clear point of view, making a series of decisions that compound into a distinct voice.
The Real Structural Shift for Careers
The more precise threat is not “AI replaces designers.” It is a compression of the entry-level design tasks that used to build foundational skills.
Wireframing, component exploration, quick prototyping, and translating stakeholder requests into a first-draft layout: these were the tasks that junior designers used to develop judgment. They are now generated. The apprenticeship model of design, where you develop taste by doing the low-stakes version of the work that senior designers do, is under pressure in a way it has not been before.
What this demands from senior designers: the ability to evaluate AI-generated output quickly and precisely. To identify which direction is worth developing and which is the AI’s default. To articulate what is wrong with a generated layout in terms specific enough to be corrected through prompting or redesign. This is a distinct skill from traditional design execution, and it is becoming as important as the execution itself.
How to Use These Tools Without Losing Design Control
The three-layer workflow that practitioners have settled into in 2026 is worth understanding as a pattern, not as a prescription.
The exploration layer uses Stitch or Claude Artifacts. No setup, no commitment. You are testing whether a direction is worth pursuing, not building the direction. Stitch is better when you want multiple screen concepts from a single brief. Claude Artifacts is faster when you want a single interactive component or a quick proof-of-concept you can share in the next 10 minutes.
The build layer uses Lovable or v0. Lovable when you need a full application with real data and real interactivity. v0 when you need a specific component built to React and Tailwind standards that you can drop into an existing project. Both produce rough design decisions that need a deliberate pass before anything is presented as finished work.
The precision layer uses Claude Code with Figma MCP, or Cursor. This is where AI-generated output comes back into your design system. Claude Code reads your Figma file directly, generates code that references your actual tokens and components, and pushes structure back into Figma when needed. This is not a prototyping tool. It is a production workflow for designers who are comfortable working across the Figma-to-code boundary.
The principle underneath all three layers: treat AI-generated output as a high-fidelity wireframe with incorrect design decisions embedded in it. The layout hypothesis may be worth examining. The type scale, the color application, the component states, and the spacing system are almost certainly wrong.
Build a prompt vocabulary that encodes your design principles. A prompt that specifies density, grid baseline, border radius limits, and font family produces materially better raw material than a generic description. “Dense information dashboard, 8px grid, neutral color palette, tabular numbers for all data cells, no decorative illustration” is a brief. “A dashboard for my analytics product” is not.
Never present AI-generated output as finished design work. Even 30 minutes of careful adjustment will surface the spacing inconsistencies, the wrong type hierarchy, the missing empty states, and the untested interactive states. Those 30 minutes are the design work. The generation is the starting material.
What Good Looks Like Now
The designers producing the best work with these tools are not using them to replace their design process. They are using them to accelerate the exploration phase, spend more time on the decision layer rather than the execution layer, and validate directions with stakeholders earlier and more concretely.
The workflow: use Stitch or Claude Artifacts to answer a layout hypothesis. Identify the direction closest to correct. Build it properly in Lovable or v0 if you need a working prototype, or directly in Figma with real tokens and components if you are headed to handoff. Annotate for engineering with real specs. Ship with confidence because the decision was tested, not just imagined.
That is not a vibe. That is design practice using better tools than were available two years ago.
For a deeper guide to integrating AI-assisted code into your design workflow, including how Claude’s Code to Canvas changes the Figma pipeline, see The Complete Vibe Coding Guide for Designers.
Stay sharp. Explore daily design inspiration on Muzli.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A practical guide to building dark mode as a design system decision. Learn surface hierarchy, semantic tokens, color mapping algorithms, and implementation workflows that separate premium dark UIs from generic ones.
Most dark modes are bad. Not because dark mode is technically difficult, but because most teams approach it as an afterthought instead of a design system decision. The result: dark grey text on slightly-less-dark grey backgrounds, accent colors that were designed to pop on white and now look muddy, shadows that are invisible because physics does not work that way on dark surfaces, and no consistent token strategy across the codebase.
The teams shipping dark UIs that feel genuinely premium are not using a different process for dark mode. They are using a different starting assumption. Dark is not a variant of light. It is a first-class design system context with its own visual logic, its own elevation language, and its own token architecture.
This guide covers what separates professional dark mode implementations from the generic ones. You will learn surface hierarchy rules, semantic token strategy, color mapping algorithms, and an end-to-end workflow you can ship.
Why Dark Mode Is Now a Design System Priority
Hardware reality: OLED screens represent the majority of flagship phones sold since 2023. True black pixels consume zero power. Google’s measurements show YouTube in dark mode uses 43 percent less power than light mode on OLED hardware at full brightness. This is not a design preference anymore. It is infrastructure.
User baseline: System-level dark mode adoption across iOS and Android crossed into expectation territory. An app that breaks or degrades in dark mode is not a rough edge. It is a visible failure on a significant percentage of real sessions.
Design direction: Arc Browser, Linear, Warp, and Raycast all launched dark-first. Their light modes exist but feel secondary. The dark interface is the designed version, and it reads that way. This is now the premium standard.
The implication: If dark mode is baseline infrastructure, it cannot be treated as a variant or an afterthought. It requires systems thinking from the ground up. That means semantic tokens, surface hierarchy rules, and documented workflows.
Surface Hierarchy: The Thing Most Teams Get Wrong
One shade of dark grey is not a dark mode. It is a grey app.
A functional dark mode needs a minimum of four surface elevation levels, each with a distinct visual treatment: the base background (the darkest level, where content sits), the primary elevated surface (cards, panels, sidebars), the secondary elevated surface (nested cards, hover states, active states), and the overlay level (modals, tooltips, dropdowns that sit above all content).
The critical insight is that shadows do not read on dark backgrounds. Drop shadows work on light surfaces because they simulate light blocked by a raised object. On a dark surface, there is no meaningful contrast between a dark shadow and a dark background. The signal disappears.
The replacement is luminance hierarchy. As a surface elevates, it gets lighter, not more shadowed. Google’s Material You system formalizes this as tonal elevation: each elevation level is a slightly lighter version of the base color, tinted toward the primary brand color. The signal is still there. The physics make sense in context.
In practice: define your dark background as the starting point, then add three more surface values that step up in luminance by 5 to 8 percent each. Give each level a semantic token name (surface-base, surface-raised, surface-overlay) and apply them consistently. Every component that floats above content should use a demonstrably lighter surface than what it floats above.
Color Tokens for Dark Mode
Ad hoc color decisions do not scale to dark mode. If your color system is a collection of hex values applied directly in component code, dark mode will require you to touch every component individually. Semantic tokens are the only approach that scales.
A semantic token is a named color that carries a role rather than a value: — color-surface-base, — color-text-primary, — color-interactive-default. The token name stays constant. The value it resolves to changes per theme.
In Figma Variables (the native system as of 2023), this looks like a single variable named surface/base with a light mode value of #FAFAFA and a dark mode value of #0F0F0F. Every component that references that variable automatically updates when the mode switches. The design system handles the translation. The designer does not touch individual components.
Accent colors require special attention. A saturated blue that reads as energetic on a white surface may read as washed out on a dark one. Each accent color needs a dark-mode variant that preserves the intended perceptual weight, which usually means shifting toward a lighter or more saturated version of the same hue. Test both modes every time you add a new color to the system.
Text color is where the most common mistake lives. Pure white (#FFFFFF) on a true dark background creates eye strain through excessive contrast. Off-white values in the #E0E0E0 to #F0F0F0 range read as “white” to users while significantly reducing glare. WCAG AA requires a 4.5:1 contrast ratio for normal text, not maximum possible contrast.
Design System Architecture for Dark Mode
Tokens alone are not enough. How you organize your design file, export structure, and mode switching logic determines whether dark mode scales across your team or becomes a maintenance burden. If you are building a design system from scratch, see How to Build a Design System in Figma for the full framework.
Modes vs. Variants: Which Should You Use?
In Figma and most design systems, there are two approaches:
Mode-based (recommended): Create a single design file with “light” and “dark” modes. Every component has one library item. The mode changes all dependent tokens at once. This scales with zero duplication.
Variant-based: Create separate component variants for light and dark. This requires maintenance discipline but gives visual preview of both states side-by-side. Use this for rapid exploration, not production.
Most teams should use modes for production libraries. The Arc Browser design system and Material Design 3 both use mode-based organization.
The first line is the fallback. Older browsers use it. Modern browsers use the variable.
What “Dark-First” Design Means in Practice
Dark-first is not a style. It is a workflow assumption. It means building your component library and token system with the dark canvas as the reference state, and creating light-mode overrides rather than dark-mode overrides.
The practical difference: when you add a new component to a dark-first system, you design it for dark and then verify it in light. In a light-first system with a dark variant, dark mode is always the afterthought that gets less design time, fewer edge cases tested, and lower visual quality. Dark-first inverts that priority.
Linear is the clearest example of this approach. Every component in Linear was designed for the dark surface. The light mode works, but the product reads as a dark product. The design language was built for that context.
Implementation Workflow: End-to-End
A complete dark mode implementation requires coordination across design and engineering. This is the workflow that works.
Phase 1: Foundation (Design)
Define your 4 surface elevation levels with exact luminance values
Extract semantic color tokens from your brand
Create a light mode token set (your current design)
Create a dark mode token set (new mode in design file)
Test color mapping on OLED and LCD hardware
Deliverable: Figma file with both modes, exported token JSON
Phase 2: Architecture (Design + Engineering)
Set up file organization (Tokens, Components, Variants)
Dark mode and accessibility are not straightforward. There are myths. Know the facts. For a deeper dive into accessibility best practices, see How to Make Your UI Accessible.
Myth 1: Dark mode is more accessible
Reality: It depends on the user and their condition.
Users with astigmatism often find dark mode harder (halation effect: light text on dark halos and appears heavier)
Users with color vision deficiency sometimes benefit from dark mode, sometimes not
Users with low vision may need to switch between modes depending on context
Users with light sensitivity benefit enormously from dark mode
The implication: Dark mode should be an option, not the only mode. Respect system preference, provide an override, offer both.
Myth 2: Pure black (#000000) is the correct dark background
Reality: Pure black causes eye strain.
Black (#000000) on a light foreground creates extreme contrast. Our eyes are not designed for that sustained contrast. After 20 minutes of reading, most users experience fatigue.
Near-black (#0A0A0A to #161616 depending on design) provides sufficient darkness for OLED power savings while reducing eye strain. Test your specific color. If users report fatigue, go slightly lighter.
Myth 3: You can use lower contrast in dark mode
Reality: WCAG AA (4.5:1 for normal text) applies equally to both modes.
The contrast ratio is calculated the same way. Light text on dark background still needs 4.5:1 minimum. Your #E5E5E5 text on #0F0F0F background should measure at least 4.5:1.
Use WebAIM Contrast Checker to verify. Test both light and dark modes.
Myth 4: If users prefer dark mode, they want it everywhere
Reality: System preference does not equal context preference.
Users with prefers-color-scheme: dark still read long-form content better on light backgrounds (Apple Books data supports this). They may prefer dark UI chrome (navigation, sidebars) but light content areas.
Ask: What is the primary activity on each screen? If reading, offer the hybrid approach.
What Actually Matters for Accessibility:
Test with real users, not just WCAG calculators
Automated tools check contrast ratio
Real testing reveals halation effects, eye strain, color blindness issues
Test on actual hardware in target lighting
OLED screens show colors differently than LCD
Dim rooms show colors differently than bright rooms
Your color choices matter in context
Respect system preference
prefers-color-scheme is not a preference, it is an accessibility signal
Honor it by default
Provide an override for users who need it
Offer both modes
Do not remove light mode if dark is your default
Some users need it for medical reasons
Some contexts (printing, archiving) require light mode
If your accent colors work in all three, you are good
Common Mistakes to Avoid
Mistake 1: Using light-mode accent colors directly
Light mode: #0070F3 (bright, energetic blue) Dark mode: Same #0070F3 (washed out, hard to read)
Fix: Map to dark variant. #4A9EFF (brighter, more saturated). Test.
Mistake 2: Not testing on OLED hardware
Your dark mode looks great on MacBook LCD. On user’s OLED phone, pure blacks are invisible. Gradients look weird. Animations have timing issues.
Fix: Test on actual OLED (iPhone, Android flagship) and LCD. Adjust if needed.
Mistake 3: Ignoring transparency and glassmorphism
Transparent elements look different on dark backgrounds. White overlay at 50% opacity is blinding. Adjust opacity and blur for readability.
Fix: Test all transparency values. Adjust opacity by mode if needed.
Mistake 4: Forgetting animations look different
Fade-in animations from transparent to opaque have different timing feel in dark mode. Hover transitions may be less visible on dark surfaces.
Fix: Test animations in both modes. Adjust timing or blur if needed.
Mistake 5: Treating dark mode as a variant, not a design system requirement
Light-first thinking: “Let’s add dark mode as an option.” Dark-first thinking: “Dark mode is our system’s foundation. Light is the variant.”
First approach leads to lower quality dark mode. Second approach leads to premium dark and premium light.
Fix: Design for dark first. Verify in light. Ship both at equal quality.
Mistake 6: No manual override
System preference is great, but some users need to override it (accessibility needs, battery state, context). Do not force dark on users who need light. Do not lock users into light.
Fix: Respect system preference by default. Add a manual toggle.
The Readability Exception
Long-form reading is demonstrably better on light backgrounds for most users. Apple’s own data supports this, which is why Apple Books defaults to a light background even when the system preference is dark. The hybrid approach resolves this: dark chrome (navigation, sidebars, toolbars) with a light content well (article body, document canvas).
Notion uses this pattern. So does Readwise and several code editors that default dark but maintain a light document area. The rule is practical: dark for navigation and structure, light for sustained reading.
The exception matters most for any product where users spend extended sessions reading dense text. A documentation product, a long-form publishing tool, or a data-heavy report viewer should offer dark mode and respect system preference, but not force dark on the content reading area.
What You Ship Matters
Dark mode is no longer a nice-to-have feature. It is baseline infrastructure. But infrastructure only works when it is built as a system.
Teams that ship premium dark modes do not use a different process. They use a different starting assumption: dark is a first-class design context, not a variant of light.
This means semantic tokens that scale, surface hierarchy that respects physics, color mapping that preserves brand intent, and accessibility testing that goes beyond compliance. This means dark-first thinking, not dark-second thinking.
The implementation workflow in this guide is not theoretical. Linear, Arc, Raycast, and Material Design 3 all use versions of it. Your team can too.
Start with surface hierarchy. Add semantic tokens. Map colors systematically. Build the token system in code. Test on real hardware. Respect system preference. Ship both modes at equal quality.
The result is not just dark mode that works. It is a design system that works.
Next Step: Review the pre-ship checklist. Set up your Figma file with modes. Export tokens to code. Test on OLED hardware. Your users are waiting for the premium version.
For more on the broader visual design direction shaping product UI this year, see the Web Design Trends 2026 breakdown.
Stay sharp. Explore daily design inspiration on Muzli.
Assistantly reimagines talent sourcing as scaling faster with unicorn talent — brought to life through a storytelling experience powered by motion, 3D, and interaction.
Tram Phan Cham is a coffee space inspired by nature and the spirit of companionship, where people can take time to care for themselves, foster community connections, and nurture sustainable growth. The logo, inspired by the image of a bee and the percent (%) symbol, reflects a philosophy of balance, sharing, and a commitment to delivering 100% quality to every customer.
Mobile app design in 2026 isn’t about flashy new concepts. It’s about patterns that survived contact with real users. Here are the UI shifts that actually affect what you ship.
Digital Design Days returns for its 10th anniversary (May 7–9, Milan) with 3 stages, 100+ speakers, and 3,500+ attendees. The roster reads like a design hall of fame: Stefan Sagmeister, Marina Willer (Pentagram), Simon Clowes (Apple), Emily Rickard (BUCK), plus a €3,000+ live Design Battle and immersive installation by Rare Volume.
Diffuse is a minimal website designed to showcase products through clean layouts, strong imagery, and studio-inspired storytelling. Perfect for presenting design objects, small collections, or product-led brands.
Upgrade your workflow with the Samsung Galaxy S26 Mockups Collection, a set of 24 high-quality scenes built for modern UI design, app showcases, and branding presentations.
Mobile app design in 2026 isn’t about flashy new concepts. It’s about patterns that survived contact with real users. Here are the UI shifts that actually affect what you ship.
Most “mobile design trends” articles read like wishlists. Somebody saw a design shot with a blurred card, called it a trend, and moved on. That’s not how design actually evolves. Patterns don’t become patterns because they look good in a case study. They become patterns because they solve problems that enough teams keep running into.
Mobile app design in 2026 is shifting, but not in the ways the trend forecasters predicted two years ago. The biggest changes aren’t visual. They’re structural: how navigation works when there’s no back button, how interfaces adapt when AI knows your habits better than you do, how authentication feels when passwords finally die. The visual layer matters, but it’s the interaction model underneath that’s actually changing.
Seven UI patterns are reshaping mobile apps right now. Not concepts. Not predictions. Patterns that are shipping in production apps, solving real problems, and creating new expectations that your users already have.
AI-Native Adaptive Interfaces
The idea of “personalized UI” has been around for a decade. Netflix recommends shows. Spotify builds playlists. That’s content personalization. What’s new in 2026 is layout personalization: apps that restructure their interface based on how you actually use them.
Spotify did this quietly with its home screen redesign. If you mostly use Spotify in the morning for podcasts, the podcast shelf rises to the top. If you’re a playlist person, playlists lead. The layout isn’t static. It’s a reflection of your behavior, rebuilt on each session. Apple’s iOS 18 took a similar approach with the redesigned Control Center, where frequently used toggles surface automatically based on time, location, and usage patterns.
Google Maps goes further. The app presents entirely different interfaces depending on context: commute mode in the morning (minimal, focused on your usual route), exploration mode on weekends (restaurants, ratings, photos front and center), navigation mode when driving (stripped to essentials). Same app, three different products.
What makes this work: The adaptation has to be invisible. The moment a user notices the layout shifted, you’ve created confusion instead of convenience. The best implementations feel like the app “just works” without the user realizing the structure changed. Spotify succeeds because the content types are familiar even when their position changes. The mental model stays intact.
When to skip it: If your app has fewer than three distinct use cases, adaptive layouts add complexity without value. A calculator app doesn’t need to reorganize itself. A note-taking app with a clear primary action (write a note) doesn’t benefit from shuffling its interface. Adaptive UI earns its cost in apps where users have meaningfully different sessions: a banking app (check balance vs. pay someone vs. invest), a fitness app (log workout vs. track nutrition vs. review progress), or a communication app (quick reply vs. browse vs. compose).
Implementation note: Start with time-of-day and frequency data before reaching for anything more complex. Most of the value comes from surfacing the user’s most common action first. You don’t need a recommendation engine. You need a sorted list.
Gesture-Based Navigation Is Growing Up
When Apple killed the home button in 2017, gesture navigation was an experiment. Nine years later, it’s the primary interaction model for every major mobile platform, and the patterns are finally maturing beyond “swipe up to go home.”
The shift in 2026 is from simple gestures (swipe, tap, pinch) to compound gestures with feedback layers. Telegram’s chat interface is a good example: swipe left to reply, swipe right to mark as read, long-press for reactions, pull down to search. Each gesture has distinct haptic feedback, so your thumb knows what it triggered before your eyes confirm it. The haptic layer turns gesture navigation from “I hope this works” to “I felt it work.”
Instagram introduced swipe-between-tabs navigation years ago, but the newer pattern is contextual gesture discovery. TikTok’s interface teaches gestures through use: the first time you pause on a video, a subtle animation shows you can long-press for more options. The gesture isn’t hidden in a tutorial. It’s revealed at the moment you need it.
Apple’s Dynamic Island expanded this further. It introduced a persistent gesture target that changes based on context: tap for a glance, long-press for expansion, swipe to dismiss. One area, multiple gestures, multiple functions. That pattern is spreading to third-party apps that use the Live Activities API.
The discovery problem: Gestures are powerful but invisible. If users don’t know a gesture exists, it doesn’t exist. The best apps in 2026 solve this with progressive disclosure: start with visible buttons, then introduce gesture shortcuts as the user demonstrates competence. Superhuman (the email client) does this brilliantly, showing keyboard shortcuts inline until the user starts using them, then fading the hints.
When to skip it: Accessibility. Not every user can perform complex gestures. Any gesture-dependent interaction needs a visible fallback. If your swipe-to-delete doesn’t have a tap-based alternative, you’ve excluded users with motor impairments. Gestures should accelerate, not gatekeep.
Implementation note: Always pair gestures with haptic feedback. iOS provides three intensity levels through UIImpactFeedbackGenerator (light, medium, heavy) and three semantic types (success, warning, error). Android’s HapticFeedbackConstants offer similar control. A gesture without haptics is a guess. A gesture with haptics is a confirmation.
The Dark Mode Default
Dark mode used to be a toggle buried in settings. In 2026, it’s the default for a growing number of apps, and the ones doing it well are treating it as the primary design surface rather than an afterthought inversion.
The technical case is now overwhelming. OLED screens (which represent the vast majority of flagship phones sold since 2023) use zero power for true black pixels. Apps that default to dark mode on OLED devices measurably extend battery life. Google confirmed that YouTube’s dark mode uses 43% less power than light mode at full brightness on OLED. That’s not a design preference. That’s an engineering decision.
But the more interesting shift is perceptual. Apps like Arc Browser, Linear, Warp (the terminal), and Raycast all launched dark-first. Their light modes exist but feel secondary. The dark interface is the “real” version, and the design language was built around it: accent colors that pop against dark backgrounds, subtle borders instead of shadows for depth, luminance hierarchy instead of weight hierarchy.
What “dark-first” actually means: It’s not inverting your light theme. It’s designing your color system, contrast ratios, and depth cues with a dark canvas as the starting point. Shadows don’t work on dark backgrounds. You need borders, subtle gradients, or luminance shifts to create separation. Elevation in Material Design 3 uses tonal surfaces (lighter shades of a dark base) instead of drop shadows. That’s a fundamentally different approach to visual hierarchy.
The readability trap: Long-form reading is still better on light backgrounds for most users. Apple’s own research supports this, which is why Apple Books defaults to light even when the system is in dark mode. If your app involves extended reading (articles, documentation, long messages), offer dark mode but don’t force it for content areas. The hybrid approach (dark chrome, light content well) is gaining traction in apps like Notion and Readwise.
When to skip it: Apps targeting older demographics, medical or health apps where clinical clarity matters, or any context where users need to read dense text for extended periods. Default to light, offer dark, and respect the system setting.
Implementation note: Design your dark palette with at least four surface levels: a true background, an elevated surface, a secondary elevated surface, and an overlay level. One shade of dark grey is not a dark mode. It’s a grey app.
Thumb-Friendly Design Is Non-Negotiable
This isn’t new. It’s newly urgent. Screen sizes have grown. The percentage of one-handed phone usage hasn’t shrunk. The result: the top 40% of a modern phone screen is a dead zone for comfortable reach, and apps that put primary actions there are fighting their users’ anatomy.
The data is clear. Steven Hoober’s updated touch research (published late 2025) confirms that 75% of phone interactions use a single thumb. The comfortable reach zone is the bottom third of the screen plus a curve along the side closest to the dominant hand. Everything above the screen’s midpoint requires a grip shift or a second hand.
Apple acknowledged this years ago with the reachability gesture, but that’s a band-aid. The real solution is architectural: put the actions where the thumb already is.
Apps getting this right: The most notable shift is bottom-centric navigation expanding beyond the tab bar. Telegram moved its search to a pull-down gesture from the chat list. Apple Maps put its entire search and suggestion interface in a bottom sheet that the user pulls up. Spotify’s “Your Library” redesign moved filtering controls to a horizontally scrollable chip row at the top of a bottom sheet. The common thread: the primary interaction surface is below the screen’s midpoint.
The bottom sheet pattern (a draggable panel anchored to the screen bottom) has become the dominant container for secondary content. Apple standardized it with UISheetPresentationController in iOS 15, and by 2026 it’s the expected pattern for anything that doesn’t deserve a full-screen takeover: settings, filters, confirmations, previews, sharing options.
The floating action button question: Google’s Material Design championed the FAB for a decade. It’s still valid for single-primary-action interfaces (compose in Gmail, create in Figma). But FABs that stack (multiple floating buttons) or FABs that cover content are losing ground to bottom bar actions. The trend is toward integrating primary actions into the navigation bar itself rather than floating them above content.
When to skip it: Tablet and foldable layouts. Thumb zones are irrelevant when the device is held with two hands or propped on a surface. If your app targets iPad or foldable phones in expanded mode, optimize for pointer precision and larger touch targets instead.
Implementation note: Test your layouts with the thumb zone overlay in Figma (several community plugins generate these). If your most-used action requires a reach into the top third, move it. The effort of repositioning one button will save thousands of micro-frustrations.
Glassmorphism 2.0 (And When to Skip It)
Glassmorphism (frosted glass effects, translucent backgrounds with backdrop blur) hit peak hype around 2021. Then it got overused, performance-tanked on mid-range devices, and designers moved on. In 2026, it’s back in a more disciplined form.
The difference between the 2021 version and today’s implementation is restraint. Early glassmorphism tried to make everything translucent. The 2026 version uses it surgically: overlay cards, notification panels, media controls, and contextual menus that float above primary content. The blur serves a purpose: it says “this layer is temporary, the content behind it still exists.”
Apple’s visionOS design language accelerated this. The entire spatial computing interface is built on layered translucency. That visual language is trickling down into iOS and Android apps. The system-level precedent made glassmorphism feel less like a trend and more like a platform convention.
Where it works:
Notification overlays and toasts: The blur signals impermanence. The content behind it remains contextually visible.
Media player controls: Music apps (Spotify, Apple Music) use translucent overlays for now-playing controls that don’t fully obscure the album art.
Modal confirmations: A blurred background behind a confirmation dialog maintains spatial context.
Navigation overlays: Bottom sheets and slide-over menus with subtle transparency feel lighter than opaque panels.
Where it fails:
Data tables and dashboards: Translucency behind numbers is visual noise. Dense information needs clean, opaque backgrounds with clear contrast.
Forms and input fields: Blurred backgrounds behind text inputs reduce contrast and make labels harder to read. Accessibility fails.
Low-contrast environments: Glass effects depend on sufficient contrast between the blurred background and the foreground content. On a predominantly white or light screen, the effect disappears into mush.
Performance reality: Backdrop-filter blur is GPU-intensive. On flagship phones, no problem. On budget Android devices (which represent the majority of global smartphone sales), heavy blur effects cause dropped frames and battery drain. If your audience includes mid-range devices, use static blurred backgrounds (pre-rendered) instead of real-time backdrop-filter. The visual result is close enough. The performance difference is massive.
Implementation note: CSS backdrop-filter is now widely supported, but test on real mid-range hardware, not just your M-series MacBook simulator. Set a fallback: if the device can’t handle the blur, show a semi-transparent solid color instead. The design should degrade gracefully, not break.
Spatial UI Foundations: Pre-AR Patterns
You don’t need to design for Apple Vision Pro to benefit from spatial UI thinking. The design patterns emerging from spatial computing are already improving flat mobile interfaces.
Spatial UI is about depth as information. Not decoration: information. When a card has a subtle shadow and a slight scale increase, it communicates “this is above the base layer, it’s interactive, it’s temporary.” That’s a spatial signal, and it works on a flat screen just as well as it works in 3D space.
Depth layers as hierarchy: The most practical spatial pattern for mobile is explicit layering. Instead of distinguishing elements through color alone, apps are using elevation (shadow + scale + blur) to create a z-axis hierarchy. Apple’s latest Human Interface Guidelines formalize this with three explicit layers: base content, raised elements, and overlay elements. Each layer has defined shadow values, corner radii, and interaction behaviors. This isn’t skeuomorphism. It’s using depth as a functional signal.
Parallax and motion depth: Subtle parallax (background moves slower than foreground on scroll) gives interfaces a sense of physical space. Apple’s Weather app uses this constantly: the background condition animation scrolls at a different rate than the forecast cards. It’s not flashy. It’s just enough to make the interface feel like it has actual layers rather than painted ones.
3D-aware components: Apps like Nike and IKEA have used AR for product previews for years. The newer pattern is 3D-aware UI components that respond to device orientation. Tilt your phone and the card shadows shift. Rotate and the lighting on a product image adjusts. Apple’s gyroscope API makes this trivial to implement, and the effect is surprisingly engaging without being distracting.
When to skip it: Any interface where speed matters more than delight. Parallax scrolling on a messaging app’s chat list would be absurd. Depth effects on a checkout flow add friction. Spatial UI works for content that benefits from a sense of place: portfolios, media browsers, product showcases, editorial layouts. It doesn’t belong in utility interfaces where the user wants to complete a task and leave.
Implementation note: Start with shadows and elevation before adding motion. A well-designed shadow system (2–3 levels with consistent light direction) gives you 80% of the spatial benefit with zero performance cost. Parallax and gyroscope effects are the remaining 20% and should only appear where they genuinely improve comprehension.
Passwordless Authentication Changes Everything
This one isn’t a visual pattern. It’s an interaction architecture shift that changes how your app’s first 30 seconds feel, and those 30 seconds determine whether users stay.
Passkeys (built on the FIDO2/WebAuthn standard) are now supported natively by iOS, Android, and every major browser. Google, Apple, and Microsoft have all committed to passkeys as the primary authentication method. GitHub, PayPal, eBay, Kayak, and TikTok have shipped passkey support. The technology is no longer experimental. It’s infrastructure.
What passkeys change for designers: The login screen, one of the most designed screens in any app, is becoming simpler. No password field. No “forgot password” link. No password strength meter. No CAPTCHA. The flow becomes: enter email (or select from an autofill suggestion), confirm with Face ID or fingerprint, done. Two steps instead of six. The cognitive load drops dramatically.
The design challenge: Passkeys are invisible by nature. Users don’t see a passkey. They see a biometric prompt. This means the traditional login screen (which often carried brand personality, illustrations, onboarding messaging) shrinks to almost nothing. The “moment of entry” that used to be a design opportunity becomes a half-second biometric confirmation. Designers need to find other moments for brand expression: the loading state after auth, the first screen, the welcome-back animation.
Fallback UX matters: Not every user has biometrics set up. Not every device supports passkeys yet. The fallback path (usually email magic link or SMS code) needs to be just as smooth, not a punishment for having an older phone. The best implementations (Linear, Vercel) present passkey as the primary option with a subtle “other methods” link that doesn’t make the alternative feel second-class.
When to skip it: You can’t skip it. Passkey support is quickly becoming a baseline expectation, similar to how supporting dark mode went from “nice to have” to “required” in three years. The question isn’t whether to implement passkeys. It’s how quickly you can make them your primary auth flow.
Implementation note: Apple’s Authentication Services framework and Google’s Credential Manager API handle the heavy lifting. The design work is in the transition: what happens between “authenticated” and “first meaningful screen.” That 0.5 to 2 second window is your new onboarding moment. Use it well.
What This Means for Your Next Project
These seven patterns share a common thread: they all reduce friction by working with the user’s physical reality instead of against it. Thumbs have a natural reach zone. Eyes prefer dark backgrounds on OLED. Fingers remember gestures better than they remember passwords. The patterns that matter in 2026 are the ones that respect those constraints.
If you’re starting a mobile project today, here’s the practical priority stack:
Non-negotiable: Thumb-friendly layout, passkey authentication, dark mode support (as a first-class citizen, not an inverted afterthought)
High value: Gesture navigation with haptic feedback, bottom-sheet architecture for secondary content
Context-dependent: Adaptive interfaces (only if your app has distinct use modes), glassmorphism (only for overlays on capable devices), spatial UI foundations (only for content-rich experiences)
The biggest mistake designers make with patterns like these is treating them as a checklist. They’re not. Each one is a response to a specific problem. If your app doesn’t have that problem, the pattern is decoration, not design.
The mobile apps that feel best in 2026 aren’t the ones using every new pattern. They’re the ones that picked the right three and executed them precisely.
If you’re building your portfolio around mobile work, the patterns you choose to showcase signal how current your thinking is. Muzli Me is where designers curate their creative identity and stay visible to the teams that are hiring for exactly this kind of expertise.
For more on the broader design shifts shaping this year, including how these mobile patterns connect to what’s happening on the web, check out our Web Design Trends 2026 breakdown.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
An interactive timeline that lets you explore iconic moments from the history of the web. The experience combines sound, motion, and nostalgic UI patterns to recreate the feeling of different internet eras.
A vibrant and expressive website that brings a fresh approach to healthcare design. The use of bold colors, illustrations, and friendly visuals creates a more human and accessible experience.
A hybrid production studio website that pushes WebGL and motion to create a cinematic browsing experience. The combination of textures, transitions, and interactive layers makes it feel closer to a digital installation than a traditional site.
An immersive concept for a futuristic creative marketplace. Built with WebGL and 3D interactions, the navigation feels more like exploring a virtual world than browsing a website.
An editorial-style portfolio that combines refined typography with smooth motion. The layout feels clean and structured, while subtle interactions add depth without overwhelming the content.
A visually driven portfolio focused on shaders, 3D, and interactive experiments. The experience leans into minimal UI while letting visuals and motion take center stage.
A personal portfolio that blends design and development with strong execution. Smooth animations, bold colors, and clear structure create a highly engaging and polished experience.
An experimental WebGL experience that explores fluid simulations, interaction, and generative visuals. The project feels more like a creative lab than a traditional website, pushing boundaries of what the browser can do.
A curated selection of the most engaging websites based on real user clicks from Muzli Picks. The list highlights projects that didn’t just look good, but actually kept designers exploring and interacting.
A practical guide focused on what really matters in today’s hiring process. The key takeaway is simple: your portfolio should clearly communicate your value within minutes, not just showcase polished visuals.
A new kind of design tool that turns your UI into real, working code from the start. Instead of designing in a separate layer, every element you create in Paper is built with actual HTML and CSS, making the transition from design to development almost seamless.
A new generation of design tools that treats code as the source of truth from the very beginning. Onlook lets you visually edit real React applications, with every change instantly reflected in production-ready code, eliminating the traditional handoff between design and development.
A collection of 44 high-resolution device mockups featuring iPhone, iPad, MacBook, and iMac, all set in clean, minimal metal environments. The scenes are designed to keep the focus on your product while adding just the right amount of depth and realism.
A clean and flexible website template designed for modern product and SaaS sites. The structure is built around clear hierarchy, reusable components, and responsive layouts, making it easy to launch a polished site quickly.
Your portfolio is probably too pretty for its own good.
That sounds backwards. Designers are visual people. Polished work should speak for itself, right? But here’s the thing: in 2026, 78% of recruiters use AI-assisted screening to filter portfolios before a human ever opens your site. That means your carefully crafted hero animations and full-bleed case study images are being parsed by algorithms that don’t care about your grid system. They care about keywords, structure, and proof of impact.
The UX job market has recovered from the 2024–2025 drought, but it hasn’t returned to the “everyone’s hiring” energy of 2021–2022. Roles exist. Companies are building again. But hiring managers are pickier, budgets are tighter, and the bar for what “qualified” means has shifted. Generic portfolios that worked three years ago now disappear into a pile of 200 applications.
This guide is the portfolio you’d build if you understood how hiring actually works on the other side of the table. Not a gallery. Not a mood board. A portfolio that clears the AI filter, survives the 2–3 minute human scan, and makes someone want to call you.
The 5-Second Test: What Recruiters Actually See First
Before anyone reads your case study, they’ve already decided whether to keep scrolling. The average initial portfolio review is 2–3 minutes. But within the first five seconds, a recruiter has answered three questions:
What does this person do?
Are they senior or junior?
Is this relevant to what I’m hiring for?
If your homepage doesn’t answer all three instantly, you’ve lost the majority of your audience before they see any work.
Do this:
Put your role and specialization above the fold. “Product Designer specializing in B2B SaaS” is better than “I create meaningful digital experiences.”
Show 3–5 project thumbnails with one-line descriptions. Not titles. Descriptions. “Redesigned onboarding flow that reduced drop-off by 34%” beats “Project Athena.”
Make your contact information visible without scrolling. Email. LinkedIn. No treasure hunts.
Not that:
A full-screen animation that takes 4 seconds to load
A mysterious single-word homepage with no context
An “About” page that reads like a memoir
Here’s the uncomfortable math: if a recruiter reviews 40 portfolios in a session and gives each one 2–3 minutes, your homepage gets roughly 10–15 seconds of real attention. Design for that constraint, not against it.
Lead with Impact, Not Aesthetics
The biggest shift in portfolio expectations over the past two years is this: hiring managers now care more about what changed because of your work than how it looked. This doesn’t mean visuals are irrelevant. It means visuals are the entry fee, not the differentiator.
A beautiful redesign that shipped and moved no metrics is, from a hiring perspective, equivalent to a concept project. It might show craft, but it doesn’t show judgment.
The impact hierarchy (what reviewers look for, in order):
Business outcomes. Revenue increased, conversion improved, support tickets dropped. Numbers with context.
User behavior changes. Task completion rates, time-on-task reductions, adoption rates. Evidence that real people acted differently after your work.
Team or process impact. You introduced a framework that the team still uses. You ran a research initiative that redirected the roadmap. You built a component library that reduced design-to-dev handoff time.
Craft quality. Clean UI, thoughtful interaction design, consistent visual language. Important, but it’s the foundation, not the story.
Most portfolios lead with #4 and maybe mention #1 in a footnote. Flip that order. Lead with what changed. Show the craft inside the case study, not instead of the story.
Quick test: Read the first two sentences of each case study in your portfolio. If they describe what you designed (a dashboard, an app, an onboarding flow), rewrite them to describe what changed because of what you designed. That single edit will make your portfolio stronger than 80% of what’s out there.
The Case Study Formula That Works
Three to five case studies is the sweet spot. Not two (too thin). Not eight (no one reads that many). Pick the ones that show range and depth, not volume.
Every strong case study follows the same underlying structure. You can rearrange it, but if any of these pieces are missing, the case study underperforms.
The formula:
The setup (2–3 sentences). What was the product? What was the problem? Why did it matter to the business? Don’t bury the lede. Open with the tension, not the company description.
Your role and constraints (1–2 sentences). What were you responsible for? What couldn’t you change? Constraints are more interesting than freedom. “I was the sole designer on a 4-week sprint with no user research budget” tells a reviewer more about your capability than “I led the design.”
The process (the bulk of the case study). This is where most portfolios either go wrong or go bland. Don’t show a linear design process diagram (Discover, Define, Design, Deliver). Nobody believes it actually happened that way.
Instead, show decisions. What did you try first? What didn’t work? Where did you pivot? What trade-off did you make, and why? The messy middle is where trust is built.
Do this: “We tested three navigation patterns. Version A tested well for discoverability but increased task time by 40%. Version B reduced task time but buried a key feature. We shipped a modified Version B with a persistent shortcut, which balanced both metrics.”
Not that: “After conducting user research, I created wireframes and iterated on the design until we reached the final solution.”
The outcome (2–3 sentences with numbers). What happened after launch? If you don’t have hard metrics, use qualitative signals: team adoption, stakeholder feedback, follow-up projects that were greenlit because of your work. Something measurable.
The reflection (1–2 sentences). What would you do differently? This is optional but powerful. It shows maturity. A designer who can articulate what they’d improve next time is a designer who learns.
A note on confidential work: If you can’t show the actual UI, show the thinking. Anonymized flows, redacted wireframes, and documented decision trees are all valid. What you can’t do is show nothing and expect reviewers to trust you on faith.
What to Cut (And Why Cutting Hurts Good)
If cutting projects from your portfolio feels painful, you’re doing it right. The instinct to show everything you’ve done is natural but counterproductive.
Cut these:
Student projects older than 2 years. Unless they’re genuinely exceptional, they signal inexperience rather than range.
Concept projects without constraints. Fantasy redesigns of Spotify or Airbnb with no real users, no business constraints, and no accountability. They show craft but not judgment.
Projects where your contribution was minimal. If you made the icons while someone else designed the system, that’s not a case study. That’s a contribution. List it on your resume, not your portfolio.
Anything you can’t explain in conversation. If a recruiter asks “walk me through this project” and you struggle, it shouldn’t be in your portfolio. You’ll be asked.
Duplicates in disguise. Three e-commerce checkout redesigns show repetition, not range. Pick the strongest one.
Keep these (even if they’re not “pretty”):
Projects with clear constraints and creative solutions
Work that shipped and had measurable results
Projects where something went wrong and you adapted
Cross-functional work that shows you can operate beyond Figma
Your portfolio should feel curated, not comprehensive. Three strong case studies beat seven mediocre ones every time.
Your Homepage Is Your First UX Test
Hiring managers notice the irony: a UX designer whose portfolio has bad UX. Your site is a product. Treat it like one.
The UX checklist for your own portfolio:
Loads in under 3 seconds on mobile
Role and specialization visible without scrolling
Navigation is one level deep (no nested menus, no hamburger icons on desktop)
Case studies are scannable: clear titles, one-line summaries, visual thumbnails
Contact information is on every page (or in a persistent header/footer)
Works on mobile without horizontal scrolling or broken layouts
No auto-playing video or audio
Accessibility basics: sufficient contrast, readable font sizes, alt text on images
What most designers overlook:
Page speed. That 12MB hero video is costing you visitors. Recruiters on slow office Wi-Fi will close the tab.
SEO basics. If your name and “UX designer” don’t appear in the page title and meta description, you’re invisible to search (and to the AI tools parsing your portfolio). Remember, 78% of recruiters now use AI-assisted tools. Those tools read your metadata.
Clear information hierarchy. Your homepage should have one primary action: “See my work.” Everything else is secondary.
Here’s a useful exercise: send your portfolio URL to three friends who aren’t designers. Ask them to spend 30 seconds on your site and then tell you what you do, how senior you are, and what kind of work you’re looking for. If they can’t answer all three, your homepage needs work.
Beyond the Portfolio: Building Your Design Identity
A portfolio is necessary, but in 2026 it’s rarely sufficient on its own. The designers who get hired fastest are the ones who are findable before they apply.
What this means practically:
Niche expertise beats generalist positioning. Hiring managers increasingly prefer candidates with demonstrated depth in a specific domain (health tech, fintech, design systems, developer tools) over candidates who claim to do everything. A portfolio that says “I’m a product designer” competes with everyone. A portfolio that says “I design complex data interfaces for enterprise SaaS” competes with a much smaller pool.
AI proficiency is now a hiring filter. 78% of design managers consider AI tool proficiency when evaluating candidates. If you’re using AI tools in your workflow (for research synthesis, rapid prototyping, content generation, or design exploration), document it in your case studies. Not as a gimmick. As a demonstration that you understand the current toolkit.
Your digital presence matters beyond your portfolio URL. Your LinkedIn profile, your Dribbble/Behance activity, your blog posts or conference talks, the articles you share and comment on. All of it creates a signal that hiring managers read before and after viewing your portfolio.
This is where your creative identity extends beyond a single website. Tools like Muzli Me exist specifically for this: a place to build and maintain your professional creative identity that connects your portfolio, your influences, your expertise, and your point of view into something cohesive. Think of it as the connective tissue between your portfolio, your social presence, and your professional reputation.
The point isn’t to be everywhere. It’s to be coherent everywhere you are.
The market is better than it was. Roles are opening. But the designers getting those roles aren’t the ones with the prettiest portfolios. They’re the ones who made it easy for a recruiter to understand, in under three minutes, exactly what they bring to the team.
Build for that. Everything else is decoration.
Want to get featured on Muzli Picks?
Create your profile on Muzli Me, upload your project, and it might get featured on Muzli Picks and seen by thousands of designers every day.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Based on what designers actually clicked on Muzli Picks
Every day, thousands of designers explore Muzli Picks.
Some projects get a quick look. Others pull people in and keep them there.
This list is based on real clicks, the websites designers chose to open, explore, and revisit.
If you want your work to appear here, create a profile on Muzli Me, upload your project, and it might get featured on Muzli Picks and reach thousands of designers.
A clean, product-focused experience that balances technical depth with a clear and structured interface. Subtle motion keeps it alive without distraction.
A futuristic WebGL-powered experience that feels more like a digital world than a marketplace. Bold visuals, smooth motion, and a strong sense of immersion make it hard to leave.
A highly immersive WebGL portfolio that feels more like an interactive playground than a traditional site. Rich shaders, smooth transitions, and depth-driven interactions make every scroll feel intentional.
A highly immersive AI product experience that combines depth, motion, and clean UI layers. The use of WebGL interactions creates a futuristic feel while maintaining clarity and control.
A bold portfolio that blends design and development into one seamless experience. The motion feels intentional, creating a strong rhythm as you move through the work.
A high-end interactive product experience that merges WebGL, motion, and e-commerce. The configurator feels fluid and tactile, making exploration part of the experience.
A high-end e-commerce experience that blends luxury aesthetics with smooth interaction design. The use of motion and layout creates a refined, premium browsing flow.
A clean and confident portfolio with strong typography and minimal structure. The restraint in design lets the work speak clearly without unnecessary noise.
An experimental scrolling experience built around a blueprint-inspired visual language. The combination of 3D, structure, and storytelling creates a distinctive industrial feel.
A comprehensive guide to designing and building apps using AI workflows. Covers practical use cases, tools, and how designers can move faster from idea to product.
Published March 24, 2026 · Muzli Design Inspiration – the design hub trusted by 800,000+ creative professionals
Something just shifted in how design gets made.
Figma announced today that AI agents can now work directly on the Figma canvas – not just read your files, but actually create and edit components, apply variables, and build designs using your own design system. AI-generated UI still feels generic, detached from the conventions teams spend months building. That’s the specific problem this announcement takes aim at.
Here’s what changed, what it enables, and why it matters.
The Problem With AI Design (Until Now)
Every design team knows the frustration. You prompt an AI to generate a screen, and what comes back looks like a wireframe assembled by someone who’s never seen your product. The right font isn’t there. The components don’t match. The spacing feels arbitrary.
At Muzli, we surface thousands of new designs every week from the world’s top creative sources – Dribbble, Behance, and 120+ others. The difference between AI-generated work and human-crafted design is immediately visible: one belongs to a system, the other doesn’t. The gap has always been context.
The core issue: AI agents have had no access to the decisions your team made. No knowledge of your color tokens, your component library, your spacing system, your voice and tone. They’ve been operating without context – which is exactly why the results look contextless.
What Figma Is Announcing
Through Figma’s MCP server, agents can now write directly to your Figma files using the new use_figma tool. That means Claude Code, Codex, Cursor, and other MCP-compatible agents can generate and modify design assets that are genuinely linked to your design system.
This is different from the existing generate_figma_design tool, which translates live HTML and websites into editable Figma layers. The two tools are complementary: when code and design drift apart, generate_figma_design brings the current UI into Figma. From there, use_figma can edit those designs – or create new ones – using your actual components and variables.
The result: agents that work inside your design system, not around it.
Skills: Teaching Agents How Your Team Works
The most interesting part of this announcement isn’t the use_figma tool itself – it’s Skills.
Skills are markdown files that define how an agent should behave on the Figma canvas. They encode your team’s conventions, sequencing, and intent – what steps to take, which components to reach for, how to handle edge cases. Instead of hoping an agent figures it out from a prompt, you teach it once, and it applies that knowledge consistently.
The foundational skill, /use-figma, gives agents a shared understanding of how Figma works structurally. Teams customize from there. Crucially, anyone can write a skill – no plugin development, no code required. It’s just a markdown file.
Nine community-built skills launched today:
/figma-generate-library – Create new components in Figma from a codebase
/figma-generate-design – Create new designs using existing components and variables
/apply-design-system – Connect existing designs to system components (Edenspiekermann)
/create-voice – Generate screen reader specs from UI specs (Uber)
/rad-spacing – Apply hierarchical spacing with variables and fallbacks (Rad Collab)
/sync-figma-token – Sync design tokens between code and Figma variables with drift detection (Firebender)
/edit-figma-design – Orchestrate design workflows using Warp (Warp)
/multi-agent – Run parallel workflows across Augment (Augment Code)
Self-Healing Loops
One of the quieter details in the announcement is worth paying attention to: agents can screenshot their output and iterate on what doesn’t match.
Because agents are working with real components, variables, and auto layout – not just drawing pixels – those corrections interact with your actual system. The agent isn’t patching an image. It’s adjusting a component property, updating a variable, changing a layout constraint. The structure remains intact.
This matters because AI models are non-deterministic by nature. The same prompt produces different results. Skills reduce that variance by encoding specific steps and guidelines. Your team’s conventions stop being documentation nobody reads and become rules the agent follows every time it runs.
What This Means for Design Teams
The shift here is subtle but significant. Design systems have always been written for humans – component libraries, usage guidelines, spacing scales. They’re how teams encode taste, decisions, and standards. Until now, agents couldn’t access any of it meaningfully.
Skills make design systems machine-readable in a more actionable way. Your Figma library isn’t just a reference anymore – it’s context an agent can draw on while it works.
Designers who regularly study what polished, mature design systems look like in the wild – the kind of work that appears daily in Muzli’s curated feed – will be best positioned to build skills that actually produce great output. Taste is still the input. The agent is just the output mechanism.
That opens up some genuinely interesting possibilities:
Spinning up new screen variants using existing components without manual assembly
Keeping code and design in sync as products evolve, automatically
Generating accessible annotations (VoiceOver, ARIA specs) directly from UI designs
Applying spacing systems and token hierarchies without manual component-by-component work
Who It Works With
The use_figma tool currently integrates with: Augment, Claude Code, Codex, Copilot CLI, GitHub Copilot in VS Code, Cursor, Factory, Firebender, and Warp.
It’s available free during the beta period. Usage-based pricing will follow.
The Bigger Picture
Figma has been steadily repositioning its canvas as shared infrastructure – the place where code and design meet, where decisions get made, where product work comes into focus regardless of where it started.
This announcement accelerates that thesis. When agents can operate directly in Figma with access to your design system, the canvas becomes less of a deliverable and more of a live artifact – something that agents and designers work in together.
The practical takeaway for teams: your design system quality just became significantly more important. The rigor you put into naming tokens, structuring components, and documenting patterns directly determines what agents can do with them. Messy systems will produce messy outputs. Mature, well-organized systems will produce something genuinely useful.
Figma is betting that teams who’ve invested in their design systems will get the most out of this. Based on how it’s been built, that bet seems well-placed.
Explore the skills library at figma.com/community/skills, or read Figma’s guide to getting started with the MCP server.
Stay on top of the tools and trends shaping the design industry – Muzli curates the best design, tech, and inspiration from 120+ sources, delivered fresh every day at muz.li.
Muzli is the design inspiration hub used by over 800,000 designers worldwide. We surface the best creative work, tools, and industry news – so you never miss what matters.
Every designer has prototyped something they believed in, then handed it to a developer and watched it become something else. Lovable is built for the moment you decide that handoff stops here.
Not a drag-and-drop page builder. Not a “design to code” converter that spits out spaghetti. A full AI app builder that takes your words and turns them into working, deployable software. The real question is whether it actually holds up for designers, or just sounds good in a demo. We mapped every feature, traced every recent launch, and filtered for what actually matters if you’re coming from a design background.
The short version: Lovable is not a design tool. It’s what comes after the design tool.
What Lovable Actually Is
Lovable is an AI-powered app builder. You describe what you want in plain language, and it generates a full-stack application: React + TypeScript on the frontend, Supabase-powered backend, database, authentication, the works. It started life as “GPT Engineer,” an open-source project that racked up 50,000+ GitHub stars. The commercial version launched as Lovable in November 2024, hit #1 on Product Hunt, and hasn’t slowed down since.
The numbers tell the story. Over 2.3 million users. $100M ARR. A $330M Series B in December 2025 at a $6.6B valuation, backed by Nvidia and Salesforce. This is not a side project. This is infrastructure.
For designers specifically, Lovable sits at an interesting intersection. It’s not trying to replace Figma. It’s trying to be what happens after Figma. The place where your designs become real, functional products you can deploy, test, and iterate on.
Visual Edits: The Figma-Like Layer
This is the feature that will feel most natural. Visual Edits lets you click on any element in your app and modify it directly: text, colors, spacing, padding, margins, borders, shadows, icons. No code required.
Think of it as a simplified version of Figma’s inspect panel, but instead of generating specs for a developer, your changes go straight into production code. Select multiple elements, edit text directly on the page, adjust properties through a visual panel. The second version (shipped August 2025) added a unified Design View with dedicated design tools that make the experience feel less like editing code and more like working in a design tool.
This is where designers will spend most of their time. Not in the chat prompt. Not in the code editor. In the visual layer, fine-tuning the details that make a product feel right.
Themes: Brand Control Without Touching Code
The Themes feature gives you centralized control over your app’s visual identity. Colors, typography, spacing, all managed from one panel with live preview. If you’ve ever built a design system in Figma, this will feel familiar. Define your brand tokens once, and they propagate across every component.
For freelancers building client projects, this is a time saver. Set up the brand, build the app, and every new page automatically inherits the right visual language.
AI Image Generation: Built-In, No Credits
Lovable includes image generation directly in the builder. Describe what you need, and it creates images on the spot. No switching to Midjourney. No credit costs. Since March 2026, it even supports transparent backgrounds, which makes it useful for icons, illustrations, and UI elements.
It won’t replace a dedicated image tool for hero visuals or complex compositions. But for placeholder content, quick illustrations, and functional imagery inside your app, it removes a step from the workflow.
Voice Mode: Build by Talking
This one sounds gimmicky until you try it. Voice Mode lets you describe changes and features by speaking instead of typing. For designers who think visually and verbally (most of us), this can feel more natural than writing detailed prompts.
“Make the header sticky, add a subtle shadow on scroll, and change the CTA button to our brand blue.” That kind of conversational instruction works surprisingly well. It’s especially useful during early exploration when you’re iterating fast and don’t want to stop and type out every change.
File-to-App: Turn Anything Into a Working Product
Upload a spreadsheet, a PDF, a presentation, or even a resume, and Lovable converts it into a functional web application. For designers, the most practical use case is rapid prototyping. Got a content doc from a client? Turn it into a working landing page in minutes instead of mocking it up first.
The Figma Connection (And What Happened to It)
Lovable launched Figma Import in January 2025, built in partnership with Builder.io. It let you import Figma designs and convert them into working code inside Lovable. For designers, this was the dream feature: design in Figma, build in Lovable, skip the handoff.
Here’s what you need to know: the Figma Import feature was removed in November 2025. The current workflow is prompt-first or visual-edit-first. You can still use Figma as your design tool and reference your designs while building in Lovable, but the direct import pipeline no longer exists.
This matters because it changes how you approach the tool. Lovable works best when you think of it as a building environment, not a design-to-code converter. Start with a prompt, shape it visually, refine in the visual editor. The mental model is closer to “designing in the browser” than “exporting from Figma.” If you want the Figma-to-code route, that workflow lives elsewhere, and we covered it in The Complete Vibe Coding Guide for Designers.
Agent Mode: The Real Game Changer
Since July 2025, Lovable runs in Agent Mode by default. This is not just a chatbot that writes code. It’s an autonomous system that can research your existing codebase, search the web for solutions, debug errors on its own, generate images, and validate its own changes before presenting them to you.
The practical impact: you can describe a complex feature (“add a user dashboard with analytics charts, a settings page with profile editing, and email notifications”) and the agent will break it down, build each piece, test it, and fix issues without you babysitting every step. Lovable reports 91% fewer errors since Agent Mode launched.
For designers, this means you can think in features and flows rather than individual components. Describe the experience you want, and let the agent figure out the implementation details.
Lovable Cloud: No More Backend Setup
Before October 2025, using Lovable for anything beyond a static page meant connecting to Supabase manually. Lovable Cloud changed that. Database, authentication, file storage, all built in. No external accounts. No configuration. No environment variables.
This is a big deal for designers who want to build real products. Need user login? It’s there. Need to store data? Already set up. Need file uploads? Built in. The entire backend layer that used to require a developer (or hours of YouTube tutorials) is now handled automatically.
Lovable Cloud is built on Supabase’s open-source technology, so the quality is solid. And if you ever outgrow Lovable or want a developer to take over, the code exports cleanly to GitHub.
Lovable’s Biggest Updates in 2026
The first quarter of 2026 brought several updates worth knowing about.
Plan Mode (February 2026): Before the AI writes any code, it shows you a detailed plan of what it intends to build. You review, adjust, approve. This gives designers the kind of control they’re used to from design reviews, but applied to code generation.
Prompt Queue: Stack up to 50 prompts and let Lovable execute them in sequence. Useful for batch changes across multiple pages.
Browser Testing: A virtual browser environment where Lovable tests your app automatically, catching visual bugs and interaction issues.
Cross-project referencing: Use @ mentions to reference other projects. If you’ve built a component library in one project, reference it from another.
Shared Connectors: Slack, Twilio, Linear, Telegram, and Contentful integrations that let your app connect to external services through conversation.
Workspace Knowledge: Define rules and preferences that apply across all your projects. Set your standards once, and every new project follows them.
The Big Announcement: Lovable Goes Beyond App Building
On March 19, 2026, Lovable announced its expansion beyond app building. The platform now handles general-purpose tasks: data analysis, business intelligence, presentation decks, marketing workflows. In their words, Lovable is becoming “a general-purpose co-founder that can do anything.”
What does this mean for designers? Two things.
First, your Lovable workspace is no longer just where you build apps. It’s where you can analyze user research data, generate pitch decks for client presentations, or run marketing analysis for a product you’re launching. The tool is positioning itself as an all-in-one work partner, not just a code generator.
Second, and this is the more interesting angle: it signals where AI builders are heading. The same prompt-to-output model that works for generating React components also works for generating spreadsheets, reports, and strategy documents. Lovable is betting that the interface (chat + visual editing + agent autonomy) is the product, not the output type.
For designers who freelance or run studios, this could consolidate several tools into one. Build the client’s app, analyze their analytics, create the investor deck. All from the same environment. Whether Lovable actually delivers on this ambition remains to be seen, but the direction is clear.
How Lovable Compares to Bolt, v0, and Figma Make
Lovable is not the only AI builder. Here’s how it compares to the tools designers are most likely to encounter. (For a broader roundup, see our guide to the best AI design tools in 2026.)
Lovable vs. Bolt.new: Bolt gives you more technical flexibility (multiple frameworks, direct code editing). Lovable gives you a more complete out-of-the-box experience with Cloud, visual editing, and agent mode. Designers will likely prefer Lovable. Developers might prefer Bolt.
Lovable vs. v0 (Vercel): v0 generates excellent UI components and deploys fast, but it’s designed for developers who know React. Lovable is more accessible for non-coders.
Lovable vs. Replit Agent: Replit offers a full development environment with mobile app support (React Native). If you need native mobile, Replit wins. For web apps with a designer-friendly workflow, Lovable has the edge.
Lovable vs. Figma Make: Figma Make stays inside Figma and converts designs to code. Lovable is its own environment. They solve different parts of the workflow and can actually complement each other.
What Lovable Gets Wrong
No tool review is honest without the friction points.
Web only. No native iOS or Android apps. If you need mobile, you’re building a responsive web app or looking elsewhere.
Error loops. Users report cases where the AI gets stuck in fix-break-fix cycles. Agent Mode reduced this significantly, but it still happens with complex logic.
Prompt skill matters. Vague prompts produce vague results. Designers who think in systems (define the structure, then the details) get better output than those who describe everything at once.
Complex logic struggles. Multi-step business logic, conditional workflows, and data transformations can confuse the AI. Simple apps work great. Complex SaaS features need more hand-holding.
No Figma import anymore. If your workflow depends on designing in Figma first, the removal of direct import means extra steps.
The Designer’s Playbook for Lovable
If you’re a designer approaching Lovable for the first time, here’s the workflow that actually works.
Start with structure, not visuals. Describe the pages, the user flow, the data model. Let the agent build the skeleton.
Use Visual Edits for refinement. Once the structure exists, switch to the visual editor for spacing, colors, typography, and layout adjustments.
Set up Themes early. Define your brand tokens before building multiple pages. It saves massive time later.
Think in features, not screens. Instead of “build me a dashboard page,” say “build me a dashboard with user activity charts, a notification feed, and quick-action cards for the three most common tasks.”
Use Plan Mode. Review what the AI intends to build before it builds it. This is your design review moment.
Lovable is not replacing your design process. It’s extending it. The designers who will get the most out of this tool are the ones who already think in systems, understand user flows, and can articulate what they want clearly. That’s most of us. We’ve been doing it in Figma for years. Now we can do it in production.
The line between designing a product and building a product is getting thinner every month. Lovable is one of the clearest examples of where that line is heading.
Want to stay on top of the tools reshaping design? Muzli delivers daily design inspiration and the latest industry updates, right in your browser.
Google just shipped something worth paying attention to.
It’s called vibe design.
And if you design digital products, it might change how you start every project.
The idea comes from the latest update to Stitch, Google’s experimental AI design tool. Instead of opening with wireframes, grids, or components, you now start with something far less structured:
A goal. A feeling. A product idea.
From there, AI generates high-fidelity UI , not sketches, not mood boards. Actual screens.
—
From wireframes to intent
The shift sounds small. It isn’t.
When you start with structure, you’re already making hundreds of micro-decisions: this grid, these columns, these breakpoints. Most of them happen before you’ve answered the most important question: *what should this feel like?*
Stitch flips that sequence.
A prompt like this:
“Design a landing page for a meditation app that feels calm and minimal, inspired by Apple Health and Headspace.”
produces multiple full UI directions instantly. You explore a dozen variations before committing to any structure at all.
That’s vibe design. And it’s a meaningful departure from how every major design tool has worked for the last 20 years.
The biggest update to Stitch is the canvas itself, and it doesn’t work like anything you’ve used before.
No panels. No layers. No component tree.
Instead, it’s an infinite thinking space. Drop in whatever you have:
– Prompts – Screenshots of interfaces you like – A paragraph describing the product – Code snippets – Reference UI from competitors
The AI uses all of it as context simultaneously, so you’re not just prompting, you’re painting a richer picture that the model interprets as a whole. The practical result: moving from raw inspiration to first-draft UI takes minutes instead of days.
—
A design agent that actually remembers the project
Most AI tools answer one question and forget it.
Stitch’s design agent is different. It holds the entire project context while you work — so when you ask for a new screen, it’s not starting from scratch. It already knows your design system, your existing flows, the constraints you’ve established.
From that base, it can:
– Suggest improvements without being asked – Generate variations that fit the existing visual language – Critique a layout against the stated goal – Propose what the next screen in a flow should look like
Google also added an Agent Manager, essentially git branching for creative directions. Run multiple explorations in parallel without losing the original concept.
—
DESIGN.md: your design system as a portable file
Here’s a practical one.
Stitch can extract design rules from any existing website, colors, typography, spacing, components, and save them as a file called `DESIGN.md`. That file travels: across projects, between design and development, into a new Stitch canvas where the AI picks up the system immediately.
For teams who’ve rebuilt the same design tokens in every new tool, this isn’t theoretical productivity. It’s a day of setup work gone.
—
Prototypes that suggest what comes next
Stitch converts static designs into clickable prototypes in one step. Connect screens, hit Play, walk the user journey.
The more useful feature is what happens when the AI is watching those interactions.
When a user clicks a button, Stitch can suggest what the next screen should look like, drawing on the context of the whole product, not just that one transition. It’s not autocomplete. It’s closer to having a second designer in the room who’s been following the entire project.
—
Designing with voice
The most experimental feature: you can talk to the canvas.
Say “give me three menu variations” and three appear. Say “darker palette” and it updates in real time. Say “make this feel more playful” and the layout shifts.
The first time it works, it’s disorienting. The line between directing a design and having a conversation starts to dissolve.
Whether that’s the future of design tools or just a compelling demo remains to be seen. But it points somewhere worth watching.
—
What this actually means for designers
Here’s the honest version.
The role that’s changing isn’t “designer.” It’s “person who spends three hours on wireframes before anyone’s agreed on a direction.” That low-value exploration phase is what AI is absorbing, and most designers won’t miss it.
What’s left is harder to describe but easy to recognize when you see it: the judgment to know which direction is right, the taste to sense when something’s off, the experience to see what breaks at scale.
Those aren’t skills. They’re sensibilities. And they become *more* valuable when anyone can generate a screen in 30 seconds, because the question stops being “can you produce this?” and becomes “do you know which one is good?”
—
The bigger trend: idea to product in minutes
The gap between an idea and a working prototype is closing.
A founder can describe an app. A designer can generate the first twenty screens. A prototype can exist before the second meeting.
That changes the economics of early-stage design. It also raises the bar for what counts as a real contribution.
Less drawing. More directing. Less production. More judgment.
Forget seeing the world as it is. That’s for people who enjoy beige walls and lukewarm water. We built The Reflect for those who want to see the world as it should be: distorted, iridescent, and way more interesting than reality. We took 3D eyewear, dipped it in liquid chrome, and added a heavy dose of “don’t look at me, but actually please do.” If you’re looking for subtle, you’re in the wrong place.
Hyperscale power systems for AI and critical infrastructure — energy storage, power electronics, and software delivering grid stability and 99.9% uptime.
Meet Part 3 of the Eco Pulse project, focused on presenting the smart water bottle through a fully animated website experience. Eco Pulse is designed to support healthy hydration habits by tracking water intake, sending timely reminders, and providing insights into hydration levels and mineral balance — all brought together on a dedicated e-commerce website where the product can be explored and purchased.In this stage, the website was brought to life through animation.
A tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity by Houmahani Kane with Codrops
The best Figma UI kits and design systems for 2026. Tested for Variables, Auto Layout, proper variant structure, and real production use. Not just pretty previews.
In 2026, a portfolio is more than great visuals, it’s proof of your professional DNA: how you think, build, and leverage AI in real workflows. Learn the 4 layers of a winning portfolio and why community-driven discovery on Muzli Me can turn your work into real opportunities.
ZACAO is a minimal, product-focused Framer template designed for fintech, SaaS, and digital products. It prioritizes clarity and structure to help your product feel real, trusted, and ready to launch.
A creative studio site built around CGI, motion, and sharp visual pacing. The scrolling feels deliberate, the transitions are crisp, and the whole experience stays clean while still feeling cinematic.
A restrained portfolio that uses typography, spacing, and motion with real confidence. It keeps the interface quiet and lets the craft show through interaction and rhythm.
An interior and branding studio website with a soft editorial tone and strong visual hierarchy. The muted palette and spacious layout make the work feel polished without overcomplicating the experience.
A minimalist, high-contrast digital experience featuring a brutalist layout with oversized, bold sans-serif typography and a stark white background. The interface utilizes a horizontal, interactive timeline of raw photography and multimedia cards that evoke a modern, editorial aesthetic.
A short visual piece exploring the strange shift many designers feel today, from creative exploration to operating machines. The project blends reflection, motion, and atmosphere to capture a moment in the evolving relationship between designers and AI tools.
A refined portfolio site for freelance web designer Clarisse Michard, combining elegant typography with fluid WebGL interactions. The layout keeps things minimal while motion and visual pacing give the experience a distinctive rhythm.
A concept for a browser built around AI-native workflows instead of traditional tabs and navigation. The interface explores how search, summarization, and automation could reshape the way users interact with the web.
A studio website concept focused on bold typography, structured layouts, and confident visual hierarchy. The design balances expressive branding with a clear, editorial-style presentation of work.
A straightforward checklist for designers and product teams who want to make their interfaces more accessible. The article breaks down key areas like color contrast, keyboard navigation, typography, and component behavior into practical steps you can apply during the design process.
A practical guide for designers who want to share their work and ideas without turning their presence into self-promotion. The article looks at simple ways to build credibility through process, thinking, and consistent publishing.
HueGrid is a simple visual tool for generating balanced color palettes using a structured grid of hues and tones. It helps designers quickly explore harmonious color combinations for UI systems, branding, or illustration work without manually tweaking every shade.
Particles is an interactive playground for experimenting with particle systems and generative motion on the web. It is a great reference for designers and developers exploring WebGL effects, interactive backgrounds, or dynamic visual systems.
Ayro is a modern CRM SaaS Framer template for software companies and startups. Perfect for CRM tools, sales and support platforms, and SaaS dashboards. Includes a clean landing page, feature pages, pricing, blog, and a polished app UI.
The best Figma UI kits and design systems for 2026. Tested for Variables, Auto Layout, proper variant structure, and real production use. Not just pretty previews.
There are hundreds of Figma UI kits available right now. Most of them look great in a preview and fall apart the moment you try to customize a button. They use fixed dimensions instead of Auto Layout. They hardcode colors instead of using Variables. Their variants are organized by someone who’s never built a real product.
We tested these kits against one standard: can a product designer open this file, customize the theme, and start building screens in under 30 minutes? If the answer required watching a tutorial, digging through unlabeled layers, or manually replacing 200 color values, it didn’t make the list.
The kits below are organized by use case. Every one uses modern Figma features (Variables, Auto Layout, component properties). Every one has been verified active in February 2026.
Want a daily boost of creative energy? Install the Muzli extension, your nonstop source for design inspiration, right in your browser!
Complete Design Systems
These are full systems, not starter kits. They include tokens, components, patterns, documentation, and a structure built for teams.
The industry reference for Figma design systems. 10,000+ components, 3,200+ variants, full token architecture. Best for SaaS products and web applications.
Variables for colors, spacing, radii, and typography
Auto Layout on every component
Light and dark themes built into the variable system
Responsive variants from mobile to desktop
Pricing: Try our free version of Untitled UI, with basic styles and components.
Why it works: this is what a professionally built design system looks like. The layer naming alone is worth studying. If you’re building a design system in Figma, Untitled UI is the benchmark.
Figma components that match the wildly popular shadcn/ui code library. Best for React/Next.js teams that want their design file and codebase to speak the same language.
Components map 1:1 to the shadcn/ui React components
Tailwind CSS token values built into the Figma Variables
Minimal, clean aesthetic that serves as a foundation, not a finished product
Pricing: free (community maintained).
Why it works: if your developers use shadcn/ui (and in 2026, many do), this eliminates the translation gap between design and code. What you name in Figma is what they import in their editor.
Official Ant Design component library for Figma. Best for teams building with Ant Design in React.
Comprehensive component coverage matching the Ant Design code library
Variables and Auto Layout throughout
Enterprise-friendly: data tables, complex forms, navigation patterns
Pricing: free starter. Full kit premium.
Why it works: Ant Design powers a significant chunk of enterprise products. Having the Figma library match the code library exactly saves hours of handoff confusion.
Modern design system with a focus on dark themes and contemporary aesthetics. Best for modern web applications and SaaS products with a premium feel.
Dark and light themes with full variable support
Clean, contemporary component style
Dashboard and data visualization components included
Pricing: premium.
Why it works: most UI kits default to light themes and add dark mode as an afterthought. Glow is built dark-first, which makes its dark theme feel native rather than inverted.
Platform-Specific UI Kits
For native app design, you need components that match platform conventions exactly.
Google’s official Material Design 3 Figma library. Best for Android app design and any product following Material conventions.
Full M3 component set with token-based theming
Dynamic Color support
Variables for all design tokens
Pricing: free.
Why it works: Material 3’s token system is well-designed and the Figma implementation is maintained by Google’s design team. For Android projects, this is the starting point.
Dashboard and Admin UI Kits
Dashboards have specific component needs: data tables, charts, metrics cards, filter systems, and dense information layouts.
Clean dashboard design system with comprehensive data visualization components. Best for analytics platforms, admin panels, and B2B SaaS dashboards.
Chart components (bar, line, pie, area, treemap)
Data table variants with sorting, filtering, and pagination
Metric cards, KPI displays, and status indicators
Dark and light themes
Pricing: premium.
Why it works: most general UI kits include a token data table. AlignUI includes the full spectrum of data visualization components that real dashboards need.
Dashboard-focused design system with modern aesthetics. Best for admin panels and SaaS products that need to look good while handling dense data.
300+ dashboard components
Chart and data visualization library
Multiple layout templates
Pricing: free tier. Premium for full access.
Why it works: the layout templates get you to a working dashboard design faster than building from components. If you have a demo to prepare by Friday, this helps.
SaaS and Web App Starter Kits
When you don’t need a full design system but need more than a blank canvas.
Why it works: Tailwind is everywhere in 2026. Having a Figma library that uses the same token values and naming conventions as your Tailwind config file reduces design-to-dev friction significantly.
Figma’s own starter component library. Best for learning Figma’s component architecture and starting small projects.
Basic but well-structured components
Good example of proper Auto Layout and variant setup
Free.
Why it works: it’s the official baseline. Simple, clean, and correctly built. Good for understanding how components should be structured before scaling to a larger system.
How to Choose the Right UI Kit
Building a SaaS product? Start with Untitled UI (premium) or shadcn/ui (free). Both give you a solid foundation for web applications.
Building a native iOS app? Apple’s official kit. No exceptions. Third-party iOS kits almost always drift from Apple’s actual components.
Building for Android? Material 3. Same logic. Use the official source.
Building a dashboard? AlignUI or Horizon UI. General-purpose kits don’t have the data visualization components dashboards require.
Using Tailwind? Flowbite matches Tailwind’s token system. The design-code parity is the entire value.
Using a specific React framework (shadcn, Chakra, Mantine)? Use the matching Figma kit. Framework parity beats generic design quality.
Budget is zero? shadcn/ui, Material 3, Apple iOS kit, or the official Figma starter. All free. All properly built.
One principle: match your UI kit to your tech stack. A beautiful Figma kit that doesn’t match your code components creates translation work that erases whatever time the kit saved you.
Key Patterns
After testing dozens of UI kits, a few things are clear:
Variables are now mandatory. Any UI kit that still uses static color styles instead of Figma Variables is already outdated. Theme switching, mode support, and token-based customization depend on Variables. If a kit doesn’t use them, it will cost you more time than it saves.
Framework-specific kits are winning. The biggest shift in 2026 is UI kits designed to match specific code frameworks (shadcn, Tailwind, Chakra, Ant Design). Generic “pretty” kits lose to framework-matched kits because the design-code translation step disappears.
Free kits got surprisingly good. shadcn/ui, Material 3, and Apple’s official kits are free and well-maintained. The gap between free and premium narrowed. Premium kits justify their cost through depth (more components, more variants, more patterns), not through basic quality.
Dark mode is a system, not a theme. The best kits (Untitled UI, Glow, AlignUI) treat dark mode as a full variable mode with its own contrast ratios, elevation values, and color mappings. Kits that just invert colors produce bad dark modes.
Documentation matters. A UI kit without documentation on how to customize tokens, swap themes, or extend components is a liability. The best kits include setup guides, naming conventions, and usage guidelines. If you have to reverse-engineer the structure, it’s not saving you time.
Discover more design systems, kits, and tools on Muzli. Curated daily for designers who build.
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A community-driven conference site that turns a simple event page into a playful physics-based experience. Motion, interaction, and bold visual rhythm create energy without sacrificing clarity.
A high-impact digital experience with a cyberpunk aesthetic and sharp typographic control. Strong interaction patterns and contrast-heavy visuals make it feel like a designed universe rather than a standard website.
An independent organization managing distributed spaces and developing physical and digital products. The site features a typographic-driven experience with complex parallax animations and an unconventional navigation system that emphasizes the connection between material and local context.
A restrained studio site that uses space, grid, and imagery with confidence. Minimal interface elements let the work take center stage while maintaining a strong architectural presence.
A node-based interface design for an AI-driven animation tool. The layout combines a visual prompt builder with a real-time 3D preview, allowing designers to control character movement, mood, and style through a structured, dark-mode workspace.
An eCommerce platform for a fashion brand featuring a modern gothic collection. The interface integrates cinematic editorial photography with a clean product grid, dominant typography, and minimalist navigation anchored to the corners of the screen.
A landing page for a cybersecurity platform featuring a futuristic design with a dark background and green matrix-style effects. The interface includes information cards with rounded corners, wide typography in white and neon green, and a navigation system based on vertical scrolling through content sections such as podcasts, code libraries, and certification programs.
A minimal art direction portfolio that focuses on image selection and editorial structure. Strong typography and thoughtful composition keep the presentation clean and confident.
A comprehensive review of essential Figma plugins for the upcoming year, focusing on AI-driven automation, design system management, and developer handoff enhancements. The article highlights tools selected for their ability to reduce repetitive manual tasks within the design workflow.
A curated collection of high-quality, royalty-free illustration libraries available for commercial and personal use. The guide categorizes resources by style, ranging from 3D and hand-drawn to flat vector graphics — to help designers find assets that match specific project aesthetics.
A mesh gradient design tool that allows users to create complex color transitions using movable control points. The interface includes options for adjusting blur levels, exporting high-resolution PNG files, and applying grain textures to add visual depth.
A modern take on blackletter typography designed for bold display use. Perfect for branding, posters, and statement headlines that need personality and weight.
TITARVL is a minimal portfolio template for showcasing digital design, branding, and UI/UX work. Ideal for designers, creative directors, studios, and agencies seeking a clean, type-driven, and modern presentation for personal or client projects.
is a visually immersive 3D project that blurs the line between imagination and reality. Through cinematic lighting and meticulous detail, it presents a series of striking digital worlds that invite exploration and spark curiosity.
features a sleek, futuristic web design built around bold typography, dark aesthetics, and high-impact visuals. Smooth transitions, structured layouts, and subtle motion create a polished, tech-forward experience that reflects the scale and sophistication of modern AI infrastructure.
presents a bold, personality-driven fintech website with vibrant gradients, oversized typography, and playful illustrations that reflect its conversational AI brand. Dynamic layouts, punchy copy, and smooth interactions create an energetic, app-like experience that feels more like chatting with a character than browsing a traditional finance site.
Riley Adkisson’s portfolio transforms a personal website into a nostalgic pixel-art adventure game. Retro visuals, character animations, and level-style navigation create an interactive experience where exploring the designer’s work feels like progressing through a side-scrolling world rather than browsing a traditional portfolio..
is presented as a full-scope brand and product case study, highlighting the strategic thinking behind a fintech identity from concept to execution. The work explores how bold visual language, confident typography, and restrained color usage can reshape perceptions of finance, positioning the brand as modern, approachable, and distinct within a crowded market.
Directionless delivers an experimental, mood-driven web experience that feels more like navigating a digital art piece than a conventional site. Distorted layouts, unconventional typography, and layered visuals create a sense of intentional chaos, encouraging exploration over structure and reinforcing the project’s theme of uncertainty and creative freedom
Make–Believe Studio presents a craft-focused portfolio site built around strong typography, precise spacing, and a clean grid that lets the work take center stage. A restrained dark palette, sharp imagery, and confident layouts create a premium, editorial feel, while subtle motion and structured sections reinforce a sense of clarity, discipline, and product-level polish.
presents a forward-thinking brand language built to express intelligence, scalability, and control. Structured forms, flowing trajectories, and modular compositions visualize how a system can grow dynamically while remaining organized, translating complex automation into a clear and compelling visual narrative.
A step-by-step breakdown of how to structure, document, and scale a real-world design system in Figma. Covers components, variables, tokens, naming logic, and how to keep things usable as teams grow.
A curated list of free icon libraries that are actually usable in real product work. Covers consistency, style systems, and where each set fits best in modern UI.
Inspector helps designers and product teams analyze live websites and extract structured UI data in seconds. Instead of manually auditing layouts and components, you can inspect real products and turn them into usable design references.
A premium Framer template built for service-based businesses, branding studios, and marketing/design agencies. Designed to create a clean, modern presence that turns visitors into leads and clients.
A practical guide to building your personal brand as a designer in 2026. No hashtag strategies. No influencer playbooks. Just a system that works without making you hate yourself.
Let’s get the uncomfortable part out of the way. Most personal branding advice is terrible. It’s written by people whose entire personal brand is “giving personal branding advice.” It involves posting daily, building an “audience,” and using words like “thought leader” without irony. If that makes your skin crawl, good. You’re the target audience for this article.
Here’s the thing though: the concept behind personal branding is sound. It’s just been hijacked by LinkedIn gurus. Stripped to its core, personal branding is this: when someone mentions your name in a Slack channel, what do the people who’ve never met you think? That’s your brand. You already have one. The question is whether you’re shaping it intentionally or letting it form by accident.
For designers specifically, this matters more than ever. The 2026 job market is competitive. Freelance clients have options. Conference organizers have options. The designers who get opportunities aren’t always the most talented. They’re the ones people think of first. That’s not a talent problem. It’s a visibility problem. And it’s solvable without becoming someone you’d unfollow.
Why Designers Need a Brand (Not Just a Portfolio)
Your portfolio shows your work. Your brand shows your thinking.
A portfolio is reactive. Someone searches, finds you, reviews your cases studies. That’s a job application model. It depends on being discovered at the exact moment someone is looking.
A brand is proactive. It creates familiarity before anyone needs to hire you. When a design director hears your name, they already have an impression: “She’s the one who writes those sharp critiques of SaaS onboarding flows” or “He’s the design systems person who posts those Figma teardowns.” That impression was built over time, not in a single portfolio visit.
We covered this territory in Beyond the Pixel, exploring why your portfolio needs more than great work. This article picks up where that one left off, with the practical system for building visibility without losing your integrity.
The gap between “great designer with no presence” and “good designer with strong presence” usually favors the second person. Not because the world is unfair (it is, but that’s not the point). Because people hire, recommend, and collaborate with people they feel they already know.
The DNA Framework: What Makes You Recognizable
Personal branding for designers breaks down into three elements. Call it the DNA Framework:
D: Design Philosophy. What do you believe about design that not everyone agrees with? This isn’t your bio (“I’m passionate about creating meaningful experiences”). It’s your actual point of view. “I think most design systems are over-engineered.” “I believe prototyping in code is faster than prototyping in Figma for most teams.” “I think designers should own their product metrics, not just their mockups.” A philosophy gives people something to agree or disagree with. Both responses build recognition.
N: Niche Focus. What’s the specific domain or skill where you go deeper than most? “UX design” is not a niche. “Enterprise data visualization for financial products” is. “Mobile design” is not a niche. “Gesture-based navigation patterns for health apps” is. Niche doesn’t mean narrow. It means specific enough that when someone has that exact problem, your name comes up.
A: Artifacts You Produce. What do you put into the world beyond client work? Artifacts are the evidence of your thinking. They can be LinkedIn posts, case study breakdowns, Figma community files, short tutorials, conference talks, or even well-crafted replies in design communities. The format matters less than the consistency. One artifact per week, every week, for six months will build more recognition than a viral post that people forget in 48 hours.
Most designers have strong D. Some have clear N. Almost none produce regular A. That’s the bottleneck.
Platform Strategy: Where to Show Up (And Where Not To)
The biggest personal branding mistake designers make is trying to be everywhere. You don’t need to be everywhere. You need to be consistent somewhere.
LinkedIn: Yes, seriously. The design community’s relationship with LinkedIn is complicated. The platform feels corporate. The content can be performative. But in 2026, it’s where hiring managers, recruiters, and potential collaborators actually spend time. A well-crafted LinkedIn post about a design decision you made reaches more relevant people than a polished Dribbble shot. Focus on: process breakdowns, tool opinions, lessons from real projects, short design critiques. Skip: motivational quotes, “I’m humbled to announce” posts, anything with the word “journey.”
Your personal site. Non-negotiable. Not just as a portfolio, but as a home base that connects everything. Your site should answer: who are you, what do you care about, what’s your work, how to reach you. Keep it simple. Update it quarterly, not daily. The best designer personal sites in 2026 feel like a well-organized room, not a content platform.
Twitter/X: Optional but powerful. If you enjoy short-form, opinionated writing, Twitter is where design conversations happen in real time. The format rewards sharp takes, quick reactions to new tools or trends, and genuine engagement with other designers. If you don’t enjoy it, don’t force it. A miserable Twitter presence is worse than no Twitter presence.
Dribbble/Behance: Declining for brand-building. These platforms still work for discovery (someone searching for “dashboard design” might find your work). But they’re not where relationships form. If you’re actively looking for freelance clients or agency work, keep your profiles updated. If you’re building a long-term brand, invest that time in LinkedIn or your own site instead.
Substack/Medium: If you write long-form. If you enjoy writing 1,000+ word articles about design, these platforms give you distribution. But writing is a commitment. A blog with three posts from 2024 looks worse than no blog at all. Only start if you can commit to at least two pieces per month for six months.
The rule: pick two platforms. One primary (where you create), one secondary (where you engage). Do those two well for a year before adding a third.
Content That Builds Authority (Without Sounding Like a Thought Leader)
The word “content” makes designers cringe because it implies performing for an audience. Reframe it: content is just sharing your thinking in public. You do this in Slack channels and team meetings every day. The only difference is writing it down for a wider audience.
Five content formats that work for designers:
1. Process breakdowns. Take a design decision you made this week and explain your reasoning. Not the whole project. One decision. “We chose a bottom sheet over a modal for this settings panel, and here’s why.” This takes 15 minutes to write and demonstrates real-world judgment.
2. Tool opinions. “I switched from X to Y and here’s what happened.” Designers love hearing how other designers work. These posts get engagement because everyone has an opinion about tools. Be honest. Say what didn’t work too.
3. Design critiques. Pick a public product (an app, a website, a feature launch) and break down what works and what doesn’t. Be specific, be fair, and always explain what you’d do differently. This shows taste and reasoning simultaneously.
4. Micro-tutorials. Quick “here’s how to do this one thing in Figma” posts. They’re useful, shareable, and position you as someone who helps others. The bar is low: a 4-image carousel showing how to set up auto layout for a specific pattern can outperform hours of written content.
5. Honest reflections. What failed this quarter. What you learned from a bad client experience. What you’d tell yourself two years ago. Vulnerability done well (specific, not performative) builds trust faster than expertise alone.
What doesn’t work: generic design “tips” that everyone already knows, hot takes with no substance, humblebrags disguised as lessons, and anything that starts with “Most designers don’t know this.”
Visual Consistency Across Platforms
You’re a designer. Your profiles should look like you care. This doesn’t mean a full brand identity with a logo and a style guide. It means coherence.
Quick wins that take less than an hour:
Same profile photo everywhere. Recent. Professional enough. Not a logo, not an avatar, not a photo from 2019.
Consistent name formatting. If you’re “Sarah Chen” on LinkedIn, don’t be “s.chen.design” on Twitter. People should recognize your name across platforms.
One color. Pick a single accent color and use it in your banner images, portfolio, and social graphics. This sounds minor. It’s not. Visual consistency across platforms creates subconscious recognition.
One typeface for graphics. When you make social posts with text overlays, use the same font. Every time. This is the cheapest brand consistency you can buy.
Bio alignment. Your one-line description should be recognizably the same everywhere, adapted for format but consistent in positioning. “Product designer specializing in complex B2B interfaces” should be the thread, not “creative thinker / pixel pusher / coffee addict” on one platform and “Senior UX Designer at Company” on another.
The goal isn’t perfection. It’s recognition. Someone who sees your LinkedIn post and then visits your portfolio should feel like they’re meeting the same person.
The Cringe Test: How to Know If You’ve Gone Too Far
Personal branding goes wrong when it stops being about your work and starts being about your brand. Here are the warning signs:
You spend more time on your LinkedIn post about a project than you spent on the project itself.
You describe yourself as a “thought leader” in your bio. (If you have to say it, you’re not one.)
You use the phrase “personal brand” in conversation with other designers. Just say “my work” or “my presence.” The terminology reveals the performance.
You optimize content for engagement metrics rather than genuine usefulness. A post that 500 people liked but nobody learned from is noise.
You avoid sharing opinions that might lose followers. If everyone agrees with everything you post, you’re not saying anything interesting.
You repost your own content with “In case you missed this.” Nobody missed it. They scrolled past it.
The litmus test: would you share this post if nobody could see how many likes it got? If yes, share it. If no, reconsider.
From Portfolio to Platform: Building Your Creative Identity
Your portfolio shows what you’ve done. Your personal brand shows how you think. But where does it all live?
The fragmentation problem is real. Your work is on your portfolio. Your opinions are on LinkedIn. Your visual style is on Dribbble. Your code experiments are on GitHub. A recruiter or potential collaborator has to visit four different URLs to understand who you are. That’s four chances for them to get distracted, lose interest, or form an incomplete picture.
This is exactly the problem that tools like Muzli Me are designed to solve: a single place where your creative identity comes together. Your work, your influences, your expertise, your point of view, all connected in one coherent profile. Think of it as the connective tissue between your portfolio, your social presence, and your professional reputation.
The principle behind it is simple: make it easy for someone to understand you. The easier you are to understand, the more likely you are to be remembered. And being remembered is the entire point of having a personal brand.
Personal branding isn’t about being loud. It’s about being findable, recognizable, and clear about what you bring to the table. Do that consistently, and the opportunities find you.
Discover more design career resources and build your creative identity at Muzli
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A practical accessibility checklist for UI designers in 2026. No theory lectures. Real checks you can run on your designs today, organized by what matters most.
Accessibility guidelines were written for auditors. This article is written for designers.
The WCAG documentation is 150+ pages of criteria, exceptions, and conformance levels. Most designers read the first three paragraphs, feel overwhelmed, and go back to designing without thinking about it. That’s not a character flaw. It’s a documentation failure. The information exists, but it’s buried under a vocabulary that assumes you already know what “programmatically determined” means.
Here’s the reality: you don’t need to memorize WCAG to design accessible interfaces. You need a checklist that covers the 20 things that catch 90% of accessibility issues. That’s what this article is. Run through it once per project, and you’ll be ahead of most designers and most products shipping today.
Why 2026 Is the Year This Becomes Non-Negotiable
Two things happened that changed the math.
First, the legal landscape tightened. The US Department of Justice finalized rules requiring WCAG 2.1 Level AA compliance for state and local government websites by April 2026. The European Accessibility Act takes full effect in June 2025, affecting any digital product sold in the EU. Private lawsuits haven’t slowed either. Over 4,000 ADA-related digital accessibility lawsuits were filed in 2025. If your company serves the public, accessibility is no longer optional.
Second, the tools got better. Figma plugins like Stark and axe for Designers can catch contrast failures, missing labels, and focus order issues in seconds. Two years ago, accessibility testing required dedicated QA time. Now you can check the basics without leaving your design file.
The standard to aim for: WCAG 2.1 Level AA. Not AAA (that’s aspirational for most teams). Not 2.0 (that’s outdated). 2.1 AA is the legal and practical baseline in 2026.
Color and Contrast: The Foundation
Color contrast is the most common accessibility failure on the web. It’s also the easiest to fix.
The rules:
✓ Normal text (under 18px or under 14px bold): minimum 4.5:1 contrast ratio against background
✓ Large text (18px+ or 14px+ bold): minimum 3:1 contrast ratio
✓ UI components (buttons, inputs, icons that convey meaning): minimum 3:1 contrast ratio against adjacent colors
✓ Focus indicators: minimum 3:1 contrast against the background they appear on
✓ Never use color as the only way to convey information (red for error, green for success). Always pair with text, icons, or patterns
The context most designers miss: 8% of men and 0.5% of women have some form of color vision deficiency. That’s not a small edge case. In a product with 100,000 users, roughly 4,000 of them see your color choices differently than you do. Red/green color blindness is most common, which means your red error states and green success states look identical to a significant portion of your users.
How to check: Install Stark or Contrast in Figma. Run a contrast check on every text/background combination in your design. It takes five minutes. For a deeper look at color tools and accessible palette generators, check our color palette tools guide.
Quick fix that handles most cases: Build your color system with accessibility baked in. Define your grays, backgrounds, and text colors with contrast ratios verified from the start. If the system is accessible, every component using it is automatically accessible.
Typography and Readability
Bad typography isn’t just ugly. It’s exclusionary.
The rules:
✓ Body text: minimum 16px. Not 14px. Not 12px. 16px is the floor for comfortable reading on screens
✓ Line height: minimum 1.5x the font size for body text. Tighter line heights are acceptable for headings only
✓ Line width: maximum 80 characters per line (roughly 600–700px for body text). Lines wider than this cause tracking errors when the reader’s eye jumps back to the next line
✓ Paragraph spacing: at least 1.5x the line height between paragraphs. Dense text walls discourage reading
✓ No all-caps for sentences or paragraphs. All-caps is acceptable for short labels (buttons, tabs, badges) but reduces reading speed by 13–20% for longer text
✓ Font choice: avoid decorative fonts for body text. Choose typefaces with clear letterform distinction (easy to tell I/l/1 apart, clear difference between O/0)
The context: 15% of the global population has some form of dyslexia. Readable typography isn’t just a design preference. The combination of adequate size, generous spacing, and clear typefaces makes text accessible to the broadest possible audience.
How to check: Read your designs on an actual phone. Not a Figma preview on your 27-inch monitor. If you squint at any text on a phone screen, it’s too small or too tight.
Interactive Elements: Buttons, Links, Forms
This is where accessibility failures hurt the most, because inaccessible interactive elements mean users literally cannot complete tasks.
The rules:
✓ Touch targets: minimum 44×44px. This applies to buttons, links, icons, toggle switches, and any tappable element. 24×24px icons are fine visually, but the tappable area around them must be at least 44×44px
✓ Focus states: every interactive element must have a visible focus indicator. The default browser outline works. A custom focus state works better. No focus state at all fails accessibility
✓ Form labels: always visible. Never use placeholder text as the only label
✓ Error messages: specific and actionable. “Something went wrong” is not accessible. “Email address must include an @ symbol” is
✓ Error identification: connect error messages to the specific field
✓ Link text: descriptive. “Click here” tells screen reader users nothing. “Read our accessibility guide” tells them everything
✓ Button labels: describe the action. “Submit your application” is clearer than “Go”
The context: 2.5% of the global population has significant motor impairments that affect how they interact with touch screens and pointing devices. Small touch targets, imprecise hit areas, and tiny close buttons aren’t just annoying for everyone. They’re barriers for people with tremors, limited dexterity, or alternative input devices.
How to check: Navigate your entire design using only Tab, Enter, Escape, and Arrow keys. Can you reach every interactive element? Can you see where focus is at all times? Can you complete every task? If not, those are accessibility failures.
Motion and Animation
Animation is a design tool, not a decoration. When it’s used without restraint, it becomes an accessibility hazard.
The rules:
✓ Respect the prefers-reduced-motion system setting. Users who turn on “reduce motion” in their OS settings have a reason. Your animation preferences don’t override theirs.
✓ No auto-playing video with sound. Ever. Auto-play without sound is acceptable if there’s a visible pause control.
✓ Nothing flashes more than 3 times per second. This is a seizure risk for people with photosensitive epilepsy. It’s not a guideline. It’s a medical safety requirement.
✓ Provide pause, stop, or hide controls for any content that moves, blinks, or scrolls automatically (carousels, ticker tapes, animated backgrounds).
✓ Animations should be less than 5 seconds or have user control. Infinite loops without a stop mechanism are disorienting for users with vestibular disorders.
The context: Approximately 5% of adults experience vestibular disorders (dizziness, nausea, or disorientation from visual motion). Parallax scrolling, zoom transitions, and sliding panels that move fast enough can trigger physical symptoms. This isn’t about preference. It’s about preventing harm.
How to check: Turn on “reduce motion” in your OS accessibility settings and use your product. Does everything still work? Is information still conveyed? If an animation carries meaning (not just decoration), make sure that meaning is preserved when the animation is disabled.
Navigation and Structure
Good structure is invisible when it works. When it doesn’t, users get lost.
The rules:
✓ Heading hierarchy: H1, then H2s, then H3s. Never skip levels (don’t jump from H1 to H3). Screen readers use headings as a navigation shortcut. Broken hierarchy breaks that shortcut.
✓ Keyboard navigation: every interactive element reachable via keyboard in a logical order. Tab moves forward, Shift+Tab moves backward. The focus order should match the visual reading order.
✓ Skip navigation: a “Skip to main content” link at the top of the page that lets keyboard users bypass repeated navigation. It can be visually hidden until focused.
✓ Consistent navigation patterns: the main navigation should be in the same position on every page. If a feature exists in the header on one page, it should be in the header on every page.
✓ Breadcrumbs: for sites with more than two levels of hierarchy, breadcrumbs help users understand and navigate the structure.
✓ Page titles: every page needs a unique, descriptive title. “Dashboard” is better than “Home.” “Order History: Last 30 Days” is better than “Page 2.”
How to check: Use your product with a screen reader for five minutes. On Mac, turn on VoiceOver (Cmd + F5). Navigate through your page. Do the headings make sense in order? Can you find the main content quickly? Is the focus order logical? Five minutes of screen reader testing reveals more accessibility issues than an hour of visual inspection.
Testing Your Designs (Without Being an Expert)
You don’t need to be an accessibility specialist. You need to run five tests.
Test 1: Contrast check. Install Stark or Contrast in Figma. Run it on your design. Fix everything that fails AA. Time: 5 minutes.
Test 2: Keyboard navigation. Tab through your live interface (or prototype). Can you reach everything? Can you see where you are? Can you go back? Time: 10 minutes.
Test 3: Screen reader scan. Turn on VoiceOver (Mac) or TalkBack (Android). Listen to your page being read aloud. Does it make sense? Are images described? Are buttons labeled? Time: 10 minutes.
Test 4: Zoom to 200%. In your browser, zoom to 200%. Does the layout break? Is text still readable? Can you still use the navigation? WCAG requires content to be usable at 200% zoom. Time: 3 minutes.
Test 5: The squint test. Squint at your design until it’s blurry. Can you still see the visual hierarchy? Can you distinguish primary actions from secondary ones? If everything blurs into the same level of visual weight, your hierarchy isn’t strong enough for users with low vision. Time: 1 minute.
Total testing time: under 30 minutes. That’s less time than most designers spend choosing a hero image.
The Quick-Start Checklist
Bookmark this. Run through it before every handoff.
Color and Contrast:
All body text meets 4.5:1 contrast ratio
All large text meets 3:1 contrast ratio
All UI components meet 3:1 contrast ratio
Color is never the only indicator of meaning
Color blindness simulation reviewed
Typography:
Body text is 16px minimum
Line height is 1.5x minimum
Line width is 80 characters maximum
No all-caps paragraphs
Interactive Elements:
All touch targets are 44x44px minimum
All elements have visible focus states
All form fields have visible labels (not just placeholders)
Error messages are specific and next to the field
Link text is descriptive
Motion:
prefers-reduced-motion is respected
No content flashes more than 3 times per second
All auto-playing content has pause controls
Navigation:
Heading hierarchy is logical (no skipped levels)
Keyboard navigation works in logical order
Skip-to-content link exists
Page titles are unique and descriptive
Testing:
Contrast check passed
Keyboard navigation tested
Screen reader scan completed
200% zoom tested
Common Pitfalls (What Designers Get Wrong)
Even well-intentioned designers make these mistakes:
Modal dialogs that trap focus. When a modal opens, focus should move to it. When it closes, focus should return to the element that opened it. Broken focus trapping means keyboard users can get stuck behind an invisible wall.
Infinite scroll without keyboard access. If new content loads as the user scrolls, keyboard users need a way to reach that content too. Provide a “Load more” button as a keyboard-accessible alternative.
Custom components without ARIA labels. If you build a custom dropdown, slider, or toggle, it needs ARIA roles and labels to be readable by assistive technology. Native HTML elements come with accessibility built in. Custom ones don’t.
Icons without text labels. A magnifying glass icon means “search” to sighted users. To a screen reader, it’s nothing unless it has an aria-label. Every icon that functions as a button needs a text alternative.
Hiding content visually but not from screen readers (or vice versa).display: none hides from everyone. visibility: hidden hides from everyone. .sr-only (visually hidden but screen-reader accessible) is what you want for text alternatives.
Assuming hover states are enough. Hover doesn’t exist on touch devices. Every hover interaction needs a tap-based equivalent.
Forgetting about dark mode contrast. Your light theme passes contrast checks. Does your dark theme? Check both.
Accessibility isn’t a feature you add at the end. It’s a quality standard you maintain from the start. The checklist above takes 30 minutes to run. The cost of fixing accessibility issues after launch takes weeks.
Start with the checklist. Run it once. Fix what fails. Then do it again on the next project. That’s how accessibility becomes a habit, not a project.
Machine Zero frames a cutting-edge creative studio with a high-contrast “techno-noir” aesthetic, utilizing sharp grid layouts and fluid motion graphics. The site balances raw industrial typography with immersive generative visuals, ensuring the studio’s mastery over light and code remains the focal point.
MoMoney frames a finance product with warm neutrals, rounded UI blocks, and friendly illustration accents. The page balances metrics and narrative so the product story stays clear.
AI Chats 2 frames a futuristic AI interface with a deep dark-mode aesthetic, neon typography, and fluid light-based micro-interactions. The design balances a structured layout with dynamic generative accents, ensuring the dialogue between human and machine feels immersive, intelligent, and technologically advanced.
The Pirate’s Debt frames a quirky narrative world with a “paper-cutout” 2D aesthetic set in a 3D space, featuring a bold, hand-drawn pirate protagonist and a muted, nostalgic palette. The design balances dark humor with a playful, illustrative UI, ensuring the satirical story of debt and the pirate’s expressive journey take center stage.
A WebGL gallery that arranges imagery in a sci-fi tunnel, letting depth and motion do the storytelling. The effect is immersive yet controlled, with a restrained palette and clean navigation.
Agence Foudre frames a vibrant social media agency with a bold, typographic-led “one-page” aesthetic, characterized by eclectic color transitions and a human-centric layout. The design balances playful audio-visual snippets with high-energy transitions, ensuring the agency’s creative sincerity and dynamic content production remain the driving force.
Bogdan Kolomiyets frames a sophisticated design portfolio with a sleek, high-contrast dark mode aesthetic, utilizing bold editorial typography and smooth parallax transitions. The page balances grand visual showcases with precise minimalist layouts, ensuring the designer’s signature style and creative range remain the focal point.
A narrative-driven brand system crafted for “The New Story of Wholeness,” turning integrative worldviews into a scalable identity across platform and web app experiences.
Claude Code to Figma: How the New Code-to-Canvas Integration Works A practical breakdown of how the new code-to-canvas integration bridges the gap between AI-driven logic and visual design. Essential for teams looking to streamline their workflow by transforming Claude’s code directly into editable Figma components.
Monowi provides over 100 structured design challenges to help UI/UX designers sharpen their skills and build a standout portfolio. It is perfect for designers looking to bridge the gap between theory and real-world product solutions.
Flixier offers browser-based video editing aimed at quick cuts and social formats. It is useful for designers who need lightweight editing without a heavy desktop setup.
Lanes frames a high-end portfolio with a refined “linear” aesthetic, utilizing sleek horizontal scrolling and minimalist grid structures. The template balances elegant typography with expansive white space, ensuring that creative projects feel both structured and sophisticated within a seamless, cinematic flow.
Claude Code to Canvas is a Figma integration that converts Claude-generated UI code into editable Figma frames, announced February 2026. It works by screenshotting a running Claude Code UI, then using AI to reconstruct the layout as native Figma layers, components, and auto-layout groups.
Claude Code to Figma (officially called “Code to Canvas”) is a new integration between Anthropic’s Claude Code and the Figma design canvas. Announced on February 17, 2026, it lets developers, designers, and product teams capture a functioning UI built with Claude Code and convert it into a fully editable Figma frame. Not a screenshot. Not a flattened image. A real design artifact that teams can manipulate, annotate, and iterate on.
For years, the design-to-code pipeline moved in one direction. Designers handed off. Engineers interpreted. Context got lost somewhere in between. This integration opens the reverse direction, and it changes how teams evaluate AI-generated interfaces.
What Is Claude Code to Figma? (And Why It Matters Now)
AI coding tools have made it trivially easy to go from idea to working prototype. Claude Code, Cursor, Windsurf. You describe what you want, and you get a functioning interface in minutes. The bottleneck moved. It is no longer “how do we build this?” It is “how do we decide which version to ship?”
That decision process lives on the canvas. It lives in Figma, where teams compare options side by side, leave comments, and align before committing to a direction. Until now, there was no clean way to bring a coded prototype back into that decision space.
Figma’s partnership with Anthropic addresses exactly this gap. The question is no longer whether AI can build interfaces. It is whether teams can evaluate and refine what AI builds, together, in a shared space.
How Code to Canvas Works: The Step-by-Step Workflow
The core workflow has four steps:
Build or iterate on a UI using Claude Code. Local dev server, staging environment, production. Anything running in a browser.
Capture the screen. The integration grabs the live browser state and converts it into a Figma-compatible frame.
Paste into Figma. The captured screen lands on your canvas as an editable design artifact. Not a flat image. A real frame.
Collaborate. Your team annotates, duplicates, rearranges, and compares options directly on the canvas. No code access required.
The power is in multi-screen sessions. You can capture an entire flow (onboarding, checkout, settings) and lay it out on the canvas in a single session, preserving sequence and context. Duplicate frames, test structural changes, compare alternatives. Rejected ideas stay visible for future reference. The canvas becomes a decision-making space for AI-generated interfaces.
Setting Up the Figma MCP Server with Claude Code
The integration runs on Figma’s MCP (Model Context Protocol) Server. MCP is an open standard that allows AI tools to connect with external data sources and applications. Think of it as a universal adapter between Claude Code and Figma’s design environment.
Setup takes three steps:
Enable the MCP server. Open Figma desktop app preferences, turn on “Dev Mode MCP Server.” It runs locally at http://127.0.0.1:3845/sse.
Connect Claude Code. Run a single terminal command: claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
Start working. Reference Figma designs by selecting frames directly in the desktop app, or paste design links into Claude Code prompts.
Requirements: Figma desktop app (not the browser version), a Figma Dev or Full seat, and Claude Code installed via npm.
Step 1: Enable the MCP server in Figma
Open the Figma desktop app. Go to Preferences (Cmd + , on Mac), find the Dev Mode MCP Server toggle, and turn it on. Figma starts a local server at http://127.0.0.1:3845. You will see a confirmation notification. The server only runs while Figma is open, so leave it running during your session.
Step 2: Connect Claude Code to the Figma MCP server
In your terminal, run: claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
Verify the connection with: claude mcp list
You should see figma-dev-mode-mcp-server listed as active. If it shows as disconnected, confirm the Figma desktop app is open and the MCP toggle is still on.
Step 3: Select a frame in Figma and reference it in Claude
In Figma, select the frame or component you want to work with. Right-click and copy the link (Cmd + L). In your Claude Code session, paste the link directly into your prompt:
“Look at this Figma frame [paste link] and build the card component as a React component using Tailwind.”
Claude reads the frame’s structure, properties, and layout via the MCP connection and generates code that reflects your actual design rather than a generic interpretation.
Step 4: Capture a running UI back to Figma
Once Claude has built or modified a component, run your local dev server and open the UI in a browser. Use the Figma “Code to Canvas” capture button (available in the Figma desktop app toolbar when Dev Mode is active) to screenshot the live state. The captured frame lands on your canvas as an editable layer group, not a flat image.
What to expect: The first capture is the slowest. Figma reconstructs layers from the screenshot using AI inference, which takes 10 to 30 seconds depending on complexity. Subsequent captures are faster.
Once connected, the pipeline flows both ways. You can push code into Figma, and you can pull design context into Claude Code. The MCP server does not just pass screenshots. It reads components, variables, styles, and layout structure. Claude understands your design system semantically.
Claude Code to Figma vs. Figma Make vs. Figma MCP: What Is the Difference?
These three tools serve different purposes within the same ecosystem. Here is how they compare:
Claude Code to Figma (Code to Canvas)
Figma Make
Figma MCP Server
Direction
Code to design
Text/design to code
Bidirectional context layer
Starting point
A working UI in a browser
A prompt or an existing design
Any Figma frame or Claude Code session
Output
Editable Figma frames
Front-end code or prototype
Structured design context for AI tools
Primary user
Developers, technical designers
Designers, non-technical users
Both, as infrastructure
Best for
Bringing AI-built prototypes back to the canvas for team review
Generating code directly from designs or natural language
Connecting design systems to AI coding tools
Figma positioned these as complementary: different starting points, same destination. Figma Make is more accessible to non-engineers. Claude Code to Figma is faster for teams already building full working web apps in the terminal.
What Designers Can Do (Without Writing Code)
Once a coded UI lands on the Figma canvas, designers work in their native environment:
Side-by-side comparison. Place multiple AI-generated variants next to each other. Spot patterns, gaps, and inconsistencies across flows.
Structural exploration. Duplicate frames, rearrange steps, test layout changes. No code required to explore a different information hierarchy.
Annotation and feedback. Leave comments on actual built interfaces, not approximations. PMs, designers, and engineers react to the same artifact at the same fidelity.
Design system alignment. Check whether the AI-generated UI matches your existing components, tokens, and patterns. Flag inconsistencies before they reach production.
The designer’s role shifts. When AI generates five variants in minutes, the bottleneck is choosing. The canvas is where choosing happens.
Canvas to Code: The Return Trip
The reverse direction matters just as much. Select a frame in Figma, prompt Claude Code with a link to it, and Claude generates production-ready code that respects your design system. It reads your components, tokens, and Tailwind variables. Not a rough approximation. Actual code that matches your system.
This creates a true round-trip workflow:
Design in Figma > Generate code with Claude > Capture working UI back to Figma > Refine on canvas > Push updates back to code
Each cycle preserves context. Nothing gets lost in translation because the same system of record (MCP) connects both environments. For teams working with AI design tools, this is the closest thing to a closed loop between design and development.
Code to Canvas solved how AI-generated UI gets into Figma. But that was just the first step. Now Figma is taking it further, letting AI agents work directly inside the canvas itself.
This integration changes real workflows, but it comes with constraints worth knowing before you commit to it.
Terminal-first workflow Claude Code lives in the command line. Designers unfamiliar with terminal tools will need engineering support for the setup phase, or a brief onboarding session to get comfortable with the 3 commands they will use
repeatedly. Workaround: document your team’s 5 most-used commands in a shared Notion doc. Most designers are productive after one pairing session with an engineer.
No direct visual refinement loop. Once you are back in code, adjusting padding, hover states, or spacing requires editing code manually. There is no point-and-click “push to code” from Figma yet. Workaround: use the Figma MCP reverse direction (frame link into Claude prompt) to describe visual changes in natural language. Claude translates your design intent into code changes without you touching the file directly.
Multi-screen capture is manual. Converting a full flow requires capturing each screen individually, then arranging them on the canvas yourself. Workaround: name your captures systematically before you start (“onboarding-step-1”, “onboarding-step-2”) so the canvas stays organized. Build a Figma template with pre-labeled frame slots for your most common flows.
Claude Code operates on your live codebase. Changes go into the same files engineers ship. This is not a sandbox. Workaround: run Claude Code sessions on a dedicated feature branch. Treat AI-generated code the same way you would treat any unreviewed PR. Review before merging.
Desktop app required. The MCP server runs through Figma’s desktop application, not the browser version. If your team uses Figma in-browser by default, one team member needs to run the desktop app to act as the MCP host. Workaround: designate a single “MCP workstation” per team (usually the lead designer’s machine) for capture sessions, while other team members collaborate on the resulting canvas from any device.
Token costs scale with complexity. Larger design files and multi-screen flows consume more Claude tokens. A simple component capture costs very little. A 20-screen flow with annotation requests can add up. Workaround: batch your capture sessions and limit annotation prompts to the highest-value questions. Use Claude for structural decisions; use Figma comments for small feedback.
The Workflow That Actually Works in Practice
The round-trip workflow (Figma to Claude to canvas and back) works best when you treat each direction as a distinct phase rather than a continuous loop.
Phase 1 is divergence. Start in Figma with your design intent: the layout, the component structure, the interaction model. Use the Figma MCP connection to give Claude specific, bounded instructions. “Build this card component exactly as
designed. Use Tailwind. Match the spacing tokens from the frame.” Claude produces a first pass. You capture it to canvas.
Phase 2 is evaluation. On the canvas, run your design review: does this match the system? Are the spacing values correct? Do the interactive states hold up? Annotate directly on the captured frames. Bring in your PM or a second designer. This
is where Figma earns its role: not as a source of truth for final code, but as a shared decision-making surface.
Phase 3 is convergence. Take the annotated canvas decisions back to Claude with a focused brief. “The button spacing is 4px short. The hover state is missing. The mobile breakpoint needs to collapse the grid to single column.” Claude applies
the changes. You capture the result. One more review cycle.
In most cases, two to three cycles produces a component that is closer to spec than a traditional design-to-handoff-to-interpretation pipeline. The key constraint: keep each Claude prompt scoped to a single component or a single change.
Multi-component or multi-change prompts produce harder-to-review outputs and require longer correction cycles.
For teams that have not yet adopted this workflow, the lowest-friction entry point is using the MCP connection for a single, non-critical component in your next sprint. Run one full cycle, review the result alongside your standard handoff,
and compare the output quality and time cost before committing the whole team.
What This Means for the Design-to-Dev Handoff
The bigger story is not about one feature. It is about the direction.
Design tools and coding tools are converging, not as competitors, but as parts of the same system. Figma is betting that AI does not replace the canvas. It feeds the canvas with more options, faster. The designer’s role shifts from producing artifacts to curating and refining what AI generates.
For teams already building with AI coding tools and Figma plugins, this integration removes the last major friction point: getting the work back into a shared space where everyone can contribute.
Code is powerful for converging on a solution. The canvas is powerful for diverging, exploring, and deciding. Now they are connected.
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Many designers assume that importing from Figma into Framer is seamless.
It is not magic.
Figma encourages free-form canvas thinking. Framer requires structured layout logic. If your Auto Layout setup is not clean and responsive, your imported structure will need rebuilding.
The practical workflow is simpler:
Define brand foundations and tokens in Figma.
Build responsive components directly in Framer for production use.
Use each tool for what it was designed to handle.
Prototyping: Simulation vs Production
Figma prototypes simulate user flows.
They are ideal for testing, validating, and presenting complex product behavior. They are not production outputs.
Framer interactions ship directly to production.
When you design a hover state or page transition in Framer, that interaction becomes part of the live site.
For apps, simulation is essential. For websites, production readiness matters more.
Can You Use Both?
Yes. Many teams in 2026 do.
A common hybrid workflow:
Product UI and design systems live in Figma.
Marketing sites and growth pages are built in Framer.
Brand tokens are shared between both environments.
This separation reduces friction and avoids forcing one tool into solving the wrong problem.
FAQ
Is Framer replacing Figma?
No. Framer focuses on website publishing, while Figma focuses on product design systems. Their core purposes are different.
Can you publish a website directly from Figma?
No. Figma produces design files and prototypes, not hosted production websites.
Is Framer good for SaaS product UI?
It can handle simple interfaces, but it is not built for large-scale application systems with complex state logic.
Which tool is better for startups?
If you are building the product itself, Figma is essential. If you need a marketing site live quickly, Framer is faster.
Do design leaders use both?
Yes. Many teams separate internal product systems from public-facing web publishing.
Final Verdict
Stop comparing feature lists.
Start matching tools to workflows.
Choose Figma if you are managing complexity. Choose Framer if you are removing friction.
The most effective teams in 2026 are not loyal to one tool.
They are clear about what they are building.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
The best free illustration libraries for designers in 2026. Customizable, diverse, and production-ready. Curated for consistency and usability, not just quantity.
Every landing page needs illustrations. Every onboarding flow wants them. Every empty state looks better with one. But finding free illustrations that don’t look like clip art from 2008 is harder than it should be. Most “free illustration” sites give you 30 variations of the same person pointing at a screen.
We tested these libraries against three standards: can you customize them without Illustrator, do they actually look consistent when used together, and are the licenses clear enough that you don’t need a lawyer? If the answer to any of those was no, they didn’t make the list.
Mix-and-match people illustrations by Pablo Stanley. Best for team pages, user representations, and onboarding screens that need diverse characters. Swap hairstyles, clothing, body positions, and accessories
Figma, Sketch, and InVision Studio libraries available
The modular system means you can create hundreds of unique combinations
License: Free for personal and commercial use
Why it works: The mix-and-match system means your illustrations look custom even though they’re free. Most “people” illustrations lock you into specific poses. These don’t.
Multiple artist collections with in-browser color and composition customization. Best for landing pages and marketing where you need variety across styles.
Collections from different illustrators: each has its own visual language
Customize colors, composition, and elements before downloading
SVG and PNG export
License: Free tier available. Premium for full access and commercial use without attribution.
Why it works: The variety of artist collections means you can find a style that matches your brand, not a generic “tech illustration” look.
By Freepik. Illustrated scenes with deep customization and built-in animation. Best for presentations, onboarding flows, and content that benefits from motion.
Choose a style (flat, simple, or detailed), then customize colors, elements, and background
Animated versions available as GIF or embed code
Wide topic coverage: business, technology, health, education, social
License: Free with attribution. Premium for attribution-free use.
Why it works: The animation option makes these illustrations work harder than static alternatives. An animated empty state feels more polished than a static one.
2,500+ flat and isometric illustrations. Best for business and technology contexts.
Consistent style across a massive library
Isometric style option (relatively rare among free libraries)
SVG and PNG formats
License: Free for personal and commercial use. No attribution required.
Why it works: The isometric style fills a gap. Most free illustration libraries only offer flat. If your design uses isometric elements, this is one of the few free options that works.
Surrealist hand-drawn illustrations. Best for creative agencies, art-focused projects, and brands that want to stand out from the flat illustration standard.
The largest collection of Lottie animations, including illustrated scenes. Best for micro-interactions, loading states, and any context where static illustrations feel flat.
Thousands of free Lottie animations from community contributors
Preview and customize colors directly on the site
Embed with Lottie Player (lightweight, performant)
License: Varies by animation. Check each one. Most community animations are free.
Why it works: Lottie animations are tiny (KBs, not MBs) and render as vectors. They’re the most performant way to add motion to illustrations.
877,000+ Lottie animations. Best for large-scale projects that need variety in animated assets.
Massive library with good categorization
Preview and download in Lottie JSON format
Free and premium options
License: Free tier available with attribution.
Skip if: You only need a few animations. LottieFiles is more curated for smaller needs.
How to Choose the Right Illustration Library
The decision depends on your project, not on which library has the most illustrations.
Building a SaaS landing page? Start with unDraw or Storyset. One-click color customization and wide topic coverage get you to a finished design fast.
Need character diversity and representation? Humaaans or Open Peeps. The mix-and-match systems create genuine variety.
Want a premium 3D feel on a zero budget? 3D Icons for feature sections, Shapefest for hero compositions.
Creative or art-focused project? Absurd Design for surrealist impact, Lukasz Adam for hand-drawn warmth.
Need animation without a motion designer? LottieFiles for curated quality, IconScout for volume.
Want isometric illustrations? ManyPixels is one of the only free libraries that does this well.
One rule that applies to everyone: pick one library per project. Mixing illustration styles is the visual equivalent of mixing three different fonts. Consistency matters more than variety.
After reviewing dozens of libraries, a few trends stand out:
Customization is the baseline. Libraries that don’t let you change colors are losing to libraries that do. unDraw set this standard. Now everyone follows it.
Style consistency matters more than size. A library of 200 consistent illustrations is more useful than a library of 5,000 inconsistent ones. You’ll use 10–20 illustrations per project. Quality of those 10–20 matters. Quantity of the rest doesn’t.
Animation is crossing from bonus to expectation. Storyset adding animation, LottieFiles growing its library, animated icons becoming standard. Static illustrations are still fine. Animated ones make a stronger impression.
3D illustrations became accessible. Two years ago, 3D meant hiring a 3D artist or learning Blender. Now, free libraries like 3D Icons and Shapefest make 3D viable for any project.
Licensing got clearer. MIT, CC0, and Creative Commons licenses are winning. Libraries with vague or restrictive licensing are losing users to libraries where the terms are obvious.
Discover more curated design resources on Muzli. Illustrations, icons, kits, and tools, all in one place.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A curated list of the best Figma plugins for UI/UX designers in 2026. Organized by workflow, tested in production, and filtered for plugins that actually save time.
The Figma plugin directory has over 5,000 entries. Most of them do one thing you could do manually in 30 seconds. Some of them haven’t been updated since 2023. A few of them are genuinely great.
We installed, tested, and filtered down to 16 plugins that belong in a modern design workflow. The filter was strict: does it solve a real problem, is it actively maintained, and does it work without breaking your file? If a plugin required five minutes of setup for two minutes of value, it didn’t make the list. Here’s what survived.
AI-Powered Design
This category barely existed two years ago. Now it’s the fastest-moving corner of the Figma ecosystem. These three plugins approach AI from different angles, and each one is worth knowing.
Generates complete UI screens from text prompts, with built-in predictive heatmaps that show where users will look before you test anything.
Best for: Product designers who want fast layout exploration without leaving Figma
Why it works: It doesn’t just generate screens. It layers research validation on top. Describe a dashboard, get three layout options, see predicted attention maps for each. That feedback loop used to take a week.
Skip if: You need pixel-level control from the start. Treat its output as a first draft, not a final comp.
AI wireframing that generates full-page layouts from a sitemap, with direct Webflow export.
Best for: Freelancers and agencies building marketing sites at speed
Why it works: You describe a page structure in plain English and get a wireframe with real content hierarchy. The Webflow integration means your wireframe becomes a live site without rebuilding from scratch. It collapses three steps into one.
Skip if: You’re designing complex product UIs. Relume thinks in pages, not in systems.
Converts hand-drawn sketches and screenshots into editable Figma screens.
Best for: Early-stage ideation and converting whiteboard sessions into working files
Why it works: Take a photo of a napkin sketch, drop it in, get editable layers. It’s not going to win design awards, but it eliminates the tedious step of manually rebuilding rough concepts. Acquired by Miro in 2024 and still actively developed.
Skip if: You’re a senior designer who moves faster in Figma than on paper. The translation adds a step you don’t need.
Design Tokens and Systems
If you’re building or maintaining a design system in Figma, token management is the infrastructure layer that holds everything together. These plugins handle the bridge between design decisions and code. For a deeper dive into the full process, check out our guide to building a design system in Figma
The most established token management plugin for Figma. Syncs design tokens to GitHub, GitLab, or JSONBin with full version control.
Best for: Design teams maintaining production design systems with developer handoff
Why it works: It treats tokens as data, not just styles. You define color, spacing, typography, and shadow tokens in a structured hierarchy, then push them to a Git repo where developers consume them directly. Two-way sync means changes flow in both directions. No copy-pasting hex values into Slack.
Skip if: You’re a solo designer with a small project. The setup overhead only pays off at scale.
A lighter, faster token setup tool that generates tokens from your existing Figma styles.
Best for: Designers who want token structure without the full Tokens Studio workflow
Why it works: Point it at your existing styles. It extracts and organizes them into a token-ready format in minutes. No Git integration, no complex config. Just clean token output you can hand to a developer or feed into a build pipeline.
Skip if: You need two-way sync or version control. Use Tokens Studio for that.
Exports your Figma tokens in the W3C Design Tokens specification format.
Best for: Teams adopting the W3C standard for cross-tool token interoperability
Why it works: The W3C Design Tokens spec is becoming the industry standard for how tokens are defined and shared across tools. This plugin exports your Figma tokens in that exact format. Future-proofing, essentially.
Skip if: Your team doesn’t care about spec compliance yet. It’s a standards play, not a productivity play.
Accessibility and QA
Accessibility plugins have gone from “nice to have” to “part of the workflow.” Shipping inaccessible designs in 2026 is a liability, not just bad practice. These three cover different depths of the same problem.
The most comprehensive accessibility suite for Figma. Contrast checking, vision simulation, alt text suggestions, focus order, touch target sizing, and more.
Best for: Teams that need a full accessibility audit inside Figma
Why it works: It covers WCAG 2.1 and 2.2 in a single plugin. The vision simulation alone (see your design through the eyes of someone with deuteranopia, protanopia, or low vision) changes how you think about color choices. Integrates with Jira and Linear for issue tracking.
Skip if: You only need quick contrast checks. Stark is powerful but has a learning curve and a paid tier for full features.
Free AI-powered accessibility checker built by Deque, the same team behind the axe testing engine used by developers worldwide.
Best for: Designers who want solid accessibility checking without a subscription
Why it works: It catches color contrast failures, missing labels, touch target issues, and text scaling problems. The AI suggestions are specific: not just “this fails” but “here’s what to change.” And it’s free. That matters for freelancers and small teams.
Skip if: You need the full depth of Stark’s vision simulations and WCAG 2.2 coverage. axe is excellent for fundamentals, not exhaustive audits.
A minimal, fast contrast ratio checker. Select two colors, get a pass/fail against WCAG AA and AAA.
Best for: Quick spot-checks during active design work
Why it works: No setup. No dashboard. Select foreground and background, see the ratio. It does one thing and does it instantly. When you’re iterating on color and need to verify contrast every few minutes, speed matters more than features.
Skip if: You need anything beyond contrast ratios. For broader checks, use Stark or axe.
Accessibility plugins catch issues, but they don’t replace accessible design thinking. For a practical UI accessibility checklist covering typography, interaction, motion, and navigation, see our guide to accessible interface design.
Content and Data
Placeholder content is one of those small problems that eats real time. These plugins fill your designs with realistic data so you’re not designing around “Lorem ipsum” and gray boxes.
Populates designs with realistic names, addresses, avatars, dates, and custom text strings.
Best for: Filling complex UIs (tables, user lists, profiles) with varied, realistic content
Why it works: It randomizes data intelligently. You get different names, different lengths, different avatar photos. Your design gets stress-tested with real variation instead of looking perfect with identical placeholder text. Custom strings let you add your own content sets.
Skip if: You only need photos. Use Unsplash for that.
Inserts free, high-quality stock photos directly into your Figma frames.
Best for: Quick image fills for mockups and presentations
Why it works: Search, click, done. The image lands in your selected frame at the right size. No downloading, no resizing, no attribution headaches (Unsplash license covers commercial use). It’s been around for years because it just works.
Skip if: You need editorial or brand-specific photography. Stock photos have a look. You know it when you see it.
Pulls live data from Google Sheets into Figma text layers and images.
Best for: Data-driven designs, dashboard mockups, and CMS-style content management
Why it works: Connect a spreadsheet, map columns to layers, sync. Your design updates when the data changes. For dashboard designs with 50 data points, this saves hours of manual entry. For client presentations, it means real numbers instead of made-up ones.
Skip if: You need real-time API data. This syncs on demand from Sheets, not from live endpoints.
Icons and Assets
Icon management sounds trivial until you’re searching through five different icon sets trying to find a consistent “settings” icon at 2 AM. These two plugins solve that.
Access to over 275,000 icons from 150+ open-source icon sets, searchable inside Figma.
Best for: Designers who work across projects with different icon style requirements
Why it works: One search bar, every major icon set. Material Design, Heroicons, Lucide, Tabler, Bootstrap, Phosphor, and dozens more. You search “calendar,” you see every version across every set. Pick the style that fits, drop it in. No more downloading ZIP files and importing manually.
Skip if: You’ve already committed to a single icon set. In that case, use that set’s own plugin.
A focused library of 1,500+ icons in six weights (thin, light, regular, bold, fill, duotone).
Best for: Product teams that want a single, consistent icon system with weight variation
Why it works: Six weights for every icon means you can match your typography weight. Thin icons for body text contexts, bold for navigation, fill for active states. That level of weight consistency across 1,500+ icons is rare. The duotone style is genuinely distinctive.
Skip if: You need a massive icon library. 1,500 covers most product needs, but niche categories may have gaps.
Productivity and File Health
Figma files get messy. Layers named “Frame 847,” hidden elements nobody remembers, unused styles. These two plugins keep your files workable.
Batch rename layers with sequential numbering, find-and-replace, and keyword patterns.
Best for: Cleaning up files before handoff or when layer naming has gotten out of control
Why it works: Select 200 layers, apply a naming pattern with auto-incrementing numbers, done. Regex support for power users. It turns a 30-minute manual renaming session into a 30-second operation.
Skip if: You name your layers properly as you go. (Be honest with yourself here.)
Scans and removes hidden layers, empty groups, and unused elements to reduce file size and complexity.
Best for: Large files that have accumulated cruft over months of iteration
Why it works: Figma files slow down when they’re bloated with invisible junk. Cleaner finds it, shows you what it found, and lets you remove it in bulk. The preview step matters. You see exactly what will be deleted before anything happens.
Skip if: Your files are small and well-maintained. On big team files with 50+ pages, though, this is essential.
How to Build Your Plugin Stack
Not every plugin on this list belongs in your workflow. Here’s how to think about it.
If you’re a solo product designer: Start with Stark (or axe if budget is tight), Content Reel, Iconify, and Rename It. That covers accessibility, content, assets, and file hygiene. Add an AI plugin when you’re comfortable with the basics.
If you run a design system: Tokens Studio is non-negotiable. Add W3C Export if your team is adopting the spec. Cleaner keeps your shared libraries from bloating.
If you’re a freelancer building websites: Relume for wireframing, Unsplash for imagery, Google Sheets Sync for client content. Speed is your advantage.
If you lead a design team: Stark for accessibility compliance, Tokens Studio for system consistency, Cleaner for file health. These three compound across every designer on your team.
One principle applies everywhere: install plugins one at a time. Use each one for a week before adding the next. A stack you understand beats a stack you installed.
Key Patterns
Looking across the plugins that made this list, a few trends stand out:
AI plugins are maturing fast. Two years ago, AI Figma plugins generated novelty screenshots. Now UX Pilot, Relume, and Uizard produce genuinely useful starting points. The gap between “AI output” and “shippable design” is shrinking.
Tokens are becoming infrastructure. The W3C spec, multi-platform sync, and Git-based workflows mean design tokens are no longer optional for serious teams. They’re the bridge between design and engineering.
Accessibility moved from audit to workflow. Stark, axe, and Contrast exist because accessibility checks should happen during design, not after development. The plugins that embed into your process win over the ones that require a separate review step.
File health is a scaling problem. Solo designers rarely need Cleaner or Rename It. Teams of five or more can’t survive without them. Plugin value scales with team size and file complexity.
The best plugins do one thing. Contrast checks contrast. Rename It renames layers. Unsplash inserts photos. The plugins that try to do everything tend to do nothing well. Specificity wins.
Discover more design tools and resources on Muzli. Curated daily for designers who build.
Most design systems become component graveyards. This guide shows how to build one in Figma that teams actually adopt: from tokens to theming to ship-ready components.
Here’s a pattern you’ve probably seen: a design team spends three months building a component library. It’s beautiful. The spacing is perfect. The variants are thorough. Six months later, nobody uses it. Designers detach components “because it’s faster.” Engineers build their own versions because “the Figma one doesn’t match the code.” The system exists in Figma. The product exists somewhere else.
This happens because most design system guides focus on what to build. The hard part was never building components. The hard part is building components that survive contact with real projects, real deadlines, and real people who didn’t design them.
This guide starts from the real problem.
Why Most Design Systems Fail
They fail at adoption, not at craft.
A design system succeeds when three things are true: designers use it by default (not by mandate), engineers trust it enough to not rebuild it, and it updates without breaking things. Everything else: the beautiful documentation site, the component showcase, the naming convention debate: is secondary.
The most common failure modes:
The museum problem. The system is perfect but untouchable. Making a change requires three approvals, so designers work around it instead.
The translation gap. Figma components don’t match code components. Names are different, properties are different, states are different. Two systems pretending to be one.
The coverage trap. The system tries to cover every edge case before shipping. It takes so long that the product evolves past it.
The style guide disguise. What’s called a design system is actually a color palette and a font choice. There’s no structure underneath.
If you’ve been through any of these, this guide is for you.
The Foundation Layer: Tokens Before Components
Don’t start with buttons. Start with decisions.
Design tokens are the atomic decisions that everything else is built from. Before you draw a single component, define the values that your entire system shares.
The three-tier token architecture:
Tier 1: Primitive tokens, the raw values.
These are your actual numbers and colors. They answer the question “what exists?”
color-blue-500: #0835fb
spacing-4: 16px
radius-sm: 4px
font-family-sans: Inter
You never apply these directly to designs. They’re the ingredient list.
Tier 2: Semantic tokens, the purpose layer.
These reference primitives but add meaning. They answer “how should this be used?”
color-primary: color-blue-500
color-text-muted: color-gray-400
spacing-section: spacing-8
radius-input: radius-sm
This is what you apply to designs most of the time.
Tier 3: Component tokens, the specific layer.
These reference semantic tokens and map to exact component properties. They answer “where exactly does this go?”
button-primary-bg: color-primary
input-border-color: color-border-default
card-padding: spacing-section
You only need this tier if you’re building at enterprise scale. For most teams, semantic tokens are enough.
Setting this up in Figma:
Create three Variable Collections:
Primitives, all raw color, spacing, and radius values
Semantic, purpose-driven aliases that reference primitives
Components (optional), component-specific aliases
Name them clearly. Add descriptions to every variable. Future-you will thank present-you.
Figma Variables in 2026: What Actually Changed
Figma’s variable system has grown significantly. Here’s what matters for your design system:
Extended variable types. Beyond Color and Number, you now have String for labels and paths, Boolean for toggles and states, and the new Composite type for grouped values like shadows and borders. This means fewer workarounds and more of your system lives in variables instead of loose styles.
Modes got more powerful. More modes per collection means your Light and Dark themes, brand variations, and density options can all live in one structured system. Before, you’d create separate components for each theme. Now, one component switches modes.
Variable import and export. This is the big one for teams. You can now sync tokens between Figma and your code repository. Changed a color in Figma? Export it. Your CI/CD pipeline picks up the change. This makes single source of truth an actual reality instead of a slide in a presentation.
Component Slots. These let designers customize specific areas of a component instance without detaching it. Instead of building 15 variants of a card component for different content arrangements, you build one card with slots.
AI features that help. Figma’s Check Designs catches inconsistencies, for example a text layer using Inter Regular 15px when your system defines 16px. Visual Search finds duplicate components hiding in your file. These are maintenance tools, not generation tools. They keep your system clean.
MCP integration. Figma’s Model Context Protocol lets AI tools like Claude and Cursor read your design system directly. This means code generation tools can reference your actual tokens and components, not guess at them. If you use variable fonts in your system, MCP ensures the code inherits the right font settings.
Building Components That Survive Real Projects
Three rules. Every component should follow all three.
Rule 1: Start with the states, not the default.
Most designers build the default state first, then add hover, active, disabled, error, and loading as afterthoughts. Reverse this. Map out every state a component needs before you design any of them. If you start with the default and add states later, the structure breaks.
States to define for every interactive component:
Default
Hover
Active or Pressed
Focused
Disabled
Loading
Error
Success
Rule 2: Auto Layout everything.
If a component doesn’t use Auto Layout, it will break the moment someone adds content that’s longer than your placeholder. Every single time.
Auto Layout rules:
All spacing is defined by variables, not magic numbers
Padding uses semantic spacing tokens
Fill container for flexible-width elements, hug contents for fixed elements
Nested Auto Layouts for complex arrangements such as header, body, and footer
Rule 3: Name it like a developer reads it.
Your Figma layer names should match your code component names. If your button’s primary variant is called Type=Primary, Size=Medium, State=Default in Figma, that should map to <Button variant="primary" size="md" /> in code.
Naming matters more than aesthetics in a design system. It’s the bridge between design and engineering.
Component architecture tips:
Base components are private (prefixed with . or _). They contain the raw structure.
Composed components are public. They combine base components into what designers actually use.
Use component properties for simple variations (on/off icon, text content). Use variants for visual changes (primary/secondary/ghost).
The detach test: have someone unfamiliar with your system try to use it. If they detach a component to make it work, your system failed at that point. Fix the component, not the person.
Theming: Light, Dark, and Multi-Brand
With Figma Modes, theming is finally structured instead of hacky.
Setting up your first Light/Dark theme:
In your Semantic color collection, create two modes: Light and Dark
Map each semantic token to different primitives per mode:
3. Apply semantic tokens to all components: not primitives
4. Switch modes on any frame to see the theme change instantly
The swap test: select any component instance, change the mode from Light to Dark. If anything breaks: wrong contrast, invisible borders, text that disappears: your token mapping has a gap. Fix it now.
Multi-brand theming:
For multi-brand systems, create a separate collection for brand tokens:
Semantic tokens reference brand tokens, which resolve to the correct brand values
This lets one Figma file serve multiple brands. The structure is the same. The values change.
The Adoption Problem (And How to Solve It)
You’ve built the system. Now comes the part nobody writes about: getting people to use it.
The 3-minute test. Sit a designer who’s never seen your system down in front of it. Time them. Can they find a button, place it, and configure it correctly in 3 minutes? If not, your system is too complex. Simplify the entry point.
Documentation that people actually read:
One page per component, not one document for everything
Visual examples first, rules second
When to use and when not to use, the negative guidance is often more useful
Keep it inside Figma if possible. External docs get forgotten
Getting buy-in from engineers. Speak their language:
Tokens equal CSS variables
Component properties equal props
Modes equal themes
If an engineer can look at your Figma system and immediately understand the code equivalent, adoption is almost guaranteed
The one metric that matters: component usage rate. Track how many component instances versus detached components exist across your team’s files. If the detach rate is above 20 percent, something in your system isn’t meeting real needs. Find out what and fix it.
According to Figma’s data, teams with mature component libraries see a 34 percent improvement in task completion speed. The ROI is real, but only if the system is actually used.
The Ship-It Checklist
Before you call it v1, make sure:
Token architecture defined, Primitive to Semantic at minimum
Core colors, spacing, radius, and typography as Figma Variables
At least one full page built using only system components
Engineer handoff tested, one developer can build from your system
Usage guidelines written, under 500 words per component
The detach test passed with a designer outside your team
What not to do for v1:
Don’t build every component. Ship 10, learn, then build more
Don’t write perfect documentation. Write good-enough documentation and improve it based on real questions
Don’t wait for consensus on naming. Pick a convention, document it, move on
A shipped system that covers 60 percent of cases beats a perfect system that covers 100 percent of cases but lives in a branch nobody merges.
Design systems aren’t products you launch. They’re gardens you maintain. Start small, grow what works, prune what doesn’t. The teams that treat their system as a living thing, versioned, measured, iterated, are the ones whose systems survive year two.
Looking for design system references and component libraries? Explore curated resources on Muzli.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
The best free icon libraries for UI design in 2026: tested across Figma, React, and production apps. Curated for consistency, not just quantity.
There are over 200 free icon libraries on the internet right now. Most of them have one thing in common: they look fine in a preview grid and fall apart at 16px in a real interface.
We tested these libraries against three criteria: visual consistency at small sizes, Figma and code integration, and license clarity. If an icon set looked great on its landing page but broke down in an actual sidebar navigation, it didn’t make the list.
4,500+ icons in a simple search-and-download interface. Best for quick grabs when you need one icon fast.
No account needed, direct SVG/PNG download
Clean, versatile aesthetic
License: free for commercial use with no attribution
Why it works: sometimes you just need one icon in 30 seconds
How to Choose the Right Icon Library
The decision isn’t about which library is “best.” It’s about which one fits your project:
Building a design system? Start with Phosphor or Lucide. You need weight variants and long-term maintenance.
Tailwind project? Heroicons. They were designed together.
Need everything? Tabler (5,300+) or Hugeicons (4,000+). Depth matters more than aesthetic perfection.
Figma-first workflow? Untitled UI Icons. The component structure is built for Figma, not ported to it.
Performance-critical? css.gg for the extreme case, Lucide for the practical one.
One principle applies to all: pick one library per project and stick with it. Mixing icon sets is the fastest way to make an interface look incoherent.
Key Patterns
After reviewing dozens of libraries, a few trends are clear:
Figma-native is expected now. A Figma library isn’t a bonus: it’s a baseline requirement. Libraries without one are losing ground fast.
Weight variants are the new standard. Single-weight icon sets feel limiting. Phosphor set the standard with 6 weights, and newer libraries are following.
Animated icons are crossing from novelty to utility. Lordicon’s trigger-based approach shows that icon animation can be systematic, not decorative.
Size is less important than consistency. A library of 300 perfectly consistent icons beats 5,000 icons with mixed visual language every time.
MIT license is winning. Designers want clarity. MIT = use it, ship it, don’t worry about it.
Find more curated design resources on Muzli: icons, kits, and tools, all in one place.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
JP Silva took on the hardest design brief there is: redesigning your own portfolio. SuperSkills is a refined agency showcase that proves attention to detail truly pays off — an investment that yielded nearly 10,000 clicks from Muzli and counting.
Unseen Studio’s 2025 recap is anything but a typical year-in-review. The site walks through months of work for clients like Netflix, L’Oreal, and Klook with interactive hover effects, embedded motion demos, and scrollable galleries that blur the line between portfolio and experience.
Google built an AI platform that turns standard video of winter athletes into detailed 3D performance data. The site visualizes spinning trajectories, skeletal tracking, and rotational velocity through custom graphics that make invisible physics visible. Interactive, technical, and beautifully executed.
PSN/OWN’s autumn/winter collection site channels 90s rave culture into a high-energy e-commerce experience. The site blends a gritty, editorial aesthetic with modern functionality, creating a digital space that feels more like a fashion lookbook than a standard shop. It’s a bold, immersive tribute to underground culture that keeps the momentum going from top to bottom.
A bold, high-impact digital experience that pushes the boundaries of cinematic storytelling on the web. Zapatero TV is more than just a portfolio; it’s an immersive environment that captures the energy of motion design and video production, proving that a strong visual identity can turn a personal brand into a full-scale experience.
This project explores the visual identity of the band ATEEZ through a dedicated digital space. It’s a powerful example of how a website can extend an album’s reach, pulling the audience deeper into the artist’s universe. By focusing on high-energy compositions and a dynamic layout, the design creates a bold, immersive environment that perfectly complements the music.
An intuitive look into the future of human-tech interaction. This companion app design balances advanced functionality with a user-friendly interface, turning complex robotics management into an effortless daily routine.
A vibrant and dynamic digital hub that brings a 3D universe to life. The Meebits site excels at creating a sense of community and play through an interactive environment where character and identity take center stage. It’s a prime example of how web design can evolve into a living, breathing digital world.
A roundup of the best color tools available right now, from AI-powered generators to accessibility checkers. Whether you’re building a design system or just need a quick palette for a side project, this list covers the full range.
A SaaS-ready Framer template by Framerdot with dark mode, smooth animations, and a modular layout that fits AI products, dev tools, and tech startups. One of the most clicked templates on the Muzli feed this week.
A cutting-edge UI kit designed for the next generation of AI-powered platforms. MagicDraft offers a sophisticated dark-mode environment that seamlessly integrates complex data visualization with intuitive SaaS workflows. It’s a comprehensive resource for building modern, scalable dashboards where high-level functionality meets a sleek, future-ready aesthetic.
A free MCP tool that generates color palettes inside your code editor using plain language. Ask for a “warm sunset palette” or a “corporate blue scheme” and get export-ready values in Tailwind, SCSS, JSON, or Swift. Works with Cursor, VS Code, and Claude Desktop.
The best color palette tools for designers in 2026 split into four categories: AI-powered generators (Coolors, Khroma, Muzli AI Colors, Huemint), classic palette builders (Adobe Color, Paletton), accessibility and contrast tools (Stark, WebAIM, Inclusive Colors), and system/image-based extraction tools (BrandColors, ColorKit). This comprehensive comparison covers 18 tools with specific use cases for brand design, accessibility audits, and design system workflows.
The best color palette tools and generators for designers in 2026: from AI-powered generation to accessibility checking. Tested, compared, and curated.
Color is the first thing a user feels and the last thing most designers systematize. You can spend hours tweaking hex values by instinct, or you can use the right tool and get to a working palette in minutes.
We tested these tools against four criteria: speed to a usable palette, accessibility support built in (not bolted on), integration with Figma and code workflows, and whether the tool does something a random color picker doesn’t. The ones that survived are here.
Generates color systems that pass accessibility requirements. Best for building accessible palettes from scratch.
– Start with brand colors, get accessible variants
– Shows WCAG compliance for every combination
– Skip if: you just need to check one pair. This is for building systems.
Color accessibility is only one part of inclusive design. For a full UI accessibility checklist covering typography, interaction, motion, and navigation, see our practical accessibility guide for designers.
Palette generator with color mixing and shade generation. Best for building custom shade scales.
– Blend two colors and generate the intermediate steps
– Create shade ramps for design tokens
– Why it works: when you need “7 shades between my brand blue and white,” this is the tool
How to Pick the Right Tool for Your Workflow
Starting a new brand? Khroma for exploration → Coolors for refinement → Stark for accessibility checks.
Building a design system? Open Color for structure → ColorKit for custom shade ramps → Stark for compliance.
Quick project? Coolors or Muzli AI Colors. Fast palette in, fast export out.
Image-based work? Coolors Image Picker or Adobe Color extract mode.
Accessibility audit? Stark for comprehensive, WebAIM for quick checks, Colour Contrast Analyser for live testing.
One principle applies to all: generate fast, then test for accessibility. Never the other way around. A beautiful palette that fails WCAG is a palette that needs to change.
Key Patterns
A few things emerged from testing all of these:
–AI generation is table stakes. Every major color tool now has an AI mode. The differentiator is what happens after generation: export quality, accessibility integration, contextual preview.
– Accessibility is moving from afterthought to input. The best tools now let you set WCAG requirements before generating, not after. Stark and Inclusive Colors are leading this shift.
– Figma integration separates tools from toys. If it can’t export to Figma or CSS variables in two clicks, it’s a demo.
– Image-based extraction is getting smarter. AI-powered extraction now understands dominant vs. accent colors, not just “most common pixels.”
– The palette is not the system. Generating a 5-color palette is easy. Turning it into a 50-shade token system with accessible combinations is the real job. Tools like ColorKit and Open Color address this second step.
Explore thousands of curated color palettes and design resources on Muzli
The most useful AI design tools for product designers in 2026 fall into four categories: UI generation (Lovable, v0, Bolt), image and asset creation (Midjourney, Firefly), design workflow automation (Figma AI, Magician), and code-to-design bridging (Claude Code to Canvas). This list covers 15 tools tested in real production contexts.
A curated list of AI design tools that actually hold up in production UI/UX work. Tested, compared, and filtered for 2026.
Every week there’s a new “AI design tool” on Product Hunt. Most of them disappear within three months. Some of them were never really design tools. They were demos wearing a landing page.
This list is different. We filtered for tools that real teams are using in real workflows. The test was simple: does it save time without creating more cleanup work? If the answer was “sort of,” it didn’t make the cut.
AI that learns your color preferences and generates palettes. Best for designers who know what they like but can’t articulate why.
Train it by choosing 50 colors you’re drawn to
Generates infinite palettes, gradients, and type pairings based on your taste profile
Skip if: you need precise brand work. It’s exploratory, not systematic.
How to Build Your AI Design Stack
Not every tool belongs in your workflow. Here’s a decision framework:
If you’re a solo product designer:
Start with Figma AI + Cursor. You get generation, iteration, and code output without leaving your core tools.
If you lead a design team:
Add Maze for research and Frontitude for copy consistency. Your leverage is in the compound effect across the whole team.
If you’re a creative director:
Midjourney + Firefly for visual exploration, UX Pilot for rapid concept screens. Your job is to explore more directions faster.
If you’re a designer who codes:
Cursor + v0 + your design system. The stack is small because the integration is tight.
One rule applies to all stacks: if a tool creates more review work than it saves production work, drop it.
Key Patterns
Looking across all the tools that made this list, a few things stand out:
Integration beats isolation. The best tools work inside Figma, inside your editor, inside your existing workflow. Standalone AI tools that require copy-pasting between tabs are dying.
“Good enough fast” is the product. None of these tools produce perfect output. All of them produce 70-80% output in 10% of the time. The designers who benefit most are the ones comfortable with that tradeoff.
Research AI is behind generation AI. Generating screens is easier than understanding users. The research tools are useful but require more human judgment on top.
The code gap is closing. Two years ago, “designer to code” was a fantasy. Now Cursor + Figma MCP + a good design system gets you surprisingly close. This is the trend with the most momentum.
Commercial safety matters now. Adobe’s “trained on licensed content” pitch sounded like marketing in 2024. In 2026, with actual lawsuits settled, it’s a real differentiator.
Discover more tools like these on Muzli. Curated design resources, updated daily.
Explore the science behind CropTab™: carbon-encapsulated NPK for direct nutrient uptake, improved soil reserves, and measurable yield gains backed by real data.
Discover heartwarming stories of Marshville, home to the adorable Quokkas. Based in Seoul. Crafted with passion by dinotaeng.com, duotone.io, and fave.kr.
by Artemii Lebedev A concept at the intersection of a fashion magazine and a dark portfolio. The motion-based photographs work perfectly in still images, but the key is to emphasize them with equally dynamic design ⬛️🟥
Starting my 2026 project: 12 posters, every single month. ⚡️ Kickstarting January with a tribute to the Chainsaw Man: Reze Arc. Each piece is a visual journey through the chaotic emotions and the tragic beauty of Reze’s story.
Most designers’ portfolios don’t fail because the work isn’t good. They fail because reviewers can’t quickly understand what the designer actually did.
In 2026, a portfolio is no longer just a folder of “my best screens.” It’s proof of how you think, how you build, how you adapt, and whether you can actually operate in the real world.
Mocha is an AI-powered no‑code app builder that turns your idea into a live website in minutes. No coding skills needed — perfect for ambitious entrepreneurs.
Sonido — For Creative Portfolios and Agencies Built with precision for digital creators, agencies, and studios, Sonido transforms your online presence into a compelling narrative.
Most designers’ portfolios don’t fail because the work isn’t good. They fail because reviewers can’t quickly understand what the designer actually did.
In 2026, product and UX portfolios are reviewed under real constraints: limited time, too many candidates, and constant visual noise. Good-looking design is no longer rare. What’s rare is being able to quickly tell whether there’s sound judgment behind it.
What keeps coming up in hiring conversations and portfolio reviews is a clear gap between two different stages:
Visuals open the door. Clarity and judgment determine whether you stay in the room.
The first threshold: attention
Before anything else, a portfolio has to clear a basic bar: it needs to look good enough for someone to even open it.
There’s no way around this.
When a project doesn’t look strong visually, reviewers often don’t read, don’t dig deeper, and don’t look for context. They move on. In that sense, strong visuals absolutely open doors. They buy you time, patience, and the benefit of the doubt.
But that’s only the first step.
The second threshold: trust
Once the door is open, the criteria change.
At this stage, good-looking screens are no longer enough. Reviewers start trying to understand:
what the designer actually did
which decisions they owned
and how they operated when things weren’t clear or perfect
This is where many portfolios break down.
In 2026, portfolios aren’t just evaluated as collections of screens. They’re read as signals of how a designer thinks, adapts, and operates over time.
Many portfolios present polished outputs with very little explanation. The reviewer sees the result, but not the responsibility behind it. There’s no clear sense of what problem was being solved, what the designer owned, or which constraints shaped the work.
Screens don’t show judgment. They don’t show how someone thinks when trade-offs are required, when options are limited, or when something has to be cut.
When it’s unclear:
what you were responsible for
what decisions you made versus executed
and how you arrived there
it’s hard to build trust, even if the visuals are excellent.
Treating the portfolio like a gallery, not a product
Another recurring pattern is portfolios that feel designed for show.
Large hero images, perfect grids, endless sequences of screens, and very little explanation. It looks impressive, but at the trust stage it often works against the designer.
At this point, reviewers aren’t looking for inspiration. They’re trying to understand whether this person:
thinks clearly
can explain decisions
and can operate within real constraints
A portfolio that prioritizes aesthetics over understanding increases perceived risk, even when it looks great.
Treating the portfolio as a product means designing it for a very specific user: someone busy, scanning quickly, and deciding whether it’s worth investing more time.
That usually means leading with context and decisions, not just visuals.
Showing too many projects
Many designers assume that showing more work improves their chances.
In practice, it often signals a lack of focus.
Portfolios packed with projects from unrelated industries, uneven quality levels, or conflicting styles make it harder to understand where the designer is actually strong and where they fit.
What tends to work better, again and again, is the opposite:
fewer case studies, tightly curated
the most relevant work upfront
anything that doesn’t support the story is removed
This isn’t hiding work. It’s editing for clarity.
No outcome, no change
Another pattern that keeps coming up is describing activity without showing what changed.
Some case studies include a lot of work, a lot of screens, and a lot of process, but never answer a simple question: what was different after this shipped?
At the trust stage, reviewers want to understand whether the work moved something, even if there aren’t perfect metrics:
user behavior
product flow
team decision-making
Hard numbers help, but they’re not required. A clear outcome is.
When there’s no sense of change at all, the work tends to feel superficial, regardless of how polished it looks.
The portfolio itself makes reviewing harder
Another recurring issue is portfolios that are difficult to use.
Slow loading, confusing navigation, broken links, hidden contact details. Small things, but when time is limited, they add up quickly.
Your portfolio is your first product. And like any product, it’s judged on usability as much as content.
What consistently works is basic, not flashy:
fast load times
clear structure
visible contact information
no unnecessary friction
What clears both thresholds
When a portfolio works, it’s almost always because it clears both stages.
At the first threshold, it looks good enough to earn attention. At the second, it’s clear enough to build trust in the thinking behind the work.
Strong portfolios don’t try to impress everyone. They communicate clearly who the designer is, what they’re good at, and how they operate when things aren’t ideal.
In 2026, a good portfolio isn’t measured only by how polished it looks. It’s measured by how quickly someone can understand what you did, why you did it, and what changed because of it.
When that’s clear, the chances of moving to a real conversation go up significantly. When it isn’t, even great visuals don’t always carry you far enough.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Jason Bergh is an Emmy Award®-winning producer, director, and cinematographer known for his work on Halftime (Netflix), The Greatest Love Story Never Told (Amazon), and a range of celebrity editorials and commercials for top brands.
FANDOM is an immersive digital world where the pragmatic financial world of royalties meets the artistry and emotional experience of music and community.
Rebrand and web explorations for Paybilt — a payments platform for seamless, real-time transactions. The direction explores a refined, luxury-inspired aesthetic, elevating fintech into a more premium, confident space.
Tenbin RWA 3D Website made on PeachWeb Builder. Tenbin are tackling the broken tokenization space of today, starting with precious metals, and commodities.
They simplify typography by replacing multiple font files with one flexible system, better performance, fewer compromises. We published a practical list of free variable fonts that actually work in real UI and production products.
This article walks through an MCP-first workflow that keeps design intent intact across AI, prototyping, and development tools. A practical example of how shared context turns disconnected tools into one continuous product process.
A practical example of preserving design context across AI and development tools
AI tools are now involved in every stage of product development, but most workflows still break at the handoff points. This article presents a practical example of an MCP-first design to development workflow, showing how design, AI, and development tools can work together as one continuous system.
The process described here is one example among many. Its purpose is not to define a single correct workflow, but to demonstrate how shared context and clean handoffs can turn disconnected tools into a coherent product process.
Why this matters now
Over the past year, AI has quietly entered almost every part of the product lifecycle.
Design teams experiment with AI inside design tools. Developers rely on AI-assisted coding environments. Product teams look for ways to speed things up across the board.
And yet, the biggest problem has not been capability.
It has been fragmentation.
Design intent gets lost between tools. AI reinterprets decisions instead of continuing them. Development often starts with partial context and missing assumptions.
This is where an MCP-first approach becomes useful.
MCP as a connective principle
MCP, Model Context Protocol, is not a specific product or platform.
It is a way of thinking about how context moves between tools.
Instead of each tool starting from scratch, MCP enables tools to share structured context such as:
component structure
naming conventions
design rules
system constraints
decisions already made
The goal is not more automation. The goal is continuity.
Each step should continue the previous one, not reinterpret it.
Starting point: a finalized design in Figma
This workflow begins after exploration and discovery.
At this stage, there is a finalized Figma file that represents real product decisions:
defined components
a connected design system
design tokens
a clear hierarchy
states and behaviors
Figma acts here as a source of intent.
Not only how the interface looks, but how it is meant to behave, scale, and remain consistent.
For an MCP-based workflow to work well, the design needs to be reasonably structured and system-aware. AI does not fix messy foundations. It amplifies them.
Connecting Figma to a language model via MCP
The next step is creating an MCP connection between Figma and a language model.
The model does not receive screenshots or flattened exports. It receives structured design context:
component names
hierarchy
relationships
tokens
references to the design system
Claude is used here as an example, but it is not a requirement. The same approach can be applied with other language models, including internal or open-source ones.
What matters is the model’s ability to read structured context, reason about design decisions, and produce precise, execution-oriented output.
The language model as a design interpreter
In this workflow, the language model is not acting as a designer.
Its role is to interpret the existing design and translate it into explicit instructions.
Using a dedicated skill or structured process, the model produces a specification that describes:
component structure
rules and constraints
token usage
interactions and states
This is not a creative prompt. It is a specification.
This step is the core of the workflow. It turns visual intent into something downstream tools can execute reliably.
Creating a prototype in Figma Make using the specification
Figma Make is used next, but not in isolation.
It is already connected to:
the design system
the token setup
the same naming conventions used in the design
The specification produced by the language model is provided as input.
This means the prototype is not generated directly from the design file itself, but from a clear interpretation of it.
The result is a prototype that is consistent, aligned with prior decisions, and suitable as a foundation for further development.
Moving the result into GitHub
Once the prototype is created, it needs to become part of the broader product workflow.
With a single push, the output of Figma Make is moved into GitHub as part of the existing project.
The key idea here is the transition itself.
What was created in a design-driven environment becomes a shared technical baseline that development tools can work with and build upon.
GitHub serves as the meeting point between design, AI, and development, and allows the work to continue without losing context.
Continuing development in Cursor
From GitHub, the workflow continues in Cursor.
Cursor does not start from a blank state. It works with an existing structure that already reflects:
design intent
system rules
previous decisions
At this stage, teams can add logic, connect data, refine interactions, and move closer to a production-ready product.
AI here is not inventing the product. It is continuing it.
MCP setup between GitHub and Cursor
Pulling a project from GitHub into Cursor
The workflow at a glance
At a high level, this MCP-first design to development workflow looks like this:
Figma defines intent
a language model interprets that intent
a structured specification bridges design and execution
Figma Make generates a prototype
GitHub becomes the shared baseline
Cursor continues development
MCP is what keeps this chain intact.
Why this approach works in real teams
The value of this workflow is not speed.
It is alignment.
Design decisions are preserved instead of reinterpreted. AI works with context rather than guessing. Development continues from a shared understanding instead of reconstructing intent.
Each step hands over context, not just output.
The tools can change. The order can evolve. The models can be replaced.
What should remain is the principle that tools should continue each other, not reinterpret each other.
That is the difference between experimenting with AI and actually building products with it.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Looking for free variable fonts that actually work in UI? A practical list of the best variable fonts for product, web, and interface design in 2026.
Variable fonts didn’t arrive with much noise. They didn’t replace anything overnight. They just slowly became useful.
Instead of loading multiple font files for different weights and styles, a variable font gives you continuous control inside a single file. Less payload, fewer compromises, and more consistency across real interfaces.
If you design products, dashboards, SaaS tools, or web interfaces, this matters more than it sounds. Typography decisions show up everywhere in UI, especially at small sizes and across breakpoints.
This list focuses on free variable fonts that actually hold up in production UI, not display typefaces and not typographic experiments. Every font here was chosen because it behaves well in real interfaces.
What actually makes a font “variable”?
Most designers are used to fonts with fixed weights: Regular, Medium, Bold.
A variable font works differently.
A simple example
You’re designing a button label.
With a regular font:
400 feels slightly too light
500 feels slightly too heavy
You have to pick one
With a variable font:
You can use 450
Or 480
Exactly where it feels right
Same font. Same layout. A very different level of control.
That’s the difference between having many weights and having a continuous typographic range.
Why variable fonts work so well for UI
Variable fonts aren’t about visual tricks. They’re about stability.
They become especially useful when:
You design responsive layouts
You need several weights without loading several files
You work with design systems or shared components
Performance and consistency matter
In good UI, typography doesn’t draw attention to itself. It just stays out of the way.
Inter
Best for: Product UI, dashboards, SaaS platforms
Inter is one of the most widely used UI fonts today, and for good reason. It was designed specifically for screens, with strong readability at small sizes and very predictable behavior across weights.
Why it works well:
Clear, readable letterforms in dense UI
Designed from the start for interfaces
Broad language and symbol support
Good to know: It’s very common. If visual differentiation matters, it often works best as a neutral base paired with a more expressive secondary font.
Best for: Advanced design systems, deep typographic control
Roboto Flex was built as a variable font from day one. It includes a wide range of axes and allows precise control over weight, width, and optical size.
Why it works well:
Extremely flexible
Ideal for token-based typography systems
One file can replace an entire font family
Good to know: It’s powerful, and easy to overuse. Best suited for teams that know how to define clear constraints.
Best for: Creative products, brand-forward interfaces
Space Grotesk brings personality without sacrificing usability. It’s often used in products that want a distinctive feel without drifting into decoration.
Jesko Jets® is a private jet charter operator based in Dubai, delivering seamless worldwide flights with privacy, comfort built around your time and ambitions.
Step into personalized wellness. Interactive 3D body exploration featuring high-quality labs, proprietary technology, and science-backed health insights.
Award-winning video production company in Dallas, TX. We listen, craft, and deliver stylish production with seamless execution. Let’s bring your vision to life.
Ahoj buddies!🤘🏻A new concept for a fashion-driven events app. Editorial by nature, precise by design — built as a visual system where style leads and structure follows.Desktop-first, mobile-aware, ready to scale. Design speaks first. Everything else follows.
A mobile app where readers discover captivating stories and writers share their creative works. From original novels to fanfiction, Fanstory connects storytellers with their audience through an intuitive reading and writing experience.
A modern Framer studio website template built for design studios and creative teams to showcase projects, services, client testimonials, and stories with bold, responsive layouts, designed for an easy and fast launch.
How to work smart with AI, maintain your Design System, and build products that feel real
In 2026, nobody is impressed by “I made a prototype with AI” anymore.
Everyone has seen stunning UI generated in an hour. Everyone has seen demos that look flawless on the first screen, then completely fall apart on the second.
The questions that matter now are not “Does it work?” but:
How was it built? Is it consistent? Can it scale?
Will someone be able to continue from this in a month?
What’s impressive today is a designer who can take an idea and turn it into something that feels like a real product: with rules, consistency, a Design System, proper behavior, and a process you can trust.
This is exactly where Vibe Coding transforms from a trend into a real craft.
— -
What Is Vibe Coding (In Designer Terms)
Vibe Coding is not “learning to code”, and it’s not classic No-Code either.
It’s a workflow where you describe intent, and AI translates it into output: screens, flows, states, sometimes data, sometimes code.
But the real story isn’t the tool.
The real story is you.
Good Vibe Coding forces designers to shift from thinking in “screens” to thinking in “systems”:
Components that repeat themselves
Hierarchy that serves tasks
Real states (not just pretty UI)
Fixed rules for spacing and typography
Screens that feel like one product, not a collection of pages
— -
How Designers Are Measured in 2026
Tools change. The criteria stay the same.
If you want to work properly with Vibe Coding, measure every tool by six questions:
1. Speed to Demo
2. Design System Fidelity
3. Component Consistency
4. States and Behavior
5. Path to Continuation
6. Data Connection
— -
The Biggest Advantage of 2026: Tools That Talk to Each Other (MCP)
Today, the big difference isn’t “which tool is smartest”.
The difference is whether your tools work like a team.
MCP (Model Context Protocol) is what makes that possible.
MCP in Plain Language
MCP is a connection layer that allows AI tools to work with your sources of truth instead of guessing.
Instead of every tool starting from zero and trying to “understand the design”, it can receive real context:
Components
Auto Layout
Variables and tokens
System naming conventions
Code project structure
Existing rules you’re already working with
In designer terms: MCP transforms AI from someone trying to imitate your design into someone translating it.
Without context, AI guesses:
“I think this is an H1” “I think the spacing is 16px” “I think this is a Primary button”
With real context, AI knows:
“This is your system’s H1” “This is your spacing token” “This is your existing Button/Primary component”
And that’s the difference between “same vibe” and “same product”.
If you want to see what this looks like in a real workflow, I broke it down step by step in a separate article that follows design intent from Figma all the way to code, without losing context at handoff points.
In 2026, a portfolio is no longer just a folder of “my best screens.” It’s proof of how you think, how you build, how you adapt, and whether you can actually operate in the real world.
And yes, let’s put this on the table: great-looking design is still important. Strong visuals open doors, create an instant first impression, and they will always help you stand out.
But in 2026, that’s only step one.
Today, clients and recruiters want to see beyond the screens: how you make decisions, how you move fast without losing quality, and what it looks like when your work has to function in real life, not just in a polished portfolio grid.
Because here’s the shift no one can ignore: AI is making “good-looking UI” cheaper and more accessible. So the market moved up the stack.
Teams aren’t only hiring pixel-perfect executors anymore. They’re looking for Full Stack Creatives, people who can design, write, prototype, prompt, and connect product goals to real user needs.
In other words: They’re looking for your professional DNA.
Why Your Personal Website Might Be a Content Graveyard
A personal website can still be a great home base. But for most designers in 2026, it quietly turns into a museum.
Not because the work isn’t good. But because nobody sees it.
Designers spend weeks crafting custom portfolio sites, only to launch into silence:
No traffic
No shares
No real discovery
Discoverability is currency now, and most hiring managers aren’t Googling your name. They’re scouting talent inside communities, in living feeds, where you can instantly see who’s active, who’s building, and who’s consistently delivering quality.
In 2026, a strong portfolio isn’t judged only by how it looks. It’s judged by how well it proves real working ability: product thinking, communication, AI collaboration, fast prototyping, and the ability to build consistency through a real design system, including day-to-day design system management and long-term maintenance across design and development.
A portfolio without distribution is like a great product without a launch.
The Anatomy of a Winning 2026 Portfolio: Your DNA Checklist
A strong portfolio today is layered. It shows outcomes, but it also shows the system behind the outcomes.
Here are the four layers that turn “nice work” into “we should hire this person.”
The Thinking Layer
Why it matters in 2026
Great execution gets attention. Strong thinking gets you hired.
Today, it’s not enough to show beautiful UI. Teams want to see if you can think like someone building real products:
Can you frame real problems?
Can you separate “looks good” from “works well”?
Can you prioritize under constraints?
Do you understand usability, data, and business impact?
This is where methodologies become a real advantage: Discovery, Synthesis, Usability Testing, Heuristic Evaluation, working with JTBD, funnel thinking, and even concepts like a North Star Metric.
How to show it on Muzli Me
Give your screens a story.
Upload case studies that explain the problem, the constraints, and the reasoning behind your decisions, not just the final visuals. If you write on Medium or Substack, sync it and let your writing carry your strategic depth.
A simple structure that works every time:
What was the challenge? What did you know (and what didn’t you know yet)? What options did you explore? What did you choose, and why? What changed after it shipped?
The AI Layer
Why it matters in 2026
AI alone won’t impress anyone. But knowing how to work with it well absolutely will.
Hiring teams don’t ask if you “use AI.” They look for whether you can produce high-quality work faster, without losing clarity, originality, or taste.
That often means being comfortable working inside modern workflows and tools like Figma Make, Cursor, Lovable, Bolt, Replit, v0and using ChatGPT, GeminiandClaude as a real partner for research, ideation, writing, and rapid iteration.
The point isn’t the tool. The point is leverage.
How to show it on Muzli Me
Don’t post “I used AI.” Show what it enabled you to do.
Examples that actually work:
Short iteration clips (before and after)
AI-assisted research followed by a clear human decision
Small product experiments that turned into something real
The goal is simple: show leverage, not gimmicks.
The Live Layer
Why it matters in 2026
Static images don’t prove functionality.
A UI can look perfect in a screenshot and still fall apart the moment someone clicks. Teams want to see that you can build complete experiences:
interaction
responsiveness
motion
flow
micro-interactions
mobile-first thinking
How to show it on Muzli Me
Link to live websites and interactive prototypes (Framer, Webflow, Figma), and upload short screen recordings that show real flows in action.
Sometimes a 20-second video builds more trust than ten polished mockups, because it proves the work actually works.
The Community Layer
Why it matters in 2026
Trust is built through signals, not claims.
When you’re active inside a real design community, it tells people a lot:
you’re not working in isolation
you’re exposed to feedback
you’re improving in public
you’re connected to what’s happening right now
It’s one of the fastest paths from “unknown designer” to “someone worth talking to.”
How to show it on Muzli Me
When you build your presence inside Muzli Me, your work doesn’t just sit somewhere online. It becomes part of a growing ecosystem where designers, teams, and decision makers actually browse.
You’re not only uploading a portfolio. You’re placing yourself where discovery happens.
The Advantage of Joining Early (And Growing With the Platform)
In 2026, most major platforms feel like huge crowded cities. There’s a lot of talent, but also a lot of noise, a lot of competition, and a lot of great work that disappears in minutes.
That doesn’t mean those platforms aren’t good. It just means they’ve reached a stage where it’s harder to stand out.
It’s a young, growing platform, and that changes the game: there’s more space for new names to rise, get discovered, and build momentum faster.
When an ecosystem is still growing, great work has more room to breathe. A profile can become something people genuinely discover, not because it’s from “the biggest creator,” but because the work is simply strong.
And the feed experience itself is built to give creators a fairer chance, not just the people who already have years of advantage. Our algorithm is designed to balance exposure across creators, styles, and content types, so strong work can reach the right people earlier.
One of our early members described it perfectly:
“Your platform is working great, I just got a client from it! I once tried using …….. , but it required me to sign up for a Pro account just to boost my visibility. Before I knew it, I had already spent over $165 and did not land a single client after more than 6 months. Your platform, on the other hand, feels much fairer for newcomers.”
That’s the early advantage. You’re not arriving into a world that’s already divided between stars. You’re growing with the platform.
Bottom Line: Don’t Be a Tool, Be a Brand
The designers who win in 2026 won’t be defined by the software they use. They’ll be defined by what they consistently produce:
how they think
how they communicate
how they execute
how they evolve
Muzli Me lets you pull all of that into one place: your shots, your stories, your live work, your experiments, your voice, and your momentum.
And if you’re building your identity in a new space, timing matters.
The earlier you show up, the easier it is to claim your name before it gets crowded.
Check if your professional username is still available, and start building your DNA today.
Portfolio by Dylan Brouwer: a Dutch digital designer & Webflow developer crafting experience-driven websites for brands & agencies. Bold, intuitive design with motion & purpose.
The fifth edition of Art Here 2025 explored shadows beneath Louvre Abu Dhabi’s Dome, uniting 6 artworks by 7 artists in a journey through light and perception
a design exploration for a mobile fitness app 💪 The concept focuses on the workout flow, starting from the overview screen, moving into a countdown state ⏱️, and ending with a set completion screen ✅The design adopts a dark, minimal aesthetic with bold typography and a strong visual hierarchy….
OneTech is an industrial technology brand creating professional-grade tools for automotive and manufacturing applications. Built around precision engineering, durability, and performance, the system is designed to operate reliably in both workshops and large-scale production.
One-click text animations. Kinetic Type gives you 19 preset animation effects along with full control to customize, scroll-triggered animations, and hover interactions.
Fluence AI is a high-performance Framer template designed for AI startups, SaaS businesses, and tech innovators. With a sleek UI, responsive design, and conversion-optimized structure, it helps AI-powered platforms launch fast and maximize engagement.
An immersive artboard where AI sketches and case studies converge. Brutalist layouts and WebGL depth shape raw experimentation into a distinct visual identity.
Naked City is a production company that boasts a vast and unique understanding of content creation for agencies, brands, documentaries, and social media.
A cutting-edge presentation of KERN, a performance-driven ski system engineered for precise response, balance, and control with advanced geometry and materials for real-world motion and stability.
A personal motion showreel featuring selected works created in 2025. This project reflects a period of learning, experimentation, and growth in motion design.
by BL/S® MONTRA — a bold, editorial web design for a new generation of private events. Built as a visual canvas where fashion aesthetics meet digital precision, the experience leans on strong typography, cinematic imagery, and a strict layout system.
Discover how hit songs are made with Songo — the AI-powered tool for visual song analysis, structure, patterns, and pro-level songwriting insights. Upload, explore, create.
Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using **WebGL + Taxi.JS**. Somehow it turned into a mini site with… a lot going on. Lost a few strands of hair and at least 3 braincells making everything behave, but we made it.
Limitless is a premium Framer template built for design subscription services that want a sharp, modern site to stand out and convert leads. Perfect for creative studios, solo designers, and productized service businesses.
One-of-a-kind access to the epitome of private market opportunities, once reserved for institutions. This is not simply an investment circle. It is a network of Titans, chosen and bound together to shape enduring legacies.
108.io is where tech chills out, breathes in, and reconnects with its inner nature. We designed a homepage that blends wellness, futurism, and a hint of cosmic weirdness — smooth 3D, soft gradients, and a nature-punk soul.It’s blockchain, but friendly. Wellness, but innovative. A place where consciousness and technology high-five each other.Enjoy the vibe.
This is a reel created to submit as homework for my advanced motion course. It features a selection from countless awesome works by the idols I follow — super fiery visuals that I hope to learn from in the future.
At Obys, we specialize in turning complex ideas into meaningful design. For companies working at the edge of science, technology, and innovation — from biotech to deep tech — we help transform technical depth into visual clarity and emotional resonance.
The 2025 Framer Awards are now live. Compete in 10 categories for $100,000 in prizes. Winners receive $10,000 cash, an aluminum trophy, and exclusive merch. Submit your best site to earn your spot.
An immersive fantasy website exploring the world of The Pendragon Cycle, featuring its story, heroes, episodes, maps, and lineages through interactive visuals and cinematic design. By Format-3 and Merlin
Walk as the Untamed Heroine through a journey of torn pages and personal truths. Inspired by Max Mara’s FW25 Women’s Collection, this coming-of-age story explores growth, strength and self-discovery.
Pinterest Predicts” is the annual trend forecast from Pinterest’s business platform, offering a glimpse into upcoming global shifts in fashion, design, lifestyle, food and more — based on search and engagement data from hundreds of millions of users.
Creating illustrated logos with AI just got an upgrade. This new version offers a smoother workflow and fresh techniques to level up your design process. The full tutorial is available in the link.
The Best Framer Templates Heading Into 2026: Curated by Muzli Choosing the right template for your next website can be tough, especially with the growing number of high quality options.
The Best Framer Templates Heading Into 2026: Curated by Muzli
Choosing the right template for your next website can be tough, especially with the growing number of high quality options. To make things easier, we reviewed the latest standout Framer templates that are shaping the web as we head into 2026.
In this curated selection, you will find a mix of clean modern layouts, bold creative concepts, and flexible professional designs that can support a wide range of projects. Each one was handpicked to help you create a site that feels fresh, performs smoothly, and reflects your unique style. Dive into the collection and get inspired for what you will build next.
— — —
Creative Website Templates
Build a striking online presence for your creative work with templates designed for portfolios, design studios, agencies, artists, photographers, videographers, and visual storytellers. Perfect for showcasing projects, case studies, and bold ideas through modern layouts and expressive design.
FABRICA® is a sleek, monochrome Framer website template designed for creative studios. With a stylish, high-contrast design and a structured layout, it ensures a smooth user experience while keeping the focus on your work.
REFORM is a bold brutalist website template built for design agencies ready to make a statement. With its raw aesthetic, striking typography, and unconventional layouts, REFORM pushes boundaries to showcase portfolios with unapologetic creativity.
Noora is a premium design studio website template made for agencies, portfolios, and creatives who want to look credible from day one. Built in Framer, it helps you present your projects, showcase expertise, and create a studio site that feels professional.
Avexa is a bold, modern template designed for creative agencies that want to impress. Showcase your services, highlight your work, share client success stories — all in one polished, easy-to-customize package.
A bold portfolio template crafted for creators, agencies, and studios. Designed with a strong visual identity to highlight work with clarity and impact.
Archar is a sleek Framer portfolio template designed with minimal typography, vibrant orange and white aesthetics, and dynamic scroll animations. Perfect for creatives seeking an engaging, unconventional online presence.
Introducing Kierkegaard, an immersive portfolio website template elegantly designed to showcase your agency, boutique studio, or personal work with creativity and distinction.
Baseform is the ultimate Framer portfolio template designed for agencies, freelance creatives, videographers and studios. Effortlessly build a striking portfolio that highlights your best and most recent work.
A striking and modern Framer template made for independent creatives, developers, artists, and visionaries who want to leave a powerful first impression.
Showcase your portfolio with a professional, distraction-free template designed for agencies and creative professionals, combining intuitive management with a refined, elevated design.
Create a strong and trustworthy online presence for companies, SaaS products, agencies, consultants, AI startups, and service-based businesses. These templates focus on clear messaging, lead generation, pricing, and converting visitors into customers with polished, growth-ready design.
Bima is designed specifically for AI automation agencies, helping you showcase your services and grow your business quickly by attracting the right clients.
Grovia is a SaaS and business template for startups and growing companies. It includes sections for features, pricing, case studies, integrations, and more, helping you present your brand and drive growth with clarity.
A sleek and responsive Framer template designed for AI-powered startups and tech innovators. Showcase your AI solutions with modern layouts, fast performance, and conversion-focused design.
Dreelio is a premium Framer template built for SaaS products and tech startups that want a clean, modern site to drive signups and showcase their product. Perfect for early-stage founders and fast-moving teams.
Fluence AI is a high-performance Framer template designed for AI startups, SaaS businesses, and tech innovators. With a sleek UI, responsive design, and conversion-optimized structure, it helps AI-powered platforms launch fast and maximize engagement.
Say hello to Remote, a fresh take on SaaS templates! It’s the first-ever 100% editable Framer template, specifically crafted for digital products. 👉 Figma now available! ✨
MONO AI is a premium Framer template for modern AI startups, SaaS products, and AI agencies. Designed for simplicity and impact, it puts your brand in the spotlight, making it easy to launch fast, impress visitors, and grow with confidence.
Pandawa is a sleek Framer template for SaaS and AI startups, featuring an ASCII-inspired design and built-in dark mode. Launch fast, stand out, and scale your startup with a modern, conversion-ready layout.
Forerunner™ is a premium Framer template for creative studios and modern brands. Bold design, flexible layouts, and fluid animations — perfect for fast, confident websites.
A finance & law SaaS template for fintech, legal or finance consulting services like accounting & payroll. Finance and law SaaS uses include banking, insurance, law or fintech. Suits a fintech consulting startup or lawyer’s consulting SaaS startup.
A bold, brutalist-inspired e-commerce template built in Framer. Designed for fashion, streetwear, and lifestyle brands that want a strong, premium online presence. RAWLINE delivers a dark, edgy aesthetic with a complete, conversion-focused shopping experience.
Quora is a sleek, modern Framer template designed for ecommerce and business sites. It features clean layouts, smooth interactions, and flexible sections to help you showcase your brand, products, or services with ease.
We supported Yomy in the launch of its website with complete artistic direction, a 3D product demonstration, and a bespoke Shopify theme. The aim: to showcase an innovation designed for cats and their humans.
This shot showcases the innovative design concepts of Atelier Dasha Tsapenko. All content, including images and designs, are the intellectual property of Dasha Tsapenko. The use of this content is strictly within the context of design concepts.
12mil Music was created to bring Latin talent to the world with a global, stereotype-free vision, building real connections between artists and superfans beyond the music.
Meet Inai — a system designed for private jet owners and pilots to monitor all connected aircrafts in one place. With intuitive filtering and a clean interface that highlights critical insights first, it allows users to quickly identify issues and prioritize what matters most.
This year, websites of the year breaks formats: open to experimentation, multistyle, and boundary free. Bringing together designs that push limits and invent new ones.
Sleep Well Creatives is an interactive web experience designed to help people understand and improve the quality of their sleep through science-based insights, friendly design, and immersive visuals.
Originating from my love for K-Hiphop, I created a concept for the Ambition Musik website, featuring an introduction page for my favorite rapper, ASH ISLAND.
A performance-first developer portfolio blending precision and storytelling. Minimal, fast, and fluid — where motion serves meaning and design meets engineering clarity.
A creative studio from Ecuador that approaches each project with a fresh and innovative concept. Collaborating with various brands, we ensure that each one receives distinct and unique content. Capturing the essence of thunder, we strive to achieve the best ideas.
Unlock the Osmo Vault packed with Webflow & HTML resources. Get exclusive access to the elements, techniques and code behind award-winning work. The toolkit for creative developers.
While working on the visual identity for Gentle Rain, we drew inspiration from the early days of technology and entertainment — when hip hop, the movie industry, and personal computing were just emerging on the U.S. West Coast…
Designer passionné par la création d’expériences digitales sur-mesure, j’adopte une approche centrée sur l’émotion pour concevoir des projets sincères et authentiques.
Morphon Icons is a full revamp of one of my favorite icon sets, originally designed in 2017. This personal project reimagines that old work through a refreshing modern lens, introducing soft neumorphic styling, smooth motion baselines, and practical demo cases, all optimized for community use and open remixing.
Zajno Digital Design Studiois a creative digital studio known for crafting striking and memorable experiences across web, motion, and branding. Their work stands out for its refined aesthetics, strong storytelling, and attention to detail.
Canva introduced its biggest launch yet: the Creative Operating System, marking what it calls the Imagination Era. The update unites a redesigned Visual Suite, world-first design AI, and tools for scaling brands. Highlights include Video 2.0 for advanced editing, Canva Forms for interactive sites, Canva Grow for AI-powered marketing, and the integration of Affinity, now free for everyone. The new Canva Design Model brings editable, AI-generated designs that understand layout, hierarchy, and brand style.
At Schema 2025, Figma introduced a new generation of design system tools built for the AI era. Highlights include Extended Collections for managing multi-brand systems, Slots for flexible component customization, and a faster design system engine with major performance gains. Figma also released an improved Code Connect UI, the MCP server for linking design and code, and Make kits that bring design systems directly into Figma Make. These updates push design systems toward smarter, living frameworks that evolve with AI-driven workflows.
Framer hosted a fun virtual “Halloween Office Party” showcasing team members in creative AI-generated costumes, all displayed on a slick interactive gallery built with Framer. The project invited the community to join in by posting their own costume photos using the #FramerHalloweenParty hashtag, turning a simple holiday celebration into a visually engaging brand experience that highlights Framer’s design and web-building capabilities.
A dashboard UI is effective when it surfaces the right data at the right hierarchy with minimal visual noise. This is a curated collection of 50 cutting-edge dashboard design examples from 2026, organized by pattern type: analytics, SaaS operations, financial, and data-dense admin interfaces.
As 2026 approaches, dashboard design continues to balance functionality with creativity. The best examples today are not only clear and efficient but also visually engaging and full of character. To capture this diversity, we’ve gathered a mix of 50 dashboards ranging from practical, real-world SaaS designs to experimental and artistic concepts that stretch the imagination.
Take a moment to explore this massive collection, discover new ideas, and see how designers around the world are redefining what modern dashboards can look and feel like in 2026.
A visually striking booking dashboard that blends futuristic design with travel utility. The soft beige interface, bold orange highlights, and clean layout create a premium experience that feels both adventurous and refined.
A playful and uplifting medical dashboard that blends functionality with cheerful design. The use of soft pastels, rounded shapes, and friendly contrasts makes healthcare data feel approachable and full of positive energy.
A calm and futuristic fitness dashboard with glassmorphism effects and soft lighting. The transparent layers, subtle gradients, and clean data visualization create a sense of focus and serenity while presenting health stats in a visually engaging way.
A smart classroom dashboard that visualizes attendance and participation in real time. The clean layout, soft colors, and intuitive seating map make managing lessons effortless while keeping the interface friendly and human-centered.
A futuristic health monitoring dashboard with a clean white interface and soft blue gradients. The 3D body visualization and minimal layout create a calm, clinical atmosphere that feels both advanced and reassuring.
A dark, elegant telecom dashboard with soft lavender accents and smooth data visualization. The clear layout, refined color scheme, and subtle gradients create a polished interface that feels both modern and trustworthy.
A clean and modern dark-mode dashboard that perfectly balances clarity and style. The soft gradients, bold typography, and clear visual hierarchy make data easy to digest while keeping the interface visually engaging and professional.
A sophisticated dark interface that blends fintech precision with futuristic healthcare design. The glowing accents, clean data cards, and balanced typography create a high-end look that feels intelligent, intuitive, and ready for AI-powered insights.
A bright and structured dashboard that balances clarity with energy. The soft color palette, clean spacing, and intuitive data visualization create a friendly yet professional interface that feels approachable and efficient.
A clean and highly functional healthcare dashboard that prioritizes usability and clarity. The calm neutral tones, structured layout, and clear data visualization make complex medical information easy to navigate and understand.
A sleek and modern crypto dashboard that merges dark elegance with vibrant highlights. The contrast between neon accents and minimal typography creates a futuristic feel while keeping portfolio data and performance metrics easy to track at a glance.
A soft and elegant warehouse management dashboard that combines data visualization with smooth color coordination. The pastel tones, rounded shapes, and clear hierarchy create a calm, modern interface that feels both analytical and visually refreshing.
A bright and polished crypto dashboard with playful contrast and clean organization. The soft background paired with vivid highlights gives financial data a fresh, modern feel that makes complex information easy to follow.
A well-structured business dashboard with a clean, professional layout. The balanced use of color and typography enhances readability, while the subtle charts and cards create a clear, data-driven overview without visual clutter.
A refined financial dashboard with a cinematic dark aesthetic and neon highlights. The use of contrast, grid precision, and sharp data visualization creates a sophisticated look that conveys clarity and control over complex metrics.
A bold and futuristic finance dashboard that pairs deep blacks with vivid purple accents. The smooth gradients, clean typography, and clear modular structure give it a high-end, modern edge perfect for digital-first analytics tools.
An elegant education dashboard that combines a dark, focused atmosphere with luminous accent colors. Its clear hierarchy and card-based layout make complex information easy to follow while maintaining a polished, contemporary look that keeps users engaged.
This finance dashboard stands out with its refined dark palette and energetic green highlights. The clean typography, well-structured cards, and balanced data visuals create a sophisticated interface that feels professional, dynamic, and easy to navigate.
A bold financial dashboard that combines dark tones with vibrant gradients for a dynamic look. The clear typography and structured data layout make it easy to analyze spending, savings, and income at a glance while maintaining a modern, high-tech feel.
A bright and sophisticated solar management dashboard that merges data visualization with architectural 3D elements. The soft lighting, warm gradients, and precise layout convey a sense of sustainability, innovation, and modern home efficiency.
A powerful cybersecurity dashboard with a dark, data-driven aesthetic and precise green accents. The structured layout and real-time analytics deliver a sense of control and confidence, perfectly suited for monitoring complex system health and threat activity.
A soft and elegant communication analytics dashboard with a pastel palette and smooth gradients. The minimalist charts and subtle highlights give it a calm, professional look that makes large amounts of data feel approachable and easy to interpret.
.
SaaS Analytics Dashboard — Data Overview & Management
A masterclass in information hierarchy. This [Dark/Light] themed dashboard uses a modular grid to balance complex data visualization with high-end aesthetics. The focus on [Metric Type] and clean typographic scale makes it a standout reference for professional enterprise tools.
.
OpsPulse – AI Operations & Compliance SaaS Dashboard
A boundary-pushing example of “Vibe Design” in the enterprise space. This dashboard utilizes a sophisticated frosted-glass aesthetic (Glassmorphism) to organize complex AI agent monitoring data. Key features include real-time compliance pulses, token usage tracking, and automated workflow status. The vibrant blurred background combined with high-contrast data cards proves that utility-heavy tools can, and should, look stunning in 2026.
A stunning example of an immersive, dark-mode health interface that prioritizes personalization. This dashboard uses a bold, cinematic background image combined with floating frosted-glass widgets to display biometric data like activity levels, sleep patterns, and heart rate. The layout masterfully balances “Focus Scores” and wellness recovery states, using smooth, organic wave charts to make complex health trends feel intuitive and motivational. It’s an essential reference for designers building high-end personal tracking or lifestyle apps.
A textbook execution of clean, scalable SaaS design. This sales management interface focuses on high-level business intelligence, featuring distinct modules for revenue growth patterns, traffic source breakdowns, and team productivity goals. The consistent use of soft-edged cards, a subtle pastel accent palette, and clear typography ensures that even with dozens of data points, the user never feels overwhelmed. It’s an ideal benchmark for designers building operational dashboards where speed of data interpretation is the top priority.
A sophisticated medical interface that sets a new standard for clinical data visualization. This health dashboard combines high-fidelity anatomical 3D renderings with precise biometric data, such as cardiovascular monitoring and digestive health insights. The clean, accessible UI uses a soft palette and clear typography to manage complex patient information—including blood pressure trends, HbA1c levels, and pulse rates, making it an essential reference for designers working on advanced diagnostic or telehealth platforms.
beautiful integration of lifestyle photography and functional data visualization. This smart home dashboard manages indoor environments with a high-end, dark-themed UI. The layout prioritizes essential metrics like air temperature, humidity, and CO2 levels using elegant line graphs and minimalist status indicators. By blending real-world room previews with precise climate controls, Aeros demonstrates how IoT dashboards can feel like a natural extension of a modern living space rather than just a technical tool.
A high-performance crypto-asset management interface designed for the modern trader. This tablet-optimized dashboard balances massive amounts of real-time data, including candlestick charts, daily profit yields, and multi-currency transfer histories, within a clean, spacious white-themed UI. The modular design allows users to monitor market opportunities and execute swaps instantly, proving that even data-dense financial tools can maintain a minimalist and approachable aesthetic in 2026.
.
Golfio – Golf Analytics & Player Performance Dashboard
A masterclass in blending environmental data with personal performance metrics. This specialized dashboard uses an immersive aerial view of the golf course as its foundation, overlaying precise shot data and hole-by-hole analytics. The sidebar provides a clean summary of player stats—including handicap trends, lesson progress, and wallet balances—using a sophisticated dark-glass UI. It’s a perfect example of how niche dashboards can use spatial context to make complex sports data feel both professional and engaging for the end-user.
A sophisticated example of how spatial data and market analytics can coexist in a single interface. This real estate dashboard, titled “Realto,” provides a comprehensive overview of buyer demand and property performance. It features a high-fidelity architectural floor plan alongside complex data visualizations like buyer interest distribution and intent accuracy scores. The use of a warm, neutral color palette combined with elegant “frosted glass” widgets makes high-level market intelligence feel accessible and professional, offering a perfect blueprint for modern property management and investment platforms.
A clean, results-oriented marketing dashboard that excels in visualizing campaign performance. This interface provides a clear bird’s-eye view of high-level metrics like open rates, click-through rates, and overall revenue generated from email sequences. The use of a bright, professional color palette and intuitive line charts for real-time campaign tracking makes it an ideal reference for SaaS platforms where data transparency and performance monitoring are key to user retention.
A high-impact, dark-mode financial dashboard designed for executive-level oversight. This interface, titled “QuartRevenue,” excels at condensing quarterly growth metrics into a single, intuitive view. Featuring deep-green accents and neon highlights, it tracks critical KPIs such as revenue growth patterns, lost deal percentages, and progress toward quarterly goals. The clean sidebar and structured “Customer Growth” feed demonstrate how to manage complex financial CRM data while maintaining a focused, high-contrast aesthetic that feels both powerful and professional.
A clean and highly functional fintech dashboard that masters the art of the data table. This interface simplifies complex financial logging by using a spacious white layout, subtle color-coded status tags (Completed, Canceled, Pending), and vibrant gradient header cards for quick balance snapshots. The intuitive filtering system and seamless integration of Google Workspace identifiers make it an excellent benchmark for B2B banking or internal accounting platforms where clarity and speed of verification are paramount.
A premium dark-mode dashboard tailored for content platforms and digital publishers. This interface, titled “InsightStream,” masterfully visualizes complex audience growth and revenue data through a high-contrast, neon-on-dark aesthetic. Key features include a real-time “User Today” monitor, geographical revenue distribution, and detailed “Most Popular” content tracking. The use of vibrant pink and green accents against a deep charcoal background ensures that critical performance trends, like subscriber surges and traffic peaks, are instantly recognizable, making it a top-tier reference for modern data-driven storytelling tools.
A masterclass in spatial dashboard design that transforms trip planning into a visual journey. This travel companion interface, titled “Travo,” integrates high-resolution satellite mapping with real-time budget tracking and itinerary management. The layout allows users to visualize their route across coastal destinations while monitoring expenses and upcoming bookings through clean, minimalist data cards. The inclusion of a “Travelers Finder” social module and “Vibe” selectors (like Adventure/Backpacking) demonstrates how modern travel dashboards can offer a highly personalized, community-driven experience within a streamlined UI.
A comprehensive financial management interface that balances personal credit intelligence with asset performance tracking. This “Light Mode” dashboard provides a clear overview of diversified investments, including Bitcoin holdings, stock market followers, and overall asset generation, alongside a real-time credit score monitor. The use of a soft, airy layout with pastel-toned bar charts and subtle shadow play makes complex wealth management feel organized and stress-free. It is a perfect benchmark for designers looking to create “Human-Centric Fintech” tools where high-level data transparency meets a friendly, approachable aesthetic.
A masterclass in organized, low-friction project management for creative teams. This interface, titled “Kinship,” excels at bridging the gap between high-level task tracking and granular asset management. The clean, card-based “Design Assets” board allows teams to preview Figma files, UI components, and email templates directly within the workflow. By combining a soothing minimalist aesthetic with a structured kanban sidebar for “Done” tasks and upcoming milestones, Kinship demonstrates how enterprise tools can reduce cognitive load while maintaining a high density of functional information for fast-moving design sprints.
A high-performance e-commerce dashboard designed for global retailers. This interface, titled “Rexora,” provides a unified view of multi-channel sales, integrating data from platforms like Shopify and Amazon. It excels at visualizing complex financial health through high-level KPIs like total profit overview, refund request tracking, and a detailed “Sales by Countries” heat map. The clean, spacious layout and intuitive “Top Products” list make it an essential reference for business owners who need to balance granular inventory performance with broad market growth trends in one cohesive view.
A productivity-focused interface that streamlines complex workflows through intuitive organization and AI assistance. This dashboard, titled “Noteflow,” features a highly functional task board with clear status indicators (Not Started, In Progress, Under Review, Completed) and prioritized labels. The integration of “Noteflow AI” for instant activity and timeline access demonstrates how modern productivity tools use smart automation to help teams stay on top of deadlines. With its clean folder structure for creative assets and client projects, Noteflow is a benchmark for designers building scalable, collaborative platforms where efficiency and clear task hierarchy are the primary goals.
A sophisticated medical analytics interface that sets a new standard for patient-centric data visualization. This health dashboard manages complex biometric streams, including blood oxygen levels (SpO2), heart rate (BPM), and metabolic tracking, within a clean, airy “Light Mode” UI. The integration of 3D anatomical modeling for localized health insights, alongside automated reminders like “Take A Breath Now,” demonstrates how modern healthcare tools can blend diagnostic precision with proactive wellness coaching. Its modular grid and soft lime-green accents ensure that critical health metrics are both highly legible and visually reassuring for daily monitoring.
A specialized IoT interface that brings high-level precision to home maintenance. This dashboard, titled “Vyniq,” manages a smart vacuum system through a detailed architectural 3D layout, allowing users to monitor cleaning progress across specific zones like the reading room or kitchen. The UI excels at visualizing hardware health, featuring dedicated modules for battery charging status, water tank levels, and filter life. By combining real-time spatial tracking with technical maintenance alerts, Vyniq demonstrates how appliance dashboards can transform a chore into a highly controlled, data-driven experience that ensures home efficiency at a glance.
A sleek and highly functional financial dashboard designed for modern entrepreneurs and small business owners. This interface, titled “Finexy,” excels at consolidating complex banking data into a clear, actionable overview. It features distinct modules for real-time balance tracking across multiple currency wallets (USD, EUR, GBP), intuitive monthly spending limits, and a detailed recent activities ledger. The use of vibrant green accents against a crisp white layout, combined with high-contrast data cards for total earnings and revenue, makes managing day-to-day business capital feel streamlined and effortless.
A robust administrative powerhouse designed for high-traffic healthcare facilities. This dashboard, titled “CarePulse,” focuses on the operational heartbeat of a hospital, tracking patient admissions, staff allocation, and consultation volumes in real-time. The interface excels at organizational clarity, featuring a detailed “Patients List” with status tracking (like Discharge or Appointment) and a hierarchical “Staff Management” sidebar. By visualizing complex trends like the 15% increase in patient inflow alongside gender-based consultation analytics, CarePulse provides hospital administrators with the bird’s-eye view needed to optimize resource allocation and improve patient care standards.
A cutting-edge interface that redefines inventory management for the fashion industry. This dashboard, titled “VogueAI,” utilizes artificial intelligence to streamline the curation of seasonal collections and product photography. The UI features a high-end, minimalist aesthetic with a soft lavender palette, perfectly suited for luxury retail. Key functionalities include AI-powered trend forecasting, automated stock level alerts, and a seamless “Product Performance” tracker that visualizes sell-through rates across different styles. It serves as an excellent benchmark for designers building creative commerce tools where visual inspiration and data-driven logistics must coexist beautifully.
A high-performance command center for digital marketers that simplifies the complexities of multi-channel automation. This interface, titled “FlowMail,” excels at visualizing the entire campaign lifecycle—from audience growth patterns to granular automation performance. Key features include a real-time “Campaign Performance” monitor and a dedicated “AI Insights” module that provides actionable tips on optimal send times and subject line improvements. The clean, modern aesthetic with vibrant purple accents ensures that critical KPIs, such as average open rates and revenue (MTD), are always front and center, making it a premier reference for SaaS platforms focused on marketing efficiency.
A high-impact mobile interface that prioritizes real-time health feedback and behavioral coaching. This dashboard, titled “Hyid,” excels at visualizing daily activity through high-contrast biometric widgets, tracking everything from step counts and sleep duration to heart rate and BMI. The UI stands out with its dark, focused aesthetic and the integration of “Coach Hyid”, an automated wellness assistant that provides proactive reminders like “Stand up and stretch for 5 minutes!” By blending deep analytics with immediate lifestyle prompts, Hyid demonstrates how fitness dashboards can move beyond passive data storage to become active participants in a user’s health journey.
A data-dense powerhouse designed for agencies and teams that need to balance project delivery with business growth. This dashboard, titled “Growth Stats,” bridges the gap between operational tasks and high-level productivity KPIs. The interface features a clean, professional grid that visualizes critical metrics like “Average Time Per Task” and “Total Completed Tasks,” alongside intuitive stacked bar charts for ongoing weekly workloads. The inclusion of a dedicated “Productivity KPIs” donut chart allows managers to quickly identify bottlenecks (like tasks marked “Stuck”) at a glance. It’s an essential reference for designers creating complex B2B tools where maintaining a high-level overview of team performance is just as important as individual task tracking.
A futuristic workspace designed to optimize the most valuable resource: time. This dashboard, titled “Caltimes,” moves beyond basic scheduling by providing deep insights into a user’s workflow and meeting habits. The dark-themed interface features an advanced “Time Breakdown Trend” that categorizes activities into Deep Work, Shallow Work, and Team Meetings, helping users identify their peak focus periods. With integrated AI insights, it tracks event completion rates and cancellation trends, offering a 95% “Solid Works” focus score to gamify productivity. It’s an exemplary model for designers building next-generation scheduling tools where data-driven habits meet high-end, immersive UI design.
A high-performance financial interface that brings a dark, cinematic aesthetic to the world of asset management. This dashboard, titled “Vaulto,” excels at tracking diverse portfolios across traditional fiat (Euro, Yen) and digital currencies (Ethereum). The UI features sophisticated data visualizations, including a multi-layered line chart for balance spending and a unique Sankey diagram that illustrates the flow of total assets across different holdings. With its deep charcoal background, high-contrast typography, and intuitive “Net Cashflow” heatmap, Vaulto is a premier reference for designers building premium fintech platforms where complexity must be delivered with elegance and absolute clarity.
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
There’s something satisfying about finding a browser extension that instantly improves your creative flow. One small install, and suddenly your day feels smoother, faster, and more inspired.
As a company that built one of the most popular and long-standing extensions for designers, and that has spent years exploring tools, plugins, and workflows across the creative world, we know exactly how much designers love discovering great browser helpers.
So here’s our updated list of the best browser extensions for designers in 2026. And as always, we’ll start with a little self-promotion: Muzli, the design inspiration hub that just got a full redesign and continues to grow with a brand-new community space.
This year, Muzli went through a complete redesign. What started as a simple new-tab inspiration feed has evolved into a full creative ecosystem. The new version feels faster, cleaner, and more personal, offering designers a smoother way to stay inspired.
Alongside the redesign, we introduced Muzli.Me– a community space where creatives can showcase their projects, share real design work, and connect with others. It’s already becoming one of the most popular destinations for discovering fresh talent and ideas.
Why designers love it:
Every new tab brings fresh inspiration and real-time trends.
Choose from over 160 categories and sources.
Explore mockups, case studies, and creative articles.
Join Muzli Me to share your own work and get noticed.
SVG Export makes it easy to collect and download vector graphics from any website in seconds. With one click, the extension scans the page, finds all SVG files, and lets you export them individually or in bulk. You can choose between multiple formats such as SVG, PNG, or JPEG, adjust dimensions before downloading, or copy the SVG code directly into design tools like Figma.
It’s a great time-saver for designers who work with icons, interface elements, or visual systems, helping you analyze designs and build asset libraries without touching source code.
Key advantages:
Detects and displays all SVGs on any webpage.
Export files in SVG, PNG, or JPEG formats.
Resize graphics before saving.
Copy SVGs directly for use in design tools like Figma.
Preserves CSS styling and linked elements in exported files.
Color Picker is a clean, accurate, and easy-to-use tool that lets you capture colors from any pixel on your screen with perfect precision. The moment you select a color, you get its HEX, RGB, and HSL values, ready to copy into your favorite design tools.
It also keeps a complete history of every color you’ve chosen, so you can revisit and reuse your selections whenever you need. Whether you’re designing a website, crafting a user interface, or working on illustrations, it’s a simple extension that helps you maintain color consistency and save time.
Key advantages:
Pick any color from your screen instantly.
See HEX, RGB, and HSL values for each color.
Automatically saves a full color history.
Works smoothly across multiple tabs and screens.
Lightweight, fast, and perfect for daily design work.
Adobe Photoshop for Chrome brings the familiar power of Photoshop straight into your browser. It allows you to open, view, and edit PSD files stored either in the cloud or locally on your device, all without launching the full desktop application. You can make quick edits, adjust layers, crop, and export assets right from your browser tab.
The extension integrates seamlessly with Adobe Creative Cloud, letting you switch smoothly between browser and desktop workflows. It’s perfect for designers who need to review layered files, make light edits, or collaborate on shared projects from anywhere.
Key advantages:
Open and edit PSD files directly inside your browser.
Access and manage projects through Adobe Creative Cloud.
Make quick edits to layers, images, and compositions.
Export assets instantly for web or presentation use.
Ideal for fast on-the-go edits without opening the desktop app.
Responsive Viewer is a practical tool for designers and developers who want to see how a website or app looks across different devices at the same time. Instead of resizing your browser window or switching between tools, you can view multiple screen sizes side by side, scroll through them in sync, and instantly check how layouts adapt.
It’s an essential extension for anyone working on responsive web design, helping spot alignment issues, spacing inconsistencies, and visual breaks early in the process.
Key advantages:
Display multiple device screens in one unified view.
Sync scrolling and navigation across all previews.
Use preset or custom screen sizes to match your design targets.
Simplify responsive testing without switching between devices.
Loom lets you record your screen, camera, and voice all at once and instantly share the result. It’s ideal for designers who want to walk clients or teammates through a prototype, present design ideas, or give visual feedback without scheduling another meeting.
With Loom, you can highlight interactions, narrate your design process, and make complex explanations easy to follow. The built-in editing tools let you trim, annotate, or add callouts, while automatic transcription makes videos easier to search and share.
Key advantages:
Record your screen, camera, and microphone in one click.
Instantly generate a shareable link for quick feedback.
Add annotations and trim recordings directly in the editor.
Automatic transcription available in newer versions.
Perfect for asynchronous communication in design teams.
WhatFont is the simplest way to find out which fonts are used on any website. Hover your cursor over a piece of text, and the font name appears right away. Click once, and you’ll see details such as font size, weight, color, and line height.
It’s a must-have for designers who love exploring typography or want to learn from well-crafted web layouts. Whether you’re researching for a project or collecting type inspiration, this extension makes the process effortless.
Key advantages:
Identify fonts on any website instantly.
View detailed font properties including size, weight, and line height.
Works seamlessly with fonts from services like Google Fonts and Adobe Fonts.
Helps build your personal typography library quickly.
Image Downloader — Imageye is a fast and reliable tool for finding and saving images from any website. It automatically scans the page, displays all the available images, and lets you select, filter, and download them individually or in bulk.
You can filter by image size, type, or URL, and even convert formats before downloading. It’s a must-have for designers collecting visual references, inspiration, or assets for mood boards and presentations.
Key advantages:
Detects and displays all images on a webpage automatically.
Bulk download or select specific images you want.
Filter by resolution, file type, or source URL.
Convert formats such as WebP to JPG or PNG before saving.
Ideal for building design references and inspiration boards.
Google Font Previewer lets you browse the full directory of Google Fonts and apply any font to a webpage or a specific CSS selector in real time. You can switch fonts instantly and see how they look in context, helping you choose the perfect typeface before committing to your design.
Key advantages:
Browse and apply any font from Google Fonts directly on the current page.
Target the whole page or a specific selector for precise testing.
Star your favorite fonts for quick access later.
Great for designers who want to preview typography in context.
Designer Tools is a browser extension built for designers and developers who aim for precision in their web layouts. It features rulers, guides, customizable grids, and measurement tools that help you align, compare, and polish design elements right inside your browser.
Here’s what it brings to your workflow:
Add horizontal or vertical rulers and guidelines to check alignment and spacing visually.
Overlay custom grids or compare your live page against a design mock-up to ensure exact matches.
Customize tool settings such as color, thickness of guides, dark mode support and more for your personal workflow.
Useful for designers who review live implementations, deliver pixel-perfect hand-offs, or audit front-end work.
Awesome Screen Recorder & Screenshot is a versatile extension that combines screen recording and screenshot tools in one simple interface. It’s perfect for designers who want to capture design feedback, demonstrate prototypes, or document their creative process.
You can record your full screen, a specific tab, or a window with audio and webcam, then share the recording instantly. For screenshots, you can capture the full page or selected areas, annotate with arrows or text, blur sensitive details, and export in seconds.
Key advantages:
Record full screen, tabs, or windows with audio and camera.
Capture full-page or custom screenshots.
Annotate easily with shapes, highlights, and blur tools.
Save locally or share instantly via link.
Ideal for tutorials, feedback, and design documentation.
Browser extensions make the web feel like a creative workspace. They help designers stay organized, explore ideas, and move faster between inspiration and execution. Muzlikeeps creativity flowing through its daily inspiration feed and growing creative community at Muzli Me. Tools like SVG Export, Color Picker, Responsive Viewer, WhatFont, and Loom make everyday design work more efficient, turning your browser into a powerful design environment.
Pick the ones that fit your workflow and transform your browser into a space built for creativity, focus, and inspiration.
……
💡 Stay inspired every day with Muzli!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A visual forecast by Julissa Roa, exploring the seven key design movements shaping 2026 — where AI, storytelling, and emotion redefine how we create, communicate, and connect.
Meet Dandy Vision — the world’s smartest intraoral scanner. Trained on over 10 million scans, it combines incredible speed with AI-powered precision to redefine digital dentistry.
A digital experience for a team that reads proteins at the single-molecule level and changes what’s possible in science. We designed and developed the site, creating 3D visuals that turn complex biology into something beautifully simple.
Cuchillo is an award-winning digital design studio based in Bilbao, Spain. Their work blends bold creativity with refined precision, resulting in immersive websites and interactive brand experiences that feel both artistic and timeless.
UI design and corporate website development with an experimental tone and a functional cut, for a brand leading the tattoo revolution. Inspired by aeronautical tech.
Ribbit is a creative motion agency based in Copenhagen founded to create memorable and engaging animations and motion graphics for your strategy and branding.
A visual and written tribute to filmmaker David Lynch — exploring his surreal cinematic world, signature “Lynchian” style, and the lasting impact of his films on modern culture and storytelling.
The official website of KIKK Festival — an international event in Namur, Belgium celebrating digital and creative cultures. It showcases talks, interactive art exhibitions, a creative market, and performances exploring the intersections of art, science, and technology through themes like AI, design, and sound.
BL/S® (Blacklead Studio) is a bold and creative studio based in Prague, specialising in web and mobile design & development, UX/UI, branding, 3D design and animation.
What truly sets them apart is their fearless approach, they embrace unconventional ideas, create designs that are memorable, unique, diverse, and impossible to ignore.
Discover the top free Google Fonts for 2026. From clean sans-serifs to expressive scripts, explore the best typefaces for web, UI, and branding projects, all free and optimized for clarity and emotion.
Google Fonts offers 1,500+ free typefaces available for commercial use with no license fees. The best-performing options for UI and web design in 2026 include Inter, Geist, Instrument Sans, Plus Jakarta Sans, and DM Sans for interfaces, and Fraunces, Playfair Display, and Canela for editorial display use.
Fonts shape how your message feels long before people start reading. The right typeface improves clarity, evokes emotion, and sets the tone for your brand. Google Fonts offers a vast library of free, high-quality families covering every design style, from timeless serifs to geometric sans-serifs and expressive scripts. Below are the top free Google Fonts to explore in 2026, organized by purpose and visual character.
Sans Serif Fonts for Body Text and UI
Clean, modern, and highly legible, perfect for digital interfaces and everyday reading.
A balanced and neutral sans-serif designed for screens. It performs beautifully in dashboards, apps, and multilingual interfaces. Its generous x-height ensures clarity at small sizes.
A dependable classic with a friendly, modern rhythm. Ideal for websites and apps where clarity and familiarity matter. Works seamlessly with Roboto Slab for headings.
Soft curves and wide spacing make this font approachable and easy to read. Great for blogs, documentation, and general body text that must remain effortless on all devices.
Contemporary proportions with a humanist feel. It is clear at medium sizes and well suited to modern UI layouts, startup sites, and product dashboards.
.
Serif Fonts for Editorial and Long-Form Reading
Elegant and trustworthy, these fonts bring refinement to articles, books, and sophisticated layouts.
Designed specifically for on-screen reading, Merriweather combines classic structure with digital-era clarity. Excellent for long articles and editorial layouts.
Distinct letterforms and solid rhythm make it reliable in dashboards and analytics panels.
Best Practices
Limit your palette to two families for visual harmony.
Load only the weights you use to improve performance.
Test readability on both desktop and mobile devices.
Use variable font versions when available to streamline load time.
Match tone to context: warm fonts for lifestyle brands, neutral for tech, elegant for editorial.
The free selection on Google Fonts in 2026 is stronger than ever, offering designers a professional foundation for any project. Whether you are crafting an app interface, a luxury brand identity, or a personal blog, these fonts deliver the right mix of clarity, personality, and performance. Thoughtful pairing and restraint will ensure your typography feels modern, intentional, and timeless.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Web Design Trends 2026 (and everything in between)
After more than a decade of watching, curating, and writing about web design, we’ve learned one thing: don’t believe anyone who tells you they know what next year’s trends will be.
Your guess is almost as good as ours.
Most “trend reports” out there just recycle what was already cool last year and wrap it up as something new. But design doesn’t move in straight lines. It mutates, reacts, rebels, and occasionally contradicts itself.
Still, if we had to bet on what 2026 will look and feel like, this is where our creative intuition points.
1. AI Takes Over the Canvas
AI isn’t a side tool anymore. It has moved into the core of how we design and build. What started with text prompts and image generators is now becoming part of production , from visuals and motion to layout and code. Designers mix AI-generated illustrations, videos, 3D models, and ready-to-use components directly into live projects.
The biggest change isn’t in the visuals but in the process. We’re no longer working for the tools, we’re working with them. The workflow feels more like collaboration than automation. AI suggests, refines, fills the blanks, and speeds up execution.
What used to take hours can now be tested in minutes. Ideas evolve faster, iterations multiply, and creative limits start to blur. It doesn’t mean that design becomes automatic. It means that intuition and direction matter even more , because anyone can generate, but not everyone can create meaning.
AI isn’t replacing designers. It’s redefining what design work looks like.
2. The Return of Retro and Brutalism
When everything starts to look polished and AI-perfect, designers naturally swing the other way. Retro is back, and brutalism never really left. It is louder, bolder, and prouder. It is the human fingerprint in a machine-generated world.
You will see more asymmetry, visible grids, heavy type, raw textures, and websites that almost dare you to call them ugly. They will be beautiful precisely for that reason.
3D on the web used to be decoration. Now it is conversation. Lightweight frameworks such as Spline and React Three Fiber make it easy to build 3D environments that move, tilt, and react to the user. We are not talking about spinning logos anymore, but experiences that pull you in.
Used right, responsive 3D adds emotion rather than motion alone.
WebGL once belonged only to developers with too much coffee and a lot of math. Now it belongs to everyone. Tools such as Unicorn Studio and no-code WebGL builders turn complex shader effects into drag-and-drop elements. Liquid distortions, glowing particles, and magnetic cursor trails are all accessible in a few clicks.
High-end motion graphics used to mean custom code. In 2026 it might just mean good taste.
Gentle Rain | Educational AI Powered Platform
.
5. Micro-Animations Are Growing Up: The Small Things That Matter
Micro-animations are nothing new, but in 2026 they mature into something bigger, or smaller depending on how you see it. We call it micro delight: the subtle bounce of a button, a toggle that feels tactile, a form field that gently reacts to input.
The real shift is accessibility. Libraries such as React Bits Animations and 21st.dev make it easy for anyone to add motion with purpose. These details are no longer nice to have. They are what separates a working website from one that people remember.
Typography is done sitting still. Variable fonts, animated text, and responsive kinetic type are taking over hero sections and product pages. Fonts now shift in weight, stretch, or react to scroll and sound.
It is not about gimmicks, it is about feeling. The words themselves become part of the interface, not just what is written in it.
Sound is quietly becoming the next sense in digital design. Interfaces are starting to speak, hum, and react. A soft click, a subtle whoosh, or a short tone can add clarity, feedback, and emotion faster than any animation.
As brands look for new ways to stand out in a visually crowded web, sound becomes identity. From micro-audio cues in buttons and notifications to ambient loops that respond to user movement, the web is learning to sound as good as it looks.
AI is making sound design easier than ever. Tools can now generate short effects, background atmospheres, and responsive soundscapes in seconds, turning audio into a simple and accessible part of the creative process for everyone.
Used well, sound doesn’t just decorate an interface, it completes it.
The next evolution of web design is not visual. It is human.
For years, we have designed for screens, mice, and keyboards. In 2026, interaction begins to move beyond them. Websites are starting to listen, watch, and respond , not in a gimmicky way, but as part of a slow and natural shift toward more human interfaces.
Voice, gesture, facial expression, even emotional tone can influence how an interface reacts. AI now makes it possible to translate presence, sound, and motion into design language, one small step at a time.
The Human Layer is not a sudden trend. It is a direction , a quiet evolution that will unfold gradually as tools mature and people grow comfortable with new ways of interacting. It blurs the line between the body and the browser, turning digital experiences into something that feels instinctive rather than mechanical.
After years of dark modes, muted palettes, and minimalist restraint, color feels like it’s waiting for a comeback. We are not quite seeing it everywhere yet, but it feels inevitable , the natural next move after so many years of calm neutrals.
I would not be surprised if 2026 brings more bold gradients, expressive hues, and unapologetic saturation than we have seen in recent years. Maybe designers are finally ready to turn the volume back up.
This might not sound like a design trend, and maybe it is not one, but it is something real that is quietly taking shape beneath the surface.
As AI search and generative agents begin to replace traditional browsing, a new reality is emerging. Websites are no longer built only for people, but also for the machines that read, interpret, and summarize them.
We have spent years designing for UX, the user experience. Now we are entering the era of MX, the machine experience.
MX is about how meaning, structure, and hierarchy are translated for AI systems. How design decisions affect not only what humans see, but also what machines understand and retell.
Some already call this shift the beginning of a Parallel Web, a version of the internet built for intelligent agents rather than human eyes. It is not a polished trend or a visual aesthetic. It is a structural change, and it might redefine what it means to design for the web in the years ahead.
The Forecast
I do not know if these feelings or predictions will come true, not even partially. Like I said at the start, your guess is probably as good as mine.
But one thing I am sure of , the year ahead is going to be fascinating. And we will be here to follow it, explore it, and keep you inspired along the way.
So stay close. The story of design never stops.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The Alphabet is back for round two — louder, smoother, and a little saltier. This time, we’re diving into Tuba and Strandline materials — glossy tubes, liquid curves, and flowy textures straight from our experimental lab.
Design is not just about visuals; it is a profound philosophy, a dynamic system, and an inspiring journey. This is what we delve into on the About page of DES.
[SIGNAL. LOST. BEAUTY. FOUND. DIGITAL. CHAOS.] — AstroDither, an audio reactive Threejs /WebGPU experiment by Robert Borghesi on dithering and fluid simulation with TSL.
Shopify Supply — merch for the commerce community, by the commerce community. Our site runs on Hydrogen, Shopify’s React-based headless commerce stack, built on Remix and is deployed on Oxygen.
Alche is a company that creates unprecedented entertainment experiences for the digital-native era. Through the production of interactive experiences and content, it brings to life special moments in people’s lives.
A decade of weekly cover designs turned into a creative experiment that blends AI with intuition. Each week’s visual mashup draws inspiration from the post itself, keeping the process fresh, surprising, and more fun than ever.
Noomo Agency is an award-winning digital agency crafting immersive experiences that blur the line between design, technology, and emotion. Their work combines refined motion, striking 3D visuals, and interactive storytelling that draws you in and stays with you.
2026 is shaping up to be a year where creativity meets intelligence. Designers, studios, and creative agencies around the world are redefining what a portfolio can be, blending motion, storytelling, interactivity, and bold aesthetics into unforgettable experiences.
Before we dive in, if you’d like to be featured in next year’s edition, you’re welcome to submit your projects on Muzli.Me, or share your work on social media and tag @usemuzli for a chance to be discovered.
In this annual selection, we’ve explored hundreds of websites to bring you the 100 most inspiring and visually striking portfolios of 2026, from independent creators to full-scale design collectives. These sites push the boundaries of design, code, and imagination, showcasing how innovation and personality merge into pure visual impact.
Each portfolio featured here represents a unique voice, a distinctive design philosophy, and a deep understanding of user experience. From minimal masterpieces to experimental 3D interfaces, this list captures the spirit of contemporary digital creativity in all its forms.
Just like last year, the order of the websites is entirely random. Every featured creator or studio brings something special to the table.
Spotted a portfolio that deserves a place on this list? Share it in the comments, and it might be featured in our next update.
Many of the portfolios featured here easily clear the visual bar. But strong visuals are only the first step. We recently broke down the most common portfolio mistakes designers still make in 2026, and why many portfolios fail not at the visual stage, but at the moment reviewers start looking for judgment, clarity, and ownership in Portfolio Mistakes Designers Still Make in 2026.
Alche Studio specializes in crafting immersive, experiential digital worlds — from virtual fashion shows to metaverse environments — using tools like Unreal Engine and cloud rendering. Their site presents innovative works blending brand storytelling, interactivity, and scale, embodying the future of digital space design.
Cappen is a multi-awarded interactive digital studio based in Miami and São Paulo, crafting immersive and experiential websites for global brands since 2006. Their site demonstrates bold scroll effects, layer animation, modular systems, and smooth transitions that turn portfolios into ambient experiences — whether for clients like JCPM, Credit Genie, Ministry of Supply, or more.
Brand Appart is a Paris-based design studio that helps funded startups build iconic brands, conversion-driven websites, and investor-ready decks. Their site features bold visuals and case studies across branding, UI/UX, and product experience, blending creativity with performance and business goals.
1:09 Ichiki is the personal portfolio of a Tokyo-based illustrator known as “1:09 (Ichiki).” The site features fluorescent, sharply lined artwork spanning original illustrations, music video (MV) illustrations, event visuals, and custom goods like character merchandise. It presents an engaging mix of personal projects and professional commissions, offering a clear window into their creative style and versatility.
ByChudy is the personal portfolio of Miłosz Chudy, an art director, graphic designer, photographer, and occasional stylist. The site highlights album and poster artwork, key visuals for artists and brands, stage and motion design, logotypes, photography, fonts, web and clothing design, event materials, and social content, including collaborations with Spotify.
Stōkt Creative Co. (wearestokt.com) is a digital design studio focused on motion-driven experiences. Their site presents bold 3D visuals, interactive branding, product design, visual systems, and web development. Every project is framed as intentional, balancing artistry and purpose, from first tap to final interaction.
The studio of Sergey Lisovskiy merges identity, technology, and creative direction into immersive digital experiences. Their site showcases services including web design, interaction, brand identity, visual systems, campaigns, and motion. Clients listed range from Canon and Kia to Yandex and ManyChat, highlighting the studio’s reach and versatility.
Orage Studio is a creative studio specializing in 3D, VFX, motion design, and visual post-production. Their site presents glossy visuals, atmospheric renders, and technical craftsmanship to deliver cinematic brand experiences and immersive digital storytelling.
General Condition is a creative design studio that builds on bold ideas, crafting digital experiences and telling compelling brand stories.
They specialize in brand identity, creative direction, web design & development, illustration, and motion — combining logic beneath the color with expressive, disruptive visuals.
Twice | Twice.tv (Paris / Oslo) is a creative studio specializing in commercials, personal work, and storytelling. The site is clean and focused, dividing projects into Stories, Commercials, and Personal Work. It reflects a refined visual approach, showing both commissioned and independent pieces through cinematic and narrative-driven content.
Stiff | MadeByBuzzworthy is a bold creative showcase merging motion, typographic flair, and interactive visuals. The site emphasizes texture, dynamic animations, and experimental transitions — serving as a compelling portfolio space that blends personal expression with studio-level design refinement.
Samsy Ninja (SMSY) is the portfolio of a Paris-based creative technologist and digital artist with over 12 years of experience and 50+ international awards, including Cannes Lions and Awwwards. His site blends 3D interactive graphics, computational design, and motion, reflecting a mastery of visual technology and a bold experimental spirit.
Olha Lazarieva is a creative designer whose portfolio highlights UI/UX projects, branding, digital illustrations, and visual systems. The site presents refined aesthetics, minimal layouts, and a clear focus on craftsmanship, offering both personal explorations and client work under one cohesive visual direction.
Grit Pictures is a commercial filmmaking studio whose site functions like a “mad man’s scrapbook,” blending bold textures, torn edges, collage details, and monochrome styling to reflect an inventive and artistic identity.
Their portfolio highlights film and video work with emphasis on craftsmanship, narrative, and production value, positioning the studio as one that “lets the work do the talking.”
L’Étude is an international boutique modular creative studio that fuses design, technology, and sensory disciplines to build rich brand universes and multi-medium experiences.
Their work spans visual production, post production, branding, audio, motion, 3D, creative direction, and goods/merch — presenting both client and internal projects that explore new intersections of art and code.
T-KO™ / T-KO Space offers website and brand creation services with a focus on immersive 3D environments. Their site emphasizes loading 3D models, configuring spatial interfaces, and optimizing visual assets, positioning themselves at the intersection of web, design, and dimensional experiences.
Lax Space is the portfolio of a digital creative director + front-end developer who designs bold, thoughtful visuals and crafts clean, interactive code. Their site prominently features projects combining branding, design, and front-end development, blending aesthetic vision with execution.
KARO Crafts is a New York–based creative studio and brand blending art, fashion, design, and visual storytelling into one cohesive vision. The site feels like an art gallery turned digital playground, showcasing limited-edition apparel, handcrafted jewelry, and original artworks alongside experimental video and photography. Each piece carries the studio’s signature handmade aesthetic — tactile, colorful, and emotionally expressive. KARO’s portfolio highlights collaborations and personal creations that blur the lines between craft and concept, positioning the studio as both a creative workshop and a cultural brand.
Geex Arts is a global branding and UX agency that crafts transformative digital experiences by blending design, technology, and innovation. Their portfolio includes web3 ecosystems, crypto apps, social platforms, jewelry commerce, and media campaigns, highlighting a versatility across industries and a bold approach to creativity.
Abhishek Jha is a visual designer & front-end developer who fuses design with code to create immersive, expressive digital experiences. His portfolio showcases branding, web design, UI, and interactive work, all presented with a strong visual identity and functional elegance.
Chipsa Design is a studio specializing in emotionally driven digital experiences, blending aesthetics, WebGL, 3D, and CGI to build websites, interfaces, and visuals that feel alive. Their portfolio spans immersive web spaces, animated interfaces, and rich graphic content, aiming to turn digital solutions into experiences you want to touch again and again.
Jens Bosman is a one-man video creator combining videography, editing, and sound design to craft dynamic, fashion-forward visual worlds. His site presents a clean, photo-centric layout where each project feels cinematic, immersive, and tightly composed , showcasing work for brands, stills, and motion pieces under a unified signature aesthetic.
Sun Hung is a Vietnamese UI/UX and website designer, based in Saigon, who also serves as a design leader and educator. His portfolio emphasizes immersive visual experiences, combining branding, web interfaces, design systems, and interactive elements to elevate ambitious client work.
Supersolid is a Sydney-based creative agency that delivers “Super x Solid” outcomes for brands. Their site highlights work with major global names and showcases their approach — blending big ideas with strategic execution. They emphasize creativity as a powerful investment and feature case studies across brand storytelling, identity, and digital campaigns.
Double Play is a boutique web design studio on a mission to build websites that “spark excitement.” Their work couples sharp messaging, award-worthy design, and smooth animations , delivered with the precision and energy of a Grand Slam match.
Made In UX Studio (MIUX) is an award-winning boutique agency specializing in bespoke UX/UI design, branding, and digital experience. Their mission is to blend elegance and functionality , crafting human-centered interfaces that scale with business goals.
TUX Creative House is a full-spectrum creative agency that combines strategy, design, web, 3D, content production, and media under one roof. They present themselves as a “house of diverse thinkers and fierce makers,” working across branding, digital, experiential, and product realms. Their portfolio showcases integrated storytelling, striking visuals, and seamless execution — creating projects that feel cohesive, bold, and deeply crafted.
Adrien Lamy is a visual artist and creative director whose portfolio highlights bold typography, dynamic layouts, and expressive personal projects. The site feels intimate yet expansive, offering a look into his artistic identity through design, motion experiments, visual collages, and self-initiated works.
Cyphr Studio is a digital experience and venture studio crafting interactive products for artists, brands, and entertainment. The site highlights immersive storytelling, sleek motion, and technology-driven design, reflecting the studio’s mission to connect culture and creativity through bold, engaging digital experiences.
Clay Boan is a multidisciplinary designer based in NYC, working across art direction, branding, design, motion, and interactive systems. His portfolio features collaborations with big names like Nike × NBA, Gucci × Oura, Apple, and Google, combining bold visuals, thoughtful motion, and narrative-driven creative execution. His focus is on turning intelligent ideas into crafted experiences that resonate emotionally, culturally, and meaningfully.
Hnine Interaction is a digital interaction studio (or experimental interface platform) whose site greets visitors with a blank “/ enable JavaScript to run this app” message , suggestive of immersive, application-style experiences beyond static pages. The minimal entry hints at interactive, canvas-based or webGL projects, where the design takes shape once the interface loads — emphasizing the idea of interaction above conventional layout.
Bindery is a New York–based creative agency and production studio combining strategy, storytelling, and execution under one roof. The team creates campaigns, branded content, commercials, and original films for global brands, blending creativity with craftsmanship across motion, design, and sound. Led by founder and CEO Greg Beauchamp alongside executive creative director Kim Devall, Bindery’s work reflects a seamless fusion of agency thinking and production precision.
First Frame is a creative production and post-production studio driven by emotion and storytelling. Their portfolio spans original works, corporate films, music visuals, and studio collaborations. With a refined visual language and cinematic touch, First Frame delivers polished narratives that bridge concept and craft.
We Are Example is a creative studio blending art direction, digital design, and storytelling to craft immersive experiences. Their site presents a refined visual voice, showcasing brand work, interactive projects, and experimental content , all unified by aesthetic clarity and conceptual depth.
Studio Null (Made by Null) is a digital experience studio crafting interactive web spaces that blend utility with delight. Their portfolio highlights collaborations with clients around the world, showcasing projects from e-commerce brands to editorial platforms and experimental type specimens. They aim to make the web fun again by merging technical mastery with bold aesthetic choices.
Mikki Sindhunata is a film director with a background in dance, exploring the emotional and narrative power of movement. Her portfolio captures how body language and choreography can communicate beyond words, blending film, art direction, and performance to craft deeply human stories. Currently developing her debut short film The Gift, Mikki bridges commercial and artistic work through a refined sense of rhythm, gesture, and visual storytelling.
Joseph San is a visual creator and motion designer whose site features immersive visuals, kinetic typography, and expressive animations. His portfolio captures a blend of personal experiments and client work, all tied together by a strong graphic signature and rhythm.
Ragged Edge is a London-based branding agency that partners with ambitious companies ready to challenge convention and stand for something bold. Their philosophy, “Never be the same again,” captures their focus on transformation through strategy, identity, and creativity. The site reflects a confident, contemporary attitude — combining striking visuals, bold typography, and thought-driven storytelling to present branding as a force for real change.
Thingy & Thingy® bills itself as “the anti-advertising agency, advertising agency.” Based in London, Portland, Los Angeles and beyond, they lean into irreverence and boldness — “a multinational network of idiots” who reject tradition and ego in favor of playful, provocative branding. Their mantra includes statements like “Make work fun. Make fun work.” They position themselves as collaborators for clients who want to “stand out, create change, not conform.”
Eduard Bodak is a visual storyteller and creative technologist whose site blends motion, digital art, and interactive design. He presents a curated portfolio of animation, experimental visuals, and client work, all tied together with a distinctive aesthetic governed by fluid transitions and visual rhythm.
Robot is a fearless creative production studio where innovation meets audacity and storytelling breaks all conventions. They describe themselves as architects of the extraordinary , rebels with cameras and dreamers who turn ideas into powerful visual experiences. Guided by creativity and authenticity, Robot thrives on disruption and discovery, blending artistry, precision, and emotion in every frame. No boundaries, no compromises — just relentless passion and a drive to create.
Portal One Studio is a branding, UX, and web design studio dedicated to creating meaningful digital experiences with real impact. Their philosophy centers on the idea that “great design isn’t just about looks , it’s about results.” They merge bold ideas, data-driven insights, and scalable solutions to build work that connects with audiences, elevates brands, and grows with them.
Studio Herrström is a global design studio dedicated to building brands that move culture. Founded by Erik Herrström, former Brand Design Director at Spotify, the studio collaborates with clients in music, technology, and culture to create bold visual identities, campaigns, and experiences that connect with communities. Their work blends strategic thinking with expressive design, resulting in distinctive, emotion-driven branding systems that feel alive and relevant.
Sami Marketing is a creative marketing studio that combines strategic thinking with bold visual storytelling. Their portfolio includes branding, digital campaigns, content production, and experiential marketing — all aimed at helping brands cut through the noise with purposeful clarity.
Karim Saab is an art director, designer and front-end developer who creates websites and apps that not only look good but also tell stories, evoke emotion, and bring brands to life. His site highlights services such as art direction, creative direction, visual identity, UI/UX design, storytelling, and full web development using tools like Webflow, GSAP, WebGL, and Three.js. Featured projects include work on Casa Lunara, Golden Child, and Mobel, where he combines bold visuals with technical fluency.
Caffe Design is a creative studio blending visual identity, motion, illustration, and interface design into cohesive brand experiences. The studio’s work reflects minimal elegance with thoughtful details, reinforcing brand stories through refined aesthetics and fluid interaction.
LEOLEO Studio is a French digital design studio that brings creativity and technical expertise together to help brands define their time. They offer services in branding, art direction, websites, 3D & motion, UX/UI, and experiments that blend strategy with craft. Their work reflects a thoughtful balance of visual elegance, functional design, and expressive storytelling.
GM Meme is a small, specialized team focused on designing branding, visuals, promo content, and full digital presence for meme-token projects. The site promotes crypto meme templates and projects, blending web3 aesthetics with playful, bold visual style.
Reform Collective is a digital-first design agency founded in 2015, focused on branding, web and product design, and digital experiences. They embrace meticulous craftsmanship and storytelling, working with startups and established brands alike. Their model includes a “Reform Nova” accelerator, which trades design and development services for equity to help founders scale.
Nuageboi is the portfolio of Paris-based artist Hugo Baron, working as an art director and 3D designer. He creates visual universes that fuse motion, imagery, and CGI, combining refined aesthetics with technical precision. His work includes projects in live visuals, brand teasers, music videos, and immersive animation, showcasing a strong mastery of tools like Unreal Engine, Cinema 4D, and motion design.
Fine Thought is the creative persona of Nathan Leigh Davis, a web engineer and interactive designer based in Australia. The site feels like a minimalist, experimental portfolio showcasing his work in front-end development, motion, and interface design. It emphasizes craftsmanship and subtle interactivity, balancing clean visuals with thoughtful detail.
Jordan Delcros is a creative developer who merges design and technology to craft expressive, interactive web experiences. His portfolio showcases deep expertise in WebGL, animation, and generative visuals, emphasizing precision, fluidity, and storytelling through code. Each project reflects his passion for transforming complex technical work into elegant, emotionally engaging digital design.
Obys Agency stands out as one of the boldest creative studios in today’s digital landscape. The Ukraine-based team blends experimental motion, refined typography, and masterful storytelling to craft unforgettable web experiences. Every project feels like an art installation—meticulously designed, deeply emotional, and technically flawless. Their portfolio demonstrates how design can be both minimal and expressive, setting a benchmark for creative agencies worldwide.
Laugh Mind is a Tokyo-based creative studio (株式会社Laugh Mind) that specializes in visual communication, brand identity, motion, and experiential design. Their portfolio is rooted in storytelling and refined aesthetics, blending traditional craftsmanship with digital innovation to bring brands to life in dynamic and expressive ways.
Alternative Aesthetics is a creative studio founded by illustrator Colin Kersley (also known as “Alt Aes”), operating out of Cardiff. They specialize in expressive brand identity, illustration, strategy, and visual storytelling, often bringing personality and playful originality to projects through bold character work and vivid graphic systems.
Phantom.Land is a global tech-creative studio combining technology, brand, and innovation into immersive digital experiences. Their portfolio site acts like a “shape-shifting vessel” for their work, blending WebGL theatrics, kinetic grids, and bold interfaces that evolve as you scroll. The studio embraces unorthodox creative strategy and rebellious thinking, aiming to deliver experimental, yet purposeful work at scale.
Kidzfrmnowhere was founded in 2018 by Yuann and has grown into a visual studio focused on expanding visual language and style across Asia Pacific and beyond. They maintain an in-house production team and leverage a wide regional network to deliver precise, high quality projects. Their mission is global collaboration and visual legacy, combining tradition with new paths in visual innovation. Their team includes roles such as project managers, producers, directors, visual designers, and 3D artists in Tokyo and Shanghai.
Clement Grellier is a French front-end developer based in Paris who blends precision, clean design, and micro-interactions to bring interfaces to life. He emphasizes pixel-perfect implementation, fluid motion, minimal aesthetics, and tight integration between design and code.
Alejandro Mejias is an award-winning experience designer originally from Venezuela, now based in Melbourne, with over ten years in the creative field. He partners with brands to build captivating digital solutions, focusing on UI/UX, web and app design, design systems, and 3D where applied. His work has been recognized by Good Design Awards 2023/24 and has featured collaborations with agencies and clients globally.
Drexler (drxlr) is a creative studio based in Baltimore that focuses on elevating brands through design-driven e-commerce, email, and digital experiences. They bring together artistic vision and strategic thinking to create platforms that connect, engage, and convert. Since 2009, Drexler has built interactive sites with a touch of nostalgia, blending bold visual moments with technical depth to deliver memorable user journeys.
Marga Navarro is a digital product designer who blends precision, engineering craftsmanship, and creative ambition to build polished, meaningful experiences. Her portfolio emphasizes a system-thinking mindset, fluid interactivity, and minimal aesthetic choices. She actively experiments with Webflow and creates interactive prototypes to push boundaries and raise design standards.
Basement Studio is a digital studio & branding powerhouse partnering with ambitious startups, scale-ups, and brands to turn vision into high performance work. They craft bold digital ecosystems — from websites and interactive experiences to brand identity systems — blending creativity, technology, and strategy. Their focus lies in designing with precision and delivering with impact.
Nite Riot is a production services company specializing in commercial print and motion campaigns, creating content for major studios, global brands, and world-class agencies. They handle executive and creative production, location and casting services, post production and VFX, talent relations, and more. Based in Los Angeles with a presence in Brooklyn, they create high-impact campaigns often featuring celebrity talent and bold visual storytelling.
Stravagar.io is a creative digital studio blending bold design, immersive motion, and high-impact visuals. Their work features futuristic interfaces, expressive art direction, and interactive storytelling aimed at crafting standout digital experiences.
ArtPill is a global design studio that blends luxury, fashion, architecture, retail, and experiential storytelling into striking visual experiences. They work across spaces, objects, and events, with a refined aesthetic that merges high design sensibility and immersive environments.
RAYRAYlab is a one-person web agency based in Seoul, South Korea, focused on UX/UI design, web development, branding, and strategic planning. The studio combines design with technical fluency, leveraging a deep understanding of both aesthetics and code to deliver unique digital experiences.
Siena Film is a production studio that blends cinematic storytelling with visual innovation. Their site emphasizes narrative strength, artistic finesse, and technical craftsmanship — delivering film, video, and visual experiences that feel elevated, memorable, and emotionally resonant.
SoScale Media is a performance marketing agency from Sweden that operates at the intersection of creativity and data. They emphasize that “content is what matters,” producing hundreds of ads monthly and combining media buying with original creative work. Their services include creative strategy, high-end video production, user-generated content, and performance-driven campaign execution.
Mark Clennon is a visual artist and motion photographer whose portfolio blends stills, commissioned work, and motion projects. His site presents high-impact imagery ranging from portraiture and editorial shoots to dynamic visual narratives, showcasing collaborations with brands and cultural figures while maintaining a distinctive visual signature.
Bulletproof is a leading independent brand agency that crafts growth, standout positioning, and cultural resonance for the world’s most sought-after brands. They focus on disruption, creative boldness, and strategic branding to turn clients into icons.
Menuxl is a creative studio rooted in French design tradition and driven by modern digital expression. Their portfolio showcases branding, web design, and visual systems that combine clarity with personality. Each project reflects careful craftsmanship, bold ideas, and a refined sense of visual identity.
Poster is a post-production company based in Paris that works across advertising, digital content, music videos, feature films, and live performance recordings. They handle the full creative process — preproduction through final delivery , and curate custom teams to meet each project’s needs. The studio is known for taking a human-centered approach and maintaining high standards throughout every stage
Microdot is a creative studio focused on VFX, post-production, and visual effects direction. Their tagline is “Rendering Imagination,” and their portfolio includes color grading, CGI work, and compositing across campaigns for Dior, Mercedes × Moncler, and Nike. The company is registered in the UK under the name Microdot Vision Ltd, and its leadership includes directors specializing in color grading and VFX.
OddCommon is an independent digital agency that specializes in expressing brand and product identity through high-craft digital experiences. They position themselves as lean, focused, and a refreshing alternative to more complex agencies.
Yellow Fellow is a creative production studio that blends cinematic storytelling, visual effects, and high-end motion work. Their portfolio emphasizes mood, texture, and emotional narratives — crafting content that feels both polished and evocative.
Stas Bondar is a creative developer known for bringing together design and technical skill to build interactive, visually striking web experiences. His background includes work with tools like Webflow, GSAP, Barba.js, Three.js, and WebGL to elevate visual storytelling through code. He values precision, innovation, and depth and collaborates with studios and independent creators alike.
Lazy Eight Design is a creative studio with a focus on minimal, thoughtfully structured digital experiences. Their portfolio emphasizes grid systems, content clarity, typographic detail, and subtle motion — creating work that feels both calm and intentional.
Photoyoshi is the portfolio of Takamitsu Motoyoshi, a Tokyo-based photographer. The name “Photoyoshi” merges “photo” with his surname, Motoyoshi. His work spans categories such as interior photography, portrait, still life, landscape, and video. The site is designed to create an immersive browsing experience, blending minimal layouts with interactive elements to let the photographs take center stage.
Sarah Oh is a multidisciplinary motion designer, art director, and illustrator based in California. She works across branding, motion graphics, 3D illustration, and visual storytelling — blending an illustrative touch into her animations to evoke emotion and narrative. Her clients include The Verge, NPR, and Robinhood, among others.
Fiddle.Digital is a design agency offering end-to-end web services, including branding, interface design, motion, and front-end development. Their philosophy centers on blending aesthetics, technology, and storytelling into digital experiences that last. Developers and designers work together to ensure visual elegance matches functional performance.
Ottografie is a studio based in the Netherlands that fuses photography, visual storytelling, and art direction into striking images and brand visuals. Their portfolio highlights thoughtfully composed shoots, strong use of lighting, and conceptual direction — blending commercial sensibility with artistic integrity.
Huge Inc. is a global design and technology company founded in Brooklyn in 1999. The agency partners with leading brands to create intelligent, data-driven experiences that combine strategy, creativity, and innovation. With offices worldwide, Huge focuses on digital transformation, product design, branding, and AI-powered marketing, helping organizations shape meaningful connections between people and technology.
Ingamana is a creative design studio blending visual identity, digital experiences, and motion into cohesive brand expressions. The studio emphasizes clarity, emotional impact, and refined execution across all types of projects.
Mat Voyce is a UK-based type designer and animator whose portfolio blends illustration, motion, and typographic craft. He works globally and highlights collaborations with major brands such as Amazon, BBC, Disney+, Netflix, and Google. His studio presents the work through clean visuals and kinetic typography, demonstrating how design can tell stories through motion and form.
Gianluca Gradogna is a multidisciplinary designer based in Florence, whose expertise spans design, advertising, coding, and photography. His portfolio combines visual storytelling and seamless interactions, creating a unified space where design and imagery live in conversation — using infinite scroll, subtle transitions, and technical fluency to elevate both form and content.
Johanna Darrieta is a multidisciplinary creative whose portfolio spans branding, visual design, and motion. Her work blends conceptual rigor with visual flair, combining clean graphics, subtle transitions, and expressive visuals to bring ideas to life in digital form.
NIKI Studio is an independent digital design studio based in Hanoi, Vietnam. They specialize in creating websites and brand visuals that combine art and science to tell each client’s unique story. The studio emphasizes originality, clean aesthetics, and thoughtful digital storytelling — aiming to transform creative ideas into polished, effective visual experiences.
Alina Papazova is a contemporary visual artist and 3D designer based in Sofia, Bulgaria. Her work spans ceramics, drawing, textiles, sculpture, and immersive spatial installations. She explores themes of childhood nostalgia, memory, and psychological traces, weaving them into dreamlike environments where symbolic references and alternate dimensions converge. Her exhibitions include Pathways to Bliss, Princess Casino, Live Forever for the Moment, and Various Objects, where she blends personal narrative with sculptural and visual craft.
Merodev (Merouane Bali) is the portfolio of a full-stack developer and visual coder who combines programming, 3D, and design into immersive web experiences. His site showcases technical artistry, generative visuals, and interactive storytelling, reflecting his passion for pushing the boundaries between code and creative expression.
Burocratik is a design & branding studio that blends bold graphics, typographic energy, and strategic storytelling to create memorable brand identities. Their work emphasizes clarity, visual impact, and thoughtful systems — aiming to give brands a distinctive voice in crowded markets.
Dipsy Team is a creative & digital studio that focuses on bridging culture and innovation. Their work spans branding, digital strategy, product design, and immersive experiences. The studio crafts visual ecosystems that feel alive, blending narrative voice, interactive design, and aesthetic boldness to help clients make lasting impressions.
November (nvmbr.in) is a plural design practice founded in Mumbai by Juhi Vishnani and Shiva Nallaperumal. They work internationally across creative direction, identity systems, typeface design, and visual storytelling.
Polecat Agency builds digital products for complex challenges, from mobile apps to enterprise systems. The agency’s portfolio merges playful illustration, bold transitions, and interactive storytelling to present software development as a creative endeavor.
Your Creative is an independent creative agency based in Melbourne and Sydney that specializes in branding, web design, digital campaigns, and strategic communications. They work with entrepreneurs, mission-driven organizations, and corporate brands to transform complex challenges into purposeful, beautiful work.
Immersive Garden is a Paris-based digital production studio known for pushing the boundaries of visual storytelling. They partner with premium brands to build immersive web experiences using technologies such as WebGL, 3D animation, motion, and intricate interactive systems. Their work emphasizes craftsmanship, bold visual identity, and narrative depth — resulting in digital journeys that feel cinematic, precise, and emotionally resonant.
La Rue Michel is a creative studio blending art direction, digital design, and visual storytelling into cohesive, atmosphere-rich brand experiences. Their work combines refined visual aesthetics, experimental layouts, and emotional narrative to create memorable identities and immersive online presence.
Utsubo is a technology-first creative studio that specializes in crafting advanced digital experiences using real-time 3D, interactive installations, and WebGPU. According to the site, they push technical boundaries to help brands tell their stories in memorable and immersive ways.
Dverso Studio is a Milan-based creative studio specializing in immersive web development and design. They merge design, creative coding, 3D asset creation, and front-end development to build rich digital experiences. On their site they showcase projects like an immersive e-commerce site for BLDBLZ, metaverse explorations, and tools built with Three.js and AI models. Their approach emphasizes pushing the edge where design and technology meet.
Chain Labs is a creative studio that specializes in blending strategy, design, and blockchain technology to build forward-looking digital experiences. Their work often incorporates Web3 elements, visual systems, and interactive narratives, with a focus on pushing the boundaries between brand and experience.
Roberta Ungaro is a visual storyteller and creative designer whose portfolio blends branding, motion, and expressive graphics. Her work is characterized by strong visual identity, layered compositions, and thoughtful movement, creating digital experiences that feel both polished and emotionally engaging.
MadeByAnalogue is a multidisciplinary studio that interweaves design, motion, and brand storytelling into playful yet refined experiences. Their work emphasizes emotional connection, bold visual identity, and craftsmanship — producing brand worlds that feel expressive, intentional, and artful.
Choosing the right font can completely shift the mood of a design. As 2025 comes to a close and we look ahead to 2026, we’ve curated a fresh collection of 30 free fonts that bring character, elegance, and a touch of boldness to your projects.
This year’s picks capture the visual tone of 2026, blending timeless classics with modern aesthetics. Some fonts are free for personal use, while others require a license for commercial projects, so it’s always a good idea to review the terms before using them in branding or client work.
Before adding a new font to your website, presentation, or campaign, take a moment to verify the usage rights. It’s the best way to respect creators, maintain a high professional standard, and make sure your designs look as good as they feel going into 2026.
Roena is a font with a bold, cheerful, and expressive style designed to bring a fun vibe to every design. Its unique, rounded, and daring letterforms make it perfect for kids’ event posters, food & beverage packaging, creative branding, social media content, and even titles or headers that need to stand out and feel playful.
Rebak is a bold experimental display font built from confident geometric shapes, designed to stand out in posters, logos, and contemporary visual projects. Created by Bellinghamtype, it brings a modern, almost architectural feel to any layout, combining strong proportions with creative rhythm.
Available in OTF, TTF, and webfont formats, Rebak includes full multilingual support and PUA encoding. Its uppercase-focused style makes it perfect for headline typography, branding experiments, and visual identities that demand attention.
This version of Rebak is free for personal use, allowing designers to explore its distinctive character before purchasing a commercial license for broader creative applications.
Racistant is a modern display font featuring a smooth, rounded style that gives it a friendly yet professional look. Unique inktrap details on several characters add personality and make it stand out. Perfect for large, eye-catching titles or headlines that need to be bold, clear, and modern without feeling too rigid.
Brooklyn Funky by Craft Supply Co is a lively handwritten display font that blends casual rhythm with playful energy. Designed for projects that need personality and warmth, it’s perfect for posters, packaging, invitations, or any creative work that calls for a handmade touch.
With its loose strokes and confident flow, Brooklyn Funky brings a sense of spontaneity to layouts without losing readability. It captures the charm of real handwriting while keeping a professional edge, making it suitable for both personal and commercial projects once licensed.
The demo version is free for personal use, while the full version, available from Craft Supply Co, includes extended glyphs and complete multilingual support.
Calive Pixel by Craft Supply Co is a modern pixel-inspired display font that bridges retro aesthetics with a clean digital edge. Its precise grid-based structure brings a nostalgic feel of classic arcade typography, while maintaining sharp clarity for contemporary design projects.
Perfect for titles, posters, game interfaces, and creative branding, Calive Pixel adds a playful yet structured rhythm to your visuals. Each character is crafted to balance simplicity and impact, giving designers the flexibility to experiment with both minimalist and expressive layouts.
The demo version is free for personal use, while the full commercial license, available from Craft Supply Co, includes the complete glyph set and extended design options.
Canicule Display is a vivid serif typeface shaped by the warmth and fluidity of the Mediterranean spirit. Designed by Kostas Bartsokas, it carries an organic rhythm that recalls the movement of the pen, where soft curves and expressive serifs meet refined contrast.
Balancing elegance and vitality, Canicule Display evolves beautifully across its 18 styles, from Thin to Black, each with matching italics. The lighter weights feel airy and calligraphic, while the heavier cuts grow bold and sculptural, almost turning the serifs into visual motifs.
Supporting Latin, Greek, and Cyrillic scripts, Canicule Display is ideal for editorial design, branding, and high-impact typographic compositions that seek sophistication with a distinctly human touch.
Sense Font is the debut release from Sense Design Lab, a contemporary type studio based on collaboration and openness within the design community. The font reflects the studio’s belief in clarity, balance, and thoughtful geometry, offering a refined sans-serif form built for modern branding and editorial use.
Developed through multiple rounds of testing and refinement, Sense Font was crafted primarily for titles and display applications, balancing precision with a smooth, human touch. Its rounded structure and subtle contrast give it a sense of calm confidence, suitable for both digital and print environments.
Upon its final release, Sense Font will be made freely available for both personal and commercial use, continuing the studio’s mission to encourage creative exchange and accessible design.
Marjorie Variable Font Family is a graceful serif typeface crafted with reading in mind. Designed for books, editorials, and long-form storytelling, it balances clarity and beauty in every line, offering a seamless reading experience that feels both timeless and inviting.
The font takes its name from a family story that connects generations, honoring the memory of Marjorie, the designer’s great-grandmother. That personal touch carries into the design itself — each curve and serif feels considered, carrying a quiet sense of tradition and care.
With its refined contrast and soft rhythm, Marjorie shines in text-heavy layouts, from novels and essays to magazines and digital publications. It’s a typeface that values readability without losing its soul — an elegant companion for stories worth remembering.
Ankish is a bold futuristic sans-serif typeface defined by precision, speed, and modern geometry. Designed by Andrei Salagean, it combines sharp monoline strokes with subtle humanist touches, creating a balance between industrial strength and refined detail.
Its compact proportions and squared forms evoke a sense of engineered efficiency, while the softer corners and distinctive letter cuts give it attitude and motion. Perfect for high-impact visuals, Ankish excels in sci-fi titles, posters, automotive branding, and tech-driven identities that demand clarity and presence.
Both assertive and carefully crafted, Ankish delivers the kind of bold modernism that feels fast even when standing still.
Nevanta is a modern sans serif font with 18 styles (9 weights + Oblique), designed for professional, clean, and versatile typography. With precise geometric proportions and excellent readability, it is ideal for branding, websites, editorials, posters, and corporate identity. Multilingual support ensures flexibility, making it a complete typeface solution for both creative and professional projects.
Norelli is a refined modern serif typeface from VPCreativeShop that blends elegance with contemporary precision. Its sleek letterforms feature graceful contrasts between thick and thin strokes, making it a perfect fit for branding, editorial headlines, and high-end packaging.
The typeface carries a timeless sophistication that feels both classic and fresh, ideal for designers looking to add a polished, confident tone to their visuals. While the demo version is free for personal use, the full commercial version unlocks additional refinements and extended character sets, available through Gumroad and Creative Market.
Norelli is designed for creatives who appreciate the balance between tradition and modernity , a font that quietly commands attention through its crafted details and subtle charm.
Sk-Modernist is a minimalist and clean typeface which eschews complicated forms. The aim of the typeface was to create an amalgamation of a modern Grotesk, like Helvetica, with a simpler geometric style, like Avant Garde.
Sk-Modernist has been designed specifically for the digital age, each letterform being optically adjusted using a mathematical system rather than the traditional typographers eye. This approach has resulted in a typeface that displays exceptionally well in digital mediums.
The font is the first to be released by Sean Kane Design and is currently available in Light, Regular, Bold and Monospaced weights. Features include multi language support, Extended Latin and Vietnamese character sets, ligatures and stylistic alternatives.
LT Serif presents a modern, minimalist, and elegantly crafted serif font, featuring distinctive alternatives for select capital letters with stems. This versatile typeface is inclusive of uppercase, lowercase, symbols, alternates, numbers, and supports multilingual characters. LT Serif lends itself perfectly to projects demanding sophistication and contemporary flair, such as magazine headlines, book layouts, banners, posters, logos, and more.
Fayte Pixel is a dramatic, high-contrast typeface that blends gothic elegance with a digital, pixelated edge. Its sharp lines, geometric precision, and subtle texture create a sense of depth and shadow, giving it a sculptural presence on screen. The result is a font that feels both ancient and futuristic, perfect for artistic titles, fantasy posters, game interfaces, or metal album covers.
Inspired by the chiaroscuro technique in art, Fayte Pixel captures the interplay between light and darkness, volume and void. It evokes mystery, intensity, and bold visual storytelling — ideal for designers seeking a typeface with strong character and visual impact.
Gluf is a futuristic display font crafted with bold precision and minimalist aesthetics. The name itself, short and memorable, reflects the essence of the font: clean, sharp, and forward-looking. Every curve and line in Gluf is designed to strike a balance between industrial strength and modern elegance, making it a versatile choice for a wide range of creative projects.
Whether you’re designing logos, posters, album covers, apparel, gaming titles, or tech-inspired branding, Gluf delivers a strong visual identity that instantly captures attention. Its bold all-caps style ensures readability even in large-scale designs, while its sleek geometry gives your work a contemporary and professional edge.
Perfect for branding, editorial layouts, motion graphics, UI design, and digital art, Gluf is more than just a font — it’s a creative tool that embodies futuristic vision and minimal sophistication. Add Gluf to your design toolkit and let your projects stand out with a modern, powerful personality.
Ruska was a font created for study and will be made available completely free for everyone. This is a display font, with rounded corners and tons of inktraps. These are letters that make you want to eat them! It’s perfect for expressive brands looking to highlight their products through titles full of personality. This is the perfect flavor for your project.
RIOSARK is a modern and futuristic sans-serif typeface designed with precision and versatility. Its clean, strong, and minimalistic design makes it ideal for contemporary projects that demand attention and clarity. With three distinct weights — Bold, Regular, and Light — RIOSARK adapts seamlessly to diverse design needs, from bold headlines to subtle text elements.
Advercase Font is a retro serif typeface that blends vintage charm with a contemporary touch. Designed by the Indieground Team, it’s perfect for projects needing a nostalgic yet elegant vibe, from vintage-inspired ads to modern creative designs. Its timeless style makes it a versatile choice for adding character to any project.
N27 is a geometric grotesk typeface that feels both industrial and elegant. Its clean structure and subtle detailing create a contemporary rhythm that fits perfectly across digital and print design. Built with precision, N27 delivers sharp legibility at every size while maintaining a distinctive visual tone that stands out without shouting.
It carries the attitude of modern architecture — minimal, balanced, and bold. Each weight feels purposeful, from light and airy to heavy and assertive. N27 is ideal for designers seeking a typeface that embodies clarity, confidence, and a touch of futuristic sophistication.
A contemporary typeface inspired by Swiss-style, excellent for designs that display professionalism and modernity. It comes in regular and bold weights, with support of Latin and Cyrillic alphabet. This font is ideal for magazines, posters, logos, branding, layout designs, and others.
Acma is an irreverent typeface with a powerful elegance. It is ultimately precise and subtle yet it remains flowy and temperamental. The design was inspired by the Japanese modernist aesthetic as well as the fashion world [past, present and future] for its unapologetic nature and opulence through the purity and the tension of its lines yet unconventional forms and rhythms.
The design of the lowercase “a”, gave the tone to the whole family, which quickly became Acma. Its luscious curves, wide alternates and deep contrast will embellish any design endeavour it takes on. Guaranteed. It is a highly contrasted, narrow sans serif, ranging from thin to black. Originally intended for editorial headlines, Acma can be use in a variety of purpose starting at 12 point.
PP Kyoto is a slab serif that naturally bridges tradition and modernity. With a solid structure, distinctive features, and expressive character, it was designed to stand out, especially in headlines. Its bold slabs contrast with soft, teardrop terminals, while prominent dots create a rhythmic flow, adding energy to the composition.
The design remained on the shelf for years, slowly maturing into its current form. It all began as a study of Japanese writing systems, an exploration of how a slab serif could visually connect with the Japanese writing systems. The result is a unique typeface, shaped by trial, error, and persistence, now brought fully to life.
Swiza is a modern sans-serif typeface that blends Swiss precision with a quiet sense of elegance. It is clean, balanced, and crafted for designers who value clarity and timeless form. Every curve feels intentional, every proportion carefully tuned to achieve visual harmony across headlines, interfaces, and printed matter alike.
Its geometry is humanized with subtle warmth, giving Swiza both structure and personality. The result is a font that feels dependable yet refined — perfect for branding, editorial design, and digital experiences that call for understated confidence and effortless readability.
Overglow Font was designed specifically for artworks with an 80s and 90s atmosphere, a perfect match for synthwave, vaporwave and aesthetic elements. Designed in collaboration with artist Alessandro Strickner aka the Overglow.
Sk-Modernist is a minimalist and clean typeface which eschews complicated forms. The aim of the typeface was to create an amalgamation of a modern Grotesk, like Helvetica, with a simpler geometric style, like Avant Garde.
Created by Sean Kane Design, the font is currently available in Light, Regular, Bold and Monospaced weights. Features include multi language support, Extended Latin and Vietnamese character sets, ligatures and stylistic alternatives.
Basier is a timeless neo-grotesque typeface that captures the essence of modernist design. It feels clear, balanced, and effortlessly functional, yet refined enough to bring warmth and precision to any layout. Designed with Swiss-inspired geometry and subtle human touches, Basier achieves perfect visual neutrality without losing personality.
Its clean rhythm and even texture make it ideal for both digital interfaces and print systems. Whether used in bold headlines or refined body text, Basier conveys confidence through simplicity — an honest, versatile typeface built for clarity and modern elegance.
Simbatifa a Handwritten Font Simbatifa a Handwritten Font that adds a elegant, versatile touch to everything from branding and social media to invitations and packaging.
Neiko is a refined and modern sans-serif typeface created for designers who value clarity, balance, and sophistication. Its clean structure and carefully measured proportions make it ideal for a wide range of creative uses, from branding and packaging to editorial layouts and digital interfaces.
Available in three weights , Light, Regular, and Bold , Neiko gives designers flexibility to craft visual hierarchies that feel both confident and contemporary. The lighter styles offer an elegant minimalism for body text, while the bolder cuts bring strength and impact to headlines.
With its understated geometry and modern edge, Neiko captures the essence of timeless design translated into today’s visual language. It’s a perfect choice for those seeking simplicity with personality and a touch of finesse.
experiment with the fictional sci-fi streetwear brand, pushing the boundaries of what digital product viewing can be. The goal is to create an immersive, viewing experience.
Cappen is a globally awarded web design & development and creative design studio. We build immersive, high-performance digital experiences that drive results.
A decentralized finance platform transformed into a living digital world. Katana set out to turn idle capital into productive capital with a samurai-inspired identity that emphasizes loyalty and community.
You know that we have a series of educational projects. Our second educational website is Colors Combinations. Which part of this site is your favorite?
Freelancing in creative fields can feel like a rollercoaster. One month you are flooded with projects, the next you are wondering what is coming. The truth is that talent alone is not enough to build a sustainable career. You need strategy, positioning, and the right tools to show your value.
Here are strategies that actually work, drawn from the realities of working as a designer, illustrator, or creative professional.
1. Your identity matters more than your portfolio
A strong portfolio is essential, but it is not enough on its own. Clients are looking for someone they can trust, someone who brings more than nice visuals. They want to understand who you are, how you think, and why you make the choices you do.
Instead of just showing the final deliverables, show your process. Talk about the challenges you solved, share the sketches that led to the finished piece, or explain how you made certain design decisions. This makes your work memorable and positions you as a creative partner rather than just a vendor.
2. Surround yourself with other creatives
Growth does not happen in isolation. Some of the best opportunities come from collaborations and connections.
Join design communities both online and offline. Comment on other people’s work, exchange feedback, and learn from peers. Partner with professionals in related fields like copywriting, motion design, or UX. A joint project can unlock doors that you could not reach alone.
Even creative challenges and open calls can be powerful. They sharpen your skills, expose you to new audiences, and keep you active in the field.
3. Be flexible with what you offer
Many freelancers stick to one type of service, but markets evolve and so should you.
Think in terms of packages: a logo plus a brand kit, or a website design plus social media templates. Offering bundled services makes you more valuable to clients and harder to replace.
Stay aware of the market and keep your pricing dynamic. Do not sell hours, sell outcomes. If your work helps shape how a company is perceived, it is worth more than the time you spent creating it.
4. Protect your creativity
The hardest part of freelancing is not just finding work, it is keeping your creativity alive while doing it.
Block your time strategically. Reserve hours for deep creative work, for admin, and for communication. Without boundaries, emails and client calls can eat up all your energy.
Work on personal projects. These small experiments often become the pieces that attract new clients and remind you why you chose this path in the first place.
And remember that saying no is part of the job. Not every project is right for you, and turning down the wrong one gives you the freedom to accept the right one.
5. Keep learning and adapt quickly
Design is constantly changing. Tools, aesthetics, and expectations shift faster than most industries. Staying relevant means staying curious.
Try new tools, test new workflows, and watch what the best in the field are experimenting with. Do not just follow trends, understand why they work and how they might evolve.
The more adaptable you are, the stronger your position as a freelancer.
6. Show the full picture with Muzli Me
At the end of the day, growth as a creative is not just about improving your craft. It is about how you present yourself to the world. Clients and collaborators want to see more than a polished shot, they want to see the complete story of your creativity.
That is exactly where Muzli Me comes in. It gives you one place to bring everything together: finished designs, live websites, experiments, case studies, tools, and even the small personal projects that often say the most about who you are.
Instead of spreading your identity across multiple platforms, you can create a single home that shows the bigger picture. And because Muzli Me is connected to a large creative community, your work is not just displayed, it is discovered by people who matter, whether they are recruiters, brands, or fellow creatives.
If you are serious about building a creative career that lasts, do not settle for showing just half the picture. Use Muzli Me to show the whole thing.
Explore the evolution of the MO4, portable performance controller with part 2 of it’s design journey. From initial idea to detailed modeling, and into dynamic animation. Have a peep at this concept and share your thoughts in the comments!
Futuristic web design + living mascot + seamless storytelling = one unique digital identity. It’s all about WhiteBridge Network, our clients’ project, a platform that uses AI + DePIN to build a global trust layer for people-data.
What did you do? We developed a design for a mobile application related to the crypto-industry and mining. The app is generally aimed at launching your own mining farms. It’s already full of all sorts of features — tracking the status of farms, analyzing indicators and forecasts for purchase, buying and withdrawing cryptocurrency…
11 new popular sites now available in your Muzli new tab extension
We just added 11 new popular websites to Muzli’s source list. From now on, you can follow them and stay updated every time you open a new tab in your browser.
The new feeds include: A1 Gallery, Dark, Daily Delights, Browsing Mode, SEESAW, Craftwork, Supahero, Saaspo, landing.love, Footer, and Site of Sites.
If you already have the Muzli extension, simply enable the feeds from the sidebar. If not, install Muzli and customize your feed list to display content from these new sources.
We create work that moves. Bold design, purposeful motion, and creative direction that hits. From websites to animations, everything we make is sharp, intentional, and built to stand out. No fluff, just raw creative power delivering results that matter.
Art Director, Graphic Designer, Photographer, and even Stylist sometimes, but honestly, I do way more than that… To put it simply, I bring ideas to life through visuals and manage everything that makes a project come together in the end.
I’m 1:09 (Ichiki), a freelance illustrator based in Tokyo. I actively participate in many events and exhibitions, creating illustrations characterized by fluorescent colors and bold, clean lines. My work spans a wide range of fields, including plush toys, apparel, and merchandise design.
Andreea Robescu is one of those artists you just can’t scroll past. Her vibrant style already caught the eye of Sephora, Adobe, Coca-Cola, Bershka. She mixes paint, collage, and digital tricks into bold, playful visuals that feel fresh and full of energy.
video generation model is more physically accurate, realistic, and more controllable than prior systems. It also features synchronized dialogue and sound effects. Create with it in the new Sora app.
Arqos-Pro is a premium Framer template crafted for AI-driven design studios. Featuring minimal layouts, bold typography, dark & light sections, and sleek design, it includes ready-to-use pages for Home, Studio, Projects, Journal, and Pricing.
‘Swiss technology from the heart of Valais’ — DePoly SA. Their groundbreaking technology has been proven to increase recycling yield up to 99% for all forms of PET plastics, without any sorting or preparation; all at room temperature.
We’re excited to introduce a website for Gentle Rain, a dedicated AI-powered platform. This specialized landing page is designed to showcase a solution crafted for professionals who thrive on communication — managers, team leaders, and anyone in roles where human interaction is key.
Retronova flawlessly merges retrofuturism with the charm of a bygone future, blending nostalgic fashion, animations, and elements that evoke the retrofuturistic spirit.
We teamed up with Chromia, a Web3 blockchain platform that’s on a mission to make decentralized apps faster, smarter, and more accessible. Their vision is simple: blockchain should feel creative, human, and open to everyone — not just the tech-savvy few….
We specialize in luxury event production and fashion coordination. Our 360° approach ensures full executive delivery of your exclusive creative vision.
Meet Huy Phan, an independent designer and Art Director whose websites are remarkably memorable. Each project captures attention with bold visual creativity, smooth interactions, and brand identity details that stay with you long after the first visit.
His work has earned multiple Site of the Day awards on awwwards., a Designer of the Year nomination at CSS Design Awards, and recognition as an Awwwards jury member. Most importantly, his projects are consistently featured in Muzli — Design Inspiration Hub , a testament to how strongly they resonate with the design community.
Create stunning AI-powered device mockups and video mockups in seconds. Upload your screenshot or website URL, choose your device and style, and generate high-resolution mockups instantly.
For our latest WebGL experiment our aim was to see how closely we could recreate this petal particle effect in real-time. We’ve spent waaay too long just playing with the demo — let us know what you think!
Wall Garden is a conceptual website for a vertical garden studio, designed to create a tactile, calm, and immersive user experience through clean design and natural textures. We explored ways to visually convey the texture of plants and craft a harmonious digital space. The project showcases the full design journey — from concept to final layouts with subtle animations and interactive elements. The result is an intuitive, immersive website that connects users with nature and highlights the studio’s unique identity.
Inspired by my recent trip to 🏯 Japan, I compiled these matcha food & drink illustrations into a cohesive collection 🙂. Honestly I wasn’t drawn to matcha for the taste or the hype but what fascinated me was the diversity of food & drinks people create with it. Loved playing around with the new Figma glass, noise & texture effects while making it.
Ponpon Mania is an interactive comic. Follow the adventure of a megalomaniac sheep who wants to make the world dance. Created by Justine Soulié & Patrick Heng.
A creative‑venture platform where founders and designers can team up to build products together — from brand and UX/UI to launch — for a fixed monthly fee.
Ink Games is a platform blending gaming with real‑world rewards: players can build kingdoms, compete (“play, win, crush your opponents”), and earn tangible prizes.
……
✨ Muzli Me — Creator Spotlight
Bogdan Falin is a cofounder of QClay Design — UI/UX Design Agency Design and a jury member at awwwards., with a portfolio that spans hundreds of projects. His work is known for its bold use of color, vibrant energy, and a contemporary edge that makes each design stand out. Across different formats such as websites, apps, and digital products, he maintains a clear personal signature while constantly exploring fresh directions in UX/UI.
Framer just rolled out a substantial update that makes the platform much more power‑user friendly. The Design Pages feature turns Framer into a true design tool — offering a freeform canvas, vector editing, advanced masking, P3 color support, image exporting, and easier breakpoint handling. Framer
They also improved Pages & Assets panels: now you can select multiple pages or assets at once, perform bulk actions like duplication, deletion, drafting/“undrafting”, move items together, etc., which speeds up workflows especially on larger projects.
Framer has launched the #FramerChallenge, putting $1 million behind creators who set and meet revenue goals before December 31. Framer They can pick an earnings target between $5K‑$100K, build sites, sell templates/plugins/components, or work via the Framer Creator Program to hit their goal.
This week, Figma introduced Prompt-to-Edit (Alpha) — a powerful new AI feature that lets you modify selected layers using written prompts. You can redesign multiple frames at once, add or replace content, generate light/dark mode variants, and even create entirely new components from scratch. It’s a major step toward making design faster and more intuitive. Currently available to the first 5,000 users on paid plans.
A home site for the print newspaper Le Journal, a tri-annual publication created by Overheard Le Labo and distributed through Le Labo fragrance labs. Credits: wild, Frederik Hansen
Wall Garden is a conceptual website for a vertical garden studio, designed to create a tactile, calm, and immersive user experience through clean design and natural textures. We explored ways to visually convey the texture of plants and craft a harmonious digital space. The project showcases the full design journey — from concept to final layouts with subtle animations and interactive elements. The result is an intuitive, immersive website that connects users with nature and highlights the studio’s unique identity.
An immersive Blade Runner and Cyberpunk inspired 3D web experience, designed and developed by me from scratch in 4 months using Blender, Three.js and Cursor.
The personal website of creative designer Olha Lazarieva. An elegant, minimal system that translates ideas into visual solutions — making brands clearer and more people‑centered.
Savor makes delightfully rich foods without animals, farmland, fertilizers, hormones, or antibiotics. These are real fats, not a substitute. That means all the calories to carry all the flavor. All they lack is the compromise — on performance, environmental impact, or price.
An immersive 3D digital world where visitors can explore SMSY creative projects. Navigate through interactive spaces to discover SMSY work and story as a creative technologist.
……
✨ Muzli Me — Creator Spotlight
Jordan Gilroyis one of the designers I admire most. What makes him stand out is not just the polish, but the way every project feels different: fresh, versatile, and full of unexpected details. He has that rare ability to reinvent himself while keeping a clear signature style, which is why his work keeps winning recognition from awwwards., Webflow, and of course Muzli — Design Inspiration Hub.
Seedream 4.0 is ByteDance’s next-generation image creation model that unifies generation and editing in one system. It delivers high-quality, up to 4K visuals with faster inference, supports complex reasoning, and allows batch workflows with multiple references for efficient creative output.
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
In this project, we were tasked with the site design and development. Our goal was to effectively convey the benefits of the ATMOS Lamp to every user, allowing them to see and feel its efficacy while appreciating its aesthetic appeal and seamless integration into their interiors…
WaxyWeb is a cutting-edge digital agency specializing in UI/UX design, brand identity, and modern web development. In this case study, we showcase the complete transformation of their brand — from strategy to execution….
“Cyber City Orion” is launching in 7 days! An immersive Blade Runner and Cyberpunk inspired 3D web experience, designed and developed by me from scratch in 4 months using Blender, Three.js and Cursor…
Floor796 is an animated scene showing the lives of characters from various works on the 796th floor of a huge space station. The animation is regularly expanded with new blocks (rooms) and characters from movies, TV series, games, anime, memes, etc. The project is being created by one author as a hobby starting in 2018.
Digital Creative Director + Developer crafting bold, thoughtful design. Specializing in UI/UX, branding, and front-end development with expertise in React, TypeScript, and modern web technologies.
Meet Louis Paquet, a Montréal-based Digital Creative Director and designer. An award-winning creative with dozens of Site of the Day awards on awwwards, his work combines precision, power, and a presence that always commands attention.
FABRICA® is a sleek, monochrome Framer website template designed for creative studios. With a stylish, high-contrast design and a structured layout, it ensures a smooth user experience while keeping the focus on your work.
……
Want even more inspiration outside the newsletter? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A website for a company specializing in diverse software solutions, ranging from wearables and mobile applications to complex industrial and corporate systems.
Meet Serhii Polyvanyi, Founder & Creative Technologist Director at BL/S®, an award-winning designer whose bold and diverse creations are the kind of work you simply can’t ignore. His distinctive style fuses artistic depth with fearless experimentation, making every project a true source of inspiration.
Google DeepMind introduced a major image-editing upgrade in the Gemini app. The new model keeps faces, pets, and details consistent across edits, while letting you change outfits, blend multiple photos, redesign rooms step by step, or apply visual styles from one image to another. Both free and paid users can now experiment with these advanced tools, with all results clearly watermarked as AI-generated.
Bungee was crafted for creative studios that want more than a pretty layout — it’s built for impact, clarity, and leaving the right impression. With a modern, minimal aesthetic and a purposeful structure, Bungee keeps your work front and center while guiding
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Geex is a US digital agency offering UI/UX design, branding & development. We craft websites, mobile apps, and brands to help your startup stand out and grow.
Get set, ready — RedCircle.Life is the home to exclusive house parties in Delhi for college students and pool parties in Delhi Noida with food, drinks, and much more.
He stands for everything that gives us hope: he is young, has a sense of humour, a warm heart and a clear point of view. Italian Khaby Lame is living proof that destiny is something that can be challenged.
Jens is a one-man army, combining video, editing and sound design to create perfect little worlds, fashionable, dynamic, and full of life.
……
✨ Muzli Me — Creator Spotlight
This time, meet Zhenya Rynzhuk, an award-winning designer whose bold, distinctive style combines artistic depth with a timeless creative voice. Her work is instantly recognizable and always inspiring.
Transform any image into a stunning wave-line effect in seconds. Create eye-catching vector line distortion effects to add depth and texture to your designs. Perfect for generating unique patterns, textures, icons, and cover images with a fresh, modern look.
A modern, clean, and conversion-focused website template built for creative studios, agencies, and freelancers. Includes pages for projects, services, blog, team, pricing, and more. Fully responsive and easy to customize.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Maggie is a free app that helps mums find local activities, events, and things to do with their kids. Made by mums, for mums — discover what’s on near you, fast.
Sun Hung is a Vietnamese designer, lecturer, and head of design living in Saigon, Vietnam — Specializing in UIUX, Web Design and production across all platforms. Now Sun Hung is working at ViiVue. Design Anthropology School (DAS)
A tribute to the engineering, design, and culture of Honda’s iconic roadster. This site celebrates the timeless appeal of a car that continues to inspire enthusiasts worldwide.
Decode, track and take control of your health with Superpower. Get 100+ lab tests at the start of each year — no hidden fees, HSA/FSA eligible — a medical team in your pocket, and a health plan that evolves with you.
……
✨ Muzli Me — Creator Spotlight
This time, meet Slava Kornilov, a designer whose innovative minimalism sometimes feels like what might happen if Dieter Rams designed digital interfaces. His work is instantly recognizable, blending clarity, precision, and a futuristic sensibility into a visual language that’s uniquely his.
A UX/UI design studio dedicated to elevating brands with user-focused web and app design. MIUX combines beauty & creativity with strategic design thinking to create impactful digital experiences.
Kanso is a premium template for design agencies and creative studios that value clarity, precision, and timeless aesthetics. It balances clean typography, structured layouts, and smooth animations to deliver a seamless user experience.
REFORM is a bold brutalist website template built for design agencies ready to make a statement. With its raw aesthetic, striking typography, and unconventional layouts, REFORM pushes boundaries to showcase portfolios with unapologetic creativity.
The website for BabyDoge was designed as an interactive, explorative journey into their story and mission. Our goal was to move beyond the ordinary and create a living brand experience that helps visitors genuinely connect with BabyDoge. With its vibrant community, playful spirit, and purpose-driven impact.
particlesGL brings interactive particle effects to the web with a lightweight WebGL renderer. It converts any DOM element, images, SVGs, text, videos, or even 3D models, into responsive particle systems that react to mouse movement. The library features velocity-based interactions, meaning effects only appear when the cursor is actively moving, creating natural and performant user experiences.
To celebrate the release of his new album, explore Yamê’s universe with this immersive website. Discover the settings of the artist’s songs, exclusive content, and even a mini-game!
A new wave of innovators is rebuilding the real world — tackling energy, logistics, AI, and space to reshape industry, infrastructure, and society itself.
Build interactive, conversion-focused tools for your website without writing a single line of code. smart forms, pop-ups, quizzes, or literally anything, you can go from idea to live in minutes
Baseform is the ultimate Framer portfolio template designed for agencies, freelance creatives, videographers and studios. Effortlessly build a striking portfolio that highlights your best and most recent work.
Figma’s new AI tools — Make, Copilot and others — are now available across all subscription tiers. They let teams build apps and websites from natural‑language prompts, though pricing still varies by role and human oversight is still needed
On July 23, Webflow launched a private beta for real‑time editing. This allows multiple team members — designers, developers and marketers — to work simultaneously on the same page, reducing file hand‑offs and making collaboration smoother. The feature will eventually become available to all plans at no extra cost
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Flowee — Coffee Beans, Brewing Tools & Community Website Design designed by Thu Thu. Connect with them on Dribbble; the global community for designers and creative professionals.
Komma app is designed to make life easier for everyday people and small businesses by combining the basic note-taking functionality that most people need with additional features that help streamline work. In UX/UI and graphic parts, we develop the logo, …
The Jasmina Denner website is a storytelling that captures the essence of connectivity, linking past, present, and future while conveying Jasmina’s diverse expertise in health, technology, and personal development.
Deploy AI workloads, ML apps, GenAI models on world-class xPUs on demand, via 8bit’s accelerated cloud computing. Achieve intelligent transformations with full-scale AI solutions.
Lock ’n load lasers, crank up the Synthwave beats, and ride shotgun with space samurai Fury in this indie sci-fi game by Patrick Heintzmann, featuring music from Nightride.FM.
This site showcases a creative team that harnesses the power of storytelling to ignite imagination, move emotions, and inspire audiences and customers to take meaningful action.
Nestive is a sleek, high-quality Framer template designed for agencies and creatives. With dynamic layouts, smooth animations, and a polished UI, it helps you showcase your work with style and impact.
LTX Studio has launched Beyond the Prompt, a global competition inviting creators to explore the intersection of human creativity and AI-powered filmmaking. Participants are challenged to produce a short AI-generated film (60 seconds or less) using the LTX platform. The grand prize? $5,000, a ticket and hotel stay for Forward Festival Berlin, plus a year of LTX Pro.
Submissions are open until August 4.
.
Figma Introduces Native “Liquid Glass” Effect
Figma has rolled out a beta-native glass effect, enabling designers to create stunning “liquid glass” UI elements directly in the app — with no plugins or workarounds required
/media/b6d21042efeba80ed1d0d9e3db0751a8
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Step into the void — where 3D product design, immersive motion, and futuristic storytelling collide. This concept website was built for a digital-native brand launching high-end sneakers for the metaverse and VR/AR spaces.
[Unnoficial UI exploration] teenage engineering is a Swedish brand known for its innovative audio and music products. Their focus is on minimalist and functional design, combined with exceptional sound quality, and their product aesthetics are distinctive, often highlighted for their retro look and robust construction.
We create innovative digital products and future-focused brands. Your go-to studio for UI/UX, web design & development, e-commerce, brand identity, and more!
ComPsych is the world’s largest provider of employee assistance programs (EAP), and supports over 130 million people in more than 190 countries. They came to us to reimagine their 40 year old brand and redefine their strategy and visual identity.
Modern aesthetics in minimalism — a simple and elegant portfolio website concept for brand and graphic designers, featuring bold typography, smooth animations, and a dynamic portfolio CMS. Perfect for showcasing creative work and attracting clients.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Studio Nuts is a global creative studio blending agency thinking with studio-level craft, combining strategy and design across Portugal, Brazil, and Dubai.
Modus DAO is a platform for building AI-powered decentralized organizations (DAOs) run by intelligent agents. The site features a beautifully crafted black-and-white interactive experience.
We Are Example is a culture-driven creative agency that builds brands, destinations, and experiences through authenticity and earned attention. The site is designed in a way that’s both minimalist and playful — creating an experience you won’t forget.
VWLAB’s “Report” page is a visually rich showcase and monthly report of their flagship web-animation courses, built with cutting-edge techniques (GSAP, WebGL, Three.js) to highlight motion, interactivity, and creative code .
Create enchanting WebGL effects, motion, and interactivity — in minutes, not hours. Unicorn Studio makes WebGL easy for designers to embed in Framer, Webflow, or any website.
Modern aesthetics in minimalism — a simple and elegant portfolio website concept for brand and graphic designers, featuring bold typography, smooth animations, and a dynamic portfolio CMS. Perfect for showcasing creative work and attracting clients.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Muzli.Me is your creative home — a place to showcase your identity, share your work, and gain the recognition you deserve, all while staying inspired by a vibrant, creative community.
A super-fun website where every frame is a cheeky surprise. Bold typography, playful doodles, and wild color choices come together in a delightfully anarchic experience that refuses to take itself too seriously — and that’s exactly why you can’t stop scrolling.
A website for beautifully crafted dinnerware collections. Designed with a minimalist touch that gives space for the products to shine, enhanced by subtle animations and smooth transitions that take the experience one step further.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
Macaly lets anyone create working apps and websites simply by describing ideas naturally through voice or text. No coding required. Perfect for rapid prototyping, internal tools, and responsive, SEO-friendly websites.
Figma officially filed for IPO on July 1, aiming to list on the NYSE under FIG. The company posted $749M in 2024 revenue (up 48% YoY) and turned profitable in Q1 2025 with $44.9M net income. With 13M monthly users and strong AI ambitions, it’s set to be one of the year’s biggest tech IPOs. The $1.5B raise will support debt repayment and future growth.
Some ideas refuse to die- they simmer in the background, waiting for their moment.
Seven years ago, we started building something we knew the creative world needed: a place where your full creative identity could finally live and breathe, not scattered across a dozen platforms like fragments of who you really are. Back then, we got close. Muzli Me was designed, built, and almost launched, but life had other plans and it never saw the light of day.
Still, the reason we started building it? That never went away.
Even as the design world changed, as new platforms came and went, we kept feeling the same itch- creatives deserved better than silos.
Today, that stubborn idea finally gets its day in the sun, and marks the first step into a future where your creative identity isn’t scattered, it’s connected, complete, and authentically you.
The Reality
Your Dribbble shows your polished shots, but not the messy sketches that got you there. Your Medium has your thoughts on design, but none of your actual work. Your Instagram captures your creative process, but hiring managers will never find it. Your LinkedIn looks professional, but feels nothing like the real you.
Your creative identity isn’t a single place- it’s everywhere. Your finished work and your rough ideas. Your professional projects and your 2am experiments. The tools you swear by and the articles that changed how you think, and maybe even the latest side-project you’ve been working on.
And so far, no one was telling it.
The Vision
Enter Muzli Me, a creative home base, but it’s not here to kill your other platforms.
Muzli Me gives you a place to showcase everything that makes you creative — not just one content type. Not just a single angle. It’s your entire creative DNA, finally visible, finally connected, finally you.
It’s not a competitor to your other platforms. It’s a spotlight for them. We don’t want to replace your Dribbble, Behance, YouTube, Medium, Instagram or Linkedin — we want to amplify them. Muzli Me connects the dots between everything you create and everything you are.
And for hiring teams? This means seeing the whole person, not just a polished slice of their work. It’s the best way to find people who truly match your design culture.
This is just day one. Muzli Me will grow and evolve with you, with us, with the community we’re building together. But today? Today we’re planting a flag for something the creative world has been missing- a place where you don’t have to choose which part of yourself to show.
Why Muzli Me?
A new kind of profile built for creative humans, not just portfolios.
All types of creative content, in one place
Share website links, shots, tools & resources, videos, articles, social content – everything that reflects who you are.
Share your work in seconds
Upload media directly from your computer- or simply paste a link from any popular creative platform, and we’ll take care of the rest. It’s fast, seamless, and built to fit your existing workflow.
Get discovered by the Muzli community
Your work becomes part of our curated feed, visible to hundreds of thousands designers, employers and creatives.
Find inspiration. Inspire others.
Muzli Me is not just a profile — it’s part of a living, breathing ecosystem of design inspiration.
At first glance, it feels like a digital design studio — but it’s actually floral art for events. A sleek, futuristic site with atmospheric visuals and refined motion.
Get a small taste of what it’s like to see things differently. Experience the ups and downs of ADHD, including hyperactvity, impulsivity, and time blindness.
Portal One design studio site is boldly styled in black and white, with slick line graphics, oversized standout typography, and surprising scroll-triggered animations.
Extract variables, styles, and assets from Figma · Auto-generate front-end code · Literally sync design and dev without the pain of copy-pasting stuff again
Evolve is a template for SaaS businesses but it can easily be customized to fit a wide range of business types. It features unique AI-generated nature backgrounds that will give your site an unique, epic look.
— the image‑to‑video tool animates stills into 5 to 21 sec clips, marking a bold step toward real‑time open‑world AI workflows amid a high‑stakes copyright battle with Disney & Universal
a one-person startup that built an AI-powered app builder using just text prompts. In a very short time, it turned into a major acquisition. For Wix, it’s a strategic step to boost its AI-driven website creation capabilities.
W®W // CNCPT E-commerce designed by Serhii Polyvanyi for BL/S®. Connect with them on Dribbble; the global community for designers and creative professionals.
Hardik Bhansali — Web Designer Portfolio. Discover the creative work of Hardik Bhansali, an Awwwards jury member specializing in web development, design, and visual identity.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A sleek, minimal portfolio by Mallard & Claret that gives the work room to breathe. Subtle typography, soft transitions, and a clean layout keep the focus on the projects — no distractions, just clarity.
Show off your work and sell your digital products with this premium personal template. Designed to make your portfolio look great and get you selling fast.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
by Dylan de Heer Never start a design system from scratch again. Foundation instantly generates Figma variables that perfectly match Tailwind CSS, turning hours of setup into seconds.
For the launch of Positive Retail’s Dalston store, we created a zine that acts as both a collectable and a cultural statement. Designed to reflect the brand’s rebellious undercurrent, the piece blends bold editorial design with unapologetic storytelling — a manifesto in magazine form
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
One of those sites where every scroll brings something new — playful animations, smooth transitions, and a story told through subtle visual moments. Clean, calm, and detailed to the micro level.
Weavy is a professional creative platform that unifies leading AI models with advanced editing tools in a visual, node-based interface — designed for designers, video editors, and creative teams.
Hanzo is a bold, high-converting agency website template for solopreneurs running productized services. Launch fast, sell smarter, and turn visitors into clients — without design headaches. Built for speed, clarity, and growth.
Apple unveiled its new “Liquid Glass” design language at WWDC 2025, introducing it across iOS 26, macOS Tahoe, and more. The sleek, translucent UI has quickly stirred up the design world, sparking widespread buzz and debate across the web.
Figma just introduced the Dev Mode MCP Server, a powerful new tool that lets teams programmatically access production-ready code from Figma files. It’s a major step in bridging design and development — streamlining handoff and boosting workflow automation across platforms.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
PeachWeb lets you build high-performance, stunning 3D websites — no code needed. Use our no-code builder or hire an expert. Fast, interactive, and perfect for designers and brands
Designing in Figma only continues to improve . This list, handpicked by experienced designers, showcases the most practical, cutting-edge, and timesaving Figma plugins available today. Whether you’re fine-tuning design systems, streamlining routine tasks, or pushing into new creative areas with AI, these plugins are here to assist every part of your process.
— — — — — — — -
📂 Workflow, Accessibility & File Management
These plugins are designed to save you precious time, ensure accessibility, keep your files organized, and allow you to focus on the design itself rather than repetitive technical tasks.
Grammar, style, and tone checking for UI copy directly in Figma.
— — — — — —
🧑💻 Development Handoff & Design Systems
These plugins bridge the gap between design and development, enabling seamless transfer of specifications, assets, and code, while supporting robust design system management.
Transform your static designs into a production-ready site with Webflow. Sync your design system — components, variables, and styles — to give your team the power to launch sophisticated sites quickly.
Instantly import company logos, brand colors, and fonts.
— — — — — —
🖼️ Visual Content & Asset Libraries
These plugins provide quick access to vast repositories of images, illustrations, and icons — whether created by photographers, illustrators, or AI tools — empowering designers to enrich their projects’ visuals.
Export interactive micro-animations as Lottie directly from Figma, with support for gradients, components, theming, and a library of 500,000+ animations.
AI image generation plugin for custom illustrations and graphics.
— — — — —
Figma’s plugin ecosystem has grown impressively since last year’s Best Figma Plugins for 2024, and 2025 takes it even further with smarter AI tools, deeper dev integrations, and highly polished visual utilities. We hope this list helps you speed up your workflow, experiment more fearlessly, and elevate the quality of your designs.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A striking brand site for the Montfort Group, uniting multiple business verticals under one roof. The design stands out with smooth, cinematic transitions and sophisticated use of 3D animation. Each section unveils a unique visual world, making the journey both elegant and intriguing.
A striking portfolio site with a balanced mix of large, colorful images and subtle white space. Smooth scroll and hover effects add a surprising, elegant touch without overwhelming the clean layout.
Step inside a virtual design playground — a shiny new site that turns Caffè Design’s office into an interactive hangout. Browse, doodle, and explore in a space that blends fun, color, and community with a wink.
I’m not sure if it’s the surreal capsule renders, the ultra-rounded corners, the oversized headlines or the buttery-smooth transitions — I can’t quite put my finger on what makes this site special. But I’ve come back to it at least ten times this month, trying to figure it out. And maybe that’s the answer: if I keep coming back, it must be something great.
Lunera is a modern SaaS landing page template designed for startups ready to scale. With clean design, flexible sections, and powerful features, it helps you launch fast and grow effortlessly.
Due to the special gradient transformation logic of Figma, the gradient transformation algorithm of this plugin at non-vertical or horizontal angles is not perfect.
Apple reveals the winners and finalists of the 2025 Apple Design Awards, spotlighting innovative apps and games across six categories — from inclusivity to visual excellence. A must-see roundup of this year’s top digital experiences.
A leading digital design conference in Copenhagen and online, featuring talks, workshops, and networking on themes like AI, inclusivity, and creative resilience.
A clean and elegant design, radiating bold confidence. Projects take center stage in full-screen glory, unapologetically. Thoughtful use of video, paired with seamless animations and transitions, brings everything to life without ever feeling overproduced.
We’re usually not fans of homepage carousels — but this one nails it. Striking image choices and a sharp tone pull you in instantly. The rest of the site holds up just as well, with bold contrasts and a layout that feels both fresh and intentional.
Kibo UI is an open-source React component library built on top of shadcn/ui, offering ready-to-use, fully customizable UI blocks and functional components. Designed for speed and flexibility, it helps developers build polished interfaces effortlessly.
Anthropic has unveiled Claude 4, a powerful new AI model that excels in handling complex tasks — from advanced reasoning to coding and long-term planning. With its enhanced “thinking” abilities and tool usage, Claude 4 is positioned as a serious assistant for designers working on intricate projects or workflows.
OpenAI announced a groundbreaking collaboration with legendary Apple designer Jony Ive. Together, they aim to develop a next-generation AI device that reimagines how we interact with technology. With a $6.5 billion valuation, this project merges cutting-edge AI with iconic industrial design — one to watch closely.
Karim Saab is a designer, developer, and art director creating websites and digital experiences that bring brands to life with personality, clarity, and a feel people remember.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
An immersive 3D gallery meets heritage craftsmanship in this stunning Gucci project. Explore virtual silk scarves reimagined by visionary artists, and even design your own.
A dark, elegant layout featuring bold purple hues, glowing 3D elements, and slick animated transitions. It’s a striking blend of futuristic energy and sleek professionalism.
A bold and elegant portfolio by Reform Collective — combining modern minimalism, rich textures, and refined micro-animations into a high-end digital design experience.
Osmo is a platform offering a curated library of interactive web components, animations, and development tools to help creatives build standout websites efficiently.
Portfolite | Agency — Agency and Portfolio Template designed to showcase your agency’s or portfolio’s. Ideal for creative designers, creative agencies, digital agencies, personal portfolios, landing pages and premium agencies
Google launched Stitch, a new AI-powered tool that allows designers to turn sketches, text prompts, and images into functional UI layouts within minutes. It integrates with Figma and offers effortless generation of multiple design variations.
This week, Google introduced Flow, a new AI filmmaking tool built for creatives using its advanced models — Veo 3, Imagen, and Gemini. Flow lets users create cinematic scenes from text prompts, with features like camera controls, scene editing, and asset management. It’s now available in the U.S. for Google AI Pro and Ultra subscribers.
Hosted by Bolt, this global hackathon invites designers, creatives, and “vibe coders” to turn their ideas into real products — no coding required. With $1M+ in prizes and a Guinness World Record attempt, it’s shaping up to be a major moment for the no-code movement.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
Layout exploration designed by stacy • multidisciplinary designer. Connect with them on Dribbble; the global community for designers and creative professionals.
When you hear the slogan ‘Just do it’, I think you will recognize it from a thousand. So I decided to make a concept for Nike trainers. A modern, trendy, stylish website is like a breath of fresh air for the fashion world. By the way, I made the trainers myself using various 3D technologies. Maybe Nike will make shoes in a similar color and style, and my team will be the first in line to buy them!
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
The artificial intelligence revolution is reshaping the world of UX/UI design. If you’re aiming to boost productivity, streamline workflows, and unlock new creative possibilities, AI tools can offer a serious edge.
From wireframing and prototyping to motion design, accessibility audits, and user research, this guide covers the most powerful AI tools for designers.
What it does: Built-in AI tools for copywriting, translation, automation, and image generation. Key Benefit: Speeds up daily design tasks inside Figma. Official site
What it does: Transforms prompts into working UI and prototypes using your Figma assets. Key Benefit: From idea to interactive prototype fast. Official site
What it does: A next-gen UI design tool focused on responsive, component-based design systems. Great for professional product teams. Key Benefit: A serious alternative to Figma with powerful design system logic. Official site
What it does: Generates beautiful React-based UI components and app screens using simple prompts or screenshots. Key Benefit: Quickly go from prompt to developer-ready code. Official site
What it does: Translates simple ideas into UI designs within seconds, focusing on ease of ideation and speed. Key Benefit: Perfect for early-stage product exploration and visual brainstorming. Official site
What it does: A collaborative design tool for building scalable products and design systems, with a strong focus on tokens and constraints. Key Benefit: Lets you design modern UI architecture in days, not months. Official site
Define your need: What do you want to automate or enhance?
Check integrations: Make sure it fits your workflow (e.g., Figma, Webflow).
Test it: Most tools offer free trials—try before committing.
Measure ROI: Will this save time or improve output?
Keep exploring: The AI landscape evolves fast.
AI Is Your Design Partner – Not Your Replacement
AI tools empower you to do more of what matters. They free up time from repetitive tasks, allowing you to focus on strategy, creativity, and problem-solving. Adopt the right tools, and you’ll find yourself working smarter—not harder.
Know a tool we missed? Let us know in the comments — we’ll update this list regularly.
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Airbnb just rolled out a major redesign — from its expanded app navigation to new services like personal chefs, spa sessions, and experiences you can book without a stay.
Designers and users are split: some praise the bold direction and fresh UI, while others call out clutter, dark patterns, and UX inconsistencies.
One thing’s certain: it’s got everyone talking. Take a look and decide for yourself → airbnb.com
Unveiled on May 13 during Google I/O, Material 3 Expressive introduces a bold, Gen-Z-inspired visual system with saturated colors, lively animations, and playful typography. It’s Google’s most personality-driven UI direction to date — and it’s coming soon with Android 16.
Running from May 15–21, NYCxDesign 2025 takes over New York City with a packed lineup of exhibitions, talks, and product launches celebrating innovation and creativity. Highlights include appearances by Faye Toogood, Artemest Galleria, and Carl Hansen & Søn — all showcasing the intersection of art, design, and contemporary culture.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
Rich textures, vintage color palettes, and layered scrolling effects create a dramatic, editorial-style website that feels like stepping into a stage set.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Struggling with user retention, friction, or product confusion? You probably don’t need another list of UX laws. Instead, it’s time to revisit and apply the UX principles you already know — the ones you’re ignoring every day.
UX principles
The Real UX Problem Isn’t Ignorance — It’s Compromise
Designers and product teams don’t break UX laws because they don’t know them. They break them because applying them feels inconvenient.
Feedback: You know users need it, but developers leave it out to meet deadlines.
Jakob’s Law: You value familiarity, but stakeholders want to stand out at all costs.
Error prevention: You advocate for it, but it’s pushed aside to accelerate shipping.
“Design isn’t just what it looks like and feels like. Design is how it works.” — Steve Jobs
5 UX Principles You’re Still Ignoring
Feedback Is Not Optional Why it matters: Every user interaction demands a response — whether it’s visual, auditory, or haptic. Common failure: Silent forms, invisible buttons, no success confirmation after saving data.
Progressive Disclosure Prevents Cognitive Overload Users shouldn’t face every option upfront. By revealing features gradually, you help users focus and succeed. Common failure: Settings menus that show 30+ toggles at once.
Cognitive Load Should Be Minimized The brain can only process a limited amount of information. Every extra element adds friction and decision fatigue. Common failure: Complex dashboards trying to be everything at once.
Natural Mapping Enhances Usability Controls should behave as expected — horizontally for width, vertically for height. Misaligned mappings confuse users. Common failure: A horizontal slider used to control vertical scrolling or height.
User Control Must Be Intentional Give users clear exits, undo options, and control over actions. Remove friction and frustration. Common failure: Modals with no escape key, auto-submitting forms, and dead-end flows.
Great UX Is Law-Abiding UX
Products like Notion, Spotify, and Google Maps succeed not because they’re trendy — but because they apply core UX principles with consistency and care.
Know the UX Law You’re About to Break
Before your next design compromise, ask yourself: “Which UX principle am I ignoring — and what will it cost the user?”
Because most bad UX doesn’t stem from bad ideas — but from ignoring good ones.
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
This year at Config 2025, Figma took another bold leap forward—transforming from a collaborative design platform into a full-stack creation environment. The announcements, which touched everything from prototyping and code to websites and marketing content, made one thing clear: Figma wants to be the one place where everything gets done.
Here’s our recap of the most important updates:
Figma Sites – Publish Live Websites from Inside Figma
Design it. Launch it. No code required. Figma Sites lets designers build and publish real, responsive websites directly from their design files. The platform includes smart blocks, layout tools, and even text-based animation prompts (e.g. “make text float like a feather”). A CMS layer is expected later this year. → It’s a direct challenge to tools like Webflow, Wix Studio, and Framer.
Figma Make – From Text to Functional Code
With Figma Make, users can describe features in plain language and get working code snippets in return. It’s powered by Claude 3.5 and allows designers and product teams to prototype functionality, not just interfaces. → Think Copilot, but built into your canvas.
Figma Draw – A New Home for Illustration
Figma is now a vector-based drawing tool, too. Figma Draw introduces expressive brushes, textures, and real-time stroke effects—making it possible to illustrate logos, icons, and visuals without ever leaving the design environment.
Figma Buzz – Scalable Content Creation for Marketing Teams
Figma Buzz brings AI-assisted content generation to the marketing world. It offers approved templates, AI-generated visuals, and copywriting tools for teams creating emails, ads, and social content at scale. → A collaborative, brand-safe alternative to Canva—built into Figma.
Bonus Announcements You Shouldn’t Miss
Grid 2.0 – Flexible layout grids with more responsive control
AI Prototyping – Generate flows, wireframes, and animations from text
Visual Search – Instantly locate components via image-based search
Deeper Dev Mode – New “Ready for Dev” and “Focus View” for handoff
GitHub Integration – Code-ready assets and tighter workflow alignment
Our Take
Figma continues to expand its territory—from design to development, content, and beyond. The direction is clear: fewer tools, more unified workflows.
And while the excitement is real, so are the questions. Will designers lose the magic of making when AI fills in the blanks? Can one platform serve everyone—from product to marketing to engineering—without becoming bloated?
Only time (and use cases) will tell.
For now, we’re excited. Inspired. And yes—already experimenting.
A bold, retro-inspired entertainment site that combines oversized typography, vivid color blocking, and playful motion to create an energetic, TV-era design aesthetic.
A futuristic fashion playground that fuses cyberpunk aesthetics, UI-coded layouts, and sci-fi storytelling into an immersive, anti-trend digital experience.
A next-gen design tool that empowers designers to craft fully interactive, high-fidelity prototypes — combining interface design, logic, and motion without writing code.
A suite of AI-powered tools that elevate image and video quality — ideal for designers seeking to enhance sharpness, reduce noise, and upscale visuals with precision.
Strida offers a smooth and powerful experience when presenting your work in a full-screen format. It combines bold Swiss typography, smooth animations, sidebar navigations, flexible CMS — everything to make your portfolio rock.
Figma’s European flagship event is around the corner. Expect announcements on new features and real-world workflows from some of the best product teams in the world.
The UXDX conference returns with hands-on workshops and talks from top UX and product leaders. The focus: how to build better products, faster, by uniting design, dev, and delivery.
What happened: A blog post accidentally published by Google revealed a major upcoming design overhaul called “Material 3 Expressive.” The update focuses on improved accessibility, responsiveness, and aesthetics — leveraging dynamic shapes, motion, and bold color systems. Internal studies claim users complete visual tasks up to 4x faster under the new system. Expected launch: Officially unveiled at Google I/O next week.
A beautifully crafted site that combines clean minimalism with organic, nature-inspired visuals. Thoughtful typography, subtle motion, and a soft color palette come together to reflect Heed Collective’s focus on ethical, purposeful branding.
A modern icon library built for flexibility and consistency. With multiple styles for each icon — linear, bold, two-tone, and more — it adapts to your design, not the other way around.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A vibrant, horizontally scrolling showcase bursting with bold typography, playful icons, and trend-driven color compositions that radiate creative energy.
A new tool by Meng To converts raw HTML into fully styled and layered Figma files using Claude 3.7, boasting 90% accuracy. Perfect for developers and designers collaborating closely.
A state-of-the-art SaaS & Digital Product Framer template crafted for the success of small businesses, startups, and digital product owners! Unleash your creative genius effortlessly as you tailor this captivating mini
What’s New: Adobe introduced a new AI model that generates ultra-realistic images, along with Firefly Boards (a collaborative moodboard tool), text-to-video capabilities, and natural image editing directly inside Photoshop.
What’s New: Figma integrated OpenAI’s latest image model, enabling designers to generate and edit images directly inside Figma using text prompts — including background expansion, object removal, and more.
What’s New: Canva launched a full-suite upgrade featuring Canva Sheets (a visual spreadsheet with AI insights), Magic Write, AI-powered photo editing, bulk content generation, and more.
A dynamic grid of nostalgic visuals blending pixel art, 2000s dreamcore, anime, and flat-lay fashion in a scrollable moodboard of curated aesthetic vibes.
Architects concept site I built that brings their latest album to life in a whole new way. The design plays with the album artwork through cool hover interactions and showcases upcoming tour dates and merch with subtle animations throughout.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Valentime brings a classic love story to life through contemporary design, blending 3D scenes, bold typography, and smooth transitions. This emotionally driven scroll experience uses Blender, Three.js, and GSAP to create a richly interactive and visually stunning narrative.
Step into a whimsical 3D world where you control a raccoon exploring a dimly lit stage set. Aurelien Vigne turns his portfolio into an interactive game-like experience, combining WebGL, narrative design, and atmospheric storytelling to immerse users in a creative space that’s as curious as it is technically impressive.
With its rich typographic hierarchy, dark editorial aesthetic, and immersive scroll-based storytelling, this site feels more like a high-end digital magazine than a traditional web page.
Phantom Studios presents a clean, grid-based layout elevated by bold typography, high-contrast visuals, and smooth interactive transitions. The design reflects their creative ethos — combining strategic clarity with a touch of expressive flair to highlight digital craftsmanship without overwhelming the user.
Build production-ready dashboards in minutes with this powerhouse UI kit. Featuring over 490 templates and 500+ components, Core 2.0 is fully responsive, optimized for Figma auto-layout, and includes both light and dark themes. Whether you’re designing or prototyping, it’s the ultimate tool for sleek, scalable admin panels — now with a React version included.
A bold, high-impact website template crafted for creative agencies and studios. Arpeggio combines strong visual storytelling with smart layouts that turn your portfolio into a client-conversion tool. With CMS support, sticky scrolling, and smooth animations, it’s a stylish and strategic choice for presenting work with flair.
A next-gen canvas for interactive design, Hana lets you prototype with events, states, real-time vector editing, and booleans — all in a smooth, visual interface. Built by the team behind Spline, it bridges the gap between visual creativity and production-ready output, making complex motion and logic accessible for designers.
Capture and share instant bug reports with built-in video replay — no extensions, no friction. Dummi makes it easy for teams to spot, track, and fix UI issues fast with automatic console logs, device details, and visual steps included in every report.
This Dutch design studio is making waves with bold, motion-driven branding for top names like F1, ESPN, and Eredivisie. With a laser focus on sports culture and immersive campaign visuals, their site showcases a vibrant, fast-paced portfolio that reflects a deep passion for storytelling through design.
This Behance feature captures the serene, modern essence of a new bar concept through geometric logos, soft color gradients, and elegant typography. Designed for both social and relaxation settings, the branding transitions from day to nightlife with a visual identity that feels calm, curated, and refreshingly minimal.
A bold portfolio blending horizontal scroll, cinematic transitions, and Difference Mode visuals. Built in Webflow with GSAP, it turns case studies into immersive stories and design into a high-voltage experience.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
A bold, playful concept that reimagines music interaction with vivid colors, abstract symbols, and a minimalist mobile UI. Combining sound, value, and visual hierarchy, this experimental interface makes playlist navigation feel more like a game than an app.
This omnichannel marketing platform stands out with a striking orange-black palette, oversized type, and 3D data cubes. With a clean, structured layout and strategic use of motion, Secco² translates complex marketing services into a bold, confident brand presence.
A futuristic interface brought to life with glowing dark themes and smooth 3D transitions. Bold typography and interactive animations guide you through a visually immersive portfolio.
A beautifully minimal experience that blends fashion-tech with elegant precision. Neutral tones, refined typography, and 3D visuals spotlight an innovative, shape-shifting mannequin.
An elegant virtual showroom presenting architectural surfaces through immersive, 3D-modeled interiors. Blending minimal aesthetics with spatial storytelling, the site reimagines how we explore materials and design.
A playful collection of 60 stylized 3D icons, perfect for gaming interfaces or vibrant UI mockups. Each asset is fully rendered and optimized for drag-and-drop use in your next project.
A sleek UI kit packed with modular dashboard components and clean data visualizations. Perfect for building SaaS platforms or admin panels with a professional, modern feel.
A bold, high-impact website template designed for premium brands and portfolios. With dynamic layouts and rich typography, it’s ready to launch straight out of the box.
What if iconic UI screens were real? This playful series reimagines familiar digital moments — like Google’s dino run or Duolingo’s 404 owl — through surreal, AI-generated scenes. A brilliant blend of humor, nostalgia, and design culture that’s got designers everywhere recreating their own.
An in-depth breakdown of a cinematic portfolio site for a French filmmaker duo. This Codrops case study explores how storytelling, scroll-based animation, and custom WebGL transitions come together to create an immersive, emotionally-driven digital experience — built from Figma to shaders, with every detail finely tuned for fluidity and elegance.
A global design studio from Paris blending bold typography, smooth motion, and minimalist elegance. Their site showcases architecture, events, and objects through a crisp, highly curated digital experience.
……
🏆 Muzli Community Uploads
Want to get featured? Upload your work to Muzli.me
A striking collection of experimental watch faces playing with motion, typography, and contrast.From kinetic type to pixel textures, each concept reimagines timekeeping through bold design thinking.
A no-code tool that transforms static websites into interactive experiences with hover-activated previews. Ideal for travel and lifestyle brands, Hovr’s refreshed identity features playful motion and a bird mascot, Nimbus, symbolizing exploration and perspective.
A bold, kinetic portfolio from the Amsterdam-based designer, blending experimental branding, motion graphics, and a curated mockup store. A standout example of personal identity done right.
A London-based studio blending Caribbean and British roots to craft immersive digital experiences. Their portfolio showcases bold branding, fluid motion, and a playful, award-winning aesthetic.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
A clever and chaotic reimagining of classic UI moments using AI — from Google’s offline dino to Duolingo’s crying owl and LinkedIn’s cupcake celebration. Familiar layouts, now brought to life with a humorous and emotional twist.
A bold, futuristic site with a sleek dark UI and hypnotic motion graphics. Every detail, from the modular schematics to the interactive visualizers, is designed to reflect the power and precision of the animation framework.
This studio site makes a statement with oversized typography, glitchy transitions, and a sleek black-and-white palette. A striking blend of minimalism and personality-driven motion design.
A clean and elegant portfolio that balances white space, oversized typography, and fluid transitions. The refined layout and smooth animations highlight a meticulous attention to front-end detail.
A polished UI kit designed for modern SaaS products, combining clean layouts, smart data visualizations, and a futuristic aesthetic tailored for AI-driven platforms.
Premiere Pro 25.2 adds AI! Use Generative Extend to lengthen clips, AI Media Intelligence to search footage, plus auto caption translation & improved color.
V7 has personalization turned on by default, raising the bar for how well we can interpret what you want and what you find beautiful.V7 introduces Draft Mode, half the cost and 10x the speed. It’s the best way to iterate on ideas ever.
A polished platform for team brainstorming and strategic planning, with a clean interface, intuitive workflows, and real-time collaboration tools that keep creative teams in sync.
A curated collection of stunning web animations built with GSAP. From playful microinteractions to cinematic page transitions, this showcase proves just how far creative code can go.
With a grid-based layout, floating toast, and kinetic typography, this site turns a quirky scientific idea into an engaging, interactive storytelling experience.
A bold, high-contrast site combining editorial-style layouts, layered motion, and avant-garde aesthetics to reflect a unique creative voice in digital fashion.
……
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Immersive 3D design, ambient lighting, and spatial navigation transform the site into a digital playground that feels like stepping into a high-concept creative loft.
Navigate’s website captivates with its unique illustrations that evolve as you scroll, complemented by subtle animations that enhance the storytelling experience.
A visually refined site built on a precise grid, enriched with elegant transitions, crisp typography, and soft animations that elevate the minimalist aesthetic.
Bright colors, bubbly 3D typography, and seamless scroll-triggered transitions bring this site to life with a fun, game-like energy that keeps you engaged from the first scroll.
Gradient Color Generator allows you to create artistic gradient styles with dynamic color configurations in one click. It supports exporting in various formats, including videos and code.
Launch your design business with a conversion-focused portfolio template. Built with Framer’s powerful CMS, featuring projects, a blog, and professional quote generation. Everything connects seamlessly.
This latest installment by Chera Cheramakara showcases imaginative character designs that blend elements from Disney, movies, games, and manga. Each illustration bursts with vibrant colors and dynamic compositions, offering a fresh, surreal twist on familiar figures.
Oversized red type, pixelated imagery, and a rigid grid layout collide in this expressive portfolio. It’s raw, rebellious, and quietly emotional — brutalist design with something personal to say.
A deep-dive post on Codrops where Stas Bondar breaks down the creative and technical process behind his award-winning portfolio. Featuring advanced animations with GSAP, custom shaders, WebGL effects with Three.js, and smooth transitions using Barba.js — it’s a masterclass in interactive web design.
……
🏆 Muzli Nominee of the Week
Think your project deserves the spotlight? Submit it to me.muz.li
The website showcases the Sigma BF camera with a minimalist design that emphasizes advanced technology and creativity. It clearly highlights the product’s features in a clean, modern aesthetic.
Artpill Studio crafts a unique digital experience where storytelling and design seamlessly merge. As you scroll, a playful interactive journey unfolds, guiding you through bold typography, striking visuals, and dynamic animations. A masterclass in engaging, immersive web design.
Blending cutting-edge technology, design, and performance, 21-TSI reimagines the sports industry with a futuristic and immersive digital experience. Through dynamic motion effects, striking visuals, and precision-driven storytelling, the site reflects the brand’s ambition to revolutionize sports technology.
Composites.Archi takes you on an interactive journey through the power of composite materials in architecture. With fluid animations, striking 3D transitions, and bold typography, the site masterfully blends storytelling and technology to showcase the fusion of strength, lightness, and cutting-edge design.
This captivating website for The Scaling Era by Stripe Press redefines digital storytelling. With an endless vortex of text and images shifting in multiple dimensions — spinning, scrolling, and responding to user interactions — it creates a mesmerizing, immersive journey into the book’s themes of growth and complexity.
Pixura is a high-quality UI kit designed for AI-powered image generation apps, featuring over 150 beautifully crafted screens. With neatly organized layers, light & dark mode support, and a component-based design system, it offers a seamless and modern user experience. Perfect for designers working with AI-driven creative tools.
Bring interactive animations to life in Framer with the Rive Plugin! 🎨⚡ This tool allows designers to seamlessly integrate dynamic, responsive animations into their projects, enhancing user engagement without sacrificing performance. Perfect for adding fluid motion and interactive elements with ease.
A sleek and modern pitch deck template designed for AI-driven data analytics presentations. Featuring 25 customizable pages, this deck includes dynamic charts, well-organized layouts, and a dark, futuristic aesthetic. Ideal for startups, tech companies, and professionals looking to showcase AI-powered insights with clarity and impact.
Enhance your design decisions with AI-powered predictive eye-tracking! The Attention Insight plugin for Figma helps you analyze where users are most likely to focus, optimizing layouts for better engagement. Perfect for UX designers looking to fine-tune visual hierarchy without A/B testing.
This bold and dynamic rebrand for Nomint balances modern typography and sleek aesthetics to create a unique identity. With clean lines, a strong color palette, and a refined visual system, this project is a masterclass in contemporary branding. Perfect inspiration for designers looking to craft impactful and memorable identities!
This creative agency’s website is a bold exploration of interactive design. With smooth animations, unconventional layouts, and a dynamic user experience, Deux Huit Huit challenges the norms of web design. Whether you’re looking for inspiration in motion, typography, or UX innovation, this site is a must-see!
This charming branding project brings warmth and personality to The Nest, a café with a unique aesthetic. Featuring soft earthy tones, elegant typography, and an adorable illustrated bird mascot, the design is both sophisticated and inviting. The packaging and patterns create a delightful, whimsical brand experience that feels as comforting as a fresh cup of coffee. A perfect blend of minimalism and playfulness!
……
🏆 Muzli Nominee of the Week
Think your project deserves the spotlight? Submit it to me.muz.li
A futuristic and immersive digital experience that brings venture capital into the next dimension. Continuous VC’s website blends cutting-edge 3D visuals, smooth animations, and dynamic scroll-based interactions, creating a seamless and engaging user journey. This high-tech, elegant design reflects the company’s innovative approach to investment and strategy.
This striking UI design captures the essence of Tesla’s Cybertruck with a dark, high-tech aesthetic. The sharp typography, immersive visuals, and sleek interface create a futuristic experience that mirrors the truck’s angular, sci-fi design.
.
💡 Stay Inspired Every Day!
Follow us for a daily stream of design, creativity, and innovation. Linkedin | Instagram | Twitter
Canvs Editorial Meaningful stories and insightful analyses on design
When you’re a designer, there’s always more to do than time allows. There’s always the small mundane tasks that take up most of the time, hindering work.
That’s where Figma plugins come in to your rescue.
Best ones aren’t about adding bells and whistles to the design. They’re uber practical and they make a noticeable difference to how quickly you can bring your idea to fruition.
We have hand-picked and rounded up a few Figma plugins that you may find useful.
This plugin will help you generate sleek and minimal graphs. All you have to do is drop in your data from Excel, CSV, JSON, or type it in directly, and watch it being created into a graph. You can also explore different visual patterns for your visualisation.
When it’s time for developer hand-off, detailing measurements, specs, and redlines can take hours. But with Figma Redlines, you can simplify that entire process.
This plugin allows you to generate clean, customisable redlines in seconds, with control over styles, colours, and units. It lets you measure and annotate everything without the usual hassle.
With Super PDF you can import, export, merge, and view PDF files directly within Figma and FigJam. You can also combine multiple frames into a single pdf and export it.
This plugin gives you a range of 60+ effects to apply directly to your images. Select where you want to apply the effect, apply the effects, and save. You can also tweak it or reapply the effects as needed.
From essentials like brightness and contrast to more experimental effects like noise displacement and ripple, it’s designed to let you experiment while keeping the process tight.
You can create stippling effects on your design with this plugin. All you need to do is pick an image or frame, adjust the settings (you can play around with shape, size, spacing, brightness, and more) according to your preference, and you’re all set.
As the name suggests, with this plugin you can create radial patterns by copying and rotating elements. You can easily edit every copy it generates, since it builds upon Figma components. You can choose number of copies needed, the rotation radius, and even skipping certain elements.
This plugin lets you skew any layer or group of layers easily. Pick your layer, move the sliders to skew the layers up to ±90° in each axis, and you’ll see the changes happen in real-time.
With this plugin, you can quickly generate gradient maps from any image in Figma. For that, you need to select an image, choose from a set of predefined gradients, or create your own. You can add up to 8 colours.
Vector Fields plugin will let you experiment and generate patterns of your liking. You can create visually compelling patterns using dots, lines, arrows, triangles, or even custom SVGs. Just pick a frame, and the plugin automatically adjusts everything to fit.
And that’s the lot!
We love curating lists of Figma resources which can help designers do their best work.
Step into a world where blockchain, fantasy, and interactive design merge into an immersive experience. With mesmerizing animations and real-time interactions, Spellverse lets you explore a universe like no other — where every move unlocks new magic. ✨
A mesmerizing digital experience that takes you on a scientific and artistic journey to authenticate a lost work of Vincent van Gogh. Through stunning visuals, interactive storytelling, and meticulous research, Elimar blurs the lines between art, history, and technology.
National Geographic presents a breathtaking interactive journey through the Amazon, blending stunning visuals, dynamic typography, and micro-animations to bring the rainforest to life. From towering glaciers to ancient civilizations and diverse wildlife, this site is a masterpiece of digital storytelling.
Create stunning mockups online for free with Thumb by Craftwork. Effortlessly upload your designs, customize mockups in your browser, and instantly export high-quality shots for your portfolio, Dribbble, or Instagram. No software or skills required!
A powerful Figma UI Kit designed to help you launch projects up to 10x faster. With multi-theming, variables, and full customization, Sort UI Kit streamlines your design process, making it perfect for startups and freelancers.
A powerful Figma template designed for stunning App Store previews. With 360+ ready-to-use screens, multiple device mockups, and full customization, you can craft high-converting screenshots with ease.
A powerful plugin with 18 design tools for generating mesh gradients, patterns, backgrounds, and unique effects — all directly inside Framer. Perfect for adding dynamic visuals to your designs with ease.
A sleek Framer and Figma template designed for AI startups and SaaS businesses. Featuring modern design, SEO optimization, responsive layouts, and animated effects, Verdely helps you launch high-converting pages effortlessly.
An experimental WebGL effect that wraps animated text around a glass torus, creating a dynamic and immersive visual. Powered by Three.js, this interactive demo showcases refractions, light distortions, and smooth text warping in real-time.
A design project bursting with vibrant colors, geometric patterns, and a seamless blend of tradition and innovation. The visual language creates a strong brand identity, with distinctive typography and carefully curated photography, emphasizing the unique character of the brand.
A Strikingly Elegant Landing Page Charlie Osborne’s website is a masterclass in minimalist, high-impact design. The layout seamlessly balances bold typography, negative space, and refined interactions, creating an immersive experience.
Equinox is a comprehensive SaaS template built for Framer, consisting of 6 main pages — home, roadmap, pricing, contact, blog, and blog article. It features everything you need for an effective marketing website.
Discover the ultimate Framer template for building meaningful connections through events. Designed for communities, organizers, and individuals seeking seamless interaction, this template is your go-to solution for event management.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Designed for ease of use, this free SaaS template is ideal for showcasing services and capturing leads. Download today for free and launch a website that’s both visually appealing and conversion-focused.
Add a fun and playful touch to your designs with this Inflated 3D Puffy Font! Featuring 28 high-resolution PNG images (4000x4000px), this set is perfect for bold typography, eye-catching headlines, and creative projects.
Introducing Oslo, a sleek and modern creative portfolio template build in Framer. Showcase your work in style with this fully customizable and easy-to-use template. With a clean, minimal design, Oslo is perfect for designers, photographers, and artists looking to make a strong visual impact. It’s free and ready to use in Framer. Make your portfolio stand out and impress everyone!
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Hello there, designers! 👋 Asking the right questions before starting a new project has been a game-changer for me.
I know it’s easy to skip the chit-chat and go right into Figma, but trust me: with over 6 years of UI/UX experience, I’ve found that the right questions are the building blocks of every successful design project.
They’re like the GPS that stops you from driving off a cliff or at least into an area of endless revisions.
So take a coffee and let’s talk about why this is important, what questions to ask, and how to ask them like a pro.
I’ll even cover some stories and pro suggestions that you can use. Ready? Let’s go!
Why Most Design Projects Fail (And How to Avoid It)
Over two-thirds of projects fail because no one tries to get everyone on the same page from the very start. What about the fallout? Wasted time, money delays, and confusion lead to a cooked mess.
I’ve had the experience of designing a feature only to discover that it couldn’t be built because of an unknown old system. Oof.
Here’s where questions come in handy. Asking the correct questions at the start helps to avoid unfortunate events by setting targets, sharing limits, and keeping everyone on the same page.
Do you want an idea of what I’m saying? Take an infographic titled “The Cost of Skipping Questions”: one side shows a smooth project schedule with smiling people (time and money saved), while the other shows an irregular pattern of delays and dollar signs flying out the window (chaos and rework).
Spoiler: you want the first one.
Here’s my tried-and-true checklist of pre-project questions for designers.
I’ve divided them into six main groups (plus a few more!), with detailed examples and an explanation of “why it matters” from my personal experience. Let’s go in.
1. Project Goals & Business Impact
What is the main business goal? (e.g., boost conversions and decrease abandonment)
What is the one statistic that defines success in this project?
Who are the important stakeholders, and what do they expect?
Why This Matters: I previously thought that the client cared more about aesthetics than their value, but talking about goals early saved me from a complete revision.
Pro tip: Ask stakeholders what are their top goals. Unresolved problems here could put at risk the project later.
2. User Research & Target Audience
Who is the main user group? (Age, location, behavior, and pain points.)
Have we done any user research or surveys?
What are some common feedback from consumers in this industry?
No personas? If you can do a quick user interview that would be helpful.
Pro Tip: For a recent SaaS project, asking for user personas upfront led to an onboarding flow that users loved.
3. Competitive & Market Analysis
Who are the top competitors, and what works well in their UX?
What makes this product/service stand out?
What 3 things do users hate about competitors’ products?
Should we follow industry trends or break them?
I’ve seen projects fail because no one asked about competitors, don’t sleep on this.
Explain your response! This can help set your project apart.
4. Project Scope & Deliverables
What specific screens, pages, or features are needed?
Which platforms will this design run on? (Mobile, Web, Tablet, SaaS)
Are there any tech stack limits or frameworks to consider?
What is the needed level of interaction and animation?
These questions once helped to clarify a confusing feedback loop during a tight deadline contract.
5. Content & Branding Guidelines
Do we have a brand style guide? (Colors, typography, imagery)
What type of content will be included? (Text, images, videos)
Is there a tone of voice to align with?
Who’s handling copywriting and image selection?
I continually confirm content timelines — once, a “rush job” delayed because no copy was available.
6. Development & Technical Constraints
What tech stack is the dev team using?
Are there CMS, backend, or third-party integration limits?
What’s the performance/load time standard?
Invite a dev to your all meetings at least once a week. I once designed a feature that couldn’t be built. 🤦
Bonus 7. Post-Launch & Iteration Strategy
How will success be measured post-launch? (Metrics, A/B testing, Heatmaps)
Is there a plan to collect user feedback?
Will there be continued design support?
Pro Tip: Asking this shows you’re thinking long-term, it wows clients every time.
How to Ask Questions Like a Pro
It’s not only important to ask, but also how. You don’t want to sound like someone who is questioning someone suspicious, right? Here’s how to get meaningful responses without feeling awkward:
Collaborative Speaking: “What’s success?” vs “How can we define success together?” It is less combative and more team-oriented.
Timing Tips: Set goals at the very start and save limits for planning sessions.
Go more deeply: If they reply, “Make it user-friendly,” ask, “What does that mean for you? Do you have an example?
Building trust is the goal, not just giving answers. Do this, and you’ll be the designer everyone wants to work with.
Personal Trick: I usually ask for examples of designs they enjoy (or dislike). It’s related to a cheat code for aligning expectations.
Pro Mistakes to Avoid (Lessons from My Experience)
I messed up so you didn’t have to. Here are two important ones:
Mistake #1: Assuming Stakeholders Agree on Goals
Arrange a “Goal Prioritization” voting session during the start. When the top three goals are not aligned, it serves as a warning sign.
Mistake 2: Skipping Technical Chats with Developers.
Involve a developer in discovery meetings. I once planned a feature that could not be built because of CMS limitations, resulting in a whole redesign. Yikes.
How to Scale This Process (For Agencies & Teams)
Have a team or agency? Here’s how you make this work:
Document everything: Set up a “Project Kickoff Hub” in Notion or Confluence to collect all answers. It’s a lifesaver for onboarding and mid-project updates.
Mentor juniors: Teach them to ask “Why?” five times to get to the bottom of the problem. It improves critical thinking fast.
Template it: Here’s an email-friendly stakeholder interview starter: Subject: Let’s Crush This Project- Quick Questions to Start Body: “Hi, [Name], I’m excited to get started! Could you please share your opinions on [insert 2–3 critical questions] to ensure that we are on the same page?
After 6+ years of improvement, this strategy is quite successful.
Final Words
Asking the correct questions not only avoids disasters but also helps you to do well. This approach will help you create better designs, stay on schedule with projects, and wow customers (and colleagues).
Try these on the next task and feel the difference.
Choose 5 questions from this list, apply them to your next project, and then tag me on Instagram with the results for a free design review!
Oh, and what is your must-ask question? Please share your thoughts in the comments section below; I’d appreciate hearing them!
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
1X is a ai robotics company producing humanoids capable of human-like movements and behaviors. Founded in 2014, the company is headquartered in San Francisco Bay and Norway. 1X’s mission is to create an abundant supply of labor via safe, intelligent humanoid robots.
Humva provides free customized spokesperson videos and thousands of video presenters for social media content, testimonials, product introductions and more, powered by generative AI and most advanced lip-syncing technology.
SkyCargo — Air Freight Management Dashboard by Odama
.
.
.
.
.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Hey designer! Ready to time-travel into the future of typography? So, Buckle up — 2025 is all about big ideas, tech magic, and fonts that literally shape culture!
Typography is more than just picking a font it’s about storytelling, emotion, and creating a visual language that resonates with your audience. From brutalist typefaces to fonts bringing eco change, the trends this year are wilder than ever.
So, let’s dive in. No pressure, no rules — just inspiration! 😉
1. Pixelated Typography
Raw, retro, and unapologetically digital. These fonts claw inspired by early digital displays, arcade games, and 8-bit aesthetics, these blocky letterforms bring a nostalgic yet futuristic feel to design.
Whether sharp and structured pixel type is proving that what’s old can feel fresh again.
Its best for futuristic branding, digital art, playful and tech-inspired designs!
Brutalist type is still going strong, but 2025 is giving it a softer edge. Think bold, blocky forms with a little warmth — thicker curves, subtle imperfections, and a more human touch. It’s still confident, still striking, but feels less harsh and more inviting.
Best for editorial layouts, web design, and brands that want to stand out without shouting.
Ever felt like a font has a “voice”? This year, typography and sound are becoming more connected than ever. Kinetic text is evolving — responding to music, voice, and even ambient noise.
Words aren’t just being read; they’re felt, dancing to a beat.
Best for video content, interactive storytelling, and brand identities that live in motion.
The liquified trend from a few years ago is getting a futuristic makeover. 2025’s take? High-gloss, metallic type that looks like it’s melting into the screen.
Think fluid, reflective, and almost 3D — like letters dipped in liquid metal. It’s digital, dreamy, and a little hypnotic.
You’ll see it in tech branding, fashion campaigns, and experimental UI designs.
Sustainability is more than just a trend — it’s a movement. Eco-typography focuses on fonts that are designed with the environment in mind, using minimal ink, energy-efficient rendering, and natural, earthy aesthetics.
It aligns with the growing demand for eco-conscious design and resonates with environmentally aware audiences.
Pro tip– Use eco-typography for brands that want to highlight their commitment to sustainability.
Not all typography is about clarity. Some of it thrives in the chaos.
Glitch-inspired fonts are growing, with fragmented letters, pixelated distortions, and overlapping layers that feel like a digital transmission on the edge of breaking.
It’s messy, raw, and 100% human. Best for edgy branding, album covers, and designs that embrace imperfection!
Not everything has to be sleek and digital. Handcrafted, organic typefaces are gaining momentum for their raw, human feel.
These fonts mimic the imperfections of hand-drawn or brush-written letters, offering a warmth that stands out against all the polished, pixel-perfect aesthetics we’ve grown used to.
Its best for sustainable brands, personal projects, and designs that feels human.
Variable fonts let you tweak weight, width, and contrast making designs more flexible and responsive.
It’s a small shift that makes a big difference offering more creative freedom while keeping things smooth and seamless across different screens.
Whether it’s a bold, eye-catching headline or an ultra-readable body text, variable fonts adjust effortlessly, ensuring typography feels just right in any context.
2025’s typography trends are a rollercoaster, whether you’re experimenting with holographic effects, AI-generated fonts, or eco-friendly typefaces, there’s no limit to what you can create.
So go wild, break the rules, and maybe let an algorithm pick your next font. After all, the future’s already here — and it’s typed.
Happy designing, and don’t forget to share your creations with the world!
Aaaand! What trend are you most excited about? Let’s talk fonts 💬
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Midlife Engineering is a sound therapy tool for the creatively restless. Craft ambient soundscapes to ease stress, sharpen focus, and spark creativity.
Viper — is a Creative Portfolio and Agency Landing Page Template designed for showcasing your agency’s or portfolio’s landing page. Ideal for portfolios, creative agencies, brand agencies, personal portfolios, landing pages and creative agencies or portfolios.
Premium e-commerce Framer template designed for fashion and lifestyle brands. Features seamless Shopify integration. Built with performance and user experience in mind, with clean transitions and layouts that work perfectly on any device.
Fiverr Go empowers freelancers with advanced AI to scale their business. Use the Personal Assistant to automate communication, and harness the AI Creation Model for instant, on-brand work — boosting creativity, productivity, and control.
CommentEasy is a simple image feedback tool where you can: • Draw on images & add voice notes • Share instantly • Get feedback from anyone (no login needed) Perfect for everyone. Skip the email chains — just draw, speak, and get your point across instantly
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Post-Production company based in the heart of Paris, dedicated to audiovisual production, advertisement, digital content, music video feature films & documentaries.
A sleek and premium agency template designed with precision, ideal for creatives & studios. Ora’s visually striking layout and dynamic features provide a compelling canvas to share your portfolio effectively.
Build beautiful Shopify e-commerce sites on Framer with the leading integration built for brands to scale. Design natively in the canvas with fully customizable components while your custom Shopify metadata stays perfectly in sync with the CMS.
Transform your Figma workflow with Gradients Lab™ — the ultimate plugin made exclusively for creating, customizing, and managing stunning gradients in Figma.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This is a story about a designer and a developer making a website. But something kept going wrong. Who is to blame and what to do about it — that’s up to you to decide.
An unique portfolio and agency template with fluid animations, bold typography, and an animated background. Includes Home, About, Work (CMS), and Contact page. Fully accessible and customizable, perfect for showcasing creative work.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Explore Pelata Pieces by Finnish Design Shop and turn your home into a playground. Let the fun and games begin — discover your new quirky favorite games today!
At Dropbox, our Brand Guidelines help us infuse everything we make with identity. From icons to illustration, logos to language, this collection is the foundation for how Dropbox looks, feels, and sounds like Dropbox.
Showcase your portfolio with a professional, distraction-free template designed for agencies and creative professionals, combining intuitive management with a refined, elevated design.
The new Pika brings more control, realism, and creativity to AI video creation. With enhanced editing, smoother motion, and improved rendering, you can turn any idea into stunning visuals effortlessly.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Designing isn’t just about hopping on the latest trends , it’s about creating experiences that truly matters the most. As the digital world is changing faster than ever, UI design is shifting to meet new challenges and opportunities.
What’s your take , will simplicity, bold visuals, immersive experiences or designs that truly connect with users define the best designs of this year?
So, without further ado, let’s dive into the top UI design trends for this year!
Big Typography uses oversized, bold text as the main visual element.
Large, bold fonts dominate the composition, turning text into a key visual element. It grabs attention, enhances readability, and adds personality to the design, often paired with clean, minimal layouts.
Emoticon style combines text with emojis, making them a key part of communication.
It merges emojis with text seamlessly within paragraphs, adding personality and emotion to the design. It creates a more expressive, engaging way to interact while enhancing the overall interface!
3D elements have moved beyond decoration to play an active role in design. They add depth, interactivity, and realism, creating more engaging and immersive experiences.
These elements guide users and enhance how they interact with content, making designs feel dynamic and modern.
Bento grids create clean, organized layouts that are responsive and flexible, ensuring designs look great on any device. They balance structure and aesthetics, making interfaces functional and visually appealing.
It’s perfect for showcasing diverse content while maintaining clarity and hierarchy. This approach makes designs feel modern, engaging, and user-friendly.
As designers, we have the power to shape how people interact with the digital world, keeping up with trends is cool, but the real magic happens when we create something totally fresh.
And I’ve seen how simple design tweaks can turn users frown upside down. It’s those little aha! moments that make this job awesome!
So, let’s get creative, stay curious, and always remember the best designs don’t just follow trends — they set them!
Thanks for reading, and please do share this article if you enjoyed it 💜
Check out my X, Instagram & LinkedIn and yes stay tuned for more amazing content!
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The boundaries between art, design, and technology are becoming increasingly blurred. This case study delves into the creation of The Skull Crusher website — an experimental extended reality (XR) project that uses hand-tracking technology to immerse users in a digital art experience. Through this, we’ll explore the process of merging creativity with technology and provide actionable insights for designers and developers in the art and design industry.
The Concept: Blurring Lines Between Art and Interaction
The Skull Crusher website wasn’t just a project — it was a vision to merge art with cutting-edge technology. By combining hand-tracking mechanics with a story-driven environment, the goal was to create an engaging and artistic digital product. The key takeaway? Digital products in the art and design industry must evoke an emotional connection while maintaining functionality.
Actionable Insight: Always start with a compelling narrative or artistic vision. This becomes the foundation for both the design and technical approach.
Challenges: Turning Vision Into Reality
Achieving Seamless Hand Tracking: Designing intuitive hand controls in a browser-based XR environment required technical precision.
Creating a Cohesive Experience: Integrating storytelling, sound, and interaction into a single, seamless experience demanded a holistic approach.
Actionable Insight: When tackling technical challenges, prioritize the user experience above all. Technology is a means to an end, not the end itself.
The Process: Designing for Immersion
Ideation and Storyboarding
The project started with brainstorming sessions to conceptualize the storyline and interactions. A simple narrative — a battle against a dark magician — formed the core.
2. Building With Three.js
The 3D environment was created using Three.js, allowing for realistic lighting and interactive objects.
Hand-tracking mechanics were developed using Google Mediapipe to recognize gestures like aiming, shooting, and stopping.
3. Iterative Testing
User feedback was crucial to refining the controls and ensuring they felt natural.
Multiple rounds of testing helped optimize performance without compromising visual quality.
Actionable Insight: Iteration is your best friend. Build, test, refine — and repeat until you strike the right balance.
Results: Impact Beyond the Screen
The Skull Crusher website demonstrated how art and technology could merge to deliver:
Emotional Engagement: Users felt a deep connection to the story and interactions.
Technical Innovation: A seamless hand-tracking interface showcased the potential of XR on the web.
Creative Inspiration: The project has inspired other designers and developers to explore similar intersections of art and technology.
Actionable Insight: Measure success not just by metrics but by the emotional and creative impact your product leaves on users.
Takeaways for Designers and Developers
Embrace Emerging Technologies: Stay curious and experiment with tools like hand tracking and XR to push boundaries.
Collaborate Across Disciplines: Work closely with storytellers, sound designers, and developers to create holistic experiences.
Focus on User-Centric Design: Always prioritize the end-user’s experience, ensuring technology serves a purpose.
Conclusion
Designing and building digital products in the art and design industry is about more than aesthetics — it’s about crafting experiences that resonate. The Skull Crusher project showcases how creativity and technology can converge to create something truly immersive. By focusing on storytelling, iterative design, and user-centric innovation, we can continue to push the boundaries of what digital products can achieve.
What’s Next? If you’re inspired by this case study, consider how you can integrate emerging technologies into your projects. Start with a bold idea and let creativity and technology guide you to something extraordinary.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Canvs Editorial Meaningful stories and insightful analyses on design
Did you know that over 1 billion people worldwide live with some form of disability? Yet, accessibility often gets overlooked in design.
That’s starting to change. The core of this understanding is that addressing the “lowest” common denominator by virtue addresses the total pool.
Thanks to AI, we’re moving from just meeting basic accessibility standards to actually creating better, more inclusive experiences.
With tools like voice assistants and real-time captions, AI is helping people interact with the world in ways that feel more natural and intuitive.
Let’s take a closer look at some products that are leading the way.
1. Voice interaction: From convenience to necessity
Voice assistants like Alexa, Google Assistant, and Siri have shifted from being just convenient tools to essential ones, especially for people with physical disabilities. They offer a way to interact with devices without the need for touchscreens or keyboards, which can be limiting.
For instance, someone with limited mobility, with voice commands, can control their environment — adjust the thermostat, turn off lights, or set reminders — without needing to move.
It isn’t just convenience, it’s independence.
For designers, this shift means rethinking navigation. Interfaces built around voice interaction need to be simple and intuitive, without relying on visual or tactile elements. Traditional buttons and menus become secondary as spoken commands take the lead.
Voice-first interaction demands an experience where users can access information or complete tasks without ever needing to look at or touch a screen.
In this context, design becomes about listening rather than seeing.
Voice-controlled apps are making a real impact in areas where traditional tech falls short.
For example, in healthcare, voice-activated medical devices allow patients with limited mobility to interact with their environment. It can be be either to adjust their hospital bed or calling for help — useful for those who can’t use their hands.
In education, voice technology gives children with physical disabilities a hands-free way to engage with lessons, leveling the playing field.
Another good example of such product is Voiceitt. This **app is designed for people with speech impairments, using AI to recognize and adapt to non-standard speech patterns.
It helps users who may struggle with mainstream voice assistants, communicate better.
Real-time captioning has become an essential tool for people with hearing impairments.
AI-driven tools like Google Live Transcribe now transcribe conversations, meetings, and even background sounds instantly, in real-time. This opens up access to everyday interactions that were once difficult or impossible for those with hearing loss.
Picture someone attending a business meeting or participating in a social gathering. Real-time captioning enables them to follow conversations, no matter the noise level or complexity of the discussion.
It’s especially useful in environments like classrooms or live conferences, where important information is conveyed verbally and needs to be understood on the spot.
AI is making real-time captioning more practical by adding multi-language support, so people in international events or workplaces can follow along, no matter the language.
Tools like Google Translate or Microsoft Translator can instantly convert speech into captions in different languages.
For example, at a conference, captions can be translated live, allowing non-native speakers to fully participate.
Some tools also go a step further, picking up on tone and emotion, so captions aren’t just about words — they give a fuller picture of what’s being said.
3. Object and scene recognition: More than just descriptions
AI tools like Seeing AI and Google Lookout are giving people with visual impairments a better sense of their surroundings, not just by identifying objects but by helping them understand entire scenes.
Someone using Seeing AI to walk down a busy street gets more than just a list of objects. The app might describe people nearby, alert them to cars at a crosswalk, or even note store signs along the way.
In a store, Google Lookout can read product labels aloud, helping users find what they need without asking for help. It’s about more than identifying things; it’s about helping people make sense of the world around them.
Be My Eyes, originally, connected visually impaired users with sighted volunteers to help with tasks.
Now, with AI stepping in, it’s doing more than just identifying objects. It’s helping narrate experiences in ways that add meaning.
For instance, it can describe not only what’s in front of a person but also capture subtler details — like recognizing someone’s facial expression or sensing the mood in a room.
Imagine someone using an AI tool that detects that the person in front of them is smiling, or that the room feels warm and inviting based on the lighting and sounds.
Samsung’s Good Vibes app, is designed for deaf-blind users to communicate through vibrations, offering a lifeline where traditional communication falls short.
The app uses Morse code — simple taps and vibrations — to send and receive messages.
A sighted person types a message that gets translated into vibrations, and the deaf-blind user responds using touch patterns.
More accessibility, one interaction at a time
From voice control to real-time captions and everything in between, these tools are helping people interact with their surroundings in ways that feel more natural.
For designers, it’s a chance to rethink how we build, not just for screens, but for real-world spaces. The goal is simple: create environments that adapt to everyone, not just a few.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
We transform the way disability is perceived by showcasing talents through innovative programs, intercultural collaborations, and artistic initiatives.
Always wanted to showcase your work, but never had any idea how to build a portfolio website? This is your time to shine! Meet Display, a Framer template to create your online portfolio.
StringTune is a high-performance JavaScript library for modular web effects, offering smooth parallax, dynamic cursors, progress tracking, and autoplay videos with an intuitive, attribute-driven approach.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Bayt is a premium SaaS Framer template, perfect for real estate businesses and SaaS businesses seeking an efficient and professional management solution.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Experience a beautifully designed camera crafted to inspire mindfulness and intentionality in photography. Launching summer 2025, this innovative tool invites you to slow down, embrace the moment, and capture the world frame by frame with elegance and purpose.
Merouane Bali is a Full Stack Developer who seamlessly blends coding with creativity. Discover his 3D portfolio and experience the intersection of technology and artistry!
Add 3d emotions to your project with large set of high quality illustrations. Big variety of icons from smiling faces to rainbow, fruits, and robot. A really good choice for promo and social marketing projects.
A sleek, minimalistic agency and portfolio template with bold typography and smooth animations. It features a dynamic landing page, CMS for projects, a services page, a playful 404 page, and a contact form. Perfect for creatives who want to stand out.
The easiest way to build and share online forms. No coding required. Start creating professional forms and surveys with our intuitive drag-and-drop builder.
Spectre website concept with 3D-animation by ALEX BENDER for FANCY
.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Büro is a transdisciplinary, branding and digital practice. The studio’s adaptable approach to good design and technology has resulted in global reach and critical acclaim as one of the top digital agencies.
Family-owned digital studio with a focus on functional aesthetics and creative solutions. We create websites, e-commerce, UX using Webflow Readymag etc., branding, and AI wow content. Based in Beograd, Serbia
Collection of cozy, vibrant workspaces styled with personality. From warm, minimalist desks to playful setups with colorful stationery and textures, each scene is thoughtfully designed to feel authentic and inspiring.
Pastel Lab is a modern portfolio designed for artists, studios, and agencies to showcase your work. With breathtaking design, soft animations, and an elegant layout, it offers a minimalist approach that presents your work as a true piece of art.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
AI visual artist and director based in Madrid, Spain. YZA is exploring new ways of expression through ai generated art: art direction, photography and filmmaking
Twist is a modern landing page template for productized design agencies that lets you land more clients. Twist is built for speed and ease of use, so you can focus on what matters — growing your agency. Stand out from the crowd with Twist.
Veo is an advanced video generation tool powered by a cutting-edge model. It enables users to create high-quality video clips tailored to their prompts’ style and content, with support for resolutions up to 4K.
Capture screenshots, record screens, or Rewind the last 2 minutes, anytime, for context-rich bug reports. Get auto-attached developer logs and debug with AI.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
bringing a new era of groundbreaking graphic design trends ready to shape the future and inspire your creativity. Let’s dive into the top transformative trends defining this year.
Artificial intelligence is transforming the way design and art are created, offering fresh approaches for stunning visuals. From generating highly realistic details to creating imaginative compositions, AI opens up endless creative paths.
In 2025, AI is more than a tool — it’s a creative partner. Designers use it to quickly explore ideas, refine visuals, and experiment with a range of styles. These advancements simplify workflows and allow designers to push boundaries, blending efficiency and creativity in ways we have never seen before.
⭕ 1. Example of AI-driven design
Trend two: Geometric abstract narratives
In 2025, shapes are more than just design elements — they tell stories. Bold lines, circles, and patterns come together to create visual narratives that are both meaningful and captivating.
These geometric designs strike a perfect balance between simplicity and complexity, giving projects a unique and modern look. It’s not just about aesthetics; it’s about making bold statements and letting the shapes speak for themselves.
⭕ 2. Example of blur and distortion
Trend three: Hyper-realistic 3D presentations
In 2025, 3D design reaches new levels of realism, with companies hiring expert 3D artists to create incredibly detailed product renders. These digital creations are so precise and lifelike that they seem to leap off the screen, giving audiences the feeling that they could touch them.
Skilled designers are pushing the boundaries of digital design by combining intricate textures and realistic lighting to bring products to life in ways never seen before. This trend is transforming product presentations, making them more immersive and captivating than ever.
⭕ 3. Example of hyperreal 3D product design
Trend four: Dynamic gradients
Dynamic gradients are a standout trend in 2025, transforming designs with bold, fluid energy. Designers are using gradients in motion, creating visuals that feel alive and engaging.
These moving gradients add excitement and draw the viewer’s attention, making them ideal for showcasing brands in a more captivating way. By blending smooth transitions and vibrant effects, this trend introduces a fresh and dynamic approach to modern design, ensuring a lasting impression.
⭕ 4. Example of dynamic gradient motion
Trend five: Blur and distortion
The blur and distortion trends focus on blending colors and creating visuals that are not fully clear, making them look unique and interesting. This style reflects the complexities of life by mixing colors and softening clarity to create visuals that feel diverse, engaging, and emotionally expressive.
It brings depth and emotion by using soft edges and unclear forms, giving a dreamy and artistic feel. It’s a way for designers to embrace imperfection and create something eye-catching and different. Whether for branding, websites, or art, this trend adds a distinctive and captivating touch.
⭕ 5. Example of geometric abstract narratives
Trend six: Experimental typography
Experimental typography remains a key design trend in 2025, continuing its momentum from last year. Designers are taking bold steps to reimagine how letters can look and function. This isn’t just about fonts; it’s about turning typography into art with unique distortions, unexpected forms, and creative layouts.
While it’s not a new concept, this year’s designs take experimentation further, making typography more expressive and meaningful. It’s all about playing with type to create captivating, story-driven visuals that stand out.
⭕ 6. Example of experimental typography
Trend seven: Mixed media and experimental collages
Mixed media and experimental collages are some of the most exciting — and, honestly, among my favorite — trends for 2025. Designers are blending different styles, including digital art, photography, hand-drawn elements, and textures, to create visually dynamic and unique pieces.
The mix of various mediums makes these designs stand out and feel fresh. Mixed media involves combining elements like photos, 3D art, and textures into polished and cohesive pieces. On the other hand, collages are more about cutting and arranging images, papers, and illustrations in an organic, often raw way.
When combined, they allow designers to explore both the digital and analog worlds, making designs bold and full of character.
⭕ 7. Example of mixed media and experimental collages
Mismatched and bright is all about embracing vibrant, contrasting colors and playful mismatched fonts. These trends combine different font styles, sizes, and widths with unexpected color contrasts — think neon yellows paired with deep purples.
It’s a quirky aesthetic that’s perfect for standing out and catching attention. Designers play with asymmetry, irregular spacing, and bold typography to give designs a unique, fun vibe. It’s a playful approach that adds personality and charm to any brand.
Minimalist maximalism is all about finding a balance between simplicity and boldness. This trend pairs clean, minimal designs with vibrant maximalist elements like striking patterns and colors.
It’s about creating visual impact with carefully curated contrasts — bold typography, geometric shapes, and limited color palettes that avoid overwhelming the viewer. When done right, it combines boldness and restraint, offering both structure and energy for a fresh and dynamic look.
Retro meets modern age blends nostalgic vintage elements from the past with sleek, contemporary design. By combining retro typography, neon colors, and bold patterns with modern touches, these trends create a visually dynamic fusion.
It’s about bringing the old into the new, creating designs that feel both timeless and fresh.
⭕ 10. Example of retro meets modern age
That’s all for now! I hope you enjoyed diving into these exciting design trends for 2025.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Ayush Soni / HEX Creative director and founder of a full-cycle brand and creative studio (hex.inc).
This really isn’t an end-to-end tutorial with organized instructions, but general brain dump of my general thought process when it comes to designing a “first shot” identity very quickly.
Over the years, this process has become more honed and I do feel there’s some value in this writing for those looking to test out an idea quickly. The first thing I’d start with is just summarizing what u want to do in 1–2 words. This is going to help you narrow down who you / your company are and what you want to explore visually.
I want to build a CPG brand while I do this tutorial. This one’s going to be for a water company called _thewatercompany. And the 1–2 word summary is going to be “Rimowa for Water”. Water packaging is something I’ve wanted to always explore, so here’s a cool idea that I don’t think has been done before. Correct me if I’m wrong though; I did no research.
That already gets us like 50% there. Not just visually but also strategically. The goal here is to get to a place where I can test this concept quickly, not to build a full-scale brand identity.
Now, the next step should be to build a quick mood-board so you can visualize the end product. This helps you even if you don’t know how to execute; a mood-board will help save time (money) + back and forth when working with a designer.
Cool so that above was my little 5 minute mood-board. Since I’m designing for myself there’s no reason to do too much at this stage. It gives me a very clear picture of what I want the brand to look and feel like. To get here, I just browsed through cosmos and pinterest for a little while and pulled together all images I liked on a figma file.
No need to waste time looking at thousands of designs, case studies, and ideas. There is an infinite supply of inspiration online and the best way to move forward is to narrow down, pick a few things you like, and get to work.
Now, time to dive in and start exploring things. Again, don’t take your ideas too seriously and just start jamming things together and see what sticks. I wouldn’t recommend this approach for a real client project where there are certain angles + demographics to watch out for, but this is a fun sprint.
Below is the first thing I designed. Taking inspo from one of the screens above; the + style. Idk why but I love the idea of using the circles with plus signs in some capacitiy…remind me of particles and feels like something scientific which is what I want for this water company.
But the contrast is putting me off a bit, even though that’s kind of what I wanted looking at the inspo. A more brutalist exploration with the same idea:
I do think this works a bit better, but it should feel like a blend of both worlds. Clear and brutalist, but also aquatic and glassy.
meh. At this point, I feel like this direction is inherently uninteresting to explore. Even though I think there’s a lot of cool things you can do with physical design when branding it like a Rimowa, the digital design potential is limited.
But, I’m still going to try a few more ideas to see if something sticks. I like this one exploration that interpolates gradients into the identity and adds a bit more depth to the design. I think pairing liquid circular gradients with the circular geometric symbols could be interesting.
It’s a bit harder for me to imagine a darker packaging for water, but anything goes at this stage. I want to explore something a little bit more “technical” for this brand since I want it to feel premium at first glance. This should feel like a product that has gone through multiple stages of iterations and sampling, passed multiple industry-standard testing, and put in the most rigorous research environments.
I think the exploration above feels closest to what I’m imagining. I like the use of using molecules to shape patterns and organic designs and having a distinct brand mark with the line art. I think those two elements can go really far to become defining motifs of the brand. Typography is relatively simple but I still wanted to experiment with a more technical display font for product naming.
I think I’m okay with sticking with this for now and building it further, just because I don’t want to spend TOO much time on this little sprint. From here, my goal will be to build core graphic elements and see how the brand reacts to web, social, and general print collateral.
Of course, packaging + physical product design is missing here but the brand elements are defined, which was ultimately the goal of this sprint. I could potentially do a part 2 of this where I do packaging design for a sample product for this brand. I like the name Water+Studio as well.
Alirght, final product:
Below is a very quick summary of the identity. Everything I talked about and tried out is summed up below. From here, it’s easy to create new pieces of collateral like the website or packaging or social assets. Just need to think about each piece of collateral independently and find nods to this base identity system.
Alright that’s it. Let me know if you ever want me to do a v2 of this.
🎉 The LinkedIn Golden List: A Year-End Gift to the Design Community
As we approach the New Year, we’re excited to share a special gift with our readers and the entire design community: a thoughtfully curated list of LinkedIn profiles and pages that have consistently inspired and elevated the world of design throughout the year.
Each profile and page featured here has been selected for the quality of their content, the inspiration they provide, and their dedication to action. These creators and teams aren’t just about great ideas — they’re shaping the future of design through innovation and impact. This list is a celebration of the best of the best in our industry, in no particular order.
This is also our way of saying thank you — to these incredible creators and pages — for making the design world more vibrant, innovative, and inspiring every day.
Happy New Year and happy creating! – The Muzli Team
💡 Have someone in mind who should be on this list? Follow the Muzli LinkedIn page or connect with Eyal Zuri, Petras Baukys, or Ohad Aviv to send us your suggestions. If they fit, we’ll gladly add them and spotlight their work.
Co-founder and Design director at Noomo Agency | Judge at Awwwards | Judge at Webby | Reddot winner | Webby winner | ADC*E Member | Design Mentor | olhauzhykova.com
✽ Award-winning websites that makes you stand out as a tech- company and startup ✽ 23+ awards ✽ Web Developer of the year 2024 ✽ Available for January 2025
Art Director at Obys® | Studio of the Year 2023 by Awwwards | 3x Studio of the Year by CSSDA (2020, 2021, 2023) | Red Dot Winner 2023. Work with: Porsche, CNN, Air Singapore and Samsung.
Building 3D Websites | Unconventional Designs & Immersive Web Experiences • Awwwards, Fwa🏆 • If you want to take your landing page to the next dimension
Co-Founder, COLLINS: SF/NYC, D&AD Design Company of the Year, AdAge Business Transformation Agency of The Year, Design Agency of the Year, Fast Company Best in Design, President / The Art Directors Club
Freelance UI/UX Designer & Art director — Awwwards Jury. I help brands & agencies in their UI/UX design needs, with elegance and minimalism, to create memorable and unique websites.
The Logo Design Awards (LDA) celebrates and honours the exceptional creative achievements of designers in crafting visually compelling logos, brand identities, marks, symbols, monograms, emblems…etc
Studio375 provides innovative, custom-tailored creative and digital services — spanning design, web development, photography, video production, communication, and marketing — to help clients stand out from the competition.
We are an innovation-driven creative agency. Florence | Milan | Paris
🎨 Inspiration Awaits! 🎨
This golden list is more than just a showcase — it’s your gateway to connect with the brightest minds in the design world. Whether you’re looking for new trends, creative sparks, or just a bit of design brilliance, this is the place to start.
💡 Have someone in mind who should be on this list? Let us know! We’re always eager to spotlight more incredible talents and grow the design community together.
Keep creating, keep inspiring, and enjoy the journey! – The Muzli Team
Creative Agency, a Melbourne-based multi-disciplinary team focused on design, branding, strategy, and development to create impact for brands and people.
Designing, engineering, and building the next generation of electric trucks and rugged SUVs for the doers, makers, and explorers. The new Scout® Traveler™ and Terra™ models are here, born from the original legend, retooled for a new era.
ROSA BONHEUR Perfume Brand：Inspire Emotional Creativity by Resauce Studio
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Canvs Editorial Meaningful stories and insightful analyses on design
In design, AI has shifted from being a buzzword to an essential tool in daily workflows. Agentic AI, a newer development, goes beyond simple automation. It’s a system that works independently, handling tasks that designers once had to oversee themselves. This is especially useful during early-stage product testing, where catching issues early can save a lot of time and effort down the line.
When applied to design, agentic AI can review prototypes, identify potential problems in a flow, or flag areas where the user experience might break.
It acts as an extra layer of validation before human testers even get involved.
The practical shift from human-driven to AI-assisted testing
In the past, product testing meant relying on human testers. It was a necessary but slow and expensive process that often stretched out product timelines. Designers would build, wait for feedback, and then go back to tweaking and reworking the designs, creating delays.
With agentic AI, this cycle looks different.
Instead of waiting for human input at every stage, AI tools built into design platforms can step in early. They catch things like layout misalignments, buttons that don’t work, or accessibility issues, acting as a first line of defense.
They can now spot inconsistencies in design systems or check if a design sticks to brand guidelines without anyone having to manually go over it.
How agentic AI handles objective validation
Let’s look at how it works in real-world tools.
Take Maze, for example. It allows designers to simulate user journeys and spot friction points before human testers are involved.
Designers can run tests on their prototypes and get immediate feedback on potential issues. The tool can flag usability problems, such as unclear navigation or broken interactions, making it easier to refine the user flow early on.
This means that before any human testing happens, designers already have a clear picture of how well their product holds up.
It’s like having an automated second set of eyes.
How agentic AI handles subjective validation & current limitations
AI excels at objective validation but still has limitations with subjective elements like visual aesthetics and user experience.
AI tools can suggest functional improvements, like recommending alternative button placements for better usability or adjusting the layout for smoother navigation. But these suggestions are based on algorithms and patterns, not on the nuanced design choices a human designer makes.
For example, AI might recommend shifting the positioning of a call-to-action button for better flow, but the final decision on its placement — whether it feels intuitive, balanced, or aligned with the brand’s identity — still lies with the designer.
While AI handles technical aspects, the emotional and visual nuances of design still require a designer’s creative touch. Right now, AI and human designers complement each other — AI ensures functionality, while designers bring the human insight needed for impact and aesthetics.
How agentic AI is benefitting design teams
1. Faster feedback, less waiting
Agentic AI helps catch basic issues early on, so teams can resolve problems before they get bigger. This keeps the feedback process moving faster and designs on track.
2. Cutting costs in the early stages
With AI handling initial checks, there’s less need for human testers at the start. This helps cut down on early testing costs, freeing up resources for later stages.
3. Smoother testing as you go
Catching structural problems earlier means fewer revisions in later testing. This smooths out the process and helps avoid delays when you’re closer to launch.
4. More space for creative thinking
Automating the routine tasks — like checking alignment or links — gives designers more mental bandwidth for strategic, creative decisions, letting them focus on what really matters.
Agentic AI, the first line of defense
As AI tools continue to improve, there’s real potential for them to handle more subjective testing — like evaluating overall user experience or aesthetics. This will give designers even more space to focus on high-level decisions, while AI tackles the more time-consuming tasks.
Design teams should start integrating these tools into their workflows now. The sooner they do, the quicker they can take advantage of more efficient testing and validation before products hit the market.
……
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
web design trends are taking bold strides, blending innovation with functionality to create engaging digital experiences. Here is a closer look at the standout trends shaping the future of web design this year.
In 2025, designers are moving away from conventional vertical scrolling layouts and adopting unusual layouts that offer more engaging and creative browsing experiences. These layouts break away from traditional design structures by incorporating features like horizontal scrolling, direct-to-explore elements, and fluid content arrangements. The goal is to create dynamic, memorable interactions with users by using unexpected approaches that deviate from the typical linear flow.
While these layouts encourage creativity and out-of-the-box thinking, they still prioritize user experience. Designers ensure navigation remains intuitive and accessible, using cues like arrows, drag handles, or animations to guide users through these unconventional designs.
Custom illustrations are taking the lead in web design. Instead of relying on stock images or generic visuals, designers are creating unique, brand-specific illustrations that help communicate messages more effectively. These illustrations are tailored to fit the brand’s identity and style, allowing for greater creative freedom and clearer storytelling.
Whether it’s flat design, line art, or brushstroke styles, the key is flexibility. Designers craft visuals that resonate with their target audience, creating more engaging and memorable experiences. By using custom illustrations, websites feel more authentic and personalized, helping brands stand out in a crowded digital space.
Cursor-centric interactivity focuses on using the cursor as a tool to enhance the user experience. Designers utilize the cursor’s movement to trigger animations, reveal hidden content, or change the appearance of elements when hovered over. This kind of interaction makes websites feel more dynamic and engaging.
Whether it’s highlighting a button when hovered over, expanding a menu, or revealing extra content under the cursor, these subtle interactions add depth and playfulness to the browsing experience. It’s all about creating a more intuitive and enjoyable way for users to engage with the content, making the browsing process feel seamless and interactive.
Grid and modular design is all about organizing content into clear, structured layouts, making websites easy to navigate and visually cohesive. Designers use grids to create modular sections that align elements like images, text, and buttons into consistent columns and rows. This trend is versatile, adapting to various types of content while maintaining balance and order.
What makes this design approach especially popular is its flexibility. It can be used for a variety of purposes — from e-commerce websites to portfolios — creating uniformity without sacrificing creativity. The grid system also allows for scalability, making it easier to adjust layouts for different screen sizes and devices.
In 2025, this approach continues to be a key design trend, offering a clean, organized look while helping users easily focus on what matters most.
Dynamic 3D experiences are becoming a powerful way for companies to showcase their products in highly interactive and detailed manners. Designers are increasingly using high-quality 3D renders to present products in all their dimensions, allowing users to interact with them like never before. With scrolling, users can view different angles, zoom in on intricate details, or even watch the products move and rotate in real time.
This immersive experience can be further enhanced with mouse-hover effects, providing additional details or actions such as changing colors or revealing features. Big brands like Apple have set the standard by incorporating 3D product showcases on their websites. These interactive models allow customers to feel closer to the product, helping them visualize it in the real world and engage more deeply with the brand.
As 3D technology becomes more accessible, expect to see this trend continue to rise in 2025, enhancing the way we interact with products online.
In 2025, websites are becoming more engaging through playful and interactive experiences. Designers are integrating elements that invite users to participate, making the browsing process more enjoyable and immersive. These websites encourage creativity, allowing users to interact with content in unexpected ways — whether through games, interactive storytelling, or personalized features.
This trend moves beyond novelty, aiming to create memorable experiences that keep users engaged while showcasing the personality of the brand. Thoughtful interactivity enhances both user experience and site functionality, turning passive browsing into an active, fun adventure.
Dark mode continues to be a prominent design trend in 2025, offering users a more comfortable browsing experience, especially in low-light environments. This mode reduces eye strain by using darker backgrounds and lighter text, creating a less intense visual contrast.
As a result, many websites and apps now feature dark mode as an option, allowing users to choose the interface that suits their preferences and enhances their comfort. Beyond practicality, dark mode also contributes to a modern, sleek aesthetic, making it a preferred choice for many designers aiming to create a contemporary look. Its popularity is driven by both functionality and visual appeal.
Scroll-to-engage storytelling is a popular design trend where brands use scrolling as a storytelling tool to effectively deliver their message. Rather than simply displaying content, designers are creating websites that unfold a narrative as users scroll, making the information more engaging and easier to understand.
This method incorporates dynamic content, animations, and interactive elements to guide users through the story, ensuring that the message resonates more clearly. It creates a more memorable experience and helps users connect with the content in a way that traditional layouts may not achieve.
Radiant glow design combines gradients with light effects to create an engaging and visually dynamic website experience. This trend often features glowing or luminous elements embedded within soft gradient backgrounds, giving the design a vibrant and energetic feel.
By blending neon hues with subtle light effects such as glows and highlights, designers can draw attention to interactive elements like buttons, icons, and call-to-action sections. These styles add a futuristic touch, enhancing the depth of the layout and guiding user focus to key features. Radiant glow design works particularly well when paired with dark mode or minimalistic backgrounds, offering contrast and a sense of visual intrigue.
In 2025, AI is revolutionizing web design by providing new ways to generate and personalize visuals and content. Designers are using AI tools to create unique, brand-specific graphics — from illustrations to 3D renderings — while optimizing images in real time to fit different contexts.
AI can also personalize website content based on user behavior, ensuring a more tailored experience. This not only enhances visual appeal but also streamlines workflows, allowing for greater creative freedom and efficiency. As AI continues to evolve, it will play an even greater role in crafting dynamic, interactive user experiences that feel personalized and engaging.
While it’s amazing to see web design pushing boundaries with high-end animations, 3D visuals, and interactive elements, there is a downside to all this creativity. These features definitely make websites stand out and deliver messages in exciting new ways, but the truth is, they can also slow down load times and negatively affect the overall user experience.
Today, more and more companies are realizing the importance of having a fast, responsive website that loads quickly. Speed is becoming just as important as visual appeal, and there is a clear shift toward finding a balance between stunning design and performance. It’s about creating websites that are both engaging and efficient, ensuring users don’t have to wait around to enjoy the experience.
That’s all for now! I hope you enjoyed exploring these design trends for 2025.
All images belong to their respective owners and are used for teaching, commentary, and research. If you are a copyright owner with concerns, please contact me, and I will address the issue immediately.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The Best Framer Templates for : Handpicked for You
At Muzli, we know how overwhelming it can be to choose the right template for your website, especially with so many options out there. That’s why we’ve done the heavy lifting for you. Our team has personally reviewed and selected the top Framer templates to ensure they meet the highest standards of design and functionality.
This curated collection showcases a variety of templates , ranging from modern and sleek layouts to professional and versatile styles , that cater to different needs and creative visions. Each template was chosen with care to help you build a website that doesn’t just look great but also performs beautifully.
A Gift for Muzli Readers To make your design journey even better, use this code: partner25proyearly to enjoy 3 months free on an annual Pro subscription.
Bester is a sleek and modern dark-themed SaaS template designed for cutting-edge platforms. With clean layouts, responsive design, and customizable features, it’s perfect for startups and tech companies looking to impress.
ASHFORD is a sleek, modern portfolio website template designed for photographers. Featuring customizable galleries, seamless navigation, and elegant layouts, it’s perfect for showcasing your work and attracting clients.
Transform your personal portfolio with Bent, a stylish, minimal Portfolio Framer Template. Perfect for creatives, designers, freelancers, agencies, and design studios.
Pastel Lab is a modern portfolio designed for artists, studios, and agencies to showcase your work. With breathtaking design, soft animations, and an elegant layout, it offers a minimalist approach that presents your work as a true piece of art.
Conto is a modern SaaS Framer template designed for software companies, fintech startups, tech innovators, and SaaS businesses. Perfect for enterprise solutions, cloud services, AI platforms, and digital products.
Elevate your online presence with Marso’s intuitive modern design, crafted to help your agency grow by converting visitors into loyal customers for your subscription-based services, ultimately boosting conversions and revenue.
Epicfolio is a flexible portfolio template made for designers and developers. It’s modern, easy to customize, and works great on any device. Built with Framer, it helps you showcase your work beautifully and effectively.
Aiko is a minimal & modern Portfolio Framer Template perfectly suited for freelancers, designers, web designers, web developers, agencies or your personal portfolio.
Infinite is a clear and purposeful structured template, ideal for agencies and creatives. Offering a rich, detailed and versatile design, making it the perfect canvas to represent your studio.
MasonMount Template: Creativity at your fingertips. This customizable portfolio template lets you tailor your brand with stunning visuals and interactive elements to captivate your audience.
Introducing Visionary: A polished portfolio template with bold typography and refined dark tones, meticulously designed for agencies and individuals alike.
Farrok Framer Template is not just a design tool; it’s a dynamic platform for creative professionals, design agencies, and artists who want to display their talents in the most visually captivating way.
Meet Financia, a sleek and modern Framer template ideally tailored for Financial and SaaS websites. Financia delivers a standout, seamless user experience. Build your website quickly, in days, not weeks!
Serrena — an ecommerce template that caters to digital entrepreneurs and creators in the fashion realm, providing an effortless platform for showcasing and selling your trendy digital products.
The Atomic template is more than just a design solution; it’s a powerhouse for creative professionals, design agencies and all type of businesses seeking to showcase their prowess in the most visually stunning way.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The UI/UX world is a fast-moving carousel of ideas and innovations. designers are leaning into creativity and user-first experiences like never before. Let’s dive into the top trends you need to watch (and embrace) this year!
Prateek Patil. UI/UX Designer | Trying to Solve The Problems
1. Micro-Interactions Get Smarter
Forget basic hovers and clicks. 2025’s micro-interactions are intelligent and predictive — anticipating user needs before they even act. Think buttons that gently nudge users or interfaces that subtly adapt based on behavior.
AI is taking personalization up a notch. Your interface isn’t just for the user anymore; it’s about the user. Expect designs that tweak colors, content, and layouts dynamically based on user preferences and patterns.
3. Sustainability-Driven Design
With eco-consciousness on the rise, UI design is going green. Dark mode isn’t just trendy — it’s energy-saving. Minimalist designs reduce resource-heavy animations, making your apps lighter and kinder to the planet.
4. Augmented Reality (AR) in Everyday Apps
AR is no longer confined to gaming. From shopping to fitness, UI designers are integrating AR elements to make interfaces immersive and interactive. Virtual fitting rooms? Yes, please!
5. Voice-First Interfaces
As voice tech evolves, more interfaces are being designed to be controlled by what you say rather than what you tap. Think interfaces that visually react to voice commands, enhancing accessibility.
6. Glass morphism Evolves
The frosted-glass effect is getting a 2025 upgrade. Paired with vibrant gradients, Glass morphism is becoming more immersive, with depth, shadows, and motion creating almost tangible UI elements.
7. Neobrutalism’s Softer Side
Neobrutalism is stepping back from its stark, bold roots. Designers are blending its rawness with soft gradients, rounded edges, and warm tones, creating striking yet approachable layouts.
8. 3D Meets Minimalism
3D design elements aren’t about clutter anymore. Expect subtle, well-placed 3D icons, buttons, and illustrations that add a layer of realism without overwhelming the user experience.
✨Final Thoughts
2025 is all about merging creativity with usability. The best interfaces will be the ones that feel effortless and human, meeting users where they are — both emotionally and technologically.
Which trend are you most excited to explore? Drop a comment below and let’s talk design! 🎨
Want even more inspiration?
Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Specializes in creating modern, responsive, and user-friendly websites, with a team of skilled designers and developers dedicated to delivering high-quality results.
Get a realistic feel with high-quality images of hands holding phones. Perfect for bringing your apps and interfaces to life. Make your presentations pop and impress your clients with ease!
Naoto is a minimalist Framer template tailored for innovative agencies and creatives seeking elegance and simplicity. Naoto Studio draws inspiration from timeless print publications, emphasizing curated storytelling and visual flow.
Foundation is a powerful tool designed to help creators hit the ground running when it comes to kickstarting new products or scaleable design systems. It automatically generates Figma variables based on Tailwind Utility Classes.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Frameblox is the ultimate Framer UI kit, design system, and component library. Build and launch your website faster, save countless hours, and elevate your website.
The Conversion Framer template is perfect for digital marketing agencies and freelancers who want a clean, modern, and sleek website that will convert visitors into leads and clients.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
As we delve into the world of innovative web design, we’ve explored hundreds of portfolio websites, carefully selecting the 100 most creative and visually striking examples that truly stand out. These sites embody the best of modern design, blending originality, beauty, and a unique perspective. Our curated list showcases what’s truly at the forefront of web design today.
Please note that the order of the websites is entirely random, and the numbers have no bearing on their quality or significance. Each website on this list is exceptional in its own right.
That said, it’s important to remember that not every portfolio that pushes the boundaries of creativity will necessarily align with your specific needs or objectives. Choosing a portfolio style that represents your personal or professional goals is key to ensuring it truly reflects who you are.
Spotted a portfolio that deserves a spot here? Let us know in the comments, and we may feature it in our next update!
Den.Cool is an small, independent design studio built on principle and driven by passion. Den.Cool specializes in creative ideation, user experience, content creation, art direction, design, motion design, animation & 3D, web development, e-commerce, game concept and creation, digital installations and activations.
French Freelance creative developer passionate about pushing boundaries with WebGL experiments and crafting captivating UI animations. Bringing innovation and artistry to digital experiences.
Creative Developer with 15+ years and 140+ projects, specializing in animation-driven, high-impact websites. Partnering with designers to craft memorable UX.
A talent first full-service influencer marketing studio with unparalleled access to the best talent in the world, empowering the voices that define modern culture.
Welcome to Studio Move where motion and design come together in the heart of Montréal. We bring our ideas to life, partnering with companies like Nike, Polestar or Leica to create compelling visuals and interactive experiences.
Inette is the creative studio of Trieu Anh, specializing in beautifully crafted websites, unique branding, and captivating visuals. We focus on transforming ideas into visually stunning digital experiences that reflect your brand’s identity.
Media.Work is a collective of innovators, designers, artists and creators, who are exploring visual ways to convey ideas — in collaborations with ambitious organizations and independently.
Welcome to the world of Hardik Bhansali: where creativity meets design! Explore the portfolio of this visual web designer extraordinaire and be inspired.
Mach Studio is a creative studio that partners with innovative brands to craft meaningful brand experiences. Combining technology, art, and creativity, their team of directors, creators, and designers push the boundaries of storytelling and design using cutting-edge technologies.
Deeo is a design studio led by Yianni Mathioudakis and Monica Sanchez. We focus on designing extraordinary experiences through curiosity and exploration. Branding • Design • Web • 3D
TWOMUCH is a Digital Design Studio formed by Benjamin Chan (BC) and Malone Chen (MC) operating between London and Vancouver. We play within the fields of Digital Art Direction, Websites, Interactive Design and 3D animation.
We are a global design company creating unique experiences for brands and products through unconventional designs backed by design thinking and innovation.
Sage East is a visual storytelling photographer and director based between New York and Los Angeles. Sage East has gained recognition for her compelling and emotional work within the advertising and editorial spaces. Her work consists large clients such as Google, Netflix, Meta, Nike, and Amazon.
Studio Gruhl is a creative studio for brand and digital design. Being deeply rooted in today’s subcultures, we enable new visual worlds to bloom. Dream More.
Locomotive® offers a wide range of creative and strategic services for remarkable brands, companies and organizations. Over the 15 years, Locomotive® has become a go-to for meaningful, innovative, results-driven digital experiences, web design and branding. Freshness guaranteed.
My name is Max, and I’m a front-end developer, who creates websites with a special focus on animations and user interaction. I’m ready to bring your ideas to life and add a touch of originality to the online space.
Explore Buttermax: Your Gateway to ‘Buttery Smooth’ Digital Experiences. Immerse yourself in creativity, innovation, and playful delights on our Home page.
Welcome to Petra Garmon, your destination for quality content production. With full-service options for commercials, documentaries, music videos, and films. We bring your projects to life!
Gladeye is a creative digital agency in New Zealand — working for the world. We blend storytelling with technology to craft beautiful brands, websites, experiences and products.
We are a Los Angeles-based digital design agency specializing in creating interactive digital experiences, 3D storytelling websites, applications, and immersive experiences.
Strange Family is an international branding, advertising and technology collective. We tell stories and design experiences that help brands lead, define and break with category norms.
Get Industry-Leading, Full-Service Video Production From Animus Studios. Get In Touch With Our Renowned Team For The Best Video & Film Production Experience And Find Your Fascinating.
SLAPS is a Barcelona-based creative studio founded in 2020, focusing on pushing culture forward. They specialize in disruptive brand solutions and campaigns that challenge the status quo of modern advertising.
I craft websites that align with your brand and engage your audience — creating meaningful and memorable experiences. As a freelance web designer and Webflow developer, I specialize in bespoke designs and interactive elements that make your website stand out and captivate visitors.
Independent studio crafting digital experiences connecting design and technology, based in the Wasatch Mountains of Utah and the Baltic Sea in Tallinn.
France-based Digital Designer & Art Director passionate about creating memorable experiences and helping companies with fresh ideas and user friendly solutions.
A production company. We’re a tight-knit collective of artists and creative minds dedicated to crafting unique film and photographic works that entertain and engage.
Sonar Music is a renowned music and sound studio based in Disney Studios, Australia, that houses the nation’s most distinguished composers and sound designers. Armed with a unique, collaborative and holistic approach, Sonar crafts the highest calibre of sound design and original composition across the fields of film, television, commercial & new media.
Douglas Liliequist, a creative developer with over 5 years of industry experience, is dedicated to utilizing graphics and interactive technologies to craft inspiring and intriguing experiences. Notable clients he has collaborated with include Google, Spotify, The Wall Street Journal, and L’Oréal.
The Sand Studio is described as more than a design studio. They portray themselves as a collective of innovative minds exploring uncharted creative territories. Their tagline: “Small Team. Big Ideas.
Design Education Series is a new format of an original mini-series on the main principles of design, where we share all insights gained during our experience at Obys Agency. Typography Princples, Colors Combinations, Grids are the titles of the first three seasons of the series.
Founded in 2012. We blend story, art & technology as an in-house team of passionate makers. Our industry-leading web toolset consistently delivers award-winning work through quality & performance.
Doze is a creative advertising studio based in Nantes since 2012. Specializing in motion design and brand identity, we bring all your projects to life. Keep moving!
Peter Tarka produces immersive illustrations using forms, shapes, and bold colors to elevate aesthetics for the most recognizable brands on the planet.
A digital designer with over 3 years of experience, specialised in visual and interface design. Also, a lover and enthusiast of art direction and all existing forms of design. Always looking towards the future to learn new skills, like motion or 3D design.
Akaru is a web agency based in Lyon, specializing in web design and custom website creation. We offer tailor-made showcase websites and e-commerce solutions.
We believe the future isn’t inevitable. Because it’s inventable. From business and brand strategy to creative campaign concepting with performance analytics and reporting, we specialize in crafting unique solutions tailored to your business. Discover how we can differentiate your brand for growth today.
Hi my name is Dion Pieters. By working for industry-leading agencies like Active Theory and Build in Amsterdam, I’ve been able to craft multiple immersive digital experiences for a variety of clients such as Spotify, Louis Vuitton, Google, Squarespace and many more.
I’m an art director, designer & photographer based in Madrid.<br/> I currently work as creative & design director at EL GRITO & EC Brands Studio at El Confidencial.
While still keeping product usability at a high standard
Canvs Editorial Meaningful stories and insightful analyses on design
User scenarios are a key part of UX design, helping you map out how users interact with your product and guiding decisions to improve usability.
But constantly creating new scenarios from scratch can slow you down, especially when you’re working on similar features or products. Instead of reinventing the wheel each time, creating a reusable scenario template can save you time and keep your designs consistent.
In this post, we’ll show you how to reuse scenarios in UX design to save time and resources — building better user experiences.
1. Use a scenario template
A scenario template is a simple, practical tool that saves time and keeps things consistent. It gives you a clear structure for your user scenarios, covering the basics like who the user is, what they’re trying to do, the steps they take, and the outcome. This way, you’ll not waste time figuring out how to organise these details every time you create a new scenario.
The key benefit? You don’t miss any important detail in it.
a. Create or find a template
You can make your own template, or use one that’s already out there, like the ones from the Interaction Design Foundation. The goal is to have a structure that works for you and your team, covering the essentials like user, context, goals, actions, and outcomes.
b. Add a checklist
A simple checklist in the template will make sure you don’t overlook key details. Think of it as a quick way to confirm that your scenarios cover everything from user goals to possible challenges they might face.
c. Tweak it for different projects
The upside of a template is that it’s adaptable. Whether you’re working on a new feature or updating an old one, you can modify the template to fit the situation. The flexibility will save you time.
2. Create a scenario library
A scenario library is a straightforward way to keep all your user scenarios in one place, making them easy to find and reuse. Instead of starting from scratch for every new feature or project, you can pull from a well-organized collection of scenarios that are already in place.
a. Implement categorisation
Make it easy to find what you need by organising scenarios using tags or categories. You can categorise them by user personas, tasks, or specific scenarios. This way, when you’re working on a particular part of a product or targeting a specific user group, you can quickly find relevant scenarios.
For example, if you’re designing for a banking app, you could tag scenarios by user types like “new user” or “experienced user,” or by tasks like “making a transfer” or “checking account balance.”
b. Encourage collaboration
Share the scenario library with your team and relevant stakeholders so everyone can contribute and provide feedback. When team members are involved, they can improve or add to existing scenarios based on their own experience, which will make the library well-rounded.
3. Update and refine your scenarios
User scenarios aren’t static — they need to evolve as your users, product, and market change. What worked a year ago may no longer be relevant, so update your scenarios regularly so that they stay accurate and useful.
Keep it grounded in real-world data and evolving user needs.
a. Do regular reviews
Set a schedule to review your scenarios — whether it’s quarterly or after major product updates — to make sure they still align with user behaviors and expectations.
b. Use data to inform updates
Tap into user feedback, usability testing, analytics, and market research to adjust your scenarios. Data-driven updates will reflect real user needs, rather than assumptions.
c. Track changes with version history
Keep a version history of your scenarios. You’ll be able to see what’s changed over time and lets you learn from previous decisions. You can look back to understand why certain changes were made or revert to earlier versions if needed.
4. Use scenarios as a starting point
Scenarios are a great foundation, but they shouldn’t box you in. Instead of seeing them as fixed, think of them as a jumping-off point for new ideas. They give you a solid structure to start from, but there’s room to go beyond what’s on the page.
a. Use scenarios for brainstorming
Don’t treat scenarios as a fixed plan. Let them spark new ideas and explore alternative ways to solve a problem. This way, they’re more of a tool for discovery than just a checklist to follow.
b. Get input from the team
Have your team build on existing scenarios. Different perspectives can see angles you might not have considered, giving you more options to work with.
c. Keep notes on what you learn
When new ideas or changes come up, make sure to document them. Capture useful insights for future projects and make sure nothing important slips through the cracks.
5. Consider edge cases and atypical users
Designing for the majority is crucial, but it’s the outliers — the edge cases — that often reveal blind spots in your design. These less common interactions can expose weaknesses or opportunities in your product that you might not notice otherwise.
Consider these scenarios and you’ll be to handle unexpected user needs without breaking the experience.
a. Spot edge cases early
As you develop scenarios, actively look for those rare or tricky situations users might encounter. For instance, consider how users with slow internet connections or outdated devices will interact with your product. Identifying these cases early prevents headaches later.
b. Design for atypical users
Build scenarios that focus on users who don’t fit the average mold. Think about those with different physical abilities, unusual workflows, or unique goals. For example, designing a banking app? What about users who rarely use digital tools or are new to online banking?
c. Get outside perspectives
Bring in feedback from people who use your product in ways you hadn’t expected. This could be users from different regions, age groups, or tech comfort levels. Their insights can point out scenarios you didn’t think of and push your design to cover more ground.
6. Leverage historical data
Historical data is a valuable asset in UX design. By analyzing how users have interacted with your product in the past, you can refine your scenarios to better reflect real-world behaviors.
a. Analyse past projects
Look back at data from previous projects — things like user behavior patterns, common pain points, or frequent mistakes. You’ll spot recurring issues or trends and get a clearer picture of what works and what doesn’t.
b. Use data to refine scenarios
Apply what you’ve learned from historical data to tweak and update your scenarios. If certain behaviors or needs keep surfacing, make sure your scenarios reflect them.
It’s more than a template, it’s an asset
Reusing scenarios in UX design is all about working smarter, not harder.
Instead of reinventing the wheel each time, you can focus on improving what already works, making your process faster without cutting corners on usability.
Whether you’re dealing with a simple feature update or a full product overhaul, reusing and refining scenarios will allow you to keep moving forward, fast.
Want even more inspiration?
Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week’s update is packed with fresh ideas, powerful tools, and inspiring projects to ignite your creativity:
eBay Playbook Explore eBay Evo, a design system crafted for global consistency while allowing for local market adaptation, showcasing the art of flexible branding.
Luma Dream Machine Transform your creative vision into reality with this AI-powered platform for generating stunning images and videos with ease.
Athletics A brand studio dedicated to helping clients define their unique place in the world through strategic and creative design.
Mall — E-Commerce Complete UI Kit A minimalist UI kit designed to streamline the process of building elegant, functional e-commerce applications.
Zyng AI Revolutionize your workflow with AI-driven bulk image editing, cutting hours of work down to just minutes.
And that’s just the beginning! This week’s post also features exclusive Black Friday deals on top design resources, powerful plugins, and inspiring portfolios.
Want even more inspiration every day? Install the Muzli extension and bring a constant stream of creative ideas straight to your browser.
eBay Evo is our brand and design system, created so we show up consistently all around the world with the flexibility to strengthen local market relevance.
Imagine the Maze, Asana, and InVision coming together in one intuitive platform. Collect design feedback, track bugs, manage projects, and run usability tests — all while keeping your team in sync and smiling.
Transform your Image Editing workflow with lightning-fast, AI-driven bulk image editing. Cut hours down to minutes and streamline your process with ease.
This Black Friday and Cyber Monday, digital designers, creatives, and artists can score incredible savings on the tools they love and need. From graphic design software to web design assets, creative resources, and more, we’ve rounded up the ultimate list of deals to fuel your inspiration without breaking the bank.
Stay tuned — many offers will go live closer to Black Friday & Cyber Monday, so bookmark this page and share it with your fellow creatives! Got a deal we missed? Let us know, and we’ll add it to the list.
Frameblox is the ultimate Framer UI kit, design system, and component library. Build and launch your website faster, save countless hours, and elevate your website.
A vector pack with 22 hand-illustrated hand gestures in a fineline tattoo style. There are 22 common and quirky gestures in this pack, you’ll find something perfect for your unique designs.
This versatile typeface features two styles: print and cursive, allowing designers to add both structured and flowing handwritten elements to their projects.
What you’ll get in the Messy Font Bundle: — 5 messy handwriting fonts and up to 25% off (for desktop + web bundle) — Manic Erratic Handwriting Font — Ugly Dave Yuck Font — Infamous Unruly Font — Sad Poem Font — Wasted Year Font
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
dashboard design remains firmly rooted in functionality and professionalism. However, adding creative touches can transform these essential tools into visually captivating and inspiring interfaces. To help designers open their minds for their next project, we’ve curated a collection of unconventional and bold dashboard examples. While around 90% of these designs might not be practical or feasible in the real world, their primary purpose is to spark inspiration and encourage out-of-the-box thinking.
By exploring these avant-garde concepts, you can discover new perspectives and innovative ideas that push the boundaries of traditional dashboard design. Whether it’s experimenting with daring color palettes, unique layouts, or unexpected interactive elements, these examples are here to ignite your creativity and expand your design horizons.
Enjoy exploring these inspiring dashboards and let them guide you in creating your next standout project!
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Canvs Editorial Meaningful stories and insightful analyses on design
As a team of product designers, Figma and Figma plugins are the bread and butter of our day-to-day.
They save time, help take care of the mundane tasks, and add value where it counts. And, with so many plugins out there, it’s hard to know which ones are worth it.
We’ve pulled together a few that we actually use and are central to our workflow. These resources have made our work faster and easier, and there’s a good chance they can do the same for you.
Aidentic is an AI design assistant that helps make your interfaces more usable.
It looks over your mockups and suggests tweaks for things like text, images, fonts, and colors. What’s great is you can apply the changes you like straight to your design with a single click.
Slide UI is a massive UI/UX block database with over 10,000 ready-to-use blocks that help speed up your design process.
Instead of starting from scratch, you can simply search for the blocks you need — like a nav bar or a hero section — drag them onto your artboard, and customize them to fit your style.
It’s faster than building components and more flexible than using full templates, giving you the best of both worlds.
Vijay Verma’s collection of Figma resources is a must-see for designers looking to level up their workflow. It has some thoughtfully crafted plugins that solve real design challenge. Whether you need to organise, optimise, or add polish, there’s something here to make your work easier.
Inima lets you turn your Figma prototypes into animated files like GIFs, APNGs, or keyframes. It offers more animation control than Figma’s ‘smart animate.’
Just set up your prototype, hit “render” in the plugin, and download the animation in your preferred format. Simple and effective for adding motion to your designs.
Web to Figma allows you to import full webpages or specific components straight into Figma. Use the plugin to grab a webpage by entering a URL, or the Chrome extension to capture elements from any site. It’s great for creating moodboards, collecting design inspiration, or collaborating with developers by comparing live sites to your designs.
The Google Fonts plugin makes it easy to browse and add fonts directly to your Figma text nodes. You can quickly explore the full range of Google Fonts and save your favorites, with all variants available for instant use.
Ghost UXWriter is a plugin from Zeta designed to simplify UX copywriting for designers, writers, and developers. It lets you quickly insert or copy pre-written UX copy directly into your designs, with options to adjust tone — from plain to playful.
Random Picker is a versatile Figma plugin that allows you to randomly select a specified percentage of layers or objects within your design. The plugin will instantly highlight the randomly selected layers.
Stark Suite is an all-in-one tool that makes accessibility easier for designers and developers. It has features like contrast checking, alt-text suggestions, vision simulator (for people with different kinds of vision), and typography analysis.
It’ll help you catch and fix accessibility issues before they become problems.
Find and replace a style with another in your components.
Style Replacer will help you quickly replace a style with another in your components. Instead of manually updating each instance, it allows you to replace styles efficiently and consistently.
Similayer enhances Figma’s ‘Select all with…’ feature by giving you more control. It lets you select layers based on a range of properties, making it easy to fine-tune your selection process. You can even select within multiple layers to narrow down elements by specific values, streamlining tasks that would otherwise take time.
Overlord makes it easy to transfer vector shapes from Figma to Adobe After Effects with just one click. It’s a handy tool for anyone working on motion graphics, helping you skip the hassle of exporting files.
Check out these 2 articles for more Figma plugins:
This is just the start — there are plenty more tools out there to help you design smarter. Keep exploring and testing new ones to see what fits your workflow best. And make sure to try out the plugins we’ve highlighted — you might find something that really changes the game for you.
Want even more inspiration?
Follow us on social media for your daily dose of design, innovation, and creativity right in your feed!Linkedin | Instagram | Twitter
A talent first full-service influencer marketing studio with unparalleled access to the best talent in the world, empowering the voices that define modern culture.
Untitled UI is the largest UI kit and design system for Figma in the world. Kickstart any project, save thousands of hours, and level up as a designer.
Introducing Rebirth, a clean and fully responsive portfolio template built in Framer. It features a sleek, minimalistic design, perfect for showcasing your portfolio with case studies and building a powerful online presence.
Make sure your most important elements will be visible every time on every device. Above the Fold plugin marks your designs with a layer that indicates where the above-the-fold portion ends.
Creating Custom Logo Illustrations with MidJourney (Step-by-Step)
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The fusion of technology and creativity continues to reshape the digital landscape in 2025. At Muzli, we’re excited to explore the trends that are shaping the future of web design. Here’s a curated look at the most significant trends influencing the web this year.
1. Websites That Tell a Story
I’ve noticed that websites are becoming more than just static pages — they’re turning into immersive narratives that unfold as you scroll. This shift towards storytelling makes browsing a dynamic experience, where each scroll reveals a new part of the journey. It’s about crafting stories that engage and resonate, making the user experience more meaningful.
2. Interactive 3D Elements
The use of interactive 3D elements is transforming web design. Thanks to tools like Spline and PeachWeb, creating 3D texts, characters, scenes, and amorphous elements has never been easier. These innovations add depth and realism, blurring the lines between digital and physical experiences.
3. Embracing WEBGL Effects and GSAP Animations
Platforms like Unicorn Studio are making WEBGL effects accessible, enabling designers to deliver stunning visuals directly in the browser. Combined with GSAP’s powerful JavaScript animations, designers can now create high-performance, interactive visuals without deep coding knowledge.
This trend is amplified by the growing integration of GSAP into no-code platforms like Webflow, allowing intricate animations and micro-interactions to be seamlessly implemented. This collaboration bridges the gap between creativity and accessibility, enabling visually stunning and highly interactive websites.
4. AI-Generated Images and Videos
AI is revolutionizing content creation. While AI-generated visuals gained traction last year, 2025 is taking them to the next level. The ability to produce unique, tailored scenes with ease is streamlining content production. Designers can now create dynamic, responsive visuals that elevate user engagement.
5. The Power of Micro-Animations
Micro-animations might not be new, but their impact is growing. With more designers involved in website creation thanks to no-code tools, we have greater influence over these subtle animations. Platforms like Webflow, Wix Studio, and Framer are making it easier to implement micro-animations effectively. These tools empower designers to add interactive elements without writing code, enhancing user interaction and making websites feel more alive. They offer built-in animation features and intuitive interfaces that simplify the process of adding micro-animations to our projects. This contributes to a smoother and more intuitive user experience.
Ongoing Trends
Of course, there are trends that continue to stay with us:
Brutalism in Web Design
Embracing raw aesthetics and a straightforward approach challenges conventional design norms.
At Muzli, we’re inspired by the opportunities these trends bring to create engaging, personalized, and immersive experiences. Web design in 2025 is about pushing boundaries, crafting innovative user journeys, and making websites that captivate and inspire.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Choosing the right font can dramatically elevate the visual impact of your project. As we move into 2025, we’re thrilled to present a fresh selection of 30 remarkable free fonts that bring style and personality to your designs.
This year’s collection offers a variety of fonts, many of which are free for personal use or trial purposes. It’s important to check the licensing terms before downloading and applying these fonts to ensure compliance with their usage guidelines.
Whether you’re working on personal projects or commercial endeavors, always verify the permissions and limitations associated with each font. Some may be free for non-commercial use but require a license for broader applications. Understanding these terms ensures your designs not only look great but are used responsibly.
Mansfield Font is a fresh and versatile geometric sans-serif font family inspired by the iconic typefaces of the 20th century, such as Futura and Avant Garde. With its geometric letterforms, sharp edges, and minimal stroke contrast, Mansfield embodies the clean and modern aesthetics of neo-grotesque fonts. Its tall x-height and precise design make it a perfect choice for various design projects, from branding to editorial work.
Neue Power is a contemporary sans serif display font family in 6 weights plus 12-degree of obliques. It supports 75+ Languages (Latin Based) followed by the Grotesk typefaces, perfect for various design needs,
Madeleine Stories Font is a beautifully crafted handwriting script typeface that embodies elegance, warmth, and versatility. With its flowing, hand-lettered strokes and refined details, this font feels both personal and polished, making it perfect for a wide range of creative projects.
This font summarises examples of classic Humanistic fonts but with personal details and more playful. The goal is to deliver a font to a more legible tone, focused to editorial and printed uses but with an extra kick.
Regar is a modern and eye-catching display font designed for bold statements and visual impact. Its clean lines, distinct letterforms, and stylish aesthetics make it perfect for headlines, posters, branding, and editorial design. With a balance of elegance and readability, Regar stands out while maintaining clarity, making it versatile for both print and digital use. Ideal for projects needing a strong, contemporary vibe, Regar commands attention and leaves a memorable impression.
The Nostalgic Remain is a chic modern and timeless serif font that evokes a sense of nostalgia and old-world charm. Its elegant and refined letterforms are perfect for creating designs that require a touch of sophistication and tradition.
Better minds is consisting of a fashionable handwritten-style script make looks elegant, and stylish. This font was created to look as close to a natural handwritten script as possible by including 15 ligatures.
LT Serif presents a modern, minimalist, and elegantly crafted serif font, featuring distinctive alternatives for select capital letters with stems. This versatile typeface is inclusive of uppercase, lowercase, symbols, alternates, numbers, and supports multilingual characters. LT Serif lends itself perfectly to projects demanding sophistication and contemporary flair, such as magazine headlines, book layouts, banners, posters, logos, and more
This font features a balanced proportion of stroke thickness and fineness, creating attractive and easy-to-read visuals. This modern serif style is often characterized by a bold distinction between thick and thin lines, providing a touch that is understated but still stands out.
a stylish handwritten font that combines elegance with a modern touch. With smooth curves and lively shapes, this font is perfect for designs that highlight beauty and personality. Its unique strokes give it a chic, contemporary look, making it a great choice for many design projects, whether it’s for eye catching logos, romantic wedding invitations, or branding that feels premium and sophisticated.
an avant-garde typeface designed to bring a fresh twist to your creative projects. With its unique blend of display and geometric styles, this font stands out with its isometric flair and block-like characters that evoke a sense of playfulness while maintaining professional integrity. Perfectly suited for game-themed designs or any project requiring an eye-catching touch, “Funky Form — Geometric Font” offers versatility without compromising on style.
Say hello to Longblack Font! This elegant typeface effortlessly combines style with sophistication, making it the perfect choice for all your creative projects. Whether you’re designing logos, invitations, or social media posts, Longblack Font delivers a smooth balance that creates a lasting impression.
The font is inspired by the works of great masters of type design, such as Adrian Frutiger, Eric Spickerman, Claude Garamon and others. The typeface permeates the spirit of modernism and monumentalism. Not for nothing is it called “Concretica”. This typeface has everything you need for a graphic designer: a basic set of characters (Latin and Cyrillic), additional multilingual character sets (Greek, Hebrew, Hiragana, Katakana), extended basic character sets (Latin Pro, Cyrillic Pro), alternative styles for both letters and signs, arrows (basic and alternative set), and much more.
This typeface, “Rany,” is a modern geometric sans-serif font designed to be simple yet versatile. Created by a designer inspired to turn their idea into reality, “Rany” is well-suited for logos, titles, web pages, and mobile UI design. Despite not being a professional type designer, the creator aimed to produce a font that is accessible and functional for various applications.
a display typeface that exudes a futuristic and modern style. Designed to seamlessly fit technology, futuristic, and outer space themes, each character embodies innovation, making a striking impact in any design. Enhance your visual projects with the sophisticated Neopixel Font — where progress meets inspiring typography.
Baneberries Delight is an enchanting handwriting beauty script typeface that combines elegance with a touch of whimsy. With its flowing, hand-drawn strokes and refined curves, this font captures the natural grace and charm of handwritten calligraphy, bringing a sense of warmth and personal touch to any design.
Malinton is a playful and versatile display sans-serif font designed to elevate your designs with personality and style. Featuring 9 weights, over 360 glyphs, support for 85+ languages, and unique emoticon alternates, it’s perfect for logos, social media, headlines, and more. With modern inktraps and variable font technology, Malinton strikes the ideal balance between creativity and professionalism.
Englisch is a display font inspired by 17th- and 18th-century English typography, blending traditional influences with a modern twist. With 6 weights and 12 styles, it features vertical contrast, open forms, and playful design details, making it ideal for bold titles and logos. Suitable for both print and web, it supports Extended Latin scripts.
Sans-serif fonts for advertising with a retro theme strike the perfect balance between modern minimalism and vintage charm. Its streamlined design enhances readability and exudes a sense of timelessness. In advertisements, the focus is on bold, impactful messaging instead of decorative serifs. With retro-inspired color schemes and design elements, this font looks like mid-century posters. From branding to event promotions, it channels the sleek, no-nonsense approach of classic commercial design.
Advercase Font is a retro serif typeface that blends vintage charm with a contemporary touch. Designed by the Indieground Team, it’s perfect for projects needing a nostalgic yet elegant vibe, from vintage-inspired ads to modern creative designs. Its timeless style makes it a versatile choice for adding character to any project.
CS Praise is a modern Didone serif font that embodies elegance and luxury with its high contrast strokes and sharp serifs. Perfect for upscale branding, fashion, and editorial projects, it exudes sophistication and timeless beauty, making it ideal for designs that demand refinement and exclusivity.
Faodu is a bold and vibrant display font inspired by 60s and 70s psychedelia. With its wavy forms and organic curves, it radiates retro charm and free-spirited energy, making it ideal for posters, album covers, branding, and creative projects with a nostalgic twist.
Tokiyo Brush is a bold, energetic handbrush font that brings a raw, artistic vibe to any design. With its textured strokes and expressive style, it’s perfect for posters, branding, and designs that need a touch of urban flair. Add personality and impact with Tokiyo Brush!
it’s classic, bold and unique, really tying your piece together for a retro feel. Heroline features a soft, solid design with curved corners and a unique letter shape. This font also includes a variety of alternative characters and ligatures, allowing you to create many different looks with the same font.
Giamlass is a chic and elegant serif font by BrandSemut, featuring refined contrast and unique ligatures. Ideal for headings, logos, branding, magazines, packaging, and invitations, it combines clean lines and smooth curves to add sophistication and class to any project.
OffBit is a font type derived from Bitmap with various variations from each box. The term bitmap comes from computer programming terminology, which means simply a bit map, a spatially mapped array of bits.
a soft decorative typeface with rounded shapes. Its friendly appearance is suitable for many design tasks. The typeface has two styles: regular and outline. This configuration allows you to experiment with typeface compositions and styles. The SK Pupok typeface is multilingual and supports many languages, including the basic and extended Latin, Cyrillic, and many others. It is great for creating any design works and will look great in poster design and even in web design.
Inspired by the legendary Finnish architect and designer Hugo Alvar Henrik Aalto, the Aalto OpenType font captures the essence of Aalto’s timeless aesthetic and innovative spirit. This OpenType Display Font seamlessly blends organic forms with clean, modern lines, making it perfect for both print and digital media.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Noomo Agency A boutique design agency specializing in creating interactive digital experiences
Creating a deep connection with the audience, differentiating from competitors, and crafting memorable experiences are crucial for brands today to capture users’ attention. We are on the brink of the extended reality world, where it’s more important than ever for brands to be prepared to meet their users where they are.
Mixed reality, AR experiences, and 3D immersive websites help brands to move one step closer to the future and to their audiences.
Brand storytelling websites.
Immersive brand storytelling websites use rich media, like video, 3D animation, and AR, to tell compelling brand stories, significantly enhancing user engagement and emotional connection.
Immersive 3D web experiences significantly impact user engagement and conversion metrics across various platforms. Such experiences can effectively hold visitors’ attention, making content more memorable and engagingthrough storytelling, personalization, and interactive features.
Increased User Engagement: Immersive 3D content on websites can increase user engagement time by up to 70%, keeping users on the site longer as they interact with the content.
Reduced Bounce Rates: Enhanced interactive and 3D content can reduce bounce rates by up to 20–30%. The engaging nature of 3D content makes users more likely to explore further rather than leaving after viewing just one page
Enhanced User Satisfaction: The innovative use of 3D and interactive content meets users’ growing expectations for dynamic and responsive web experiences. This not only satisfies users but often exceeds their expectations, enhancing overall satisfaction and promoting positive user experiences.
Repeat Visits: Implementing immersive 3D elements can increase repeat visits by 25%, as users return to re-engage with the dynamic content
Microsites create a focused and immersive environment tailored to specific campaigns or product launches, leading to various measurable benefits:
Increased Engagement: Microsites typically achieve higher engagement rates, with users spending an average of 50% more time on microsites compared to traditional web pages. This is due to the focused and interactive content that keeps users engaged longer.
Higher Conversion Rates: Due to their targeted nature, microsites often see higher conversion rates as they are optimized for specific actions, whether it’s signing up for an event, downloading a resource, or making a purchase. The streamlined user journey on microsites minimizes distractions, directing visitors toward conversion goals more efficiently. Campaign-focused microsites can see conversion improvements of up to 35–40% compared to standard pages.
Improved Lead Generation: For microsites aimed at lead generation, conversion rates from visitor to lead can often double that of general websites. This is particularly true when microsites are used for specific events or product launches, where they can convert up to 20% of visitors into leads.
Enhanced Brand Awareness and Reach: Microsites designed for brand campaigns can increase visitor numbers by up to 300% during the campaign period. This spike is often fueled by the novelty and uniqueness of the microsite experience, which encourages sharing across social platforms.
Metrics Tracking and Optimization: Microsites allow for precise tracking of engagement metrics, from page views and session duration to user interactions and conversion rates. This data can be instrumental in optimizing marketing strategies and improving future campaigns based on real user feedback and behavior.
Interactive experiences for activation campaigns
Interactive experiences in activation campaigns, especially at events such as booths and exhibitions, significantly enhance engagement and improve campaign metrics. These activations are designed to not only attract attention but also deeply involve the audience, leading to:
Increased Booth Traffic: Interactive booths typically see higher foot traffic compared to standard booths. Studies have shown that booths with interactive elements can increase visitor numbers by 30–50%, as they offer a more engaging and dynamic experience.
Enhanced Engagement: The interactivity of such booths significantly increases user engagement. Engagement metrics, such as time spent at the booth and interactions per visitor, often double when compared to less interactive setups.
Higher Lead Generation: With increased engagement, the lead generation rates also see a substantial boost. Interactive booths can achieve a 40–60% increase in lead capture, as they often involve some form of data exchange as part of the interaction, such as scanning a QR code or entering details on a touchscreen.
Improved Conversion Rates: The direct involvement and personalized experience provided by interactive experiences often lead to higher conversion rates post-event. Follow-up sales or inquiries can increase by up to 20–30% from leads generated at interactive booths.
Greater Brand Recall and Loyalty: Interactive experiences are memorable and can significantly enhance brand recall. Participants are more likely to remember the brand and have a positive association, which can increase customer loyalty and advocacy.
Valuable Feedback and Data Collection: Interactive experiences provide a unique opportunity to gather real-time feedback and data about customer preferences and behaviors. This data is invaluable for refining marketing strategies and tailoring future campaigns to better meet the needs of the target audience.
Using Interactive Websites for Product or Service Presentation
The way in which a product or service is presented has a direct influence on sales. Microsites that present the product are much more effective than videos or PowerPoint presentations for several reasons:
Increased Engagement: Interactive presentations can lead to much higher engagement rates. By incorporating elements such as live polls, quizzes, and interactive diagrams, these presentations keep the audience actively participating rather than passively listening. Typically, interactive presentations see an engagement increase of 40–60%, as they require and encourage audience interaction throughout the session.
Enhanced Retention: The interactive aspect of these presentations significantly improves information retention. Studies show that interactive learning environments can increase retention rates by up to 75%, compared to traditional presentation methods where retention rates hover around 20–30%. This is largely due to the “learning by doing” approach that interactive presentations offer.
Reduced Drop-offs: In settings where presentations are critical to conversion, such as webinars or professional workshops, interactive elements can reduce attendee drop-offs by up to 35%. The interactive nature helps maintain interest and motivation throughout the session, keeping participants from leaving early.
Improved Satisfaction: Satisfaction levels among participants are notably higher in interactive presentations. This is due to the personalized nature of the learning experience, where participants can influence the direction and focus of the presentation based on their responses and interests.
Through hands-on product demos, customers gain a more profound understanding of products, enhancing their confidence in purchase decisions.
AR experiences for brand activation campaigns
AR experiences leverageimmersive technology to enhance user engagement, increase conversions, and provide entertaining interactions, making them invaluable in digital marketing strategies. They create more interactive and memorable connections with customers, leading to increased brand loyalty and sales.
Enhanced Engagement: AR campaigns typically increase user engagement by as much as 70–80%. Users spend more time interacting with AR features due to the novelty and immersive nature of the technology.
Improved Brand Recall: Studies have shown thatAR experiences can boost brand recall by up to 70%. This is significantly higher compared to traditional digital advertisements or non-AR interactive experiences.
Increased Conversion Rates: Brands utilizing AR for product demonstrations and interactions report increases in conversion rates ranging from 20–40%. The interactive, lifelike experience provided by AR helps reduce the uncertainty in online shopping environments.
Viral Potential: AR activations have a high potential for viral sharing, with some campaigns seeing share rates increase by more than 50% when compared to non-AR content. The unique and engaging nature of AR content makes it more likely to be shared across social networks.
Data Collection and Insights: Brands leveraging AR can achieve deeper insights into customer behavior, with metrics on user interactions improving the accuracy of customer engagement data by up to 30%. This helps in fine-tuning marketing strategies and improving future AR experiences.
These advantages make immersive 3D websites and interactive experiences superior choices for activation campaigns, product or service presentations, and marketing websites. They not only provide a richer user experience but also significantly enhance the understanding and appeal of the product, delivering significant improvements in engagement and conversion metrics.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A Design System is an invaluable resource for designers, serving as a single source of truth that ensures consistency, efficiency, and scalability throughout the design process.
By providing a comprehensive library of reusable components, guidelines, and patterns, it streamlines collaboration across teams, eliminates redundant work, and fosters a unified visual language across projects. Designers can focus more on solving complex problems and crafting user-centric experiences rather than reinventing basic elements for every project.
Additionally, a well-maintained Design System bridges the gap between design and development, making implementation smoother and reducing the risk of inconsistencies. It’s not just a tool—it’s a foundation that empowers designers to work faster and smarter while delivering cohesive, high-quality products.
Untitled UI is the largest UI kit and design system for Figma in the world.
Untitled UI has been a staple in the market for years, earning its reputation as one of the most popular UI kits and design systems for Figma.
It provides everything needed for any design project, from simple websites to complex web applications, all in one comprehensive package.
Staying true to traditional component creation, Untitled UI is expertly built with 100% Auto Layout 5.0, intelligent variants, Figma’s latest variables features, and a strong emphasis on accessibility. Boasting over 10,000 components and variants, 900+ global styles for colors, typography, and effects, and an impressive library of 420+ beautifully designed mobile and desktop page examples, it stands out as one of the most extensive and versatile UI kits available.
The Detachless UI Kit for Figma is an excellent free resource designed to simplify and speed up web design. It offers a wide range of components and styles to help you craft stunning designs with minimal effort.
Detachless allows you to kickstart your web projects effortlessly, providing all the essential tools for a seamless and cohesive design workflow. It’s a valuable asset for any designer looking to enhance their efficiency and unleash their creativity in Figma.
Created by Dmitriy Bunin in late 2021, Frames X is a standout example of a mid-weight design system for Figma.
Frames X includes over 5,500 reusable components and variants, all built with Auto Layout and supporting dark mode. It also features color styles, icons, and more than 420 “building blocks” to kickstart your website and app designs.
Keep is a streamlined design system that stands out by offering seamless integration for both Figma and React, bridging the gap between design and development. Unlike traditional design systems that often focus solely on design tools, Keep provides a cohesive framework that ensures consistency across design and code.
With its dual compatibility, designers can effortlessly prototype and refine their ideas in Figma, while developers can implement those designs with precision using React components. This end-to-end solution not only accelerates the workflow but also reduces the risk of misalignment between design and implementation, making Keep an essential resource for teams aiming for efficiency and collaboration.
Used by over 12,000 designers and teams from companies like Thoughtworks, Blurb, Latch, and more, Atomize empowers designers to create modern and visually appealing user interfaces and websites, while eliminating tedious tasks.
All-Access Pass to UI8. Instant access to all 10,006 existing products and daily new releases. Unlock $270,453 worth of assets including UI Kits, fonts, Design Systems, mockups, icons, illustrations, themes & templates.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Elevate your design game with these essential reads, packed with timeless principles and cutting-edge insights.
Starting your UI/UX career often involves reading foundational works like Don Norman’s books. But as the design world rapidly evolves, it’s essential to keep learning. Trends shift, tools update, and being adaptable is key to staying relevant. To help you navigate this fast-paced environment, here are 10 must-read books that will refine your skills and keep you ahead of the curve in 2024:
Refactoring UI by Adam Wathan & Steve Schoger
Make design effortless.
This book is a game-changer for UI designers because it bridges the gap between design and development. Written by a developer-designer duo, it’s packed with practical advice and real-world examples. The authors break down complex design problems into manageable steps, helping you understand not only what to change, but also why those changes work. It’s especially great for developers transitioning into design or designers looking to sharpen their UI skills.
One of the best aspects of Refactoring UI is its emphasis on efficiency — how small tweaks in typography, spacing, and color can vastly improve a design. Its conversational tone makes learning design approachable, even if you’re just starting out.
“Design isn’t just how it looks; it’s how it works.”
This quote encapsulates the core principle of Refactoring UI, making it a must-read for those wanting to create visually appealing, functional user interfaces.
Practical UI by Adham Dannaway
Logic-driven design for accessible interfaces.
Practical UI emphasizes simplicity and logic in design. This book is all about making UI design accessible by following a clear set of rules and guidelines. It’s perfect for designers who want to create intuitive, accessible, and beautiful interfaces. Adham Dannaway breaks down complex design concepts into simple, easy-to-follow principles.
“Most of my design decisions are driven by logic, not artistic flair.”
Dannaway focuses on usability and clarity, making this book a go-to for practical, everyday design work.
3. How to Design Better UI Components 3.0 by Adrian Kuleszo
Master UI components like a pro.
This book is an essential guide for designers looking to build better UI components. Adrian Kuleszo covers everything from the basics of UI design to advanced techniques, with a focus on component-based design. It’s filled with examples and visual guides, making it a highly practical resource for improving your UI design work. Whether you’re a beginner or an experienced designer, this book will help refine your skills.
“Good design is about structure, not decoration.”
Better Web Typography for a Better Web by Matej Latin
Typography makes or breaks your design.
Matej Latin’s book focuses on one of the most overlooked aspects of UI design — typography. Good typography can elevate a design, making it more readable and visually appealing. This book is a deep dive into the world of web typography, covering everything from font selection to spacing and alignment. If you’re looking to improve your design skills, mastering typography is a great place to start.
“Typography is the foundation of web design, not just an afterthought.”
5. The Visual History of Type by Paul McNeil
Explore the evolution of type over 200 years.
Paul McNeil’s book is a visually stunning exploration of typeface design over the past 200 years. This book is not just for UI designers but for anyone who appreciates the art of typography. It provides a deep understanding of the history and significance of various typefaces, making it a fascinating read for anyone looking to enhance their design work through better typography choices.
“Every typeface has a story to tell.”
UI Design Systems Mastery by Marina Budarina
Build better systems, build better products.
Marina provides a step-by-step guide to creating effective UI design systems, with examples from real-world projects. “A good design system is invisible when it’s done right,” she writes.
The Design Manual by Adrian Kuleszo
The ultimate guide to mobile UI design.
At over 770 pages, The Design Manual is one of the most comprehensive books on mobile UI design. Adrian Kuleszo provides step-by-step guidance on designing mobile apps for iOS and Android, covering everything from design principles to advanced techniques. This book is especially valuable for designers working in mobile app development.
“Design for the user, not for the device.”
The Ultimate Guide to Web Design by Adrian Kuleszo
Everything you need to know about web design in one place.
This book is an excellent resource for freelance web designers or anyone looking to improve their web design skills. Adrian Kuleszo covers the entire web design process, from UX research to responsive design and no-code tools. It’s perfect for beginners and seasoned professionals alike, offering actionable advice on how to design effective and beautiful websites.
“Web design is about creating experiences, not just layouts.”
Master UI Design Elements by Denislav Jeliazkov
Focus on the core essentials of UI design.
Master UI Design Elements focuses on the core elements of UI design — buttons, forms, typography, and more. It’s a concise guide filled with practical tips that are easy to implement. This book is ideal for designers looking to refine the foundational elements of their design work.
“UI design is about clarity and function, not just aesthetics.”
Landing Page Hot Tips by Rob Hope
Create landing pages that convert.
Rob Hope’s book is a must-read for web designers and marketers alike. It’s packed with 100 actionable tips for designing landing pages that convert visitors into customers. The book also includes visual references and external resources, making it a highly practical guide.
“A good landing page is the difference between interest and action.”
Pro Tip: UI design is a journey, not a destination. Each of these books offers valuable lessons that can shape your growth. The best part? Applying these principles consistently will put you ahead of the curve.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Canvs Editorial Meaningful stories and insightful analyses on design
In a world where we’re constantly bombarded with information, grabbing and holding attention has become harder than ever.
Whether it’s on social media, through ads, or even in our work, the race to capture people’s focus is relentless. But as this race intensifies, we’re starting to see cracks in the system.
The quick hits of attention that once worked are beginning to lose their effect, and the approach that got us here no longer seems sustainable. It’s time to look deeper into how the attention economy is eating itself.
Why the attention economy is a self eating snake
The ouroboro phenomenon
Imagine the attention economy as an ouroboros, the ancient symbol of a snake eating its own tail. It’s a perfect representation of what’s happening right now.
The attention economy, once thriving on short, snappy bursts of content designed to hook us in, has started to consume itself. What worked in the past — quick hits of dopamine from likes, shares, and follows — is no longer working in the same way.
With everyone competing for attention, the quality of content has taken a backseat. Designers and influencers keep pumping out more of the same, hoping to stand out.
But here’s the problem: there’s no substance.
It’s a cycle of diminishing returns, where the more we produce, the less we truly connect.
The decline of personal brands
Take a look at personal branding. Just a few years ago, building a personal brand through short-form content was seen as the golden ticket to success.
Designers, influencers, and content creators grew massive followings by constantly posting bite-sized, attention-grabbing content.
Now, having a big following isn’t enough. People are tired of the noise and starting to tune out. What once seemed like a clear path — gain followers, build a brand, and monetize it — has become cluttered.
The copy-paste culture
The design community is currently overwhelmed with content that lacks originality and freshness.
It’s the same familiar topics — button comparisons, basic UX tips, and standard design advice — repeated endlessly.
While these pieces of content once offered valuable insights, they’ve become predictable and less impactful over time.
The focus has shifted from creating unique and enriching content to simply maintaining a presence.
Shifting focus to substance in design
There’s a growing demand for design content that goes beyond surface-level tips and visuals, with a focus on providing real depth and insight.
Audiences are now looking for more thoughtful content- unique perspectives, comprehensive analysis, or practical resources that can be applied to real-world design challenges.
This new era calls for designers to create content that adds lasting value.
Here are some good reads that have focused on substance over surface-level content:
This new direction in content creation is a breath of fresh air for designers. It removes the constant pressure to churn out content just for the sake of staying visible.
Instead of feeling the need to post frequently just to rack up likes or build a following, designers can now take the time to create work they’re genuinely proud of.
It also encourages more creativity and originality. With less emphasis on keeping up with fleeting trends or copying what’s already out there, designers have the freedom to experiment and think deeper about their work.
This shift means there’s more room for unique voices, new perspectives, and thoughtful contributions that actually add value to the design community.
Ultimately, this can lead to more meaningful, impactful designs — and a more fulfilling creative process.
Embrace the change
We’re entering a new phase where meaningful work is becoming more important than ever for designers.
This shift allows us to slow down, explore new ideas, and focus on creating designs that make a real impact. Instead of chasing trends or quick likes, now is the time to rethink our approach and create something that truly matters.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Unlock the Power of Interactive, Flexible, and Stylish Accordion
An accordion is a vertically stacked list of headers that reveal or hide associated sections of content. Accordion components are great for displaying content in a collapsible format, making them ideal for managing large amounts of information in a compact way. They typically consist of a series of expandable sections or panels.
Ravi Kumar Product Designer with a decade of expertise in creating research-driven designs for enterprise applications.
Accordion Anatomy
The accordion component is composed of several key elements:
Header: The Header is the clickable area that users interact with to expand or collapse the accordion. It typically includes a title and may also feature additional elements like icons (e.g., chevron, status indicators, or settings icons) to provide context or functionality. The header ensures proper alignment and spacing of its elements for a clean and organized layout.
Chevron Icon: A directional icon located at the end of the header, indicating the current state of the accordion (collapsed or expanded). It points down when collapsed and up when expanded.
Additional Icon: An optional icon near the title within the header container, providing further context or functionality (e.g., a user avatar, status indicator, or settings gear).
Content Panel/Container: The section that holds the detailed content of the accordion, revealed or hidden when the header is clicked. It ensures proper layout and organization of the content for clarity and readability.
Divider: A visual separator between different accordion sections or headers, often a line or space that helps delineate sections and improve readability.
Badge: A small visual indicator, typically placed near the header, showing additional information like counts or status. This enhances usability by providing extra data at a glance.
Box: The outer container that surrounds the entire accordion component, including the header and content panel. It provides a structural framework and may include styling like borders, shadows, or background colors.
These elements work in tandem to provide an organized, visually appealing, and interactive user experience, allowing users to manage large amounts of information in a compact and efficient format.
Accordion States & Behavior
The accordion component has several key states that define its interaction.
Collapsed State
Default (Collapsed)
Appearance and Behavior: The accordion header is visible with no content displayed. It typically features a collapsed icon (e.g., downward-facing arrow or plus sign) and is styled to indicate it can be interacted with.
Hover (Collapsed)
Appearance and Behavior: When the user hovers over the collapsed header, it visually changes (e.g., background color shift or border highlight) to indicate that it can be expanded.
Pressed (Collapsed)
Appearance and Behavior: The header shows a pressed effect (e.g., darker shade or inset shadow) when clicked, indicating that the section is in the process of expanding.
Focused (Collapsed)
Appearance and Behavior: The header features a focus ring or outline to indicate keyboard focus, helping users understand that the section can be expanded with a key press.
Expanded State
Default (Expanded)
Appearance and Behavior: The header is visible along with the expanded content. The icon (e.g., upward-facing arrow or minus sign) indicates the section is open and the content is fully displayed.
Hover (Expanded)
Appearance and Behavior: When hovering over the expanded header, visual feedback is provided (e.g., background color or shadow effect), indicating that the section can be collapsed.
Pressed (Expanded)
Appearance and Behavior: The header appears pressed when clicked, showing that the section is in the process of collapsing. The icon transitions to indicate the change.
Focused (Expanded)
Appearance and Behavior: The expanded header has a focus ring or outline, similar to the collapsed focus state, helping users navigate via keyboard while keeping the content visible.
Disabled Accordion
A disabled accordion cannot be interacted with, expanded, or collapsed. It appears visually distinct, often grayed out, and does not respond to clicks or keyboard navigation. Its content and toggle icon are hidden, and it does not receive focus during navigation.
Accordion Variations
Accordions come in various styles to suit different user needs and content types. Here’s an overview of different accordion designs
Text Accordion
A text accordion, also known as a default, basic or standard accordion, features sections with text-based headers that users can click to expand or collapse. Each header is clearly labeled with text, making it easy for users to understand the content of each section. This design helps organize information efficiently and enhances readability by allowing users to view only the sections they are interested in.
Icon Accordion
An icon accordion includes icons alongside the text or header of each section. The icons represent the content or function of the section, enhancing visual recognition. The accordion expands or collapses content as needed, with icons helping users quickly identify and navigate between sections. This design improves usability and provides a more engaging and intuitive interface.
Image Accordion
An image accordion features images within the header of each section, visually representing the content or purpose. This design is particularly useful for user profiles, team directories, or messaging apps where visual identification enhances the user experience. By making headers more engaging and easier to identify, it provides a more intuitive way for users to navigate and interact with the content.
Accordion Enhancements
Expand Indicator Icon
The expand indicator icon in an accordion automatically rotates to show the state of the section — down when collapsed and up when expanded. This icon is crucial for signaling whether content can be revealed or hidden. Common types of icons used include arrows (e.g., chevrons), plus/minus icons, and caret icons, each providing a clear visual cue about the accordion’s current state.
Expand Indicator Icon Position
The expand indicator icon in an accordion can be positioned in several ways depending on the design and layout. It is often placed to the left of the header, making it immediately visible when the section header is clicked. Alternatively, it may be positioned to the right of the header, providing a clear visual cue after the header text. In some designs, the icon is integrated within the header, aligning with or adjacent to the text for a more compact appearance.
Accordion Text Alignments
In an accordion, text alignment within the header can vary to meet different design needs. Left-aligned text is placed at the left edge of the header, making it suitable for designs with icons or badges on the right. Center-aligned text is positioned in the middle of the header, ideal for minimalistic designs or short titles. Right-aligned text is aligned to the right edge, which works well for designs featuring icons or badges on the left and for supporting right-to-left language layouts.
Accordion with Title
A main title for an accordion is the primary heading that defines the overall theme of the content. It helps users quickly understand the purpose of the sections below. Positioned at the top, it’s more prominent than section headers, providing a clear sense of what information or settings are contained in the expandable sections, such as “Frequently Asked Questions” or “User Account Overview.”
Accordion with Sub header
A sub-header in an accordion provides additional context or information below the main header. This can help clarify the content of each section or offer more details without overwhelming the main header. If the sub-header text exceeds the width of the accordion, it may truncate and show a tooltip on hover for complete information.
Accordion Text Display
Accordion Text Display focuses on how text is managed and presented within accordion headers. Key techniques include:
A truncated accordion uses ellipses to shorten titles that exceed a set length, maintaining a compact design. Full titles can be revealed through interactions like hovering or expanding.
In a wrapped text accordion, long titles automatically wrap to the next line, adjusting the container’s height to fit the full text. This approach ensures readability and accommodates extended titles while keeping the design responsive.
Accordion with Show Number Prefix
A number accordion uses numbers as prefixes in the headers to organize and sequence sections. Each header starts with a number, such as “1. Introduction,” “2. Features,” and “3. FAQs,” helping users easily navigate and identify the order of sections within the accordion.
Accordion Spacing
Accordion Spacing involves adjusting the padding and margins within and around accordion components to achieve a clean and modern look. This includes setting section padding to keep content from touching the edges of each section, margins between individual accordion sections to ensure clear separation, and header spacing with adequate top, bottom, left, and right margins to enhance readability and prevent clutter. Proper spacing improves the visual appeal and usability of the accordion, creating a well-organized and balanced layout.
Accordion Fluid
Accordion Fluid refers to an accordion design that adapts dynamically to fit its container, allowing it to resize fluidly based on available space. This approach ensures that the accordion maintains a responsive and flexible layout, adjusting both horizontally and vertically to accommodate varying screen sizes or container dimensions. Fluid accordions enhance usability by ensuring that content is always displayed effectively, regardless of changes in the viewing environment.
Accordion Sizes
Accordion with Border
An accordion with a border features sections enclosed by a border around the box. This design provides a clear visual boundary for each section, enhancing organization and focus. The rounded border creates a softer, more modern look, making the accordion visually appealing and easy to distinguish from surrounding elements.
Floating Accordion
A Floating Accordion, also known as “borderless,” “bare,” or “ghost,” removes background and borders, offering a clean, unobtrusive design. This style is ideal for modals or when space is limited, providing a sleek appearance that integrates seamlessly with the surrounding content.
Shadow on Accordion Box and Header
Shadows enhance an accordion component by adding depth and emphasis. Applying a shadow to the accordion box makes it stand out from the background, creating an elevated effect. A shadow on the accordion header highlights its prominence and improves its visual distinction. These effects help make the accordion more engaging and visually appealing.
Accordion Contextual Information
Badges, Alerts, Status, Metadata, and Progress each enhance accordions by providing additional contextual information:
Badges: Small visual indicators that display counts, notifications, or quick information, such as the number of unread messages or pending tasks. They offer a concise way to convey key details at a glance.
Alerts: Visual or textual messages that highlight important notifications, warnings, or errors. Alerts are designed to draw attention to critical information, ensuring users are promptly aware of urgent issues or updates.
Status: Indicators that show the current state or condition of each section, such as “In Progress,” “Completed,” or “Pending.” They help users quickly understand the progress or state of various items within the accordion.
Unread Indicators: Highlight sections with unread or new content to help users quickly identify updates. Common indicators include badges with counts, background highlights, or small icons, enhancing usability by drawing attention to sections that need review.
Metadata: Additional contextual information about each section, such as timestamps, labels, or data points. Metadata provides extra detail that helps users better understand or categorize the content.
Progress: Displays progress indicators within each section, allowing users to track task completion or status. Common features include progress bars, progress circles, or status labels like “In Progress” or “Completed,” which help users monitor and manage ongoing tasks more effectively.
Combination: Badges, alerts, status, and metadata can be combined in an accordion to provide users with a comprehensive overview of information, improving clarity and interaction.
Accordion Interactions
Always Open
In this behavior, multiple sections of the accordion can be expanded at once, allowing users to view several or all sections simultaneously. This provides greater flexibility for users who want to access large amounts of content without closing any sections.
Only One Expanded at a Time
In this interaction, only one section of the accordion can be open at a time. When the user expands a new section, the previously open section automatically collapses. This is ideal for keeping content organized and minimizing clutter, particularly when space is limited.
By Default, One Open
When the page loads, one section is expanded by default. This can guide users by highlighting the most important or commonly accessed information first. Other sections remain collapsed until the user manually interacts with them.
Auto-Collapse
With this interaction, expanding one section automatically collapses all other open sections. It is similar to “one at a time” behavior but focuses on minimizing the need for user clicks by closing other sections immediately.
Sequential Expansion
Sequential Expansion requires users to complete accordion sections in a specific order, often used in multi-step forms or onboarding processes. This method ensures a logical flow, making sure users address each section sequentially before moving to the next. It is effective in scenarios where each section builds upon the previous one, such as in detailed forms, surveys, or step-by-step tutorials.
Accordion Control Button
The accordion control buttons include “Expand All” and “Collapse All”. The “Expand All” button, placed above the accordion, expands all sections to reveal all content. Conversely, the “Collapse All” button collapses all sections, hiding the content. Both buttons should be implemented with proper state management to ensure consistent and simultaneous expansion or collapse of all sections.
Accordion with Tooltip
An accordion tooltip is a feature that provides additional context or information when a user hovers over or interacts with an accordion header or section. Tooltips can enhance the user experience by offering hints or explanations without cluttering the interface.
Advanced Features
Nested Accordion
A nested accordion includes an accordion within another accordion, allowing multiple layers of collapsible sections. This design helps organize complex, hierarchical content by expanding or collapsing top-level sections and revealing additional nested sections as needed.
Accordion Reorder
Reordering Accordion allows users to rearrange accordion sections to better suit their needs. Users can drag and drop sections or use navigation buttons to adjust their order, enhancing flexibility and content organization. For example, in a project management dashboard, moving the “Urgent” section to the top helps prioritize critical tasks.
Accordion with Actions
Accordion Actions refer to the interactive elements that allow users to manipulate and interact with accordion components. Key actions include:
Icon Button: Uses graphical icons to represent actions visually, such as a plus sign for “Create,” a pencil for “Update,” or a trash can for “Delete.” Icon buttons are compact and save space while conveying actions through universally recognized symbols.
Text Button: Utilizes textual labels like “Create,” “Update,” or “Delete” to clearly indicate the action. Text buttons are straightforward and easily understood, making them suitable for explicit commands.
Toggle Button: Provides an on/off switch to enable or disable features or settings within the accordion. It allows users to change the state of a section or its contents clearly.
Radio Button: Allows users to select one option from a set of mutually exclusive choices. This is useful for scenarios where only one option can be chosen from several available within the accordion.
Checkbox: Used for actions such as accepting terms or confirming selections. It allows users to toggle between checked and unchecked states to indicate agreement or completion.
Conclusion
Accordions are a powerful UI component for organizing and managing large volumes of information in a compact, user-friendly format. By allowing users to expand or collapse content sections as needed, accordions improve usability, reduce visual clutter, and enhance content discoverability. The design flexibility — ranging from simple text-based accordions to those featuring icons, images, and contextual information — ensures they can be adapted to suit various content types and user needs. By incorporating thoughtful design elements such as indicators, tooltips, and control buttons, and supporting various interaction patterns, accordions create an intuitive and engaging experience that helps users quickly find and focus on the information most relevant to them.
Credit
“While researching this topic, I was fortunate to receive valuable insights from Kusumit Goyal (Product Manager) and Shashanka Behera (UX Designer) , whose expertise in UX design & UX Research helped refine my understanding of user interfaces.”
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week’s update is packed with a fresh selection of inspiring projects, innovative tools, and design resources to fuel your creativity:
AW — Creative Developer Freelance — France Dive into the impressive portfolio of a creative developer with over 15 years of experience, specializing in animated, high-impact web experiences in collaboration with top designers.
AYOCIN — Where design meets your well-being AYOCIN brings nature-inspired wellness into interior design, blending advanced health tech with sophisticated aesthetics for a holistic boost to your living space.
Motion Energy Gradient Textures Add a touch of dynamic energy to your designs with these vibrant gradient textures, perfect for creating eye-catching, animated visuals.
Mobit — Software & Mobile App Framer Template A sleek, modern landing page template on Framer, ideal for software and mobile app businesses looking to make a strong digital impression.
Subframe An intuitive UI-building tool featuring beautifully crafted components, a drag-and-drop editor, and pixel-perfect React code for fast, professional interfaces.
And there’s so much more! Check out the full post to explore additional fonts, presentation kits, inspiring portfolios, and innovative projects that will elevate your design game.
Creative Developer with 15+ years and 140+ projects, specializing in animation-driven, high-impact websites. Partnering with designers to craft memorable UX.
AYOCIN creates smart interior pieces that combine advanced health technology with elegant, timeless design. Each piece brings nature-inspired health benefits into your home, supporting your health, well-being, and longevity.
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week’s lineup is brimming with innovation to boost your creative toolkit:
Noomo Beat — Personalized AI Audiovisual Experience Dive into an interactive, 3D microsite that brings together AI-driven music and dynamic visuals. Noomo Beat offers a unique way to experience brand storytelling through personalized sound and visuals.
ChainGPT Labs Supporting visionary Web3 builders, ChainGPT Labs is designed for those looking to make an impact in the decentralized space. Apply now to gain access to funding, acceleration, and incubation.
Hanzo — Minimal Portfolio Template Hanzo provides a sleek, minimalistic portfolio template tailored for designers who want an elegant and straightforward way to showcase their digital work.
Unblocked AI — Figma Plugin Effortlessly edit images right within Figma using Unblocked AI. This plugin makes visual enhancements a breeze without requiring login or registration.
Fabric — Your Smart Workspace Organizer Fabric keeps your ideas, projects, and files in one place with a self-organizing workspace designed to streamline your workflow and boost productivity.
There’s even more inspiration, from UI kits to display tools, waiting in the full post. Head over to explore the rest of this week’s design resources!
Noomo Beat is an immersive 3D microsite offering personalized AI music and dynamic visuals for brand activation. Customize your experience and explore interactive storytelling.
Unblocked is a Figma AI plugin for editing images without leaving Figma. Use AI-powered tools to enhance your visuals — no login or registration required.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Effective ways to make your brand unique and stand out in the marketplace using iconic brand principles
Erik Messaki Co-founder and CEO at Outcrowd branding and web design agency
Naples helped me better understand global economy principles.
Roberto Saviano
This quote comes from a book by a writer who was assassinated by the mafia for revealing its secrets. I don’t intend to take such risks, so I’m going to share some legal ways of making a brand unique, effective, and unsinkable — like the mafia.:)
We know that a brand needs to be special to outperform the competition and stand out in the marketplace. In practice, it’s not always as fun as it sounds. A company comes up with a USP, builds great product features, and orders a special trending design. But as time goes by, the startup gets lost among its peers and stops growing, despite a promising strategy, regular updates, and active marketing efforts. What went wrong?
One of the reasons is misunderstanding of what exactly makes a brand unique, how it works, and how not to lose that uniqueness during the growth and scaling of a startup.
To understand it, we need to look at any iconic brand and see what makes it so. It will serve as an example. There’s a lot we can borrow from these guys and use in our own strategy.
Get ready, because what I’m going to say will shock you.
Uniqueness means being distinct. Creating an iconic brand is like starting a mafia or a cult, minus the criminal aspect.
This isn’t just a humorous simile. An iconic brand has all the characteristics of a mob octopus that holds the world in its tentacles. A strong brand is akin to a religion, a cult, an object of worship, with its own leaders, acolytes, and missionaries that spread ideas and products. The word “religion” means “a bond of faith.” Consumers are bound together by their belief in and loyalty to a brand. And just as every religion is unique and distinct, so is a strong brand unique and distinct from the sea of mediocrity. In any case, brand cultists believe their group to be apart from everyone else and are proud of it.
If you analyze how a cult is organized and what makes it effective and apply these principles to your brand, you will achieve incredible results, even if you have a small company, modest finances, and a non-unique initial product.
So, are you ready to become the godfather of the Brand Mafia? Then let’s go!
The Mafia/Cult Model
Most entrepreneurs usually rely on their current capabilities and never imagine their ideas and products taking over the world. But those who settle for less, get less. Strive to go beyond mundane reality and don’t limit your brand vision in the long run. One day, your brand may be the octopus that takes over the world. This vision must be built into the foundation. For this purpose, the internal ideology of the brand and all strategic steps and processes should be aimed at creating your brand mafia, growing it, and gradually introducing its tentacles into the market.
How does this approach differ from the standard growth and scaling strategy? Here’s how: you are consciously applying cult (or mafia, if you prefer) strategies, minus the illegal stuff. This approach can completely change the way you look at business. You might even reorganize the company, rewrite its development strategy, rethink brand development, positioning, and image.
This means a revolution and a hard reset of the system. But don’t make any steps in this direction without first learning how a mafia or cult works and how their models and principles are applied in marketing.
Few of us are ready to start a revolution — a restyling at most. Maybe a rebranding, if the brand has lost its luster and needs to be repositioned. But turning into a mafia? Thanks, guys, I’ll take a raincheck. We only sell soap, there’s no cult. (That laughter you hear is Procter & Gamble and Colgate-Palmolive.)
Still, you can already apply “cultish” principles as additional tools to develop and promote your brand. Once you see that they work, you’ll want to add more.
Uniqueness is about being chosen and distinguished. To become chosen, you need to be worthy. Not just create a worthy image, but live up to it.
To grow the right tree, you need to plant the right seed.
Branding doesn’t start with an identity. Branding starts with an idea, a purpose, a strategy, and an organization. It also starts with a team. If the brand is weak and not internally unique (if team members don’t feel like chosen and valued employees or lack motivation and vision for the brand), this will eventually manifest externally.
Branding starts from within.
The word “culture” comes from the word “cult.” If a company decides to postpone the development of its corporate culture until better times, it won’t become an iconic brand or even a good one.
Jesper Kunde’s brilliant book Corporate Religion reveals how an iconic brand is created. Kunde introduces the concept of “corporate religion” as a philosophy that unites a company and its employees around a common set of values, mission, and vision. Both consumers and the company itself become adherents of the “brand cult.”
Here are the salient points Kunde makes in Corporate Religion:
Successful brands evoke the same devotion and emotion in consumers as religion does in believers. Brands become part of people’s lives, inspiring trust and a sense of belonging.
To create a “corporate religion,” companies need to define their values and mission clearly. These elements must be sincere and integrated into every aspect of the business.
Company employees should become “adherents” of the corporate religion, sharing its values and goals. This promotes cohesion and performance.
Successful brands are consistent in their messaging and actions. Consistency in values and strategy helps create a strong, understandable brand that is appealing to consumers.
Consistency between external marketing communications and internal corporate communications is a must. This creates a unified brand perception both internally and externally.
To succeed, a company must strive for a culture of excellence that reflects a commitment to being the best at everything it does, from the product to customer service.
Fostering an internal culture builds and reinforces the core of the brand, making the brand stronger. But being strong isn’t quite enough to become iconic.
The brand needs to become special.
That’s where the “mafia/cult” marketing techniques come into play. These are tools of unification and separation. Strangely enough, some of them unite and divide at the same time.
La Cosa Nostra means “Our Cause.” (These guys have a great marketing department.)
1. Motivation
An iconic brand has a powerful motivating concept and communicates it to its followers on a constant basis. Universal and socially important values are involved in the brand concept. Philanthropy, solving social ills, saving nature, providing help and charity. Marketing actively (sometimes aggressively) spreads the brand idea.
2. Problem solving
The mafia takes care of its own, solving all their problems. (Sounds familiar!).
To the cult followers, sacred knowledge and a special path shall be revealed. It will take away their pain and solve all their problems.
A unique brand copies these valuable strategies.
3. Control and hierarchy
Every mob has its own charter and rules. The Sicilian Mafia has a pyramid management structure. The Camorra has a horizontal structure (clans are independent, prone to feuding and competition, but this makes it more stable). Any mafia group uses strict control, unquestioning obedience of the elders, discipline, rewards for the loyal, and punishments for the disloyal.
A strong brand also keeps all processes under strict control. It has a clear structure and hierarchy. It stimulates internal competition, playing on the desire of each team member to reach the next level and increase their standing. Loyalty is encouraged, while disloyalty can be punished (except there’s no bloodshed involved).
4. Initiation and involvement
In the mafia, newbies go through initiation rites and are taught the secrets of the craft. A strong brand actively works with newcomers (offering them attention, involvement, and immersion), instilling in them pride in the company and a sense of being chosen. The company holds regular workshops, meetings, training seminars, etc. A similar approach is used for the target audience.
5. Leader
An iconic brand has its own “preacher.” This is an authority, a charismatic leader who broadcasts the brand’s ideas constantly, like sermons. It’s an expert opinion with an emotional pitch that impassions adherents inside and outside the brand. The brand also employs regular celebrity endorsements.
6. Rituals and attributes
An iconic brand has more than just its own identity. It has its rituals. Its attributes. Its rules. Its prohibitions. Its incentives and rewards. It paradoxically unites and divides at the same time.
Cultists believe that their way is the best and they are the elite. So do brand cultists. Working for a corporation is extolled while consuming the brand’s products is proclaimed a privilege.
But being chosen is not just elitism. “The chosen one” works for a purpose, a specific mission. The chosen one is separated from the crowd and raised above it to do something important.
People aren’t inspired by a brand’s special features.
People are inspired by becoming special themselves or doing something unique through the brand.
An iconic brand allows customers to stand out, to achieve more than others, to be better than others. It gives people a desirable image of themselves. Such a brand becomes valuable and unique and stands out on its own.
By making people feel chosen, the brand becomes the people’s choice.
Even if you sell soap or nails, there’s no reason you can’t use an image of a smart homeowner or a successful nail wholesaler in your branding — the image of what your customers want to see themselves as.
2. Being chosen as personal and group identity
A unique brand treats every consumer like a special and important client. In doing so, it emphasizes that the customer is not alone. The brand groups people together and separates them from the rest. The group of adherents is proclaimed to be elite or to have advantages through exposure to the brand’s special products and ideas. Each member of the group believes in the power of these ideas (or the product being offered).
Uniqueness is born with an idea, brought to life through visual identity, and then broadcast to the world.
Identity is first and foremost a tool for brand recognition. It creates the face of your company. Design and marketing make this face recognizable, special, and loved.
This tool integrates and distinguishes at the same time. A unique identity is always cohesive and stylistically unified. It is the key to brand recognition and successful brand communications.
An iconic brand’s identity isn’t about shock and awe. It’s about good, professional design. You can commission one that’ll be just as good.
However, you need to realize that visual design is just the outer shell of the idea, which is the essence of the brand. A Christian is awed by the sight of the cross, even though there’s nothing outstanding about its design. The cross acts as a psychological and emotional trigger. Adherents of an iconic brand are awed by the familiar designer squiggle.
The foundation of a unique and recognizable brand is its essence, which marketers and designers make tangible and appealing, turning the brand into a visual magnet and a tool for communicating with users.
Iconic brands use emotions and stories to hook their customers, bring them together through common experiences, and encourage them to share their emotions and impressions.
“But we also do this!” I hear you saying. So where’s the result? The result depends on how well you know your users, and whether you were able to hook them emotionally and mentally so that they keep talking about you. Has your brand become a character in their dialogue and a protagonist in their stories — or is it just a passive observer? Iconic brands weren’t created overnight. They’ve been on the road to success for years, all the while studying and testing their audiences. They have penetrated widely and deeply into social networks and have reached the stage when they can mold public opinion and steer it in the right direction.
So you and I still have a long way to go, and we’ve got our work cut out for us. But the more aware your brand is of the world and the people in it, the more useful it strives to be, and the more aware will the people be of your brand. Real mobsters are masters of awareness! 🙂
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week’s roundup has everything from innovative agencies to tools that add flair to your design toolkit:
BETC Fullsix Dive into the world of BETC Fullsix, a consulting and digital innovation agency blending creativity, technology, and data to elevate brand experiences.
Otherlife Creative Agency Explore unconventional solutions with Otherlife, a creative agency that merges web experience, brand design, and engineering into unique digital projects.
Spooky Halloween 3D Illustration Pack Celebrate the season with a set of 54 premium 3D Halloween illustrations — perfect for adding a festive touch to your designs.
DreamCut — AI-Powered Video Editing Edit videos effortlessly on any device with DreamCut’s browser-based AI editor, packed with features like voiceovers, smart assistants, and stunning video generation.
Generative Gradients This plugin makes it easy to craft intricate gradients with customizable options for color, positioning, and distortion, adding dynamic depth to your visuals.
And there’s more! Head over to the full post to discover additional resources, design inspiration, and tools crafted to keep your projects fresh and inventive.
BETC Fullsix is a consulting, digital, and innovation agency. They address all the challenges faced by brands by integrating creativity, technologies, and data.
A sleek and premium agency template designed with precision, ideal for creatives & studios. Ora’s visually striking layout and dynamic features provide a compelling canvas to share your portfolio effectively.
DreamCut is a brand new AI video editor and screen recorder that works right from your browser. Edit videos effortlessly on any device with powerful AI in the cloud. Supercharge your content with AI voiceovers, a smart chat assistant, instant notes, and stunning image/video generation to wow your audience.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This is a p5js experimental poster generator made by a designer for other designer. Generate your poster and download it in vector format. Don’t forget to have fun
Nitro is a neatly crafted and CMS-based portfolio template with floating cards effect and advanced grid layout ready to showcase your work in the best way possible.
This is the ultimate animation tool for Figma. You can easily animate anything, whether you’re a beginner or a professional. Start animating with just a few clicks.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week, we’re bringing you a collection of projects and tools to ignite your creative spark:
Monkey Talkie — Creative Video Agency Step into the unexpected with Monkey Talkie, a video agency where creativity breaks the mold.
The Line Studio — Animation Studio London Discover the award-nominated work of The Line Studio, specializing in both 2D and 3D animations for films, games, and more.
Animal Futures Take a glimpse into a speculative future, imagining the world in 2050 through the lens of animals and technology.
Clarity — SaaS Website Template A sleek, functional website template tailored for SaaS startups, designed to enhance both form and function.
Magic Cut — Figma Plugin Remove backgrounds effortlessly in seconds with this free, no-limits Figma plugin, perfect for streamlining your design process.
And there’s plenty more! Explore the full post to discover additional tools, resources, and projects that will elevate your design work this week.
TWOMUCH is a Digital Design Studio formed by Benjamin Chan (BC) and Malone Chen (MC) operating between London and Vancouver. We play within the fields of Digital Art Direction, Websites, Interactive Design and 3D animation.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week, we’ve curated a diverse collection of projects and tools to spark your creativity:
Treize grammes — Agence de Branding 13g transforms ideas into impactful brand identities, blending strategic storytelling with bold, creative design.
Cosmos Studio | UI/UX & Brand Design Studio A Ukrainian studio bringing immersive UI/UX and brand design to tech projects, making digital experiences truly engaging.
Basiq Clay — Animated Device Mockup A beautifully minimal mockup perfect for versatile presentations that elevate your visual storytelling.
DesignDoc: Measures, Annotations, and Handoff — Figma plugin Speed up your design process with this Figma plugin, offering precise measurements and annotations for a smooth design handoff.
Blitzit — Crush your tasks in flow state Stay on top of your work with this sleek to-do list and timer that helps you focus and stay productive.
And there’s more! Dive into the full post to explore additional design studios, resources, and innovative tools that will elevate your projects.
13g is a branding and digital design studio that transforms ideas into impactful, innovative brand identities, blending creativity with strategic storytelling to elevate brands.
The Conversion Framer template is perfect for digital marketing agencies and freelancers who want a clean, modern, and sleek website that will convert visitors into leads and clients.
Get precise and accurate measurements for your Figma designs with this plugin. It helps to visualize the spacing, margins, padding, and measurements of components, making it easier to create consistent designs. Save time and effort with this tool and take your design process to the next level
Elevate your designs with stunning noise effects using the Simple Noise plugin for Figma. Simple Noise lets you add texture and depth to your designs in just a few clicks.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week, we’ve curated an inspiring collection of creative projects and design tools to keep your creativity flowing:
Sam Grinberg / Portfolio 2020 Dive into the world of freelance illustration and comics with Sam Grinberg’s eclectic portfolio.
Orken Discover ORKEN, a fantasy transmedia project from the innovative team at SIXMOREVODKA, soon to be launched on Kickstarter.
Netlify Celebrates 5 Million Developers Explore Netlify’s interactive 3D experience as they celebrate a major milestone with their global developer community.
Use Contrast / Figma Plugin Ensure your designs meet accessibility standards with this handy tool for checking color contrast in Figma.
Physics Animation / Figma Plugin Bring life to your Figma projects with dynamic animations that simulate realistic physics — no coding skills required!
And there’s even more! Check out the full post for additional design resources, tools, and inspiration to elevate your projects this week.
Studio Gruhl is a creative studio for brand and digital design. Being deeply rooted in today’s subcultures, we enable new visual worlds to bloom. Dream More.
Designed for ease of use, this Framer template is ideal for showcasing your services and capturing leads. Download today and launch a website that’s both visually appealing and conversion-focused.
Use Contrast gives you quick access to proper color contrast ratios from the Web Content Accessibility Guidelines (WCAG). Select any text layer or object on the canvas to produce the score. Fine-tune your colors by using the plugin controls.
Imagine if regular layers on Figma could easily transform into dynamic animations with realistic physics. With the Physics Animation plugin, that’s exactly what you can achieve! And guess what? You don’t need any specialised skills.
Displace brings powerful displacement effects to Figma. Easily create stunning reeded glass, noise, and glitch effects with real-time adjustments. Perfect for photos, typography, and beyond.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
This week, we’ve curated a diverse selection of inspiring projects and tools that will fuel your creativity:
APOSSIBLE A non-profit organization bringing together psychologists, technologists, artists, and creatives to collaborate on experiments and prototypes that uplift the human spirit.
Sage East A renowned visual storyteller and director working with major brands like Google, Netflix, and Nike, Sage East’s emotional and compelling work in advertising and editorial spaces is nothing short of inspiring.
Spectral Gradient A trendy gradient pack that adds a modern, textured feel to your visuals, helping turn every project into a masterpiece.
3D AI Studio Create 3D models, animations, and textures in seconds from text or images, drastically reducing the time and cost of producing 3D assets.
And there’s more! Dive into the full post to discover additional tools, resources, and projects that will inspire your next creation.
As a non-profit, they bring psychologists, technologists, artists, and creatives together to work on applied experiments and prototypes that uplift the human spirit.
Sage East is a visual storytelling photographer and director based between New York and Los Angeles. Sage East has gained recognition for her compelling and emotional work within the advertising and editorial spaces. Her work consists large clients such as Google, Netflix, Meta, Nike, and Amazon.
Let’s embrace AI in the music industry while protecting and championing artists, ensuring our future careers. Through partnerships with educational institutions, legal experts, and stakeholders, we are setting new standards and advocating for policies that protect artists’ rights.
Dark Veles — a bold, sophisticated dark-themed portfolio template crafted to showcase your creative projects. Perfect for designers, artists, photographers, and developers, Dark Veles provides a sleek platform that highlights your work.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Create beautiful tiny graphs with a couple of clicks. Paste your data from Excel, CSV, JSON, or type it. Use Shuffle to make more variants of your data to explore patterns and get insights.
Find and Replace give you the ability to to find all instance of a specific color and replace it by another one in your current page or in the entire project.
This week, we’ve got an exciting mix of projects that will fuel your creativity:
Federico Pian / Portfolio 2024 Explore Federico Pian’s clean and modern portfolio that highlights creative work with a sleek and engaging user experience.
Alternate Reality What if technology from today existed over a century ago? This fascinating concept will stretch your imagination and challenge your perception of reality.
CSS Gradient Generator Create beautiful, lush gradients effortlessly with this powerful generator, perfect for adding a touch of vibrancy to your web designs.
Subframe Subframe offers beautifully crafted UI components and a drag-and-drop visual editor, allowing you to build production-ready interfaces in no time.
And there’s more! Dive into the full post to explore additional tools, resources, and projects that will elevate your design game.
Federico Pian’s website offers a sleek and modern portfolio showcasing a variety of creative projects. Its clean and simple layout highlights the work while providing a smooth browsing experience.
Max Milkin’s website presents a visually bold portfolio, with striking typography and strong contrasts that immediately capture attention. The layout is modern and dynamic, showcasing creative projects in a way that keeps the user engaged throughout the browsing experience.
deckd makes it easy to create professional presentations that are always on brand. Simply connect with Figma and streamline your entire presentation process.
Youform is a form builder that provides UNLIMITED forms and responses for FREE. You can add logic, custom domains, upload files, embed forms on your website, and much more
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
When it comes to blog design, there’s no one-size-fits-all. From minimalist layouts to bold and vibrant interfaces, each style brings its own unique flavor to the reading experience. In this post, we’ll explore 10 different blog designs, each showcasing a distinct approach to layout, typography, and visual storytelling. Whether you’re looking for something sleek and professional or playful and experimental, these examples offer a variety of styles, all done with creativity and precision. Get ready to be inspired by the diversity and excellence in blog design!
The Swaddle is a digital platform that delves into a wide array of topics, including health, gender, culture, and societal norms, offering deep insights and commentary on pressing social issues. It addresses the intersections of modern life, culture, and identity with thoughtful, progressive perspectives, making complex topics accessible to a broad audience.
Visually, the design reflects the publication’s bold and dynamic content. The homepage is dominated by large, striking illustrations that immediately grab attention, often using collage techniques and vibrant, contrasting colors like red, pink, and orange. This artful approach sets the tone for the intense subject matter covered by the articles. Despite the high impact of the visuals, the layout remains structured and minimalist, providing ample whitespace and clean typography that guides readers through the content with ease. The use of large, modular blocks creates a visual hierarchy, allowing for a clear division between featured and regular content. The Swaddle’s design is a perfect balance of boldness and simplicity, making the reading experience engaging without sacrificing readability or aesthetic coherence.
Pirate Wires is a digital publication that dives into technology, culture, and politics with a bold, unapologetic tone. Covering topics like the tech industry’s influence on society, political movements, and cultural shifts, Pirate Wires provides a fresh, often provocative take on modern issues, aiming to challenge conventional narratives.
The design of Pirate Wires reflects its daring, tech-driven content through a sleek, futuristic aesthetic. The homepage features a dark theme, creating a moody, high-contrast backdrop for its vibrant, often surreal visuals. The typography is bold and modern, with large, blocky fonts that emphasize the publication’s no-nonsense attitude. The layout is modular and grid-based, making it easy to navigate through a diverse range of content. The color scheme uses contrasting bright tones like neon greens, pinks, and oranges, set against black backgrounds, creating a visual punch that mirrors the edgy, futuristic themes of the articles. Each section feels distinct, with a mix of retro and contemporary graphic styles, contributing to an overall vibe that’s both gritty and forward-thinking. Pirate Wires’ design is a perfect reflection of its mission—disruptive, bold, and ahead of the curve.
Design Focus: Bold, Playful, and Data-Driven for a Modern Commerce Experience
Shopify Editions: Summer 2024 brings the latest innovations and tools to the e-commerce world, focusing on AI-powered automation, enhanced shopping experiences, and powerful data insights to help merchants scale their businesses with ease. The platform covers a wide range of updates, from AI-driven product suggestions to enhanced multi-platform selling strategies.
The design for this edition embraces a vibrant and playful aesthetic, featuring bold, contrasting color blocks in shades of pink, blue, yellow, and teal. This colorful palette brings energy and a fresh, modern feel to the site, while also serving to visually segment different sections for easy navigation. The typography is large and clean, maintaining readability even as the page is packed with information. A mix of vibrant product imagery, interactive graphics, and video embeds keeps the layout dynamic, giving users an engaging, visual way to explore new features. The use of black-and-white images, overlaid with bright neon accents, brings a retro-modern aesthetic that enhances the feeling of innovation.
Overall, the design blends a playful look with a business-savvy approach, perfect for a tech-savvy audience looking to stay ahead in the fast-evolving world of e-commerce.
Design Focus: Artistic, Eclectic, and Experimental
Varyer is a creative studio and lifestyle blog that explores art, design, and culture through a playful and experimental lens. The blog offers a mix of original creative work, curated content, and insights into various aspects of art, music, and modern culture, catering to those with a deep appreciation for the avant-garde and unconventional.
The design of Varyer reflects its eclectic and artistic nature, embracing an unconventional, almost chaotic layout that feels more like an interactive art piece than a traditional blog. The site is filled with quirky, playful elements like emojis, hand-drawn illustrations, and mismatched typography, adding a sense of whimsy and surprise as users scroll. The color palette shifts across soft pastels and muted tones, creating a visually relaxing atmosphere despite the unpredictable layout. Images and text are layered in a collage-like fashion, giving the site a scrapbook feel, where the content flows organically rather than following strict rules. The use of asymmetry and negative space makes each section feel distinct, and the design invites exploration, mirroring the creative and non-conformist spirit of the content. Varyer’s design is a perfect match for its mission—embracing creativity without boundaries and pushing the limits of conventional web design.
Design Focus: Playful Professionalism with a Human Touch
The Dropbox Blog serves as a platform for sharing stories, insights, and updates about the company, its products, and the broader tech and creative industries. From customer success stories to insights on AI, work culture, and creative innovation, the blog provides readers with valuable content that bridges the gap between technology and human creativity.
The design of the Dropbox Blog reflects its commitment to both professionalism and a friendly, approachable tone. The use of hand-drawn illustrations, soft color gradients, and playful graphics gives the site a creative and human feel, contrasting nicely with the tech-driven content. Each section is visually distinct, using a blend of soft pastels and vibrant colors, like mustard yellow, pastel blue, and peach, to break up content and make navigation intuitive. The typography is bold yet clean, with a mixture of large headings and body text that maintains clarity and readability. Visual storytelling is central, with illustrations and animations accompanying articles to engage readers and enhance comprehension. The overall aesthetic feels both modern and approachable, making complex ideas feel accessible while maintaining a polished, professional look.
Design Focus: Vibrant, Minimalist, and Concept-Driven
Previously Unavailable is a creative agency and innovation consultancy that partners with ambitious leaders to bring bold ideas to life. Their blog showcases success stories, brand design projects, and insights into the future of creativity, focusing on product development, branding, and customer experience.
The design of the blog is clean yet visually engaging, with a focus on vibrant color blocks and minimalist layouts. Each post is accompanied by bold, simple imagery or typography that makes the content stand out without overwhelming the user. The use of large, colorful squares to represent different projects or ideas gives the blog a structured, grid-like appearance that’s easy to navigate. The overall aesthetic is modern and sleek, with a playful edge thanks to the bright color palette of yellows, pinks, greens, and oranges. Typography is kept clean and sharp, reinforcing the minimalist yet bold design approach. This visual language reflects the agency’s emphasis on innovation and cutting through the noise, making it a compelling and user-friendly experience for visitors exploring their work.
Design Focus: Bold, Modern Elegance with a Playful Twist
Saint Urbain is a creative agency dedicated to branding, design, and crafting memorable visual identities for clients across a variety of industries. Their blog highlights their passion for turning bold ideas into compelling creative solutions, with a focus on bringing fresh, modern aesthetics to life.
The design of Saint Urbain’s blog strikes a balance between elegance and playfulness. The use of large, vibrant visuals immediately grabs attention, showcasing their work in a bold and dynamic way. Color is used strategically, with bright, contrasting tones like yellows, pinks, and oranges layered against more neutral backdrops, creating a striking yet polished look. The typography is modern and sleek, with a mix of serif and sans-serif fonts, enhancing both readability and visual appeal. The grid-based layout provides clear structure, while playful elements—like quirky design choices and imaginative photography—inject personality into the site. With ample whitespace and thoughtful image placement, the design feels open and easy to navigate, guiding the viewer through Saint Urbain’s innovative portfolio with ease and sophistication.
Design Focus: Creative Storytelling with Soft, Playful Minimalism
WePresent is the editorial platform of WeTransfer, dedicated to showcasing creative projects, artists, and unique cultural stories from around the world. The blog celebrates diverse voices and imaginative works across art, photography, music, and film, providing an inspiring hub for creative minds.
The design of WePresent is visually soft yet vibrant, using a minimalist approach that lets the content shine. The pastel color palette—featuring hues of peach, mint, and lavender—creates a calming, welcoming atmosphere, while the playful typography adds character without overwhelming the design. The grid-based layout keeps everything structured, making it easy to explore the different stories, while each article preview is framed with large, high-quality imagery that draws the reader in. The balance of whitespace, clean lines, and pops of color ensures that the site feels both modern and approachable, while subtle design elements, like hand-drawn illustrations and creative typography, add a personal, artistic touch. Overall, the design reflects the platform’s commitment to celebrating creativity and making space for diverse forms of expression.
Design Focus: Typographic Boldness and Literary Minimalism
Enrojecerse is an independent literary platform celebrating books, reading, and storytelling. It curates a visually striking collection of literary works, providing an immersive space for book lovers to explore literature with a focus on thought-provoking and emotional narratives.
The design of Enrojecerse is dominated by a powerful typographic presence. The homepage is an expansive, almost overwhelming wall of book titles, set in elegant, serif fonts that give the site a bold yet minimalist feel. This striking use of typography is both functional and artistic, inviting users to engage directly with the literary content while maintaining a clean, focused layout. The monochromatic design, combined with the absence of traditional imagery, makes the text itself the star, creating a sense of sophistication and reverence for the written word. This typographic approach captures the essence of literature, offering a design that is both intellectual and visually impactful.
Daily Branding is an online platform that celebrates the world of branding and design, curating daily showcases of creative branding projects from around the globe. It provides inspiration and insights for designers, marketers, and creatives by highlighting the latest trends and standout campaigns.
The design of Daily Branding is dynamic and visually rich, with a bold, attention-grabbing aesthetic. The homepage features oversized typography in a strong sans-serif font, reinforcing the platform’s emphasis on impactful, modern design. Each branding showcase is presented with vibrant, high-quality imagery that takes center stage, allowing the visual elements of the campaigns to shine. The overall layout is modular, with content neatly organized into blocks, creating a structured and easy-to-navigate user experience. The site also employs a minimal color palette, primarily using black, white, and blue, which keeps the focus on the colorful branding projects. This clean and bold design approach perfectly complements the creative and energetic nature of the content, making Daily Branding an inspiring resource for anyone in the branding space.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Ready for a fresh dose of inspiration? This week, we’ve handpicked a variety of standout projects to spark your creativity and expand your design horizons:
Following Wildfire A thought-provoking initiative empowering Canadians to manage wildfires using social media and AI technology.
Pluto Connecting people across dimensions, Pluto brings a new level of immersive human interaction, transcending physical location.
3D Empty State Icon Set A visually captivating collection of 15 3D icons designed to elevate your empty state screens.
Auto Layout Fixed Aspect Ratio A Figma resource for effortlessly maintaining fixed aspect ratios within your layouts, complete with detailed documentation and examples.
And there’s so much more! Dive into the full post for cutting-edge tools, design resources, and inspiring projects that will elevate your creative work.
Last year, forest fires set records for their duration and destruction, impacting people, communities and wildlife. #FollowingWildfire helps empower Canadians to actively participate in protecting their communities and help manage wildfires via social media and AI-powered technology.
Unanswered, is a poignant exhibit dedicated to Evan Gershkovich, our colleague and Wall Street Journal reporter who has been wrongfully detained in Russia since March 2023. At the heart of the exhibit, you’ll find a digital guestbook where you can leave personal messages of solidarity for Evan and his family. These messages symbolize a collective voice advocating for justice and press freedom. We look forward to the day when Evan can read your messages himself. We’ll keep telling his story, until he can tell his own.
This file contains a fixed aspect ratio spacer that can be placed inside Auto Layout image-fill frames so they resize at specified fixed aspect ratios. I’ve documented how it works, how to use the component, and how to add overlays. Also included are dialog box, horizontal card, and vertical story examples.
Design inspiration
Brisk — Smarter Financial Management for Modern Businesses by PLATFORMStaking Web Platform by Ronald Olsen for AwsmdMassive Noir — Character Illustration by Agum Satria for GinteraRenewable Energy Plant Website Design | Orbix Studio by Orbixstudio Orbix Studio | Website — Web Apps — Landing Pages — Dashboards — MVP Design for OrbixstudioMusic event poster by OVCHARKA INDUSTRIESLament of the Last Man (sketch) by McKenzie Design
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Gladeye is a creative digital agency in New Zealand — working for the world. We blend storytelling with technology to craft beautiful brands, websites, experiences and products.
Interactive storytelling that explores different ideas of how our world will look when Extended Reality becomes a part of our everyday life. Our interactions with the real world would be enhanced by VR, MR and AR experiences.
Showcase your skills flawlessly online with Nextfolio, the dashboard-styled portfolio website template for Framer. Tailored for designers, marketers, and developers, it highlights all your work with elegance and efficiency.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
Founded in 2012, House of 207 is a design & development studio based in Brooklyn, NY. It’s composed of two nerds who enjoy making cool things and trying their darnedest.
Solvstrom
Hi, I’m Morten. I’m a Danish, independent freelance Creative Director and Designer based in New York. I bring more than 15 years of experience creating story-driven experiences that captivate audiences through meticulous design and strategic execution.
Darkroom is an award-winning design membership by Kaploom ® Creative House. Pause or cancel anytime!
Agence Tale
A group of inspired creatives united by a shared passion for design. Their ambition is to build a guild where imagination and expertise blend seamlessly. With a modern approach and innovative ideas, they craft captivating designs that forge lasting connections between brands and their audience. Discover their enchanting portfolios and see how they bring visions to life.
Local is a Parisian and Bangkok-based studio. We design custom stories and experiences for our clients that are beautiful and intelligent. Each project is an opportunity for us to offer brands the most unique version of their digital storefront or identity.
That’s all for this week, see you in #8 of the series.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Looking for fresh inspiration? Here are this week’s standout picks:
Price Adapter by Stripe Gamify your pricing strategy with Stripe’s Price Adapter. A fun, interactive way to explore different pricing models and see how they could work for you.
We Go Again Dive into the world of creativity with a production studio founded by a former Olympian and an award-winning director. Their innovative approach to storytelling is sure to inspire.
data.to.design – Figma Plugin Supercharge your design workflow by integrating real data directly into your Figma projects. Whether you’re pulling from Google Sheets, CSV, or Airtable, this plugin makes it seamless.
Logoipsum Need a quick placeholder logo? Logoipsum offers 100 free placeholder logos, perfect for mockups and concept presentations.
Explore our full post for even more inspiration and tools to elevate your design game.
Craft a standout event site with IT/CONF! This sleek, customizable template is perfect for showcasing your IT conference. Highlight speakers, agenda, and more, ensuring an engaging experience from start to finish.
Chromatic Figma lets you use other color spaces than RGB, such as Lab and Lch, to create good-looking and perceptually uniform gradients and color scales. Those are color spaces that, unlike RGB, was created to mirror the visual response of the human eye.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Canvs Editorial Meaningful stories and insightful analyses on design
As a designer, having the right tools can make a big difference in your workflow.
This quarter, we’ve picked out 9 of the best plugins that stood out to us, and which will make you an efficient designer in 2024.
Each one offers something useful, from simplifying work or handling mundane tasks.
These plugins are easy to integrate into your workflow and can help you be more productive.
Whether you’re an experienced designer or just starting out, these new plugins are definitely worth a look.
Let’s get into it.
1. Vector to 3D
Vector to 3D converts your 2D text and vector layers into 3D models with just one click, using a powerful built-in ray tracing renderer.
Create stunning 3D icons, banners, mockups without needing to be a 3D specialist.
2. AI Design Reviewer- Copy, UI, Accessibility & CTA Feedback
Built by the creators of Siri, the AI Design Reviewer is trained on hundreds of guidelines from Nielsen Norman, Refactoring UI, and IDEO.
It’ll provide instant feedback and suggestions to enhance your web designs, improve your copy with tailored suggestions, catch and fix UI bugs quickly. It’ll also ensure your designs meet WCAG, AA, and AAA accessibility standards.
3. Cassini Copilot
Cassini is a collaborative toolkit for product teams that seamlessly integrates into your existing setup — whether it’s your browser or Figma workspace — making various stages of the product development process smoother and more organized. Here are a few key ways in which it helps:
Dev feedback — Cassini’s overlay tool helps you compare developed screens with their designs, so you can catch and fix any inconsistencies.
Visual referencing — Using Cassini’s Chrome plugin, you can snap screenshots of references from the web, group them into Sets, and share them easily with your team for feedback.
Team reviews — Cassini streamlines team reviews with features like comment grouping, multi-pin comments, and setting due dates for action items, making discussions productive and efficient.
4. Circular Text
Easily generate both circular and arc text in your designs with the Circular text plugin.
By default, the text wraps around a full circle. However, you can adjust the settings to create text that follows an arc of any angle (like 90 or 180 degrees).
5. Noise & Texture
Noise & Texture plugin lets you dynamically create seamless tiled noise, textures, patterns, gradients, and more.
Simply select a layer, apply your chosen noise or texture, and adjust the settings to see live updates. You can also customise your canvas size and default colors to fit your design needs.
6. Instance Finder
Instance Finder helps you locate all instances of a component used in your file.
Select a single instance or component, and the plugin will search through all pages and frames. It’ll create a comprehensive list of where the component is used.
The list is organised by page for easy navigation, and clicking on any item will zoom in on that specific instance.
7. Animate on path
Animate on path is a powerful plugin with which you can select the object you want to move, such as a frame, instance, or shape.
Next, choose the curve you want the object to follow. You can create curves using the pen tool.
8. Design system organizer
Design system organizer lets you bulk swap instances and styles between master components with the same name.
You can also copy styles between different files.
Manage pathnames, like “toolbar/nav/back,” using a convenient folder-like interface.
9. Find and replace styles
Find and replace styles plugin is ideal for finding and replacing styles across components, instances, and library styles. It’s especially useful for aligning parameters in bulk, such as auto layout or library styles, ensuring your designs are pixel-perfect across projects.
Making the most of Figma
These Figma plugins are designed to make a real impact on your design process.
As you try these out, you’ll find ways to work more efficiently and add some fresh touches to your designs. See how each one fits into your process and enjoy the benefits they bring.
Canvs Editorial regularly brings you insightful reads on design and anything related. Check out the work we do at Canvs Club.
The Canvs Editorial team comprises of Editorial Writer and Researcher — Paridhi Agrawal, the Editor’s Desk- Aalhad Joshi, and Content Operations- Abin Rajan. Follow Canvs on Instagram for more design-related content.
While you are here, do check out Cassini, a quick and easy way to review designs, websites and collect screenshots, all in one place.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
Les Marteau Studio, a creative design hub, nestled in the heart of New York City, where innovation meets inspiration.Laser-focused on crafting top-notch branding & websites for businesses powered by passion. We dive deep into brand narratives to create and produce bold, sophisticated, and evergreen visual identities that not only define and captivate your target audience but also drive engagement and conversions. Ready to create an unforgettable brand experience together?
A creative independent studio where talents gather to craft meaningful narratives through design.
Portfolio
Hello, I’m Matthieu O’Jeanson, and I’m a creative front-end web developer, as an independent, I works with companies, agencies, startups and individuals all over the world.
WAY.TV is a creative studio for ambitious visual projects.
Thomas Corneteau
I bring digital stories to life with amazing teams of talented people. Learning and growing through shared experiences and with a holistic approach to design.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Ready for some fresh inspiration? Check out this week’s top picks:
UNOXUNO — A production and modeling agency that redefines creativity with their cutting-edge campaigns.
Paris 2024 Paralympic Games Explained — Kreatives: Get a behind-the-scenes look at the creative process behind preparing the world for the Paris 2024 Paralympic Games.
Brandfetch — Figma Plugin: Say goodbye to endless searching for brand assets. This plugin gives you instant access to millions of logos, colors, fonts, and more, streamlining your design process.
Electronics website design by Halo Labs
and more…
Dive into our full post for even more inspiration and resources to elevate your design game.
Brands at your fingertips ✨ Say goodbye to searching for the latest brand asset — Brandfetch gives you instant access to millions of logos, colors, fonts and more so you can streamline your designs.
When a style guide is missing, sifting through every design element can be time-consuming and challenging. This plugin not only aims to save significant time but also to pinpoint graphic design inconsistencies, ensuring a seamless and efficient transition from design to development.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
Visual Identity – Wix Studio Web Design Agency unlocks your web apps & site design with our visually stunning and efficient digital landscapes. Discover the heartbeat of projects by our web designers. Now offering projects in the United States, Canada, United Kingdom, Australia and Germany.
Matt Bierman – Portfolio
Experiential developer and senior frontend engineer at Sigma Computing. Based in NYC.
Revenant is a multi-disciplinary creative animation studio, working with production companies and global brands to produce beautiful digital and immersive virtual experiences
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Ready for some fresh inspiration? Check out this week’s top picks:
Retronova | Timeless Fashion: Explore how Retronova merges retro aesthetics with futuristic vibes, offering a unique take on fashion and design.
Friend AI: Dive into the buzz surrounding this innovative gadget that promises to reshape our interactions with technology.
Mario by Raku Inoue: Discover how Japanese artist Raku Inoue transforms flowers, leaves, and stems into captivating floral masterpieces, reimagining iconic pop culture characters like Mario and others.
Downsize – Figma Plugin: Simplify your workflow with this handy tool that compresses and resizes images directly in Figma for faster performance.
Dive into our full post for even more inspiration and resources to elevate your design game.
Retronova flawlessly merges retrofuturism with the charm of a bygone future, blending nostalgic fashion, animations, and elements that evoke the retrofuturistic spirit.
This week, everyone is buzzing about Friend’s AI — a gadget that looks and feels like it’s straight out of a ‘Black Mirror’ episode. As bizarre as it sounds, it’s equally fascinating, capturing the spotlight with its potential to reshape how we interact with technology.
Bids for Survival is an exhibition exploring the implications of human longevity through art and speculative fiction. The website’s immersive design guides visitors through thought-provoking scenarios on life extension, highlighting the social, cultural, and ethical questions raised by the potential end of biological aging.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
Workshop shapes memorable spaces by creating custom seating and case goods for the hospitality industry. Guided by passion, we are committed to delivering a seamless production process beyond the impossible—towards the possible.
An award-winning Web Design Agency in Manchester, UK who specialise in Branding, Web Design, Craft CMS, eCommerce and Organic SEO.
Spazio Di Paolo
Spazio Di Paolo is a studio specialized in packaging design for wines & spirits. With over 20 years of experience, the studio has become one of the most awarded worldwide and holds a collection of over 200 of the most prestigious international awards for packaging design.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
a visually captivating platform that masterfully combines WebGL 3D effects with intriguing typography. Experience a harmonious blend of nature and modern design.
a revolutionary gadget that turns your Apple Watch into a compact phone alternative. With essential features like messaging, music, maps, and even Apple Pay.
A tool for creating and exporting in SVG or PNG curved point design patterns through configurable properties for graphic designers, UI/UX and other visual professionals to use in their projects.
The plugin utilizes the Metavatar algorithm to create stunning gradient backgrounds in a variety of cool colors. It also has the added feature of adding noise to make the gradients even more visually striking.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Choosing the right fonts for your design projects is crucial to achieving the desired look and feel. Here are some inspiring combinations of free fonts suitable for headings and body text, along with recommendations for the types of projects and websites where they can be used.
Recommendation: This combination works well for modern blogs, personal portfolios, and business websites. Montserrat’s clean and geometric style pairs beautifully with Lora’s elegant and readable serif.
Recommendation: Ideal for fashion websites, lifestyle blogs, and editorial sites. Playfair Display offers a classic and sophisticated look, while Source Sans Pro ensures easy readability for longer texts.
Recommendation: Perfect for startups, tech blogs, and corporate sites. Raleway’s sleek and modern style complements Open Sans’s versatility and clarity.
Recommendation: Great for news websites, online magazines, and educational platforms. Oswald’s strong and condensed letterforms make an impact, while Roboto offers excellent legibility.
Recommendation: Suitable for creative portfolios, design agencies, and marketing sites. Bebas Neue’s bold and straightforward design pairs well with Nunito’s friendly and rounded letters.
Recommendation: Ideal for literature websites, educational blogs, and cultural sites. Merriweather’s timeless serif look enhances Ubuntu’s humanist style, creating a warm and engaging reading experience.
Recommendation: Perfect for food blogs, event websites, and travel blogs. Lobster’s playful and decorative style adds flair, while PT Sans provides a straightforward and readable contrast.
Recommendation: Suitable for modern ecommerce sites, app landing pages, and tech websites. Poppins’ geometric style pairs harmoniously with Mulish minimalistic and clean design.
Recommendation: Great for sports websites, action blogs, and dynamic content. Anton’s bold and impactful design is balanced by Karla’s simple and readable letters.
Recommendation: Ideal for fashion blogs, beauty websites, and creative portfolios. Abril Fatface’s dramatic and high-contrast style complements Quicksand’s light and airy look.
Feel free to use these combinations in your next design project, and enjoy experimenting with the different styles and aesthetics they bring to your work!
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
I’m an art director, designer & photographer based in Madrid.<br/> I currently work as creative & design director at EL GRITO & EC Brands Studio at El Confidencial.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Let’s dive into a design trend that has become an integral part of the UI/UX world – Bento Grids. Although these grids are no longer new to the design landscape, they remain relevant, efficient, and popular among designers and developers.
Inspired by traditional Japanese bento boxes, Bento Grids offer a structured and clear organization of content, making it easier for users to navigate. With a combination of well-defined visual hierarchy and minimalist design, Bento Grids provide a smooth and organized user experience. Their clean and functional design makes them an ideal choice for websites and applications that aim to offer an intuitive and aesthetic interface.
In the following post, we’ve gathered some stunning visual examples for inspiration.
BentoX is a portfolio template designed with a stunning & trendy bento grid style made in Framer. It empowers you to create your online presence and proudly showcase your finest work.
Bentos Grid for Web & UI Design : This is a demo bento screen design created for a school assignment. The design utilizes an 8×8 square grid with a calming purple and blue theme.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Contra’s Project Rate Hiring Calculator, designed by @uns__nstudio, is a visually striking and innovative tool. Its bold design and user-friendly interface make it a standout marketing project that’s both functional and beautifully executed.
ChronoThreads, developed during an awwwards Masterclass by Niccolò Miranda, showcases a modern design with impressive 3D modeling, GSAP animations, and WebGL effects. Built on Webflow, the site offers an immersive and visually stunning user experience.
It might seem unusual to feature a site selling a package of graphic elements as design inspiration, but both the elements themselves and their use on the site captivated me. The creativity and design execution are truly remarkable.
In the dynamic field of web design, staying updated with the latest tools can significantly enhance your workflow and creativity. Here are some trending tools that every web designer should try:
Wix Studio is a flexible, end-to-end platform for agencies and enterprises. The platform offers bespoke and scalable web creation services. You will find advanced design capabilities, built-in AI tools, custom dev opportunities, native business solutions and multi-project workspaces designed to boost your team’s productivity.
Framer is a no-code website builder that feels like a design tool but outputs fully functional websites. It empowers designers to create fully functional websites with Effects, a CMS, and even Localization.
a free 3D design software with real-time collaboration to create web interactive experiences in the browser. Easy 3d modeling, animation, textures, and more.
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
I’m Sébastien Lempens, a french ‘Gen X’ Web Engineer. Throughout my career, I have worked on multiple sized projects in various roles, including Project Manager, Designer and Front/Back-end Developer.
Hustle Jar is a premier, full-service branding and design agency in Toronto. Our expertise lies in creating bespoke brand identity, web design, and digital experiences for the next wave of changemakers.
I design one-of-a-kind brandings and websites as a Creative Designer and Developer. My goal is to make your brand and online presence uniquely stand out.
Numéro10, votre agence bilingue à Berne, Suisse. Experts en branding, digital, vidéo, print et web, nous vous accompagnons dans vos projets créatifs.
That’s all for this week, see you in #3 of the series.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
My love for sneakers started at a young age. When I was still at school I had a side job at a basic footwear store. As a teenager I didn’t have the money to buy lots of sneakers, but my interest in the footwear culture was very high. Since that moment there always was one brand I admired the most; Nike.
My first pairs were white Nike AF 1’s in high and low. And there it started. For me it wasn’t only the look or fit, but also the brand itself. It felt like they did things differently. Their visual brand communication and campaigns were always next level and on point, I loved NikeID (now Nike by You), the SNKRS app, the interactive store windows and installations, their mind blowing collaborations and ofcourse one of the most beautiful logos ever created. For already 12 years I’m only wearing Nike. Mostly AM 1’s and AF 1’s, but lately also Jordan’s and Nike x Off White models.
When I was a kid I also was drawing sneakers all the time. The fact I could create my own sneaker the way I liked was fun to play with. Later I turned these drawings into Adobe Illustrator, which made it even more fun to work on.
Visualising imagination
Nowadays I’m working in the creative industry as a designer and art director. Visualising my imagination is my job so with all this background information you can imagine I got pretty excited when I heard about the benefits and possibilities of generative AI for the first time. (thanks Tim Dekens)
Images made with Midjourney
Back in 2022 the first tool I experimented with was MidJourney, one of the best platforms out there for image generation. Because Midjourney just started, it wasn’t that qualitative, comprehensive and refined as it is now. Creating a sneaker with a simple prompt was already a huge challenge in the beginning. And then we haven’t even talked about getting the Nike swoosh right.
Image made with Midjourney
In the early stages of Midjourney I was playing with lots of objects and subjects in my prompts but sneakers were my absolute favourite. I started posting them on my socials and because generative AI wasn’t that mainstream as it is now, my generations got a lot of attention. They even went a little viral on various social platforms and I got interviewed by a bunch of sneaker and AI blogs.
But not everyone was that positive. I got some critics here and there about the fact we shouldn’t underestimate the real crafted people out there, who are actually designing and creating sneakers for a living. And as a designer myself, I obviously couldn’t agree more to that.
“ShoeBakery actually makes these for real, give him his props.”
When the legendary footwear artist Daniel G. from Mache commented this below the Instagram post by Sneaker Freaker International about my first set of AI generated sneakers in the style of chocolate and icecream, I heard about the work of ShoeBakery for the first time. I felt a bit offended when I red this comment… Dan, ShoeBakery and probably others as well would maybe have thought I stole the idea from ShoeBakery. But I didn’t.
Instead of feeling sad I decided to contact Chris Campbell from ShoeBakery. Not only I liked his work a lot, he actually also did like my work. After a few conversations we agreed on starting a collaboration. We both were curious if we actually could create world’s first AI generated shoe for real.
Photo: ShoeBakery
Behind the scenes
“As an artist who hand designs shoes inspired by the delightful world of desserts, I constantly seek new ways to blend creativity with innovation” says Chris. “When I met Marten who is an AI artist, he created a set of AI-generated images, this sparked my curiosity and imagination, offering a fresh perspective on my artistic process.
“As an artist who hand designs shoes inspired by the delightful world of desserts, I constantly seek new ways to blend creativity with innovation.” – Chris Campbell
The intricate patterns and vibrant colours produced by AI presented an exciting challenge and opportunity to push the boundaries of my designs. This project allowed me to merge my passion for dessert-themed artistry with cutting-edge technology, creating a unique and captivating shoe that celebrates the fusion of tradition and modernity.”
Video: ShoeBakery
“The AI-generated image depicted a whimsical dessert-themed sneaker adorned with colourful sprinkles, wafer textures, and playful confectionery elements. This visual inspiration was the perfect catalyst for my creative process, allowing me to transform a digital concept into a tangible piece of wearable art.”
Photo: Harmen Nanninga
GOT ‘EM!
A few months back I finally had the pleasure to actually wear this piece of art myself; GOT ‘EM! It’s a child’s dream to wear a pair of sneakers I ‘created’. And yes, I’m aware it’s not really created by me but with AI, by Midjourney. But without my imagination and prompt, I never would have get this outcome. Let’s say that human imagination and creativity are still needed to create something unique and qualitative with generative AI.
Would I feel more proud if my drawings from my teenager years turned into real shoes? Yes, definitely. But let’s enjoy the little things and let’s look at it from another perspective. We created a shoe with AI. I say we, but ofcourse all the credits are going to the talented people from ShoeBakery. They did an absolutely amazing job and I really enjoyed the collaboration. We both did, so we’re also working on some high heels and AF 1’s for the future.
“AI won’t replace us, people who are using AI will.” – Marten Kuipers
In my opinion this process is the future of (generative) AI in a nutshell. We use human craft, creativity, experience, emotion, imagination and ideas as the foundation for our artificial output to reach the level of quality and personality we need. Our focus, work, role and jobs will change, our craft will stay. AI won’t replace us, people who are using AI will.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The O Positive Films website is excellently crafted, featuring impressive micro-animations and hover effects that enhance the user experience. The meticulous design highlights the creativity and quality of the showcased projects.
The website ‘The Interactive Dictionary of Free Speech’ is an excellent example of how to create an interactive site that engages users and effectively conveys its message through smart use of animations and interactive elements.
Non-Linear Studio’s website is a stunning example of modern web design. The site uses dynamic animations, engaging scroll effects, and interactive elements to create a captivating user experience.
Chloe Laurent is a template designed for agencies, photography, and creatives, to showcase their works and services. It offers multiple page layouts to help your website stand out.
Endless Tools is a suite of advanced design tools aimed at boosting creativity. It allows users to create unique visual art, including covers, posters, 3D illustrations, and photo effects. Key features include 3D typography, lifelike textures, a library of customizable 3D models, and generative graphics. Users can also personalize textures and effects with advanced editing tools, making it perfect for graphic designers, artists, and other creatives.
Rodin and ChatAvatar by DeemosTech are advanced 3D asset generators. ChatAvatar creates hyper-realistic 3D facial assets from text or images and is production-ready. Rodin generates realistic 3D models and is nearing production readiness.
COOLFEELTATA Brand Identity Design by ONNFF™ ART&DESIGN
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitte
A portfolio website can cover a lot of bases. Generally speaking, professionals, agencies, freelancers, and artists require a creative medium to display their work. This is why portfolio websites, or other sites in which content is the number one focus, are some of the most popular and valuable projects for people looking for inspirational portfolios for their own work.
A portfolio website serves as a versatile platform encompassing various facets. Professionals, agencies, freelancers, and artists often seek a creative medium to showcase their work effectively. Portfolio websites, being dedicated to content showcasing, hold significant value and popularity among individuals seeking inspiration and creative insights for their own projects.
Let’s start the series with this week’s 10 great portfolio website examples.
An independent Branding & Digital Design studio based in Copenhagen. We combine Identity, Digital Design, Motion Design and Website Development – Specializing in Webflow.
A full-service agency designing digital products and experiences for companies and startups around the world. We do Web & Product design, Web development, Branding, Mobile apps, Graphics.
Agenzia di comunicazione a Vicenza, specializzata in creazione e gestione del brand, strategie di comunicazione, digital advertising, web design, realizzazione video e shooting fotografici.
Axel Vanhessche is a french talented portrait photographer based in Paris who captures the essence of his subjects through his lens.
That’s all for this week, see you in #2 of the series.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
It’s fantastic to have you back this week! Recently, I spent some time experimenting with AI-powered music creation tools. If you’ve been following us on all channels, you’ve probably heard the new Muzli hits. I must admit, they turned out much better than I imagined. You can listen to the new Muzli hits in these posts, and I’d love to hear what you think: Hit 1 | Hit 2
This got me thinking, how much longer do we have to enjoy design inspiration created by humans?
In the meantime, let’s dive into this week’s top design inspirations:
Office Of Overview — Twenty Three Degrees: A stunning showcase of minimalist design with dynamic grid layouts.
Artlist: A treasure trove of high-fashion photography and avant-garde styling.
100+ RETRO STICKERS: A versatile collection of editable retro stickers for any project.
Figma plugin: Enhance your designs with over 60 customizable effects.
Online Radio: An innovative and sleek UI for an online radio platform.
Check out the full list below and see you around next week,
a bold and unconventional website showcasing Samson’s work! The site features daring graphic design and unique art that blend digital and traditional styles.
We’re highlighting OverviewOffice for their unique take on minimalism and dynamic grid layouts. Their designs blend creativity with functionality, infusing humor and originality into every project.
Artlist Paris is a treasure trove of stunning visual artistry. The site features a diverse array of high-fashion photography, avant-garde styling, and creative direction.
Accordion Productions stands out with its dynamic portfolio of film and photography projects. The site highlights their innovative and creative approach, blending high-end production with artistic storytelling.
The Atomic template is more than just a design solution, it’s a powerhouse for creative professionals, design agencies and all type of businesses seeking to showcase their prowess in the most visually stunning way.
Hell yeah! Uvnt Art Fair x Las Rozas Village by CACHETE JACK
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Icons are a small but mighty part of SaaS product design. They help users navigate, understand, and interact with your product seamlessly. But with so many icon sets out there, how do you choose the right one? Let’s dive into what you need to consider and explore some inspiring options.
Key Considerations for Choosing an Icon Set
1. Icon Variety
Ever fallen in love with an icon set only to find it lacks the icons you need? It’s frustrating, especially for large projects. When choosing an icon set, ensure it offers a wide range of icons. A comprehensive set covers all your needs, from common actions like saving and deleting to specific functions unique to your product. This variety helps maintain a consistent look and feel across your entire project.
Scalability is crucial. Icons need to look good on all screen sizes, from mobile to desktop. Vector icons, especially SVGs, are perfect because they can be resized without losing quality. They’re also easy to customize — change colors, shapes, or sizes to fit your design without any loss of detail. Plus, vector icons are lightweight, which means faster load times and a better user experience.
Icon font libraries like Font Awesome or Material Icons are incredibly convenient. You can treat icons just like text, applying CSS properties to change their color, size, and more. This makes them highly flexible and easy to manage. They also scale well, ensuring your icons look sharp on any device. And with thousands of icons available, these libraries usually have you covered for any design need.
Flexibility is key. Icon sets that offer multiple styles — like line, filled, and colorful versions of the same icon — give you the versatility to adapt to different design contexts while keeping a consistent visual language. For example, you might use line icons for secondary actions and filled icons for primary actions. This differentiation helps users quickly understand and interact with your interface.
Managing a large icon library can be daunting, but organizing them properly in a design system or using the right tools can make a huge difference:
IconJar: This tool lets you organize and manage your icons efficiently. You can search, drag and drop, and export icons easily. It’s perfect for keeping your icon collection tidy and accessible.
Nucleo: With Nucleo, you can organize, customize, and export icons seamlessly. It also offers a large library of icons in multiple styles. It’s a great tool for maintaining consistency and ease of use in your design projects.
IconShelf: IconShelf is a powerful tool for organizing and managing your icon libraries. It supports various formats and allows you to keep all your icons in one place, making it easy to find and use them when needed.
Fontello: Fontello allows you to create custom icon fonts from a selection of icons, simplifying the integration of icons into your projects. It helps in managing icon fonts effectively, ensuring that your icons are scalable and easy to use.
Icones: is a comprehensive platform for browsing and exploring a vast collection of icons from various sources. It provides an intuitive interface for searching and previewing icons, making it easy to find the perfect icons for your projects and integrate them seamlessly.
Websites for Purchasing High-Quality Icons
If you’re looking to buy high-quality icons, here are some excellent websites to consider:
UI8: UI8 offers a wide range of high-quality icons and other design assets, perfect for professional use.
Iconscout: Provides a vast library of icons, illustrations, and other design resources. You can purchase individual items or subscribe for access to their entire collection.
Iconfinder: Offers a vast collection of icons in various styles. You can purchase individual icons or subscribe for unlimited downloads.
The Noun Project: Provides a wide range of icons created by designers from around the world. You can buy icons individually or subscribe for unlimited access.
Icons8: Offers a large library of free and premium icons in multiple styles. Icons8 also provides tools for customizing and managing icons.
Flaticon: Features a huge selection of free and premium icons. You can download icons in various formats and styles.
Streamline Icons: Known for its high-quality, detailed icons, Streamline Icons offers a comprehensive library that’s perfect for professional projects.
Inspirational Icon Sets
Here are some top-notch icon sets to consider:
Feather Icons: Simple, elegant, and open-source, Feather Icons are perfect for modern, clean interfaces.
Font Awesome: This popular library offers a vast range of icons with extensive customization options.
Material Icons: Created by Google, these icons follow Material Design guidelines and come in both line and filled versions.
Heroicons: Beautiful, hand-crafted SVG icons available in outline and solid versions, suitable for various design needs.
Conclusion
Choosing the right icon set is crucial for creating a seamless, intuitive user experience. Look for a set with a wide variety of icons, opt for scalable vector icons, consider using icon font libraries, and choose sets with multiple styles for flexibility. Tools like IconJar, Nucleo, and Fontello can help you manage your icons efficiently. By keeping these tips in mind, you’ll be well on your way to selecting the perfect icons for your SaaS product, ensuring it’s both functional and visually appealing.
Remember, the right icons do more than just look good — they enhance usability and make your product more intuitive and enjoyable for your users.
And finally, how can we end without a bit of icon inspiration? Here are some excellent icon sets to get your creative juices flowing:
high-quality icon set with 1236 icons carefully crafted on 20–24–32px grid sizes, including hand-optimized 1 & 2px stroke variations for each grid. 1236 icons × 3 grids × 2 strokes, in total you get 7416 pixel perfect icons.
5000+ icons & 150+ social media icons and company logos. Emerald Icons is a high-quality vector UI icons library that provides multiple formats and styles. Made for designers and developers.
A huge collection of 155 icons in Notion style. These icons illustrations will fit nicely into the design of your presentations, web pages, UI design and social media posts.
High-quality icons in 23 categories for professional websites, web & mobile apps
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
You have no idea how happy I am to see you back this week! I just read an article about the future of smart cities. For instance, did you know that in some smart cities, sidewalks are designed to generate electricity from the footsteps of pedestrians? It’s fascinating to think about how design can influence and improve our daily lives in such environments. This got me thinking about how powerful design truly is, and how it shapes our experiences in countless ways. Speaking of great design, it’s time to take a break, put your feet up, maybe even pretend you’re on a tropical beach, and dive into this week’s top design inspirations:
Ashfall Studio: Check out their impressive web design with stunning interactions.
Triptych: Engaging interactive experiences that captivate and inspire.
Figma Slides: The first presentation tool built specifically for designers and their teams.
Weather by Slava Kornilov: A beautifully designed weather app with elegant UI/UX.
Check out the full list below and see you around next week,
Designed for agencies, portfolios, and personal brands, it seamlessly blends minimalist aesthetics with dynamic animations. Showcase your work in style with a sleek interface that flawlessly adapts to any device.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Let’s talk about gathering inspiration and the eternal debate: should we take inspiration from places like dribbble?
When I start a new design project, I always begin with a big cup of coffee and a healthy dose of inspiration. My process for gathering inspiration is divided into two main stages. In the first stage, I look for functional examples of existing designs — ones that look great and work even better. This helps me build a solid foundation for designing and planning the interface, something that both clients and users can appreciate and understand.
But then comes the really fun part — the second stage. Here, I start looking for unconventional and even a bit quirky examples. For instance, let’s say I’m interested in designing dashboards. I gather designs that are less about practicality and more like digital art. Why? Because sometimes it’s important to see exaggerated and futuristic designs to open up new creative directions. I might not use all the crazy ideas I find, but even a single unique element — like an interesting hover effect, an unusual grid layout, or a surprising font — can add that special twist to my design.
As Picasso famously said, “Learn the rules like a pro, so you can break them like an artist.” When you understand what works and what doesn’t, you don’t need to be afraid of exploring bold design inspiration because you’ll know how to evaluate it and take only what you need.
This approach works great for me, but I’m sure everyone has their own method, and that’s perfectly fine.
So, in this post, I want to share some totally unconventional dashboards inspiration. These designs can spark your imagination and open your mind to new possibilities. They might not be the most practical, but they’re definitely inspiring. Because sometimes, inspiration comes from the most unexpected places.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Whether you are working as a freelance website designer or for an agency, clients are at the heart of this business. But sometimes the phone goes silent for a while, even for the seasoned pro’s. Most of the time it’s just the natural flow of the business, but we know how stress-inducing it can be. So, how do you get more web design clients in 2024? These simple tips will improve your presence in the market and help you find new customer streams.
In person networking with clients is still king. Sorry.
In the age of digital we often overlook one of the most effective ways to get opportunities to get design work — it’s by meeting people, shaking some hands and making connections in the good old ‘real world’.
It might seem natural to ignore things like in-person meetings, meetups, conferences, and discussions — you are a web designer in 2024, after all! But going against this tide could be a huge benefit to you.
Hate to sound stereotypical, but we have been working with designers for almost a decade at Muzli, and we can safely say that designers often lean toward being more introverted. While focusing on the internal world is an absolute superpower in design work, those who can easily create and develop personal relationships gain a significant advantage by standing out from the crowd.
Bonus point: being socially active allows you to find like-minded people who can become not only clients but also personal connections.
Referrals and testimonials of your previous design clients
Personalized recommendations are much more influential than just anonymous five-star reviews on your website. Our psychology makes us trust real people and natural-sounding feedback far more than faceless praise.
Testimonial page design by 60MM
After finishing your projects, always remember to ask for your client’s feedback and permission to share it in the future. It doesn’t always have to be perfect either — a smart potential client realizes that such a complicated process as web design involves solving many challenges along the way. The most important thing to them is how you overcome these challenges and whether you reach the finish line successfully.
Strong portfolio — web designer’s bastion
We have mentioned this time and time again in our guides: having a high-quality portfolio is crucial for every website designer who wants to find more clients. This is where your customers decide whether to hire you or not.
Don’t forget to not only focus on high-quality visuals but also add text to explain how you came up with certain decisions and solutions. This shows that you not only have great taste but also understand your client’s business problems and can focus on eliminating them.
To craft a portfolio according to customer needs, try to get into their shoes and think about:
Does this portfolio show work relevant to me?
Is the style diverse enough to be adaptable to my needs?
Does this work show a focus on problem-solving instead of just nice visuals?
What was the designer’s thought process in this process?
If you don’t have a portfolio yet or are looking for ways to improve an existing one, check out the most inspiring portfolios from the world’s top web designers on Muzli.
By participating educational activities and sharing your knowledge, you position yourself as a thought leader and expert in your niche. Sharing practical insights and best practices demonstrates your depth of knowledge and commitment to advancing the field. They create opportunities for networking, collaboration, and the exchange of ideas.
Engaging with your colleagues can lead to new perspectives, creative partnerships, and even potential collaborations on future projects.
Best platforms to find web design work
Today there are numerous platforms to find more clients as a web designer: Contra, Upwork, Fiver, Freelancer, Toptal and many others.
These platforms often have a large volume of job postings making it easy to find projects suited to your skills. However, keep in mind that the competition may be fierce, and commissions can reduce your earnings.
Contrary to popular belief, platforms like these work not only for beginners. There are many mature design businesses that make the most of their revenue through similar sites. Be prepared to invest into building your reputation on each of the platforms.
Can web designers still find work on social media?
Social media platforms might be in a tricky situation right now — it’s getting harder and harder to organically reach your clients as a business.
However, there are still ways to get your message out as a website designer and attract more clients. For example, you can participate in discussions on relevant groups on Facebook or build your personal brand on LinkedIn. The key to success here is to stay authentic and share your expertise. Be careful about focusing solely on promoting your business.
Build a strong website. You’ll be judged.
Finally, if you are a web designer looking for more customers, it’s natural that your own website design will be judged by very high standards.It’s probably time to ditch that template from Weebly and other similar tools. (Don’t get us wrong, they’re often great for small businesses!) and focus on creating a truly unique design that stands out from the crowd.
Additionally, don’t ignore the technical aspects of your website. Is it fast enough? Run it through Google’s performance tools. Is the site SEO-friendly? Use analysers like Ahrefs or SEMrush. Additional steps like these will show your clients that you are not only a skilled website designer but also knowledgeable about the complete landscape of the website creation process.
The main secret for finding more clients as a web designer
People love secret sauces, so here it goes.
The main secret is simple: It doesn’t matter so much which client acquisition channels you choose — there are rarely any silver bullets. But no matter where you focus, consistency is what brings you results. As a web designer or design agency, your client stream is directly related to your reputation and reach. This means, you must consistently foster it on selected channels and clients will come.
By implementing and sticking to these strategies, you’ll reach a larger audience, demonstrate your value, and ultimately attract more clients to your website design business.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
An Electric Atmosphere of Innovation and Anticipation
Figma is an increasingly dominant player in the design world. This fact made 2024’s Figma Config one of the key events for the design community this year.
The Moscone Center in San Francisco was filled with eager designers and tech enthusiasts. But beneath the excitement, there was also a sense of caution — is Figma going to announce something that will completely transform the design landscape?
As expected, AI became one of the most popular topics of the conference. Figma promised groundbreaking innovations to reshape the way we work and collaborate. But can they deliver? Or are they just riding the hype wave?
We’ve been closely watching this year’s conference, so let’s dive into the full list of features and updates that were unveiled…
Figma AI: Think Bigger and Build Faster
One of the biggest highlights was Figma AI, which brings intelligent design suggestions directly into the workflow. AI-powered tools offer layout recommendations, automatic adjustments for spacing and alignment, and color palette suggestions. These features not only speed up the design process but also enhance creativity by providing designers with new ideas. Additionally, efficiency updates automate tedious tasks like generating realistic images and copy, rewriting text, and automatically wiring up prototypes.
Visual Search
Figma AI includes visual search capabilities to easily find components and assets. This feature allows designers to quickly locate and utilize existing design elements, streamlining the workflow and improving efficiency.
AI-Powered Text and Image Tools
Figma AI now includes tools for generating realistic images and rewriting text with just a few clicks. These AI-powered features enable designers to create high-quality visual content and compelling copy effortlessly. The tools analyze the context of the design and suggest relevant images and text improvements, enhancing both speed and creativity in the design process.
Quick-Click Prototyping
Quick-Click Prototyping streamlines the creation of interactive prototypes. This new feature allows designers to convert static designs into clickable prototypes in seconds. By selecting elements and choosing interaction types, designers can quickly set up navigation flows and test user experiences without extensive setup.
and the feature we’ve all been waiting for 😁
Automatic Layer Renaming
To improve organization and clarity, Figma now includes Automatic Layer Renaming. This feature uses AI to rename layers based on their content and context within the design. It eliminates the need for manual renaming, ensuring that files are always tidy and easy to navigate, especially in complex projects.
Generate Designs from Text Prompts
A groundbreaking feature introduced is the ability to generate designs from text prompts. By describing the desired design in natural language, Figma AI can create initial layouts, components, and styles. This feature empowers designers to quickly iterate on ideas and explore new concepts without starting from scratch.
UI3: Figma, Redesigned
The redesigned interface, UI3, is more than just a facelift. It aims to make navigation more intuitive and workflows more streamlined. The revamped file browser now includes global search and notifications, helping users find what they need faster and stay updated on project changes. The new interface focuses on components, making it easier to access and manage design elements.
Figma Slides: Build, Collaborate, and Present
Figma Slides is a new tool designed to change how we create presentations. It combines Figma’s collaborative features with the functionality needed to build compelling slide decks. With Figma Slides, teams can collaborate in real-time, incorporate live designs, and use a zoomed-out grid view to manage slide layouts.
Updates to Dev Mode: From Design Ready to Dev Complete
Dev Mode was a major focus at the conference, with updates designed to bridge the gap between designers and developers. New features include the Ready for Dev View, which helps developers find what they need among multiple design explorations, and Focus View, which allows developers to see only what is ready to build. Additionally, Code Connect surfaces design system code and makes it more useful across various frameworks and programming languages. These updates ensure that design and code are more closely aligned, making the handoff process smoother and more efficient.
Enhanced Prototyping Capabilities
Prototyping in Figma has reached new heights with the introduction of micro-interactions and advanced animation effects. These features allow for the creation of more interactive and realistic prototypes. The improved device preview options let designers test their prototypes on various devices and screen sizes directly within Figma, ensuring a seamless user experience. Conditional logic support enables the creation of sophisticated user flows that accurately simulate real-world interactions.
What do we at Muzli think about the new updates?
Without a doubt, Figma Config 2024 was a landmark event, showcasing innovations that could fundamentally change the design process. We at Muzli were happy to see the advanced collaboration tools, the cool AI features, and the improvements in prototyping and accessibility. Even Figma Slides sounds like a fun and long-overdue replacement for Powerpoint or Canva.
This event establishes Figma as an even stronger player that will be really hard for competitors to catch.
BUT we have to pause and ask ourselves — is all this too good to be true? Will they be able to deliver on these promises? And on a more philosophical note — is this AI going to make us more efficient design machines and take away all the fun and creativity? What new challenges will we need to tackle?
All this and more, in the next episode 😄
Special reporter Eyal, out.
You can watch all the announcements here:
Config 2024: Figma product launch keynote
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
I’ve just read an article about heatwaves sweeping the globe. Looks worrisome… But hey, if you’re looking for a bright side, it’s a perfect time to find some shade, take a sip of your favorite cold drink, and enjoy the best design pieces I’ve found this week:
Beautiful digital postcards from Italy by ET Studio
Refreshing web design by Igloo
Unique spinning experience by SINK
Augmented Reality project by Laura Normand
Interesting mobile website design by Ronas
FOOD coffee block by One Object Design Studio
Plus more inspiration, quite a few design related summer sales and many interesting AI resources.
Check out the full list below and see you around next week, Eyal from Muzli
Invoke is a powerful, secure, and easy-to-deploy generative AI platform for professional studios to create visual media. Train models on your intellectual property, control every aspect of the production process, and maintain complete ownership of your data, in perpetuity.
Remove silences, generate captions, and animate your content — instantly. Create engaging videos in seconds using our first-of-its-kind creative tool in the browser. Ozone unites AI, pro video editing tools, and real-time collaboration.
Zebracat is a text-to-video platform designed for marketers and entrepreneurs to create impactful videos quickly and easily. Turn text prompts, scripts, or blog posts into engaging videos with human-like AI voiceovers, music, and effects.
Where innovation meets design: Immerse yourself in sleek 3D imagery, gradient aesthetics, and captivating animations, setting the stage for your business to shine.
Google Chrome OS | Wallpapers and Avatar by sLeo Natsume
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Usually, when we talk about website design at Muzli, we dive deep into details and discuss grand ideas like user design process, research, wireframing, content strategy, testing, and so on. But when it comes to website design for a small business, reality hits and the scope changes a bit. As budget and time limitations become very important factors, the brief becomes very simple: the company simply needs a nice website to inform our customers about what they do.
Today, we are going to take off our smart hats and focus on helping you make the website design process for small businesses as efficient as possible. Even if it means cutting a few corners here and there, the result can still be great.
1. Mindset: creating a perfect website is harder than you think
First of all, you should manage your expectations to prevent future disappointment. Even though it might not look like much to an untrained eye, creating a high-quality website is a long process that requires a lot of experience from at least a few professionals. People spend years studying best practices in design, development, and copywriting for a reason.
Forget the shiny webs of big corporations for a second. If you do not have an experienced team behind you or enough budget to hire one, you should focus on getting the optimal result — a solid ‘good enough’ website for your small business.
2. Make sure you start with the website content, not design
Once the mindset is intact, you should focus on creating content for your website. Often, less experienced small business owners who build their first website make this mistake: they focus on design first and only then on the content to ‘fill in the gaps.’ What you want to say and show should dictate how it’s going to be represented on the website, not the other way around.
3. Get the most of modern website builders
Website builders have become increasingly popular over the past decade. While at first business owners were sceptical about them, powerhouses such as Wix and Squarespace have seriously improved their game and now offer professional-looking websites for small business owners at a fraction of the price. They offer an all-in-one solution that not only deals with website design but also includes domains and hosting.
WIX Studio
4. Use the template that fits your business the best
All of the popular website builders offer many templates for most popular business areas. Car repair shop? Sure. Small bakery? Easy. Barbershop? They’ve got you covered! Try to find the template that is closest to your business area. Even though there are no perfect templates in the world, chances are that this way the structure and theme of the website will be closest to yours and will need the fewest changes.
5. Focus your effort on essential pages first
When a small business deals with limitations, prioritization becomes a crucial skill. It’s the same with websites. Start with the most important pages like Home, About, Contact, and Services or Products. Additional pages can be added later. The same applies to design elements. By keeping the design simple and functional, you will reduce the time spent on visual elements.
6. Use stock resources for images, icons and other visual elements
While it would be beneficial to have real photos of your business — showing real faces of real people is super valuable for small businesses — you can do without them. Use resources from sites like Adobe Stock or Shutterstock to buy and quickly add visuals to your site. Additionally, you can explore websites like Unsplash or Pexels, where the pictures are free to use. The same can be done for forms, buttons, and other UI elements.
7. Outsource website creation tasks to focus on your business
Even though most website builders focus on simple drag-and-drop editing and most users can do it themselves, certain skills are still needed. And some good taste! If you are generally tech-savvy, creating a company website yourself should be no problem. If not, consider outsourcing it to professionals and focusing on what you know best — developing your business.
Is it hard to create a website for a small business?
While there’s value in creating large and complex websites for big companies, small businesses might not always require it, especially if the website itself doesn’t generate value. If it’s merely a place to showcase your previous work and provide potential clients with your contact information, a simple website could be completed in a day or two. We hope we’ve demonstrated that it can be done easily and effortlessly.
By following these tips, you can significantly reduce the time required to get a functional website up and running. You can spend picking right fonts or colors for your website. But don’t forget that focus is the key: create essential features first, and then iterate and improve the site as needed.
This approach will allow you to create your first MVP (minimum viable product). Afterward, you’ll officially be able to brag to your friends that you’re a web designer. Best of luck!
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A graphic design job is an excellent combination of the creativity that artistic professions offer and the perks of a stable career.
However, competition in the design field is always increasing, and the current economic situation is far from perfect. So, how can you stand out from the crowd and get your (first) graphic design job?
At Muzli, we have been working with designers in different fields for almost a decade and know a few industry secrets that we’re ready to share with you today to help you get your foot in the door and land your dream job.
Here’s what we’ll cover in this article:
What is the demand for graphic designers today?
What salaries graphic designers are earning?
Different types of design jobs: Graphic vs Web / UX / UI
How do you get experience as a graphic designer?
What’s better: work for an agency or work as a freelancer?
How to create a great design portfolio to get hired?
Designer job ads: Where do you look for job offers?
While traditional designers from the era of print are in decline, the demand for digital-oriented designers is stronger than ever. For example, the US Bureau of Labor Statistics projects that by 2031, graphic design job openings will reach 271,800.
Since the digital world is expanding at a crazy pace, talented graphic designers are in high demand.
Additionally, emerging niches such as virtual reality and spatial computing, which heavily focus on visuals, will also see an increased need for new era of designers. Other fields of design, such as UI and UX design, are also experiencing significant growth.
Salaries of graphic designers
While salaries depend on many factors, such as geographical location and seniority, here are the general ranges of how much you can expect to make as a graphic designer.
Glassdoor reports that in the US, the average graphic designer salary ranges from USD 57K to USD 96K per year. In Europe, the situation is a bit different. For example, in Germany, the average annual salary for a designer is EUR 37K to EUR 54K.
Of course, you have to keep in mind that entry-level designer salaries can be drastically different from those of senior-level designers or more managerial roles, such as design directors or creative directors.
Reasons why graphic design is a good career
While things like salary and economic situation are always important, don’t forget that working as a designer has a lot of other benefits too:
It exercises your creativity
Rarely gets boring
You’re constantly learning
Has many paths for career growth
Also, your work gets seen by thousands of even millions of people. For example, on platforms like Muzli.
Different types of design jobs: Graphic Design vs Web / UX / UI Design
The perception of the designer profession is continually evolving. 20 years ago, design was primarily associated with print media. Today, the scope has expanded to include such exotic roles as metaverse designers. However, digital designers today mainly focuses on graphic design or UX/UI design.
Graphic design focuses on visual communication through the use of typography, imagery, color, and layout to create visually appealing and effective designs. This field covers branding, advertising, web design, and packaging.
UX (User Experience) design and UI (User Interface) design, on the other hand, concentrate on creating intuitive and engaging digital interfaces. It involves user research, wireframing, prototyping, and usability testing.
How to get a graphic design job with no experience?
If you chose a career of graphic designer and are just starting out, you’ve probably encountered this age-old dilemma that has already turned into a meme:
To find a job you need experience, and to get experience you need a job.
But how to get real work experience as a graphic designer? If you are just taking your first steps, there are a few tips on how to improve your design skills and get seen by potential clients:
1. Volunteer to do free design work
Consider non-profit organizations, NGOs, schools, and other initiatives that could use some help. Maybe your local animal shelter needs help with branding, or a scout organization has a terribly outdated website.
Many organizations could benefit from higher-quality designs but usually have a very limited budget for it. If you present a solid offer to provide your time in exchange for the opportunity to learn and showcase your work, it becomes very hard for them to say no.
2. Pursue you own personal design projects
Do you have a hobby that you want to promote and that needs some design material? Why not use this opportunity to train and showcase your skills?
The best part is that there will be no strict deadlines or stakeholders, so you can work at your own pace. This approach works best if you have another full-time job and limited time to invest in growing as a designer.
3. Enroll into graphic design courses and get certifications
Certifications can also be a way to demonstrate a designer’s proficiency in specific tools and techniques, making them more competitive in the job market. For employers, certified designers are often seen as more reliable and knowledgeable, which can be crucial in securing clients and projects.
4. Find an internship at a design agency
Once you have the basic skills in place, you can try them out in the real world by working as an intern at a design agency or in a marketing department.
PRO TIP: Even if the agency you want to work at doesn’t have an active job advertisement that fits you, don’t be discouraged. Feel free to contact them and introduce yourself anyway. Many forward-thinking agencies are always on the lookout for rising talent, so it’s always beneficial to get your foot in the door and get noticed.
5. Do small design projects through online platforms
Make the best out of the gig economy and try out online platforms to find design work. While at first the payment might not be something to write home about, it’s a good way to find your first gigs for real clients. Examples like these stands out in your portfolio, because it shows your experience in a ‘real world’.
There are many online sites where you can showcase your work, not just save your sketches on your hard drive. Sharing your work with the world can provide valuable feedback, help you find clients, or simply notify your network that you’re focusing on design work, ensuring you’re on their radar when opportunities arise.
You can use social media networks like Instagram or Pinterest, or platforms like Muzli, to submit your design work for exposure.
How to create a great design portfolio to get hired?
As we mentioned before, probably the most important career tool of a great designer is their portfolio. We have handpicked a collection of portfolios from the world’s top designers that will help you get inspired and land your dream job as a designer.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
How’s your week going? The longest days of the year are upon us, I hope you’re making the most of them. Have you been following this year’s Cannes Lions? If not, here’s our own little version of it — let’s dive into the best design pieces I’ve found floating around the internet this week.
Impressive web design portfolio of Rogier de Boeve
Cool presentation of a real-life MMORPG game Zentry
Fancy website for Viture XR Glasses
Book about becoming a more effective product designer by Artiom Dashinsky
Nostalgic Retro Illustrations by Papermoon
And even more inspiration, fancy design mockups, templates and productivity tools.
Check out the full list below and see you around next week, Eyal from Muzli
The best designers are effective *outside* of Figma. But how do they achieve that? Learn 27 actionable lessons on communication, persuasion, influence, decision-making, productivity, and more.
aim to fasten development production speed with the first-of-its-kind design-to-code tool that lets designers export interactive design prototypes and get them converted to React and HTML/CSS.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Do you remember the first time you booted up a graphic editor (Paint doesn’t count!)? For me, it was Photoshop 5.0 (or was it 4.0?) on my old rattling 233 MHz Pentium II when I was around 16 years old. I’ll never forget that magical moment when I realized the power I had at my fingertips. It felt like discovering the One Ring and being unable to let go (my precious).
I didn’t leave my room for 8 hours. I still remember the masterpiece I created — it was a portrait of a good friend that I transformed, making him look like the face of Rocky after a fight with Apollo Creed. No tutorials or guidance — just trial and error. And it looked amazing!
The field of design has come a long way since then. Today, that old Pentium II wouldn’t be able to handle a single Chrome tab, and Photoshop has stopped counting its versions a long time ago. Loads of great new tools have come up, shaping the way we design today.
Let’s take a walk down memory lane and remember the legendary tools, companies, and sources that have cemented their place in the Design Hall of Fame. There’s a lot of fallen giants too.
Buckle up, we’re about to take a nostalgic ride.
Adobe: The Pioneers and Their Lasting Legacy
Some tools have withstood the test of time and continue to be integral to the design process. Adobe Photoshop, launched in 1988, revolutionized the way we edit images and create graphics. Its versatility and powerful features have made it a staple for designers worldwide. Similarly, Adobe Illustrator, released in 1987, has been the go-to tool for vector graphics, allowing designers to create scalable artwork with precision.
Flash: The Animation Trailblazer
No trip down memory lane would be complete without mentioning Adobe Flash. Launched in 1996, Flash became the go-to tool for creating animations and interactive content on the web. It brought a whole new level of creativity to websites and was beloved by designers for its ability to make the web more dynamic and engaging. However, Flash’s reliance on plugins and its vulnerability to security issues led to its decline. By the late 2010s, HTML5 and other technologies had taken over, and Flash was officially discontinued in 2020.
As the internet became more prevalent, new platforms emerged, offering innovative ways for designers to showcase their work and connect with others. Behance and Dribbble quickly became the social networks for designers, providing spaces to share portfolios, discover trends, and find inspiration. These platforms have not only stood the test of time but have also evolved, adapting to the changing needs of the design community.
The Rise of Specialized Tools
The 2000s and 2010s saw a surge in specialized design tools tailored to specific aspects of the design process. Sketch, launched in 2010, became the darling of UI/UX designers with its intuitive interface and powerful features. Meanwhile, InVision introduced a collaborative approach to prototyping, making it easier for teams to work together seamlessly.
Fallen Giants: The Platforms That Couldn’t Keep Up
Now that we’ve set the stage, let’s dive into the stories of some design platforms that were once the kings and queens of the design world but have since either shut down or faded into the background.
Forrst: The Community Treehouse
Forrst was the place to be for designers and developers back in 2010. Imagine a cozy treehouse where you could share your work, get feedback, and connect with other creatives. But as time went on, Forrst struggled to grow and monetize. In 2013, it was bought by Colourlovers and eventually shut down. The rise of competitors like Dribbble didn’t help its cause either.
Designer News and Sidebar.io: Gone but Not Forgotten
Designer News and Sidebar.io were your daily stops for the latest design trends and inspiration. Designer News was like Reddit for designers, while Sidebar.io gave you a daily dose of curated links. Both platforms struggled with keeping users engaged and making money. With social media and other content aggregators taking over, these platforms couldn’t keep up and recently shut their doors, leaving many designers searching for new sources of inspiration.
InVision: From Star to Struggler
Remember when InVision was the go-to tool for prototyping and collaboration? It was the darling of the design field. But with the announcement that it will discontinue its design collaboration services by the end of 2024, following the acquisition of Freehand by Miro, things have changed. The rapid rise of more integrated tools like Figma has pushed InVision to the sidelines. However, not all is lost! InVision had a shining moment when they acquired us, Muzli. To the delight of over 750,000 designers, they put us on a lifeboat and set us free just before the ship started to sink. Talk about a heroic rescue!
Sketch: Once a Giant, Now a Memory
Sketch took the design field by storm when it launched in 2010. It was the top choice for UI/UX designers. But being exclusive to macOS and slower to innovate compared to its competitors led to its decline. Figma’s cross-platform capabilities and superior collaboration features have wooed many Sketch users away. While Sketch is still around, its presence in the design community isn’t what it used to be.
Adobe Photoshop: The Veteran Adapts
Adobe Photoshop has been the go-to tool for designers for decades. But even this veteran has seen a shift. Photoshop, once used for all types of design work, is now more focused on photo editing and graphic design. Tools like Adobe XD, Figma, and Sketch have taken over the web and UI/UX design spaces. This shift is due to the specific features these newer tools offer, catering to modern web and app design needs.
Why Did These Platforms Fall?
Inability to Adapt: These platforms couldn’t keep up with the rapidly changing design landscape. For example, Forrst couldn’t innovate fast enough, and Sketch’s macOS exclusivity limited its user base.
Competition: Newer, shinier tools with better features and user experiences emerged. Figma’s real-time collaboration and cross-platform support made it a preferred choice over Sketch and InVision.
Monetization Challenges: Platforms like Designer News and Sidebar.io couldn’t figure out how to make enough money to stay afloat.
Should Other Tools Be Worried?
The design field is always evolving, and even the current favorites need to stay on their toes. Tools like Adobe XD, Axure, and Webflow need to keep innovating and adapting to user needs. Webflow, with its powerful web design capabilities, faces stiff competition from other no-code and low-code platforms, so it needs to ensure it continues to evolve and meet the demands of modern web designers. Dribbble, while still popular, needs to ensure it evolves with the changing landscape of designer portfolios and community interaction to avoid a similar fate.
Muzli: Here to Stay
In a world where many beloved platforms have closed their doors, we’re here to assure you that Muzli isn’t going anywhere. We’re committed to bringing you daily design inspiration, the latest trends, and all the resources you need to keep your creativity flowing. So, designers, don’t worry! Muzli is here for the long haul and will remain your creative home for many years to come.
Stay inspired, stay creative, and remember — Muzli’s got your back!
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Keeping up with the latest trends, tools, and best practices in web design is essential for every web designer. Blogs and publications offer an excellent source of continuous learning and inspiration. Here are the must-read blogs for web designers in 2024, including some new and exciting publications you might not know about.
Covers a range of topics from UI/UX design to prototyping and collaboration tools.
Conclusion
These blogs and publications are treasure troves of knowledge, inspiration, and practical advice. By keeping up with these must-read resources, you’ll stay informed about the latest trends, techniques, and tools in web design, ensuring your skills and knowledge remain up-to-date.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Creating a visually appealing and user-friendly website can be challenging. However, there are common mistakes that can detract from the user experience and negatively impact your site’s performance. Here are ten common web design mistakes and how to avoid them.
1. Ignoring Mobile Responsiveness
Mistake: Many designers focus solely on desktop versions of their websites, neglecting the growing number of mobile users.
Solution: Use responsive design techniques to ensure your website looks great on all devices. Tools like CSS media queries can help you create a flexible layout that adapts to different screen sizes.
2. Overloading with Content
Mistake: Crowding your pages with too much text and too many images can overwhelm visitors and obscure your message.
Solution: Keep your design clean and simple. Use whitespace strategically to give your content room to breathe, and focus on delivering concise, impactful information.
3. Poor Navigation
Mistake: Complicated or unclear navigation can frustrate users and make it difficult for them to find what they’re looking for.
Solution: Design an intuitive navigation system with clear labels and a logical hierarchy. Consider including a search bar for added convenience.
4. Slow Load Times
Mistake: Slow websites frustrate users and lead to high bounce rates.
Solution: Optimize images, use efficient coding practices, and leverage caching to improve your site’s load times. Tools like Google PageSpeed Insights can help identify areas for improvement.
5. Ignoring SEO Principles
Mistake: Neglecting SEO can make your website difficult to find through search engines.
Solution: Incorporate basic SEO principles, such as using descriptive titles, meta descriptions, and alt tags for images. Ensure your content is keyword-rich but natural-sounding.
6. Inconsistent Design Elements
Mistake: Using inconsistent fonts, colors, and styles can create a disjointed user experience.
Solution: Establish a style guide for your website and stick to it. Consistency in design helps build a cohesive and professional look.
7. Lack of Accessibility
Mistake: Failing to design for accessibility excludes users with disabilities.
Solution: Follow Web Content Accessibility Guidelines (WCAG) to make your site accessible to all users. Use features like alt text for images, keyboard navigation, and readable fonts.
8. Not Testing Across Browsers
Mistake: Designing for only one browser can lead to compatibility issues on others.
Solution: Test your website across multiple browsers to ensure a consistent experience. Tools like BrowserStack can help with cross-browser testing.
9. Overuse of Animations
Mistake: Excessive animations can distract users and slow down your site.
Solution: Use animations sparingly and ensure they serve a functional purpose. Avoid using heavy animations that can impact performance.
10. Ignoring User Feedback
Mistake: Not considering user feedback can result in a website that doesn’t meet user needs.
Solution: Collect and analyze user feedback to make informed design improvements. Use surveys, usability testing, and analytics to gather insights.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
How has your week been? What’s new? Did you catch the Apple WWDC? What do you think? Is AI just hype or a real transformation? That’s a lot of questions to unpack… But let’s not forget the main goal — this week’s goodies that I’ve picked for you:
Unique web experience for Fountain Of Youth
Impressive portfolio website of Claudio Guglieri
Design Education Series by Obys®
Kaizen project by Makemepulse agency
A visual way to plan a website by FlowMapp
And even more inspiration, fancy design mockups, templates, AI productivity tools.
Check out the full list below and see you around next week,
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Sometimes, the design world becomes super serious with its high aesthetics, straight lines, fancy animations, and bleeding-edge technology. However, I believe that there is also plenty of space for simple playfulness that we sometimes forget. What do you think?Anyhow, let’s dive into a few playful design pieces that I discovered this week:
Let’s ride Dolce&Gabbana’s Vespa through Rome
Try browser game by NFT company Space
Explore the immersive experience by noomolabs
Check out website for Superpower
Look at the playful packaging by Makers Company
Enjoy impressive illustrations by Dani Blázquez
And get even more inspiration, fancy design mockups, templates, productivity tools.
Check out the full list below and see you around next week,
Show the creativity of your workshop not only from the classes you provide but also from the website you have using CraftHive, the fun, and bright creative workshop website Framer template.
advanced AI logo maker simplifies the process of designing a professional and unique logo that perfectly reflects your brand’s identity — all for free.
Hidden Heroes — Packaging Illustration by Makers Company
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Newsletter design often is a controversial topic. There are generally two kinds of people: those who think email is the best form of communication and those who despise it with all their hearts. Which one are you?
Love it or hate it, when it comes to marketing, research shows that email and newsletters remain some of the most effective channels. While most social media networks have engagement rates lower than 1%, a study by email marketing leader Mailchimp shows that the current average email open rate is 35.63%. Newsletter design is one of the key aspects in turning these opens into conversions.
If effectiveness is out of equation, the remaining question is — how to design a newsletter that your readers will love?
In today’s post, we will cover:
Tips on designing effective newsletters that drive reader actions.
How to create actionable CTA buttons that users click.
Newsletter design inspiration from top designers in the industry.
Is newsletter design still worth the effort?
Let’s answer the big question first. People have been saying that email is dead for probably a decade now. However, in reality, it’s not going anywhere — statistics say that there are around 4.48 billion email users in the world.
Let that number sink in for a second. Half. Of. The. World.
It’s important to remember that designing for email marketing doesn’t mean just creating promotional newsletters. It also includes welcome emails, order updates, customer support messages, user surveys, and other communications that a brand conveys through email.
While aesthetics and creativity are always at the top of Muzli’s priority lists, the key mission for email designers is to maintain clarity and consistency across all the different types of material. Visual consistency is what contributes to developing your brand’s trust and credibility in the long run. Clarity is what helps you achieve your business goals.
The secret ingredient good newsletter design is simplicity
We know that our audience reading this post is super creative, but we have to say this… newsletter design might not always be the best place to showcase fancy ideas. Our experience shows that black-on-white simplicity can often be a more effective choice when it comes to email marketing.
But no need to be discouraged; there’s also a bright side to it. While email design structure is pretty limited, it can serve as a helpful guideline to create simple yet effective campaigns. You know what they say — limitation breeds creativity.
Design-wise emails usually focus on clear hierarchy and a simple one-column design to be easily scrolled through on both desktop and mobile. Newsletter designers should remember that the main focus of a quality email should be conveying your message effectively.
A few tips to keep your newsletters simple and clear
Do not overwhelm your users with complicated design elements.
Ensure a clear focus on call-to-action buttons and make them stand out.
Stick to simple fonts. While elegant handwritten fonts might work well in other mediums, they generally don’t work well in emails, especially for mobile. Here’s what free fonts we recommend.
Choose colors carefully for the best readability. HINT: Red on green is not the best idea.
Stick to plain backgrounds. Avoid bright colors and patterns.
By the way, if you’re looking for perfectly matching colors and aren’t sure what would fit best, the free Muzli Color Palette Generator is is a great tool to help you discover your vibe.
Now let’s dive deeper into the main element of a killer newsletter design: creating an effective call to action that will drive your readers toward your desired goal.
Newsletter design is all about the right CTA buttons
We have to remember that first and foremost, newsletters are marketing and communication tools. It means that the main goal here is to convey a message or drive your users to another page — an external website, landing page, product page, signing up for a service, etc.
This is why designing compelling and clear call-to-action buttons is crucial for emails.
What does a good CTA button look like?
It stands out visually. Use contrasting colors, button sizes, and fonts.
It uses catchy phrases. Think about the one thing users could benefit from the most and state it clearly. For example, “Read our report” or “Use this code to save.”
It has enough space to stand out from other content. This one is pretty self-explanatory — don’t bury your main item in a pile of content.
PRO TIP: While the temptation might be there, don’t forget that too many call-to-action buttons might have the opposite effect and distract the user from your primary goal. It’s recommended to focus each newsletter on a single goal.
While it doesn’t mean that your emails should only have one link, the hierarchy should be clear, and the main message should immediately stand out from the rest of the content.
Blocked images might ruin your emails
While the most common email service providers such as Google or Yahoo enable the images on newsletters that are not marked as spam by their filters by default, this might not always be the case.
If you are running a B2B campaign and a significant part of your email audience is using company email addresses, the images might get blocked, turning your meticulously designed newsletter into a bland mess.
The good news is that with a few tricks, it’s pretty easy to avoid this inconvenience:
Make sure that your main message is written in a text format; avoid incorporating important text into an image.
Add ALT texts to your images describing what’s in the picture. If they get blocked, users will still understand the context.
Keep the text/image ratio oriented towards text. A general rule of thumb is 60/40.
Don’t forget to test different newsletter design ideas
Modern marketing is all about testing different approaches to find ideas that click with your audience. The same principle applies to email marketing. Most of the newsletter service providers today allow you to run A/B testing campaigns where you can test out different design solutions.
Key design elements you should test in your newsletter:
Call-to-action buttons. Try different sizes, different colors, and different CTA messages.
Above-the-fold content. Try experimenting with straightforward messages right at the top or try out more subtle messages incorporated into the email.
Length of the newsletter. Does your audience prefer short and straightforward emails or do they want to read longer personal stories? There’s only one way to find out.
PRO TIP: Don’t forget to send a test email to yourself or your colleagues after finishing your design to see the final result in the real world and real inboxes.
The best online tools to create your newsletter
Struggling to find ideas to make your newsletter design stand out? The good news is that your email service provider probably already has dozens of professionally designed templates. The bad news? Even though their demos look great, it almost never translates 100% to what you need in the real world.
This means that you will have to manually adjust the provided templates to fit your goal. That’s why we recommend keeping this in mind when choosing your newsletter provider. A feature-rich and easy-to-use drag-and-drop editor could save you loads of time in the long run. Additionally, saving your custom templates will allow you to easily keep the visual consistency higher.
Here are a few platforms that offer flexible newsletter builders:
Newsletter design inspiration ideas from top creators
Finally, once the basics are in place, we can focus on creating the design itself. To get inspired to start, check out the favorite modern designs that we have picked.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Let’s talk about gathering inspiration and the eternal debate: should we take inspiration from places like Dribbble?
When I start a new design project, I always begin with a big cup of coffee and a healthy dose of inspiration. My process for gathering inspiration is divided into two main stages. In the first stage, I look for functional examples of existing designs — ones that look great and work even better. This helps me build a solid foundation for designing and planning the interface, something that both clients and users can appreciate and understand.
But then comes the really fun part — the second stage. Here, I start looking for unconventional and even a bit quirky examples. For instance, let’s say I’m interested in designing dashboards. I gather designs that are less about practicality and more like digital art. Why? Because sometimes it’s important to see exaggerated and futuristic designs to open up new creative directions. I might not use all the crazy ideas I find, but even a single unique element — like an interesting hover effect, an unusual grid layout, or a surprising font — can add that special twist to my design.
As Picasso famously said, “Learn the rules like a pro, so you can break them like an artist.” When you understand what works and what doesn’t, you don’t need to be afraid of exploring bold design inspiration because you’ll know how to evaluate it and take only what you need.
This approach works great for me, but I’m sure everyone has their own method, and that’s perfectly fine.
So, in this post, I want to share some totally unconventional dashboards inspiration. These designs can spark your imagination and open your mind to new possibilities. They might not be the most practical, but they’re definitely inspiring. Because sometimes, inspiration comes from the most unexpected places.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A logo is usually the first interaction a customer has with your business. Research shows that, on average, a person sees around 5,000 logos per day. Insane? Absolutely. But at the same time, the data is clear about one thing: the importance of a brand’s logo is higher than ever. User surveys show that a company’s branding is closely related to trust, conveys a brand’s personality, and can significantly impact buyers’ decisions.
With these findings in mind, only a couple of questions remain: how do we create a successful logo, and where do we start?
This situation is probably familiar to every designer, but no worries, we have your back. In this post, we will dive deeper into what makes a good logo, how to approach creating one, where to get design inspiration ideas, and showcase the best examples from top current logo designers.
First, let’s dive deeper into the statistics. The good news is that, for once, the data is unanimous about something: the logo’s design is incredibly important. According to statistics, 73% of customers say they are more likely to trust and make a purchase from a brand they recognize. Furthermore, 42% of people feel that a brand’s personality can be understood from its logo.
This is great news for graphic designers. Once we know for a fact that logo design is important and worth investing in, it’s easier to communicate this value to our clients. But at the same time, the stakes are also higher, since a brand’s reputation is closely linked to its visual identity. This means one thing — it’s crucial to focus on quality.
Did you know that the first Apple logo featured Isaac Newton sitting under the apple tree?
What elements make a logo design memorable and timeless?
Of course, we all heard the stories of iconic logo examples by McDonald’s, Nike, Starbucks, Adidas, etc. Some of them were meticulously designed from the start, while others began as simple 20$ sketches that evolved over time until they were completely transformed. But what is the secret behind a logo design that might one day become a classic?
Here’s what our creative director Eyal has to say about:
*First, I strongly believe that a good logo should focus on simplicity, making it both memorable and versatile. A high quality logo looks great at any size, from a tiny website favicon to a large billboard.**Memorability is also key — unique designs help people easily remember the brand in a very visually busy world.**However, I’m not a huge fan of chasing the latest industry trends. By avoiding fast-changing fashions and staying true to your own ideas, a logo can remain more effective over time.*You can call it an unpopular opinion, but I don’t believe that a logo has to be conventionally beautiful to be effective. Many successful logos aren’t particularly attractive at first glance but excel in functionality and brand representation in the long run.
— Eyal Zuri, Creative Director of Muzli
Blue is by far the most popular colour choice for logos.
How to find inspiration ideas for designing your logo?
When the industry is saturated with logos, creating a fresh design becomes a challenging task. However, there are several approaches that could help you develop an initial concept if you’re feeling stuck. Here are some useful tips from industry leaders:
Delve into your brand history: Explore the founders’ motivations behind starting the business or brand. What specific tone of voice does the business use to communicate with customers? What feelings are associated with this brand? What are their ambitions for the future?
Analyze iconic logo examples: Take time to study what made the iconic logos we see today special. Was it the standout bright color? The distinctive and memorable shape? Or perhaps it was the incorporated relatable symbol?
Observe the world around you: Remember, design happens not only in your browser window. Look for inspiration in everyday surroundings. Perhaps there’s a line in car design that resonates with you? What about that famous building you pass by everyday? What about your clothing? Or nature? Inspiration is everywhere.
Seek inspiration from top graphic designers: Explore not only iconic logo designs from industry giants but also discover what current talent has to offer. Platforms like Muzli are excellent for finding inspiration and understanding the current state of the design field.
Stages of creating a professional logo
Once you have a clear idea what the brand wants to communicate, what their associations should be and what art direction you want to go, it’s time to go to the design itself. The standard logo creation process includes these steps:
Conceptualization: Freely explore the visual ideas that the research phase brought you. Sketch out rough concepts or create mood boards to explore different visual directions.
Design Development: Once a concept is chosen, designers should start refining the design. This involves creating digital mockups, experimentation with typography, colors, shapes, and symbols.
Feedback and Revision: Designers present the initial logo concepts to the client for feedback. Based on the feedback received, revisions are made.
Finalization: Once the final design is agreed upon, the final touches are made: creating different file formats, various color combinations for different applications. The finalized logo files are delivered to the client, who then implements the logo across various materials.
After completing these steps and using the logo in the ‘real world’ for some time, it’s very important not to forget to evaluate its effectiveness in achieving the brand’s goals.
Can I skip it all and use a logo generator instead?
As you can see, creating a logo design can become a tedious process that involves a lot of different steps. At the same time, today it’s easier than ever to generate a logo with just a few clicks by employing one of the dozens of logo generators. We know, it sounds too good to be true. But are they worth it?
The answer is not that simple. It depends. If you are just starting out in your business and do not have enough experience to create a quality logo yourself and no additional budget to invest for professional logo design services, then an online logo maker can be a quick and easy (even if pretty generic) solution. However, keep in mind that changing a logo and undergoing a rebranding in a later stage of the business might require more effort and be a pretty costly process. Also, online generators vary in quality and pricing, so don’t forget to do your research.
Alternatively, these generators could be used as an inspiration source for drafting your logo design ideas. It’s a very quick and efficient way to decide: Do you prefer your name in red or blue? Should the font be very clean and minimalistic or fancy and handwritten? Is it just your brand name, or do you want to include additional design elements, too?
We gave one of the generators a go. What do you think about the results?
Perfect? By no means. But it’s way easier to imagine the final result when you have a solid sketch in front of your eyes.
Logo design inspiration sources:
If, after reading these tips, you are still feeling stuck, we have handpicked the best modern logo design ideas from industry leaders to get your creativity flowing.
If you want even more, check out Muzli — a free browser extension that curates and showcases the best design content from all over the web.
25 fresh and modern logos for your inspiration:
Tired of big corporation logos mentioned in lists like this? Yup, we feel you, that’s why why picked some fresh logos from upcoming studios ant brands.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The world seems to have been pretty crazy lately, huh? However, I’ve found that doing creative work helps to relax the mind. Even looking at inspiring works by others can be very soothing. That’s why I’m coming back to your screens with this week’s top designs that I’ve discovered on the web:
Great work from futuristic web designer A./Chen and retro-inspired agency Toyfight
Unique entertainment project from STR8FIRE
Peaceful design example from heyday studio
Of course, the new version of GPT-4 with expanded capabilities
And even more inspiration, fancy design mockups, templates, productivity tools.
Check out the full list below and see you around next week,
Your go-to Landing page for your Community. Elevate your presence with our versatile handcrafted design. Effortlessly customize your brand’s look, integrate blogs seamlessly and connect with your audience with ease.
Lunar is a one-page template designed to be a captivating canvas for creative studios and minds to exhibit their work with finesse. Lunar boasts a user-friendly interface for your artistry to take center stage.
Collaboration on low-fidelity wireframes. Blocks brings your whole team into one tool so they can iterate quickly, collaborate better, and avoid becoming too attached to any one style. Go from low to high-fidelity within the same tool.
Transform your images effortlessly with the Fractal Glass Effect plugin. No more switching to Photoshop and following lengthy steps to create the fractal effect. Do it right here, within Figma, in a single click.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Have you noticed that as the week nears its end, the inspiration battery for creative work often runs lower? Bleh… Let’s fix that by plugging in the high-speed charger and diving straight into this week’s design goodies:
First, I’d like to shout out to the small guys who punch above their weight: Unique websites from the 90s-obsessed duo Localstudio and the solo agency of Nick Jacoy that promise crazy designs and deliver.
An unusual approach to the career page by Loox. Unicorn alert!
AI-based visual storytelling experiments by Daniele Buffa.
Collecting user feedback, but not sure what’s most important? Upp.Vote helps you decide.
And, of course, more news and handpicked tools to improve your design workflow, such as Figma plugins, design templates, and more.
Check out the full list below and see you next week,
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Me? Oh, nothing much, I just wrapped up the new edition of Designers Update, and I’m excited to share it with you. Here are some inspiring projects that caught my radar this week:
Couple of unconventional websites from established design studios. Be sure to check out Rob Hemus if you like pixely stuff and TWOMUCH.STUDIO if you prefer more round floaty 3D stuff.
A quirky little browser game / WebGPU capability experiment from Kris Temmerman — Food for Fish. Perfect for old school point-and-click game lovers.
Whether you are a fan of AI or not, Freepik’s image generator has been one of our favorites for a while now.
And of course, more news, handpicked tools to improve your design workflow such as Figma plugins, design templates and more.
Check out the full list below and see you next week,
Transform your ideas into stunning images in real-time with Freepik AI Image Generator. Customize prompts, styles, and settings, and enhance results with tools like Reimagine and Upscaler.
Your users are speaking! — The discovery tool for busy product teams.
Spend more time shipping value, less low-added manual work. Centralize your user feedback automatically, identify patterns and push them to your delivery tool.
Welcome to Qupe, where innovation meets design in the world of Saas and startup website templates. Fuel your entrepreneurial journey with our meticulously crafted and fully customizable template.
Meet LikeaBoss — the framer template that’s perfect for SaaS and startup websites. It’s your ticket to effortlessly crafting a sleek online presence with cool layouts and modern vibes, bringing you both efficiency and style!
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
UX design is a profession that was introduced to help companies solve problems creatively. However, it has taken an all-new avatar in the past 2 years. It is frightening and exciting at the same time! Through this article, I wish to clear out some of the fog and be your industry insider.
We’ve all noticed shifts in where UX designers are starting their careers. Earlier this meant teaching yourself design from YouTube and articles listed on Google. This journey was made even easier with short and cheap courses online.
However, as is with any other career path, competition creates new ways to do things. As more people wanted to become designers, it became clear that things needed to change. People found solace in UX bootcamps and institutes. It wasn’t long before colleges followed suit and brought diplomas and degrees into the mix. However, this wasn’t enough.
Fast-forward to 2024, regardless of all the shortcuts or solutions, UX design has been hard to digest lately. Even though UX designers are changing and becoming better, the industry has grown to expect different things. So, the new generation ends up being surprised when their skills don’t match up with what recruiters are looking for.
Where is the starting point now?
It’s much more product-focused and action-oriented. If you want to ace an interview moving forward, you have to show how the business and core product can be affected by research, data, and proper strategy. Companies also expect you to have some knowledge of their industry, i.e. finance, food, transport, etc. So if you apply for a fashion-tech company, having good knowledge of fashion and how the industry works can help a lot.
When it comes to educating yourself in the skill set, you need to find material and resources that take you further than UX itself. You need to find elements of the CX (customer experience) process, such as the CES (customer effort score) which allows designers to get quick feedback for the product’s UX as well.
CES on a clothing website
Things don’t end here, of course. Creative companies are looking for even more creative people. So, if at one end you’re great at solving business problems, being equally creative has become a must for the job. Apart from the science behind how a user uses a product, it is equally valuable to know how to “wow” the user with the creative aspects of the product. Adding delight is the best way I could describe this phenomenon.
I still remember when I started practising UX design for the first time. We were inspired to have tunnel vision and focus solely on UX research, testing, design, and most importantly — empathy.
Since I’m creative, sticking to just one skill sounded and felt absurd. So while I became better in my UX design process, I started garnering skills that made sense to my career. This included content creation, No-code, and even niches like motion design. While invisible to everyone else, I was proud of everything I learnt.
My biggest mistake at the time was not marketing these skills to recruiters and clients. The moment I fixed that, my career started moving forward. I became even more valuable as an asset to the companies I worked with, and they appreciated what I was truly bringing to the table. Some of my seniors asked me to teach the other designers in the company. This gave me a sense of confidence I never had before.
In 2024, parallel skills have become more crucial than ever. Organisations appreciate them more than ever and understand how these skills can affect your output. Since the bigger-ups have tried every trick in the book, they’re looking for new ways to solve problems. This makes them open to new ideas and ways of doing things, which makes it a win-win for the design industry.
Clients want studios to package in UX design, graphics, marketing, development, and more in to one service.
As an educator and entrepreneur, I’ve been in constant touch with design studios all across the country. Over time, I’ve started to notice patters and understanding the real story behind these creative companies. As one would think, it isn’t all gold and roses.
Studios have had to create a “hybrid” work culture, where designers are taking up tasks they never thought they would have to do. This change comes with the changing demand of clients that these studios are facing. Clients want studios to package UX design, graphics, marketing, development, and more into one service.
The navigation bar of a popular design studio
Due to various changes, there is a huge space in the service and creative agency space. If you’re an open-minded designer with various skills you don’t mind using them to help the company, there is always a space for you. The whole notion of, “I only want to focus and grow as a UX designer” needs to go out the window when you need better opportunities. Take this advice of mine with a huge pinch of salt. The same path won’t work for everyone. Find and research opportunities based on your boundaries, preferences and wants.
Physical Spaces Over Online Connections
People have always craved physical connections and socialization over online networks and video calls. Being able to shake hands, share laughter, be present, and exchange business cards can never be replaced.
Every month companies are organising some incredible meetups, designathons, and networking sessions in almost every metro city in the world. Some cool communities you can follow are — Friends of Figma, Designwings Events, and a few more who are doing such work consistently. I have met some incredible people to work with and even found freelance opportunities at some of them.
These events pose a great platform to get real time feedback on your ideas, pitch your business, or even get help from like-minded individuals.
An Objective Look At The Confusing Job Market
A couple of years ago, the job market in the design space wasn’t exactly booming. This was thanks to the taboo against creative careers, especially in families with little to no knowledge about such fields. However, in a vast landscape, even the smallest amount of demand was good enough for the low supply of employees.
Now, the world demands more designers, with a crazy saturation when it comes to options these companies have. One observation I’ve made, is the existence of fewer quality creatives in this large crowd. Smart recruiters are always looking for some red flags while giving equal importance to some green ones.
Some red flags to work on / improve:
Talking too much about tools and software instead of problem-solving methods.
Having scarce knowledge of corporate culture and how it fits with design.
Considering your income as a major or only motivation to work.
Being less social — either online or offline.
Having few or no creative outlets apart from your job.
Lacking in communication and presentation skills.
Some green flags to showcase and promote:
Additional skills that might bring value to the company or team.
Certificates and proof of learning that show you have hunger to grow.
Sharing your design or creative work online for everyone to see and admire.
A special personality trait that can affect your work in a positive sense.
Network and connections that you may have.
Contributions to the community in the form of mentorship, resources, content, etc.
Ambitious future plans and goals.
A.I. Is Making Jobs & Opening New Doors
You expected this article to have a “AI is going to take your job” section, but you were pleasantly surprised to see a unique take on it.
In the crowd of people putting AI down and wanting some regulations, I’m trying to stay optimistic. Don’t get me wrong, governing bodies restricting the use of AI to save jobs is a great way to go about it. In the meantime however, how can one use this technology to upgrade one’s career?
To begin with, I came across this job-post on LinkedIn that sort of blew my mind.
A job post from a major ed-tech company
A fun tool that seemed to threaten creative jobs a few months ago, started creating a demand for specialists that could use the tool well. Most of these A.I. designers are going to work closely with graphic designers and leaders to provide them with necessary assets. Custom images for marketing material is a great example.
Unfortunately, it isn’t all flower petals and blue oceans. A.I. has arrived as a major challenge for designers. We might have to justify our roles in the coming years if it keeps on proceeding like this. Push comes to shove, this new era of AI could nudge us to be better and bring more value to the table, which from my perspective is a big plus.
Are We All Just Product Managers Now?
Like it or not, design is not just design any more. In fact, UX design is a plethora of skills that helps improve the overall product. Whether it includes user research, market analysis, or product strategy, nothing is truly off limits. In fact, being closely involved with product managers is now encouraged and looked up at. These two professions are so closely stitched together that designers start becoming passionate about this new career path and often want to switch.
I often question why these are two completely separate professions. Where one is focused on the business and product vision, the other focuses on the creative and user aspect of the product. This difference becomes even slimmer when UX designers pivot into product design. They start balancing both these roles for the benefit of the company.
This concept is full of clues of where UX design is headed to. You can see where professionals are pivoting to and where companies are focusing. With the state of the changing economy, and shift in tech, UX design could do with a new coat of paint. The question still lies, where is UX truly headed, and what will designers make of it?
Design is Passion Based & Interest Driven
I started off as a photographer, jumped into web design, deviated into UX design and pivoted into entrepreneurship. I’ve come across thousands of UX designers during my educational journey, and one reality always struck me. They rarely stay in one place for a long time. In fact, some of my peers say they were always open to new ideas and wanted to explore something new every 2 years or so.
Off lately, AR/VR has erupted a new desire in designers to learn and switch. “Where do we find AR/VR design jobs? What are the tasks we would need to do? How do we learn to design for AR/VR”. These are just some questions that designers at different professional levels are asking.
This is a really cool revalation, since it reveals an interesting reality of UX designers. We are all techies! We use software. We create for new and cool hardware. We are unintentioanlly sucked into the tech and nerd iceberg.
As tech has been progressing in various different directions, we have the option to go in any direction as well. Whether it is AR/VR, folding screens, transparent displays, artificial intelligence, digital payments, software and hardware innovations, or anything revolving around tech; UX is driven by an individual’s interest in a certain field or industry.
The more confident we are of our skills, the easier it will be for us to shift and explore all at once.
Is UI Design Over Because of AI?
Uizard AI Design Tool
Let’s face facts, companies understand that A.I. is a strong keyword they can use to promote their product. Because of this new evolution, almost every design tool has A.I. features as a part of their offering. You would also see some UI design tools powered by A.I., where you type in a prompt explaining your project and get editable screens in return.
While this process might seem threatening to a UI designer’s career, this is more of a wake up call for creatives. UI designers for a long time have stuck to the skills they learnt earlier, and seldom get into UX design. Now, they willl surely have to expanding their skillset to provide more services and improve their designs. Just UI designing isn’t going to cut it anymore.
To put the argument of A.I. taking over jobs to rest, these can actively be wireframing and ideating tools. Getting to the final production design is going to be much faster. If we look at this from a positive perspective, A.I. will allow designers to focus more on problem solving, research, and creativity, instead of the day-to-day mundane tasks.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
NextSpace is a professionally designed Framer template specifically created for businesses in the interior design and architecture, renovation, and building industries—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Today, we’re thrilled to share the story of our team at desh.team as we developed an online course platform for ClassPulse University. This innovative learning hub offers access to a diverse range of courses and materials designed for those eager to enhance their skills and take their careers to new heights.
Our project was brought to life by a global team of educators, tech innovators, and lifelong learners. Together, we share a deep-seated belief that continuous learning is the key to unlocking success and fostering career growth.
In today’s feature, we’ll spotlight our collaborative efforts in web design and graphic design.
Let’s dive in!
Web site
Ensuring your website reflects your essence in the best possible light is paramount. It’s about standing out amidst competition and offering your visitors an experience that’s both personal and distinctive.
By blending visually captivating design elements, intuitive navigation, and engaging content, we craft websites that immediately captivate visitors. It goes beyond mere aesthetics; it’s about delivering a tailored and unique encounter that resonates with your potential clientele.
Working closely with clients who possess a deep understanding of their audience and desires, we meticulously analyze the current user experience and competitors. Through collaborative efforts between our creative team and the clients, we develop a platform aligned with user goals and desires.
Our design philosophy was straightforward: simplicity and modernity. We focused on minimalist designs to highlight key information without overwhelming users.
Design system foundations
Establishing solid foundations is crucial for crafting simple and engaging end-to-end user experiences. This is achieved through maintaining consistency in text, spacing, color, and shape.
Our color scheme aims for strong contrast and modernity, blending dark tones with bright, cheerful accents of yellow and blue for an impactful visual impression. Colors serve as a conduit for consistent interactions with products and should be utilized to provide contextual cues, expressing hierarchy and status.
Typography plays a vital role, selected for its readability and friendly aesthetics, creating a modern and inviting space for students. The chosen font’s open shapes lend themselves well to both body text and headings, ensuring clarity across all content.
When it comes to form, elements with rounded corners exude a sense of sophistication compared to sharp, rectangular shapes, adding to the overall sleek design.
A bright and airy home page layout enables effective integration of various types of content. This includes a comprehensive list of all courses, strategically utilizing accent colors to highlight the most popular ones. Additionally, showcasing students’ progress in their studies serves to boost motivation.
We’ve gathered all essential student indicators and structured them into a clear and intuitive dashboard. This ensures that users can effortlessly process information without experiencing cognitive overload.
A robust visual hierarchy allows website visitors to quickly browse and scan pages, seamlessly moving from one section to another and immersing themselves in the service’s functionality and benefits for teachers and students.
Thanks to our design system, which incorporates consistent card forms, rounded edges, and recurring patterns, we’ve not only achieved uniformity across all pages but also cultivated a distinctive appearance. This curled aesthetic is particularly significant for our target audience, enhancing brand uniqueness and recognition while showcasing the company’s technological prowess.
Let’s delve deeper into how the grid functions across various pages.
In a survey of 115 users regarding their preferred device mode, approximately one-third favored dark mode, another third opted for light mode, and the remaining third utilized a combination of both. Hence, we decided on a dark theme because it:
Alleviates eye strain
Conserves battery life
Offers aesthetic appeal
Enhances accessibility for individuals with visual impairments, such as cataracts
One of our most frequented pages is the lesson page, where we’ve revamped the structure to incorporate all essential features for the user’s convenience. This includes headers, breadcrumbs for seamless navigation, lesson-titled videos, and the ability to switch between lessons directly on the page. We’ve also implemented progress tracking across all lessons, ensuring users always know where they stand in their learning journey, supported by visual indicators.
As an additional feature, we’ve integrated a chat function with the teacher. This allows users to ask questions promptly as they arise, fostering a sense of engagement and involvement in the learning process.
The user’s profile is a comprehensive hub housing all pertinent information regarding study progress, statistics, and a calendar feature ensuring users stay on top of their study plan and never miss a class. Personalization is key, empowering users to tailor their schedules within the calendar if they’ve opted for flexible training options, as well as customize their profile settings.
Moreover, the left side menu offers swift access and seamless navigation across the platform, ensuring users can effortlessly explore and utilize its features.
Ensuring accessibility and ease of use for learners everywhere posed a significant challenge, leading us to develop a mobile version of the platform. Recognizing the prevalence of mobile usage among younger generations, offering a mobile application enhances the platform’s appeal and accessibility.
Furthermore, mobile versions are designed to adapt seamlessly to various screen sizes and device capabilities, ensuring a consistent user experience regardless of the device being used. This approach not only enhances accessibility but also ensures a smooth and engaging learning journey for all users.
In our team, we believe in tackling each challenge comprehensively, fully immersing ourselves in the client’s objectives. In addition to the primary task of designing the platform, we took it a step further by creating a new logo and branding. This approach ensures that every aspect of the project aligns seamlessly, from visual aesthetics to brand identity, resulting in a cohesive and impactful solution for our clients.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Introducing Slice — the sleek template made for your Real Estate venture. Elevate your business with a visually stunning and conversion-optimised design, made for forward-thinking Real Estate Innovators.
AI Text Generator is a super handy Figma plug-in made for designers who want to rewrite their text in a couple of clicks. It uses OpenAI GPT-4 to give you smart, creative text suggestions — think names, titles, or even Lorem Ipsum dummy text — right where you need them.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Advanced Figma features can save designers hours of work. If you’re still dragging your cursor to the top corner of the screen to create sections or manually locking layers one by one, this article is definitely for you. We’ve compiled new Figma functionalities and old methods — perhaps you’ve missed something?
Multi-edit variants
Figma has just launched a new multi-edit feature for variants, making component editing a breeze. Just pick a variant or a nested layer and use Multi-edit variants in the toolbar, or press Q on your keyboard (remember not to press cmd+Q on Mac!). In multi-edit mode, changes to one variant, like text, icons, or size adjustments, automatically update all variants in the component group.
Select matching objects
Editing matching objects in a section is now as easy as editing components! Just select an object within a frame or group at the top level of the canvas or inside a section. Then, click “Select matching layers” in the top toolbar or use the shortcut: ⌥ Option + ⌘ Cmd + A for Mac; Alt + Ctrl + A for Windows. All selected objects will be surrounded by a blue bounding box, allowing you to edit them collectively.
💡 Tip: You can preview matching objects before selecting them by pressing Shift while selecting one element. Additionally, you can manually select them while holding Shift, eliminating the need to double-click deeply nested objects within groups or frames.
Hold and slide to hide or lock layers
It turns out, that to lock/unlock multiple layers, you don’t have to click on each one individually. We can lock one layer and then drag it with the mouse key held down across the layers list to apply this action to other layers. It’s also working for hiding layers.
Copy and paste properties between layers
You can easily copy fill, stroke, and text properties between layers using the right-click menu or keyboard shortcuts.
On Windows: Copy properties — Ctrl + Alt + C; Paste properties — Ctrl + Alt + V.
💡 Tip: You can copy only the fill property if it’s not a style or variable. Simply left-click on the fill property and then use cmd+c/cmd+v on Mac or ctrl+c/ctrl+v on Windows to paste it onto the selected layer.
Rename layers in bulk
Correctly naming layers is crucial for quickly identifying their purpose and locating specific objects or groups within a Figma file, especially when collaborating with other designers. Aligning layer names with actual code can enhance communication between designers and developers, catering to the team’s needs and ensuring smoother workflow integration. If you didn’t assign the correct names to layers when initially creating them, editing them later can become quite challenging. However, Figma’s tools significantly simplify this task.
To open the “Rename layers” modal, select the desired layers, then use the following keyboard shortcuts:
On Mac: ⌘ Cmd + R
On Windows: Ctrl + R
Alternatively, right-click on the layers in the panel and choose “Rename”.
From this window, you can rename all the selected layers at the same time.
If you already have a unique name for layers but want to include additional suffixes or prefixes in the layer names, you can simply attach them to the existing name, as shown below:
You can also delete or modify existing parts of the name. The “Match” field enables you to specify which portion of the layer’s name you wish to modify.
Leaving this field blank allows you to alter the entire name. However, you can also use it to delete or modify specific parts of the layer’s name.
To do this, enter the part of the name you want to replace in the “Match” field, and in the “Rename to” field, enter what you want to replace this part with or leave it blank to delete. The other part of the name not specified in the “Match” field will remain unchanged.
Use Tab to autocorrect typos
Spell check finds and corrects spelling mistakes. It displays red squiggly lines under errors while you’re editing text. If you spot a mistake, simply select the word and press Tab to fix it with the first suggestion from the spell checklist. Our designers think Figma’s spell check could be better, but we hope they improve it in future updates.
💡 Tip: if you often find yourself distracted by the error highlights, you can disable them in the Figma > Text > Spell Check menu.
Use math inside Figma fields
Mathematical expressions on Figma are the functions we can’t work without. It’s a feature that (almost) everyone knows about. But it’s worth reminding, especially for those still reaching for their phone calculator to figure out element widths. All numeric values in Figma’s sidebar can be calculated on the fly. You can apply addition, subtraction, division, and multiplication right in the input field. That’s how simple it is!
Align like a pro
We find it challenging to remember all the alignment shortcuts, especially now that auto-layouts have reduced their usage significantly. Nonetheless, try to rely heavily on shortcuts for distributing vertical and horizontal spacing.
💡 Tip: Figma’s tooltips show shortcuts when you hover over alignment settings in the sidebar, which is handy if you forget.
Variables bulk edit
Before discovering how to bulk edit variables, it was challenging. Attempting to select them using “Shift” only opened the menu for one variable when clicking “Edit,” which seemed like a mistake on Figma’s part. However, right-clicking on a variable revealed the option for bulk actions.
Collapse nested layers
When working with projects with lots of nesting, open layers can be frustrating. Fortunately, Figma has a solution. Just hold down the “Option” key while collapsing layers in the side menu to collapse all nested layers with one click. And for expanding, it’s the same trick — hold down “Option” to open all nested groups and frames.
Finale Note
These are just a few tips to get you started. Figma offers a wealth of features to streamline your design process. Keep exploring and experimenting to discover your own favorite time-saving tricks! For even more advanced techniques, consider exploring resources on Figma plugins and the Figma Community.
Sometimes, even the tiniest details can save hours in project development (not to mention a few nerve cells of a perfectionist, like when collapsing layers). So, be sure to try incorporating at least a few of these tips into your workflow and see how it enhances your experience. Share in the comments which tip you found most helpful or unexpected, and don’t hesitate to share your own Figma feature discoveries as well.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Upgrade your workflow with Tomorrow, the premium Framer template. With its modern design, customization options, and powerful components, Tomorrow is the perfect tool to enhance your projects. Experience the best with Tomorrow
Step into a world of limitless creativity with this feature-rich Framer Studio template. From sleek interfaces to interactive marvels, Nexus empowers designers to sculpt their visions into reality with unparalleled
Combine all your feedback sources into a system of record. Get closer to your customers and build the habit of listening to them. Analyze and act on feedback to improve your product and customer experience
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
When searching for resources on UX and AI, I found it surprisingly difficult to find any writing beyond advice and software to make the design process more efficient. While efficiency tips are valuable — don’t get me wrong- my deeper interest lies in understanding how designing with and for AI systems will shape the very foundations of UX.
After doing some research and taking a very useful course pitched for developers and not designers: “UX for AI: Design Practices for AI Developers”, I wanted to share my findings, stripping away the jargon and technical terminology that often excludes designers from the conversation.
I’d like to point out that my insights are driven by curiosity, not expertise. Yet, what I do think is evident is that there is a growing need for designers to work more closely with AI engineers and AI itself. Such collaboration is key to keeping our products aligned with user needs, ensuring they continue to be both accessible and impactful.
Designing for uncertainty
Traditionally, UX design has been about creating predictable, reliable products, where specific actions lead to expected outcomes. A product should be consistent — this is a design principle that ensures that users can navigate products with expectations and ease. In the design process itself, we meticulously map out all possibilities in user flows (A-B) and prototypes to design products that are predefined.
However, AI introduces an element of unpredictability, challenging us to design for variable outcomes. With AI, particularly when dealing with sophisticated language models (like ChatGPT), the same input can lead to multiple outputs, and there are infinite inputs. John Maeda, VP of Design and AI at Microsoft, does a really good job of explaining this shift. So how do we design for the unpredictable?
In this new context, designers are tasked with embracing an adaptive design, one that responds to AI’s fluidity in the same way that responsive design responds to different screen sizes. This adaptation will mean dynamic interfaces that can intelligently respond to AI’s unpredictable outputs — probably using AI themselves. We will no longer be designing for fixed pathways but a landscape where user flows are fluid and outcomes unknown. This transition is paradoxical: As the role of AI grows, maintaining consistency in design becomes both increasingly critical and complex. We are challenged to redefine our strategies, ensuring that despite the unpredictability of AI, the principle of consistency remains at the heart of user-centred design.
Over the past three decades, the goal has been to establish absolute trust in technology; it has been a long game and in no way a smooth journey. However, AI has meant absolute trust might be counterproductive. The uncertainty and potential errors within AI systems, especially at the fringes of their capabilities, demands an “appropriate trust” (this is one of the modules in John Maeda’s course), an understanding that encourages users to maintain a critical perspective on AI’s abilities.
The current state of user trust in AI is diverse and complex. While some individuals readily integrate AI into their lives without hesitation, others approach it with caution or even fear. Achieving the delicate balance of healthy scepticism and recognition of its value is essential for developing “appropriate trust” and remains a significant challenge for designers.
In sociology, trust is based on the expectation that the trustee (the AI system) will act in a manner beneficial to the trustor (the user). Honesty and reliability form the bedrock of this relationship. Therefore, while reliability cannot be guaranteed (due to the unpredictability of AI), ensuring honesty is essential. Products need to be transparent, with their capabilities and limitations clearly laid out for everyone to see. Designers play a key role in delineating the boundaries of AI abilities and working to demystify AI to ensure this appropriate level of trust is met.
Introducing Thoughtful Friction
“Usability,” characterised by the ease with which tasks can be completed, remains a fundamental principle in UX design, where the reduction of friction is typically the overarching goal. However, when fostering “appropriate trust”, introducing deliberate friction can prompt users to reflect before taking actions, improving the precision and effectiveness of their outcomes. When usability is so seamless that users are not even aware of their actions they enter an “auto-pilot” mode, devoid of conscious decision-making. This is the time when you unknowingly commit to choices, agree to terms or share misinformation with your thousands of Instagram followers. Given AI’s capacity to further streamline tasks, it’s ever more important that we thoughtfully design friction into the user experience.
For some designers, introducing friction is not alien and has been a way to create an immersive experience, much like ‘The Ikea Effect’. The idea here is keeping the user more engaged. Although our primary aim might not be to create immersion per se, our objective aligns with it: to heighten user engagement, ensuring they are alert and can identify when AI does not meet expected standards. Appnova explores 5 simple ways friction can be a game-changer in design, from preventing bad decisions to giving user responsibility.
Some ways in which we can create friction for a more engaged experience include AI notices and prompts. Here, AI notices refer to the use of visual cues or contextual signals that indicate AI-generated content, prompting users to review AI outputs. This simple moment of reflection can have a big impact.
Striking a balance between seamless interactions and intentional friction is key for creating user experiences that are both intuitive and impactful. Monitoring this balance, gathering user feedback, and analysing time spent interacting with the product are important steps to iteratively refine, design and sustain this balance.
Usability Testing Reimagined
With AI’s inherent variability, usability testing can no longer follow task completion and assessment at key points in the design process. By using AI in the usability testing process, we are able to address the need for ongoing, adaptive testing that can be integrated into the product itself. This more continuous refinement, reflecting the principles of iterative, user-centred design, is what usability testing has always wanted to be.
Where does the future of UI sit within this? It seems like there may be a trend towards an interface-less design, influenced by not just AI but also the advancements in voice interaction. This presents a new challenge for designers — particularly for those who thrive on visual creativity (me!). With AI, it is likely that even less of the interface is needed because a single function can serve far more wide purposes. Or perhaps it doesn’t mean no interface, but the nature of the interface will dramatically change in favour of VR/AR — or perhaps brain-computed interfaces?! Alex Jewell gives a very interesting, if not a little scary, discussion on what the end of the interface will look like. He does suggest that there will still be a place for designers but it will be more strategic and less aesthetic. It almost seems paradoxical that as what’s going on under the hood is becoming more complex, what’s on the outside shrinks away.
The Future of Collaborative UX
Our discussion has only scratched the surface of how AI will change our design thinking. I am in no way an expert on this topic and in early stages of exploring AI and UX integration, but one opinion stands firm: UX needs to evolve into a more collaborative discipline. Microsoft coined the term ‘Collaborative UX’, where designers work more closely with AI engineers but also in collaboration with AI itself. We need to shift away from our siloed, compartmentalised workflows, where designers and developers have distinct roles and processes, towards a more unified, collaborative process. In this new model, designers are important at every stage of development. For instance, their involvement is critical in training the models and designing the system architecture, since these elements are fundamental in shaping the delivered user experience. Likewise, incorporating feedback mechanisms directly into products requires designer input to understand what data and feedback is needed to drive future product changes.
We need to start to also see AI as a co-creator — or perhaps better a co-pilot. We need to ensure that we are strategic in our use of these systems, prioritising design thinking and principles so that AI enhances rather than dictates the user experience. In this collaboration, there is the potential to design more responsive experiences that support rather than overshadow human creativity.
For us as designers, mastering AI is essential, recognising it as a core component of our design toolkit that enhances efficiency and precision. While AI transforms how we design, the user remains our core priority — and that, I believe, will never change.
Article Written by Letitia Rohaise (letitiarohaise.co.uk). Product Designer with a Masters’ in Psychology. Letitia is an advocate for integrating cultural psychology into design, ensuring products are meaningful and accessible across diverse cultural contexts.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Empower your AI startup with ApexPro — a sleek, original website template designed for success. Elevate your brand and captivate investors effortlessly
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Nairo is designed to showcase and elevate your projects to new heights, Whether you’re a seasoned professional or a budding enthusiast, Nairo’s intuitive interface empowers you to express your unique vision with unparalleled ease—
Introducing Mobit — a sleek and modern Framer website landing page template tailored for Software & Mobile App businesses. This premium template offers a trendy and visually stunning design, perfect for showcasing your cutting-edge products and services. With 10 ready-to-use pages, Mobit provides a comprehensive solution for creating a captivating online presence—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Digistar is a versatile and intuitive online courses launcher website that enables you to manage and monetize your online courses in a convenient and effective way
Mailify, the ultimate Framer SaaS template to showcase any SaaS related to cold email outreach, email marketing, lead generation or automation. Unlock the potential to captivate, engage, and convert your audience like never before
Build web forms that stand out with custom UX and UI, without coding. The Weavely form builder enables you to design and publish forms directly in Figma. Get creative with form design, apply conditional logic and reuse brand assets to collect more responses
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Embarking on the road to becoming a UX/UI designer, one quickly discovers that the journey predominantly pivots around the presentation and quality of one’s design portfolio. It serves as your primary interface with prospective employers or clients, allowing you to exhibit your talents, showcase your design approach, and reflect your unique personality. This article seeks to provide comprehensive guidance on how to curate a portfolio that is technically robust, aesthetically captivating, and aligned with your career goals.
1. Defining Your Design Portfolio Goals
As with any journey you embark on, the one to curating your UX/UI design portfolio starts with defining your objectives. These are not merely statements of your desires but powerful driving forces that shape your portfolio and provide it with a unique direction. Appropriately identifying your portfolio’s goals can be an exciting exploration of your profession and the aspirations you hold for the future.
The purpose behind developing a portfolio can range from seeking employment to simply showcasing a broad range of skills. Each goal subtly dictates the content, layout, style, and organized arrangement of your design portfolio. As such, it is vital to begin your portfolio journey with strong self-awareness and a clear definition of these aspirations.
When targeting a specific job or company, every element of your portfolio needs to echo the ethos and expectations of such an organization. It’s about demonstrating how your abilities, expertise, and experiences are particularly suited for their requirements. Analyze the organization, understand their needs, and articulate these insights into your portfolio.
Alternatively, your portfolio’s objective could focus on a certain industry or market segment. This approach demands showcasing your adaptability to meet the challenges and grasp the nuances of this industry. It’s like speaking the industry’s language in design, encapsulating its demands, its evolution, and its future in the form of visual aesthetics and usability elements.
Lastly, it could very well be that you wish to feature a broad skill-set, seeking to attract diverse opportunities. In such cases, the goal is to display versatility. Your portfolio feels like a world tour, where each origination–each project–represents a different set of skills, addressing unique challenges but together weaving a coherent narrative of your abilities.
Among all these tangible objectives, one critical element overshadows them all, authenticity. Regardless of your portfolio’s goal, it should genuinely signify who you are as a designer. The need for it to resonate your stylistic tendencies, your design philosophy, and essentially reflecting your professional DNA cannot be overemphasized.
Defining your portfolio goals might appear simple, but involves a deep dive into your capabilities, desires, and the target audience. Once done rightly, however, it’s like setting down the foundation for your dream house. It sets the base for your portfolio, lending it a lucid narrative, and giving you a clear roadmap to follow. Remember, your design portfolio isn’t just a collection of your works, it’s your brand, your story.
2. Harmonizing Layout & Content
As a UX/UI designer, the essence of your work lies in shaping a harmonious relationship between aesthetics and functionality. Consequently, your design portfolio should be a testament to this very ethos. Its appearance, in terms of layout and overall design, can be immensely influential, often as significant as the projects it comprises.
A substandard or convoluted portfolio design can serve as a significant distraction, potentially drawing attention away from the high-quality work samples it contains. Viewers, particularly potential employers and clients, could get lost amid a cluttered layout or imbalanced color schemes. Such a distraction not only diminishes appreciation for your projects but could also inadvertently reflect on your design sensibilities.
Maintaining a clean and engaging layout is fundamental. It’s about optimizing content placement and negative space, ensuring a natural flow of information that guides viewers through your work, allowing them to fully grasp your expertise and innovative concepts. This requires a sensible selection of fonts and colors, astute understanding of hierarchy in design elements, and a fine balance between text and visuals.
A crucial aspect to remember is that your portfolio’s design must resonate with your individual style. Your layout and your design elements, in their totality, should paint an authentic picture of who you are as a designer, acting as a mirror to your design philosophy. This distinctive style reflection, when embedded across your portfolio, ensures consistency and forms an integral part your personal brand.
Moreover, incorporating unique visual elements that stand out, adds a layer of intrigue and creates a memorable impression. These could range from interactive elements, original graphics, to even the use of transitions and animations. Each of these details, although may seem minor in isolation, collectively help make your portfolio not just another webpage but an engrossing visual experience representative of you, setting you apart in the sea of designers.
The key lies in creating harmony between all these elements — a seamless blend of eye-catching design, clear organization, engaging content, and unique, memorable elements, that together present an impressive face to your portfolio. With judicious planning and thoughtful design, your portfolio can become a true extension of your capabilities, visually compelling and functionally uncompromised.
3. Choose the right projects
Curating Excellence: Strategically Selecting Projects for your Design Portfolio
One of the crucial undertakings when creating a UX/UI design portfolio is meticulously choosing the projects that will be displayed. This process is not merely about showcasing your most aesthetically appealing works but strategically selecting projects that align with and accentuate your portfolio goals.
The principle of ‘Quality over Quantity’ is significant but should be augmented by the concept of ‘Relevance over Range’. If your portfolio goal is to secure employment with a tech giant, your best fashion industry project may not be the right fit despite its outstanding design. Similarly, if your objective is to cater to the B2B market, your B2C projects, even though executed impressively, might not resonate as effectively with your target audience.
The selection of projects essentially becomes a judicious exercise in understanding your target audience and aligning your display to meet their interests and needs. In this case, featuring more of the relevant B2B projects would provide a closer demonstration of how you tackle design problems typical to their industry.
This doesn’t mean you disregard your other exceptional projects. The goal is to craft a balanced showcase which prominently features projects that are highly aligned with your target, while still exhibiting your range. This helps you come across as a specialist in their area without being pigeonholed into one type of project.
If you are in the early stages of your career and feel that your relevant ‘real-world’ projects are limited, remember that your personal or academic projects can also be strategically tailored. These projects often provide the creative freedom to explore areas of interest and can be structured to demonstrate the skills and thinking a specific audience appreciates.
Ultimately, it’s important to remember that irrespective of the relevance, each project needs to vividly illustrate your design process, empathetic understanding of users, and the impact of your design solutions. Each chosen project is an opportunity to demonstrate the unique value you bring as a UX/UI designer.
Never underestimate the power of strategic curation. A thoughtfully curated portfolio that resonates with your target audience can serve as a compelling narrative of your potential and ensure you leave a lasting impression.
4. Optimizing Your Project Page
The structure of each project in your portfolio functions as the backbone to your narrative, setting the stage for an engaging showcase of your abilities. The right structure enables your portfolio to navigate beyond aesthetics, diving into the depth of your work methodically.
The significance of captivating images in a portfolio’s project presentation is undeniable. They immediately draw attention and create a visual impact, providing an immediate appreciation of your design aesthetics. Yet, their power is amplified manifold when stacked onto a solid framework of textual context. This brings us to the 80/20 rule, in which 80% of your project is dedicated to compelling visuals, while the remaining 20% is a concise, informative narrative about the project.
The textual content offers a detailed breakdown of the project, letting viewers peek behind the design curtain. It’s about highlighting the context, the problem statement you were addressing, your understanding of the targeted user base, and the design strategy you adopted. It provides an opportunity for potential employers or clients to catch a glimpse of your cognitive journey from the initial idea to the final execution.
Moreover, for roles such as UX researchers or design thinkers, the textual explanation is paramount. These roles demand a comprehensive unveiling of your methodological know-how, strategy development, and the iterative process, detailing how you generate insights from user-research, sketch your ideas, prototype them, and validate solutions with users.
However, while meticulous detailing is vital, brevity has its own charm. An overly verbose explanation can easily bore the viewer. A well-written concise project description is worth its weight in gold. Break down the process into easily digestible elements, let the images do most of the talking, and let the words fill in for the missing gaps.
Infusing your personality into the project story could be the cherry on top. Adding a touch of your thought process, your moments of revelation, and your personal contributions can make the project narrative authentic and relatable.
A thoughtful project structure creates a user journey within your design portfolio, leading the viewer from intrigue to comprehension, and finally, admiration. There lies the power of an effective narrative — the ability to captivate your audience and ensure your work resonates long after they have left your portfolio behind.
5. Do Your Magic, Incorporate Unique Elements
As you embark on the journey of curating your UX/UI design portfolio, one aspect that holds paramount importance is authenticity. What truly sets apart an impressive portfolio from a good one is its ability to encapsulate the personality and unique design approach of the designer, beginning from broad brush strokes down to the minutest detail.
The addition of an ‘About Me’ section is an excellent opportunity to break the ice with your potential employers or clients. This is where you can express your design philosophy, your inspirations, your interests, preferences, even a sneak peek into your journey. The world of design is as much about creativity as it is about connection. A section that reveals a bit about your history, your ideals, your vision for designing, is a way to establish a bond with your prospective audience.
Furthermore, personalizing your portfolio isn’t limited only to textual content. Delve deep and think about how your design style, choice of colors, typography, and the overall aesthetic of your portfolio can reflect your personality and stylistic tendencies. Revisit everything. Do you like minimalism? Or, perhaps, abstract designs make your heart beat faster. Do you love balance? Or do you rather appreciate asymmetry? There’s no one-size-fits-all answer here. The key is ensuring that each decision aligns with and reflects your unique style and approach.
One often neglected section in the portfolio is the display of your process sketches, notes, wireframes, and design iterations. Outlining your process not only showcases your thoroughness and attention to detail but also encapsulates your problem-solving skills and design thinking. It’s a peek into your mind, your problem-solving techniques, strategy development, and your meticulousness — all of which contribute to your individuality as a designer.
Keep in mind, though, that striking a balance is vital. While personalization can make your portfolio memorable, an overly extravagant or self-focused portfolio can distract from your actual work. Aim for subtlety —
use personalization to enhance the impact of your work, not overshadow it.
6. Don’t forget to update
In the rapidly evolving realm of UX/UI design, continuous adaptation forms the keystone for staying relevant. As your skills expand and experiences intensify, your design portfolio must be attuned to this progression. As such, regularly updating your portfolio isn’t just recommended, it’s imperative.
However, before delving into the ‘why’, it’s essential to address a pre-emptive ‘how’. The efficiency of updating your portfolio can be significantly influenced by the platform you choose to build it on. Tools like Framer, Wix Studio or Webflow are not merely construction means, but play a crucial role in maintaining your portfolio. They offer tremendous flexibility and ease of use, allowing you to seamlessly add, remove, or modify content. This feature becomes crucial as you endeavour to keep your portfolio a dynamic reflection of your abilities and accomplishments.
Beyond merely displaying new creations, updating your portfolio is a conscientious curatorial effort. This involves careful evaluation and selection of projects that depict your present abilities and align with your evolving aspirations. Some aging projects may not bear the same relevance over time and could be candidates for elimination.
In addition, the fast-paced UX/UI design world is characterized by transient trends, both aesthetically and functionally. A Portfolio that evolves to encompass these changes is a testament to your adaptability and up-to-date knowledge, invaluable traits for any UX/UI designer.
Remember to weave in your recent accomplishments and newly acquired skills or accolades, adding further substance and credibility to your portfolio. Each such update serves as a chapter in your growth narrative, encapsulating your dedication and enriching your story.
Seeking and incorporating feedback is also a transformative aspect of portfolio updates. It fosters improvement through diverse perspectives, catching blind spots, and refining your viewer’s experience.
In summary, frequent portfolio updates signal your active and ongoing engagement within the industry. It keeps your portfolio fresh, relevant, and compelling, ensuring it creates an impactful first impression. By choosing a user-friendly and flexible platform for your portfolio, and scheduling regular revisions, you can ensure your design portfolio remains an authentic, dynamic reflection of your talent, dedication, and progress in the ever-evolving domain of UX/UI design.
In conclusion, creating an exceptional UX/UI design portfolio is a strategic and creative process. It requires defining clear goals, harmonizing layout with content, thoughtfully selecting and structuring projects, infusing personal touches, and regular updates. The perfect blend of these factors not only showcases your technical and artistic skills, but also conveys your unique brand. Above all, an effective portfolio resonates with authenticity, making your work resonate long after a viewer leaves your portfolio behind.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Introducing Web3Bit — Premium Multi-layout Framer Template for Blockchain& Web3 Website. Web3Bit is a modern Framer template packed with 4 Homepage variations & 18 complete pages tailored for blockchain, crypto and web3 businesses—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
How to choose the ultimate color palette for your next project
Understanding and utilizing colors to their full potential is no less than a science. One must navigate through color theory, the interplays of the color wheel, and the interpretations derived from color psychology while selecting the appropriate colors for a project. This comprehensive guide will provide in-depth insight into these components, helping you transform your project into a masterpiece.
Understanding Color Theory
Color theory is an amalgamation of art and science. It offers a conceptual structure for understanding color interaction and influences. A grasp of color theory is instrumental in designing and creating appealing color patterns.
The key elements of color theory include:
Primary Colors: Red, blue, and yellow from which all other colors are derived.
Secondary Colors: Formed by mixing equal parts of two primary colors like green (blue + yellow), orange (red + yellow), and purple (red + blue).
Tertiary Colors: These arise from the combination of primary and its adjacent secondary color, such as red-orange.
Complementary Colors: Colors positioned opposite each other on the color wheel. They contrast and make each other appear brighter, like red and green.
Analogous Colors: Colors positioned close on the color wheel, they form a harmonious scheme, like yellow, yellow-green, and green.
Exploring the Color Wheel
The color wheel is a color theory’s visual representation, that showcases a spectrum of colors arranged based on their chromatic correlations.
The facets of the color wheel are:
Standardization: The universal format presents 12 colors, inclusive of primary, secondary, and tertiary colors.
Color Mixing: Colors could be mixed to form different colors or shades and get a range of hues.
Diversification: Colors can be divided into warm (red to yellow) and cool colors (green to purple). Warm colors exude energy and cool colors convey calmness.
Monochromatic: This scheme utilises various shades and tints within a specific hue.
Through a better understanding of the color wheel, compelling and visually aesthetic color schemes can be crafted.
Unlocking Color Psychology
Color psychology is the study of how colors influence human behaviour and emotion. Each color can stir specific feelings and convey certain messages. Common associations include:
Red: Represents feelings like passion and love, excitement, or danger. It is bold and attention-grabbing.
Blue: Symbolizes serenity, reliability, and stability, rendering it ideal for professional establishments.
Yellow: Emanates positivity, happiness, and energy, but can also signify caution.
Green: Generally stands for growth, renewal, and calmness, and also signifying wealth.
Purple: Often linked to creativity, luxury, spirituality and magic.
Black: Signifies power, elegance, mystery and sophistication.
White: Stands for simplicity, purity, modernity and cleanliness.
Pink: Associated with romance, sweetness, affection and femininity.
Brown: Evokes warmth, earthiness, reliability and nature.
Orange: Represents enthusiasm, Optimism, creativity, and vitality.
By integrating color psychology, designers can use colors to manipulate emotions and behaviors subtly, enhancing the way users interact with a design.
Remember, these interpretations can vary based on cultural and individual differences; hence, stay aware of your target audience’s possible perceptions.
Tools for Creating Color Palettes
Among the plethora of resources to assist with creating color palettes, Muzli Colors stands out owing to its user-friendly interface. It allows for endless color combinations to help you find the perfect palette for your project. You can build your own color schemes or choose from a hoard of pre-generated palettes.
A newer addition to the color palette realm is the Muzli AI Color Combination Generator. It increases the precision and range of available combinations, adding innovation and variety to your design project.
Choosing the Right Color for Your Design
The selection process for coloring your project is highly subjective. It greatly depends on the product type and the target audience. The choice of color sends a psychological message; hence, consider choosing colors that represent your brand personality and impact your audience as envisaged.
Conclusion
The art of color selection is progressive, combining color theory principles, color psychology, and creative intuition to breathe life into your design. The chosen color scheme should not only represent the product harmoniously but also synergize with your brand’s personality and drive user engagement.
While this guide serves as a comprehensive manual to assist you in your color selection process, sea of creativity offers endless room for exploration. Remember, uniqueness and personal touch are key to standing out in the world of design. It is experimentation and the will to break the conventional that often lead to the conception of exceptionally successful designs. Your color choice journey, thus, does not end here. Continue to explore, experiment, and express, for the world of colors is vast an.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Looking for the freshest typography picks? Explore our brand-new guide: Best Free Google Fonts for 2026 , a curated update featuring the most inspiring, high-performing typefaces shaping design this year. Discover what’s new, what’s trending, and how to make your typography stand out in 2026.
Fonts play a crucial role in conveying the right message and setting the tone for your project. With an abundance of choices available, selecting the perfect font can be a challenging yet rewarding task. Google Fonts provides an extensive collection of free and popular fonts that cater to various design needs and styles. From elegant serif fonts to modern sans-serif options, Google Fonts offers something for everyone—Now, let’s delve into the most popular Google Fonts, each offering unique characteristics and suitable for different design applications:
Poppins is a versatile and modern sans-serif font that offers a clean and minimalist design. It is highly legible and suitable for various design projects, from websites to print materials, providing a contemporary and professional look to your typography—
Fraunces is a sophisticated and modern serif font that combines classic elegance with contemporary design elements. It is well-suited for headings, titles, and editorial content, adding a touch of luxury and refinement to your designs—
Roboto is a versatile sans-serif font that is widely used for its clean and modern look. It is ideal for both headings and body text, making it a popular choice for websites and digital projects—
Playfair Display is an elegant serif font with a classic and sophisticated feel. It works well for headings and titles, adding a touch of luxury to your designs—
Montserrat is a modern and geometric sans-serif font that is highly legible and versatile. It is perfect for a wide range of design projects, from posters to websites—
Anton is a bold and impactful sans-serif font that is great for making a statement. It is commonly used for headings and logos, adding a strong visual presence to your designs—
Description: Outfit is a modern and stylish sans-serif font with a sleek and minimalist look. It is suitable for a wide range of design projects, from websites to branding materials, providing a contemporary and professional appearance to your typography—
Inter is a versatile and neutral sans-serif font designed for readability in diverse languages and contexts. It is a reliable choice for UI design, web Interapplications, and editorial content, ensuring accessibility and legibility in various design projects—
Open Sans is a friendly and legible sans-serif font that is ideal for body text. It is easy to read on screens and print, making it a popular choice for websites and publications—
Description: Radley is a classic serif font with a timeless and elegant design. It is ideal for use in editorial content, such as books, magazines, and articles, adding a touch of sophistication and readability to the text—
Arimo is a clean and legible sans-serif font that is ideal for digital and print materials. It offers clarity and readability in small sizes, making it a reliable choice for UI design and editorial content—
Josefin Sans is a modern and stylish sans-serif font with a unique and contemporary look. It is suitable for both headings and body text, adding a touch of sophistication and elegance to your designs—
Merriweather is a classic serif font with a timeless and elegant look. It is well-suited for long passages of text, such as articles or books, adding a touch of sophistication to your content—
Lato is a versatile and modern sans-serif font that is widely used for its readability and clean design. It is suitable for a variety of design projects, providing a professional and contemporary look to your typography—
Tangerine is a stylish script font that exudes elegance and sophistication. It is perfect for adding a sense of refinement and luxury to your designs, particularly for headings and decorative purposes—
Lobster is a decorative script font with a playful and whimsical style. It is often used for logos and headlines, adding a touch of creativity and personality to your designs—
Pacifico is a casual and handwritten font that exudes a laid-back and friendly vibe. It is perfect for adding a touch of warmth and charm to your projects, such as invitations or banners—
Raleway is a sleek and modern sans-serif font with a geometric structure. It is suitable for a wide range of design applications, from headings to body text, providing a contemporary and professional look—
Dancing Script is a lively and flowing script font that is perfect for adding a touch of elegance and femininity to your designs. It is commonly used for invitations, cards, and branding materials—
Description: Unbounded is a decorative and artistic font perfect for logos, headlines, and creative projects, adding creativity and flair to your designs—
Baloo is a cheerful and playful font that adds a touch of fun and friendliness to your designs. It is ideal for logos, headlines, and creative projects, bringing personality and creativity to your typography—
Quicksand is a modern and geometric sans-serif font that offers a clean and minimalistic look. It is versatile and suitable for a wide range of design applications, providing a contemporary and professional aesthetic to your projects—
Oswald is a bold and impactful sans-serif font that commands attention. It is great for headlines, banners, and branding materials, adding a strong visual presence to your designs—
Hind is a versatile and elegant sans-serif font with a touch of sophistication. It is suitable for both body text and headlines, offering a clean and modern look that is perfect for various design projects—
Sacramento is a decorative and flowing script font that brings a touch of whimsy and charm to your designs. It is ideal for creative projects, such as invitations or branding materials—
Great Vibes is an elegant and cursive font that exudes a sense of luxury and sophistication. It is ideal for formal invitations, wedding stationery, and other upscale projects—
Italianno is a calligraphic and decorative font that adds a touch of old-world charm and elegance to your designs. It is perfect for creating a romantic and vintage look in your projects—
Tinos is a serif font with a distinctive and vintage-inspired style. It is well-suited for editorial content, such as magazines and books, adding a classic elegance to your typography—
Noto Sans is a versatile sans-serif font designed for readability in multiple languages and scripts. It is a reliable choice for UI design and web applications, ensuring accessibility and legibility in various contexts—
Source Sans Pro is a humanist sans-serif font that is clean, modern, and highly legible. It is suitable for a wide range of design projects, from websites to print materials, providing a contemporary and professional look—
Description: Besley is a versatile and clean sans-serif font designed for readability and clarity, making it suitable for UI design, web applications, and print materials—
Oxygen Mono is a monospaced font that is highly legible and functional. It is commonly used for coding and programming, providing a clear and organized layout for technical content—
Libre Baskerville is a classic and elegant serif font that offers a timeless and sophisticated look. It is ideal for long passages of text, such as articles and print materials, adding a touch of refinement to your content—
Crimson Text is a traditional serif font with a distinctive and vintage-inspired style. It is well-suited for books, magazines, and editorial content, adding a sense of classic elegance to your typography—
Old Standard TT is a classic serif font that exudes elegance and sophistication, reminiscent of traditional typography styles. It is particularly well-suited for long and complex texts, such as books or articles, adding a modern touch to classic designs—
Cambay is a sans-serif font with a simple and clean design. It is ideal for use within graphic elements and interfaces, providing a clean and modern look to your design projects—
—Each font selected for these categories offers unique characteristics that make it suitable for specific design elements and projects. Whether you are designing a website, creating a logo, or working on print materials, choosing the right font can enhance the overall look and feel of your design. Experiment with these popular Google Fonts to find the perfect match for your next design endeavor!
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Introducing AutomatePro — The All-in-One Framer Template for SaaS & Startup Businesses. AutomatePro provides everything you need to quickly build a professional, modern website for your SaaS or startup business
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Design Process Thinking is a human-centric approach to problem-solving that emphasizes understanding and empathizing with the needs and experiences of users. At its core, it involves a methodical series of steps aimed at identifying challenges from the perspective of the end user, generating innovative solutions, and iteratively testing and refining these solutions. This approach champions the idea that effective design is not just about aesthetics or functionality in isolation, but about creating solutions that resonate deeply with users, enhancing their lives in meaningful ways. By prioritizing empathy, collaboration, and iterative learning, Design Process Thinking empowers designers and innovators to tackle complex problems with a more inclusive, effective, and human-focused lens.
TL;DR
User needs research
Analyze observations
Ideate
Prototype
Test
…Iterate
Stage 1: Research Your Users’ Needs
Sometimes referred to as the “Empathize” stage, the User Research stage of Design Thinking marks the critical first step in a journey toward creating solutions that are not only innovative but also deeply rooted in real human needs and behaviors. This phase is characterized by user-centric research, where the goal is to step into the users’ shoes to gain a profound understanding of the problem at hand.
At this stage, designers and innovators engage in immersive observation to gather insights into the daily lives, challenges, and interactions of their target audience. Observing users in their natural environment is key, as it unveils the nuances of their experiences and the context in which they encounter problems. This observational process is not just about watching and noting but about seeing beyond the surface to understand the ‘why’ behind user actions and reactions.
Understanding experiences and motivations is another cornerstone of the User Research stage. Through interviews, surveys, and direct observation, designers begin to map out the emotional and practical landscape that shapes user behavior. This empathetic approach allows the team to capture the essence of users’ experiences, going beyond what is said to what is felt and lived.
A crucial discipline in this phase is setting aside one’s own assumptions. It’s easy for designers and problem-solvers to project their own biases and experiences onto the users they are designing for. However, the essence of user-centric research lies in acknowledging and suspending these preconceptions to truly listen and absorb the user’s perspective. This unbiased approach ensures that solutions are not just based on what designers think users need but are grounded in genuine user needs and desires.
By dedicating time and effort to the User Research stage, teams lay a solid foundation for the subsequent phases of the Design Thinking process. With a deep, empathetic understanding of the problem and the people it affects, designers are better equipped to ideate, prototype, and test solutions that genuinely resonate with users and address their real-world needs.
Stage 2: Analyze observations & define problems
In the Observation Analysis and Definition stage of the Design Thinking process, the focus shifts from gathering insights to distilling them into actionable and impactful directives. After immersing themselves in the user research phase, teams face the challenge of organizing the vast amount of information observed. This critical step involves sifting through user feedback, behaviors, and experiences to identify patterns and underlying themes. Such organization is not just about cataloging data but about making sense of it in a way that highlights the real issues users face, moving beyond surface-level observations to the root causes of their frustrations and needs.
With the data thoughtfully organized, the next task is to define the core problems. This isn’t about listing every minor issue encountered but about zeroing in on the most significant challenges that, if addressed, could dramatically improve the user experience. The art here lies in discerning the deeper issues beneath what users say and do, understanding that the most critical problems are often those not immediately visible. It’s a process that requires empathy, insight, and a willingness to look beyond the obvious to what truly matters to users.
The culmination of this effort is the formulation of a clear, human-centric problem statement. This statement is pivotal, acting as a beacon for all subsequent design efforts. It should articulate the core problems in a way that centers on the user’s experience, capturing the essence of what needs to be solved without dictating the form that solutions should take. Importantly, this problem statement is not about the goals of a product or service but rather about the human need or issue at its heart. It sets the stage for ideation by framing the problem in a way that is broad enough to invite creative exploration yet specific enough to ensure relevance and focus.
Ensuring that the problem definition is conducive to ideation is the final piece of the puzzle. The definition must be crafted in such a way that it opens up a space for brainstorming and innovation, inviting team members and stakeholders to think broadly about potential solutions. It should be presented in clear, accessible language that inspires and facilitates creative thinking. This approach not only makes it easier to generate a wide array of ideas but also ensures that the solutions developed are deeply aligned with the user’s needs and experiences. By navigating the complex journey from observation to a well-defined problem statement, teams lay the groundwork for designing solutions that are truly effective and human-centered, paving the way for real and meaningful innovation.
Stage 3: Ideation
Ideation is the stage in the Design Thinking process where creativity truly comes to the forefront. After delving deep into user research and defining clear, human-centric problem statements, teams are primed to generate a breadth of solutions that could address the core issues identified. This phase is characterized by its openness to exploration and the encouragement of innovative thinking, leveraging the insights and understandings developed during the earlier stages.
As teams embark on ideation, they often begin by revisiting the results of their observation analysis and definitions. This retrospective is crucial, as it ensures that all ideas generated are deeply rooted in the real needs and challenges of the users. With a solid understanding of the problem landscape fresh in their minds, teams are better equipped to think outside the box and propose truly innovative solutions.
To foster creativity, a variety of ideation techniques are employed. These might include brainstorming sessions, where the emphasis is on quantity over quality, encouraging participants to voice all ideas, no matter how outlandish they may seem. Other strategies, like sketching, mind mapping, or the use of scenarios, help in visualizing potential solutions and exploring different facets of the problems at hand. The goal of these techniques is to create a rich tapestry of possible solutions, drawing from the diverse perspectives and expertise within the team.
A key principle of the ideation stage is to generate as many ideas as possible at the outset. This approach is grounded in the belief that creativity is a numbers game; the more ideas put forth, the higher the chance of uncovering truly groundbreaking solutions. It’s a process that values breadth and diversity, encouraging participants to push beyond their initial thoughts and explore a wide array of potential solutions.
Once a substantial pool of ideas has been created, the next step is to sift through these and choose the best ones to move forward with. This selection process is critical and requires careful consideration. Teams evaluate ideas based on criteria such as feasibility, impact, and how well they address the user needs identified in the problem statement. This phase often involves robust discussions and debates, as the team collaborates to narrow down the options to those with the most potential.
By engaging in this iterative process of generating a broad array of ideas and then honing in on the most promising ones, teams are able to move forward with solutions that are not only creative and innovative but also deeply aligned with the needs of their users. The ideation stage is where possibilities are expanded, then refined, setting the stage for the prototyping and testing phases that follow.
Stage 4: Prototype
The Prototyping stage in the Design Thinking process is where concepts start to come to life. This phase is about translating the innovative ideas generated during the ideation stage into tangible, scaled-down versions of the product, service, or feature. The aim here is not to develop a finished product but to create prototypes that are inexpensive and quick to produce, enabling the team to explore how their ideas function in the real world.
Prototypes vary in their level of sophistication; they can range from simple mockups made from cardboard or paper to more interactive digital models. Regardless of the medium, the goal is to materialize concepts so that they can be shared, tested, and iterated upon. Initially, prototypes are often shared within the design team itself, allowing for quick feedback and adjustments. However, to gain broader insights, these prototypes are also tested with other departments or with a small group of people outside the design team. This external testing is crucial as it brings fresh perspectives and can uncover unforeseen issues or reactions.
Prototyping serves multiple purposes. Primarily, it helps to identify the best possible solution for each of the problems identified in earlier stages. By investigating how users interact with the prototypes, the team can accept, improve, or reject ideas based on their viability and effectiveness. This process of trial and error is invaluable, as it significantly reduces the risks associated with launching a new product or service.
Moreover, prototyping offers insights into the product’s limitations and the challenges it may face upon full-scale production and release. It’s a chance to preemptively solve problems and refine the design in a low-stakes environment. By observing real users as they engage with the prototype, the team gains a better understanding of how the product fits into the user’s life. This includes how users would behave, think, and feel when interacting with the end product, providing critical data that can inform further development.
Ultimately, the Prototyping stage is about learning and refinement. It gives designers and developers a clearer view of the product’s strengths and weaknesses, allowing them to make informed decisions about what features to keep, modify, or abandon. Through this iterative process of building, sharing, and testing, teams move closer to creating solutions that are not only innovative but also deeply resonant with the needs and expectations of their target audience.
Stage 5: Test your solutions
The Testing stage is where ideas, now embodied in high-fidelity prototypes, undergo rigorous evaluation to ensure they meet the users’ needs effectively. This phase is critical because it’s here that the team validates the assumptions and decisions made throughout the earlier stages, from understanding user needs to ideating and prototyping solutions.
The process begins by rigorously testing the complete product, incorporating the best solutions identified during the prototyping phase. This means exposing the product to real-world scenarios and users to observe its performance in the conditions it was designed for. The testing phase is comprehensive, assessing not just the functionality and usability of the product but also its appeal and value to the intended users. This can involve a variety of methods, including user testing sessions, beta releases, and pilot programs, depending on the nature of the product and the resources available.
An essential part of this stage is the collection of metrics. Metrics can range from quantitative data, such as completion rates for specific tasks or the number of errors encountered, to qualitative feedback, such as user satisfaction and ease of use. Collecting a broad spectrum of data is crucial for a thorough evaluation of the product. This data not only indicates whether the product meets its intended goals but also highlights areas that may require further refinement.
Analyzing the collected data is where insights are drawn and decisions are made. The analysis involves looking beyond the surface-level reactions to understand the underlying reasons for users’ responses. It’s about piecing together a comprehensive picture of the product’s performance, identifying patterns and outliers in the data. This step often requires a multidisciplinary approach, combining expertise from design, engineering, and business perspectives to ensure a balanced evaluation of the product.
The Testing stage is iterative, much like the rest of the Design Thinking process. Insights gained from testing can lead back to earlier stages, whether it’s revising the problem definition, generating new ideas, or modifying prototypes. This cyclical approach ensures that the product continues to evolve in response to user feedback, enhancing its relevance and effectiveness.
Ultimately, the goal of the Testing phase is to refine the product until it not only solves the user’s problems but does so in a way that is engaging, efficient, and enjoyable. By rigorously testing and analyzing the product against the needs and expectations of its users, teams can ensure that their solutions are not just viable but truly valuable to those they aim to serve.
Stage ∞: Iterate
The Iteration phase underscores a fundamental principle of Design Thinking: the process is inherently flexible and non-linear. While the stages of Design Thinking are often presented in a sequential order — Empathize, Define, Ideate, Prototype, and Test — the reality of applying these stages in practice is far more dynamic. This adaptability is crucial for fostering innovation and ensuring solutions truly meet user needs.
Iteration recognizes that the results from the Test stage, and indeed insights from any stage, may reveal new information that necessitates a return to previous steps. It is not uncommon for testing to uncover unexpected user behaviors or feedback that challenges initial assumptions. Such revelations are invaluable, as they provide a deeper understanding of the problem space or indicate new directions for solution development.
As a result, stages of the Design Thinking process might be switched, conducted concurrently, or repeated multiple times. For instance, prototyping might begin concurrently with ideation to rapidly explore a concept, or the definition stage might be revisited after prototyping reveals a misunderstanding of the user’s needs. This flexibility allows teams to respond quickly to new insights, adapting their approach to ensure the development of more effective and user-centric solutions.
Moreover, knowledge acquired in the latter stages of the process can significantly inform repeats of earlier stages. Insights gained during testing can lead to a reevaluation of the problem statement defined at the outset, or feedback on a prototype might spark new ideas that require further exploration. This cyclical process of learning and refining is a key strength of Design Thinking. It ensures that solutions are not only based on initial understandings but are continually refined to better meet user needs as those needs are understood more deeply.
Iteration is, therefore, not just a phase but a mindset that permeates the Design Thinking process. It embraces the understanding that designing effective solutions is an evolving journey rather than a linear path. By allowing for flexibility, concurrent activities, and repeated cycles, teams can navigate the complexities of user needs and technological possibilities, leading to solutions that are innovative, impactful, and deeply aligned with the human experience.
Summary
Design Thinking is a human-centric, iterative approach to problem-solving that prioritizes empathy, creativity, and iterative learning to develop solutions that deeply resonate with users.
The Design Thinking process is a powerful framework for tackling complex problems, characterized by its user-centric focus and iterative approach. By empathizing with users, defining problems clearly, generating innovative solutions, and continuously refining these solutions based on real-world feedback, teams can develop products and services that truly meet user needs and enhance their lives.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
We have compiled 6 web design ideas that are the ever-green starting point for every project. From innovative layouts to captivating color schemes, these ideas are designed to push the boundaries and enhance user experience.
Each idea is carefully curated to provide a fresh perspective and offer endless possibilities for your next project. Gain inspiration from modern, sleek designs that leave a lasting impression. Unleash your artistic side with bold typography and eye-catching visuals. Embrace minimalism or embrace vibrant designs that demand attention.
Whether you’re designing a website for an e-commerce store or a portfolio site, these ideas can be tailored to suit your specific needs. With each idea, we provide insights and tips on how to execute them effectively, helping you bring your vision to life. Get ready to let your creativity run wild and revolutionize the digital landscape with these inspiring web design ideas.
Minimalist Web Design Ideas
Less is more — that’s the mantra of minimalist web design. This design approach focuses on simplicity, cleanliness, and clarity. By stripping away unnecessary elements, minimalist web design creates a visually appealing and clutter-free experience for users. It allows the content to take center stage and ensures that the design does not distract from the message.
One popular technique in minimalist web design is the use of ample white space. White space, also known as negative space, refers to the empty space between elements on a web page. It helps to create a sense of balance and harmony, making the design feel open and uncluttered. By using white space effectively, you can draw attention to key elements and enhance the overall visual impact of the design.
Another characteristic of minimalist web design is the use of a limited color palette. Instead of using a wide range of colors, minimalist designs often opt for a monochromatic or limited color scheme. This helps to create a sense of harmony and cohesiveness, making the design feel more polished and refined.
Typography is also a crucial aspect of minimalist web design. Choosing the right fonts and using them in a consistent and deliberate way can greatly enhance the overall aesthetic of the design. Minimalist typography is often clean, simple, and easy to read, ensuring that the content remains the focus.
Incorporating ample white space, using a limited color palette, and employing minimalist typography are just a few examples of how you can create a minimalist web design. By embracing simplicity and focusing on the essentials, you can create a website that is elegant, sophisticated, and visually striking.
If minimalism is not your style, why not go bold and vibrant? Bold and vibrant web design ideas are all about making a statement and grabbing attention. These designs often use bright and contrasting colors, large and eye-catching visuals, and striking typography to create a visually stimulating experience for users.
Color plays a crucial role in bold and vibrant web design. Instead of sticking to a limited color palette, these designs often embrace a wide range of colors, including bright and bold hues. This creates a sense of energy and excitement, instantly capturing the attention of users.
Visual elements such as images and illustrations are also key in bold and vibrant web design. These designs often feature large and impactful visuals that draw users in and create a memorable impression. By carefully selecting and placing visuals, you can create a visually stunning and engaging website.
Typography in bold and vibrant web design is anything but ordinary. These designs often feature unique and attention-grabbing fonts that add personality and character to the design. By experimenting with different font styles, sizes, and colors, you can create a typographic hierarchy that guides users through the content and enhances the overall visual impact of the design.
Bold and vibrant web design ideas are perfect for brands that want to stand out and make a bold statement. Whether you’re designing a website for a creative agency, an event, or a fashion brand, these ideas can help you create a visually striking and memorable online presence.
Typography is more than just selecting a font. It’s an art form that can greatly enhance the overall aesthetic and impact of a design. Typography-focused web design ideas put typography front and center, using it as a powerful visual element to communicate the message and create a unique user experience.
One popular technique in typography-focused web design is the use of oversized and dramatic typography. By using large and bold fonts, you can create a strong visual impact and instantly capture the attention of users. This technique works particularly well for headlines and important messages that you want to emphasize.
Another technique is the use of creative and unique typography styles. Instead of sticking to traditional fonts, typography-focused designs often experiment with custom fonts, hand-drawn lettering, and decorative elements. This adds personality and character to the design, making it feel more unique and memorable.
Hierarchy is also crucial in typography-focused web design. By using different font sizes, weights, and styles, you can create a visual hierarchy that guides users through the content and highlights the most important information. This ensures that the design remains visually appealing and easy to read.
Typography-focused web design ideas are perfect for brands that want to make a strong visual statement and stand out from the crowd. Whether you’re designing a website for a magazine, a blog, or a creative portfolio, these ideas can help you create a visually stunning and impactful design.
One popular technique in interactive web design is the use of animations and transitions. By adding subtle animations and transitions to elements such as buttons, images, and menus, you can create a sense of interactivity and enhance the overall user experience. These animations can range from simple hover effects to more complex interactions, such as parallax scrolling.
Another technique is the use of microinteractions. Microinteractions are small animations or visual cues that provide feedback and guide users through the interface. For example, when a user hovers over a button, it can change color or display a tooltip. These small but meaningful interactions add a layer of interactivity and make the design feel more responsive.
Scrolling effects are also popular in interactive web design. Instead of having a traditional scrolling experience, these designs often incorporate parallax scrolling, where different elements of the page move at different speeds as the user scrolls. This creates a sense of depth and adds a dynamic element to the design.
Interactive and engaging web design ideas are perfect for brands that want to create a memorable and immersive user experience. Whether you’re designing a website for a gaming company, a travel agency, or an e-commerce store, these ideas can help you create a visually stunning and interactive design.
Navigation is a crucial element of web design, as it determines how users navigate through the website and find the information they’re looking for. Unique navigation web design ideas aim to create a navigation system that is both functional and visually appealing, enhancing the overall user experience.
One popular technique in unique navigation web design is the use of hidden navigation menus. Instead of the traditional horizontal or vertical menu, these designs often hide the menu behind an icon or a button. When the user clicks on the icon or button, the menu slides out or expands, revealing the navigation options. This creates a clean and uncluttered design, allowing the content to take center stage.
Another technique is the use of mega menus. Mega menus are large drop-down menus that display multiple levels of navigation options. These menus often include images, icons, and descriptive text, providing users with a comprehensive overview of the website’s structure. Mega menus are particularly useful for websites with a lot of content or complex navigation hierarchies.
Incorporating unique and creative navigation elements, such as sticky menus, slide-out menus, or tabbed navigation, can also enhance the overall user experience. These elements add a layer of interactivity and make it easier for users to navigate through the website.
Unique navigation web design ideas are perfect for brands that want to create a visually appealing and user-friendly navigation system. Whether you’re designing a website for a restaurant, a news publication, or a corporate organization, these ideas can help you create a unique and intuitive navigation experience.
dark mode has become increasingly popular in recent years, offering a sleek and modern alternative to traditional light themes. Dark mode web design ideas aim to create a visually striking and immersive experience by using dark backgrounds and light-colored elements.
One technique in dark mode web design is the use of high contrast. By using light-colored elements on a dark background, you can create a strong visual contrast that enhances the readability and overall visual impact of the design. This ensures that the content remains easily readable and the design feels visually appealing.
Another technique is the use of bold and vibrant colors. Dark mode designs often incorporate bright and contrasting colors to create a visually striking and engaging experience. These colors can be used to highlight important elements, create visual interest, or add a touch of personality to the design.
Typography also plays a crucial role in dark mode web design. By using light-colored fonts on a dark background, you can create a visually striking and easy-to-read typography. It’s important to choose fonts that have good contrast and legibility, ensuring that the content remains readable in different lighting conditions.
Dark mode web design ideas are perfect for brands that want to create a modern and visually striking online presence. Whether you’re designing a website for a tech company, a photography portfolio, or a creative agency, these ideas can help you create a design that stands out and leaves a lasting impression.
In the fast-paced world of web design, finding inspiration is essential to stay ahead of the curve and create designs that are fresh, innovative, and impactful. The 10 inspiring web design ideas discussed in this article are just the tip of the iceberg. There are countless other ideas and techniques waiting to be explored.
Remember, creativity knows no limits. Don’t be afraid to experiment, push boundaries, and think outside the box. Take inspiration from various sources, such as other websites, art, fashion, and nature. Keep up with the latest design trends and technologies, and constantly challenge yourself to learn and grow.
With the right mix of creativity, technical skills, and a deep understanding of user experience, you can create web designs that not only look great but also deliver a seamless and engaging user experience. So, go ahead, ignite your creativity, and revolution
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
I’m Eyal Zuri, a designer, and co-founder of Muzli, that yummy design inspiration tool. Besides wrestling pixels and obsessing over UX and UI in our beloved realm of design, I have to confess, I am somewhat of a fanboy of trends and, yes, Dark Mode.
Enough about me though, let’s dive into the mystery that’s been looming in the design sphere like Batman over Gotham: the phenomenon of dark mode UI.
The question is, is dark mode simply an attractive pixeled outfit everyone wants to wear now, or does it hide some serious functional benefits under its sleek black garb? Grab your design goggles, because we are about to dive deep into the sea of dark mode UI!
There’s no denying the undeniable charm of the dark mode UI. It’s the James Bond of design — sleek, sophisticated, and seems to favor martinis served “shaken, not stirred”.
Dark Mode — the Trendsetter or Gamechanger? This is the question.
Dark mode, a.k.a the digital world’s ‘nightclub’ experience. Everyone is jumping into this dark ship, from Twitter and Whatsapp to individual app developers rapidly launching dark versions. But let’s face it: Just like in fashion, not all trends are necessarily practical or necessary (like those needle-thin ties or extra ripped jeans).
For instance, a good use case for dark mode can be found in a car navigation application. The darkened screen at night prevents glare and ensures the driver’s visibility remains uncompromised during travel.
On the contrary, a poor example of dark mode implementation might be seen in a blog featuring lengthy articles. Reading white text on a black background can strain the eyes and make it difficult for users to digest the content effectively.
Show me the (Dark) Money
So, the real question is: To Dark Mode or not to Dark Mode? To answer this, let’s weigh the pros and cons.
Certainly, I’d love to expand on those points for you.
Pros:
1. Reduce Eye Strain: Dark mode is known for significantly lowering eye strain, particularly in low-light conditions. Late night web surfers and after-dark app users can heave a sigh of relief — no more squinting at brilliant white screens!
2. Save Energy: If you’re an environmentally conscious user or just looking to save on battery life, dark mode is your friend. Display technologies like OLED or AMOLED use less power while utilizing dark mode, giving a boost to your energy conservation efforts.
3. Aesthetically Pleasing: Done correctly, dark mode is a feast for the eyes. Its warmth and depth can give designs a sleek, modern, and often luxurious feeling, enhancing user engagement and delight.
4. Increase Focus: Some users report increased focus while working in a darker interface as it reduces the distraction caused by other elements on the screen.
5. Market Appeal: Dark mode isn’t just power-efficient and easier on the eyes, it can also be a total eye candy! A sleek, striking, and sexy interface can be a powerful tool to attract and retain users.
Cons:
1. Legibility Issues: While dark mode can ease eye strain, it doesn’t always guarantee easy readability. Contrast between the text and background needs careful calibration, otherwise, the text may become hard to decipher, causing user discomfort. A classic example is Google’s Calendar app, where the dark mode has made it harder to distinguish between past and upcoming events.
2. Inconsistent Results Across Displays: The effectiveness of dark mode depends largely on the type of screen it’s viewed on. While it may look splendid on OLED displays, the results can be underwhelming on LCD screens because of their incapacity to completely switch off pixels.
3. Color Distortion: Dark mode can lead to color distortion, particularly with bright, vibrant hues. It makes them appear more saturated, affecting the overall visual consistency.
4. Not Suitable For All Content Types: Some types of content are better suited for light mode. For instance, if an application is text-heavy, using light mode can enhance readability as dark texts on a light background are generally easier to read.
5. Outdoor Visibility: Outdoor lighting conditions can pose a challenge for dark mode users. In bright sunlight, it can be hard to see and work on a dark screen as it introduces heavy screen glare. The contrast issue also becomes prominent as it becomes tough to distinguish different elements on the screen. This means that if your users are frequently outdoors, they might not be as thrilled with the dark mode.
Summing it up — The Dark Mode Playbook
Like practically everything in life, there’s no one-size-fits-all answer. Sometimes, you might want to jump into the dark mode bandwagon, and sometimes not.
If you opt for the dark side, meticulously play around with contrast levels, typography sizes, and test it across multiple displays. Never compromise on the most important aspect: a smooth, user-friendly experience.
If you decide to keep things light, that’s alright too. Maybe top it up with a cheeky little ‘currently sunbathing’ notification. Add a little extra color to your user’s day!
So, dear Muzli-ans, till the next design trend makes its grand appearance, may your pixels be perfectly aligned, your colors be on point, and most importantly, may you keep loving every step of this glorious design journey!
Anyway, back to our dark mode discussion or should we say ‘light-hearted’ debate? 🥁 “Oh well, there goes Eyal, the Dark-Lord again!”
Alright, it’s time to sign off before my passion for puns freaks you out! See you around in the other side of the color spectrum!
P.S
In any case, this entire post was actually an excuse to tell you that we have a new tool for creating color combination generator using AI, and guess what, its interface is a super sexy Dark mode.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
AI image generators are revolutionizing the industry by taking simple sketches and transforming them into breathtaking images. This groundbreaking technology is reshaping the way designers bring their visions to life. Powered by ever-evolving algorithms, AI image generators harness the vast potential of machine learning to generate high-quality images from basic sketches.
Designers can now experiment and iterate with ease, exploring diverse styles and aesthetics, all with the click of a button. This innovation not only speeds up the design process but also opens up a world of possibilities, allowing for more experimentation and pushing the boundaries of creativity. Gone are the days of spending hours meticulously refining sketches. AI image generators provide designers with a powerful tool that not only enhances their productivity but also encourages exploration and empowers them to create stunning visualizations like never before. With this game-changing technology at their fingertips, designers can now bring their ideas to fruition with unparalleled efficiency and finesse.
We’ve found 5 of the best sketch-to-image generators, using the latest AI models that you can immediately start to experiment with.
NVIDIA Canvas
NVIDIA Canvas leverages AI to transform basic brushstrokes into lifelike landscape images. Accelerate background creation or hasten concept exploration, allowing you to dedicate more time to envisioning your ideas.
After crafting your perfect image, Canvas enables you to export your creation into Adobe Photoshop for further refinement or integration with additional art pieces. Moreover, with Panorama, your images can be transferred to 3D software like NVIDIA Omniverse™ USD Composer (previously known as Create), Blender, and beyond, for expanded creative possibilities.
Roughly
Still in limited access, Roughly is an AI-powered web application that allows anyone to easily create beautiful art, even if they don’t have artistic skills. It uses AI to turn rough doodles and sketches into polished illustrations.
Tailored for both beginners and professionals, Roughly features an intuitive interface, making it accessible to creators at all skill levels.
Draw3D
Draw3D is an AI image generator designed to turn sketches and drawings into lifelike images.
Users simply upload their sketch, and the tool seamlessly renders it into a realistic image. Compatible with various detailed sketches or drawings, from natural to mountain landscapes, Draw3D excels in transforming these into photorealistic visuals.
Additionally, it has the capability to vividly realize animals, preserving the intricacies of their facial structures.
Vizcom AI
Vizcom uses cutting-edge AI technology to convert sketches and drawings into attractive concept illustrations. This platform enables users to either import their existing drawings or craft new ones directly within the app. To guarantee data security, all user files are securely stored in a dedicated cloud environment, protected with encryption during both transit and storage. Vizcom provides a range of access options, including both free and premium subscriptions, catering to the diverse needs of its user base.
Transform ideas to photorealistic renderings. Add a layer of realism that elevates your design concepts to a whole new level, at a speed that will amaze.
Canva — Generate art from sketch
Canva is a popular graphic design platform, renowned for its Sketch to Life app, a feature that employs artificial intelligence to convert drawings into realistic images.
The app meticulously generates the details of a drawing and transforms it into a lifelike image. Designed for ease of use, this user-friendly app is readily accessible from within the Canva platform.
Stable Doodle
Stable Doodle is a cutting-edge sketch-to-image tool powered by Stability AI, designed to transform sketches and drawings into incredible art or photos. It utilizes the advanced Stable Diffusion XL image generating technology along with the T2I-Adapter, a condition control solution developed by Tencent ARC, for precise AI image generation.
The tool features a simple drawing interface and allows users to create basic sketches, choose an art style, and generate visually appealing concept drawings. Stable Doodle is available on the Clipdrop website and app, offering both free and paid options, and aims to cater to a wide range of users, from novices to professionals
AI image generators keeps updating
We will continuously update this list whenever new generators are available.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Always wanted to showcase your work, but never had any idea how to build a portfolio website? This is your time to shine! Meet Display, a Framer template to create your online portfolio—
Tired of manually creating pages for different project types? Say goodbye to the hassle! File Organizer automates the process, categorizing your Figma files into dedicated pages based on project types such as Sprint files and Design system files—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Okay, we might have gone a bit overboard with the ‘every designer should follow,’ but seriously, these accounts are worth checking out. Prepare to be inspired!
Dive into the ultimate collection of user experience design brilliance! Our carefully curated Twitter list is your gateway to a world brimming with creativity and innovation. From seasoned designers to emerging talents, from design agency to art sources, we’ve got it all covered.
Rest assured, we’ve sifted through countless accounts to bring you only the finest selection. But hey, if you think we’ve missed a hidden gem, let us know! Drop a tag in the comments section of our tweet.
However, if you believe we’ve overlooked a gem, don’t hesitate to tag them under the shared tweet of this post on our twitter account!
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Mr. Bingo’s “Hate Mail” project is a unique fusion of art and provocation. Renowned for his irreverent approach, Mr. Bingo crafts deliberately offensive postcards, turning negativity into art. What began as a personal experiment evolved into a collaborative venture, with contributions from audiences eager to partake in the creation of artistic hate mail. It’s a testament to the transformative power of creativity, where spiteful sentiments are reimagined as thought-provoking works of art.
Greg Olijnyk, based in Melbourne, Australia, has been running his graphic design studio for the past three decades. In 2017, he ventured into three-dimensional art, transitioning from keyboards to cardboard. His sculptures transform ordinary cardboard into extraordinary objects, showcasing intricate shapes and mechanisms. From cityscapes adorned with crushed beer cans to robot samurais with feathered hats, Olijnyk’s work brims with whimsical character and storytelling. Crafted without plans or digital aids, Olijnyk relies solely on a scalpel blade to bring his creations to life. Realistic joints and LED lights further enhance the charm of his pieces. Each sculpture evolves organically during creation, with every element influenced by the preceding one. This meticulous process, devoid of shortcuts, results in intricately detailed structures, be it a brick, a girder, or a delicate bird, taking weeks to months to complete.
Embracing the artistry of coffee roasting, Omsky Studio’s innovative packaging for 7 A.M Coffee takes inspiration from the delicate nuances of the process. Through the masterful use of gradient effects, evoking the rich tones of roasted beans, the studio artfully presents the diverse spectrum of roast levels, from subtle light to robust dark blends.
Step into the world of design transformation with Aware Bio. Witnessing the evolution of cosmetic branding, one project stood out: Aware Bio’s rebranding journey.
Their mission was clear: to shine on the global stage while staying true to their organic roots. Inspired by Peru’s natural beauty, we crafted a botanical illustration that captures the essence of Aware Bio.
an innovative AI music synthesizer by Arvind Sanjeev. SPIN isn’t just a musical tool — it’s a work of art that showcases the power of AI. Behind its sleek interface lies a combination of off-the-shelf components meticulously assembled to provide both brains and brawn. While using SPIN, you won’t see these inner workings, as they’re cleverly hidden behind a design that encourages playfulness and experimentation. The choice of bright yellow and white colors, uncommon in most synth designs, adds to its jovial character, inviting users to explore new musical territories with joy and creativity.
Ricardo Gonzalez, also known as “It’s a Living,” is a visionary artist whose typographic graffiti transcends conventional boundaries. With a background in graphic design, Gonzalez infuses urban landscapes with his signature blend of calligraphy and street art, creating vibrant, dynamic compositions that captivate viewers worldwide.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Canny suits SaaS, consulting, finance with a sophisticated aesthetic and the full suite of Webflow features. Ideal for tech firms seeking a polished web presence—
This is Split — a beautifully minimal portfolio template for illustrators, designers or any kind of visual creatives. Show off you work and get new clients with a beautiful portfolio that’s easy to customize—
This Portfolio Webflow Template is the full package featuring 16 distinct pages, with a variety of layouts to choose from. It comes equipped with a distinctive font and advanced interactive elements, all designed for effortless management and customi
Finesse UI Kit has been carefully crafted to meet the needs of designers and developers alike, and is suitable for a wide range of projects and applications—
Convert Figma Designs into Live WordPress Websites in seconds. You can edit your website using the popular Elementor Page Builder or Default Gutenberg Block Editor(Coming Soon) orBricks Builder(Coming Soon)—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Explore Innovative Footer Designs for Your Website Inspiration
our website’s footer isn’t just a space for legal jargon or contact information — it’s a canvas for creativity and a chance to leave a lasting impression on your visitors. Whether you’re aiming for a clean and modern aesthetic or want to inject some personality into your design, the footer is a prime opportunity to showcase your brand’s identity. Get ready to be inspired as we delve into 10 captivating website footer designs that will elevate your online presence—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Meet Abu Dhabi, your portfolio’s gateway to luxury. Dark-themed, and adorned with unique animations, it radiates premium allure. Effortlessly personalize for freelancers, creators, and designers, creating a sophisticated showcase that captivates—
Introducing ‘Apocalypse,’ the ultimate portfolio template. Crafted by top designers, its modern white theme, single-page layout, and responsive design make it the perfect showcase for your creative work. Elevate your portfolio like never before!
Introducing AGENS, a cutting-edge Webflow template tailored for agencies. Enhance your digital footprint with its stylish design, flawless e-commerce integration, and top-tier services. Seamlessly captivate potential clients and expand your business—
Ofative is your ultimate calendar companion designed to revolutionize how you manage your time and tasks. Every aspect of your schedule becomes effortlessly streamlined—
Destocker revolutionizes photo editing with Generative AI, allowing users to easily transform images. Upload a photo, describe your vision in plain English, and watch as AI creates stunning, unique transformations. Perfect for both professionals and hobbyists—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Build your future project with this premium Webflow SaaS template featuring striking dark blue to purple gradients, easy customization, SEO excellence, and seamless CMS and e-commerce integration, optimized for success and growth—
Elevate your agency with YourFlow: the ultimate Webflow template featuring unique animations and scroll interactions for an unforgettable user experience—
Introducing Azul — a stylish and incredibly versatile Webflow template meticulously crafted for cutting-edge creative agencies, digital visionaries, and marketing virtuosos—
Create a website, online store, landing page with Tilda intuitive website builder. Build your site from hundreds of pre-designed templates and publish it today. No code required—
Align on your next build faster with Whimsical docs, flowcharts, wireframes, & mind maps. Generate AI diagrams and access templates from product leaders—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Forge — marketing landing page template. Seamlessly responsive across all devices, this template ensures a flawless user experience. With a sleek aesthetic and an intuitive interface, it’s the perfect solution for you—
TinyPath is one of the most modern, clean, and highly polished Webflow templates. Take your business to the next level and provide a better user experience to your clients—
The Atlantic template enhances the online presence of startups and enterprises, delivering a sleek and captivating user experience, crafted to seamlessly integrate Webflow SaaS, CMS, and e-commerce elements—
Align on your next build faster with Whimsical docs, flowcharts, wireframes, & mind maps. Generate AI diagrams and access templates from product leaders—
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
In this post, you’ll find the ultimate collection of 45 popular and practical plugins for Figma in 2024. Carefully curated, these plugins are poised to enhance your workflow, amplify your creativity, and elevate your Figma experience. Dive into this meticulously crafted selection, designed to serve you best in your collaborative design journey with Figma
The Figma to Webflow plugin, built by Webflow Labs, lets you turn your static designs into clean, production-ready Webflow HTML and CSS. Add Webflow Interactions, wire up content using our powerful CMS, and one-click publish onto the fastest hosting infrastructure.
Export your Figma designs by simply copying what’s on the canvas and pasting it in Framer. The plugin takes care of adapting your design to Framer’s layout tools in real-time, so you can focus solely on making a great website.
Fast Isometric is a Figma plugin for quickly creating isometric designs with a variety of tools and templates, simplifying the process of crafting impressive three-dimensional graphics and interfaces.
Create professional animated content with Jitter. Use it to design on-brand animated UIs, videos, social media posts, websites, apps, logos and more. Sign up for free.
Keep your flow with the largest and most consistent collection of curated graphics. Get 1.5M+ icons, photos, and illustrations without ever needing to leave Figma!
Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users.
This plugin converts text and vector nodes into 3D models with just one click! The converted models will be automatically placed and rendered with GPU ray-tracing. You can use it to render a nice 3D icon, text, or any other 3D-style images without being a 3D specialist.
Create organic blob shapes with the click of a button. Every shape that is generated is unique to the last. You can control how unique a shape is along with how many points it has.
LottieFiles for Figma redefines animation creation, enabling designers to effortlessly convert their designs into Lottie animations. This powerful feature supports everything from basic animations to multi-frame and multi-variant component sequences.
The Noise plugin for Figma adds texture and depth to designs with customizable noise patterns. Generate Perlin, simplex, and cellular noise, adjust parameters like scale and opacity, and preview changes in real-time. Enhance your designs quickly and efficiently with this valuable tool.
Create custom-styled tables which can be easily resized, edited and automatically adjust to content. Control the design of your tables by modifying the components.
Chart is the most powerful plugin for Figma that uses real or random data to create 18 types of charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.
Now, you can create and test accessible software in record time. Whether you’re building a website, online shop, mobile app, or SaaS product, Stark gives every designer, engineer, PM, and QA expert the manual and automated tools to make it accessible with ease.
A Figma plugin to dynamically generate seamless tiled noise, textures, patterns, gradients, and more. Select a layer and add your noise or texture. Change the settings and see your layers updated live.
Create high quality splines, shapes, spots by adding gradient along path effect to any curve. With collection of more than 250+ handcrafted and fully editable curves & colors you will have unlimited options to combine.
The Fit Curve plugin helps to create curves with a smooth curvature in Figma. Featuring an intuitive interface with a series of circular buttons and slider, it allows for precise modification of handle lengths on Bezier curve segments.
Figma plugin to easily convert Figma design into Elementor widgets. The json data generated from this plugin can be directly pasted into Elementor editor with right click on elementor editor > paste from other site > Ctrl +V. Working better for well grouped design.
Convert any website into fully editable Figma designs. Leverage an existing website and import its html to Figma to start your own designs, without building each element from scratch.
Stop manually adding all your styles; instead, use this plugin to spend more time playing with aliases, modes, and updating your design system components.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Web designers are constantly on the lookout for tools and technologies that can streamline their workflow, enhance creativity, and deliver exceptional user experiences. In 2024, the realm of web design is teeming with innovative tools that promise to revolutionize the way websites are conceptualized, designed, and developed. Here’s a glimpse into some of the most compelling tools that every web designer should keep an eye on this year:
Your Go-To Design Inspiration Hub (Yes, We’re Recommending Ourselves!):
Muzli serves as a comprehensive hub for design inspiration, offering a curated feed of articles, trends, and resources from across the web. In 2024, Muzli remains essential for designers seeking fresh ideas and staying abreast of the latest design trends and innovations—
Why keep an eye on Muzli in 2024? Let’s just say, we’ve got some seriously exciting stuff brewing this year. 🚀
Framer is a web design tool that allows designers to create complex interactions and animations for their designs. Use powerful yet familiar tools to create your ultimate website design—
Use AI as your design ally, not as a replacement. Effortlessly generate sitemaps and wireframes for marketing websites in minutes with Relume’s AI website builder—
Adobe Photoshop remains the industry-standard software for digital image manipulation, graphic design, and digital art. In the past year, significant advancements have been made with the integration of cutting-edge AI capabilities—
Genius is a platform designed to enhance creative processes through AI-driven insights and automation, targeting the needs of content creators and designers—
Pitch is a modern presentation tool designed for teams, offering collaborative features and beautiful design templates—
—Each of these tools brings something unique to the table, from AI-driven design assistance to collaborative platforms that streamline the design process. Their relevance in 2024 lies in their ability to address emerging trends, enhance productivity, and foster creativity in the ever-evolving field of web and digital design.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Introducing Nairobi, the pinnacle of SaaS excellence in Webflow templates. Designed with a clean white mode, smooth animations, and a host of premium features, Nairobi redefines sophistication and functionality for SaaS businesses
Squaria is a unique template designed for companies in the SaaS, AI, Startups and Tech space that are looking to upgrade their online presence and improve the conversion rate
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Welcome to the realm of 404 pages, also known as “404, Page Not Found”, where error messages transcend mere notifications and transform into canvases of creativity. These seemingly mundane digital dead-ends have evolved into captivating showcases of artistic expression, reflecting the ingenuity and personality of their creators.
In this article, we delve into the significance of 404 pages, exploring how they serve as more than just error prompts but as opportunities for brands to engage, entertain, and leave a lasting impression on visitors. Broken links are a common occurrence on the web, often leading users to encounter the dreaded 404 error page when attempting to access a non-existent or moved page. While initially perceived as a frustration, these error pages have evolved into crucial elements of web design and user experience.
From whimsical illustrations to witty quips, each 404 page offers a glimpse into the brand’s character and commitment to user experience. Incorporating humor, creativity, or helpful navigation options into a 404 page can transform a moment of disappointment into a memorable interaction.
Join us on a journey through some of the most imaginative and thought-provoking 404 pages across the web, where every error becomes an invitation to explore the unexpected and embrace the delightful quirks of digital mishaps. By embracing creativity and functionality in their design, website owners can transform these error pages into valuable touchpoints that enhance user experience, reinforce brand identity, and contribute to overall site performance.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Choosing the right font can make a significant impact on the visual appeal of your project. As we step into 2024, let’s explore 30 outstanding free fonts that can add creativity and style to your designs.
In this post, we’re excited to share a collection of free fonts for the year 2024. However, it’s crucial to note that a significant portion of these fonts may be free only for trial versions or personal use.
It’s essential for users to be aware of the licensing terms associated with each font they choose to download and utilize. Fonts often come with specific licensing agreements that dictate the acceptable usage scenarios. Some fonts are free for personal use but may require a license for commercial projects. Additionally, trial versions may have limitations on usage.
Introducing Brenat, a modern and versatile Layered Sans Serif Font that effortlessly combines sophistication with a touch of contemporary flair. Crafted with precision and attention to detail, Brenat is designed to elevate your creative projects to new heights. Its clean lines, balanced proportions, and unique layering options make it a standout choice for a wide range of applications.
Krico is a font with an attractive bubble style from ViactionType. Available in 6 style options, perfect for designs with retro, fun and children’s themes.
Enchanted Tales” is a captivating serif font that offers a blend of classic elegance and modern versatility, making it an ideal choice for a wide range of creative projects. This font boasts an impressive support for 87 languages, ensuring global accessibility and inclusivity in your designs. One of the standout features of Enchanted Tales is its extensive collection of over 150 ligature glyphs, each meticulously crafted to add a unique touch of sophistication and flair to your text.
Quakers is the evolution of the font, ‘Cuanky,’ in its italic version,transformed into a captivating script typeface. Embracing the essence of retro design, Quakers exudes an aura of vintage elegance combined with modern boldness and elegance.
The manifestation of how we define balance is Anti Design. We believe that balance should not be fixed, having the same size or worth. Balance can be achieved through contrast, colour, or anything else, and it can also be asymmetrical. By combining several types of fonts, such as italic, serif, script, and vintage, we may establish an asymmetrical balance while maintaining harmony.
Lokanova is a display font with a sans serif type designed in a bold and unique style to give the impression of a firm but still playful design. Lokanova is available with uppercase, lowercase, number, symbol and multilingual
Introducing Keyute Typeface — a font from Dryy.type that embodies all the playful charm and whimsy of the current K-POP trend. Created with versatility in mind, this font is the perfect choice for elevating your designs to the next level.
Angel Club font is a retro serif and bold display font. You will get four types of fonts in this pack, Regular, slanted and Shadow version. Use this display font to add that special retro touch to any design idea you can think of!
Super Vibes font is a retro groovy display font. Use this display font to add that special retro touch to any design idea you can think of!. Masterfully designed to become a true favorite, this font has the potential to bring each of your creative ideas to the highest level!
Say hello to Katherine Thompson! Monoline signature script font. Stylish casual charm makes it appear readable, and, ultimately, incredibly versatile for branding, logo, blog headline, photography, watermark, social media posts, advertisements, product designs, labels, stationery, wedding designs, product packaging, special events, or anything that need a stylish casual taste.
Tropi Land font is a wavy, playful and natural handwritten sans serif font. You will find many ligatures and alternate character in it. This font is perfect for creating logo, watermark, branding, wedding invitation, quote, tagline, or anything else. Let’s make something beautiful project with this.
This font inspired by freestyles that are trending at the moment such as urban style and several other styles.
This font is perfect for professional touch makes this font more elegant and suitable for all types of projects you are working on. But this font is also suitable for logos, branding, greeting cards, invitation cards, advertisements, titles, healines, book titles, stickers, packaging, quotes, posters, t-shirts/apparel, billboards and others.
Holingston is a Handwritten brush script that is written casual and naturaly. the letters are made with brushes on paper and then scanned carefully drawn into vector format. This typeface is ideal for use in any professional project, such as blog titles, posters, wedding elements, t-shirts, clothing, book covers, business cards, greeting cards, branding, merchandise etc. It has 4 styles, regular, regular slant, clean and clean slant variations, this package is also has many alternatives underlines that make your text and design more interesting.
Elf Type is a whimsical and playful font designed with a touch of fantasy.
Its characters have a unique and enchanting style, making it suitable for creative and lighthearted projects.
This font is not only visually appealing but also comes with the added bonus of being fully free for both personal and commercial use. However, it’s important to note that the font is prohibited for resale. This ensures that it remains accessible to a wide audience without any commercial restrictions.
Stara Sans Serif Font is a sans serif font family that combines simplicity with elegance. With its clean design and balanced proportions, this font gives off a modern and professional feel. Each letter is carefully designed to ensure optimal clarity and legibility.
Atleigh Typeface, an Art Deco typeface that combines elegance and modernity. With six weights, twelve styles, and OpenType features, it offers versatility for various design needs. Atleigh provides two optical choices — Display and Headline. Additionally, it’s available as a variable font for ultimate customization.
Shine Coasty font is a retro serif and bold display font. You will get alternate characters such as swash on some characters. Use this display font to add that special retro touch to any design idea you can think of!.
Introducing Scalone — Psychedelic Display Font, a vibrant and mesmerizing typeface that effortlessly blends the retro charm of psychedelic art with a modern twist. This font is a celebration of creativity, individuality, and the bold spirit of the unconventional.
This unique bubble font is inspired by graffiti and street art, infused with a modern layout that is sure to stand out. The font also incorporates a mix of y2k culture and streetwear visuals, which are currently trending in design identities.
Introducing New Roshelyn (Extra Light Version ) Free Font, a new carefully crafted and nicely balanced curve on script typefaces with personality. Also with Extrude Version and Swash Tail make it look Retro. You can use it as a logo, badge, insignia, packaging, headline, poster, t-shirt/apparel, greeting card, wedding invitation, etc.
Smothy is a cute and fun display font with bubble style. You will get three types of fonts in this pack, Regular, Bubble and Shadow version. Use this display font to add that special bubble touch to any design idea you can think of!
Meqanor, a typeface in a league of its own, belongs to the distinguished category of display serifs, designed to make a statement and capture attention. Crafted with precision and creativity, Meqanor stands out as a unique and distinctive font that brings a touch of sophistication to any design.
Zealandia stands out in the world of typography as a humanist sans serif font, renowned for its versatility and adaptability. This font’s journey began as a unique request from the creator’s spouse, who needed a font suitable for map-making. Embracing this challenge, the creator expanded the scope of Zealandia, crafting it into a font that not only excels in cartographic applications but also shines in various other contexts.
Neue Regrade is a free to use sophisticated variable sans serif typeface, which combines the smooth curves of gothic typography and the slight inktraps in modern typefaces. It started as a university project, but due to my obsession to the beauty of typography I made them 6 weights with matching slant, some ligatures and some styles including the letter a, g, o, f, t and k.
Dream Spark Font is a bubble font with a lively appearance that will fill your designs with cheerfulness! It’s great for covers, posters, spring designs, marketing materials, and anything that needs to stand out!
Introducing Romancelia — a stunning display condensed font designed to bring an air of Romance and Valentines movie. Romancelia Romantic Condensed Font is an exquisite typeface that effortlessly captures the essence of romance and elegance. This condensed font is meticulously crafted to convey a sense of intimacy and sophistication, making it an ideal choice for projects that require a touch of love and charm.
Enjoy Forest font is a retro serif and bold display font. You will get three types of fonts in this pack, Regular, Outline and Shadow version. Use this display font to add that special retro touch to any design idea you can think of!
Uphoria is a modern serif display with a distinct curve that retains a serif sense along with each glyph. Experimental design, on the other hand, disregards design standards while retaining balance. Carefully created and developed, and appropriate for all design requirements.
Cutie Kitty Font is a simple, modern and natural handwritten font. This font is perfect for creating logo, watermark, branding, wedding invitation, quote, tagline, or anything else. Let’s make something beautiful project with this.
Giyaste Font is an elegant serif font combined with a classy and modern style. This type of font is very suitable for your various needs such as branding projects, logos, wedding designs, social media posts, advertisements, product packaging, product designs, labels,
Want even more inspiration? Follow us on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Introducing the TP–7 Field Recorder by teenage engineering, a masterpiece of audio design. With a nod to the classic Braun era, this elegantly crafted device captures thoughts, music, and interviews effortlessly. Compact and intuitive, the TP–7 redefines the recording experience, offering a seamless blend of form and function for those who appreciate the art of sound.
Miko-R, une artiste française autodidacte, trouve sa passion pour la peinture à l’adolescence, influencée par des maîtres tels que Magritte, Vasarely, Folon et Mondrian. Inspirée par la Pop Art et des artistes tels que Klein, Soulages et Keith Haring, elle intègre également le street-art dans son expression artistique éphémère. Initiant son parcours avec des tableaux monochromes, elle explore les couleurs chaudes avec un travail méticuleux sur la matière. Le street-art fusionne la peinture et le volume dans ses créations, où elle crée des sculptures en fibre de verre, les taguant avec des couleurs, des mots et des messages variés. Son œuvre, empreinte d’humour et d’énergie, se distingue par la générosité des formes et des messages qu’elle insuffle.
DOJA is the world’s first Indo-Japanese spirit; a mixture of ingredients and cultures that come together to create something new. Crafted by a veteran distiller in Japan’s Wakayama prefecture and produced in Goa-based East Side Distillery, DOJA is a yuzu-dominant gin with hints of cedar, sansho pepper and hinoki in combination with traditional botanicals from India.
Building on the brand’s concept of mixing, London-based studio OMSE delivered an identity for DOJA that honours the two cultures whilst embracing tradition and modernity. This also inspired the name, In(do-ja)panese as well as the distinctive logo; a mixture of typefaces and languages: Japanese, English and Devanagari.
Anak’s Bettr Coffee rebrand embraces imperfection with a visually striking and authentically flawed design. The characters of Planet Bettr, fully realized by Anak, introduce a unique world-building approach, reflecting the messy yet relatable journey toward positive change. The design’s typography strikes a balance between welcoming and readable, the color palette exudes confidence, and quirky characters engage users while conveying a direct message. Anak’s design for Bettr Coffee seamlessly marries impact and entertainment, proving that authenticity, even in design flaws, is a powerful visual narrative.
Legendary Monsters is a series of 4 visuals.
Each artwork is composed of interlocking shapes, patterns and graphic modules, giving rise to different visual and formal reinterpretations.
by Almarena Creative
Introducing “Goïa”, a variable sans serif typeface available in 2 styles: A first one, very readable with a touch of originality, ideal for body text and a second one “Display”, more impactful with a more assertive originality. Both styles are available in a variable or static version (9 weights + italics) with many alternates divided into 3 stylistic sets.
Discover the mesmerizing world of Nicolas Temese, also known as Miniatua, a visionary artist who specializes in crafting exquisitely detailed miniature replicas of vintage computers and mainframes.
What sets Miniatua’s work apart is his relentless pursuit of accuracy. Each piece is painstakingly handcrafted with an unwavering commitment to capturing the essence of the original. This dedication to precision has birthed a collection of breathtaking replicas, among them a scaled-down model of the iconic 1959 IBM 5150 personal computer.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
A nostalgic website dedicated to the iconic Nokia 3310, embarking on a journey to rediscover its classic features, from the monochrome screen to the beloved Snake game.
Pixel art, retro design, animation, pixelated graphics, scroll story
The ultimate Webflow template for digital creators seeking an elegant and minimalist personal portfolio. Elevate your online presence with this sophisticated design, meticulously crafted to showcase your masterpieces with ease.
Renode is one of the most modern, clean, and highly polished Webflow templates. Take your business to the next level and provide a better user experience to your clients.
Showcase your design work in a contemporary and stylish manner. Enhance the prominence of your UI/UX creations, distinguishing them from competitors and captivating the attention of your clients.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
The venue Sala X has been a reference stage of Southern Europe since 2014 with an average of 30,000 spectators, more than 500 artists and 250 events per year.
3D, parallax effect, clean layout, expressive typography, video background.
Rabbit’s R1 is a 115-gram, pocket-sized device that runs on Rabbit OS, which the company describes as a “personalized operating system through a natural language interface.
FinForm is one of the most modern, clean, and highly polished Webflow templates. Take your business to the next level and provide a better user experience to your clients.
IntegrateFlow is a modern SaaS Webflow template. It suits dashboards, SaaS, marketing, startups, project management, software, digital business, mobile apps, agencies, seo, marketing, tech solutions, product development, services, analysis websites.
Choose your hero icon, splash on some color magic, give it a twirl, and voilà — your stunning logo’s ready to shine! 🌟 Or let our AI wizard craft the perfect emblem for you, no wand-waving required!
Réveillon Celebration | Visual Identity by Lucas Moura
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Introducing our cutting-edge Webflow template Ozzy, designed specifically for SaaS adn Web3 companies. This sleek and modern template is tailor-made to showcase the innovative capabilities of your product—
Hey! — Your All-in-One Webflow Template: Say hello to seamless web design with Hey! This no-code template is designed for agencies, creators, web designers, and digital agencies, is the ultimate toolkit for crafting stunning websites—
Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
In this article, we meticulously track the captivating trends and content that influenced Muzli users throughout the year of 2023. We delve into the posts, art pieces, designs, and concepts that dominated Muzli’s popular section, garnering the highest click rates. Through a comprehensive review of these posts, we peek into the world of designers, artists, and creators who contributed to the visual culture and creativity in the past year.
Use generative AI and simple text prompts to create the highest-quality output — beautiful images, text effects, and fresh color palettes. Make all-new content from reference images and explore more possibilities, more quickly.
Explore the next evolution of Microsoft’s design system, enabling more seamless collaboration and creativity than ever. Move fluidly from design to development, between apps, and across platforms.
With Readymag, users can unleash their creative potential and build websites that stand out with up-to-date typography, impressive animations, and complete creative freedom, all without any layout limitations.
Quipo is the most eco-friendly and cost-effective solution for dematerializing cash receipts. Extremely simple, it offers numerous advantages for both merchants and their customers.
Floor796 is an ever-expanding animation scene showing the life of the 796th floor of the huge space station! The goal of the project is to create as huge animation as possible, with many references to movies, games, anime and memes.
Creative Trends, by Depositphotos, forecasts future creative landscapes through year-round trend hunting, research, and collaboration with industry experts. Empowering clients and contributors, it inspires innovation and leadership in a saturated market.
The MSCHF brand family creates and delivers original, surprising artworks, and ventures. Their process involves crafting unexpected projects that touch on a wide range of domains, pushing boundaries, and inviting audiences to experience creativity and innovation in a fresh and remarkable way.
Are these the real life? Is this just fantasy? Directed an interactive choir of 16 ‘Freddy Mercuries’ generated by AI, embodied from voice to video, to celebrate the innovative legacy of Bohemian Rhapsody.
Enhance your website using Framer’s AI-powered tools: Generate new pages with advanced localization, brand the tone of your translations dynamically rewrite text for better copy.
Brand design & packaging design agency creating what the future holds. With influential brand strategy, brand identity & packaging design | Sydney | London
1337, or “leet”, is a nod to early gaming and hacking culture. Once used to refer to the elite — those highly skilled and with access.
Now, we’re democratizing that access. Inspired by open-source principles.
Together with creators we co-create a diverse ecosystem of A1 Entities, living real virtual lives online — human soul, digital pulse. They connect, educate, and inspire niche communities.
Full-service shoot production for fashion, lifestyle, arts in Australia. Visually-driven, creative, & logistics-savvy approach. Trust in our integrity & transparency.
Wise Design is the Wise design system. It helps our team create a distinct, accessible and consistent Wise experience that works for everyone, everywhere.
PollPapa is a social media polling platform that promotes freedom of speech and expression, and lets people vote on important social, political, environmental, cultural, and other issues.
BLNK is an agency led by creators at the intersection of augmented reality and Web3. Focused on shaping the future of fashion items, worlds, and experiences alongside our partners in the physical realm.
a Puma website that features the Deviate Nitro 2 running shoe. The new model is an update to the previous Deviate Nitro and offers significant improvements in performance and comfort.
We are a collection of designers, strategists, and creative technologists architecting the future of functional consumer brands; using technology to shape culture.
Grid World is a website by artist and software developer Alexander Miller. The website explores the concept of the grid, both as a physical structure and as a metaphor for the way we think about the world.
Discover the stories behind top-notch design work. Join over 11,5k others and subscribe to Off-Grid today.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Embarking on a journey through hundreds of websites, we meticulously handpicked the 60 most exceptional and creative portfolio sites that encapsulate ingenuity, aesthetics, and distinctiveness. In our quest for creativity, we scoured the digital realm to present to you a curated selection that defines the pinnacle of artistic expression in web design from the year 2023.
However, it’s essential to note that not everything exceptionally creativeand intriguing as an inspiration will necessarily align perfectly with your portfolio objectives. Hence, evaluating your goals and needs is crucial to tailor your portfolio accordingly.
*Encountered other outstanding portfolios? Drop us a comment, and we’ll consider adding them to the list!
Website representing a design and development studio. Black and white scheme, asymmetrical layout, scroll animations, modern typography, minimalist design.
Website showcasing a design studio’s work and services. Asymmetrical layout, harmonious color scheme, minimalist style, clean typography, micro-interactions.
Portfolio website for a multidisciplinary Designer Minimalist design, single page layout, monochrome scheme, clear typography, effective use of whitespace.
Designer and art director. Creating connected brands, commerce, product, and web experiences. Dark theme, parallax effect, clean layout, minimalist style, stylized typography.
Freelance Senior Digital Designer and Art Director based in the South of France and working worldwide. Isometric design, vibrant colors, interactive layout, modern typography, playful animations.
International consulting firm specializing in culture-defining collaborations. Split-screen layout, immersive design, video focus, modern typography, monochromatic scheme.
Portfolio website for a designer and creative director. Parallax effect, asymmetric layout, minimal design, monochromatic color scheme, modern typography.
Portfolio site for a multi-disciplinary designer. Monochromatic scheme, asymmetrical layout, minimalist design, clean typography, controlled use of contrast.
Portfolio website for a freelance designer and illustrator. Pastel color scheme, hand-drawn aesthetics, simple layout, playful typography, interactive icons.
Portfolio site for a multi-disciplined creative designer. Simple color scheme, flat design, clean typography, user-friendly layout, mobile responsive design.
Personal portfolio — UI/UX design and digital branding 3D interaction, Video-centric design, dynamic scrolling effects, dark color scheme, minimalistic content, sans-serif typography, smooth transitions.
Showcase of a design studio’s work. Monochromatic palette, bold sans-serif typography, minimalistic layout, hover animations, case study emphasis, mobile-friendly design.
Personal portfolio of a digital designer. Dark theme, grid layout, animated transitions, minimalistic navigation, clear typography, case-study focus, hover interactivity.
Personal portfolio of a digital designer. Full-screen images, dynamic scroll effects, minimalist design, bold typography, black and white color scheme, video content focus.
Website showcasing a design studio’s work and capabilities. Bold typography, minimalist design, monochromatic scheme, simple layout, effective use of whitespace.
Website presenting a multidisciplinary design studio works. Soft color palette, 3D graphics, modern typography, asymmetrical layout, dynamic interaction.
Designer portfolio Combination of minimalism and visual intensity, monochromatic color scheme, interactive portfolio layout, fluid scrolling, parallax effect, modern typography.
The Tux website provides vibrant interfaces for web design and digital experiences, displaying their creative digital projects. Sleek design, transitions, neon color contrasts, mouse-triggered animation, parallax scrolling, geometric shapes, bold typography.
Changers Studio’s site is a digital presentation of their branding and design expertise, featuring their projects and capabilities. Vibrant colors, animated elements, bold patterns, large typography, card-based design, parallax scrolling, interactive cursor.
Anzo Studio’s site serves as their digital portfolio, sharing a unique story of their creative work in various design fields. Dynamic layout, scroll-triggered animations, monochromatic color scheme, minimal design, storytelling approach, clean typography.
Sofia Lambrou’s website showcases art and design projects, serving as an online portfolio and professional brand. Mixed media visuals, vibrant color splashes, grid-based gallery, overlapping elements, animation on hover, eclectic typography.
Viens-la is a digital agency’s website, demonstrating their expertise in creating engaging and modern online experiences. Flat design, bold color blocks, mouse-driven animations, floating elements, tiled layout, impactful typography.
Andreas Antonsson’s website is a personal portfolio site, showcasing his web development skills, projects. Minimal interface, consistent color scheme, scroll-triggered animations, grid system, clear call-to-actions, clean typography.
Stabondar’s website serves as a professional portfolio platform displaying visual development work and design projects. Artistic subtlety, pastel color palette, rolling transitions, parallax scrolling, collage aesthetics, cinematic typography.
a global digital marketing, branding & web design agency portfolio Vibrant aesthetic, modern illustrations, minimalistic design, easy navigation, gradient color scheme, playful typography.
Karim Saab’s website is an interactive portfolio, showcasing his expertise in digital arts, graphic design, and visual communication. Sleek animations, dark mode, minimalist design, balanced layout, subtle hover effects, strong typography.
a designer and creative developer portfolio Spatial aesthetics, monochrome color scheme, immersive portfolio layout, 3D effects, interactive cursor, crisp typography.
Creative Strategy™ Company portfolio Nostalgic interface, bold colors, animated elements, playful graphics, card-based design, fun typography.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Meet Brewster — a battery powered coffee machine of the future that grinds, heats, tamps and pours with dreamy precision. When you start to feel that afternoon grind, pour yourself a Brewster Shot (TM) to finish strong.
RYTM is a contemporary interpretation of the classic record player, seamlessly blending rhythm and architecture into a modern design. Inspired by the harmony of music and the precision of architecture, RYTM features a unique vertical slat arrangement that uniformly integrates user controls, from the tonearm to the power switch, embodying cutting-edge engineering within a visually engaging form.
The concept behind these postcards aimed to craft an exceptional and explorative encounter. Every postcard showcases a dual-faced narrative, with each side embodying unique human attributes like ‘balanced,’ ‘quirky,’ ‘resilient,’ ‘happy,’ ‘youthful,’ among others.
Playmate is a product that provides a social connection for single people without an emotional safety net.
This product creates social connections through ‘play.’ Users of this product can exchange the blocks they have created with each other and share their concerns.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
In the dynamic world of product design, principles are the guiding stars that navigate the journey from a concept to a tangible reality. These principles shape not just the visual appeal but also the functionality, accessibility, and emotional impact of a product. As we explore the design philosophies of tech giants like Google, Apple, Airbnb, Facebook, and more, we begin by understanding the range and nature of good design principles.
Understanding the Range and Nature of Good Design Principles
The Spectrum of Design Principle
Design principles in the tech industry span a wide spectrum. They range from the fundamental rules of graphic design, like balance and contrast, to the intricate principles of user experience (UX) and user interface (UI) design. Good design principles are not static rules but evolving concepts that adapt to new technologies, user needs, and cultural shifts.
Characteristics of Effective Design Principles
Simplicity and Clarity: Good design principles are easy to understand and apply. They avoid complexity, focusing instead on clarity and directness.
User-Centric Approach*: At the heart of effective design principles is the user. These principles prioritize user needs, ensuring that the design is intuitive, accessible, and engaging.
Flexibility and Adaptability: The best design principles are flexible, allowing designers to adapt to different contexts and challenges while maintaining consistency and integrity.
Innovation and Creativity: They encourage innovation and creativity, pushing designers to explore new ideas and solutions.
The Role of Design Principles in Product Development
Design principles play a crucial role in shaping the product development process. They act as a compass, guiding design decisions, resolving conflicts, and aligning the team with a shared vision. Effective design principles are instrumental in creating products that resonate with users and stand out in the market.
Google’s Material Design: A Symphony of Science and Imagination
The Concept of Material Design
Google’s Material Design is a philosophy that transcends traditional design boundaries, fusing tactile realism with innovative technology. It’s an approach that seeks to make the user interface intuitive and responsive, akin to interacting with real materials. The concept is rooted in the familiar — drawing inspiration from the tangible world of paper and ink — yet it ventures into the realms of imagination and technology.
Principles of Material Design
Material as a Metaphor: This principle is the cornerstone of Google’s design philosophy. It’s about creating a rationalized space, where the digital environment mimics the physical world, yet allows for the flexibility and magic of technology.
Realistic Lighting and Movement: Google emphasizes the importance of how light interacts with surfaces. This approach helps in conveying depth, focus, and hierarchy within the interface.
Bold, Graphic, and Intentional: Material Design employs bold colors, deliberate imagery, and purposeful white space. These elements create a visual hierarchy that guides the user through the interface, making the experience not just visually pleasing but also functionally efficient.
Impact and Applications
Material Design has revolutionized the way designers and developers approach UI/UX design. It has led to the creation of interfaces that are more intuitive and engaging, fostering a deeper connection between the user and the digital world.
Apple’s Design Ethos: The Harmony of Form and Function
Apple’s Design Philosophy
Apple has always been synonymous with designs that epitomize elegance and simplicity. Their design principles are deeply rooted in the belief that form and function are inseparable.
Key Design Principles
Aesthetic Integrity: This is about aligning the product’s appearance with its purpose. Whether it’s for professional use or entertainment, Apple’s design ensures that the aesthetic complements the functionality.
Consistency and Intuitiveness: Apple’s design thrives on familiarity — using consistent elements that users have come to understand and expect. This consistency extends across all Apple products, creating a seamless experience for users.
Empowering Through Design: Apple places the user in the driver’s seat. The design is about giving users control while ensuring safety and preventing unwanted outcomes.
The Apple Experience
The Apple design philosophy has led to the creation of products that are not just devices but experiences. From the tactile feel of the devices to the intuitiveness of the iOS, Apple’s design principles have shaped a unique and cohesive ecosystem.
Airbnb’s Design Language: Crafting a Sense of Belonging
Airbnb’s Approach to Design
Airbnb’s design principles are centered around creating a sense of belonging and connection. Their design language speaks to a global audience, transcending cultural and linguistic barriers.
Design Principles at Airbnb
Unified and Universal: Airbnb’s design is cohesive and inclusive, catering to a diverse global community. Every element in the design contributes to a unified experience.
Iconic and Conversational: The design language of Airbnb is both iconic and engaging. It aims to create an immersive experience that is both visually appealing and communicatively effective.
Design as a Bridge: Airbnb’s design serves as a bridge between the online and offline worlds. It’s about creating a platform where users can form real connections and experiences.
Influencing User Experience
Airbnb’s design principles have played a pivotal role in making the platform not just a service, but a community. The design fosters trust and encourages exploration, which is fundamental to the Airbnb experience.
Facebook’s Design Blueprint: Connecting the World
Facebook’s Design Ideology
Facebook’s design principles are crafted to support its mission of connecting people. The design is about creating an interface that is familiar, accessible, and engaging.
Principles Guiding Facebook’s Design
Universal and Human-Centric: Facebook’s design is universal, catering to a diverse, global audience. At the same time, it remains human-centric, emphasizing personal connections.
Clean and Consistent: The design aesthetic of Facebook is clean and understated, which serves to amplify user content. Consistency across the platform enhances usability and user comfort.
Fast and Transparent: Facebook values
Tesla’s Pioneering Design Philosophy
Innovation at the Forefront
Tesla’s design philosophy is anchored in pioneering innovation. Their approach intertwines cutting-edge technology with sustainable practices, revolutionizing the automotive industry.
Principles of Tesla’s Design
Sustainability and Performance: Tesla designs with an eye on environmental impact, creating vehicles that are both eco-friendly and high-performing.
Futuristic Aesthetics: Their design aesthetic is futuristic, reflecting the advanced technology that powers their vehicles.
User Experience: Tesla focuses on the driver’s experience, ensuring that each aspect of the vehicle is intuitive and enhances the joy of driving.
Impact of Tesla’s Design Approach
Tesla’s design principles have not only set new standards in the automotive industry but also inspired a shift towards more sustainable and technologically advanced vehicles.
Netflix’s User-Centric Interface Design
Personalization at Its Core
Netflix’s design centers on creating a highly personalized and user-friendly interface. The platform is designed to make content discovery as straightforward and enjoyable as possible.
Principles of Netflix’s Design
Ease of Use: The platform is intuitively navigable, ensuring users can find what they want with minimal effort.
Customization: Netflix uses algorithms to personalize the user experience, recommending content based on individual viewing habits.
Visual Appeal: The design is visually appealing, with a focus on high-quality imagery and a clean layout.
Impact of Netflix’s Design Philosophy
Netflix’s approach has redefined the user experience in streaming services, prioritizing user preferences and ease of navigation.
Spotify’s Harmonious and Dynamic Design
Design That Resonates with Music
Spotify’s design is as dynamic and vibrant as the music it streams. The platform combines aesthetic appeal with functional simplicity to create an immersive listening experience.
Principles of Spotify’s Design
Aesthetic Engagement: The interface is visually engaging, enhancing the overall user experience.
Functional Fluidity: Spotify ensures seamless interaction, whether it’s searching for music, creating playlists, or exploring new genres.
Personalized Experience: The design supports personalized music recommendations, tailoring the experience to individual tastes.
Impact of Spotify’s Design Strategy
Spotify’s design has been instrumental in creating an engaging and personalized music streaming experience, setting a benchmark in the industry.
Dropbox’s Intuitive and Collaborative Design
Clarity and Collaboration at the Heart
Dropbox’s design philosophy prioritizes making file storage and sharing intuitive and collaborative. The interface is user-friendly, facilitating seamless collaboration and organization.
Principles of Dropbox’s Design
Simplicity and Clarity: The design is straightforward, making file management and collaboration easy for users of all technical levels.
Efficient Collaboration: Dropbox’s interface is tailored to enhance collaborative efforts, integrating smoothly with various productivity tools.
Secure and Reliable: The design also emphasizes security and reliability, crucial for storing and sharing important files.
Impact of Dropbox’s Design Approach
Dropbox’s design has transformed file storage and sharing, making it more accessible, efficient, and secure.
Xiaomi’s Balanced Approach to Design
Affordability Meets Innovation
Xiaomi’s design strategy finds a unique balance between affordability and cutting-edge innovation. Their products are designed to be accessible while incorporating the latest technological advancements.
Principles of Xiaomi’s Design
User-Friendly Technology: Xiaomi focuses on making technology accessible, ensuring their products are user-friendly and affordable.
Elegant Aesthetics: Despite the focus on affordability, Xiaomi does not compromise on aesthetics, offering sleek and modern designs.
Functionality and Durability: Xiaomi designs for functionality and durability, ensuring their products meet the daily needs of users.
Impact of Xiaomi’s Design Philosophy
Xiaomi’s approach has made advanced technology accessible to a broader audience, challenging the notion that high-quality design is synonymous with high cost.
Samsung’s Diverse and Inclusive Design
Versatility in Innovation
Samsung’s design principles are characterized by their versatility and commitment to inclusivity. They cater to a wide range of consumers, offering a variety of products from smartphones to home appliances.
Principles of Samsung’s Design
Diverse Product Range: Samsung designs for a diverse consumer base, ensuring their products meet various needs and preferences.
Innovative and User-Friendly: Samsung continuously innovates while keeping their designs user-friendly and intuitive.
Quality and Reliability: Their design ethos also emphasizes quality and reliability, ensuring their products are both durable and high-performing.
Impact of Samsung’s Design Strategy
Samsung’s design principles have contributed to its position as a leader in various tech sectors, known for its innovative, diverse, and reliable products.
Microsoft’s Design Language: Empowering Through Innovation
Functionality Meets Aesthetics
Microsoft’s design philosophy intertwines functionality with aesthetics, aiming to empower users through innovative and accessible technology.
Principles of Microsoft’s Design
Simplicity and Versatility: Microsoft focuses on creating designs that are simple yet versatile, catering to a broad user base from personal to professional use.
Intuitive User Experience: The design across Microsoft’s products, especially its software, is intuitive, ensuring users can navigate and utilize features with ease.
Harmonious Ecosystem: Microsoft strives to create a harmonious ecosystem where its various products and services seamlessly integrate, providing a cohesive user ### experience.
Impact of Microsoft’s Design Approach
Microsoft’s design principles have been fundamental in shaping the way we interact with technology, particularly in the personal computing and office productivity space. Their approach has consistently focused on enhancing user productivity and efficiency.
Conclusion
What are the good principles?
Simple
Have a real world examples
Guide design decisions
Reflect your brand
Understanding and applying good design principles is crucial in the tech industry. It’s not just about making products that look good — it’s about creating experiences that are meaningful, intuitive, and impactful. As technology and user needs evolve, so too must our approach to design. The principles outlined by these tech giants offer valuable insights into creating products that not only meet but exceed user expectations.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Interiorry is a Webflow template for Architecture and Construction Companies, Interior Design Studios and Architecture Studios with modern design. Perfect for growing your business.
Introducing Gilbbert — a modern Webflow template designed for designers who want to showcase their work through a portfolio website with a touch of aesthetic minimalism and sophistication.
Moore is a professional template for agencies, startups and consultancies. With a strong focus on clean aesthetics and smooth interactions it serves as the perfect foundation for showcasing your business in an appealing way.
SmartBot is a powerful Framer template for AI-powered products, seamlessly enhancing your startup or SaaS offering. Unlock the potential of AI with this powerful template.
Craft distinctive and personalized logos without depending on stock designs. Harness the prowess of A.I. to guide every facet of your logo design journey with
Typist helps make your prototypes look so so real by turning text layers into animated, typing text components. No more super-fake janky forms! Bring that chat interface you’re working on to life!
Retro Sneakers | Lettering & illustration by Ana Moreno
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Curious about what’s shaping the web this year? Explore our latest feature: Web Design Trends 2026 — a look at the boldest ideas, aesthetics, and innovations defining the next era of digital design.
The world of web design is constantly evolving, with new trends emerging all the time. Here are some of the most important design trends that are likely to shape the industry in 2023 and 2024.
3D Interaction
3D & 3D interaction are becoming increasingly popular in web design.
This is because 3D can be used to create more immersive and interactive experiences.
One of the main reasons for the rise of 3D in web design is the increasing accessibility of 3D tools for web designers. Tools like Spine have made it possible for designers with no prior 3D experience to create realistic and engaging 3D experiences for the web.
For example, the website for the new Apple iPhone 15 uses 3D to allow users to virtually experience the phone.
Beyond immersive visuals, 3D can also create playful and engaging interactions that make websites feel more like games.
Giant typography
Giant typography is another trend that is gaining popularity in web design. This is because giant typography can be used to create a bold and attention-grabbing visual statement. Giant typography can be used to highlight important information, create a sense of scale, or simply add a touch of personality to a website.
For example, the Anzo Studio website is almost entirely based on giant typography. It doesn’t take much to make this website feel special and stand out.
Another example of a website that uses giant typography to create uniqueness and character is the Synchrodogs website. The use of typography in this website actually creates the grid for the website and gives it personality and a memorable element. https://synchrodogs.com
AI-Generated Designs: The Next Big Thing in Web Design?
Artificial intelligence (AI) is rapidly changing the way we live and work, and web design is no exception. AI-generated designs are becoming increasingly popular as designers look for new and innovative ways to create engaging and visually appealing websites.
However, as of 2023, AI-generated designs are still not able to compete with human designers in terms of originality in real-world website design. The websites that AI can generate are often bland and simplistic in terms of structure.
Despite this, the field is developing at a rapid pace, and it is likely that we will see a significant leap in AI-generated design in 2024.
In addition, the use of AI can significantly reduce the time and cost of website design and development, making it a valuable tool for many web designers. relume — ai-site-builderAI Tools in Framer
Scrollytelling
Scrollytelling is a type of storytelling that unfolds as users scroll down a website. Scrollytelling can be used to tell a story, explain a concept, or simply entertain users. Scrollytelling can be a great way to engage users and keep them coming back for more.
No-code websites are websites that are created using a no-code tool. No-code tools allow users to create websites without having to know how to code. No-code websites are becoming increasingly popular as they make it easier for anyone to create a professional-looking website.
Examples of old and new tools for creating No Code websites
Wix Studio: A No-Code Tool that is Poised for a Major Breakthrough Wix Studio is a no-code website builder that has made a significant leap in capabilities and has adapted itself to professional designers. It is undoubtedly going to be a major player in 2024 alongside established and high-quality tools like Webflow and Framer.
AI-Driven Website Personalization
The future trend I see in website design is the use of AI to create a different experience of a website for each user.
Imagine a website that dynamically adjusts its appearance, layout, or language in real-time based on the unique preferences of each visitor.
This shift goes beyond mere content recommendations; it allows users to actively influence the site’s design elements, colors, language, and even interactive features while they navigate through the platform.
This trend heralds a new era where users wield partial control over their browsing experience, creating an interactive, user-driven web interface. It’s a step towards websites that adapt and transform on-the-fly, aligning perfectly with individual tastes and preferences.
This evolution signifies a departure from static, uniform designs to fluid, user-centric interfaces, shaping the future of web design as a personalized, AI-powered experience for everyone.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
Oman stands out as an exceptional Webflow SaaS template, providing a comprehensive solution for SaaS agencies and startups and businesses aiming for a visually striking, user-centric, and conversion-focused website.
Dataplace is one of the most modern, clean, and highly polished Webflow templates. Take your business to the next level and provide a better user experience to your clients.
This plugin converts text and vector nodes into 3D models with just one click! The converted models will be automatically placed and rendered with GPU ray-tracing. You can use it to render a nice 3D icon, text, or any other 3D-style images without being a 3D specialist.
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
Want even more inspiration? Follow Muzli on social media for your daily dose of design, innovation, and creativity right in your feed! Linkedin | Instagram | Twitter
![Export options menu OR Send to Claude Code modal]](https://cdn-images-1.medium.com/max/1600/1*dpOdMQbq2gLmCJ3zHk_-3Q.png)
![Frmt: Alphabet [Tubes & Wires]](https://cdn-images-1.medium.com/max/1600/0*lbAPhg9T983vdWZc)
![ASTRODITHER — Robert Borghesi LAB — [SIGNAL. LOST. BEAUTY. FOUND. DIGITAL. CHAOS.]](https://cdn-images-1.medium.com/max/1600/0*cVDWoHpjRQlw_2bv.jpg)
![ポスター Japanese Tea Culture [Posters]](https://feed.muzli.cloud/muzli_feed/wp-content/uploads/2024/12/31152616/Screenshot-2024-12-31-at-15.23.54-min-1024x797.png)
![Btn Bold Sans Font
[S] Mockup](https://feed.muzli.cloud/muzli_feed/wp-content/uploads/2024/12/26112441/Screenshot-at-Dec-26-11-23-50-min.png)
Meetup website design by 
Testimonial page design by 60MM
Portfolio website 
Portfolio website design by 
Bank by 
Bouquet — Augmented Reality Card by 
Pally | Restaurant Branding by velvele ™, Valeryia Herasimava and 
FOOD Coffee Block by 
The Blue Clown by 
by 
Impressive portfolio by 
Web design project by 
Dubai Design District by 
DANZERS by Fabien Rousseau, 
HOTEL TANGO | Pride Vodka by 
EARTHPURE SYSTEMS® by 
Estúdio Tura by 
Chilly’s Bottles Collaboration by 
Disaster Risk Response Program Manual by 
Holographic Brand Identity Mockups by 
Instinto by 
KOKUYO Sketch Book by 
Razziz® by 
RANDOM ILLUSTRATIONS by 
[ watashidayo ] — It’s me by 
Hidden Heroes — Packaging Illustration by 
Good luck trying to stand out in Times Square. Owen Barker ©
Did you know that the first Apple logo featured Isaac Newton sitting under the apple tree?
Blue is by far the most popular colour choice for logos.
We gave one of the generators a go. What do you think about the results?
Wood Mood by No5 Istanbul
The Makers by 
Saga Noren by 
Mononova by 
Tacos Del Alma by 
Sao Gerald by 
Grin by 
Joyful Woof by 
Curv Studio by 
Legg by 
Ballpark by 
University of the Arts Helsinki by 
Kukuriku by 
Re:Wear by 
Blackbound by 
The Frida Cinema by 
Offe by 
Zapier by 
Tilda by 
Woove by
Cubic by 
Squirrels by 
Fluency by 
Mosaica by 
Jetter by 
Derprosa Relife by 
Le Chocolat des Français — Packaging illustration by 
Flash Over by 
Art Website Design by 
Hike Flask №003 by 
Music by 
FREEPIK X ILUSTRONAUTA by 
Yamaha SEQTRAK CGI by 
Mirata by 
Jornal Insurgente | Skate Style by 
Podcast by 
BLABLABLA! by 
Life goes on by 
Creamly. by 
AI — Argentine Intelligence by 
Bong Hoa Nho exhibition by 
Article by 
CES on a clothing website
The navigation bar of a popular design studio
A job post from a major ed-tech company
Uizard AI Design Tool
Podcast by 
Website Design exploration : web motion graphics by 
SOPHIE | Queer Magazine by 
Ain’t Normal Coffee by 
Wavelink-1 by 
Article by 
Kynest — Product storytelling by 
Metis in Paris — Editorial by 
Neck Deep by 
Vibrary Digital LP Player by 
Article by 
Podcast by 
L’HORA DEL JAZZ by 
Gig Posters and Cover Albums by 
Indoor Sante by Benjamin Mira, 
Collage portrait by 
Article by 
Image by Author, made on Canva. Based on a slide from 
Image by Author, made on Canva. Based on “
Master Session by 
Share Sphere App by 
INPRNT by 
the ‘P’ BELIEF by 
LICKABITE by 
TEACHAT by TEACHAT and 
DINO KIDDO by 
Zoom Out by 
Enlève tes chaussons rouges 2021 by 
©Hebe Science by 
Hero Collective Mobile by 
NIKE // CNCPT E-commerce by 
SweatMate by 
Posters 2023 by 
KOOKYCREAM — NEW YEAR GIFT BOX by 
Salesforce CRM — Sales Analytics Software by 
TAC! Festival Branding by 
Exploration in texture and color by 
Fincare — Banking App by 
Live Streaming Selling Mobile Experience by 
Simple Investment app design by 
few illustrations from 2023 by 
Spark Graduation Visual Identity by 
ESTADIOS by 
Music Editor by 
Visual Journal is curated by 
Visual Journal is curated by 
つづく by 
Deli Stationery NewYear interactive packaging得力文具交互新年礼盒 by 
LUNAR NEW YEAR Gift Box 2024 | FG Organization by 
Goodness Co. — Branding & Packaging by 
Crypto Wallet App Design by 
Karst by 
小红书 阳台改造箱 by 
ZISSOU®. Identity by 
Mood by 
Loan Application by 
Trippy Board Game by 
“I’m a genius. You’re a fool” Scarves (2021) by 
《马蒂斯的旅行》绘本衍生品 by 
Characters for the new mushroom brand from Wiz Khalifa by 
MOWA® by 
a’ coffee brand design by 
Sugar CRM — SaaS UX UI Design by 
WELCOME TO MY WORLD by 
Based on a true story by 
adidas switch fwd kit by 
Dr Hahnz Brand Reinventing by 
Gig Posters 2023 by 
Réveillon Celebration | Visual Identity by 
Salesforce CRM — Sales Engagement Platform by 
‘SURFACE PLAY’ by 
Wholesome by 
甜星Star ｜ brand identity &packaging by 
