Archive for year: 2025

Original Source: https://abduzeedo.com/mubiens-youtube-shopping-art-direction-motion-design

Mubien’s YouTube Shopping: Art Direction & Motion Design

abduzeedo
05/18 — 2025

Mubien’s art direction & motion design for YouTube Shopping. See their vibrant, playful 3D visual system in action.

Ever wondered how a giant like YouTube keeps its new ventures feeling fresh and genuinely engaging for its audience? It’s often down to sharp branding and smart design. Take YouTube Shopping, their affiliate program helping creators and brands earn by sharing products their audience will love. To bring its visual identity to life, particularly for key events like the ‘Holiday House’ creator gathering, YouTube turned to the creative studio Mubien.  

Crafting a Dynamic Brand Experience

Mubien was tasked with a comprehensive design challenge: to produce a wide range of materials, including a main presentation and several key motion pieces. The core mission was to capture the spirit of the YouTube Shopping brand while layering in a fresh, dynamic feel. Ultimately, the aim was to shape an engaging visual system that would elevate the content and make the overall experience more memorable and fun for everyone involved.  

Art Direction: Vibrant, Playful, and 3D

So, how did Mubien approach this? Their art direction skillfully blended 3D elements, a vibrant color palette, and playful icons. This strategy created a visual language that is both sophisticated and approachable. The team, including Art Directors Daniel Iglesias, Javier Ochoa, and Carlos Almagro, developed a system that feels cohesive and energetic.  

(Image Suggestion: A collage featuring the stage design from page 3, the name badges and stickers from page 4, and the keychain on page 7.)  

You can see this design philosophy in action across multiple touchpoints. The stage design for presentations is clean and modern, using soft lighting and the prominent YouTube Shopping logo to create an inviting atmosphere. The attention to detail shines in items like event name badges, featuring clear typography for names like “Park Hye-min MAKEUP ARTIST” and friendly icons like a heart or shopping bag, all attached to striking red lanyards.  

Even laptop stickers with slogans like “Shop. Watch. Connect.” and distinct, colorful icons were part of the branding suite, making the brand tangible and shareable. A product interface mock-up, showcasing a bright blue kettlebell with a clear “-20%” discount, demonstrates how this visual style translates effectively to the user experience itself. These elements, often featuring energetic reds, teals, and yellows, consistently reinforce the YouTube Shopping identity.  

Motion Design: Bringing Icons and Ideas to Life

While strong art direction sets the stage, motion design is what truly injects dynamism. The motion work, led by Daniel Iglesias and Paula Iglesias, was pivotal in adding that “fresh, dynamic layer” to the YouTube Shopping brand.  

(Image Suggestion: The motion graphics still from the screen on page 5. If possible, an animated GIF showcasing these types of animations would be even better.)  

Imagine those playful icons and 3D shapes—hearts, shopping bags, stars, and smileys—not just as static images, but animating, bouncing, and transitioning smoothly. The visuals captured on the large screen in the provided materials give us a glimpse of this lively approach, with icons appearing to float and interact in a 3D space. These motion pieces were undoubtedly key to making presentations and informational content far more captivating than traditional static displays. For an event like ‘Holiday House,’ where creators explore new program features, such engaging motion design helps to simplify complex information and build excitement.  

A Cohesive System Across All Touchpoints

The strength of Mubien’s work lies in its consistency. The visual system wasn’t confined to event materials or internal presentations; it was designed to extend outward. An outdoor advertisement mock-up proclaiming, “Shop the Trends. Straight from YouTube,” perfectly captures the brand’s direct and contemporary appeal, utilizing the established visual cues and a friendly, relatable face.  

This cohesive approach, evident from large-scale stage graphics down to small branded items like keychains [Page 7] and extending to public-facing ads, is what builds a robust and memorable brand identity. Mubien, working alongside agencies Workshop Built and Wildcatter LA, successfully forged a visual world for YouTube Shopping. It feels inherently part of the YouTube ecosystem yet refreshingly distinct.  

Design That Connects

What can we take away from this? Mubien’s project for YouTube Shopping is a fantastic illustration of how considered art direction and purposeful motion design can transform a program into an experience. The blend of vibrant colors, tactile 3D elements, and universally friendly icons, all animated with a light touch, makes the concept of shopping on YouTube feel accessible and exciting. It’s a reminder that thoughtful design creates connections, simplifies messages, and ultimately, makes interactions more enjoyable.  

Want to see more of their thoughtful design solutions?

Explore the full project and more from Mubien at: https://mubien.com/portfolio/youtube-shopping/

Art direction and motion design artifacts

Original Source: https://www.hongkiat.com/blog/secure-secrets-1password-cli-terminal/

