<!DOCTYPE html>
<!--[if lt IE 10]><html lang="en" class="ie9"><![endif]-->
<!--[if lt IE 9]><html lang="en" class="ie8"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
<head>
  
  <meta charset="UTF-8">

  <title>The Balsamiq Blog</title>

  <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/assets/favicon/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/assets/favicon/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="/assets/favicon/manifest.json">
  <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#000000">
  <link rel="shortcut icon" href="/assets/favicon/favicon.ico">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400&family=Lexend:wght@100..900&display=swap" rel="stylesheet" rel="preconnect">

  <meta name="theme-color" content="#eeeeee">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="News and announcements from your friends at Balsamiq.">
  <meta property="og:title" content="The Balsamiq Blog" />
  <meta property="og:type" content="website" />
  <meta property="og:description" content="News and announcements from your friends at Balsamiq." />
  <meta property="og:image" content="https://thumbs.balsamiq.com/t_blog.png" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@balsamiq" />
  <meta name="twitter:title" content="The Balsamiq Blog" />
  <meta name="twitter:description" content="News and announcements from your friends at Balsamiq." />
  <meta name="twitter:image" content="https://thumbs.balsamiq.com/t_blog.png" />

  <link rel="preconnect" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <link rel="stylesheet" href="/assets/css/balsamiq-complete.min.css?1781102723284" type="text/css" media="all" />

  <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="943339af-04da-49da-b0cc-824075c61a6b" data-widget-enabled="false" type="text/javascript"></script>
  <script src="https://accounts.google.com/gsi/client" async></script>
  <script src="/assets/js/balsamiq-complete.min.js?1781102723284"></script>

  <script>
                !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug getPageViewId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
                posthog.init('phc_tRci9ZCH9sQvV7DFCZMf1kp4epCtXas08FLZXuYc573', {
                    api_host: 'https://e.balsamiq.com',
                    person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
                });
                document.addEventListener('click', function(event) {
                    let link = event.target.closest('a');
                    if (!link) return;
                    let destinationURL = new URL(link.href);
                    if (destinationURL.hostname === 'balsamiq.cloud') {
                        const sessionId = window.posthog.get_session_id();
                        const distinctId = window.posthog.get_distinct_id();
                        destinationURL.searchParams.set('session_id', sessionId);
                        destinationURL.searchParams.set('distinct_id', distinctId);
                        link.href = destinationURL.toString();
                    }
                }, true);
            </script>

<!-- RightMessage -->
<script type="text/javascript">
(function(p, a, n, d, o, b, c) {
  window.RM = window.RM || [];
  o = n.createElement('script'); o.type = 'text/javascript'; o.async = true; o.src = 'https://t.rightmessage.com/'+p+'.js';
  b = n.getElementsByTagName('script')[0]; d = function(h, u, i, s) { var c = n.createElement('style'); c.id = 'rmcloak'+i;
      c.type = 'text/css'; c.appendChild(n.createTextNode('.rmcloak'+h+'{visibility:hidden}.rmcloak'+u+'{display:none}'+s));
      b.parentNode.insertBefore(c, b); return c; }; c = d('', '-hidden', '', '[data-rm-if],[data-rm-else-if],[data-rm-else]{display:none}'); d('-stay-invisible', '-stay-hidden', '-stay', '');
  setTimeout(o.onerror = function() { c.parentNode && c.parentNode.removeChild(c); }, a); b.parentNode.insertBefore(o, b);
})('309653765', 20000, document);
</script>

</head>

