• In a world full of challenges, every setback can be a stepping stone to something greater! Even though Ubisoft has recently confirmed layoffs at Ubisoft Red Storm following their impressive $1.25 billion investment from Tencent, it’s essential to remember that every ending is just a new beginning.

    This moment reminds us that the gaming industry is always evolving, and with change comes opportunity! Let’s stay positive and supportive of those affected, knowing that brighter days lie ahead! Keep your spirits high and your dreams alive!

    #Ubisoft #GameDevelopment #PositiveVibes #NewBeginnings #StayStrong
    In a world full of challenges, every setback can be a stepping stone to something greater! 🌟 Even though Ubisoft has recently confirmed layoffs at Ubisoft Red Storm following their impressive $1.25 billion investment from Tencent, it’s essential to remember that every ending is just a new beginning. 💪✨ This moment reminds us that the gaming industry is always evolving, and with change comes opportunity! Let’s stay positive and supportive of those affected, knowing that brighter days lie ahead! Keep your spirits high and your dreams alive! 🚀💖 #Ubisoft #GameDevelopment #PositiveVibes #NewBeginnings #StayStrong
    Ubisoft is still making layoffs after securing $1.25 billion Tencent investment
    The French publisher has confirmed 19 people were recently made redundant at Ubisoft Red Storm.
    Like
    Love
    Wow
    Angry
    Sad
    67
    1 Comments 0 Shares 0 Reviews
  • Why is it so hard for people to grasp the absolute necessity of setting up 301 redirects in an .htaccess file? Honestly, it’s infuriating! We’re in a digital age where every click counts, and yet, so many website owners continue to neglect this vital aspect of web management. Why? Because they’re either too lazy to learn or they just don’t care about preserving their ranking authority!

    Let’s get one thing straight: if you think you can just change URLs and your content magically stays relevant, you’re living in a fantasy world! When you fail to implement 301 redirects properly, you’re not just risking your SEO; you’re throwing away all the hard work you’ve put into building your online presence. It’s like setting fire to a pile of money because you couldn’t be bothered to use a fire extinguisher. Ridiculous!

    The process of adding 301 redirects in .htaccess files is straightforward. It’s not rocket science, people! You have two methods at your disposal, and yet countless websites are still losing traffic and authority daily because their owners can’t figure it out. You would think that in a realm where every detail matters, folks would prioritize understanding how to maintain their site’s integrity. But no! Instead, they leave their sites vulnerable, confused visitors, and plunging search rankings in their wake.

    If you’re still scratching your head over how to set up 301 redirects in an .htaccess file, wake up! The first method is simply to use the `RedirectPermanent` directive. It’s right there for you, and it’s as easy as pie. You just need to specify the old URL and the new URL, and boom! You’re done. Or, if you’re feeling fancy, the second method involves using the `RewriteRule` directive. Again, it’s not complicated! Just a few lines of code, and you’re on your way to preserving that precious ranking authority.

    What’s more infuriating is when people rush into updating their websites without even considering the fallout of their actions. Do you think Google is going to give you a free pass for being reckless? No! It will punish you for not taking the necessary precautions. Imagine losing all that traffic you worked so hard to get, just because you couldn’t be bothered to set up a simple redirect. Pathetic!

    Let’s not even begin to talk about the customer experience. When users click on a link and end up on a 404 error page because you didn’t implement a 301 redirect, that’s a surefire way to lose their trust and business. Do you really want to be known as the website that provides a dead-end for visitors? Absolutely not! So, for the love of all that is holy in the digital world, get your act together and learn how to set up those redirects!

    In conclusion, if you’re still ignoring the importance of 301 redirects in your .htaccess file, you’re not just being negligent; you’re actively sabotaging your own success. Stop making excuses, roll up your sleeves, and do what needs to be done. Your website deserves better!

    #301Redirects #SEO #WebManagement #DigitalMarketing #htaccess
    Why is it so hard for people to grasp the absolute necessity of setting up 301 redirects in an .htaccess file? Honestly, it’s infuriating! We’re in a digital age where every click counts, and yet, so many website owners continue to neglect this vital aspect of web management. Why? Because they’re either too lazy to learn or they just don’t care about preserving their ranking authority! Let’s get one thing straight: if you think you can just change URLs and your content magically stays relevant, you’re living in a fantasy world! When you fail to implement 301 redirects properly, you’re not just risking your SEO; you’re throwing away all the hard work you’ve put into building your online presence. It’s like setting fire to a pile of money because you couldn’t be bothered to use a fire extinguisher. Ridiculous! The process of adding 301 redirects in .htaccess files is straightforward. It’s not rocket science, people! You have two methods at your disposal, and yet countless websites are still losing traffic and authority daily because their owners can’t figure it out. You would think that in a realm where every detail matters, folks would prioritize understanding how to maintain their site’s integrity. But no! Instead, they leave their sites vulnerable, confused visitors, and plunging search rankings in their wake. If you’re still scratching your head over how to set up 301 redirects in an .htaccess file, wake up! The first method is simply to use the `RedirectPermanent` directive. It’s right there for you, and it’s as easy as pie. You just need to specify the old URL and the new URL, and boom! You’re done. Or, if you’re feeling fancy, the second method involves using the `RewriteRule` directive. Again, it’s not complicated! Just a few lines of code, and you’re on your way to preserving that precious ranking authority. What’s more infuriating is when people rush into updating their websites without even considering the fallout of their actions. Do you think Google is going to give you a free pass for being reckless? No! It will punish you for not taking the necessary precautions. Imagine losing all that traffic you worked so hard to get, just because you couldn’t be bothered to set up a simple redirect. Pathetic! Let’s not even begin to talk about the customer experience. When users click on a link and end up on a 404 error page because you didn’t implement a 301 redirect, that’s a surefire way to lose their trust and business. Do you really want to be known as the website that provides a dead-end for visitors? Absolutely not! So, for the love of all that is holy in the digital world, get your act together and learn how to set up those redirects! In conclusion, if you’re still ignoring the importance of 301 redirects in your .htaccess file, you’re not just being negligent; you’re actively sabotaging your own success. Stop making excuses, roll up your sleeves, and do what needs to be done. Your website deserves better! #301Redirects #SEO #WebManagement #DigitalMarketing #htaccess
    How to Set Up 301 Redirects in an .htaccess File
    Adding 301 redirects in .htaccess files is useful to preserve ranking authority. Here are two methods.
    Like
    Love
    Wow
    Angry
    Sad
    506
    1 Comments 0 Shares 0 Reviews
  • ‘Liquid Glass’ Apple Watch Dock might be the Coolest Smartwatch Accessory of the Season

    Liquid Glass – the tech world’s abuzz with this new term from Apple’s design playbook following their reveal of the new slew of operating systems at WWDC 2025. What is liquid glass? Well, it’s a multi-tier strategy on Apple’s part to redefine interfaces, moving away from the minimalist interfaces to introduce gorgeously refractive glass-like interfaces instead. These glass elements interact with screen elements by bending light like real glass would. Think of holding a magnifying glass to a newspaper to watch the text around the edges warp while the center stays clear.
    There’s speculation that this move towards glass-based interfaces was a conscious effort to further Apple’s spatial interface goals… but to be honest, we were in love with Liquid Glass back as early as 2021. What do I mean? Well, I’m talking about the NightWatch, an Apple Watch dock from 4 years ago that did exactly what Liquid Glass did, amplify the watch’s screen into a gorgeous liquid orb while your watch was charging!
    Designer: NightWatch
    Click Here to Buy Now

    The NightWatch, as its name so succinctly implies, is a dock for your watch while it charges overnight. Shaped like a massive orb, this dock turns your watch’s night-time charging face into a massive, magnified alarm clock that’s easier to see. Moreover, the dock amplifies the watch’s audio too, transforming your Watch into a makeshift alarm clock that works remarkably well.

    There’s no hidden components, no inner trickery – the entire NightWatch is a cleverly designed, solid piece of lucite that does three things remarkably well. First, it docks the Apple Watch and charger inside it, magnifying the watch screen so the numbers are clearly legible even from a couple of feet away. Secondly, channels located strategically under the Watch’s speaker units amplify the soundso your alarm rings louder. Thirdly, the lucite orb is touch-sensitive. Which means a mere tap on the surface causes your Watch screen to wake so you can see the time!

    The dock may have been designed in 2021, but its design philosophies align with Apple’s Liquid Glass push brilliantly. Liquid Glass is all about mimicking real-world materials, bringing physicality to the digital world while still maintaining a pristine aesthetic that boosts focus and highlights important elements. That’s exactly what the NightWatch does too – it takes the Watch’s flat digital interface and brings real-world physicality to it through the refraction and magnification of the clear lucite. It also helps easily highlight important elements by enlarging your watch face for clearer timekeeping. The NightWatch is compatible with all Apple Watch series.
    Click Here to Buy NowThe post ‘Liquid Glass’ Apple Watch Dock might be the Coolest Smartwatch Accessory of the Season first appeared on Yanko Design.
    #liquid #glass #apple #watch #dock
    ‘Liquid Glass’ Apple Watch Dock might be the Coolest Smartwatch Accessory of the Season
    Liquid Glass – the tech world’s abuzz with this new term from Apple’s design playbook following their reveal of the new slew of operating systems at WWDC 2025. What is liquid glass? Well, it’s a multi-tier strategy on Apple’s part to redefine interfaces, moving away from the minimalist interfaces to introduce gorgeously refractive glass-like interfaces instead. These glass elements interact with screen elements by bending light like real glass would. Think of holding a magnifying glass to a newspaper to watch the text around the edges warp while the center stays clear. There’s speculation that this move towards glass-based interfaces was a conscious effort to further Apple’s spatial interface goals… but to be honest, we were in love with Liquid Glass back as early as 2021. What do I mean? Well, I’m talking about the NightWatch, an Apple Watch dock from 4 years ago that did exactly what Liquid Glass did, amplify the watch’s screen into a gorgeous liquid orb while your watch was charging! Designer: NightWatch Click Here to Buy Now The NightWatch, as its name so succinctly implies, is a dock for your watch while it charges overnight. Shaped like a massive orb, this dock turns your watch’s night-time charging face into a massive, magnified alarm clock that’s easier to see. Moreover, the dock amplifies the watch’s audio too, transforming your Watch into a makeshift alarm clock that works remarkably well. There’s no hidden components, no inner trickery – the entire NightWatch is a cleverly designed, solid piece of lucite that does three things remarkably well. First, it docks the Apple Watch and charger inside it, magnifying the watch screen so the numbers are clearly legible even from a couple of feet away. Secondly, channels located strategically under the Watch’s speaker units amplify the soundso your alarm rings louder. Thirdly, the lucite orb is touch-sensitive. Which means a mere tap on the surface causes your Watch screen to wake so you can see the time! The dock may have been designed in 2021, but its design philosophies align with Apple’s Liquid Glass push brilliantly. Liquid Glass is all about mimicking real-world materials, bringing physicality to the digital world while still maintaining a pristine aesthetic that boosts focus and highlights important elements. That’s exactly what the NightWatch does too – it takes the Watch’s flat digital interface and brings real-world physicality to it through the refraction and magnification of the clear lucite. It also helps easily highlight important elements by enlarging your watch face for clearer timekeeping. The NightWatch is compatible with all Apple Watch series. Click Here to Buy NowThe post ‘Liquid Glass’ Apple Watch Dock might be the Coolest Smartwatch Accessory of the Season first appeared on Yanko Design. #liquid #glass #apple #watch #dock
    WWW.YANKODESIGN.COM
    ‘Liquid Glass’ Apple Watch Dock might be the Coolest Smartwatch Accessory of the Season
    Liquid Glass – the tech world’s abuzz with this new term from Apple’s design playbook following their reveal of the new slew of operating systems at WWDC 2025. What is liquid glass? Well, it’s a multi-tier strategy on Apple’s part to redefine interfaces, moving away from the minimalist interfaces to introduce gorgeously refractive glass-like interfaces instead. These glass elements interact with screen elements by bending light like real glass would. Think of holding a magnifying glass to a newspaper to watch the text around the edges warp while the center stays clear. There’s speculation that this move towards glass-based interfaces was a conscious effort to further Apple’s spatial interface goals… but to be honest, we were in love with Liquid Glass back as early as 2021. What do I mean? Well, I’m talking about the NightWatch, an Apple Watch dock from 4 years ago that did exactly what Liquid Glass did, amplify the watch’s screen into a gorgeous liquid orb while your watch was charging! Designer: NightWatch Click Here to Buy Now The NightWatch, as its name so succinctly implies, is a dock for your watch while it charges overnight. Shaped like a massive orb, this dock turns your watch’s night-time charging face into a massive, magnified alarm clock that’s easier to see. Moreover, the dock amplifies the watch’s audio too (through clever design details), transforming your Watch into a makeshift alarm clock that works remarkably well. There’s no hidden components, no inner trickery – the entire NightWatch is a cleverly designed, solid piece of lucite that does three things remarkably well. First, it docks the Apple Watch and charger inside it, magnifying the watch screen so the numbers are clearly legible even from a couple of feet away. Secondly, channels located strategically under the Watch’s speaker units amplify the sound (sort of like how your voice is louder when you cup your hands around your mouth) so your alarm rings louder. Thirdly (and this might be the best feature yet), the lucite orb is touch-sensitive. Which means a mere tap on the surface causes your Watch screen to wake so you can see the time! The dock may have been designed in 2021, but its design philosophies align with Apple’s Liquid Glass push brilliantly. Liquid Glass is all about mimicking real-world materials, bringing physicality to the digital world while still maintaining a pristine aesthetic that boosts focus and highlights important elements. That’s exactly what the NightWatch does too – it takes the Watch’s flat digital interface and brings real-world physicality to it through the refraction and magnification of the clear lucite. It also helps easily highlight important elements by enlarging your watch face for clearer timekeeping. The NightWatch is compatible with all Apple Watch series (as long as your watch doesn’t have a case on it). Click Here to Buy NowThe post ‘Liquid Glass’ Apple Watch Dock might be the Coolest Smartwatch Accessory of the Season first appeared on Yanko Design.
    Like
    Love
    Wow
    Sad
    Angry
    453
    0 Comments 0 Shares 0 Reviews
  • Why Designers Get Stuck In The Details And How To Stop

    You’ve drawn fifty versions of the same screen — and you still hate every one of them. Begrudgingly, you pick three, show them to your product manager, and hear: “Looks cool, but the idea doesn’t work.” Sound familiar?
    In this article, I’ll unpack why designers fall into detail work at the wrong moment, examining both process pitfalls and the underlying psychological reasons, as understanding these traps is the first step to overcoming them. I’ll also share tactics I use to climb out of that trap.
    Reason #1 You’re Afraid To Show Rough Work
    We designers worship detail. We’re taught that true craft equals razor‑sharp typography, perfect grids, and pixel precision. So the minute a task arrives, we pop open Figma and start polishing long before polish is needed.
    I’ve skipped the sketch phase more times than I care to admit. I told myself it would be faster, yet I always ended up spending hours producing a tidy mock‑up when a scribbled thumbnail would have sparked a five‑minute chat with my product manager. Rough sketches felt “unprofessional,” so I hid them.
    The cost? Lost time, wasted energy — and, by the third redo, teammates were quietly wondering if I even understood the brief.
    The real problem here is the habit: we open Figma and start perfecting the UI before we’ve even solved the problem.
    So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid psychological reasons behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychologyshows there are a couple of flavors driving this:

    Socially prescribed perfectionismIt’s that nagging feeling that everyone else expects perfect work from you, which makes showing anything rough feel like walking into the lion’s den.
    Self-oriented perfectionismWhere you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off.

    Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback.
    Back to the design side, remember that clients rarely see architects’ first pencil sketches, but these sketches still exist; they guide structural choices before the 3D render. Treat your thumbnails the same way — artifacts meant to collapse uncertainty, not portfolio pieces. Once stakeholders see the upside, roughness becomes a badge of speed, not sloppiness. So, the key is to consciously make that shift:
    Treat early sketches as disposable tools for thinking and actively share them to get feedback faster.

    Reason #2: You Fix The Symptom, Not The Cause
    Before tackling any task, we need to understand what business outcome we’re aiming for. Product managers might come to us asking to enlarge the payment button in the shopping cart because users aren’t noticing it. The suggested solution itself isn’t necessarily bad, but before redesigning the button, we should ask, “What data suggests they aren’t noticing it?” Don’t get me wrong, I’m not saying you shouldn’t trust your product manager. On the contrary, these questions help ensure you’re on the same page and working with the same data.
    From my experience, here are several reasons why users might not be clicking that coveted button:

    Users don’t understand that this step is for payment.
    They understand it’s about payment but expect order confirmation first.
    Due to incorrect translation, users don’t understand what the button means.
    Lack of trust signals.
    Unexpected additional coststhat appear at this stage.
    Technical issues.

    Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly.
    Moreover, the responsibility for the unresolved issue would fall on you, as the interface solution lies within the design domain. The product manager actually did their job correctly by identifying a problem: suspiciously, few users are clicking the button.
    Psychologically, taking on this bigger role isn’t easy. It means overcoming the fear of making mistakes and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as partners who create value — even if it means fighting a hesitation to question product managers— and understanding that using our product logic expertise proactively is crucial for modern designers.
    There’s another critical reason why we, designers, need to be a bit like product managers: the rise of AI. I deliberately used a simple example about enlarging a button, but I’m confident that in the near future, AI will easily handle routine design tasks. This worries me, but at the same time, I’m already gladly stepping into the product manager’s territory: understanding product and business metrics, formulating hypotheses, conducting research, and so on. It might sound like I’m taking work away from PMs, but believe me, they undoubtedly have enough on their plates and are usually more than happy to delegate some responsibilities to designers.
    Reason #3: You’re Solving The Wrong Problem
    Before solving anything, ask whether the problem even deserves your attention.
    During a major home‑screen redesign, our goal was to drive more users into paid services. The initial hypothesis — making service buttons bigger and brighter might help returning users — seemed reasonable enough to test. However, even when A/B testsshowed minimal impact, we continued to tweak those buttons.
    Only later did it click: the home screen isn’t the place to sell; visitors open the app to start, not to buy. We removed that promo block, and nothing broke. Contextual entry points deeper into the journey performed brilliantly. Lesson learned:
    Without the right context, any visual tweak is lipstick on a pig.

    Why did we get stuck polishing buttons instead of stopping sooner? It’s easy to get tunnel vision. Psychologically, it’s likely the good old sunk cost fallacy kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising.
    It’s just easier to keep fiddling with something familiar than to admit we need a new plan. Perhaps the simple question I should have asked myself when results stalled was: “Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?” That alone might have saved hours.
    Reason #4: You’re Drowning In Unactionable Feedback
    We all discuss our work with colleagues. But here’s a crucial point: what kind of question do you pose to kick off that discussion? If your go-to is “What do you think?” well, that question might lead you down a rabbit hole of personal opinions rather than actionable insights. While experienced colleagues will cut through the noise, others, unsure what to evaluate, might comment on anything and everything — fonts, button colors, even when you desperately need to discuss a user flow.
    What matters here are two things:

    The question you ask,
    The context you give.

    That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it.
    For instance:
    “The problem is our payment conversion rate has dropped by X%. I’ve interviewed users and found they abandon payment because they don’t understand how the total amount is calculated. My solution is to show a detailed cost breakdown. Do you think this actually solves the problem for them?”

    Here, you’ve stated the problem, shared your insight, explained your solution, and asked a direct question. It’s even better if you prepare a list of specific sub-questions. For instance: “Are all items in the cost breakdown clear?” or “Does the placement of this breakdown feel intuitive within the payment flow?”
    Another good habit is to keep your rough sketches and previous iterations handy. Some of your colleagues’ suggestions might be things you’ve already tried. It’s great if you can discuss them immediately to either revisit those ideas or definitively set them aside.
    I’m not a psychologist, but experience tells me that, psychologically, the reluctance to be this specific often stems from a fear of our solution being rejected. We tend to internalize feedback: a seemingly innocent comment like, “Have you considered other ways to organize this section?” or “Perhaps explore a different structure for this part?” can instantly morph in our minds into “You completely messed up the structure. You’re a bad designer.” Imposter syndrome, in all its glory.
    So, to wrap up this point, here are two recommendations:

    Prepare for every design discussion.A couple of focused questions will yield far more valuable input than a vague “So, what do you think?”.
    Actively work on separating feedback on your design from your self-worth.If a mistake is pointed out, acknowledge it, learn from it, and you’ll be less likely to repeat it. This is often easier said than done. For me, it took years of working with a psychotherapist. If you struggle with this, I sincerely wish you strength in overcoming it.

    Reason #5 You’re Just Tired
    Sometimes, the issue isn’t strategic at all — it’s fatigue. Fussing over icon corners can feel like a cozy bunker when your brain is fried. There’s a name for this: decision fatigue. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing.
    A striking example comes from a New York Times article titled “Do You Suffer From Decision Fatigue?.” It described how judges deciding on release requests were far more likely to grant release early in the daycompared to late in the daysimply because their decision-making energy was depleted. Luckily, designers rarely hold someone’s freedom in their hands, but the example dramatically shows how fatigue can impact our judgment and productivity.
    What helps here:

    Swap tasks.Trade tickets with another designer; novelty resets your focus.
    Talk to another designer.If NDA permits, ask peers outside the team for a sanity check.
    Step away.Even a ten‑minute walk can do more than a double‑shot espresso.

    By the way, I came up with these ideas while walking around my office. I was lucky to work near a river, and those short walks quickly turned into a helpful habit.

    And one more trick that helps me snap out of detail mode early: if I catch myself making around 20 little tweaks — changing font weight, color, border radius — I just stop. Over time, it turned into a habit. I have a similar one with Instagram: by the third reel, my brain quietly asks, “Wait, weren’t we working?” Funny how that kind of nudge saves a ton of time.
    Four Steps I Use to Avoid Drowning In Detail
    Knowing these potential traps, here’s the practical process I use to stay on track:
    1. Define the Core Problem & Business Goal
    Before anything, dig deep: what’s the actual problem we’re solving, not just the requested task or a surface-level symptom? Ask ‘why’ repeatedly. What user pain or business need are we addressing? Then, state the clear business goal: “What metric am I moving, and do we have data to prove this is the right lever?” If retention is the goal, decide whether push reminders, gamification, or personalised content is the best route. The wrong lever, or tackling a symptom instead of the cause, dooms everything downstream.
    2. Choose the MechanicOnce the core problem and goal are clear, lock the solution principle or ‘mechanic’ first. Going with a game layer? Decide if it’s leaderboards, streaks, or badges. Write it down. Then move on. No UI yet. This keeps the focus high-level before diving into pixels.
    3. Wireframe the Flow & Get Focused Feedback
    Now open Figma. Map screens, layout, and transitions. Boxes and arrows are enough. Keep the fidelity low so the discussion stays on the flow, not colour. Crucially, when you share these early wires, ask specific questions and provide clear contextto get actionable feedback, not just vague opinions.
    4. Polish the VisualsI only let myself tweak grids, type scales, and shadows after the flow is validated. If progress stalls, or before a major polish effort, I surface the work in a design critique — again using targeted questions and clear context — instead of hiding in version 47. This ensures detailing serves the now-validated solution.
    Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering.
    Wrapping Up
    Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, pause and ask what you might be avoiding. Yes, that can expose an uncomfortable truth. But pausing to ask what you might be avoiding — maybe the fuzzy core problem, or just asking for tough feedback — gives you the power to face the real issue head-on. It keeps the project focused on solving the right problem, not just perfecting a flawed solution.
    Attention to detail is a superpower when used at the right moment. Obsessing over pixels too soon, though, is a bad habit and a warning light telling us the process needs a rethink.
    #why #designers #get #stuck #details
    Why Designers Get Stuck In The Details And How To Stop
    You’ve drawn fifty versions of the same screen — and you still hate every one of them. Begrudgingly, you pick three, show them to your product manager, and hear: “Looks cool, but the idea doesn’t work.” Sound familiar? In this article, I’ll unpack why designers fall into detail work at the wrong moment, examining both process pitfalls and the underlying psychological reasons, as understanding these traps is the first step to overcoming them. I’ll also share tactics I use to climb out of that trap. Reason #1 You’re Afraid To Show Rough Work We designers worship detail. We’re taught that true craft equals razor‑sharp typography, perfect grids, and pixel precision. So the minute a task arrives, we pop open Figma and start polishing long before polish is needed. I’ve skipped the sketch phase more times than I care to admit. I told myself it would be faster, yet I always ended up spending hours producing a tidy mock‑up when a scribbled thumbnail would have sparked a five‑minute chat with my product manager. Rough sketches felt “unprofessional,” so I hid them. The cost? Lost time, wasted energy — and, by the third redo, teammates were quietly wondering if I even understood the brief. The real problem here is the habit: we open Figma and start perfecting the UI before we’ve even solved the problem. So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid psychological reasons behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychologyshows there are a couple of flavors driving this: Socially prescribed perfectionismIt’s that nagging feeling that everyone else expects perfect work from you, which makes showing anything rough feel like walking into the lion’s den. Self-oriented perfectionismWhere you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off. Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback. Back to the design side, remember that clients rarely see architects’ first pencil sketches, but these sketches still exist; they guide structural choices before the 3D render. Treat your thumbnails the same way — artifacts meant to collapse uncertainty, not portfolio pieces. Once stakeholders see the upside, roughness becomes a badge of speed, not sloppiness. So, the key is to consciously make that shift: Treat early sketches as disposable tools for thinking and actively share them to get feedback faster. Reason #2: You Fix The Symptom, Not The Cause Before tackling any task, we need to understand what business outcome we’re aiming for. Product managers might come to us asking to enlarge the payment button in the shopping cart because users aren’t noticing it. The suggested solution itself isn’t necessarily bad, but before redesigning the button, we should ask, “What data suggests they aren’t noticing it?” Don’t get me wrong, I’m not saying you shouldn’t trust your product manager. On the contrary, these questions help ensure you’re on the same page and working with the same data. From my experience, here are several reasons why users might not be clicking that coveted button: Users don’t understand that this step is for payment. They understand it’s about payment but expect order confirmation first. Due to incorrect translation, users don’t understand what the button means. Lack of trust signals. Unexpected additional coststhat appear at this stage. Technical issues. Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly. Moreover, the responsibility for the unresolved issue would fall on you, as the interface solution lies within the design domain. The product manager actually did their job correctly by identifying a problem: suspiciously, few users are clicking the button. Psychologically, taking on this bigger role isn’t easy. It means overcoming the fear of making mistakes and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as partners who create value — even if it means fighting a hesitation to question product managers— and understanding that using our product logic expertise proactively is crucial for modern designers. There’s another critical reason why we, designers, need to be a bit like product managers: the rise of AI. I deliberately used a simple example about enlarging a button, but I’m confident that in the near future, AI will easily handle routine design tasks. This worries me, but at the same time, I’m already gladly stepping into the product manager’s territory: understanding product and business metrics, formulating hypotheses, conducting research, and so on. It might sound like I’m taking work away from PMs, but believe me, they undoubtedly have enough on their plates and are usually more than happy to delegate some responsibilities to designers. Reason #3: You’re Solving The Wrong Problem Before solving anything, ask whether the problem even deserves your attention. During a major home‑screen redesign, our goal was to drive more users into paid services. The initial hypothesis — making service buttons bigger and brighter might help returning users — seemed reasonable enough to test. However, even when A/B testsshowed minimal impact, we continued to tweak those buttons. Only later did it click: the home screen isn’t the place to sell; visitors open the app to start, not to buy. We removed that promo block, and nothing broke. Contextual entry points deeper into the journey performed brilliantly. Lesson learned: Without the right context, any visual tweak is lipstick on a pig. Why did we get stuck polishing buttons instead of stopping sooner? It’s easy to get tunnel vision. Psychologically, it’s likely the good old sunk cost fallacy kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising. It’s just easier to keep fiddling with something familiar than to admit we need a new plan. Perhaps the simple question I should have asked myself when results stalled was: “Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?” That alone might have saved hours. Reason #4: You’re Drowning In Unactionable Feedback We all discuss our work with colleagues. But here’s a crucial point: what kind of question do you pose to kick off that discussion? If your go-to is “What do you think?” well, that question might lead you down a rabbit hole of personal opinions rather than actionable insights. While experienced colleagues will cut through the noise, others, unsure what to evaluate, might comment on anything and everything — fonts, button colors, even when you desperately need to discuss a user flow. What matters here are two things: The question you ask, The context you give. That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it. For instance: “The problem is our payment conversion rate has dropped by X%. I’ve interviewed users and found they abandon payment because they don’t understand how the total amount is calculated. My solution is to show a detailed cost breakdown. Do you think this actually solves the problem for them?” Here, you’ve stated the problem, shared your insight, explained your solution, and asked a direct question. It’s even better if you prepare a list of specific sub-questions. For instance: “Are all items in the cost breakdown clear?” or “Does the placement of this breakdown feel intuitive within the payment flow?” Another good habit is to keep your rough sketches and previous iterations handy. Some of your colleagues’ suggestions might be things you’ve already tried. It’s great if you can discuss them immediately to either revisit those ideas or definitively set them aside. I’m not a psychologist, but experience tells me that, psychologically, the reluctance to be this specific often stems from a fear of our solution being rejected. We tend to internalize feedback: a seemingly innocent comment like, “Have you considered other ways to organize this section?” or “Perhaps explore a different structure for this part?” can instantly morph in our minds into “You completely messed up the structure. You’re a bad designer.” Imposter syndrome, in all its glory. So, to wrap up this point, here are two recommendations: Prepare for every design discussion.A couple of focused questions will yield far more valuable input than a vague “So, what do you think?”. Actively work on separating feedback on your design from your self-worth.If a mistake is pointed out, acknowledge it, learn from it, and you’ll be less likely to repeat it. This is often easier said than done. For me, it took years of working with a psychotherapist. If you struggle with this, I sincerely wish you strength in overcoming it. Reason #5 You’re Just Tired Sometimes, the issue isn’t strategic at all — it’s fatigue. Fussing over icon corners can feel like a cozy bunker when your brain is fried. There’s a name for this: decision fatigue. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing. A striking example comes from a New York Times article titled “Do You Suffer From Decision Fatigue?.” It described how judges deciding on release requests were far more likely to grant release early in the daycompared to late in the daysimply because their decision-making energy was depleted. Luckily, designers rarely hold someone’s freedom in their hands, but the example dramatically shows how fatigue can impact our judgment and productivity. What helps here: Swap tasks.Trade tickets with another designer; novelty resets your focus. Talk to another designer.If NDA permits, ask peers outside the team for a sanity check. Step away.Even a ten‑minute walk can do more than a double‑shot espresso. By the way, I came up with these ideas while walking around my office. I was lucky to work near a river, and those short walks quickly turned into a helpful habit. And one more trick that helps me snap out of detail mode early: if I catch myself making around 20 little tweaks — changing font weight, color, border radius — I just stop. Over time, it turned into a habit. I have a similar one with Instagram: by the third reel, my brain quietly asks, “Wait, weren’t we working?” Funny how that kind of nudge saves a ton of time. Four Steps I Use to Avoid Drowning In Detail Knowing these potential traps, here’s the practical process I use to stay on track: 1. Define the Core Problem & Business Goal Before anything, dig deep: what’s the actual problem we’re solving, not just the requested task or a surface-level symptom? Ask ‘why’ repeatedly. What user pain or business need are we addressing? Then, state the clear business goal: “What metric am I moving, and do we have data to prove this is the right lever?” If retention is the goal, decide whether push reminders, gamification, or personalised content is the best route. The wrong lever, or tackling a symptom instead of the cause, dooms everything downstream. 2. Choose the MechanicOnce the core problem and goal are clear, lock the solution principle or ‘mechanic’ first. Going with a game layer? Decide if it’s leaderboards, streaks, or badges. Write it down. Then move on. No UI yet. This keeps the focus high-level before diving into pixels. 3. Wireframe the Flow & Get Focused Feedback Now open Figma. Map screens, layout, and transitions. Boxes and arrows are enough. Keep the fidelity low so the discussion stays on the flow, not colour. Crucially, when you share these early wires, ask specific questions and provide clear contextto get actionable feedback, not just vague opinions. 4. Polish the VisualsI only let myself tweak grids, type scales, and shadows after the flow is validated. If progress stalls, or before a major polish effort, I surface the work in a design critique — again using targeted questions and clear context — instead of hiding in version 47. This ensures detailing serves the now-validated solution. Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering. Wrapping Up Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, pause and ask what you might be avoiding. Yes, that can expose an uncomfortable truth. But pausing to ask what you might be avoiding — maybe the fuzzy core problem, or just asking for tough feedback — gives you the power to face the real issue head-on. It keeps the project focused on solving the right problem, not just perfecting a flawed solution. Attention to detail is a superpower when used at the right moment. Obsessing over pixels too soon, though, is a bad habit and a warning light telling us the process needs a rethink. #why #designers #get #stuck #details
    SMASHINGMAGAZINE.COM
    Why Designers Get Stuck In The Details And How To Stop
    You’ve drawn fifty versions of the same screen — and you still hate every one of them. Begrudgingly, you pick three, show them to your product manager, and hear: “Looks cool, but the idea doesn’t work.” Sound familiar? In this article, I’ll unpack why designers fall into detail work at the wrong moment, examining both process pitfalls and the underlying psychological reasons, as understanding these traps is the first step to overcoming them. I’ll also share tactics I use to climb out of that trap. Reason #1 You’re Afraid To Show Rough Work We designers worship detail. We’re taught that true craft equals razor‑sharp typography, perfect grids, and pixel precision. So the minute a task arrives, we pop open Figma and start polishing long before polish is needed. I’ve skipped the sketch phase more times than I care to admit. I told myself it would be faster, yet I always ended up spending hours producing a tidy mock‑up when a scribbled thumbnail would have sparked a five‑minute chat with my product manager. Rough sketches felt “unprofessional,” so I hid them. The cost? Lost time, wasted energy — and, by the third redo, teammates were quietly wondering if I even understood the brief. The real problem here is the habit: we open Figma and start perfecting the UI before we’ve even solved the problem. So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid psychological reasons behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychology (like the research by Hewitt and Flett) shows there are a couple of flavors driving this: Socially prescribed perfectionismIt’s that nagging feeling that everyone else expects perfect work from you, which makes showing anything rough feel like walking into the lion’s den. Self-oriented perfectionismWhere you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off. Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback. Back to the design side, remember that clients rarely see architects’ first pencil sketches, but these sketches still exist; they guide structural choices before the 3D render. Treat your thumbnails the same way — artifacts meant to collapse uncertainty, not portfolio pieces. Once stakeholders see the upside, roughness becomes a badge of speed, not sloppiness. So, the key is to consciously make that shift: Treat early sketches as disposable tools for thinking and actively share them to get feedback faster. Reason #2: You Fix The Symptom, Not The Cause Before tackling any task, we need to understand what business outcome we’re aiming for. Product managers might come to us asking to enlarge the payment button in the shopping cart because users aren’t noticing it. The suggested solution itself isn’t necessarily bad, but before redesigning the button, we should ask, “What data suggests they aren’t noticing it?” Don’t get me wrong, I’m not saying you shouldn’t trust your product manager. On the contrary, these questions help ensure you’re on the same page and working with the same data. From my experience, here are several reasons why users might not be clicking that coveted button: Users don’t understand that this step is for payment. They understand it’s about payment but expect order confirmation first. Due to incorrect translation, users don’t understand what the button means. Lack of trust signals (no security icons, unclear seller information). Unexpected additional costs (hidden fees, shipping) that appear at this stage. Technical issues (inactive button, page freezing). Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly. Moreover, the responsibility for the unresolved issue would fall on you, as the interface solution lies within the design domain. The product manager actually did their job correctly by identifying a problem: suspiciously, few users are clicking the button. Psychologically, taking on this bigger role isn’t easy. It means overcoming the fear of making mistakes and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as partners who create value — even if it means fighting a hesitation to question product managers (which might come from a fear of speaking up or a desire to avoid challenging authority) — and understanding that using our product logic expertise proactively is crucial for modern designers. There’s another critical reason why we, designers, need to be a bit like product managers: the rise of AI. I deliberately used a simple example about enlarging a button, but I’m confident that in the near future, AI will easily handle routine design tasks. This worries me, but at the same time, I’m already gladly stepping into the product manager’s territory: understanding product and business metrics, formulating hypotheses, conducting research, and so on. It might sound like I’m taking work away from PMs, but believe me, they undoubtedly have enough on their plates and are usually more than happy to delegate some responsibilities to designers. Reason #3: You’re Solving The Wrong Problem Before solving anything, ask whether the problem even deserves your attention. During a major home‑screen redesign, our goal was to drive more users into paid services. The initial hypothesis — making service buttons bigger and brighter might help returning users — seemed reasonable enough to test. However, even when A/B tests (a method of comparing two versions of a design to determine which performs better) showed minimal impact, we continued to tweak those buttons. Only later did it click: the home screen isn’t the place to sell; visitors open the app to start, not to buy. We removed that promo block, and nothing broke. Contextual entry points deeper into the journey performed brilliantly. Lesson learned: Without the right context, any visual tweak is lipstick on a pig. Why did we get stuck polishing buttons instead of stopping sooner? It’s easy to get tunnel vision. Psychologically, it’s likely the good old sunk cost fallacy kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising. It’s just easier to keep fiddling with something familiar than to admit we need a new plan. Perhaps the simple question I should have asked myself when results stalled was: “Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?” That alone might have saved hours. Reason #4: You’re Drowning In Unactionable Feedback We all discuss our work with colleagues. But here’s a crucial point: what kind of question do you pose to kick off that discussion? If your go-to is “What do you think?” well, that question might lead you down a rabbit hole of personal opinions rather than actionable insights. While experienced colleagues will cut through the noise, others, unsure what to evaluate, might comment on anything and everything — fonts, button colors, even when you desperately need to discuss a user flow. What matters here are two things: The question you ask, The context you give. That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it. For instance: “The problem is our payment conversion rate has dropped by X%. I’ve interviewed users and found they abandon payment because they don’t understand how the total amount is calculated. My solution is to show a detailed cost breakdown. Do you think this actually solves the problem for them?” Here, you’ve stated the problem (conversion drop), shared your insight (user confusion), explained your solution (cost breakdown), and asked a direct question. It’s even better if you prepare a list of specific sub-questions. For instance: “Are all items in the cost breakdown clear?” or “Does the placement of this breakdown feel intuitive within the payment flow?” Another good habit is to keep your rough sketches and previous iterations handy. Some of your colleagues’ suggestions might be things you’ve already tried. It’s great if you can discuss them immediately to either revisit those ideas or definitively set them aside. I’m not a psychologist, but experience tells me that, psychologically, the reluctance to be this specific often stems from a fear of our solution being rejected. We tend to internalize feedback: a seemingly innocent comment like, “Have you considered other ways to organize this section?” or “Perhaps explore a different structure for this part?” can instantly morph in our minds into “You completely messed up the structure. You’re a bad designer.” Imposter syndrome, in all its glory. So, to wrap up this point, here are two recommendations: Prepare for every design discussion.A couple of focused questions will yield far more valuable input than a vague “So, what do you think?”. Actively work on separating feedback on your design from your self-worth.If a mistake is pointed out, acknowledge it, learn from it, and you’ll be less likely to repeat it. This is often easier said than done. For me, it took years of working with a psychotherapist. If you struggle with this, I sincerely wish you strength in overcoming it. Reason #5 You’re Just Tired Sometimes, the issue isn’t strategic at all — it’s fatigue. Fussing over icon corners can feel like a cozy bunker when your brain is fried. There’s a name for this: decision fatigue. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing. A striking example comes from a New York Times article titled “Do You Suffer From Decision Fatigue?.” It described how judges deciding on release requests were far more likely to grant release early in the day (about 70% of cases) compared to late in the day (less than 10%) simply because their decision-making energy was depleted. Luckily, designers rarely hold someone’s freedom in their hands, but the example dramatically shows how fatigue can impact our judgment and productivity. What helps here: Swap tasks.Trade tickets with another designer; novelty resets your focus. Talk to another designer.If NDA permits, ask peers outside the team for a sanity check. Step away.Even a ten‑minute walk can do more than a double‑shot espresso. By the way, I came up with these ideas while walking around my office. I was lucky to work near a river, and those short walks quickly turned into a helpful habit. And one more trick that helps me snap out of detail mode early: if I catch myself making around 20 little tweaks — changing font weight, color, border radius — I just stop. Over time, it turned into a habit. I have a similar one with Instagram: by the third reel, my brain quietly asks, “Wait, weren’t we working?” Funny how that kind of nudge saves a ton of time. Four Steps I Use to Avoid Drowning In Detail Knowing these potential traps, here’s the practical process I use to stay on track: 1. Define the Core Problem & Business Goal Before anything, dig deep: what’s the actual problem we’re solving, not just the requested task or a surface-level symptom? Ask ‘why’ repeatedly. What user pain or business need are we addressing? Then, state the clear business goal: “What metric am I moving, and do we have data to prove this is the right lever?” If retention is the goal, decide whether push reminders, gamification, or personalised content is the best route. The wrong lever, or tackling a symptom instead of the cause, dooms everything downstream. 2. Choose the Mechanic (Solution Principle) Once the core problem and goal are clear, lock the solution principle or ‘mechanic’ first. Going with a game layer? Decide if it’s leaderboards, streaks, or badges. Write it down. Then move on. No UI yet. This keeps the focus high-level before diving into pixels. 3. Wireframe the Flow & Get Focused Feedback Now open Figma. Map screens, layout, and transitions. Boxes and arrows are enough. Keep the fidelity low so the discussion stays on the flow, not colour. Crucially, when you share these early wires, ask specific questions and provide clear context (as discussed in ‘Reason #4’) to get actionable feedback, not just vague opinions. 4. Polish the Visuals (Mindfully) I only let myself tweak grids, type scales, and shadows after the flow is validated. If progress stalls, or before a major polish effort, I surface the work in a design critique — again using targeted questions and clear context — instead of hiding in version 47. This ensures detailing serves the now-validated solution. Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering. Wrapping Up Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, pause and ask what you might be avoiding. Yes, that can expose an uncomfortable truth. But pausing to ask what you might be avoiding — maybe the fuzzy core problem, or just asking for tough feedback — gives you the power to face the real issue head-on. It keeps the project focused on solving the right problem, not just perfecting a flawed solution. Attention to detail is a superpower when used at the right moment. Obsessing over pixels too soon, though, is a bad habit and a warning light telling us the process needs a rethink.
    Like
    Love
    Wow
    Angry
    Sad
    596
    0 Comments 0 Shares 0 Reviews
  • The 17 Best Barstools and Counter Stools

    Bar stools aren't intended for hours of lounging. What they are intended for, however, is constant use. Because what’s a bar if not a counter by another name? And a counter, in many cases, is also a breakfast table, the after-school snack buffet, the take-out and basketball-watching hub, and, eventually, the cocktail bar, come hosting hour. For each activity, the same seat does its duty. Unlike dining room chairs, bar stools suffer thoughtlessness: We yank them out, half asleep in the morning. We hike our feet up their pegs, lost in a TV show's plot. When friends come over, we lean forward, animatedly. All the while unwittingly testing each little joint and bolt beneath us. That’s why shopping for them requires a good deal of thought. So, we went ahead and did a lot of that thinking for you. Below, you’ll find some of ELLE Decor's favorite stools, from the design-forward to the budget-conscious. You'll also find a little about what went into our choices. The ClassicCarter Counter Stoolat Serena and LilyThere's a lot to be said for a classic. With this elevated chair-like stool, you can rest against the back and bring your feet up to its pegs. Also, it comes in six colorways.Dimensions37"H x 18.25" W x 21" DFeaturesSolid beech, painted finish. No assembly required. Holds up to 275 lbsThe Vacationer Avalon Rattan Swivel Bar Stoolat Serena and Lily If there's a material evocative of vacation, it's rattan. This version also has a swivel seat and basket-weave back. But, you'll have to appreciate the natural wear on a material—it's part of the appeal. Dimensions38.5"H x 20.5"W x 22"DFeaturesMade with hand-wrapped rattan, holds up to 300 lbsAdvertisement - Continue Reading BelowLaurel Foundry Modern Farmhouse® Baggett Solid Wood Windsor Back StoolNow 15% Offat WayfairIf you like the look of light wood but at an affordable pricepoint, this option from Wayfair is totally serviceable. And, it comes in three classic colorways. Dimensions14.8'' W X 14.2'' D; back is 12.5'' HFeaturesWood frame, some assembly required; holds up to 300 lbsMartha Stewart Martha Stewart Playa Handcrafted Rattan Counter StoolNow 36% Offat WayfairTDimensions35'' H x 23'' W x 22.5'' DFeaturessolid wood; some assembly required. Holds up to 300 lbsAdvertisement - Continue Reading BelowElegant designVanity Counter Stoolat nickeykehoe.comAnd what if you want the back, the cushioned seat, and a considered, elevated design? Time to check on Nickey Kehoe. Says our own Interiors Director, Bebe Howorth: “I love a stool with a little bit of back support, but doesn’t impose on the space like a chair.” Dimensions33.25" H x 18" W x 19.5" DFeaturesNatural oak; Susan Deliss, constanza in denimBarely-there backrestSede Counter Stool at ArticleA short back, a cushioned seat, and an elegant, tapered leg, this stool has a lovely silhouette at a low price point. Available in three colorways and the option of a leatherseat. Dimensions31"H x 16"W x 17"DFeaturesSolid and veneered wood, holds up to 300 lbsAdvertisement - Continue Reading BelowWayne Swivel Bar & Counter Stoolsat West ElmThere's no denying the appeal of the swivel. And if you foresee your bar stools serving a primarily social function, you'll want to seek that out. As Dorothy Scarborough, Editorial Assistant at ELLE Decor and Town & Country says: "Bar stools, by their very design, are tricky. When you're a few martinis in, it's fun to swing your legs and turn in circles, but when you're trying to enjoy a bowl of cereal, bar stools make for a less than ideal experience. This West Elm design has a higher back and arms, and at only 26 inches off the ground, doesn't make you feel like you're sitting on a tower. It's almost like a real chair, but it has all the jazzy chicness of a barstool."Adam Stoolat framacph.comOf course, not all stools need to be tall chairs. The perch-type stool can serve its function expertly, even with a minimal design, like this one from Frama. Dimension30" H x 17" W x 10" DFeaturesPowder coated frame, oiled seat; steel frame, oak seatAdvertisement - Continue Reading BelowErgonomic PerchWayland stool at oandgstudio.comPrepare for a comfortable perch with this statuesque stool from O&G Studio. Says ELLE Decor's Market Director, Benjamin Reynaert: "I personally sit-tested the Wayland Stool, and let me tell you—the carved solid wood seat isn’t just a design detail, it’s a comfort revelation, perfectly pairing form with the casual functionality of its bamboo-inspired turnings and classic box stretcher base, all available in a palette of 19 hand-applied stained finishes that highlight the American craftsmanship of O&G Studio."Dimensions25" H x 21.25" W x 18" DFeaturesMade with ash and maple wood, stained; "stylized bamboo turnings of the Wayland Family."Industrial chicSteel Stoolat ZARA HomeFrom Zara Home comes this sharp number. Not as tall as some, and, clearly, not intended for hours of sitting, this steel stool brings a chic taste of the industrial to any room. Dimensions17" H x 11" W x 11" DAdvertisement - Continue Reading BelowWinsome Winsome Satori Stoolat AmazonWith a curved wooden seat and a classic, ladder-leg construction, this Winsome Satori stool is chic, simple, and affordable. Bonus: It's available in multiple heights.Dimensions16" H x 18" W x 29" DFeaturesSolid beech wood with a walnut finishLancaster Stool at webstaurantstore.comIndustrial but make it comfortable: The Lancaster stool comes in multiple colors and heights. Plus: the cushion is removable, making these stools stackable for easy storage. Dimensions24" H x 16 " D x 16" WFeaturesFrame is coated steel, and the cushion is corrosion-resistant powder coated vinyl. Holds up to 400 lbsAdvertisement - Continue Reading BelowCurvy and Cushy Lulu and Georgia Ashford Bar Stoolat Lulu and GeorgiaThis curvy stool from Lulu and Georgia comes with the brusque silhouette of its industrial cousins tempered by the soft edges, arched lines, and plush seat of a comfortable chair.Dimensions30" H x 18.25" W x 18.25" DFeaturesAsh wood frame, foam cushion; hand-crafted and made from sustainable materialsThe Heavy-Lifting VacationerAlastair Bar & Counter StoolNow 37% Offat Joss & MainA return to the vacation rattan, this classic, backless stool comes with all the attitude of a beach cabana at a reasonable price. Offered in multiple colors and heights for beach-adjacent rooms of all sorts. Surprisingly, perhaps, this stool claims to hold up to 500 lbs, making it the heaviest lifter of them all. Dimensinos24'' H X 16'' W X 16'' DFeaturesMade from rattan and plastic, it can hold up to 500 lbsAdvertisement - Continue Reading BelowInnovative eleganceMoon Stoolat sunatsix.comIt's all about the considered design on these moon stools. But, made from solid white oak treated with tenna oil, they're also stain resistant and built for use. Dimensions30” H x 19.5” W x 16”DFeatureshand-made from white oak using traditional joinery; three finishes availableHigh-quality classic Range Stoolat assemblyline.coThese classic stools are solid wood, handmade, and all about the understated beauty of quality. Which also means you'll need to order these well in advance of your first soiree, as they take roughly 12 to 14 weeks to make. Dimensions25” H x 13” L x 13” WFeaturesMade from white oak; multiple finishes available.Advertisement - Continue Reading BelowMainstays Natural wood stoolat WalmartYes, Walmart makes a totally serviceable, classic wooden bar stool. Sold in packs of two, and available in multiple heights, they get the job done. Dimensions13.50" H x 29.00" D x 13.50" WFeaturesMade from woodFrequently Asked QuestionsWhat makes a bar stool comfortable? Let's be honest: Most stools are not built for comfort. Especially the perch variety, as we're calling it—stools with just a flat shelf or round disk to sit on—are functional. If comfort is high on the must-have list, look for a perch with a slightly concave seat, engineered for the shape of a human body. Or skip the perch and go for stools with backrests and cushions. Here's a rule of thumb: the thicker the cushion, the higher the back, the longer you'll want to sit. Ideally, however, you'll find a showroom to test out any piece you're looking to invest in. How do you clean a stool? Most of the stools we've listed have specific instructions for cleaning, but non-abrasive cleaners are always recommended. And, most if not all of the stools we've chosen are intended for indoor use only. Even indoors, however, keeping your stools out of direct sunlight will help preserve the finish. Advertisement - Continue Reading BelowWhy Trust Us?For more than three decades, ELLE DECOR has covered stylemakers, trendsetting interiors, and must-have home furnishings. With a focus on the latest design trends and ideas about how to incorporate them into improving your own space, we’re your go-to resource for elevating and beautifying your home. Our team of editors and interior design pros research and review every new article we publish to ensure you have the most up-to-date, expert-approved information.
    #best #barstools #counter #stools
    The 17 Best Barstools and Counter Stools
    Bar stools aren't intended for hours of lounging. What they are intended for, however, is constant use. Because what’s a bar if not a counter by another name? And a counter, in many cases, is also a breakfast table, the after-school snack buffet, the take-out and basketball-watching hub, and, eventually, the cocktail bar, come hosting hour. For each activity, the same seat does its duty. Unlike dining room chairs, bar stools suffer thoughtlessness: We yank them out, half asleep in the morning. We hike our feet up their pegs, lost in a TV show's plot. When friends come over, we lean forward, animatedly. All the while unwittingly testing each little joint and bolt beneath us. That’s why shopping for them requires a good deal of thought. So, we went ahead and did a lot of that thinking for you. Below, you’ll find some of ELLE Decor's favorite stools, from the design-forward to the budget-conscious. You'll also find a little about what went into our choices. The ClassicCarter Counter Stoolat Serena and LilyThere's a lot to be said for a classic. With this elevated chair-like stool, you can rest against the back and bring your feet up to its pegs. Also, it comes in six colorways.Dimensions37"H x 18.25" W x 21" DFeaturesSolid beech, painted finish. No assembly required. Holds up to 275 lbsThe Vacationer Avalon Rattan Swivel Bar Stoolat Serena and Lily If there's a material evocative of vacation, it's rattan. This version also has a swivel seat and basket-weave back. But, you'll have to appreciate the natural wear on a material—it's part of the appeal. Dimensions38.5"H x 20.5"W x 22"DFeaturesMade with hand-wrapped rattan, holds up to 300 lbsAdvertisement - Continue Reading BelowLaurel Foundry Modern Farmhouse® Baggett Solid Wood Windsor Back StoolNow 15% Offat WayfairIf you like the look of light wood but at an affordable pricepoint, this option from Wayfair is totally serviceable. And, it comes in three classic colorways. Dimensions14.8'' W X 14.2'' D; back is 12.5'' HFeaturesWood frame, some assembly required; holds up to 300 lbsMartha Stewart Martha Stewart Playa Handcrafted Rattan Counter StoolNow 36% Offat WayfairTDimensions35'' H x 23'' W x 22.5'' DFeaturessolid wood; some assembly required. Holds up to 300 lbsAdvertisement - Continue Reading BelowElegant designVanity Counter Stoolat nickeykehoe.comAnd what if you want the back, the cushioned seat, and a considered, elevated design? Time to check on Nickey Kehoe. Says our own Interiors Director, Bebe Howorth: “I love a stool with a little bit of back support, but doesn’t impose on the space like a chair.” Dimensions33.25" H x 18" W x 19.5" DFeaturesNatural oak; Susan Deliss, constanza in denimBarely-there backrestSede Counter Stool at ArticleA short back, a cushioned seat, and an elegant, tapered leg, this stool has a lovely silhouette at a low price point. Available in three colorways and the option of a leatherseat. Dimensions31"H x 16"W x 17"DFeaturesSolid and veneered wood, holds up to 300 lbsAdvertisement - Continue Reading BelowWayne Swivel Bar & Counter Stoolsat West ElmThere's no denying the appeal of the swivel. And if you foresee your bar stools serving a primarily social function, you'll want to seek that out. As Dorothy Scarborough, Editorial Assistant at ELLE Decor and Town & Country says: "Bar stools, by their very design, are tricky. When you're a few martinis in, it's fun to swing your legs and turn in circles, but when you're trying to enjoy a bowl of cereal, bar stools make for a less than ideal experience. This West Elm design has a higher back and arms, and at only 26 inches off the ground, doesn't make you feel like you're sitting on a tower. It's almost like a real chair, but it has all the jazzy chicness of a barstool."Adam Stoolat framacph.comOf course, not all stools need to be tall chairs. The perch-type stool can serve its function expertly, even with a minimal design, like this one from Frama. Dimension30" H x 17" W x 10" DFeaturesPowder coated frame, oiled seat; steel frame, oak seatAdvertisement - Continue Reading BelowErgonomic PerchWayland stool at oandgstudio.comPrepare for a comfortable perch with this statuesque stool from O&G Studio. Says ELLE Decor's Market Director, Benjamin Reynaert: "I personally sit-tested the Wayland Stool, and let me tell you—the carved solid wood seat isn’t just a design detail, it’s a comfort revelation, perfectly pairing form with the casual functionality of its bamboo-inspired turnings and classic box stretcher base, all available in a palette of 19 hand-applied stained finishes that highlight the American craftsmanship of O&G Studio."Dimensions25" H x 21.25" W x 18" DFeaturesMade with ash and maple wood, stained; "stylized bamboo turnings of the Wayland Family."Industrial chicSteel Stoolat ZARA HomeFrom Zara Home comes this sharp number. Not as tall as some, and, clearly, not intended for hours of sitting, this steel stool brings a chic taste of the industrial to any room. Dimensions17" H x 11" W x 11" DAdvertisement - Continue Reading BelowWinsome Winsome Satori Stoolat AmazonWith a curved wooden seat and a classic, ladder-leg construction, this Winsome Satori stool is chic, simple, and affordable. Bonus: It's available in multiple heights.Dimensions16" H x 18" W x 29" DFeaturesSolid beech wood with a walnut finishLancaster Stool at webstaurantstore.comIndustrial but make it comfortable: The Lancaster stool comes in multiple colors and heights. Plus: the cushion is removable, making these stools stackable for easy storage. Dimensions24" H x 16 " D x 16" WFeaturesFrame is coated steel, and the cushion is corrosion-resistant powder coated vinyl. Holds up to 400 lbsAdvertisement - Continue Reading BelowCurvy and Cushy Lulu and Georgia Ashford Bar Stoolat Lulu and GeorgiaThis curvy stool from Lulu and Georgia comes with the brusque silhouette of its industrial cousins tempered by the soft edges, arched lines, and plush seat of a comfortable chair.Dimensions30" H x 18.25" W x 18.25" DFeaturesAsh wood frame, foam cushion; hand-crafted and made from sustainable materialsThe Heavy-Lifting VacationerAlastair Bar & Counter StoolNow 37% Offat Joss & MainA return to the vacation rattan, this classic, backless stool comes with all the attitude of a beach cabana at a reasonable price. Offered in multiple colors and heights for beach-adjacent rooms of all sorts. Surprisingly, perhaps, this stool claims to hold up to 500 lbs, making it the heaviest lifter of them all. Dimensinos24'' H X 16'' W X 16'' DFeaturesMade from rattan and plastic, it can hold up to 500 lbsAdvertisement - Continue Reading BelowInnovative eleganceMoon Stoolat sunatsix.comIt's all about the considered design on these moon stools. But, made from solid white oak treated with tenna oil, they're also stain resistant and built for use. Dimensions30” H x 19.5” W x 16”DFeatureshand-made from white oak using traditional joinery; three finishes availableHigh-quality classic Range Stoolat assemblyline.coThese classic stools are solid wood, handmade, and all about the understated beauty of quality. Which also means you'll need to order these well in advance of your first soiree, as they take roughly 12 to 14 weeks to make. Dimensions25” H x 13” L x 13” WFeaturesMade from white oak; multiple finishes available.Advertisement - Continue Reading BelowMainstays Natural wood stoolat WalmartYes, Walmart makes a totally serviceable, classic wooden bar stool. Sold in packs of two, and available in multiple heights, they get the job done. Dimensions13.50" H x 29.00" D x 13.50" WFeaturesMade from woodFrequently Asked QuestionsWhat makes a bar stool comfortable? Let's be honest: Most stools are not built for comfort. Especially the perch variety, as we're calling it—stools with just a flat shelf or round disk to sit on—are functional. If comfort is high on the must-have list, look for a perch with a slightly concave seat, engineered for the shape of a human body. Or skip the perch and go for stools with backrests and cushions. Here's a rule of thumb: the thicker the cushion, the higher the back, the longer you'll want to sit. Ideally, however, you'll find a showroom to test out any piece you're looking to invest in. How do you clean a stool? Most of the stools we've listed have specific instructions for cleaning, but non-abrasive cleaners are always recommended. And, most if not all of the stools we've chosen are intended for indoor use only. Even indoors, however, keeping your stools out of direct sunlight will help preserve the finish. Advertisement - Continue Reading BelowWhy Trust Us?For more than three decades, ELLE DECOR has covered stylemakers, trendsetting interiors, and must-have home furnishings. With a focus on the latest design trends and ideas about how to incorporate them into improving your own space, we’re your go-to resource for elevating and beautifying your home. Our team of editors and interior design pros research and review every new article we publish to ensure you have the most up-to-date, expert-approved information. #best #barstools #counter #stools
    WWW.ELLEDECOR.COM
    The 17 Best Barstools and Counter Stools
    Bar stools aren't intended for hours of lounging. What they are intended for, however, is constant use. Because what’s a bar if not a counter by another name? And a counter, in many cases, is also a breakfast table, the after-school snack buffet, the take-out and basketball-watching hub, and, eventually, the cocktail bar, come hosting hour. For each activity, the same seat does its duty. Unlike dining room chairs, bar stools suffer thoughtlessness: We yank them out, half asleep in the morning. We hike our feet up their pegs, lost in a TV show's plot. When friends come over, we lean forward, animatedly. All the while unwittingly testing each little joint and bolt beneath us. That’s why shopping for them requires a good deal of thought. So, we went ahead and did a lot of that thinking for you. Below, you’ll find some of ELLE Decor's favorite stools, from the design-forward to the budget-conscious. You'll also find a little about what went into our choices. The Classic (with a Back) Carter Counter Stool$398 at Serena and LilyThere's a lot to be said for a classic. With this elevated chair-like stool, you can rest against the back and bring your feet up to its pegs. Also, it comes in six colorways.Dimensions37"H x 18.25" W x 21" DFeaturesSolid beech, painted finish. No assembly required. Holds up to 275 lbsThe Vacationer Avalon Rattan Swivel Bar Stool$648 at Serena and Lily If there's a material evocative of vacation, it's rattan. This version also has a swivel seat and basket-weave back. But, you'll have to appreciate the natural wear on a material—it's part of the appeal. Dimensions38.5"H x 20.5"W x 22"DFeaturesMade with hand-wrapped rattan, holds up to 300 lbsAdvertisement - Continue Reading BelowLaurel Foundry Modern Farmhouse® Baggett Solid Wood Windsor Back StoolNow 15% Off$165 $140 at WayfairIf you like the look of light wood but at an affordable pricepoint, this option from Wayfair is totally serviceable. And, it comes in three classic colorways. Dimensions14.8'' W X 14.2'' D; back is 12.5'' HFeaturesWood frame, some assembly required; holds up to 300 lbsMartha Stewart Martha Stewart Playa Handcrafted Rattan Counter StoolNow 36% Off$399 $256 at WayfairTDimensions35'' H x 23'' W x 22.5'' DFeaturessolid wood; some assembly required. Holds up to 300 lbsAdvertisement - Continue Reading BelowElegant designVanity Counter Stool$3,400 at nickeykehoe.comAnd what if you want the back, the cushioned seat, and a considered, elevated design? Time to check on Nickey Kehoe. Says our own Interiors Director, Bebe Howorth: “I love a stool with a little bit of back support, but doesn’t impose on the space like a chair.” Dimensions33.25" H x 18" W x 19.5" DFeaturesNatural oak; Susan Deliss, constanza in denimBarely-there backrestSede Counter Stool $249 at ArticleA short back, a cushioned seat, and an elegant, tapered leg, this stool has a lovely silhouette at a low price point. Available in three colorways and the option of a leather (versus fabric) seat. Dimensions31"H x 16"W x 17"DFeaturesSolid and veneered wood, holds up to 300 lbsAdvertisement - Continue Reading BelowWayne Swivel Bar & Counter Stools$449 at West ElmThere's no denying the appeal of the swivel. And if you foresee your bar stools serving a primarily social function, you'll want to seek that out. As Dorothy Scarborough, Editorial Assistant at ELLE Decor and Town & Country says: "Bar stools, by their very design, are tricky. When you're a few martinis in, it's fun to swing your legs and turn in circles, but when you're trying to enjoy a bowl of cereal, bar stools make for a less than ideal experience. This West Elm design has a higher back and arms, and at only 26 inches off the ground, doesn't make you feel like you're sitting on a tower. It's almost like a real chair, but it has all the jazzy chicness of a barstool."Adam Stool$610 at framacph.comOf course, not all stools need to be tall chairs. The perch-type stool can serve its function expertly, even with a minimal design, like this one from Frama. Dimension30" H x 17" W x 10" DFeaturesPowder coated frame, oiled seat; steel frame, oak seatAdvertisement - Continue Reading BelowErgonomic PerchWayland stool $1,110 at oandgstudio.comPrepare for a comfortable perch with this statuesque stool from O&G Studio. Says ELLE Decor's Market Director, Benjamin Reynaert: "I personally sit-tested the Wayland Stool, and let me tell you—the carved solid wood seat isn’t just a design detail, it’s a comfort revelation, perfectly pairing form with the casual functionality of its bamboo-inspired turnings and classic box stretcher base, all available in a palette of 19 hand-applied stained finishes that highlight the American craftsmanship of O&G Studio."Dimensions25" H x 21.25" W x 18" DFeaturesMade with ash and maple wood, stained; "stylized bamboo turnings of the Wayland Family."Industrial chicSteel Stool$129 at ZARA HomeFrom Zara Home comes this sharp number. Not as tall as some, and, clearly, not intended for hours of sitting, this steel stool brings a chic taste of the industrial to any room. Dimensions17" H x 11" W x 11" DAdvertisement - Continue Reading BelowWinsome Winsome Satori Stool$36 at AmazonWith a curved wooden seat and a classic, ladder-leg construction, this Winsome Satori stool is chic, simple, and affordable. Bonus: It's available in multiple heights.Dimensions16" H x 18" W x 29" DFeaturesSolid beech wood with a walnut finishLancaster Stool $48 at webstaurantstore.comIndustrial but make it comfortable: The Lancaster stool comes in multiple colors and heights. Plus: the cushion is removable, making these stools stackable for easy storage. Dimensions24" H x 16 " D x 16" WFeaturesFrame is coated steel, and the cushion is corrosion-resistant powder coated vinyl. Holds up to 400 lbsAdvertisement - Continue Reading BelowCurvy and Cushy Lulu and Georgia Ashford Bar Stool$598 at Lulu and GeorgiaThis curvy stool from Lulu and Georgia comes with the brusque silhouette of its industrial cousins tempered by the soft edges, arched lines, and plush seat of a comfortable chair.Dimensions30" H x 18.25" W x 18.25" DFeaturesAsh wood frame, foam cushion; hand-crafted and made from sustainable materialsThe Heavy-Lifting VacationerAlastair Bar & Counter StoolNow 37% Off$264 $167 at Joss & MainA return to the vacation rattan, this classic, backless stool comes with all the attitude of a beach cabana at a reasonable price. Offered in multiple colors and heights for beach-adjacent rooms of all sorts. Surprisingly, perhaps, this stool claims to hold up to 500 lbs, making it the heaviest lifter of them all. Dimensinos24'' H X 16'' W X 16'' DFeaturesMade from rattan and plastic, it can hold up to 500 lbsAdvertisement - Continue Reading BelowInnovative eleganceMoon Stool$880 at sunatsix.comIt's all about the considered design on these moon stools. But, made from solid white oak treated with tenna oil, they're also stain resistant and built for use. Dimensions30” H x 19.5” W x 16”DFeatureshand-made from white oak using traditional joinery; three finishes availableHigh-quality classic Range Stool$1,200 at assemblyline.coThese classic stools are solid wood, handmade, and all about the understated beauty of quality. Which also means you'll need to order these well in advance of your first soiree, as they take roughly 12 to 14 weeks to make. Dimensions25” H x 13” L x 13” WFeaturesMade from white oak; multiple finishes available.Advertisement - Continue Reading BelowMainstays Natural wood stool$35 at WalmartYes, Walmart makes a totally serviceable, classic wooden bar stool. Sold in packs of two, and available in multiple heights, they get the job done. Dimensions13.50" H x 29.00" D x 13.50" WFeaturesMade from woodFrequently Asked QuestionsWhat makes a bar stool comfortable? Let's be honest: Most stools are not built for comfort. Especially the perch variety, as we're calling it—stools with just a flat shelf or round disk to sit on—are functional. If comfort is high on the must-have list, look for a perch with a slightly concave seat, engineered for the shape of a human body. Or skip the perch and go for stools with backrests and cushions. Here's a rule of thumb: the thicker the cushion, the higher the back, the longer you'll want to sit. Ideally, however, you'll find a showroom to test out any piece you're looking to invest in. How do you clean a stool? Most of the stools we've listed have specific instructions for cleaning, but non-abrasive cleaners are always recommended. And, most if not all of the stools we've chosen are intended for indoor use only. Even indoors, however, keeping your stools out of direct sunlight will help preserve the finish. Advertisement - Continue Reading BelowWhy Trust Us?For more than three decades, ELLE DECOR has covered stylemakers, trendsetting interiors, and must-have home furnishings. With a focus on the latest design trends and ideas about how to incorporate them into improving your own space, we’re your go-to resource for elevating and beautifying your home. Our team of editors and interior design pros research and review every new article we publish to ensure you have the most up-to-date, expert-approved information.
    0 Comments 0 Shares 0 Reviews
  • Ezsharp 2.0 Titanium Folding Knife with Swappable Blades Changes the EDC Game

    Your everyday carry setup says a lot about who you are. Whether you’re a craftsman who demands precision tools or an outdoor enthusiast who needs reliable gear, the right knife can make all the difference. The Ezsharp 2.0 Titanium Folding Utility Knife isn’t just another blade for your pocket. It’s a game-changer that combines premium materials with innovative design.
    Most folding knives force you to choose between strength and weight, but the Ezsharp 2.0 throws that compromise out the window. Built from premium titanium alloy, this folding knife delivers incredible strength while staying remarkably lightweight in your pocket. You get the durability you need without the bulk that weighs you down during long days on the job or weekend adventures.
    Designer: Alan Zheng
    Click Here to Buy Now:. Hurry, only 16/170 left!

    Titanium brings some serious advantages to the table that make it worth the investment. Unlike traditional stainless steel options, titanium offers natural resistance to rust and corrosion, so your knife stays sharp and reliable whether you’re working in humid conditions, caught in unexpected rain, or dealing with extreme temperatures. This means your tool performs consistently regardless of what Mother Nature throws your way.

    The real genius of the Ezsharp 2.0 lies in its dual-blade storage system. Instead of carrying multiple cutting tools or constantly searching for the right blade, you can swap between different scalpel blade types depending on your task. Need precision for detailed work? Switch to a fine-point blade. Tackling heavy-duty cutting? Pop in a robust utility blade and get to work.

    This innovative storage design uses powerful magnets to secure blades in both the active position and the backup compartment. The magnetic retention system ensures your blades stay exactly where they should be, eliminating the wobble and play that plague cheaper alternatives. You can trust that your cutting edge will be stable and precise when you need it most.

    The engineering extends beyond just storage, though. The Ezsharp 2.0 accepts six different scalpel blade formats, including #18, #20, #21, #22, #23, and #24. This compatibility gives you access to specialized blade geometries for everything from cardboard breakdown to precision crafting. Having options means you can tackle any cutting challenge without compromise.

    Craftsmen will appreciate the attention to detail in the construction. Every component except the replaceable blades comes from precision CNC machining, ensuring tight tolerances and smooth operation. The stainless steel blade holder receives proper heat treatment for longevity, while the frame lock mechanism provides a secure lockup that you can depend on during demanding tasks.

    The flipper opening system makes one-handed deployment effortless, perfect when your other hand is busy holding materials or managing your workspace. This practical design consideration shows that the makers understand how working professionals actually use their tools. You shouldn’t have to fumble with complicated mechanisms when time matters and precision counts.

    For EDC enthusiasts, the compact profile means the Ezsharp 2.0 disappears in your pocket without printing or creating uncomfortable bulk. The titanium construction keeps the weight down to levels that won’t throw off your carry balance, yet provides the strength to handle serious cutting tasks when called upon.

    The combination of premium materials, thoughtful engineering, and practical functionality makes the Ezsharp 2.0 stand out in a crowded market. This folding knife represents what happens when designers listen to users and create solutions for real-world problems. Whether you’re a professional who depends on reliable tools or an enthusiast who appreciates quality gear, the Ezsharp 2.0 delivers performance that justifies its place in your everyday carry rotation.
    Click Here to Buy Now:. Hurry, only 16/170 left!The post Ezsharp 2.0 Titanium Folding Knife with Swappable Blades Changes the EDC Game first appeared on Yanko Design.
    #ezsharp #titanium #folding #knife #with
    Ezsharp 2.0 Titanium Folding Knife with Swappable Blades Changes the EDC Game
    Your everyday carry setup says a lot about who you are. Whether you’re a craftsman who demands precision tools or an outdoor enthusiast who needs reliable gear, the right knife can make all the difference. The Ezsharp 2.0 Titanium Folding Utility Knife isn’t just another blade for your pocket. It’s a game-changer that combines premium materials with innovative design. Most folding knives force you to choose between strength and weight, but the Ezsharp 2.0 throws that compromise out the window. Built from premium titanium alloy, this folding knife delivers incredible strength while staying remarkably lightweight in your pocket. You get the durability you need without the bulk that weighs you down during long days on the job or weekend adventures. Designer: Alan Zheng Click Here to Buy Now:. Hurry, only 16/170 left! Titanium brings some serious advantages to the table that make it worth the investment. Unlike traditional stainless steel options, titanium offers natural resistance to rust and corrosion, so your knife stays sharp and reliable whether you’re working in humid conditions, caught in unexpected rain, or dealing with extreme temperatures. This means your tool performs consistently regardless of what Mother Nature throws your way. The real genius of the Ezsharp 2.0 lies in its dual-blade storage system. Instead of carrying multiple cutting tools or constantly searching for the right blade, you can swap between different scalpel blade types depending on your task. Need precision for detailed work? Switch to a fine-point blade. Tackling heavy-duty cutting? Pop in a robust utility blade and get to work. This innovative storage design uses powerful magnets to secure blades in both the active position and the backup compartment. The magnetic retention system ensures your blades stay exactly where they should be, eliminating the wobble and play that plague cheaper alternatives. You can trust that your cutting edge will be stable and precise when you need it most. The engineering extends beyond just storage, though. The Ezsharp 2.0 accepts six different scalpel blade formats, including #18, #20, #21, #22, #23, and #24. This compatibility gives you access to specialized blade geometries for everything from cardboard breakdown to precision crafting. Having options means you can tackle any cutting challenge without compromise. Craftsmen will appreciate the attention to detail in the construction. Every component except the replaceable blades comes from precision CNC machining, ensuring tight tolerances and smooth operation. The stainless steel blade holder receives proper heat treatment for longevity, while the frame lock mechanism provides a secure lockup that you can depend on during demanding tasks. The flipper opening system makes one-handed deployment effortless, perfect when your other hand is busy holding materials or managing your workspace. This practical design consideration shows that the makers understand how working professionals actually use their tools. You shouldn’t have to fumble with complicated mechanisms when time matters and precision counts. For EDC enthusiasts, the compact profile means the Ezsharp 2.0 disappears in your pocket without printing or creating uncomfortable bulk. The titanium construction keeps the weight down to levels that won’t throw off your carry balance, yet provides the strength to handle serious cutting tasks when called upon. The combination of premium materials, thoughtful engineering, and practical functionality makes the Ezsharp 2.0 stand out in a crowded market. This folding knife represents what happens when designers listen to users and create solutions for real-world problems. Whether you’re a professional who depends on reliable tools or an enthusiast who appreciates quality gear, the Ezsharp 2.0 delivers performance that justifies its place in your everyday carry rotation. Click Here to Buy Now:. Hurry, only 16/170 left!The post Ezsharp 2.0 Titanium Folding Knife with Swappable Blades Changes the EDC Game first appeared on Yanko Design. #ezsharp #titanium #folding #knife #with
    WWW.YANKODESIGN.COM
    Ezsharp 2.0 Titanium Folding Knife with Swappable Blades Changes the EDC Game
    Your everyday carry setup says a lot about who you are. Whether you’re a craftsman who demands precision tools or an outdoor enthusiast who needs reliable gear, the right knife can make all the difference. The Ezsharp 2.0 Titanium Folding Utility Knife isn’t just another blade for your pocket. It’s a game-changer that combines premium materials with innovative design. Most folding knives force you to choose between strength and weight, but the Ezsharp 2.0 throws that compromise out the window. Built from premium titanium alloy, this folding knife delivers incredible strength while staying remarkably lightweight in your pocket. You get the durability you need without the bulk that weighs you down during long days on the job or weekend adventures. Designer: Alan Zheng Click Here to Buy Now: $79 $138.6 (43% off). Hurry, only 16/170 left! Titanium brings some serious advantages to the table that make it worth the investment. Unlike traditional stainless steel options, titanium offers natural resistance to rust and corrosion, so your knife stays sharp and reliable whether you’re working in humid conditions, caught in unexpected rain, or dealing with extreme temperatures. This means your tool performs consistently regardless of what Mother Nature throws your way. The real genius of the Ezsharp 2.0 lies in its dual-blade storage system. Instead of carrying multiple cutting tools or constantly searching for the right blade, you can swap between different scalpel blade types depending on your task. Need precision for detailed work? Switch to a fine-point blade. Tackling heavy-duty cutting? Pop in a robust utility blade and get to work. This innovative storage design uses powerful magnets to secure blades in both the active position and the backup compartment. The magnetic retention system ensures your blades stay exactly where they should be, eliminating the wobble and play that plague cheaper alternatives. You can trust that your cutting edge will be stable and precise when you need it most. The engineering extends beyond just storage, though. The Ezsharp 2.0 accepts six different scalpel blade formats, including #18, #20, #21, #22, #23, and #24. This compatibility gives you access to specialized blade geometries for everything from cardboard breakdown to precision crafting. Having options means you can tackle any cutting challenge without compromise. Craftsmen will appreciate the attention to detail in the construction. Every component except the replaceable blades comes from precision CNC machining, ensuring tight tolerances and smooth operation. The stainless steel blade holder receives proper heat treatment for longevity, while the frame lock mechanism provides a secure lockup that you can depend on during demanding tasks. The flipper opening system makes one-handed deployment effortless, perfect when your other hand is busy holding materials or managing your workspace. This practical design consideration shows that the makers understand how working professionals actually use their tools. You shouldn’t have to fumble with complicated mechanisms when time matters and precision counts. For EDC enthusiasts, the compact profile means the Ezsharp 2.0 disappears in your pocket without printing or creating uncomfortable bulk. The titanium construction keeps the weight down to levels that won’t throw off your carry balance, yet provides the strength to handle serious cutting tasks when called upon. The combination of premium materials, thoughtful engineering, and practical functionality makes the Ezsharp 2.0 stand out in a crowded market. This folding knife represents what happens when designers listen to users and create solutions for real-world problems. Whether you’re a professional who depends on reliable tools or an enthusiast who appreciates quality gear, the Ezsharp 2.0 delivers performance that justifies its place in your everyday carry rotation. Click Here to Buy Now: $79 $138.6 (43% off). Hurry, only 16/170 left!The post Ezsharp 2.0 Titanium Folding Knife with Swappable Blades Changes the EDC Game first appeared on Yanko Design.
    0 Comments 0 Shares 0 Reviews
  • Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS

    I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable and handle a lot of the animation minutiae.In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API.
    The Initial Markup
    Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional div element containing an id of #highlight. We give the first navigation item a class of .active.
    See the Pen Moving Highlight Navbar Starting Markupby Blake Lundquist.
    For this version, we will position the #highlight element around the element with the .active class to create a border. We can utilize absolute positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding left: -200px and include transition styles for all properties so that any changes in the position and size of the element will happen gradually.
    #highlight {
    z-index: 0;
    position: absolute;
    height: 100%;
    width: 100px;
    left: -200px;
    border: 2px solid green;
    box-sizing: border-box;
    transition: all 0.2s ease;
    }

    Add A Boilerplate Event Handler For Click Interactions
    We want the highlight element to animate when a user changes the .active navigation item. Let’s add a click event handler to the nav element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the .active nav item if the user clicks on a link that does not already have the .active class.
    Initially, we can call console.log to ensure the handler fires only when expected:

    const navbar = document.querySelector;

    navbar.addEventListener{
    // return if the clicked element doesn't have the correct selector
    if')) {
    return;
    }

    console.log;
    });

    Open your browser console and try clicking different items in the navigation bar. You should only see "click" being logged when you select a new item in the navigation bar.
    Now that we know our event handler is working on the correct elements let’s add code to move the .active class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of .active after removing it from the previously active item.

    const navbar = document.querySelector;

    navbar.addEventListener{
    // return if the clicked element doesn't have the correct selector
    if')) {
    return;
    }

    - console.log;
    + document.querySelector.classList.remove;
    + event.target.classList.add;

    });

    Our #highlight element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the #highlight selector has transition styles applied, it will move gradually when its position changes.
    Using getBoundingClientRect, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match.

    // handler for moving the highlight
    const moveHighlight ==> {
    const activeNavItem = document.querySelector;
    const highlighterElement = document.querySelector;

    const width = activeNavItem.offsetWidth;

    const itemPos = activeNavItem.getBoundingClientRect;
    const navbarPos = navbar.getBoundingClientRectconst relativePosX = itemPos.left - navbarPos.left;

    const styles = {
    left: ${relativePosX}px,
    width: ${width}px,
    };

    Object.assign;
    }

    Let’s call our new function when the click event fires:

    navbar.addEventListener{
    // return if the clicked element doesn't have the correct selector
    if')) {
    return;
    }

    document.querySelector.classList.remove;
    event.target.classList.add;

    + moveHighlight;
    });

    Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads:
    // handler for moving the highlight
    const moveHighlight ==> {
    // ...
    }

    // display the highlight when the page loads
    moveHighlight;

    Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar.
    See the Pen Moving Highlight Navbarby Blake Lundquist.
    That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like mouseover events. In the next section, we will explore refactoring this feature using the View Transition API.
    Using The View Transition API
    The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the native-app-like user experience featured in frameworks like Astro. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality.
    For this approach, we no longer need a separate #highlight element. Instead, we can style the .active navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked.
    We’ll start by getting rid of the #highlight element and its associated CSS and replacing it with styles for the nav a::after pseudo-selector:
    <nav>
    - <div id="highlight"></div>
    <a href="#" class="active">Home</a>
    <a href="#services">Services</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    </nav>

    - #highlight {
    - z-index: 0;
    - position: absolute;
    - height: 100%;
    - width: 0;
    - left: 0;
    - box-sizing: border-box;
    - transition: all 0.2s ease;
    - }

    + nav a::after {
    + content: " ";
    + position: absolute;
    + left: 0;
    + top: 0;
    + width: 100%;
    + height: 100%;
    + border: none;
    + box-sizing: border-box;
    + }

    For the .active class, we include the view-transition-name property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the .active navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of highlight, but we could theoretically give it any name.
    nav a.active::after {
    border: 2px solid green;
    view-transition-name: highlight;
    }

    Once we have a selector that contains a view-transition-name property, the only remaining step is to trigger the transition using the startViewTransition method and pass in a callback function.

    const navbar = document.querySelector;

    // Change the active nav item on click
    navbar.addEventListener{

    if')) {
    return;
    }

    document.startViewTransition=> {
    document.querySelector.classList.remove;

    event.target.classList.add;
    });
    });

    Above is a revised version of the click handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call document.startViewTransition and pass in a callback function to change the item that has the .active class!
    Adjusting The View Transition
    At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but Jake Archibald has a detailed explanation you can read for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit height for the ::view-transition-old and ::view-transition-new pseudo-selectors representing a static snapshot of the old and new view, respectively.
    ::view-transition-old{
    height: 100%;
    }

    ::view-transition-new{
    height: 100%;
    }

    Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported:

    const navbar = document.querySelector;

    // change the item that has the .active class applied
    const setActiveElement ==> {
    document.querySelector.classList.remove;
    elem.classList.add;
    }

    // Start view transition and pass in a callback on click
    navbar.addEventListener{
    if')) {
    return;
    }

    // Fallback for browsers that don't support View Transitions:
    if{
    setActiveElement;
    return;
    }

    document.startViewTransition=> setActiveElement);
    });

    Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links.
    See the Pen Moving Highlight Navbar with View Transitionby Blake Lundquist.
    Conclusion
    Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve native-app-like interactions without breaking the bank. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the getBoundingClientRectmethod and the View Transition API.
    Resources

    getBoundingClientRectmethod documentation
    View Transition API documentation
    “View Transitions: Handling Aspect Ratio Changes” by Jake Archibald
    #creating #ampampldquomoving #highlightampamprdquo #navigation #bar
    Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS
    I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable and handle a lot of the animation minutiae.In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API. The Initial Markup Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional div element containing an id of #highlight. We give the first navigation item a class of .active. See the Pen Moving Highlight Navbar Starting Markupby Blake Lundquist. For this version, we will position the #highlight element around the element with the .active class to create a border. We can utilize absolute positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding left: -200px and include transition styles for all properties so that any changes in the position and size of the element will happen gradually. #highlight { z-index: 0; position: absolute; height: 100%; width: 100px; left: -200px; border: 2px solid green; box-sizing: border-box; transition: all 0.2s ease; } Add A Boilerplate Event Handler For Click Interactions We want the highlight element to animate when a user changes the .active navigation item. Let’s add a click event handler to the nav element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the .active nav item if the user clicks on a link that does not already have the .active class. Initially, we can call console.log to ensure the handler fires only when expected: const navbar = document.querySelector; navbar.addEventListener{ // return if the clicked element doesn't have the correct selector if')) { return; } console.log; }); Open your browser console and try clicking different items in the navigation bar. You should only see "click" being logged when you select a new item in the navigation bar. Now that we know our event handler is working on the correct elements let’s add code to move the .active class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of .active after removing it from the previously active item. const navbar = document.querySelector; navbar.addEventListener{ // return if the clicked element doesn't have the correct selector if')) { return; } - console.log; + document.querySelector.classList.remove; + event.target.classList.add; }); Our #highlight element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the #highlight selector has transition styles applied, it will move gradually when its position changes. Using getBoundingClientRect, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match. // handler for moving the highlight const moveHighlight ==> { const activeNavItem = document.querySelector; const highlighterElement = document.querySelector; const width = activeNavItem.offsetWidth; const itemPos = activeNavItem.getBoundingClientRect; const navbarPos = navbar.getBoundingClientRectconst relativePosX = itemPos.left - navbarPos.left; const styles = { left: ${relativePosX}px, width: ${width}px, }; Object.assign; } Let’s call our new function when the click event fires: navbar.addEventListener{ // return if the clicked element doesn't have the correct selector if')) { return; } document.querySelector.classList.remove; event.target.classList.add; + moveHighlight; }); Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads: // handler for moving the highlight const moveHighlight ==> { // ... } // display the highlight when the page loads moveHighlight; Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar. See the Pen Moving Highlight Navbarby Blake Lundquist. That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like mouseover events. In the next section, we will explore refactoring this feature using the View Transition API. Using The View Transition API The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the native-app-like user experience featured in frameworks like Astro. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality. For this approach, we no longer need a separate #highlight element. Instead, we can style the .active navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked. We’ll start by getting rid of the #highlight element and its associated CSS and replacing it with styles for the nav a::after pseudo-selector: <nav> - <div id="highlight"></div> <a href="#" class="active">Home</a> <a href="#services">Services</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> - #highlight { - z-index: 0; - position: absolute; - height: 100%; - width: 0; - left: 0; - box-sizing: border-box; - transition: all 0.2s ease; - } + nav a::after { + content: " "; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + box-sizing: border-box; + } For the .active class, we include the view-transition-name property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the .active navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of highlight, but we could theoretically give it any name. nav a.active::after { border: 2px solid green; view-transition-name: highlight; } Once we have a selector that contains a view-transition-name property, the only remaining step is to trigger the transition using the startViewTransition method and pass in a callback function. const navbar = document.querySelector; // Change the active nav item on click navbar.addEventListener{ if')) { return; } document.startViewTransition=> { document.querySelector.classList.remove; event.target.classList.add; }); }); Above is a revised version of the click handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call document.startViewTransition and pass in a callback function to change the item that has the .active class! Adjusting The View Transition At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but Jake Archibald has a detailed explanation you can read for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit height for the ::view-transition-old and ::view-transition-new pseudo-selectors representing a static snapshot of the old and new view, respectively. ::view-transition-old{ height: 100%; } ::view-transition-new{ height: 100%; } Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported: const navbar = document.querySelector; // change the item that has the .active class applied const setActiveElement ==> { document.querySelector.classList.remove; elem.classList.add; } // Start view transition and pass in a callback on click navbar.addEventListener{ if')) { return; } // Fallback for browsers that don't support View Transitions: if{ setActiveElement; return; } document.startViewTransition=> setActiveElement); }); Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links. See the Pen Moving Highlight Navbar with View Transitionby Blake Lundquist. Conclusion Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve native-app-like interactions without breaking the bank. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the getBoundingClientRectmethod and the View Transition API. Resources getBoundingClientRectmethod documentation View Transition API documentation “View Transitions: Handling Aspect Ratio Changes” by Jake Archibald #creating #ampampldquomoving #highlightampamprdquo #navigation #bar
    SMASHINGMAGAZINE.COM
    Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS
    I recently came across an old jQuery tutorial demonstrating a “moving highlight” navigation bar and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the View Transition API make progressive enhancement more easily achievable and handle a lot of the animation minutiae. (Large preview) In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API. The Initial Markup Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional div element containing an id of #highlight. We give the first navigation item a class of .active. See the Pen Moving Highlight Navbar Starting Markup [forked] by Blake Lundquist. For this version, we will position the #highlight element around the element with the .active class to create a border. We can utilize absolute positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding left: -200px and include transition styles for all properties so that any changes in the position and size of the element will happen gradually. #highlight { z-index: 0; position: absolute; height: 100%; width: 100px; left: -200px; border: 2px solid green; box-sizing: border-box; transition: all 0.2s ease; } Add A Boilerplate Event Handler For Click Interactions We want the highlight element to animate when a user changes the .active navigation item. Let’s add a click event handler to the nav element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the .active nav item if the user clicks on a link that does not already have the .active class. Initially, we can call console.log to ensure the handler fires only when expected: const navbar = document.querySelector('nav'); navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } console.log('click'); }); Open your browser console and try clicking different items in the navigation bar. You should only see "click" being logged when you select a new item in the navigation bar. Now that we know our event handler is working on the correct elements let’s add code to move the .active class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of .active after removing it from the previously active item. const navbar = document.querySelector('nav'); navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } - console.log('click'); + document.querySelector('nav a.active').classList.remove('active'); + event.target.classList.add('active'); }); Our #highlight element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the #highlight selector has transition styles applied, it will move gradually when its position changes. Using getBoundingClientRect, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match. // handler for moving the highlight const moveHighlight = () => { const activeNavItem = document.querySelector('a.active'); const highlighterElement = document.querySelector('#highlight'); const width = activeNavItem.offsetWidth; const itemPos = activeNavItem.getBoundingClientRect(); const navbarPos = navbar.getBoundingClientRect() const relativePosX = itemPos.left - navbarPos.left; const styles = { left: ${relativePosX}px, width: ${width}px, }; Object.assign(highlighterElement.style, styles); } Let’s call our new function when the click event fires: navbar.addEventListener('click', function (event) { // return if the clicked element doesn't have the correct selector if (!event.target.matches('nav a:not(active)')) { return; } document.querySelector('nav a.active').classList.remove('active'); event.target.classList.add('active'); + moveHighlight(); }); Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads: // handler for moving the highlight const moveHighlight = () => { // ... } // display the highlight when the page loads moveHighlight(); Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar. See the Pen Moving Highlight Navbar [forked] by Blake Lundquist. That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like mouseover events. In the next section, we will explore refactoring this feature using the View Transition API. Using The View Transition API The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the native-app-like user experience featured in frameworks like Astro. However, the API also provides handlers meant for SPA-style applications. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality. For this approach, we no longer need a separate #highlight element. Instead, we can style the .active navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked. We’ll start by getting rid of the #highlight element and its associated CSS and replacing it with styles for the nav a::after pseudo-selector: <nav> - <div id="highlight"></div> <a href="#" class="active">Home</a> <a href="#services">Services</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> - #highlight { - z-index: 0; - position: absolute; - height: 100%; - width: 0; - left: 0; - box-sizing: border-box; - transition: all 0.2s ease; - } + nav a::after { + content: " "; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: none; + box-sizing: border-box; + } For the .active class, we include the view-transition-name property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the .active navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of highlight, but we could theoretically give it any name. nav a.active::after { border: 2px solid green; view-transition-name: highlight; } Once we have a selector that contains a view-transition-name property, the only remaining step is to trigger the transition using the startViewTransition method and pass in a callback function. const navbar = document.querySelector('nav'); // Change the active nav item on click navbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } document.startViewTransition(() => { document.querySelector('nav a.active').classList.remove('active'); event.target.classList.add('active'); }); }); Above is a revised version of the click handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call document.startViewTransition and pass in a callback function to change the item that has the .active class! Adjusting The View Transition At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible. (Large preview) This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but Jake Archibald has a detailed explanation you can read for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit height for the ::view-transition-old and ::view-transition-new pseudo-selectors representing a static snapshot of the old and new view, respectively. ::view-transition-old(highlight) { height: 100%; } ::view-transition-new(highlight) { height: 100%; } Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported: const navbar = document.querySelector('nav'); // change the item that has the .active class applied const setActiveElement = (elem) => { document.querySelector('nav a.active').classList.remove('active'); elem.classList.add('active'); } // Start view transition and pass in a callback on click navbar.addEventListener('click', async function (event) { if (!event.target.matches('nav a:not(.active)')) { return; } // Fallback for browsers that don't support View Transitions: if (!document.startViewTransition) { setActiveElement(event.target); return; } document.startViewTransition(() => setActiveElement(event.target)); }); Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links. See the Pen Moving Highlight Navbar with View Transition [forked] by Blake Lundquist. Conclusion Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve native-app-like interactions without breaking the bank. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the getBoundingClientRect() method and the View Transition API. Resources getBoundingClientRect() method documentation View Transition API documentation “View Transitions: Handling Aspect Ratio Changes” by Jake Archibald
    0 Comments 0 Shares 0 Reviews
CGShares https://cgshares.com