As developers, we often deal with sensitive data like API keys, SSH credentials, database passwords, and other secrets. Keeping them secure while ensuring easy access across different projects can be a challenge.

This is where 1Password‘s’ CLI comes in.

1Password CLI is a command-line tool that allows you to securely access and manage your 1Password vault without leaving the terminal. Instead of manually copying and pasting secrets, which can be tedious and risky, you can fetch credentials programmatically, automate authentication workflows, and integrate secrets management into your development processes.

In this article, we’ll explore how to install, configure, and use 1Password CLI to streamline your workflow while keeping your credentials secure.

Getting Started

If you’re on macOS or Linux, the easiest way to install 1Password CLI is using Homebrew:

brew install 1password-cli

If you’re on Windows, I recommend referring to the official 1Password CLI documentation for installation instructions.

For Windows and Linux, follow the official 1Password CLI installation guide to get the appropriate setup for your system.

Once installed, go to Settings… > Developer in the 1Password app, and check Integrate with 1Password CLI.

Then, sign in through the Terminal with the following command and select the 1Password account you want to sign in to:

op signin

Now, you’re ready to securely access and manage secrets without exposing them in plain text.

Command-Line Secret Management

When running commands that require authentication, manually copying and pasting credentials can be both tedious and insecure. With 1Password CLI, you can retrieve secrets dynamically using the op read command and the Secret References.

To get the Secret Reference, you can click on the dropdown arrow of the value within the item you’d like to refer to in 1Password.

Then pass it in the command that requires the secrets. For example, to authenticate with doctl using the DigitalOcean API token, you can run:

doctl auth init –access-token $(op read op://Internet/d439ada/token)

Environment Variables Integration

Another way you can use 1Password CLI is by setting the secrets as environment variables. This is useful when working with multiple secrets or when you need to pass them to a script or a program.

If you’re using Chromatic to test your UI components, you can set the CHROMATIC_PROJECT_TOKEN as an environment variable using the op read command:

#!/bin/bash
export NPM_TOKEN=$(op read op://Internet/d439ada/npm_token)
export CHROMATIC_PROJECT_TOKEN=$(op read op://Internet/d439ada/chromatic_token)

// Install the dependencies, including the private ones that require NPM_TOKEN.
npm install

// Chormatic will automatically use the CHROMATIC_PROJECT_TOKEN.
// @see https://www.chromatic.com/docs/cli/#continuous-integration
npx chromatic

Then, you can run the script using the op run command, as follows:

op run — bash chormatic.sh

Shell Plugin Extensions

To make it even more seamless, you can use the Shell Plugins to integrate 1Password with popular third-party apps such as Github CLI, Docker, DigitalOcean CLI, AWS, HuggingFace, OpenAI, and many more.

In this example, we are going to try to integrate it with the Github CLI. To do so, we can run:

op plugin init gh

You’ll be prompted to import your GitHub credentials into 1Password or select an existing 1Password item where your credentials are saved. In this case, since we’ve already saved the GitHub credentials in 1Password, we can select the existing item.

Then, it will ask you the scope where the selected credentials can be used. In this case, we’d select it to use it globally so that we can use it across different repositories.

If this is your first time installing a shell plugin, you’ll need to add the source command to your RC file or shell profile to persist the plugin beyond the current terminal session. For example:

echo “source /Users/jondoe/.config/op/plugins.sh” >> ~/.zshrc && source ~/.zshrc

That’s it for the setup! Now, you can use the gh command to interact with GitHub without exposing your credentials in plain text. To test it out you can run the gh auth status.

Conclusion

1Password CLI is a powerful tool that allows you to securely access and manage your secrets from the Terminal. With a little bit of setup, you can streamline your workflow and integrate secrets management into your development processes with other apps without exposing your credentials in plain text. If you haven’t tried it yet, I recommend giving it a try to make your development workflow more secure and efficient.

The post Secure Secret Management with 1Password CLI appeared first on Hongkiat.

Original Source: https://webdesignerdepot.com/10-ways-to-pretend-youre-not-just-copying-other-designers/

Feeling like you’re running out of creative steam? Don’t panic—here’s your ultimate guide to pretending you’re not just copying other designers. So, go ahead, steal like an artist and make it look like you’re breaking new ground. No one will know the difference—except you.

Original Source: https://www.sitepoint.com/platform-parity-breakthrough-arm64-and-x86/?utm_source=rss

Learn how Actuated, Ampere, and Equinix collaborated to solve ARM64 CI/CD challenges for CNCF projects, enabling native builds that replaced slow emulation with high-performance microVMs, and more.

Continue reading
CNCF Triggers a Platform Parity Breakthrough for Arm64 and x86
on SitePoint.

Original Source: https://tympanus.net/codrops/2025/05/12/motion-highlights-6/

A freshy curated collection of recent motion design work by creative makers.