<body class="bsmq blogs nav-eggplant targetTop top" id="blog_home">
  <!-- GA - Google Tag Manager -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TMQ8XW" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-TMQ8XW');</script>
  <!-- END Google Tag Manager - balsamiq.com -->

  <header id="site-header" class="site-header" data-swiftype-index="false">
    <!--div id="notification-banner" class="notification-banner relative overflow-hidden py-4">
      <div class="pointer-events-none absolute left-1/2 -top-80 z-0
              h-[520px] w-[1200px] -translate-x-1/2
              bg-[radial-gradient(ellipse_at_center,rgba(236,72,153,0.35)_0%,rgba(124,58,237,0.18)_35%,rgba(0,0,0,0)_70%)]
              blur-3xl opacity-80">
      </div>
      <div class="container text-center px-10">
        <p class="m-0">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles-icon lucide-sparkles size-5 inline-block align-middle text-brightmagenta"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg>
          <span class="align-middle underline-a"><strong>NEW:</strong> AI prototyping + Balsamiq MCP server. <a href="/changelog/">Learn more →</a></span>
        </p>
      </div>
      <div class="absolute right-2 top-1/2 -translate-y-1/2">
          <button type="button" class="-mr-1 flex p-2"><span class="sr-only">Dismiss</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-6 w-6 text-white"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
      </div>
    </div-->

    <nav class="mx-auto primary-nav bg-eggplant" id="primary-nav" aria-label="Main">
      <div class="container flex justify-between py-4 md:py-8 pr-0 md:pr-10 2xl:pr-5">
        <div class="flex items-center md:hidden" id="logo">
          <a href="/"><img src="/assets/logomark.svg" height="45" width="45" alt="Balsamiq Logo" /></a>
        </div>

        <div class="items-center hidden md:flex">
          <a href="/"><img id="logo" class="max-w-[155px] md:max-w-[200px] md:h-[57px] rounded-none" src="/assets/logo.svg" width="266" height="60" alt="Balsamiq Logo" /></a>
        </div>

        <div class="hidden lg:flex items-center space-x-5 xl:space-x-10">
          <div class="group relative cursor-pointer py-2">
            <div class="flex items-center justify-between space-x-2">
              <a class="menu-hover flex items-center hover:underline" href="#">Product</a>
              <span>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </span>
            </div>
            <div class="dropdown-menu invisible absolute z-50 mt-2 flex flex-nowrap w-[218px] flex-col py-1 px-2 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none group-hover:visible">
              <a href="/product/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">Features</a>
              <a href="/product/prototypes/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">Prototypes</a>
              <a href="/product/ai/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">Balsamiq AI</a>
              <a href="/product/wireframes/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">Wireframes</a>
              <hr class="my-1 opacity-50">
              <a href="/changelog/" class="block px-4 py-2" role="menuitem">Changelog</a>
            </div>
          </div>

          <div class="group relative cursor-pointer py-2">
            <div class="flex items-center justify-between space-x-2">
              <a class="menu-hover flex items-center hover:underline" href="#">Use cases</a>
              <span>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </span>
            </div>
            <div class="dropdown-menu invisible absolute z-50 mt-2 flex flex-nowrap w-[200px] flex-col py-1 px-2 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none group-hover:visible">
              <a href="/product-managers/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">For PMs</a>
              <a href="/for-founders/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">For founders</a>
              <a href="/consultants/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">For consultants</a>
              <!--a href="/it/" class="block px-4 py-2 whitespace-nowrap" role="menuitem">For IT</a-->
              <hr class="my-1 opacity-50">
              <a href="/customers/" class="block px-4 py-2" role="menuitem">Customer stories</a>
            </div>
          </div>
          <a href="/pricing/">Pricing</a>

          <div class="group relative cursor-pointer py-2">
            <div class="flex items-center justify-between space-x-2">
              <a class="menu-hover flex items-center hover:underline" href="/resources/">Resources</a>
              <span>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </span>
            </div>
            <div class="dropdown-menu invisible absolute z-50 mt-2 flex flex-nowrap w-[230px] flex-col py-1 px-2 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none group-hover:visible">
              <a href="/support/" class="block px-4 py-2" role="menuitem">Help Center</a>
              <a href="/blog/" class="block px-4 py-2" role="menuitem">Blog</a>
              <a href="/learn/" class="block px-4 py-2">Balsamiq Academy</a>
              <a href="/good-product-club/" class="block px-4 py-2" role="menuitem">Good Product Club</a>
            </div>
          </div>
          <div>
            <a href="https://balsamiq.cloud/#login" class="btn btn-secondary py-3 px-6 rounded-2x btn-try">Log in</a>
            <a href="https://balsamiq.cloud/#signup" id="try-free-desktop" class="btn btn-primary py-3 px-6 rounded-2xl btn-try ml-1 xl:ml-4">Try it free</a>
          </div>
        </div>

        <div class="flex items-center lg:hidden">
          <a href="https://balsamiq.cloud/#signup" id="try-free" class="btn btn-primary btn-try px-5 h-[45px]">Try it free</a>

          <button id="menu-button" aria-label="menu" class="text-eggplant px-4 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </div>

      <div id="mobile-menu" class="mobile-menu lg:hidden hidden">
        <div class="p-2 px-6 pb-4 space-y-4 text-lg">
          <ul>
            <li>
              <details class="dropdown-item">
                <summary>
                  <div class="dropdown-label">
                    <div id="productMenu">Product</div>
                    <span class="arrow">
                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
                      </svg>
                    </span>
                  </div>
                </summary>
                <div class="dropwdown-list">
                  <ul>
                    <li><a href="/product/">Features</a></li>
                    <li><a href="/product/prototypes/">Prototypes</a></li>
                    <li><a href="/product/ai/">Balsamiq AI</a></li>
                    <li><a href="/product/wireframes/">Wireframes</a></li>
                    <li><a href="/changelog/">Changelog</a>
                  </ul>
                </div>
              </details>
            </li>
            <li>
              <details class="dropdown-item">
                <summary>
                  <div class="dropdown-label">
                    <div id="productMenu">Use cases</div>
                    <span class="arrow">
                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
                      </svg>
                    </span>
                  </div>
                </summary>
                <div class="dropwdown-list">
                  <ul>
                    <li><a href="/product-managers/">For PMs</a>
                    <li><a href="/for-founders/">For founders</a></li>
                    <li><a href="/consultants/">For consultants</a></li>
                    <!--li><a href="/it/">For IT</a></li-->
                    <hr class="my-1 opacity-50">
                    <li><a href="/customers/">Customer stories</a></li>
                  </ul>
                </div>
              </details>
            </li>
            <li><a href="/pricing/" class="block">Pricing</a></li>
            <li>
              <details class="dropdown-item">
                <summary>
                  <div class="dropdown-label">
                    <div id="resourcesMenu">Resources</div>
                    <span class="arrow">
                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
                      </svg>
                    </span>
                  </div>
                </summary>
                <div class="dropwdown-list">
                  <ul>
                    <li><a href="/support/">Help Center</a></li>
                    <li><a href="/blog/">Blog</a></li>
                    <li><a href="/learn/">Balsamiq Academy</a></li>
                    <li><a href="/good-product-club/">Good Product Club</a></li>
                  </ul>
                </div>
              </details>
            </li>
          </ul>
        </div>
        <div class="p-2 px-6 pb-10">
          <a href="https://balsamiq.cloud/#login" class="btn btn-secondary btn-try w-full">Log in</a>
          <a href="https://balsamiq.cloud/#signup" class="btn btn-primary btn-try w-full mt-4">Try it free</a>
        </div>
      </div>

      <script>
        (function () {
          const root   = document.documentElement;
          const header = document.getElementById('site-header');
          const navBtn = document.getElementById('menu-button');
          const mobileMenu = document.getElementById('mobile-menu');
          const banner = document.getElementById('notification-banner');
          if (!header) return;

          // --- Persist banner dismissal across pages (localStorage) ---
          const DISMISS_TTL_DAYS = 30; // set 0 for "forever"
          const BANNER_ID = banner?.dataset.bannerId || 'global-banner';
          const LS_KEY = `bsmq:banner-dismissed:${BANNER_ID}`;

          // Hide immediately if previously dismissed (prevents layout jump)
          if (banner) {
            try {
              const v = localStorage.getItem(LS_KEY);
              const now = Date.now();
              let dismissed = false;
              if (v && /^\d+$/.test(v)) dismissed = (+v) > now; // TTL mode (expiry timestamp)
              else if (v === '1') dismissed = true;             // forever mode
              if (dismissed) banner.classList.add('hidden');
            } catch (_) {}
          }

          // --- 1) Dynamic --header-h variable ---
          function setHeaderVar() {
            // Use offsetHeight to include padding/border
            root.style.setProperty('--header-h', header.offsetHeight + 'px');
          }
          setHeaderVar();

          // Window resize
          let rAF;
          window.addEventListener('resize', () => {
            if (rAF) cancelAnimationFrame(rAF);
            rAF = requestAnimationFrame(setHeaderVar);
          });

          // Header height can change (banner, mobile menu, breakpoints…)
          if ('ResizeObserver' in window) {
            new ResizeObserver(setHeaderVar).observe(header);
          }

          // When the mobile menu toggles, recalc after reflow
          navBtn?.addEventListener('click', () => {
            mobileMenu?.classList.toggle('hidden');
            requestAnimationFrame(setHeaderVar);
          });

          // Banner close (fade out → hide → persist dismissal → recalc header height)
          if (banner) {
            const closeBtn = banner.querySelector('button');
            if (closeBtn) {
              closeBtn.addEventListener('click', () => {
                banner.classList.add('opacity-0'); // fade out
                setTimeout(() => {
                  banner.classList.add('hidden');

                  // Persist dismissal
                  try {
                    if (DISMISS_TTL_DAYS > 0) {
                      const expiry = Date.now() + DISMISS_TTL_DAYS * 864e5;
                      localStorage.setItem(LS_KEY, String(expiry));
                    } else {
                      localStorage.setItem(LS_KEY, '1'); // forever
                    }
                  } catch (_) {}

                  setHeaderVar(); // header height changed
                }, 200); // must match duration-200
              });
            }
          }

          // --- 2) Shadow on scroll with IntersectionObserver ---
          const sentinel = document.createElement('div');
          sentinel.setAttribute('aria-hidden', 'true');
          sentinel.style.position = 'absolute';
          sentinel.style.top = '0';
          sentinel.style.height = '1px';
          document.body.prepend(sentinel);

          const io = new IntersectionObserver(([e]) => {
            if (e.isIntersecting) {
              header.classList.remove('shadow-md');
            } else {
              header.classList.add('shadow-md');
            }
          });
          io.observe(sentinel);
        })();
      </script>
    </nav>
  </header>


<div class="hero pb-10 bg-eggplant">
  <div class="hero-container text-white">
      <div class="hero-text">
        <h1 class="hero-main-title md:w-8/12">The Balsamiq Blog</h1>
        <div class="hero-sub-title underline-a">A blog for people who make products—no matter your job title.</div>
      </div>
  </div>
</div>

<main>
  <section class="pb-5 md:pb-10">
    <div class="container">
      <div class="card-item featured featured--blog">
    <div class="card-item__thumb">
        <a href="/blog/balsamiq-tips/">
        <img class="w-full h-full" src="/assets/blog/2026/05/balsamiq-tips-thumb.jpg" width="1768" height="1348" alt="5 Balsamiq tips from the team who built it" />
        </a>
    </div>
    <div class="card-item__content">
        <div class="card-item__pickedby"><h5 class="no-anchor">❤️ Most recent</h5></div>
        <div class="card-item__categories"><a class="tag" href="/blog/prototyping/">Prototyping</a>
<a class="tag" href="/blog/wireframing-101/">Wireframing 101</a></div>
        <h3 class="card-item__title no-anchor">
        <a href="/blog/balsamiq-tips/">5 Balsamiq tips from the team who built it</a>
        </h3>
        <div class="card-item__excerpt">Most users only scratch the surface of Balsamiq. Here are five practical tips and shortcuts from the Balsamiq team for getting the most out of the tool.</div>
        <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">May 21, 2026</div>
                </div>
            </div>
    </div>
    </div>
    </div>
  </section>

  <section class="pb-5 md:pb-10">
    <div class="container">
      <div class="flex flex-wrap justify-center gap-4 mt-4 mb-8 lg:px-0 2xl:px-12">
  <a class="btn btn-topic" href="/blog/all/">All</a>
  <a class="btn btn-topic" href="/blog/wireframing-101/">Wireframing 101</a>
  <a class="btn btn-topic" href="/blog/design-for-non-designers/">Design for non-designers</a>
  <a class="btn btn-topic" href="/blog/product-thinking/">Product thinking</a>
  <a class="btn btn-topic" href="/blog/artificial-intelligence">Artificial intelligence</a>
  <a class="btn btn-topic" href="/blog/prototyping/">Prototyping</a>
  <a class="btn btn-topic" href="/blog/good-product-club">Good Product Club</a>
  <a class="btn btn-topic" href="/blog/tools/">Tools</a>
  <a class="btn btn-topic" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
</div>
<script>
  const currentPath = window.location.pathname;
  const l = document.querySelectorAll('.btn.btn-topic');

  l.forEach(link => {
    if (currentPath === link.getAttribute('href')) {
      link.classList.add('selected');
    }
  });
</script>


    </div>
  </section>

  <section class="py-5 md:py-10 bg-light-lavender">
    <div class="container">
      <h2 class="m-0 mt-10 text-center md:text-left">Team favorites</h2>
      <p class="mb-12">The articles we keep coming back to—and think you might, too.</p>
    </div>
    <div class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10 mb-5 md:mb-10">
      <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/what-are-wireframes/">
                    <img src="/assets/learn/articles/what-are-wireframes.jpg" width="1200" height="672" alt="What is a wireframe? A guide for non-designers" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/what-are-wireframes/">What is a wireframe? A guide for non-designers</a>
            </h4>
            <div class="card-item__excerpt"><p>A guide for non-designers who want to learn the basics of wireframing—perfect for anyone looking to bring their digital projects to life.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">May 8, 2025</div>
                </div>
            </div>
        </div>
    </div>
      <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/mobile-app-wireframing-guide/">
                    <img src="/assets/learn/articles/creating-mobile-app-wireframes.jpg" width="1200" height="672" alt="How to create mobile app wireframes (in just 8 steps)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/mobile-app-wireframing-guide/">How to create mobile app wireframes (in just 8 steps)</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn how to wireframe a mobile app in 8 clear steps. Plan faster, design smarter, and build apps that users love—with no design experience required.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/learn/authors/nick-babich.png" alt="Nick Babich" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/nick-babich/">Nick Babich</a></span>
                    <div class="article-date">Apr 22, 2025</div>
                </div>
            </div>
        </div>
    </div>
      <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/wireflows/">
                    <img src="/assets/learn/articles/wireflows.png" width="1200" height="672" alt="Wireflows: A beginner&#39;s guide to clearer UI design" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/wireflows/">Wireflows: A beginner&#39;s guide to clearer UI design</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn what a wireflow is, how it compares to wireframes and user flow diagrams, and see real-life examples on creating user flows that actually make sense.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/mike.jpg" alt="Mike Angeles" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/mike-angeles/">Mike Angeles</a></span>
                    <div class="article-date">May 5, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </div>
  </section>

  <script>
  document.splideSettings = {
      type: 'loop',
      perPage: 3,
      gap: '2.5rem',
      pagination: true,
      arrows: false,
      breakpoints: {
          640: { perPage: 1 },
          1280: { perPage: 2 },
      },
  };
  </script>

  <section class="py-5 md:py-10 articles-carousel-section">
    <div class="container">
      <div class="title-box">
        <h2>Wireframing 101</h2>
        <div class="see-all-btn"><a href="/blog/wireframing-101/" class="btn btn-primary" aria-label="See all posts in Wireframing 101">See all</a></div>
      </div>
      <div class="articles_slider">
        <button id="carousel_wireframing_101_left_desktop" class="hidden lg:block custom-arrow custom-arrow-l" aria-label="Previous">
            <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
        <div id="carousel_wireframing_101_carousel" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                
    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/balsamiq-tips/">
                    <img src="/assets/blog/2026/05/balsamiq-tips-thumb.jpg" width="1768" height="1348" alt="5 Balsamiq tips from the team who built it" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/prototyping/">Prototyping</a>
<a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/balsamiq-tips/">5 Balsamiq tips from the team who built it</a>
            </h4>
            <div class="card-item__excerpt"><p>Most users only scratch the surface of Balsamiq. Here are five practical tips and shortcuts from the Balsamiq team for getting the most out of the tool.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">May 21, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/how-to-wireframe-contact-us-page/">
                    <img src="/assets/blog/2026/04/how-to-wireframe-contact-us-page-thumb.jpg" width="1768" height="1348" alt="How to wireframe a contact us page with Balsamiq" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
<a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/how-to-wireframe-contact-us-page/">How to wireframe a contact us page with Balsamiq</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn how to wireframe a contact us page in Balsamiq. Follow our step-by-step guide to get the structure, user flow, and fields right before you build.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Apr 21, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/how-to-wireframe-a-landing-page/">
                    <img src="/assets/blog/2026/02/how-to-wireframe-a-landing-page_thumb.jpg" width="1768" height="1348" alt="How to wireframe a landing page with Balsamiq" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
<a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/how-to-wireframe-a-landing-page/">How to wireframe a landing page with Balsamiq</a>
            </h4>
            <div class="card-item__excerpt"><p>The best landing pages start with a strong wireframe. Follow our 6-step guide to clarify your vision and align your team faster.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Feb 4, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/how-to-start-a-wireframe/">
                    <img src="/assets/learn/articles/how-to-start-a-wireframe-project.jpg" width="1200" height="672" alt="How to start a wireframe project in 6 steps" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/how-to-start-a-wireframe/">How to start a wireframe project in 6 steps</a>
            </h4>
            <div class="card-item__excerpt"><p>New to the UX world and wireframing? Learn how to start a wireframe by mapping ideas with low-fidelity tools—keeping the focus on usability, flow, and collaboration.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/leon.jpg" alt="Leon Barnard" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/leon-barnard/">Leon Barnard</a></span>
                    <div class="article-date">May 27, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/tips-presenting-wireframes/">
                    <img src="/assets/learn/articles/tips-for-presenting-your-wireframes-thumb.jpg" width="1200" height="672" alt="How to present wireframes to stakeholders: A step-by-step guide" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/tips-presenting-wireframes/">How to present wireframes to stakeholders: A step-by-step guide</a>
            </h4>
            <div class="card-item__excerpt"><p>Once you&#39;re done with your wireframes, you&#39;ll need to present them to get someone&#39;s approval. Learn 3 effective strategies to get buy-in and move forward.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/leon.jpg" alt="Leon Barnard" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/leon-barnard/">Leon Barnard</a></span>
                    <div class="article-date">May 20, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/wireframe-annotations/">
                    <img src="/assets/learn/articles/what-are-wireframes-annotation.jpg" width="1200" height="672" alt="How to use wireframe annotations (even if you&#39;re not a designer)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/wireframe-annotations/">How to use wireframe annotations (even if you&#39;re not a designer)</a>
            </h4>
            <div class="card-item__excerpt"><p>Wireframe annotations make designs look clear and collaboration feel smooth. Learn what they are and why you don&#39;t need designer-level skills to use them.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/learn/authors/julia.jpg" alt="Julia DeBari" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/julia-debari/">Julia DeBari</a></span>
                    <div class="article-date">May 9, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/what-are-wireframes/">
                    <img src="/assets/learn/articles/what-are-wireframes.jpg" width="1200" height="672" alt="What is a wireframe? A guide for non-designers" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/what-are-wireframes/">What is a wireframe? A guide for non-designers</a>
            </h4>
            <div class="card-item__excerpt"><p>A guide for non-designers who want to learn the basics of wireframing—perfect for anyone looking to bring their digital projects to life.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">May 8, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/mobile-app-wireframing-guide/">
                    <img src="/assets/learn/articles/creating-mobile-app-wireframes.jpg" width="1200" height="672" alt="How to create mobile app wireframes (in just 8 steps)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/mobile-app-wireframing-guide/">How to create mobile app wireframes (in just 8 steps)</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn how to wireframe a mobile app in 8 clear steps. Plan faster, design smarter, and build apps that users love—with no design experience required.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/learn/authors/nick-babich.png" alt="Nick Babich" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/nick-babich/">Nick Babich</a></span>
                    <div class="article-date">Apr 22, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    
                </ul>
            </div>
            <div class="mobile-navigation">
                <button id="carousel_wireframing_101_left_mobile" class="custom-arrow-mobile custom-arrow-mobile-l">
                <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                    <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
                </button>
                <ul class="splide__pagination"></ul>
                <button id="carousel_wireframing_101_right_mobile" class="custom-arrow-mobile custom-arrow-mobile-r">
                    <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
        <button id="carousel_wireframing_101_right_desktop" class="hidden lg:block custom-arrow custom-arrow-r" aria-label="Next">
        <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const carousel_wireframing_101_splide = new Splide('#carousel_wireframing_101_carousel', document.splideSettings).mount();
                const carousel_wireframing_101_prevBtns = [
                    document.getElementById('carousel_wireframing_101_left_mobile'),
                    document.getElementById('carousel_wireframing_101_left_desktop')
                ];
                const carousel_wireframing_101_nextBtns = [
                    document.getElementById('carousel_wireframing_101_right_mobile'),
                    document.getElementById('carousel_wireframing_101_right_desktop')
                ];
                carousel_wireframing_101_prevBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_wireframing_101_splide.go('<'));
                });
                carousel_wireframing_101_nextBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_wireframing_101_splide.go('>'));
                });
            });
        </script>
      </div>
      <div class="see-all-btn-mobile"><a href="/blog/wireframing-101/" class="btn btn-primary" aria-label="See all posts in Wireframing 101">See all</a></div>
    </div>
  </section>

  <div class="banner-apricot">
    <div class="squiggle" style="background-image: url('/assets/squiggle-white.png');"></div>
    <div class="container text">
      <h3 class="title">Want to see what's new in Balsamiq?</h3>
      <p class="text-center mx-auto">We're always making Balsamiq better for real product work. See what we've shipped lately.</p>
      <div class="button-box">
        <a href="/learn/product-updates/" class="btn btn-primary" aria-label="See product updates">See product updates</a>
      </div>
    </div>
  </div>

  <section class="py-5 md:py-10 articles-carousel-section bg-light-lavender">
    <div class="container">
      <div class="title-box">
        <h2>Design for non-designers</h2>
        <div class="see-all-btn"><a href="/blog/design-for-non-designers/" class="btn btn-primary" aria-label="See all posts in Design for non-designers">See all</a></div>
      </div>
      <div class="articles_slider">
        <button id="carousel_design_for_non_designers_left_desktop" class="hidden lg:block custom-arrow custom-arrow-l" aria-label="Previous">
            <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
        <div id="carousel_design_for_non_designers_carousel" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                
    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/how-to-wireframe-contact-us-page/">
                    <img src="/assets/blog/2026/04/how-to-wireframe-contact-us-page-thumb.jpg" width="1768" height="1348" alt="How to wireframe a contact us page with Balsamiq" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
<a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/how-to-wireframe-contact-us-page/">How to wireframe a contact us page with Balsamiq</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn how to wireframe a contact us page in Balsamiq. Follow our step-by-step guide to get the structure, user flow, and fields right before you build.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Apr 21, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/how-to-wireframe-a-landing-page/">
                    <img src="/assets/blog/2026/02/how-to-wireframe-a-landing-page_thumb.jpg" width="1768" height="1348" alt="How to wireframe a landing page with Balsamiq" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/wireframing-101/">Wireframing 101</a>
<a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/how-to-wireframe-a-landing-page/">How to wireframe a landing page with Balsamiq</a>
            </h4>
            <div class="card-item__excerpt"><p>The best landing pages start with a strong wireframe. Follow our 6-step guide to clarify your vision and align your team faster.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Feb 4, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/wireframe-vs-mockup-vs-prototype/">
                    <img src="/assets/blog/2025/12/wireframe-vs-mockup-vs-prototype_thumb.jpg" width="1768" height="1348" alt="Wireframe vs mockup vs prototype: How teams decide what to use and when" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
<a class="tag" href="/blog/prototyping/">Prototyping</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/wireframe-vs-mockup-vs-prototype/">Wireframe vs mockup vs prototype: How teams decide what to use and when</a>
            </h4>
            <div class="card-item__excerpt"><p>Avoid expensive rework by choosing the right design stage. Learn the difference between wireframe, mockup, and prototype to keep your team aligned and ship faster.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Jan 5, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/heuristics/">
                    <img src="/assets/blog/2025/09/usability-heuristics_thumb.jpg" width="1768" height="1348" alt="Usability heuristics: A sanity check before you ship your product" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/heuristics/">Usability heuristics: A sanity check before you ship your product</a>
            </h4>
            <div class="card-item__excerpt"><p>Usability heuristics help product teams catch UX issues early, align faster, and build clearer, more user-friendly designs with confidence.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/liz.jpg" alt="Liz Green" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/liz-green/">Liz Green</a></span>
                    <div class="article-date">Sep 15, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/button-design-best-practices/">
                    <img src="/assets/learn/articles/designing-for-action.jpg" width="1200" height="672" alt="17 button design best practices to make users actually click" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/button-design-best-practices/">17 button design best practices to make users actually click</a>
            </h4>
            <div class="card-item__excerpt"><p>Discover how to design buttons that look clickable, feel intuitive, and encourage action. Get smart about structure, copy, and flow.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/billy.jpg" alt="Billy Carlson" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/billy-carlson/">Billy Carlson</a></span>
                    <div class="article-date">Apr 22, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/buttons-links/">
                    <img src="/assets/learn/articles/when-to-use-buttons-and-links.jpg" width="1200" height="672" alt="When to use buttons and links (+ good &amp; bad examples)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/buttons-links/">When to use buttons and links (+ good &amp; bad examples)</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn the key differences between buttons and links, when to use each, and how thoughtful design choices can improve your user experience.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/learn/authors/julia.jpg" alt="Julia DeBari" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/julia-debari/">Julia DeBari</a></span>
                    <div class="article-date">Apr 17, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/wireframing-for-everyone-book/">
                    <img src="/assets/blog/2023/05/wireframing-book-blog-post.jpg" width="1200" height="630" alt="Wireframing for everyone, the book, is here!" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
<a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/wireframing-for-everyone-book/">Wireframing for everyone, the book, is here!</a>
            </h4>
            <div class="card-item__excerpt"><p>We wrote a book to help everyone participate in the design process! It’s about better ways to make wireframes and use them with your team. Order your copy now.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/leon.jpg" alt="Leon Barnard" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/leon-barnard/">Leon Barnard</a></span>
                    <div class="article-date">May 25, 2023</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/develop-a-designers-eye/">
                    <img src="/assets/learn/articles/develop-a-designers-eye.jpg" width="1200" height="672" alt="Use wireframes to develop your designer’s eye" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/develop-a-designers-eye/">Use wireframes to develop your designer’s eye</a>
            </h4>
            <div class="card-item__excerpt"><p>Even if you don’t call yourself a designer, there are some easy tips and techniques to help you see a digital product and its usability like a designer.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/billy.jpg" alt="Billy Carlson" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/billy-carlson/">Billy Carlson</a></span>
                    <div class="article-date">Oct 24, 2022</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    
                </ul>
            </div>
            <div class="mobile-navigation">
                <button id="carousel_design_for_non_designers_left_mobile" class="custom-arrow-mobile custom-arrow-mobile-l">
                <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                    <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
                </button>
                <ul class="splide__pagination"></ul>
                <button id="carousel_design_for_non_designers_right_mobile" class="custom-arrow-mobile custom-arrow-mobile-r">
                    <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
        <button id="carousel_design_for_non_designers_right_desktop" class="hidden lg:block custom-arrow custom-arrow-r" aria-label="Next">
        <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const carousel_design_for_non_designers_splide = new Splide('#carousel_design_for_non_designers_carousel', document.splideSettings).mount();
                const carousel_design_for_non_designers_prevBtns = [
                    document.getElementById('carousel_design_for_non_designers_left_mobile'),
                    document.getElementById('carousel_design_for_non_designers_left_desktop')
                ];
                const carousel_design_for_non_designers_nextBtns = [
                    document.getElementById('carousel_design_for_non_designers_right_mobile'),
                    document.getElementById('carousel_design_for_non_designers_right_desktop')
                ];
                carousel_design_for_non_designers_prevBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_design_for_non_designers_splide.go('<'));
                });
                carousel_design_for_non_designers_nextBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_design_for_non_designers_splide.go('>'));
                });
            });
        </script>
      </div>
      <div class="see-all-btn-mobile"><a href="/blog/design-for-non-designers/" class="btn btn-primary" aria-label="See all posts in Design for non-designers">See all</a></div>
    </div>
  </section>

  <div class="banner-apricot">
    <div class="squiggle" style="background-image: url('/assets/squiggle-white.png');"></div>
    <div class="container text">
      <h3 class="title">Balsamiq Academy: Learn it. Sketch it. Ship it.</h3>
      <p class="text-center mx-auto">From first clicks to finished wireframes, we've got you covered with bite-sized courses and expert guidance.</p>
      <div class="button-box">
        <a href="/learn/" class="btn btn-primary" aria-label="Go to Learn page">Take me there</a>
      </div>
    </div>
  </div>

  <section class="py-5 md:py-10 articles-carousel-section">
    <div class="container">
      <div class="title-box">
        <h2>Product thinking</h2>
        <div class="see-all-btn"><a href="/blog/product-thinking/" class="btn btn-primary" aria-label="See all posts in Product thinking">See all</a></div>
      </div>
      <div class="articles_slider">
        <button id="carousel_product_thinking_left_desktop" class="hidden lg:block custom-arrow custom-arrow-l" aria-label="Previous">
            <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
        <div id="carousel_product_thinking_carousel" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                
    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/uncovering-edge-cases/">
                    <img src="/assets/blog/2026/04/uncovering-edge-cases-thumb.jpg" width="1768" height="1348" alt="How to find edge cases before they become expensive issues" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/uncovering-edge-cases/">How to find edge cases before they become expensive issues</a>
            </h4>
            <div class="card-item__excerpt"><p>Level up your PM skills with real-world advice from the Good Product Club. Learn how seasoned product leaders uncover edge cases and protect the user experience.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">Apr 14, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/vibe-coding/">
                    <img src="/assets/blog/2026/04/vibe-coding-thumb.jpg" width="1768" height="1348" alt="How product builders use vibe coding the right way" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/vibe-coding/">How product builders use vibe coding the right way</a>
            </h4>
            <div class="card-item__excerpt"><p>Vibe coding is fast, but is it sustainable? We asked real builders to cut through the hype and share where AI-driven coding actually works and where it falls apart.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Apr 9, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/product-thinking-advice/">
                    <img src="/assets/blog/2026/01/product-thinking-advice-thumb.jpg" width="1768" height="1348" alt="What 7 PMs wish everyone knew about product thinking" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/product-thinking-advice/">What 7 PMs wish everyone knew about product thinking</a>
            </h4>
            <div class="card-item__excerpt"><p>Shipping fast isn&#39;t always shipping smart. Discover 7 hard-won lessons on product thinking, prioritization, and vision from PMs with 30+ years of experience.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Jan 28, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/how-can-product-teams-balance-speed-with-clarity/">
                    <img src="/assets/blog/2025/11/how-can-product-teams-balance-speed-with-clarity_thumb.jpg" width="1768" height="1348" alt="How product managers use clarity to move faster" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/artificial-intelligence/">Artificial intelligence</a>
<a class="tag" href="/blog/product-thinking/">Product thinking</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/how-can-product-teams-balance-speed-with-clarity/">How product managers use clarity to move faster</a>
            </h4>
            <div class="card-item__excerpt"><p>Experienced PMs share how they balance speed with clarity by using judgment, low-fidelity wireframes, and well-timed pauses to avoid rework.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Nov 26, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/translate-market-signals-into-product-decisions/">
                    <img src="/assets/blog/2025/11/translate-market-signals-into-product-decisions_thumb.jpg" width="1768" height="1348" alt="How to translate noisy market signals into product decisions PMs can use" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
<a class="tag" href="/blog/good-product-club/">Good Product Club</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/translate-market-signals-into-product-decisions/">How to translate noisy market signals into product decisions PMs can use</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn to separate signal from noise: a practical guide for PMs to turn user, competitor, and trend data into prioritized product decisions.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Nov 25, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/wireflows/">
                    <img src="/assets/learn/articles/wireflows.png" width="1200" height="672" alt="Wireflows: A beginner&#39;s guide to clearer UI design" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/wireflows/">Wireflows: A beginner&#39;s guide to clearer UI design</a>
            </h4>
            <div class="card-item__excerpt"><p>Learn what a wireflow is, how it compares to wireframes and user flow diagrams, and see real-life examples on creating user flows that actually make sense.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/mike.jpg" alt="Mike Angeles" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/mike-angeles/">Mike Angeles</a></span>
                    <div class="article-date">May 5, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/software-spec-wireframing/">
                    <img src="/assets/learn/articles/software-spec-wireframing.jpg" width="1200" height="672" alt="Accelerate your B2B software spec and wireframing process" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/software-spec-wireframing/">Accelerate your B2B software spec and wireframing process</a>
            </h4>
            <div class="card-item__excerpt"><p>A software specification answers the what, why, and how. Here are 7 proven tips to create better specs and wireframes before moving to implementation.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/learn/authors/diarmuid-glynn.jpg" alt="Diarmuid Glynn" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/diarmuid-glynn/">Diarmuid Glynn</a></span>
                    <div class="article-date">Nov 7, 2022</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/pruning-software/">
                    <img src="/assets/blog/2024/09/pruning1.jpg" width="900" height="601" alt="How to periodically prune your software" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/product-thinking/">Product thinking</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/pruning-software/">How to periodically prune your software</a>
            </h4>
            <div class="card-item__excerpt"><p>Digital products go through cycles of expansion and simplification. Today we focus on the “adult life” phase, which is where Balsamiq Wireframes is right now.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">Oct 5, 2022</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    
                </ul>
            </div>
            <div class="mobile-navigation">
                <button id="carousel_product_thinking_left_mobile" class="custom-arrow-mobile custom-arrow-mobile-l">
                <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                    <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
                </button>
                <ul class="splide__pagination"></ul>
                <button id="carousel_product_thinking_right_mobile" class="custom-arrow-mobile custom-arrow-mobile-r">
                    <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
        <button id="carousel_product_thinking_right_desktop" class="hidden lg:block custom-arrow custom-arrow-r" aria-label="Next">
        <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const carousel_product_thinking_splide = new Splide('#carousel_product_thinking_carousel', document.splideSettings).mount();
                const carousel_product_thinking_prevBtns = [
                    document.getElementById('carousel_product_thinking_left_mobile'),
                    document.getElementById('carousel_product_thinking_left_desktop')
                ];
                const carousel_product_thinking_nextBtns = [
                    document.getElementById('carousel_product_thinking_right_mobile'),
                    document.getElementById('carousel_product_thinking_right_desktop')
                ];
                carousel_product_thinking_prevBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_product_thinking_splide.go('<'));
                });
                carousel_product_thinking_nextBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_product_thinking_splide.go('>'));
                });
            });
        </script>
      </div>
      <div class="see-all-btn-mobile"><a href="/blog/product-thinking/" class="btn btn-primary" aria-label="See all posts in Product thinking">See all</a></div>
    </div>
  </section>

  <div class="banner-apricot">
  <div class="squiggle" style="background-image: url('/assets/squiggle-white.png');"></div>
  <div class="container text">
    <h3 class="title">Build your first wireframe in Balsamiq</h3>
    <div class="button-box">
      <a href="https://balsamiq.cloud/#signup" class="btn btn-primary" aria-label="Go to Balsamiq Cloud page">Try it free</a>
    </div>
  </div>
</div>


  <section class="py-5 md:py-10 articles-carousel-section bg-light-lavender">
    <div class="container">
      <div class="title-box">
        <h2>Tools</h2>
        <div class="see-all-btn"><a href="/blog/tools/" class="btn btn-primary" aria-label="See all posts in Tools">See all</a></div>
      </div>
      <div class="articles_slider">
        <button id="carousel_tools_left_desktop" class="hidden lg:block custom-arrow custom-arrow-l" aria-label="Previous">
            <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
        <div id="carousel_tools_carousel" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                
    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/v0-vercel-alternatives/">
                    <img src="/assets/blog/2026/05/v0-alternatives-thumb.jpg" width="1768" height="1348" alt="7 v0 alternatives for 2026: Build better prototypes and apps (with less rework)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/v0-vercel-alternatives/">7 v0 alternatives for 2026: Build better prototypes and apps (with less rework)</a>
            </h4>
            <div class="card-item__excerpt"><p>Looking for the best v0 alternative in 2026? We compare 7 tools based on features, pricing, and value to help you pick the right solution for your workflow.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/virgin.jpg" alt="Virgin Pereira" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/virgin-pereira/">Virgin Pereira</a></span>
                    <div class="article-date">May 6, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/bolt-ai-alternatives/">
                    <img src="/assets/blog/2026/04/bolt-alternatives-thumb.jpg" width="1768" height="1348" alt="7 Bolt AI alternatives for building the right thing" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/bolt-ai-alternatives/">7 Bolt AI alternatives for building the right thing</a>
            </h4>
            <div class="card-item__excerpt"><p>Not happy with Bolt AI’s output or token costs? We review 7 Bolt alternatives by features, pricing, and use cases to help you build better products.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/virgin.jpg" alt="Virgin Pereira" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/virgin-pereira/">Virgin Pereira</a></span>
                    <div class="article-date">Apr 13, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/excalidraw-alternatives/">
                    <img src="/assets/blog/2026/02/5-excalidraw-alternatives-thumb.jpg" width="1768" height="1348" alt="Top 5 Excalidraw alternatives for PMs &amp; devs in 2026" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/excalidraw-alternatives/">Top 5 Excalidraw alternatives for PMs &amp; devs in 2026</a>
            </h4>
            <div class="card-item__excerpt"><p>Hit Excalidraw’s limits? We’ve rounded up five Excalidraw alternatives in 2026, compared by features, pros &amp; cons, pricing, and use cases for product teams.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/virgin.jpg" alt="Virgin Pereira" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/virgin-pereira/">Virgin Pereira</a></span>
                    <div class="article-date">Feb 13, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/replit-alternatives/">
                    <img src="/assets/blog/2026/01/replit-alternatives-thumb.jpg" width="1768" height="1348" alt="Top 6 Replit alternatives (2026 feature and pricing comparison)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/replit-alternatives/">Top 6 Replit alternatives (2026 feature and pricing comparison)</a>
            </h4>
            <div class="card-item__excerpt"><p>Replit not meeting your needs anymore? Explore the best Replit alternatives based on use cases, features, pros and cons, and pricing.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/peldi.jpg" alt="Peldi Guilizzoni" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/peldi-guilizzoni/">Peldi Guilizzoni</a></span>
                    <div class="article-date">Jan 20, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/lovable-alternatives/">
                    <img src="/assets/blog/2025/12/lovable-alternatives-thumb.jpg" width="1768" height="1348" alt="6 Best Lovable alternatives in 2026 (Features + pricing compared)" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/lovable-alternatives/">6 Best Lovable alternatives in 2026 (Features + pricing compared)</a>
            </h4>
            <div class="card-item__excerpt"><p>Lovable not meeting your needs anymore? Explore the top Lovable alternatives for prototyping, product thinking, collaboration, and full-stack development.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/virgin.jpg" alt="Virgin Pereira" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/virgin-pereira/">Virgin Pereira</a></span>
                    <div class="article-date">Dec 19, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/is-canva-good-for-wireframing/">
                    <img src="/assets/blog/2025/07/canva-wireframes-thumb.jpg" width="1768" height="1348" alt="Is Canva good for wireframing?" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/is-canva-good-for-wireframing/">Is Canva good for wireframing?</a>
            </h4>
            <div class="card-item__excerpt"><p>Wondering if Canva is good for wireframing? Learn why low-fidelity tools like Balsamiq are better suited for clear, fast, and collaborative product thinking.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Jul 22, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/miro-alternatives/">
                    <img src="/assets/learn/articles/6-miro-alternatives.jpg" width="1200" height="672" alt="6 Best Miro alternatives for product builders in 2026" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/miro-alternatives/">6 Best Miro alternatives for product builders in 2026</a>
            </h4>
            <div class="card-item__excerpt"><p>Miro too cluttered? Not meeting your team’s needs anymore? Discover 6 Miro alternatives built for faster decision-making, lean teams, and focused product work.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Jun 5, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/figma-alternatives/">
                    <img src="/assets/learn/articles/5-figma-alternatives.jpg" width="1200" height="672" alt="5 Figma alternatives in 2026 for product thinking &amp; UI design" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/tools/">Tools</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/figma-alternatives/">5 Figma alternatives in 2026 for product thinking &amp; UI design</a>
            </h4>
            <div class="card-item__excerpt"><p>Figma too complex or pricey? Explore 5 Figma alternatives for product thinking, early-stage design, and prototyping.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">May 22, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    
                </ul>
            </div>
            <div class="mobile-navigation">
                <button id="carousel_tools_left_mobile" class="custom-arrow-mobile custom-arrow-mobile-l">
                <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                    <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
                </button>
                <ul class="splide__pagination"></ul>
                <button id="carousel_tools_right_mobile" class="custom-arrow-mobile custom-arrow-mobile-r">
                    <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
        <button id="carousel_tools_right_desktop" class="hidden lg:block custom-arrow custom-arrow-r" aria-label="Next">
        <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const carousel_tools_splide = new Splide('#carousel_tools_carousel', document.splideSettings).mount();
                const carousel_tools_prevBtns = [
                    document.getElementById('carousel_tools_left_mobile'),
                    document.getElementById('carousel_tools_left_desktop')
                ];
                const carousel_tools_nextBtns = [
                    document.getElementById('carousel_tools_right_mobile'),
                    document.getElementById('carousel_tools_right_desktop')
                ];
                carousel_tools_prevBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_tools_splide.go('<'));
                });
                carousel_tools_nextBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_tools_splide.go('>'));
                });
            });
        </script>
      </div>
      <div class="see-all-btn-mobile"><a href="/blog/tools/" class="btn btn-primary" aria-label="See all posts in Tools">See all</a></div>
    </div>
  </section>

  <section class="py-5 md:py-10 articles-carousel-section">
    <div class="container">
      <div class="title-box">
        <h2>Life at Balsamiq</h2>
        <div class="see-all-btn"><a href="/blog/life-at-balsamiq/" class="btn btn-primary" aria-label="See all posts in Life at Balsamiq">See all</a></div>
      </div>
      <div class="articles_slider">
        <button id="carousel_life_at_balsamiq_left_desktop" class="hidden lg:block custom-arrow custom-arrow-l" aria-label="Previous">
            <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
        <div id="carousel_life_at_balsamiq_carousel" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                
    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/introducing-prototyping/">
                    <img src="/assets/blog/2026/03/introducing-prototyping-in-balsamiq_thumb.jpg" width="1768" height="1348" alt="Introducing prototyping in Balsamiq" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/introducing-prototyping/">Introducing prototyping in Balsamiq</a>
            </h4>
            <div class="card-item__excerpt"><p>You can now generate interactive prototypes from your wireframes in Balsamiq, and connect your projects to Claude, ChatGPT, and other AI tools with our MCP server.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Mar 19, 2026</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/fresh-new-look/">
                    <img src="/assets/blog/2025/02/thumb-new-ui.jpg" width="1000" height="640" alt="Balsamiq&#39;s next chapter: A fresh new look for a well-loved tool" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/fresh-new-look/">Balsamiq&#39;s next chapter: A fresh new look for a well-loved tool</a>
            </h4>
            <div class="card-item__excerpt"><p>Launching a new brand, a new website, and a new UI for our wireframing tool! A design update that doesn’t change our focus: speed and clarity for product teams.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Feb 26, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/looking-back-2024/">
                    <img src="/assets/blog/2025/02/looking-back-2024.jpg" width="1000" height="640" alt="Looking back at Balsamiq&#39;s 2024" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/looking-back-2024/">Looking back at Balsamiq&#39;s 2024</a>
            </h4>
            <div class="card-item__excerpt"><p>In 2024 we pruned to grow, we focused on clarity, and we adapted to embrace data analysis. Read about all the improvements and new features, too!</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Feb 4, 2025</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/locations/">
                    <img src="/assets/blog/2024/03/map-location.jpg" width="1500" height="684" alt="Where in the world is Balsamiq?" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/locations/">Where in the world is Balsamiq?</a>
            </h4>
            <div class="card-item__excerpt"><p>We have people in the USA (in California and Illinois), and Europe. This allows us to provide top-notch customer support and gives us a diverse and global culture.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Mar 5, 2024</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/looking-back-2023/">
                    <img src="/assets/blog/2024/02/2023.jpg" width="1200" height="630" alt="Looking back at Balsamiq’s 2023" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/looking-back-2023/">Looking back at Balsamiq’s 2023</a>
            </h4>
            <div class="card-item__excerpt"><p>A detailed recap of what we did in 2023 and a peek into our plans for 2024.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Feb 9, 2024</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/wireframing-for-everyone-book/">
                    <img src="/assets/blog/2023/05/wireframing-book-blog-post.jpg" width="1200" height="630" alt="Wireframing for everyone, the book, is here!" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
<a class="tag" href="/blog/design-for-non-designers/">Design for non-designers</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/wireframing-for-everyone-book/">Wireframing for everyone, the book, is here!</a>
            </h4>
            <div class="card-item__excerpt"><p>We wrote a book to help everyone participate in the design process! It’s about better ways to make wireframes and use them with your team. Order your copy now.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/leon.jpg" alt="Leon Barnard" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/leon-barnard/">Leon Barnard</a></span>
                    <div class="article-date">May 25, 2023</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/looking-back-2022/">
                    <img src="/assets/blog/2023/03/looking-back-2022.jpg" width="1200" height="630" alt="Looking back at Balsamiq’s 2022" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/looking-back-2022/">Looking back at Balsamiq’s 2022</a>
            </h4>
            <div class="card-item__excerpt"><p>We&#39;ve changed a lot in the last year! Here&#39;s our traditional recap of what we did in 2022 and our plans for 2023.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Mar 20, 2023</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    

    <li class="splide__slide">
        <div class="card-item">
        
            <div class="card-item__thumb">
                <a href="/blog/new-hires-2022/">
                    <img src="/assets/blog/2022/12/arielle-jr.jpg" width="1200" height="630" alt="Welcome Jonathan Race, business manager, and Arielle Kimbarovsky, head of marketing" />
                </a>
            </div>
        
        <div class="card-item__content">
            
        <div class="card-item__categories">
            <a class="tag" href="/blog/life-at-balsamiq/">Life at Balsamiq</a>
        </div>
            <h4 class="card-item__title no-anchor">
            <a href="/blog/new-hires-2022/">Welcome Jonathan Race, business manager, and Arielle Kimbarovsky, head of marketing</a>
            </h4>
            <div class="card-item__excerpt"><p>The Balsamiq team is growing! Join us in welcoming two new team members, JR and Arielle, in new roles.</p></div>
            <div class="card-item__meta">
                
                <div class="card-item__avatar">
                    <img src="/assets/company/arielle.jpg" alt="Arielle Johncox" class="author-avatar" />
                </div>
                <div class="card-item__info">
                    <span class="author-name">By <a href="/author/arielle-johncox/">Arielle Johncox</a></span>
                    <div class="article-date">Dec 21, 2022</div>
                </div>
            </div>
        </div>
    </div>
    </li>
    
                </ul>
            </div>
            <div class="mobile-navigation">
                <button id="carousel_life_at_balsamiq_left_mobile" class="custom-arrow-mobile custom-arrow-mobile-l">
                <svg viewBox="0 0 24.13 18.47" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.23 16.97L1.5 9.23 9.23 1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                    <path d="M22.63 9.23H1.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                </svg>
                </button>
                <ul class="splide__pagination"></ul>
                <button id="carousel_life_at_balsamiq_right_mobile" class="custom-arrow-mobile custom-arrow-mobile-r">
                    <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
        <button id="carousel_life_at_balsamiq_right_desktop" class="hidden lg:block custom-arrow custom-arrow-r" aria-label="Next">
        <svg viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9 2.06l7.73 7.74-7.73 7.73" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M1.5 9.8h21.13" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const carousel_life_at_balsamiq_splide = new Splide('#carousel_life_at_balsamiq_carousel', document.splideSettings).mount();
                const carousel_life_at_balsamiq_prevBtns = [
                    document.getElementById('carousel_life_at_balsamiq_left_mobile'),
                    document.getElementById('carousel_life_at_balsamiq_left_desktop')
                ];
                const carousel_life_at_balsamiq_nextBtns = [
                    document.getElementById('carousel_life_at_balsamiq_right_mobile'),
                    document.getElementById('carousel_life_at_balsamiq_right_desktop')
                ];
                carousel_life_at_balsamiq_prevBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_life_at_balsamiq_splide.go('<'));
                });
                carousel_life_at_balsamiq_nextBtns.forEach(btn => {
                    if (btn) btn.addEventListener('click', () => carousel_life_at_balsamiq_splide.go('>'));
                });
            });
        </script>
      </div>
      <div class="see-all-btn-mobile"><a href="/blog/life-at-balsamiq/" class="btn btn-primary" aria-label="See all posts in Life at Balsamiq">See all</a></div>
    </div>
  </section>
</main>

<footer>
    <div class="container footer-container">
        <div class="pb-6 lg:pb-0 lg:pr-10 border-b border-white/20 lg:border-0">
            <div class="mb-5">
                <a href="/">
                    <img id="footer-logo" alt="Balsamiq Logo" class="max-w-[155px] rounded-none" src="/assets/logo-white.svg" width="209" height="48" />
                </a>
            </div>
            <form id="cio_footer_inputForm" class="justify-center flex-col items-start mt-4">
    <div class="w-full flex flex-col">
        <div class="form-control mb-3">
            <input id="cio_footer_inputEmail" type="email" class="w-full border border-eggplant px-4 py-2 text-sm rounded-xl max-w-[400px]" placeholder="Enter your email" required>
        </div>
    </div>
    <div class="w-full form-control mb-2">
        <div class="checkbox text-left text-xs gap-2">
            <input type="checkbox" id="cio_footer_pp" class="border border-eggplant mini-checkbox" style="border-radius:5px !important;">
            <label for="cio_footer_pp" class="leading-none" style="margin:0 !important;">I have read and agree to Balsamiq's <a href="/legal/privacy/" class="underline"
                    target="_blank" rel="noopener">Privacy Policy</a>. <span class="redmed">*</span></label>
        </div>
    </div>
    <div>
        <input id="cio_footer_joinbtn" class="btn btn-primary btn-sm text-sm btn-outlined border border-primary" disabled type="submit" value="I'm in!">
    </div>
    <div class="w-full mt-3">
        <div id="cio_footer_responseMessage" class="mt-0 lexend-500 text-sm"></div>
    </div>
</form>
<script>
    BLQ.setUpCustomerIoForm('cio_footer', 'newsletter', 'subscribed_to_newsletter');
</script>

        </div>
        <div class="footer-section">
            <button class="footer-section-toggle" aria-expanded="false" aria-controls="footer-section-product-links">
                <span class="footer-section-title">Product</span>
                <svg class="footer-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            <div id="footer-section-product-links" class="footer-section-links">
                <ul>
                    <li><a href="/product/">Features</a></li>
                    <li><a href="/product/ai/">Balsamiq AI</a></li>
                    <li><a href="/pricing/">Pricing</a></li>
                    <li><a href="/product/prototypes/">Prototypes</a></li>
                    <li><a href="/product/wireframes/">Wireframes</a></li>
                    <li><a href="/comparisons/">Balsamiq vs other tools</a></li>
                    <li><a href="/changelog/">Changelog</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-section">
            <button class="footer-section-toggle" aria-expanded="false" aria-controls="footer-section-resources-links">
                <span class="footer-section-title">Use cases</span>
                <svg class="footer-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            <div id="footer-section-resources-links" class="footer-section-links">
                <ul>
                    <li><a href="/product-managers/">For PMs</a></li>
                    <li><a href="/for-founders/">For founders</a></li>
                    <li><a href="/consultants/">For consultants</a></li>
                    <li><a href="/product/desktop/">Balsamiq for Desktop</a></li>
                    <li><a href="/product/confluence">Balsamiq for Confluence</a></li>
                    <li><a href="/product/jira">Balsamiq for Jira</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-section">
            <button class="footer-section-toggle" aria-expanded="false" aria-controls="footer-section-community-links">
                <span class="footer-section-title">Resources</span>
                <svg class="footer-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            <div id="footer-section-community-links" class="footer-section-links">
                <ul>
                    <li><a href="/blog/">Balsamiq Blog</a></li>
                    <li><a href="/support/">Help Center</a></li>
                    <li><a href="/changelog/">Changelog</a></li>
                    <li><a href="/customers/">Customer stories</a></li>
                    <li><a href="/good-product-club/">Good Product Club</a></li>
                    <li><a href="/learn/">Balsamiq Academy</a></li>
                    <li><a href="https://status.balsamiq.com">Server status</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-section">
            <button class="footer-section-toggle" aria-expanded="false" aria-controls="footer-section-company-links">
                <span class="footer-section-title">Company</span>
                <svg class="footer-chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            <div id="footer-section-company-links" class="footer-section-links">
                <ul>
                    <li><a href="/company/">About us</a></li>
                    <li><a href="/company/careers/">Careers</a></li>
                    <li><a href="/research/">Research program</a></li>
                    <li><a href="/slack/">Slack community</a></li>
                    <li><a href="/nonprofits">Balsamiq for nonprofits</a></li>
                    <li><a href="/brand/">Brand assets</a></li>
                    <li><a href="/legal/">Legal</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container text-xs">
        <div class="flex flex-row gap-4 lg:gap-5 mt-10 mb-6 lg:mt-0 lg:justify-end">
            <a class="flex items-center gap-2" href="https://app.vanta.com/balsamiq.com/trust/1c5c4onobnlmncwdv3cu7">
                <img alt="GDPR Logo" class="max-w-[30px] md:max-w-[40px] rounded-none" src="/assets/gdpr.svg" width="209" height="48" />
                <span class="max-w-[80px]">GDPR COMPLIANT</span>
            </a>
            <a class="flex items-center gap-2" href="https://app.vanta.com/balsamiq.com/trust/1c5c4onobnlmncwdv3cu7">
                <img alt="SOC2 Logo" class="max-w-[30px] md:max-w-[40px] rounded-none" src="/assets/soc2.svg" width="209" height="48" />
                <span class="max-w-[80px]">SOC2 COMPLIANT</span>
            </a>
        </div>
        <hr class="hidden lg:block border-gray-300 mt-0 mb-8">
        <div class="flex flex-col sm:flex-row gap-4 justify-between items-left sm:items-center mb-8 mt-10 lg:mt-0">
            <div class="flex space-x-4">
                <a aria-label="LinkedIn" href="https://www.linkedin.com/company/balsamiq" class="text-white relative -top-0.5"
                    target="_blank" rel="noopener noreferrer">
                    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                            d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
                    </svg>
                </a>
                <a aria-label="YouTube" href="https://www.youtube.com/balsamiq" class="text-white" target="_blank"
                    rel="noopener noreferrer">
                    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path
                            d="M23.498 6.186c-.276-1.04-1.089-1.854-2.128-2.129-1.877-.512-9.367-.512-9.367-.512s-7.49 0-9.367.512c-1.04.275-1.854 1.089-2.129 2.129-.512 1.877-.512 5.79-.512 5.79s0 3.914.512 5.791c.275 1.04 1.089 1.854 2.129 2.128 1.877.512 9.367.512 9.367.512s7.49 0 9.367-.512c1.04-.275 1.854-1.089 2.128-2.128.512-1.877.512-5.791.512-5.791s0-3.914-.512-5.79zm-13.498 9.467v-7.588l6.154 3.794-6.154 3.794z" />
                    </svg>
                </a>
                <a aria-label="X" href="https://x.com/balsamiq" class="text-white" target="_blank"
                    rel="noopener noreferrer">
                    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
                        shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
                        image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
                        viewBox="0 0 512 462.799">
                        <path fill-rule="nonzero"
                            d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z" />
                    </svg>
                </a>
            </div>
            <div class="flex space-x-2 flex-wrap md:content-end">
                <span id='copy-year'>&copy; 2008-</span>
                <script>
                    document.getElementById('copy-year').innerHTML = '&copy; 2008-' + (new Date().getFullYear());
                </script> <a href="/">Balsamiq</a>
                <span>·</span>
                <a href="/legal/privacy/">Privacy</a>
                <span>·</span>
                <a href="/legal/tos/">Terms</a>
                <span>·</span>
                <a href="javascript: Cookiebot.renew()">Cookie Preferences</a>
            </div>
        </div>
    </div>
</footer>

<script>
    // Highlight the current parent in the navs
    const links = document.querySelectorAll('nav a');
    const currentUrl = window.location.href;
    links.forEach(link => {
        if (link.href === currentUrl) {
            link.classList.add('current');
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        BLQ.closeUp('a.fb');

        // KEYBOARD SHORTCUTS
        var os = BLQ.getOS();
        if (os == "Mac" || os == "iOS") {
            [].slice.call(document.querySelectorAll('.ctrl')).forEach(function (node) { node.innerHTML = '⌘' });
        }

        // KEYBOARD SHORTCUTS
        if (navigator.appVersion.indexOf("Macintosh") != -1) {
            [].slice.call(document.querySelectorAll('.ctrl')).forEach(function (node) {
                node.innerHTML = '⌘'
            });
        }
        anchors.options = {
            icon: '#',
            placement: 'left'
        };

        anchors.add('h2:not(.no-anchor), h3:not(.no-anchor), h4:not(.no-anchor), h5:not(.no-anchor)');

        [].slice.call(document.querySelectorAll('img[alt="gif"]')).forEach(function (node) {
            BLQ.gifPlayer(node);
        });

        [].slice.call(document.querySelectorAll('img[alt="os"]')).forEach(function (node) {
            BLQ.getOSimg(node);
        });

        // Footer mobile accordion
        document.querySelectorAll('.footer-section').forEach(section => {
            const toggle = section.querySelector('.footer-section-toggle');
            const links = section.querySelector('.footer-section-links');
            toggle.addEventListener('click', () => {
                const isOpen = section.classList.contains('open');
                section.classList.toggle('open', !isOpen);
                links.style.maxHeight = isOpen ? '0' : links.scrollHeight + 'px';
                toggle.setAttribute('aria-expanded', !isOpen);
            });
        });

        const faqs = document.querySelectorAll(".faq-accordion");

        faqs.forEach((faq) => {
            faq.addEventListener("click", (event) => {
                if (event.target.tagName !== 'A') {
                    event.preventDefault();

                    const isOpen = faq.hasAttribute("open");

                    faqs.forEach((otherFaq) => {
                        if (otherFaq !== faq) {
                            otherFaq.removeAttribute("open");
                            const answer = otherFaq.querySelector(".faq-answer");
                            answer.style.maxHeight = null; // Collapse
                        }
                    });

                    if (!isOpen) {
                        faq.setAttribute("open", "");
                        const answer = faq.querySelector(".faq-answer");
                        answer.style.maxHeight = answer.scrollHeight + "px"; // Expand
                    } else {
                        faq.removeAttribute("open");
                        const answer = faq.querySelector(".faq-answer");
                        answer.style.maxHeight = null; // Collapse
                    }
                }
            });
        });

        // Code copy functionality
        function initCodeCopyButtons() {
            const codeBlocks = document.querySelectorAll('code');

            codeBlocks.forEach((codeBlock) => {
                // Skip if it's inline code (not in a paragraph by itself)
                if (codeBlock.parentNode.tagName.toLowerCase() === 'p') {
                    return;
                }

                // Skip if code block has no-copy class or attribute
                if (codeBlock.classList.contains('no-copy') ||
                    codeBlock.hasAttribute('data-no-copy') ||
                    (codeBlock.parentNode.tagName.toLowerCase() === 'pre' && codeBlock.parentNode.classList.contains('no-copy')) ||
                    (codeBlock.parentNode.tagName.toLowerCase() === 'pre' && codeBlock.parentNode.hasAttribute('data-no-copy'))) {
                    return;
                }

                // Skip if button already exists
                if (codeBlock.previousElementSibling && codeBlock.previousElementSibling.classList.contains('copy-button')) {
                    return;
                }

                // Create container if it doesn't exist
                if (!codeBlock.parentNode.classList.contains('code-container')) {
                    const container = document.createElement('div');
                    container.className = 'code-container';
                    codeBlock.parentNode.insertBefore(container, codeBlock);
                    container.appendChild(codeBlock);
                }

                // Create copy button
                const copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                    <span class="copy-text"></span>
                `;

                // Add click event to copy button
                copyButton.addEventListener('click', async (event) => {
                    event.preventDefault(); // Prevent default button behavior
                    event.stopPropagation(); // Prevent event bubbling

                    try {
                        await navigator.clipboard.writeText(codeBlock.textContent.trim());

                        // Visual feedback
                        copyButton.classList.add('copied');
                        setTimeout(() => {
                            copyButton.classList.remove('copied');
                        }, 2000);

                    } catch (err) {
                        console.error('Failed to copy text: ', err);

                        // Fallback for older browsers - position textarea off-screen
                        const textArea = document.createElement('textarea');
                        textArea.value = codeBlock.textContent.trim();
                        textArea.style.position = 'fixed';
                        textArea.style.left = '-9999px';
                        textArea.style.top = '-9999px';
                        textArea.setAttribute('readonly', '');
                        textArea.style.opacity = '0';
                        document.body.appendChild(textArea);
                        textArea.select();
                        try {
                            document.execCommand('copy');
                            copyButton.classList.add('copied');
                            setTimeout(() => {
                                copyButton.classList.remove('copied');
                            }, 2000);
                        } catch (fallbackErr) {
                            console.error('Fallback copy failed: ', fallbackErr);
                        }
                        document.body.removeChild(textArea);
                    }
                });

                // Insert button before the code block in the container
                codeBlock.parentNode.insertBefore(copyButton, codeBlock);
            });
        }

        // Initialize copy buttons
        initCodeCopyButtons();

    });
</script>

<!-- HelpScout Beacon -->
<script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
<script type="text/javascript">window.Beacon('init', 'f7b5b8a1-ba9e-408e-9b1d-6e947f95dabe')</script>

<!-- Google One Tap login-->

            <script>
                function initializeGoogleOneTap() {
                    google.accounts.id.initialize({
                        client_id: '4720648203-v1g732u6b7rlr5j1tceik3mbhf8aupos.apps.googleusercontent.com',
                        itp_support: true,
                        use_fedcm_for_prompt: true,
                        callback: (rsp) => {
                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = 'https://balsamiq.cloud/google_onetap';

                            const hiddenField = document.createElement('input');
                            hiddenField.type = 'hidden';
                            hiddenField.name = 'credential';
                            hiddenField.value = rsp.credential;
                            form.appendChild(hiddenField);

                            document.body.appendChild(form);
                            form.submit();
                        },
                    });

                    google.accounts.id.prompt(); // Display the One Tap prompt
                }
                window.addEventListener('load', initializeGoogleOneTap);
            </script>
            
</body>

</html>

