Archive

Archive for September, 2022

What’s New With Forms in 2022?

September 8th, 2022 No comments

Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed…

requestSubmit()

Safari 16 will be the final browser to add support for requestSubmit.

Before we look at how .requestSubmit() works, let’s remind ourselves how programmatically submitting a form with JavaScript works when using the .submit() method. Submitting a form with submit() does not trigger a submit event. So in the following code, the form is submitted, preventDefault() has no effect, and nothing is logged to the console:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  // code to submit the form goes here
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
})

.submit() will also ignore any HTML form validation. Given the following markup, the form will be submitted when the input is empty even though the input has a required attribute:

<form>   
  <label for="name">Name</label>
  <input required name="name" id="name" type="text">
</form>

.requestSubmit() is an alternative way to submit a form using JavaScript, but in contrast to .submit(), HTML form validation will prevent the form from being submitted. If all the data entered in the form passes validation, the submit event will be fired, meaning “form submitted!” would be logged to the console in the following example:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

You could already achieve this by programmatically clicking the form’s submit button, but requestSubmit is perhaps a more elegant solution.

submitter property of submit event

The SubmitEvent.submitter property gained full cross-browser support with the release of Safari 15.4. This read-only property specifies the

Categories: Designing, Others Tags:

UX Checklists For Interface Designers

September 8th, 2022 No comments

Given just how complex the web has become, it’s easy to overlook some fine little details just before the big release. And sometimes it’s difficult to pick out just the right technique or strategy to address a particular problem. That’s where design checklists can help — and there a few new ones that you might find helpful, too.

Checklist Design

Checklist Design is an ever-growing collection of best design practices, all gathered in one single place. You’ll find pretty much everything from checklists for standalone pages to elements and flows, as well as topics and branding. A neat little resource created by George Hatzis.

Design System Checklist

Design System Checklist is an open-source checklist to planning, building and growing a design system. It includes the foundation of things to keep in mind for design language, design tokens, core components, tooling and project management. Beautifully created and maintaned by fine folks from reshaped. Also, you might want to check Design Systems Handbook as well and you can download the Design System Checklist in Figma.

Accessibility Not-Checklist

Accessibility Not-Checklist is a thorough guide through accessibility, with points grouped by topics and success criteria, with filters for WCAG 2.0 and WCAG 2.1 and best practice recommendations. You can sort the checklist by topic and by role. A fantastic tool by fine folks at intopia.

A11y Project Checklist

A11y Project Checklist is a yet another very thorough checklist for accessibility that goes into all the fine detail from forms and controls to video, audio and animation. It also links to specific parts of WCAG in every individual section with further examples and guidelines. Neat!

Design System Checklist Trello Template

You and your team are working on a design system? The Design System Checklist template for Trello is a great example of how to structure your work and keep everyone involved on the same page. Even if you’re not a Trello user, the template provides some valuable ideas for creating your own checklist of things to take care of when working on a mammoth project like this.

Gov.UK Design System Components (Figma)

The lovely team behind Gov.UK has released a full collection of styles and components designed for UK Government services. During the design process, the team has tested and validated the design of the components, and we can use them to explore the states or conditions that we perhaps haven’t considered in our design just yet.

You can also check the GOV.UK Prototype Kit if you want to install all components locally, and GOV.UK Design System to explore how to use the styles and components in prototyping.

Complex Tables UX Tree

In his article on Architecting a complex table, Slava Shestopalov explores how to design and architect advanced tables — with a very comprehensive table tree checklist of all those fine details that are often forgotten or overlooked.

UX Project Tools Checklist

UX Recipe is a helpful little tool to discover and choose some of the UX project tools and techniques for your project. It also allows you to estimate the amount of time require for the work done. All tools are broken down into groups, and if you click on the hashtags, you’ll find plenty of useful resources for each category. Created and maintained by Alecsandru Grigoriu.

UX Research Methods Flowchart

How do you choose what UX research methods works best for you? There are at least 20 popular methods, and a handy UX Research Methods Flowchart by Norman-Nielsen Group helps you find the right one.

It provides an overview of common strategies, grouped into behavioral, attitudinal, qualitative and quantitative methods. Once you know what insights you are after, you can pick your strategy using the chart.

Form Design UX Checklist

With web form design, it can be quite difficult to figure out just the right component to use when asking a particular question. The team behind Lyft has created a flow chart to make it easier for designers (and not designers alike) to make decisions for their forms.

In an article about form selection patterns, Runi Goswami describes the struggles the team went through when designing a segmented control, and how they ended up with a form selection control flow chart as a result.

Decision Trees For Design System Components

Design systems often come in various flavors. Surely there will be basic components, color, typography and spacing, but often also more sophisticated components, usage guidelines, accessibility considerations and live previews. Additionally, Workday Canvas Design System includes flow charts for deciding what components to use, with examples of the outcome that designers and non-designers can follow to make their decisions.

Interaction Design Checklist

The IxD Checklist that Aaron Legaspi and Amit Jakhu created helps us form a better understanding of interaction. Whenever you’re building some kind of interaction — be it a control, navigation, or an entire interface — you can use the checklist to evaluate your design against affordance, simplicity, structure, consistency, accessibility, tolerance, and feedback to ensure it is easy to use for everyone.

Bonus: Text-To-Timeline Tool

Markwhen: Text-to-Timeline is an incredible little tool to generate timelines, e.g. for project planning or life timeline! You write markdown-ish text and it gets converted into a nice looking cascading timeline. Also available as a VS Code Extension.

And That’s A Wrap!

If you are looking for more gems like this one, we’ve published a few UX guides with checklists over the last few years, so feel free to continue exploring there. Happy checklisting, everyone!

Categories: Others Tags:

Social Media Marketing Along with AI Technology

September 8th, 2022 No comments

Social media has more than 3.6 billion users around the globe. This is a huge number of audiences, therefore it is an amazing platform to market your business whether it is a big brand already or a struggling small business, it is one of the top ways to generate a lot of revenue these days.

Social media marketing alone is compelling but since it has started working along with AI technology the combination has been proven to be deadly. The use of AI in social media marketing is expected to grow at a yearly growth of 28.7% by 2026.

What are Artificial Intelligence and its need in Social Media Marketing

Artificial intelligence is the science that makes machines mimic human behaviors, AI is a broad term under which many technologies come, like

  • Machine learning
  • Face and speech recognition
  • Deep learning

For example, The related recommendations you get while you are searching on Google are the magic sprinkled by AI.

Social media users are rising with each passing day which alone can not be dealt with by marketers. 

As a social media marketer is expected to be ahead in all ongoing trends, bring new content ideas for the audience, and exhibit great customer service. This is a lot of tasks to handle even with a marketing team, that is where artificial intelligence (AI) makes its move and takes over the major responsibilities. 

Importance of AI in Social Media Marketing

There are a bunch of things that AI does for social media marketing and make it a lot more impactful with enhanced user experience. Moreover, artificial intelligence is one of the most in-demand skills.

Targeted advertising

With the help of AI, you can boost your post as google ads and target your prospects and future clients. You don’t have to waste your budget on fruitless efforts. AI will help your business reach the right people. for instance, you are providing services and products related to the baby niche and parenting so it will be better to target mothers and mothers with your advertisement. 

Increased Return on investment

AI has taken over many labor-based jobs like customer services is taken over by chatbots. 

This saves businesses their marketing budget to be used in Ads that have higher conversion rates because of AI.

Guided content

AI can tell you about your audience’s behavior, and what they like or prefer to see on their social media. This can guide you with your content ideas that can have potentially high engagement. 

Spike in audience engagement

When content will be created according to the audience preferences guided by AI, it will cause increased audience engagement, interest, and conversion in clients.

Saves time and energy

AI has made many things automated like your business insights, communication, and so on. This saves a lot of time and energy and gives marketers a chance to direct it somewhere else in their business. AI writing tool “Deep text” has the power to analyze texts, captions, and comments and translate any language around the globe with the help of applied machine learning to remove communication barriers.

How AI and Social Media Marketing Work Along

Drives content creation ideas 

Content is the major thing to digitally market your business on social media. Your posts including pictures, videos, written captions, or blogs all are forms of content.

But how would you know which content works best for you well, that’s where artificial intelligence steps in and helps. AI can process your brand’s voice, it can help you choose relevant hashtags and create your content.

It can make your post reach an audience at a time when the engagement rate is high which increases the conversion rate for your business as the right audience is targeted. 

You can check posts’ insights to see what type of content your audience likes and strategize your future content accordingly.

  • For example, a makeup brand shares picture-based content on Instagram but sees its engagement rate decline, therefore they shift its content to video format and its engagement rate grows, which shows which type of content the audience is interested in.

Makes customer service and user experience better

2020’s consumer report says that more than 80% of clients believe that customer experience is as important as the services or products. 

AI gives a good knowledge of the targeted audience which helps a brand to build a better communication strategy with them.

Like pitching the audience with the ads that they want to see, replying to the audience, and clearing queries on time with the help of AI chatbots. This saves a lot of time and budget that otherwise would have been spent on customer service representatives.

48% of social media users expect their general queries to be answered within 24 hours and AI has made that possible.

Plays role in social media advertising

There is no limit to the power of Artificial intelligence,  to advertise your content on social media organically, there is only a limited effort that you can put in and still be unexpected about the results but the power of AI has changed the dynamics.

Now we can run paid ads, AI can even write your ads for Facebook or Instagram which are optimized for conversion and clicks. Your marketing team does not need to run behind catchy captions or slogans to persuade the audience, AI is there for your business now. 

This is not it yet, Artificial intelligence can give you insights into how your ad is performing and give you ideas that can secure more clients.

Competitor Analysis

To be ahead in marketing your brand, you must know what your competitors are up to, and AI does not even disappoint here, as artificial intelligence-powered analytics can observe your competitor’s profile, you can keep a check on their reach, audience behavior, engagement rate, and conversion if you see their results are great you can incorporate the similar strategy to your brand advertisement.

Influencers Marketing

Approaching influencers is a great way to increase your business reach, Artificial intelligence can also give you a helping hand here at the AI-powered influencers research platform. It observes different influencers’ accounts related to your specific industry, their engagement,  reach, and audience behaviors which can give a boost to your brand. 

One of the most interesting things Artificial intelligence has given to social media marketing is AI influencers, they are fictional computer-generated humans, at least they appear to be physically like Lil Miquela or Bermuda on Instagram with 3 million and 268k followers respectively. Brands can now invest in AI influencers or create their own.

How different social media platforms use AI

Well most around us use social media for marketing in one form or another, some platforms are their favorite and some are not irrespective of that they must have witnessed AI’s magic.

Let’s see how different famous social sites rely on artificial intelligence for their marketing tactics.

Facebook along with AI

Facebook’s Artificial intelligence is trying to reach the human intelligence level.

It uses the AI tool “Deep text” which has the power to analyze the texts, captions, and comments and translate any language around the globe with the help of applied machine learning to remove communication barriers. Removing communication barriers has a great impact on marketing.

It detects users’ interests based on historical engagement and provides them with similar content. Companies can also work on their content moderation as AI on Facebook can detect hate speech or bullying which can lead to violence.

Pinterest along with AI

One best things about Pinterest is that it gives its user a very personalized experience.

More than 80% of Pinterest users make their purchases from there, this is because of the “ deep learning”  algorithm of Artificial intelligence, it gives the users the results that they want to see hence it has a great conversion rate. Pinterest content is hyper-personalized which is the future of marketing in every industry.

Instagram along with AI 

Instagram, also owned by Facebook, has 1 billion active users. It uses AI to give its users personalized content as well as helps businesses with targeted advertisements.

Instagram also does not allow any hate speech or bullying on its platform therefore it detects such texts with the help of “deep text” tools and removes them.

Linkedin along with AI

Linkedin is the place where people connect for business, jobs, and work. Well, it’s AI that connects suitable job candidates to related work organizations, gives job recommendations, and suggests people you like to connect with.

Conclusion

With time more and more social media platforms are starting to rely on Artificial intelligence. We can not undermine the amazing abilities of AI and how beneficial they can be for the future of social media marketing.

So if you want your business to attract a maximum audience with high engagement and conversions then nothing can empower you more than AI.

The post Social Media Marketing Along with AI Technology appeared first on noupe.

Categories: Others Tags:

Are Modals In Web Design A UX Disaster?

September 7th, 2022 No comments

Modals, a nifty little feature that allows you to display different messages at the top of your website, have been touted as extremely useful. Some even claim that they are helpful enough to completely replace the banner ads we all hate so much. But are modals in web design a UX disaster?

If you are unfamiliar with the term, a modal is a dialogue window appearing when a visitor clicks on a hyperlink or hover image.

Suppose you want to collect on-site subscribers or you want visitors to sign up for a freebie. In that case, you can use modals.

However, many web designers – and some website visitors – are against using modals in web design. The main argument is that it affects the user experience. But are modals in web design a UX disaster? Read on to find out.

What Do Modals Do?

Modals often appear as pop-up windows on a web page, requesting a visitor to take action. Most times, they appear following a click on a page element.

Also known as lightboxes, modals isolate the page’s main content. The user will have to complete the action requested by the modal or close it before reassessing the page.

Web designers use modals to capture a visitor’s attention. Since other page contents are inaccessible, a visitor must interact with the modal.

Cons Of Modals In UX

While there are different cons of modals in UX, they all sum up to one con – interruption. When modals appear, they interrupt whatever the user is doing.

Unlike regular pop-ups, users cannot simply ignore the modal and continue browsing. As a result, modals demand immediate attention. 

A user may be interested and decide to interact with the modal. However, if the modal’s content differs from the page’s, the user could forget what they were doing after interacting with the modal.

Furthermore, sometimes modals require action related to information on the page. For example, suppose the user wants to review the information before taking action. In that case, they’ll have to close the modal since the main page is inaccessible.

Statistics show that up to 82% of users dislike pop-ups. Most website visitors aren’t knowledgeable about the technicalities of web design. As a result, they won’t be able to differentiate between regular pop-ups and modals.

After all, modals are a type of pop-up. Some users may consider modals worse since they darken the page’s primary content, making it inaccessible.

Furthermore, people want to visit a website and get what they want immediately. Hence, time is significant. Therefore, modals that require actions that take time can make a website lose visitors.

With all of these cons, you can understand why many web designers say modals are a UX disaster in web design.

Can Modals Be Useful in UX?

In some situations, modals are helpful, and they can improve UX. Many web designers swear on the usefulness of modals, and it’s not difficult to understand why.

Firstly, modals can help simplify a website’s content. For example, a user can immediately exit the page if your website is relatively complex, with lots of content and elements.

You can use a modal to explain the content on the page so that the user doesn’t get confused. Perhaps the modal can display when the user clicks on the back button. The modal can highlight the most critical content on the page and tell the user what to do next.

Secondly, modals are invaluable if you must capture your user’s attention. For example, perhaps you want to display a warning or pass any crucial information that users must know before they continue browsing.

As mentioned before, a user can easily ignore a pop-up, especially if it opens in a new window. However, with modals, the user must at least view the content before they proceed.

Thirdly, a modal can make a web page easier to navigate. It sounds ironic considering the cons, but it’s true if properly implemented. Rather than packing different elements on a web page, you can set some to display as modals.

For example, you can have a page with just text to improve readability. Then, users can click to view visual elements like images and videos as modals.

How To Use Modals the Right Way

Using modals correctly is key to ensuring they don’t negatively affect UX. Here are some ideal situations when you can use modals:

1. Display Warnings

Using modals to give users crucial warnings is ideal, especially if their subsequent actions have serious consequences.

For example, most websites display modals when users click the delete button. Deletion is always critical because, in most cases, it’s irreversible.

A practical example would be an eCommerce website where a user opts to delete items from their cart. You can use a modal to ask the user to confirm before deleting.

2. Input or Collect Information

Modals are effective in prompting users to input information. Sometimes, users must enter specific details before they continue browsing.

A practical example would be a review site where a user wants to submit a review. Before submitting the review, you can use a modal to request the user’s name and other necessary information.

3. Simplify Navigation

As mentioned before, modals can simplify a complex website. In addition, it will help a user navigate better, which is a UX boost.

A practical example would be a news site with many stories and updates. You can use a modal to highlight the day’s trending news stories so that users can visit the web pages with one click.

Conclusion: Are Modals a Disaster in UX?

In conclusion, modals affect a site’s user experience since visitors must interact with them. However, it doesn’t always have to be a negative effect.

Modals become a UX disaster in web design when wrongly used. However, if you follow good practices, modals can improve your website’s user experience.

Generally, only use modals when necessary and in a way that won’t frustrate the users.

 

Featured image by Freepik.

Source

The post Are Modals In Web Design A UX Disaster? first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Overlapping Bar Charts

September 7th, 2022 No comments
A two-by-two grid of overlapping chart examples.

As the name suggests, overlapping charts visualize two different sets of data in a single diagram. The idea is that the overlapping bars allow us to compare data, say, year-over-year. They are also useful for things like tracking progress for a goal where one bar represents the goal and the other shows the current amount.

But they’re beautiful too!

Your mind is probably like mine and is already starting to figure out how you’d go off and code that. Here’s how I tackled it.

CodePen Embed Fallback

The HTML

We’re going to start with markup because, well, that’s how we know what needs styling.

<div class="container">
  <div class="chart">
    <dl class="numbers">
      <dd><span>100%</span></dd>
      <!-- all the way to 0% -->
    </dl>
    <dl class="bars">
      <div>
          <dt>2018</dt>
          <dd>
            <div class="bar" data-percentage="50"></div>
            <div class="bar overlap" data-percentage="53"></div>
          </dd>
        </div>
      <div>
      <!-- more bars -->
    </dl>
  </div>
</div>

We will be using description lists (

) as it is a much more semantic approach as compared to standard ordered and unordered lists. Another reason is that we are including a label within each bar. Normal lists do not have a tag within them to add a title or description unlike definition lists. In simple terms, it just makes more sense and is more readable too.

The first description list, .numbers, is the y-axis. The .bars is where the data is visualized and I’ve made a definition list to build the x-axis as well. Each list item contains a .bar and the label as a description term (dt).

And what’s up with the data attribute? The data-percentage is being used to specify the height of the bar, which ultimately represents its value on the y-axis. We could manually set it in CSS for each bar, but that is repetitive and a lot of extra code that can be replaced with a few lines of CSS.

The basic chart styles

We’re working with a lot of two-dimensional directions, so flexbox is going to be our friend for getting everything lined up. We can make the .chart element a flexible container that positions the y-axis labels and the chart beside one another in the row direction.

.chart {
  display: flex;
}

We don’t even need to specify the direction since flexbox defaults to row. Let’s do that and then add flexbox to the list of labels along the y-axis while we’re at it since we know those will run in the column direction.

.numbers {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 15px 0 0;
  padding: 0;
}
CodePen Embed Fallback

Believe it or not, we can use flexbox again for the bars since, they too, are running in a row direction.

.bars {
  display: flex;
  flex: auto; /* fill up the rest of the `.chart` space */
  gap: 60px;
}

I’ve set this up so that the .bars automatically take up whatever space is leftover by the y-axis .numbers.

You probably noticed it in the HTML, but “bar” is actually two bars where one overlaps the other. I wrapped those in a generic

that we can use as yet another flexible container that holds the definition term (

) we’re using as a label and the description details (

) that holds both bar values:

.bars > div {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

Each bar is going to be the same width, hence flex: 1. We’re relatively positioning the element while we’re at it because we’re about to absolutely position each bar and we want to make sure they stay in their containers.

CodePen Embed Fallback

Each bar has a percentage height that corresponds to the values along the vertical y-axis. You may also remember that we gave each bar a data-percentage attribute — we’re going to sprinkle in a little JavaScript that sets the height of each bar using those values.

var bars = document.querySelectorAll("dd .bar");
bars.forEach((bar) => {
  var height = bar.getAttribute("data-percentage");
  bar.style.height = height + "%";
});

That’s our basic chart!

CodePen Embed Fallback

We want to get this to where we can see the bars overlapping one another. That’s next!

Overlapping bars

The trick to get one bar to overlap another is funny because we’re often trying to prevent things from overlapping visually in CSS. But in this case, we actually want that to happen.

The bars are already overlapping; it’s just tough to tell. Notice in the HTML that the second .bar in each set has an additional .overlap class. Let’s use that to differentiate the bars. You’re totally free to choose your own styling for this. I’m adding a little padding to the .overlap bars so that they are wider than the other bars. Then I’m tweaking the stacking order using z-index so that the .overlap bars sit below the other bars.

CodePen Embed Fallback

Let’s add a legend

Legend. Such a great word, isn’t it? Packed with all kinds of meaning. In this case, it’s a more than a nice touch because, visually, we’re jamming two bars in spaces that are typically reserved for one bar. A legend provides context that explains what each bar represents.

<figure class="legend">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

Using a

feels correct to me. They’re often used to wrap images, but the spec says they’re used “to annotate illustrations, diagrams, photos, code listings, etc.” and we’re working with a diagram. We could probably use an unordered list to hold the items, but I went with an unsemantic

. If anyone has an opinion on the best way to mark this up, I’m all ears in the comments!

Once again, styling is totally up to you:

CodePen Embed Fallback

Accessibility considerations

We’ve spent a bunch of our effort on making decisions for the markup and styling of our overlapping bar chart. It’s great so far, but we’re definitely not done because there’s more we can do to make this a more accessible experience. Not everyone is a sighted web surfer, so there’s some additional work to do to convey the content in those contexts.

Specifically, we need to:

  1. check that our colors have plenty of contrast between them,
  2. allow keyboard users to tab to each overlapping bar, and
  3. make sure screen readers announce the content.

Color contrasts

We need enough contrast between:

  • the overlapping bars
  • the bars and the chart background
  • the label text and background

I did a little homework in advance on the colors I used in the examples we’ve look at so far, making sure that there is enough contrast between the foregrounds and backgrounds to achieve WCAG AA compliance.

Here’s what I’m using:

  • Overlapping bars: (#25DEAA and #696969: 3.16:1 ratio)
  • Bars and chart background (#696969 and #111: 3.43:1 ratio)
  • Y-axis label text and background (#fff and #333: 12.63: 1 ratio)

Tabbing between bars

To get this where keyboard users can select each individual bar with the Tab key, we can reach for the HTML tabindex attribute. We can use the following JavaScript inside the for-each function to add this property to each bar (both of them). We will set the tab index to 0:

bar.setAttribute("tabindex", 0);

We can also add some CSS to improve the outline when the bar is selected while we’re at it:

.bar:focus {
  outline: 1.5px solid #f1f1f1;
}

Announcing content on screen readers

Another important aspect of accessibility is making sure screen readers can announce the bars and their percentages.

We’re working with two different charts in one: a chart that shows “Estimated” values and another that shows “Actual” values. It’d be great if the user knew which bar was being announced, so let’s label them with the aria-label attribute:

<div class="bar" data-percentage="50" aria-label="Estimate">50%</div>

Notice that we have the bar’s value directly in the HTML as well. That will get announced, but we still want to visually hide it. We could use transparent text for that, but another way is to use the classic .visually-hidden trick by wrapping the value in span:

<div class="bar" data-percentage="50" aria-label="Estimate">
  <span class="visually-hidden">50%</span>
</div>
.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

While we’re talking about announcing content, we can probably prevent the y-axis labels from being read. It’s not like the user is missing information, as the actual percentages for each bar are already available and announced. We can use the aria-hidden attribute for that:

<dl class="numbers" aria-hidden="true">
  <dd><span>100%</span></dd>
  <dd><span>80%</span></dd>
  <dd><span>60%</span></dd>
  <dd><span>40%</span></dd>
  <dd><span>20%</span></dd>
  <dd><span>0%</span></dd>
</dl>

I also think it’s OK for screen readers to ignore the legend since it’s a visual aid:

<figure class="legend" aria-hidden="true">
  <div class="type1">Estimate</div>
  <div class="type2">Actual</div>
</figure>

The final demo

CodePen Embed Fallback

That’s a wrap!

There we go, a chart with overlapping bars! It’s a nice way to compare data and I hope you can find a use for it on some project.

Are there other ways we could have approached this? Of course! Everything we covered here is merely walking you through my thought process. I imagine some of you would have taken a different approach — if that’s you, please share! It’d be great to see other CSS layout techniques and perspectives on nailing the accessibility.


Overlapping Bar Charts originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

How to create a Request a Quote Website for your Business?

September 7th, 2022 No comments

Not all eCommerce businesses are the same, and in order to avoid losing sales due to your pricing, it is crucial for you to provide a way for your buyers and website visitors to get in touch with you via the Request a Quote option. There are many instances where a set product price and an add-to-cart option are insufficient. Manufacturers, wholesale merchants, and high-ticket companies may have very flexible price practices and may need to allow the customer to request quotes. Instead of creating a typical e-commerce website with WordPress and WooCommerce, it can be used as a quote generation system; alternatively, both options can be used simultaneously if you are dealing with two separate types of customers (Retail and Wholesale).

Offering your customers the best rates will be made possible by established communications and quotation proposals. In this article, we’ll walk you through the steps of creating and launching a request for a quote website for your business. But before we get started, let’s take a quick look at how to set up an eCommerce store with WordPress and WooCommerce, what a request a quote button is, and the reasons why you might need one.

The Basics of Creating an eCommerce Website

WooCommerce is a plugin that may be installed on any WordPress-based website. Upon installation, it adds eCommerce functionality to your website. The prerequisites for creating an eCommerce website are getting a hosting service, installing WordPress, and then installing and activating the WooCommerce plugin, in that order. Let’s quickly go through each of these steps before we add the request a quote functionality to our store. 

You’ve come up with a fantastic plan for an eCommerce store and selected the perfect domain name but first, you have to rent a space for your store i.e choose a hosting partner. It’s like renting a portion of commercial internet real estate where you can later invite and host your customers. There are many hosting providers such as Bluehost, and GoDaddy that have plans with pre-installed WordPress, WooCommerce, themes, and security certificates. The best hosting company depends on your specific requirements but we would recommend one that is scalable, secure and provides data backup to ensure the growth and security of your business.

Suggested video: 8 Best Managed WordPress Hosting

You now have a blank canvas to begin developing your website. The next step is to install WordPress which is the foundation of your eCommerce business. One-click WordPress installation is frequently offered by hosting providers, so be sure to check for it. If not, you can download WordPress.org and install it manually. Even though this process is a bit tedious, you will find many helpful articles and videos to guide you through the detailed steps.

Now that your website is live, it’s time to add e-commerce capabilities by installing the WooCommerce plugin. The best part is that WooCommerce is completely free to get started. You can either get a pre-installed solution from your hosting provider or download the Woocommerce plugin from your WordPress dashboard by navigating to Plugins > Add New > Search plugins. A Setup Wizard will appear once you install and activate the plugin which will guide you through all of the steps to make your eCommerce store functional. You can watch this video for a detailed guide to setting up your WooCommerce store.

What Does “Request a Quote” Mean?

Now that we have an eCommerce store up and running, let’s cut to the chase. We as consumers are usually drawn to the word “Discount.” So much so that we can wait all year for a good deal. The request a quote functionality enables you to stay open with your prices rather than offering a fixed product price. Its main objective is for customers to find out more about the pricing for specific product quantities, which leads to bargaining for a great price that deems fit for both the business and the customer.

The ability to create a custom pricing proposal based on the requirements and purchase quantities of the customer is a useful feature for wholesale businesses and when you are selling customized products or services. Additionally, retail eCommerce companies can make use of this functionality by allowing customers to request quotes and avail quantity or purchase value-based discounts.

Advantages of using a Request a Quote Plugin

Online shopping involves no bargaining or price negotiations when compared to buying from a real brick-and-mortar store. You can turn this around by using a Request a Quote plugin. As a result, your customers are free to look into their options for negotiating a decent offer when purchasing from you which over time increases sales and customer satisfaction. There are quite a few advantages of using a Request a Quote plugin on your WooCommerce store:

  • If a website sells highly customized products or services, for instance, it could be challenging to price out all possible combinations. It may be similarly challenging to determine which choices can be combined by the customer. Great examples of this would be the website of a lawyer, wedding planner, graphic designer, etc.; there can be numerous variables and customizations to take into consideration before sending a quote.
  • A request a quote feature can be quite beneficial for B2B or wholesale eCommerce websites because pricing can depend on order numbers and other factors. You don’t want to drive away customers with a fixed price that cannot be negotiated by any means.
  • It might be simpler to sell high-ticket products by offering some form of consultation based on requirements and negotiations. Customers frequently want to know more details and ask questions about the product before making a big purchase.
  • Spending time and effort on back-and-forth messages and calls is probably the last thing your customers want to do. This difficulty is removed for both you and your customers when you have an easy-to-use online quote functionality. Additionally, this way the interactions between your company and its customers don’t seem like a persuasive sales pitch but rather like a professional negotiation.
  • A request a quote functionality also reduces cart abandonment and pricing leakage. Customers won’t immediately remove products from their shopping carts if the price is too high after they see that they may either buy the product straightaway or negotiate a better deal. Instead, they will wait until they see that your store offers both options, giving them more opportunities to negotiate a fair price. This also helps you to maintain a competitive edge without disclosing your prices.
  • You can retain access to the customers’ information for use in their marketing efforts even if you were unable to close transactions after negotiating the price. This makes it possible for you to retarget them hereafter.

How to Add a Request a Quote Functionality to your WooCommerce Store?

We will demonstrate adding a request a quote functionality using the ELEX WooCommerce Request a Quote plugin. With this plugin, you will be able to begin selling wholesale products to retail enterprises by allowing them to place orders as ‘quotes’ rather than adding products to the cart straightaway. Both the shop and individual product pages allow for the addition or deletion of any customized buttons, including the Add to Cart and Add to Quote buttons. This plugin allows you to apply the request a quote functionality globally, list specific products, and make them accessible for purchase as quotations, as well as exclude specific products. It converts your eCommerce website into a single interface where buyers and businesses may get quotes and/or add items to their carts, ensuring that you do not miss out on any sales opportunities. 

You can access the plugin’s settings by going to Dashboard > Plugins > Installed Plugins > ELEX WooCommerce Request a Quote Plugin> Settings after it has been installed and activated.

Under general settings, you can configure and customize the add to cart button and the API settings. This enables you to edit button colors, title, location, layout, action, etc.

Next, under the include/exclude products tab, you can include or exclude the request a quote functionality to specific products based on product name, categories, and tags. Here you can also specify if you want to include or exclude the functionality for specific user roles, disable the request a quote option for unregistered or guest users, and enable or disable the functionality based on your store’s stock quantities.

In the form settings tab, you can set a custom URL to which the customer will be redirected upon clicking the submit button, set a custom submit button success message, and customize your request a quote form by adding custom fields.

Next under the notifications tab, you can configure and trigger custom email notifications to the store admin and the customer based on the order status. You can also get up SMS notifications and google chat alerts to keep store agents informed at all times and not miss out on a single sale. 

Under template settings, you can customize the emails, notifications, and alerts that will be automatically triggered based on order statuses. The subject of the email, email body, chat, and SMS body, can all be customized based on your store’s needs.

If you wish to hide the ‘add to cart’ option for the shop page or individual product pages, you can do so under the Hide Add to Cart tab. You can configure this to only display the “Add to Cart” button for specific products depending on their category, name, and tags if you wish to deactivate the “Add to Cart” option for all of the products in your shop. If you want to add particular user roles for the accessibility of ‘Add to Cart’, select the user roles accordingly in this section.

Lastly, the plugin also gives you the option to add a mini cart to your eCommerce store. When you enable this option under the minicart icon tab, a quote cart icon will appear on the right side of the page, and when it is hovered over, the updated list of quotes that have been added to the cart will be displayed.

You can go through the product documentation for a detailed step-by-step guide on how to configure and set up the ELEX WooCommerce Request a Quote Plugin.

To Conclude

And with that, this article comes to an end. We hope it has given you a better understanding of how to create a Request a Quote website and the numerous benefits of doing so. If you have any questions regarding the functionality, please let us know in the comments section below.

The post How to create a Request a Quote Website for your Business? appeared first on noupe.

Categories: Others Tags:

The Realities And Myths Of Contrast And Color

September 6th, 2022 No comments

A long, long time ago, in a land far, far away…

By “long ago,” I mean circa 1924, and by “far away,” I mean London, UK., scientists W. D. Wright and J. Guild conducted color-matching experiments measuring the boundaries of human color vision. Their work was combined by the International Commission on Illumination (the CIE) into the 1931 CIE “standard observer “, a sort of “mathematical eyeball” that models how we see color. And with that, modern colorimetry was born.

Colorimetry is the basic science that made color television possible, and of course, our modern displays and smartphones — all our modern electronic color technology traces back to the 1931 CIE color space.

This colorful, kidney-shaped graphic represents the limits of human color vision — the smaller triangle inside marks the colors that can be displayed on a standard sRGB monitor, and the larger triangle represents P3 displays.

Each corner of the triangle is one of the three “primaries” of light: red, green, and blue. The area inside the triangle represents how those three colors appear when added together in various combinations, hence the term “additive color model.”

The use of the term “primary” is a bit of a misnomer, though, as there is no set of three real colors in the real world that can be mixed to create all the other colors. Only a subset of colors, as defined by these triangles.

In The Eye Of The Beholder Or The Mind?

A Simple Overview Of Human Vision

Light is focused by the eye’s lens onto the light-sensitive cells in the back of the eye, known as the retina. The cells we are most interested in are called cones, which are responsible for our daylight and color vision. A different kind of cells, called rods, gives us night vision, but rods are not particularly helpful for tasks like reading, and rods essentially shut down in daylight conditions.

Standard or “normal” vision uses three cone types. They are sometimes but inaccurately called “red,” “green,” and “blue” cones, but there is much more to this story.

Color Is Not Real

Is color not real? That’s a provocative statement for an article on color and contrast. But the reality is that “color” and “contrast” are not strictly real in an absolute sense. “Colored” light is simply light of different wavelengths or frequencies, like different notes on a piano. In fact, the scientific names for the cone cells in our eye are L, M, and S cones which stand for the long, medium, and short wavelengths of light they are most sensitive to.

The L cone actually has a peak sensitivity near yellow/green. But the fact its response curve extends into deep reds gives a differential from the M cone that allows humans to perceive “red” as a unique hue. As you can see from the graphic, the responses of the cones all overlap very substantially.

One reason the L cone is thought of as “the red cone” is that the primary red light from a display or television is intended to stimulate the L cone as much as practical while not stimulating the M cone. So the color used in a display is not at the peak response of the L cone but at a much longer wavelength to reduce “crosstalk” to the M cone.

Nevertheless, this is not where the sensation of color really takes place — that rabbit hole is just a bit deeper.

The first stage of the visual cortex, located at the back of the brain, looks at the lightness/darkness contrasts first, finding edges and fine details. Later stages separately process the color information, meaning hue and chroma (chroma is the “colorfulness” and related to “saturation”). Over 20% of our brain is dedicated to visual processing, and in total, 62% of our brain involves vision, often shared with other senses such as touch or hearing.

Some of the visual information may be “steered” to the Visual Word Form Area (VWFA), where letter pairs and whole words are recognized and sent to the language center. Other information may be sent to areas of the brain specializing in motion detection or object recognition. The information “steered” to the VWFA is essentially luminance only, that is, devoid of color, while the object recognition area relies more on color for discrimination.

The Imaginary Reality Of Perception

What might not be apparent from the above discussion of the mechanics of our vision is that colors are just perceptions, and as perceptions, they are affected very much by context. In other words, the nature of the surrounding visual material has a substantial effect on the colors and contrasts that we perceive and how we perceive them.

In this graphic, both yellow dots emit the same exact “colors” from your monitor, yet they look decidedly different. And while such images are often referred to as optical illusions, ones such as this are really neurological illusions — they are literally a figment of your brain, no matter how much we want to believe it as reality.

Monitors present us with nothing but illusions. On your computer’s display, the “yellow” you perceive is only separate red and green, with the red and green in amounts that create the perception of yellow. The red and green do not mix in the air like paint — the red and green “mixes” in the neurology of the vision system.

Throwing You A Curve (Eye) Ball

And to add to this, our perception is what you’d call non-linear, while light in the real world is “linear,” by which I mean if you have 100 photons of light and triple that, you then have 300 photons of light. But our vision does not see that change as a “tripling” — we see it as only a modest increase. This is particularly important for understanding the perception of contrast.

To help, when we talk about light or luminance, we are talking about linear, additive quantities. But when we talk about lightness/darkness/brightness, we talk about a qualitative and context-dependent perception. Stevens et alia found that we can use power-curves to model our perception in a useful way.

Do You See What I See?

The answer is maybe, but also, maybe not. First of all, your own visual perception changes with age. It takes the first 20 years of life to develop a peak contrast sensitivity. And as you age, your aging eye loses sensitivity, particularly in blue, as the eye’s optics become more yellow.

Contrast, Focus, And Other Vision Problems

Visual acuity (VA) relates to how well our eyes can focus on the things we see, which is obviously rather important for reading. The small, thin nature of letters makes reading the most demanding visual task for most people. We measure acuity using an eye chart, where normal vision is defined as 20/20 (America) or 6/6 (EU).

20/20 means “the size that someone with standard vision can see standing 20 feet away” and 6/6 is the same but refers to 6 meters instead of 20 feet.

In both cases, it means the size of the capital E of the 20/20 (or 6/6) line of the eye chart as projected into the retina of the eye. Vision science measures the size of the “retinal image” of the 20/20 E as five arc minutes of visual angle.

20/20 (or 6/6) is not perfect vision — but it is called “standard” vision. Human “perfect vision” is closer to 20/12 to 20/16, and 20/09 is the world record here. By comparison, an eagle’s vision is about 20/04.

Contrast sensitivity (CS) is another very important measure of the health and well-being of our visual system and one aspect that is most often misunderstood. In fact, our understanding of our contrast sensitivity has really only developed in the last few decades of vision research, and there is still active research relating to our contrast perception.

Color Vision Deficiency (CVD) About 5% of the world’s population is insensitive to some colors, a condition inaccurately referred to as “color blind.” In the most common cases, one of the cone types is either not working as it should or is missing altogether. The deutan type has a problem with or is missing the M/Green cone, and the protan type is missing or has an issue with the L/red cone. There are also some very rare types, such as tritan, having problems with the S/Blue cone, and even non-color (achromatic) forms of vision, missing two or all three cones.

The non-color types are extremely rare and the only types that could be described as actually “color blind “. They usually face other vision issues, including low visual acuity (poor focus) and severe photophobia, where light brighter than twilight over-powers the rod cells, which in standard eyesight are only used for night vision. These actually color-blind users typically wear dark glasses even indoors and use assistive technologies for reading.

Understanding vision at this basic level helps understand important design choices for color and contrast. The author hosts a color vision simulator that simulates some of these types of color-insensitive vision for further demonstration.

Shedding Light On Contrast

There are many forms of contrast, such as contrasts of size, shape, or position, contrasts of content, theme, or emotion. But for the bulk of this article, we will focus on “perceived lightness contrast”. This is closely related to luminance contrast, as luminance is a measure of light, which we perceive as lightness/darkness/brightness. In other words, luminance is a physical quantity in the real world, but lightness is our human perception of it, and our perception is shaded by context.

Like lightness and color, contrast is also a human perception, so sometimes it is more correct to consider it a “lightness contrast.” Importantly, we consider contrasts of color meaning hue and saturation, separately from lightness.

Lightness/darkness and hue/colorfulness serve different purposes in our design work. Moreover, luminance and color are processed separately in our brains and are used differently for our cognitive understanding of how we perceive the world around us.

Reading and readability are primarily concerned with lightness/darkness differences — the fine details of fonts need ample luminance contrasts to be “decoded” by the Visual Word Form Area (VWFA) of the brain as whole-words or letter-pairs. On the other hand, contrasts of color are important for things like object recognition and categorizing.

Spatial Cases

One aspect of contrast perception that might not be intuitive is that contrast is driven more by “spatial frequency” than by the difference or ratio between two colors. For the designer, spatial frequency relates to font weight and font size or line thickness. A higher spatial frequency means smaller, thinner fonts or lines that are closer together. A lower spatial frequency relates to larger elements with greater distances between them.

This graph shows the human contrast sensitivity curve. As the curve moves to the right, we are defining smaller and thinner items. Each of the sample fonts shown around the curve uses the exact same color of gray. But as you can see, the perceived contrast and readability of the big, bold headline is much higher than that of the small samples of body text.

To complicate matters, consider the effects of antialiasing or font-smoothing techniques. When a font is rasterized to the screen, small amounts of blur are added to reduce a jagged appearance. Here are magnified screenshots of text rasterized to a standard sRGB display. Notice how normal weight fonts about 18px and smaller just become subsumed by the background due to typical antialiasing effects.

This also presents issues with how you, the designer, preview a graphic or web page. Retina screens at twice or three times standard resolution can present sharper text with less blending. Some systems or devices are set up with a form of antialiasing called sub-pixel, which can be sharper, but if a design uses -webkit-font-smoothing:antialiased; that overrides the display’s default antialiasing, replacing it with a soft blending that further damages contrast and sharpness. Apple introduced -webkit-font-smoothing to go along with retina displays, but it wreaks havoc on standard resolution displays with small fonts. Any use of -webkit-font-smoothing should be behind a resolution media query and implemented carefully.

To compensate for these factors, small, thin body text needs a much greater lightness/darkness difference. Also, relating to columns of body text, the density of the text results in further contrast reduction. A near-maximum contrast is good for most body text. Other instances of thin fonts have problems with font smoothing as well. For instance, some weight 100 fonts are so thin they need to be larger than 42px or even larger before font-smoothing techniques can be safely employed.

This also means that your designs need to be tested and viewed on standard resolution monitors. Design decisions made on a beautiful P3 retina display may have unexpected design problems, including poor readability, when viewed on a standard resolution sRGB device.

Predicting Contrast

For design guidance, we need a way to predict contrast. For some years, the WCAG 2 contrast method was used. Unfortunately, WCAG 2 contrast maths do not predict the contrast of text in accordance with human perception, which is especially noticeable with dark color pairs. The result is that WCAG 2 contrast is less than useful for dark mode, not to mention light text on saturated colors and a few other anomalies.

The author’s new method is the candidate contrast method for the future WCAG 3 guidelines. This new method directly considers perceptual lightness/darkness differences of text against a background, and generates a “lightness contrast” value, noted as Lc. From here, we can determine the minimum size and weight of a font that is going to be fluently readable, and together these calculated predictions can guide our design choices.

Readability Contrast

This leads us to the idea of “readability contrast” — the contrast needed for a particular use-case and the level of readability needed. The seminal readability research of S.Whittaker, J.Lovie-Kitchin brought us the ideas of “critical contrast” and “critical size.”

By critical, we mean the point where increasing the size, or contrast, will not improve reading speed and comprehension any further. Their research also introduced the concept of “contrast reserve” and defined the contrast needs for sub-fluent levels, where text is still readable but not at the highest speed or comprehension. This last part is important because, in a design hierarchy, not everything can be at maximum contrast.

For example, a column of body text requires the highest contrast to ensure the best fluent readability. But at the other end of the spectrum, non-content text, such as a copyright bug on the side of an image, does not need to be anywhere near that same high level of contrast. In fact, to keep the design uncluttered, and keep the focus on the actual content, something like a copyright bug should arguably be much lower in contrast — high enough to read if focused on, but low enough that it is not distracting or taking attention away from the primary subject.

Side Note: It’s not the size… it’s the x-size

The CSS property font-size: is easy to use… and inaccurate. Setting the font size by specifying the font’s body height can have significantly different results depending on the font family. Therefore it is important to determine the x-height of the fonts used in the design and then set the font size with an offset as needed to achieve the desired rendered size.

Conflicts Of Contrast

The spectrum of the human experience is wide and diverse. With this diversity is the reality that what is best for one person, may create problems for another. This is especially true for visual accessibility. The ideal text size for one user may be too big or too small for another. What one user prefers for color coding of information may make that same information oblique to another.

Our visual perception and cognition can be impaired in ways that are not even apparent to the individual with the impairment. Our brain adapts or tries to, to our current situation. For instance, the visual cortex has a “sharpening filter” to improve perceived acuity, so a user with an acuity problem that is accustomed to sight without correction may not realize that they could benefit from glasses.

And the potential visual impairments don’t stop at the lens of the eye and basic focus, which is what defines acuity. Visual impairments extend past the retina and optic nerve to our brain’s neurology and cognitive processes. And the individual user needs are as varied as the many ways we can be impaired.

What this points to is the importance of user options for visual preferences, and this is an area of emerging technologies. The content creator is responsible for providing a baseline of accessible design and ensuring that users are not prevented from making adjustments they need, such as by zooming in text size, changing to the dark mode, or a special color palette. This is, in a very real way, a functional part of responsive design.

Flexible Foundations

A clear visual hierarchy is an important accessibility feature as well, particularly for cognitive and neurological reasons, such as dyslexia and ADHD. Good design guides our vision through the content, using multiple types of contrast: not just luminance contrast, but contrasts of size, weight, color, position, and distance, with this variety of contrasts creating a semantic flow through the content.

The structure of an HTML document has built-in tags supporting semantic markup, and the CSS styling for these tags should follow their semantic structural meaning. Semantic markup is important for all users sighted and without vision. Screen reader systems for the blind rely on the semantic markup for navigating through content. Sighted users need a visual semantic hierarchy to arrange the content and visual flow in a logical way that aids comprehension and reduces fatigue.

For all sighted users, there are some essential minimums for visual contrast, based on the expected use-case of the element and allowing for user-adjusted variations. Use-case also informs the essential minimums for visual size, which also needs to consider expected screen resolution and the font’s glyph design, as these can be substantially affected by antialiasing at smaller sizes.

A Bridge To The Future

WCAG 2 contrast guidelines suggest a 4.5:1 ratio for fonts smaller than 24px at 400 weight (normal), or 18.8px at 700 weight (bold), and 3:1 for other contrasts. While this guideline is simple to implement, these minimums can be very insufficient in some cases, yet paradoxically, more than needed in some other cases. These guidelines trace their origins to standards of the 1980s and are set to be replaced in the near future.

One future standard in development is WCAG 3, and the candidate method for contrast is APCA (Accessible Perceptual Contrast Algorithm), currently being evaluated as a public beta. In full disclosure, this author created APCA as research lead of the Visual Contrast subgroup of the W3C Accessibility Guidelines Working Group’s Silver (WCAG 3) task force, developing WCAG 3 as the next generation of web content standards.

APCA follows the human visual perception of contrast of text and non-text elements and is derived from decades of peer-reviewed vision science, tuned specifically for the readability of text on self-illuminated displays. The associated readability guidelines covering text size and luminance contrast are based on the seminal peer-reviewed research of Whittaker, Bailey, Lovie-Kitchin, G. Legge, and others.

APCA-related guidelines differ from the older WCAG 2 in that APCA considers human visual perception, use-case, and spatial features (weight and size) and provides a comprehensive set of useful design guidance. The actual conformance specifications for WCAG 3 are in development, so rather than rattle off specifications that may be subject to change, see “Why APCA” for further reading.

A question often asked is if APCA can be used now, and the answer is “it depends.” APCA is usable as a public beta, and beta users are highly encouraged to submit issues and discussions at the APCA GitHub repo. That said, one needs to determine if they have any contractual or other legal requirements to follow the older WCAG 2, regardless of WCAG 2’s deficiencies, such as for some governmental websites.

In the interim, there is a method that is fully backward compatible with WCAG 2, known as “Bridge-PCA”, intended as a way to provide better readability and calculate for dark mode but still follow the older WCAG 2 success criterion. While Bridge PCA fixes some problems, what is lost is the greater design flexibility offered by the full APCA implementation.

Practical Guidelines

During this transitional period, where we know that existing guidelines are expected to be revised or replaced, it’s helpful to see the road ahead. Here are some things designers can do now to improve readability, compliance, and actual accessibility while being better situated for future guidelines.

Size, Weight And Antialiasing

To emphasize, I’ll reiterate that weight and size are most important to readability contrast long before we get into the difference or ratios of lightnesses and colors. In this example graphic, the colors used for all the outlines are the same for each, with a 3:1 contrast ratio. First a thin 1px outline, next a 2px outline, then as you see in the 3px outline, the stroke is encroaching on the letters, so in the final example, with a 4px outline, we set the stroke to the outside only, which also increases the inner font-weight.

In each case, the same exact colors are used, but the spatial frequency of each row goes lower as it gets thicker and therefore becomes more contrasty and easier to read than the one above.

Let’s try that again, but this time, we’ll use colors with a much higher contrast of 7:1.

Notice that these rows are only a little more contrasty than the ones at 3:1, despite using 7:1 colors. The biggest changes, in contrast, are still the spatial changes of making the outline stroke thicker.

The reality is we need to spend more time thinking about improving the weight and size and remembering that not everyone has access to ultra-high-resolution retina-type displays. The antialiasing on lower resolution displays effectively lowers color contrast and can make thin fonts appear even thinner.

Side Note: Weighty decisions

Be aware that the CSS weight value (i.e. 300, 400, 700) is not consistent between different font families. For instance, “Arial Black” is indicated as normal (400 weight) even though it is clearly extra-bold. And Courier New indicates 400 weight even though it is clearly ultra light.

Also, in-between weights such as 500 or 600 will only render at that weight if that weight has been specifically imported (or is a supported variable weight font). And fallbacks to default fonts will usually not support anything other than 400 (normal) and 700 (bold). In this case, 500 will render as 400, and 600 will render as 700.

Because font weight is a primary factor in perceived contrast, the implications of unexpected weight changes from missing fonts, fallbacks, and the fact that there is no “standard” when it comes to how weight is defined, are important considerations when planning your page design.

Improved Contrast Values

The following recommendations are based on the use-case of the text; the text’s importance to the understandability of the content informs us of the needed readability contrast. In order of importance:

  1. Body Text: Columns or blocks of readable body text. (See Side Note: Body Double)
  2. Other Fluent Text: Headings, menu items, main navigation, tooltips, and photo captions which are required for understanding.
  3. Sub-Fluent Text: Colorized code blocks, DataViz callouts, informative placeholders, sub-text, photo captions that are duplicative of content text or not required for understanding.
  4. Non-Text: Icons, pictograms, buttons, controls.

  • WCAG 2 values shown are intended for light-mode only, meaning the background is never darker than the equivalent of approximately #aaa.
  • Also, the WCAG 2 values listed here are higher than those listed in the official WCAG 2 guidelines to help compensate for certain deficiencies in the older math/methods.
  • APCA and WCAG 3 are still in development and not yet official recommendations of the W3C.
  • The APCA maximum recommended contrast for fonts larger than 24px is Lc 90. More is not always better.

Side Note: Body Double

Columns of body text have significant extra needs compared to other textural elements. Letter and word spacing (kerning, tracking), paragraph spacing, and especially line spacing (leading), which is line height: in CSS, become much more important in blocks of body text.

As a practical definition, we define body text as a block or column of text that is more than 2½ lines, where the font is less than 32px (or less than an x-height of 16px), and the line height is less than four times the x-height.

Side Note: All My ex Live en TeX

When we are considering line-height, which is the CSS equivalent of leading, we are usually concerned with the distance between lines of mostly lower case letters. Therefore, we’d prefer to set line height relative to x-height.

And while we currently can’t set font-size using the font’s x-height, we can use the font’s x-height to set certain layout parameters, by using the CSS ex length. 1ex equals the vertical size of a font’s lowercase x. (Or at least it should; some fonts may not properly report the x-height.) We can put the ex unit to good use in line-height. A baseline to baseline distance of three times the x-height is a good place to start.

p{line-height: 3ex;}

Some font’s may need more than this. For paragraph spacing, we’d like to see an additional 1.5ex of padding, or more.

General Body Text Guidelines

  • Font: Verdana is a good example of a readable body font. It has a large x-height ratio and clearly defined glyphs.
  • Minimum font size: For Latin and similar alphabets, it’s best to think in terms of a minimum x-height. For best fluent readability of body text, a minimum x-height is about 9.4px, which accommodates standard 20/20 vision.
    • For a font like Helvetica, this is a font size of 18px, but for Times, it’s 21px.
    • Impaired vision is better accommodated with a 24px to 32px font size.
    • For point sizes, divide the px size by 1.33.
    • For non-Latin writing systems, related but different minimums may be needed.
  • Font weight: normal 400 weight is usually ideal for most well-designed fonts.
    • 300 weight is getting too thin, especially for fonts less than 24px.
    • 100 and 200 weights should not be used for body text.
  • Column width: blocks of text are most readable when lines are short enough for the eye to scan without head movement but long enough that the eye is not starting a new line too often.
    • This ends up as about 50 to 60 characters per full line on average.
    • 80 characters is the upper limit, and full lines shorter than 35 characters are typically too short.
  • Line spacing (leading): The CSS line-height: property sets the baseline to baseline distance between lines. Given a unitless value, it’s essentially the same as em, but we are more concerned about line spacing relative to the actual glyph size, so line height as a multiple of the x-height is preferable.
    • We can use the ex unit to do this. Three times the x-height is a good place to start, though some fonts may be better with a bit more or less than that value.
    • p{line-height: 3ex;}
  • Alignment: for the left to right reading languages, columns should be left-justified, aka left-aligned, but never center justified nor full justified.
    • For best readability, the start of all lines should be aligned to help the eye find the beginning of the next line. For columns of text, center justification interferes with this.
      • Center alignment can be okay for non-body text, such as some headings or menu items.
    • Full justification is not appropriate for web content.
      • Proper full justified columns need the skill of a typesetter, but unlike print, web content is dynamic and can be zoomed and reflowed.
      • And attempting to “fix” text in place interferes with accessibility.

Side Note: Too much of a good thing?

While it is possible to have too much contrast, particularly for large and bold elements, this does not suggest making dark text lighter. Excess contrast is nearly always due to excess brightness. When something is so contrasty that it seems to have “halos”, the first thing to try is to make the lightest element a little darker.

Side Note: Splitting hairs between dark and light

For the darkest color, depending on your monitor’s calibration, you probably won’t see any difference for colors darker than about #222 or rgb(34,34,34). In fact, you could say that #222 and darker is not functionally different than #000, except that for small thin fonts, #000 is helpful to help “cut through” antialiasing.

On the other hand, the difference between #fff, and #eee or #ddd can be significant in terms of reducing visual fatigue due to brightness.

Conclusion

The printing press with movable type has existed for over a thousand years in Asia. Nearly 600 years ago, Johannes Gutenberg introduced the movable-type printing press to the western world. Comparatively speaking, the internet has been with us for a fraction of that time, and the transition to electronic type still poses challenges for good readability.

I mention the long history of print because most of the “contrast guidelines” relate to printing dark text on white or light paper, and printing is something that is fixed in place. But today, on the internet, we have multiple options such as dark mode and the ability of users to choose variations of color schemes. Dark mode, in particular, has demonstrated that older metrics and WCAG_2 contrast included here are not up to the task of calculating contrasts over the visual range.

Thus the emerging importance of perceptually uniform contrast methods and guidelines. And while this article covered the basics, there is more to uncover and new design considerations to reveal, all for future articles.

Finally, thank the technical peer reviewers and editors of Smashing Magazine for their constructive help toward clarity of this challenging subject matter.

Thank you for reading.

Resources

Categories: Others Tags:

Hacking CSS Animation State and Playback Time

September 6th, 2022 No comments

CSS-only Wolfenstein is a little project that I made a few weeks ago. It was an experiment with CSS 3D transformations and animations.

Inspired by the FPS demo and another Wolfenstein CodePen, I decided to build my own version. It is loosely based on Episode 1 – Floor 9 of the original Wolfenstein 3D game.

CodePen Embed Fallback

Editor: This game intentionally requires some quick reaction to avoid a Game Over screen.

Here is a playthrough video:

In a nutshell, my project is nothing but a carefully scripted long CSS animation. Plus a few instances of the checkbox hack.

:checked ~ div { animation-name: spin; }

The environment consists of 3D grid faces and the animations are mostly plain 3D translations and rotations. Nothing really fancy.

However, two problems were particularly tricky to solve:

  • Play the “weapon firing” animation whenever the player clicks on an enemy.
  • When the fast-moving boss got the last hit, enter a dramatic slow motion.

At a technical-level, this meant:

  • Replay an animation when the next checkbox is checked.
  • Slow down an animation, when a checkbox is checked.

In fact, neither was properly solved in my project! I either ended up using workarounds or just gave up.

On the other hand, after some digging, eventually I found the key to both problems: altering the properties of running CSS animations. In this article, we will explore further on this topic:

  • Lots of interactive examples.
  • Dissections: how does each example work (or not work)?
  • Behind-the-scene: how do browsers handle animation states?

Let me “toss my bricks”.

Problem 1: Replaying Animation

The first example: “just another checkbox”

My first intuition was “just add another checkbox”, which does not work:

CodePen Embed Fallback

Each checkbox works individually, but not both together. If one checkbox is already checked, the other no longer works.

Here’s how it works (or “does not work”):

  1. The animation-name of
    is none by default.
  2. The user clicks on one checkbox, animation-name becomes spin, and the animation starts from the beginning.
  3. After a while, the user clicks on the other checkbox. A new CSS rule takes effect, but animation-name is still spin, which means no animation is added nor removed. The animation simply continues playing as if nothing happened.

The second example: “cloning the animation”

One working approach is to clone the animation:

#spin1:checked ~ div { animation-name: spin1; }
#spin2:checked ~ div { animation-name: spin2; }
CodePen Embed Fallback

Here’s how it works:

  1. animation-name is none initially.
  2. The user clicks on “Spin!”, animation-name becomes spin1. The animation spin1 is started from the beginning because it was just added.
  3. The user clicks on “Spin again!”, animation-name becomes spin2. The animation spin2 is started from the beginning because it was just added.

Note that in Step #3, spin1 is removed because of the order of the CSS rules. It won’t work if “Spin again!” is checked first.

The third example: “appending the same animation”

Another working approach is to “append the same animation”:

#spin1:checked ~ div { animation-name: spin; }
#spin2:checked ~ div { animation-name: spin, spin; }
CodePen Embed Fallback

This is similar to the previous example. You can actually understand the behavior this way:

#spin1:checked ~ div { animation-name: spin1; }
#spin2:checked ~ div { animation-name: spin2, spin1; }

Note that when “Spin again!” is checked, the old running animation becomes the second animation in the new list, which could be unintuitive. A direct consequence is: the trick won’t work if animation-fill-mode is forwards. Here’s a demo:

CodePen Embed Fallback

If you wonder why this is the case, here are some clues:

  • animation-fill-mode is none by default, which means “The animation has no effect at all if not playing”.
  • animation-fill-mode: forwards; means “After the animation finishes playing, it must stay at the last keyframe forever”.
  • spin1’s decision always override spin2’s because spin1 appears later in the list.
  • Suppose the user clicks on “Spin!”, waits for a full spin, then clicks on “Spin again!”. At this moment. spin1 is already finished, and spin2 just starts.

Discussion

Rule of thumb: you cannot “restart” an existing CSS animation. Instead, you want to add and play a new animation. This may be confirmed by the W3C spec:

Once an animation has started it continues until it ends or the animation-name is removed.

Now comparing the last two examples, I think in practice, “cloning animations” should often work better, especially when CSS preprocessor is available.

Problem 2: Slow Motion

One might think that slowing an animation is just a matter of setting a longer animation-duration:

div { animation-duration: 0.5s; }
#slowmo:checked ~ div { animation-duration: 1.5s; }

Indeed, this works:

CodePen Embed Fallback

… or does it?

With a few tweaks, it should be easier to see the issue.

CodePen Embed Fallback

Yes, the animation is slowed down. And no, it does not look good. The dog (almost) always “jumps” when you toggle the checkbox. Furthermore, the dog seems to jump to a random position rather than the initial one. How come?

It would be easier to understand it if we introduced two “shadow elements”:

CodePen Embed Fallback

Both shadow elements are running the same animations with different animation-duration. And they are not affected by the checkbox.

When you toggle the checkbox, the element just immediately switches between the states of two shadow elements.

Quoting the W3C spec:

Changes to the values of animation properties while the animation is running apply as if the animation had those values from when it began.

This follows the stateless design, which allows browsers to easily determine the animated value. The actual calculation is described here and here.

Another Attempt

One idea is to pause the current animation, then add a slower animation that takes over from there:

div {
  animation-name: spin1;
  animation-duration: 2s;
}

#slowmo:checked ~ div {
  animation-name: spin1, spin2;
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

So it works:

CodePen Embed Fallback

… or does it?

It does slow down when you click on “Slowmo!”. But if you wait for a full circle, you will see a “jump”. Actually, it always jumps to the position when “Slowmo!” is clicked on.

The reason is we don’t have a from keyframe defined – and we shouldn’t. When the user clicks on “Slowmo!”, spin1 is paused at some position, and spin2 starts at exactly the same position. We simply cannot predict that position beforehand … or can we?

A Working Solution

We can! By using a custom property, we can capture the angle in the first animation, then pass it to the second animation:

div {
  transform: rotate(var(--angle1));
  animation-name: spin1;
  animation-duration: 2s;
}

#slowmo:checked ~ div {
  transform: rotate(var(--angle2));
  animation-name: spin1, spin2;
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

@keyframes spin1 {
  to {
    --angle1: 360deg;
  }
}

@keyframes spin2 {
  from {
    --angle2: var(--angle1);
  }
  to {
    --angle2: calc(var(--angle1) + 360deg);
  }
}
CodePen Embed Fallback

Note: @property is used in this example, which is not supported by all browsers.

The “Perfect” Solution

There is a caveat to the previous solution: “exiting slowmo” does not work well.

Here is a better solution:

CodePen Embed Fallback

In this version, slow motion can be entered or exited seamlessly. No experimental feature is used either. So is it the perfect solution? Yes and no.

This solution works like “shifting” “gears”:

  • Gears: there are two
    s. One is the parent of the other. Both have the spin animation but with different animation-duration. The final state of the element is the accumulation of both animations.
  • Shifting: At the beginning, only one
    has its animation running. The other is paused. When the checkbox is toggled, both animations swap their states.

While I really like the result, there is one problem: it is a nice exploit of the spin animation, which does not work for other types of animations in general.

A Practical Solution (with JS)

For general animations, it is possible to achieve the slow motion function with a bit of JavaScript:

CodePen Embed Fallback

A quick explanation:

  • A custom property is used to track the animation progress.
  • The animation is “restarted” when the checkbox is toggled.
  • The JS code computes the correct animation-delay to ensure a seamless transition. I recommend this article if you are not familiar with negative values of animation-delay.

You can view this solution as a hybrid of “restarting animation” and the “gear-shifting” approach.

Here it is important to track the animation progress correctly. Workarounds are possible if @property is not available. As an example, this version uses z-index to track the progress:

CodePen Embed Fallback

Side-note: originally, I also tried to create a CSS-only version but did not succeed. While not 100% sure, I think it is because animation-delay is not animatable.

Here is a version with minimal JavaScript. Only “entering slowmo” works.

CodePen Embed Fallback

Please let me know if you manage to create a working CSS-only version!

Slow-mo Any Animation (with JS)

Lastly, I’d like to share a solution that works for (almost) any animation, even with multiple complicated @keyframes:

CodePen Embed Fallback

Basically, you need to add an animation progress tracker, then carefully compute animation-delay for the new animation. However, sometimes it could be tricky (but possible) to get the correct values.

For example:

  • animation-timing-function is not linear.
  • animation-direction is not normal.
  • multiple values in animation-name with different animation-duration’s and animation-delay’s.

This method is also described here for the Web Animations API.

Acknowledgments

I started down this path after encountering CSS-only projects. Some were delicate artwork, and some were complex contraptions. My favorites are those involving 3D objects, for example, this bouncing ball and this packing cube.

In the beginning, I had no clue how these were made. Later I read and learned a lot from this nice tutorial by Ana Tudor.

As it turned out, building and animating 3D objects with CSS is not much different from doing it with Blender, just with a bit different flavor.

Conclusion

In this article we examined the behavior of CSS animations when an animate-* property is altered. Especially we worked out solutions for “replaying an animation” and “animation slow-mo”.

I hope you find this article interesting. Please let me know your thoughts!


Hacking CSS Animation State and Playback Time originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Holiday Email Campaigns: How to Rise Above the Chaos in the Inbox

September 6th, 2022 No comments

The Holiday season is the most competitive time of the year. Every brand tries to get the maximum out of their email campaigns during these busy days. As the email volume increases, you have to invest extra time and effort to create impactful campaigns that convert. 

For better understanding, we have divided the topic into five distinct subheadings, namely content, design and development, deliverability, the X-factor, and things to avoid. 

Let’s discuss each one of them in further detail:

1. Content

As platforms like Instagram, TikTok, and YouTube are getting more popular, your subscribers expect video content and visually rich emails in their inboxes. The Holiday season is a good time to experiment with these rich media elements and see how they work for your business. 

It is a good idea to check the competitors and derive some inspiration from their strategy. Track the past purchases and browsing history of your subscribers to target them with relevant content. 

Add social proof in your marketing emails as well as automated emails. Highlight your best-sellers, top-rated products, product testimonials, and company-centric testimonials in your Holiday emails. It will build confidence and encourage the users to purchase from you, especially during the season of giving. 

Besides promoting your discount offers, let the customers know how your product makes lives easier for them. Inform them about free shipping, easy returns, and gift wrapping policy. 

2. Design and development

More than 50% of online sales take place through mobile devices. But, that does not imply that you overlook desktops. You must design your email campaigns in such a way that it renders well across all devices and email clients.    

Incorporate Holiday elements in your email campaigns. Use bright colors like red, blue, and white to match the festive vibes. Just make sure that you keep an eye on the file sizes. Avoid using images over 1 MB to maintain optimum loading time and engagement rate.  

If you have a large subscriber base accessing emails through Gmail and an ESP supporting AMP technology, send out interactive AMP emails that work as a mailable microsite. You can also send out GIFs to make your emails visually aesthetic. 

An important design aspect is accessibility. Use suitable color contrast so that the important elements stand out. When using visuals, keep away from too flashy animations or GIFs flashing between 2 to 55 Hz as it can aggravate photosensitive epilepsy. Also, create Dark Mode compatible emails as most of your subscribers are accessing emails in dark mode settings. 

3. Deliverability

Clean the subscriber list before sending out Holiday email campaigns to ensure a good deliverability rate during the peak season. Warm up your domain at least two months prior to the Holidays. If needed, consult a reliable deliverability partner who can guide you through the process. 

You can also consider investing in an exclusive subdomain for the Holiday season. As send volumes are expected to reach an astronomical figure during the Holidays, a new subdomain would keep you away from the radar of ESPs and ISPs. 

Change the segmentation criteria to warrant proper data hygiene. Refrain from increasing the sending frequency overnight and send emails to active subscribers only. Many brands employ blast email campaigns during the Holiday season. That can be detrimental to your email deliverability and the sender’s reputation. 

4. The X-factor

The holiday season is a good time to share your brand story and stand out from your competitors. Let your customers know how your products stand out from the pack. Target them with language and visuals that they can relate to. If needed, put the automated emails on hold or modify the trigger events. Your subscribers behave differently during the Holiday season. Recognize this aspect and adapt to your customer needs matching the Holiday season. 

5. Things to avoid

  • Don’t resend your Holiday emails to non-openers automatically. With Apple’s MPP, open rates might be tracked inaccurately and redundant communications are the last thing your subscribers want to receive. 
  • Don’t wait too long before planning the Holiday email strategy. Early fall is a good time to start conceptualizing your email campaigns. 
  • Don’t miss out on sharing important information like order processing and shipping deadlines in the Holiday emails. 
  • Don’t send text-heavy emails as people will be scanning through their emails instead of reading. 
  • Don’t carry on with automated emails that include a wall of text. Revamp your automation strategy to align with the Holiday mood. For example: Include special sign-up offers to welcome the subscribers during the Holiday season. The Holiday season is perfect to re-engage the users and inspire them to buy from you again. 

Conclusion

Email Uplers got in touch with 10 industry stalwarts to understand how to slay your Holiday email game. To get actionable tips from the experts, head to the insightful infographic.

The post Holiday Email Campaigns: How to Rise Above the Chaos in the Inbox appeared first on noupe.

Categories: Others Tags:

Smashing Podcast Episode 52 With Yiying Lu: How Do You Become An NFT Artist?

September 6th, 2022 No comments

In this episode of the Smashing Podcast, we ask how do you go from running a creative studio to designing NFTs. Vitaly talks to artist Yiying Lu to find out.

Show Notes

Weekly Update

Transcript

Vitaly Friedman: She’s an artist, entrepreneur and educator. She grew up in Shanghai, China and was educated in Sydney, Australia, and also London, UK. She’s currently based in San Francisco as the founder and creative director of her bilingual, creative and innovation studio. She’s incredibly kind friendly, optimistic, and enthusiastic, which is not very surprising given that her name translated from Chinese means happy, creative land, and you have to smile to pronounce it right.

Vitaly: Now, most recently she’s become an NFT artist and she leads a design clinic program to increase people’s mental health. So, we know she’s a fantastic artist and designer, but did you know that she loves dumplings so much that she even went all the way to design the dumpling emoji, which you probably will be able to find on your mobile phone today. My smashing friends, please welcome Yiying Lu. Hello, Yiying. How are you doing today?

Yiying: I am smashing, my friend.

Vitaly: Oh, wow. This sounds very exciting, indeed. Well, you’re smiling now. When I think of you, I always think of your smiling. And when I see you, I always feel like you’re the center of happiness and optimism of the entire universe. Now, where does it come from? Can you share with us a little bit of your story? What are some of the most important things in your life that define who you really are today?

Yiying: Thank you so much for the amazing question. I have to say, my name came really from my father and my grandfather, because my father initially named me Yanying, which means pretty and creative in Chinese. And then my grandfather, after the name has been registered already in the police office, he waited for a few months to come back to my dad. He goes, “Well, we know she’s a girl.” And the name actually, Yen, in Chinese is pretty and it has a female radical. And he said, “I want to change the female radical to the heart radical because we want to focus on the heart and the happiness. We already know she’s a female. We want to make sure that she is happy. We don’t want to only focus on external, which is pretty. We want to focus on the internal, which is the happiness.” So, I’m incredibly thankful for my grandfather who gave me happy and creative. And this is my life mission. I hope that I’ll carry on grandfather’s blessing and my father’s blessing and bring more happiness and creativity to everyone in the world.

Vitaly: I think that you’re doing that really well, actually, given all the work that you’re doing. I mean, every time I look at work that you’ve been producing, be it on Instagram, LinkedIn, anywhere really, it’s always so happy and it always comes back down … You remember? I mean, what was it? 2010 or 11 when we were working on the Smashing Book 2 illustrations because-

Yiying: Oh yes.

Vitaly: And all the animals, so beautiful, so happy. All of them so happy. It’s unbelievable. So, would you say that this happiness or bringing happiness into the world, what is really also coming from your name, is this really the ultimate thing that defines your artwork because everything has to be pushing for this positivity in the world?

Yiying: I think it’s about this curiosity and it is about … It’s coming from this innate almost childlike stage. And a lot of time when I create, I don’t know what it’s going to come out, especially when I create, if you remember when we collaborate on the Smashing Book 2, which is around 2010. When I get the brief from you, I really had no idea what exactly-

Vitaly: No, neither did I, to be honest. I mean, I had no idea what we’re going to end up with.

Yiying: Right, and there is this interesting unknown. It’s literally a destination unknown and you’re working on something you have no idea how this is going to come out, but if you have this innate desire of communicate and innate interest and curiosity to see what you got to be coming up with, it’s exciting. I would say it is a very powerful way of finding the internal state that you want to be.

Yiying: And so to me, every single time when I create something, it always comes out very fun. I think that’s the thing that we’re all searching for, which is something I’m always very interested to search for the fun in the functionality because a lot of times, we write a book it’s very functional and a lot of time, especially I think a lot of the Smashing books are very wonderful tutorials and teach people how to do things, and it’s very functional. And to me, my interest is finding out the fun or highlighting the fun in the word functional. Because if you look at the word function, it has fun in it. It’s just a lot of times, people don’t necessarily get the chance to experience it.

Yiying: And so to me, this sort of light heart joy is something I want to highlight. And I think that visual art has this way of make that immediate emotional response. If the work that I do could help people to be in that state, I think it’s my ultimate joy too, because when I’m creating it, I’m having a lot of fun. It’s just such a blessing for people to experience the fun while I’m creating, when they are looking at the work. So, that’s in a way, is my way of communicating people without necessarily saying the words. But the visual is the medium of the message.

Vitaly: And it’s interesting that you’re saying that word create. I mean, every time I think about the work that you’re doing, it’s always … there’s this creative create part, if you know what I mean? It’s like sometimes you would go ahead and you would create something basically as, I don’t know, just a to-do list, those kind of things. And sometimes you create something that you bring out into the world to share with other people, right?

Yiying: Yeah.

Vitaly: And so I know that in my experience at least, there are people who are really afraid of creativity as a thing. They might think that they’re not creative. They might think that they’re engineers. They might think that they are doing their own thing. And they’re very focused on that thing, but there is not really creativity. So, when you give them a pencil and a blank sheet of paper, they don’t even know what to do. I know that you had this really interesting project, a big drawing festival that you organized back in the day. Was it during pandemic or just before the pandemic, I believe?

Yiying: It was right before the pandemic.

Vitaly: Right before the pandemic, so where you really brought everyone in to be creative. And how do you feel about this? Do you feel like everybody is creative by default?

Yiying: Absolutely. Honestly, I think everybody is creative. The reason why I’m saying it, is every day when you wake up, you don’t know what the day is going to end up like. Every year, when you start a new year, you don’t know what the year is going to be like. You’re literally creating that year or creating that day. Every day, you are improvising without knowing or without really focusing on the fact that you’re improvising. You don’t know who you’re going to be meeting on the street. You don’t know what kind of conversation you got to be having on the email or the phone call. You are literally creating your life every single second and millisecond.

Yiying: And so, we are innately our own author, or creative director, or actress, actor of our own film or movie, whichever way you wanted to call that, or TV show, or soap opera. But the way that I look at it, when you say engineers and accountants or lawyers, I got to be honest with you, I work with all of the different professions. I think that a lot of times when you give a creative pump for people that conventionally don’t consider themselves as creative, they ended up coming up with some of the most interesting drawings and interesting storytellings because it’s actually the part of the brain that don’t necessarily have the chance to be activated or even expressed. I think that was probably the more appropriate word for that. I think everybody have their creative expression and I’m very, very interested to facilitate that. Not only facilitate that for myself, but for others.

Vitaly: Well, maybe looking back a little bit into your background and where you were born and your travels and your journey until you ended up in San Francisco, I’m wondering, now, looking back at your life, do you think that your travels and you’re moving places and you’re now running across disciplinary and multilingual team now as well in your design work. Do you feel like this way of learning Chinese and then being in Australia, and then being in the UK, and then now being in San Francisco that actually has defined, significantly defined, the way you design, the way you work the way you think? Do you think that this is a very significant attribute of the work that you’re doing, or is it just a part of what you’re creating?

Yiying: That is a great question. That is a great question. I think it definitely influenced me. I’m not sure if I’m being defined already. I think everybody in their life, they’re defining themselves every day. I think that to me, I think everywhere I go, I live, or I have been to, the people that I’ve met, the book I have read, the food that I have eaten, the movies I’ve seen, or film that I have seen, absolutely influenced me, and shaped me, and shaped my way of thinking in very important ways.

Yiying: I think that being able to live and travel to different places of the world is helping me to see the diversity of people. But in the same time, seeing the unity of people, because the more places I have traveled, obviously it’s so wonderful to experience the world in different cultures and food and language. But I really started to see the commonality of people, the thing that we all have in common and that’s something I think is the message that I would love to express through my art, which is the diversity and the unity is seemingly a two opposite idea, but I’m always interested in finding a way to tell these two seemingly polarized idea into a uniformed communication.

Vitaly: Yeah, I think it’s interesting that you’re saying that because often when we travel to places, when we talk to people in other regions, we always think about what is so unique or special about that particular place and what is the food you need to taste, and the music you need to listen to, and where the people gather. And we try to focus on differences and how different certain places or certain cultures, certain people are. But at the same time, there is quite a lot of, I mean, unity as you’re saying, where people are people in the end and it doesn’t really matter that much where they’re coming from, they will have certain cultural differences obviously, and interests and things like that. But in the end, focusing on that thing that unites us all is actually quite significant. I think that one really symbolic, almost, thing from your work that defines it for me is your research, your incredible research that you have done on dumplings. And at this point, I have to ask you to tell this story because how does one even become a designer of a dumpling emoji that is now available on billions of smartphones on the planet? And maybe you can also share a bit of research that you did into all the dumplings around the world.

Yiying: Thank you, really. Yeah, this is such a fun project. I’m always very happy to share the story. It went back to 2015, which is almost seven years ago. I initially moved from Sydney, Australia to San Francisco and my good friend, Jenni Lee, who used to be a journalist of New York Times, at the time, she moved to San Francisco around the same time I was relocating. And so as Asian Americans, we wanted to unite with each other and was sharing dumplings. And she sent me a photo of a dumpling potsticker in the bowl. I wanted to express my excitement and sending a dumpling emoji, only find out that there was no dumpling emoji on the iPhone. I said, “I’m surprised that they don’t have a dumpling emoji.” And she goes, “Oh, good point.” I was like, “Okay, well that doesn’t go anywhere.”

Yiying: And so for me, I always like to see what I can do. When there’s a problem, I want to find a solution. So, this happened to be something I can do something about. So I thought, “Well, I’m a designer. I have imagination. And why don’t I do something about it?” So, I went back to my table and I started to just create the very first version of the dumpling emoji. I call it the bling bling dumpling, because I made it as a animated gif and it has heart eyes and it blings. So, I sent it over to Jenny with that half moon shape dumpling. And she goes, “Did you make it?” I said, “Yeah.” And she said, “We should publish this.” And later on, we went to the dumpling party and there was people from around the world in the party and everybody was sharing their own dumpling from their respective country they’re coming from.

Vitaly: So it was a dumpling party then?

Yiying: Yes, so we had a dumpling party, we had-

Vitaly: There are dumpling parties around the world? I should go.

Yiying: We should do a dumpling party around the world. We had a dumpling party at Jenny’s house. We had folks from different parts of the world coming to the party and we learned Georgia have khinkali, Japan has gyoza, Italy has ravioli, Polish, we have pirogi, empanadas, crab legs, momos. Yeah, I have done a lot of research with my folks. And so, I learned all these dumplings. I’m like, “Wait a minute. This is actually a universal food. It’s not just a Asian cuisine. It’s actually a very international cuisine.” And so, then Jenny did more research and find out that Unicode Consortium, which is a nonprofit organization that’s based in the Bay Area, in fact is responsible for all the emojis on our keyboards.

Yiying: And so we ended up, went to the Unicode Consortium for their technical reading, with all the different folks who runs the organization. We proposed the dumpling, the chopstick, the fortune cookie, the takeout box, in person and they were approved in early 2016. So, it takes about three month for us to go to the meeting. From initial day I remember it because it’s the very auspicious day, it’s the August 8th. And so it takes about three month and then take about two years for all the vendors like Apple, Google, Samsung, Facebook, and Twitter, et cetera, having the actual emoji design in their own style, based on the original design that I did. It was eventually available on billions of keyboards. And the fun story is we also submitted the boba tea emoji in 2015, but it was rejected back then. That’s another story. But then five years later, they were finally available people’s phone during the pandemic in 2020, thanks to three data scientists who were able to prove the number of the users, Timothy, Sujay, and Ranjita, they were amazing. They wrote the important part, which is the data part, to prove the importance of the usage of boba. So, that ended up having the boba tea emoji also available. So, I designed six emoji altogether so far. The dumpling, chopstick, fortune cookie, takeout box, boba tea and the peacock, that’s another story we can-

Vitaly: Oh right, the peacock. Anything else we should be expecting coming anytime soon in emoji?

Yiying: Right now, right now it’s still in the cooking, we don’t know yet. So, I’ll definitely keep you posted. There’s always a lot of exciting things in the making, so I’ll be able to share when the time is right.

Vitaly: Excellent, excellent. Well also of course, I have to mention that just when you look at your CV and all the work that you’ve been doing, and did so much work throughout the years, you’ve been featured on New York Times and Forbes, Bloomberg, Fast Company, Time, White Magazine, CNN, BBC, and the list goes on and on. Now, how did that happen? I mean what do you think was one of the most significant things in your career that enabled all these incredible projects?

Yiying: Yeah, thank you for the question. I think that I’m incredibly thankful for the people that I have worked with. A lot of times, I think I look back some of the most known work or being celebrated work, it wasn’t designed necessarily for the corporate alone. A lot of times, the work that I did and eventually was being used, or celebrated, or known by many, many people, was essentially a personal work. A lot of the work, for example, whether it’s the dumpling, emoji, the boba emoji, or the Twitter whale, the whale that eventually become Twitter, become Twitter’s arrow page, or Twitter’s over capacity page, which is around 2008 to 2013. It was literally seen by millions of people and also remixed by a lot of people online, which I believe is really the power of community.

Yiying: But the essence of the work that really, I think I’m most proud, of a lot of times are my personal art piece in the first place. So, the whale that eventually become the Twitter Fail Whale, was not designed for Twitter. It wasn’t commissioned by Twitter. It was a personal piece that I created when I just finished my exchange study in London and went back to Sydney, New South Wales, pun not intended. I created the whale initially as a birthday e-card that I wanted to send out to my friends or families in Shanghai and London because I met so many classmates in London and they were all graduating a little bit earlier than Australia. So, I wanted to express the fact that I couldn’t go to your graduation ceremony or birthday party, my wish for you is so big, just like this gigantic whale. Naturally in the 3D world, the whale cannot fly, but I have these little birds carry this big, heavy wish across the ocean for you. So, here the whale was symbolized for the heavy, gigantic wish that I have for friends and family overseas.

Yiying: But it was just so happened that there was this teeny tiny little startup in San Francisco called Twitter. And the co-founder, Biz, found the image online and licensed it and that rest is history. But I think there is this interesting connection where, even though Biz look at the whale and thinking of … The interesting part is he interpret the whale as the big stability issue, where the Twitter employees which are the birds worked really hard on, it was this desire of bringing user happiness, which was the reason why he choose the image in the first place, I think. I heard that from the NPR radio, when he mentioned it was whimsical and it brings the user joy, even though it was a pretty frustrating situation.

Yiying: I think that’s what art does. A lot of times in our real life, there’s so many different kinds of challenges, but I think art in a way is a beacon of light that helps people to release their emotion or help people to connect with that inner light they’re searching for. Or sometimes, there’s art is just highlighting their emotion. It could be very sad, it could be very scary, but allow them to connect with that inner self. I think that’s what art does and that’s why we need art in our lives.

Vitaly: Right. Well, also talking about art, of course, I have to move to a very interesting area, of course, because most recently you’ve transitioned into becoming an NFT artist and that’s a beast of its own, I guess. At this point, I do have to ask because frankly, I mean, I’m just not that much in NFTs and I know that some of the listeners will be surprised maybe, or maybe not, but what does it even mean to be an NFT artist? What do you need to do to get there? Do you need to have some sort of, I don’t know, technical equipment, I have no idea. What did you learn throughout that experience?

Yiying: That is a great question. I always love when people are new to the space and curious about the space. I want to say that first of all, the important part is the definition of what NFT stands for. A lot of people probably don’t really look into it. NFT stands for non-fungible token and non-fungible literally means irreversible, irreplaceable. Every single NFT is unique to itself, just like our human experience. I feel like a lot of times, I can see the correlation between each one of us, even the two twins who are identical looking, they could have complete different experience.

Yiying: The token, that is a very interesting word because I just had a conversation recently with a friend of mine who is a little bit against NFT like, “Oh, I don’t really like the word token.” I said, “Wait a minute, let’s look into the etymology of the word token.”

Yiying: So, I think a lot of times people only associate NFT with the monetization value, or the business value, or the currency. But I look into the word token. In fact, the word token comes from old English, which has Germanic and Dutch background. It literally comes from the word [foreign language 00:23:42] which means to teach and I suddenly get it. The idea of creating something that being seen as a token, is a way, or is a opportunity for you to teach the world something, for you to create something for the world to learn. In that case, what would you like to create for you to teach, from yourself? And that’s something I want people to keep in mind when you are going to this space, not just looking at creating something as a mean of a transaction, or just as a mean to make financial return, is what would you like to create for people to learn from you, from your experience and from your creation?

Yiying: And so, that’s the fundamental ethos that I have when I create any new NFT art, or new NFT experience. I think that anything that you create content-wise, whether it’s a podcast or a conference, I love Smashing conference, it is an experience. And they can all be seen as a token if that’s how we are going to define it. And so that again, it’s very important for me to have the right intention of what I want to put to the world because we have so much content these days. It’s very fundamental for us to know why we are doing what we do.

Yiying: So, technical-wise, I think that to be able to create NFT, obviously you need wallets, you can create something digitally or you can create something physically as a visual art piece, or you could also create music. It can be a music and art combination as a video. So, the format of NFT can really be any multimedia content in a digital file size, that can stored onto the blockchain. And the way that you could start your first NFT, you needed to have a wallet, a digital wallet. So, it’s almost think of it as your bank account, but on the blockchain. So, that case, you can register for different online wallet. You can also purchase one of these hardware wallet, which also allow you to store the content more safely, because the hardware wallet, you could actually plug it offline. And you also use one of the platforms on the internet that allow you to upload the work. So, it’s quite simple.

Vitaly: Right, but basically that means that you would be designing or illustrating your … creating your artwork. And then you would be putting it out there on one of those platforms, which allow you to sell. And essentially, that also means that once you have that, you would then initiate an auction, or how does that work? And then you’ll be pretty much getting a Bitcoin in return. Is that how it works?

Yiying: It’s close. So, the currency can be any-

Vitaly: Close enough, that’s good for me.

Yiying: Yes, close enough. You did a great job, really. The actual currency can be any currency. It doesn’t have to be Bitcoin. It can be Ethereum, which we call them Eth, it’s a younger cryptocurrency, but it has been around for a while. And majority of the cryptocurrency website receive Eth and also a lot of them actually receive fiat, which is US dollars. Then you have websites like for example, we have OpenSea and there’s Foundation, there’s SuperRare, there’s MakersPlace, there’s Nifty Gateway. Each of the platforms would receive currency. Some of them might receive multiple currencies, like OpenSea is more open to all kinds of different currencies. So, if you go to their website, you probably will find more than hundreds of different currencies that are acceptable from their website. So that in that way, you could do more transaction if, for example, if you have some of the very smaller known currency, you can use them over there, but then you also have MakersPlace, for example, they allow you to use credit card. So, you could also use credit card to purchase if you don’t have cryptocurrency, but they also allow you to use Eth to purchase. So, you can use your cryptocurrency to purchase or to receive cryptocurrency if you’re a artist.

Yiying: Now, going back to the question, is it going to be auction or some other way? There’s all kinds of different ways of, again, depends on the platform that allow you to do auction. So, I believe that on most of the website, they allow you to do auction, but depends again, whether you issue your NFT as a one-on-one piece, which is unique one and only piece, or you decided to do it like a limited edition, let’s say … Think of this as a print. Back in the days we create prints. So one-on-one is basically when they say mint, is that you create the digital art or you create the physical art and you scan it and make it digitally, you upload it to the blockchain through your wallet. This process in the crypto terminology, they call it mint. It’s like minting the money.

Yiying: So, once you mint it, if you only mint one piece and you’re not going to mint it again, you call it one-on-one piece and those pieces are usually you can either have a set price and you sell this or you can do auction. So potentially, you should be able to do it on most of the website. You can do auction. There’s also a lot more interesting, fun ways of interacting with your collector.

Yiying: So for example, there’s also a very popular way, people do limited edition pieces within 24 hours. So, this is called the open edition. So, within 24 hours, they’re going to issue, but we don’t know how many pieces are going to be sold out, but within 24 hours people are going to close the mint, meaning that if you are late to the game after 24 hours, you don’t get the chance to purchase it. So, that’s called the open edition.

Yiying: So, sometimes open edition could be very interesting because depends on how many people are going to participate in the sale. You could sell more, you could sell less, but then depends on how many pieces are being sold. There’s also this scarcity interests from the collector because some of the collectors might want to participate into these open edition, but they might want to have something pretty rare.

Yiying: So, I did this really interesting chance-based, almost chance-based sale on MakersPlace, which is something hard to do on other platforms because a lot of times, other platforms will sell the piece right away. What you see as what you get, or they have this thing called mystery box, you don’t know what you get, you purchase it and you open it and that’s it.

Yiying: But what I did was MakersPlace. We did a chance-based sale, which is very exciting. So, we had five different designs and each of the design have different percentage of people being able to purchase, but they don’t know what they’re going to get. So, they might get the unicorn, which is very rare. There’s only less than 10% chance you’ll be able to get it. Or you can also get this particular piece, that’s this new mythical beast that only have 4% chance of winning. So, it gets very interesting because you make the whole open edition process become also a chance-based game that people are very excited to participate and they also ended up walking away with a piece of art they like. Because usually, I have less than six designs and it’s always exciting to see what people ended up getting. So, that’s the way that I experiment with different platforms.

Vitaly: Right. And would you say that this is actually worth it for designers, for example, or illustrators, or artists? So, you might have some people listening in now thinking, “Okay, well I’ve been designing digital art now forever. This is something for me to try out.” Because we of course always hear about those stories about maybe one particular artifact being sold for, I don’t know, a million or two, or so. Are those really edge cases and is it really hard to get to any level of success? Or would you say that there are many artists trying? There are obviously many artists failing and some succeeding. Where would you say we currently are in this space?

Yiying: This is a very great question. And to me, I’m still in … The non-fungible token space is relatively new and I’m still experiment. I think the most important thing, this is just a personal experience that I like to share with the world, that by no mean, I think that doing this is the only way of achieve success or happiness, or whatever you are searching for in your life. I think that by participating in this interesting new piece of technology, I’m able to find something and create something, a new experience that otherwise, I wouldn’t have the opportunity to do.

Yiying: And to me, this is as exciting as … Vitaly, if you remember, I wrote a email to you when we created the Smashing Magazine Book 2 together in 2010. And in 2017, you were leading the Smashing Conference in New York. And I wrote an email to you after seven years, even though we’ve never met. I wrote a email to you. I said, “Hey Vitaly, welcome to town. I would love to come and see you, but I also become a speaker now. I would love to speak at Smashing Conference if there is a chance and if the topic matches.” And you ended up giving me this opportunity to speak in New York and it also really helped me to gain a lot more audience. I had such a smashing time and I enjoyed it so much and organically, I had so many more opportunity to speak and to that, I’m incredibly thankful.

Yiying: But I also think that I gave myself a chance. I reached out to you because I just want to create this opportunity for myself and similarly, giving yourself a chance to experiment with a new piece of technology currently, sure there are a lot of people criticizing the current landscapes and some of the existing projects, but please, before you criticize anything, try it yourself and see if you can make a difference. That’s something I want to be able to do. I think that the biggest desire I have with cryptocurrency is being able to create something new and potentially use it as a case study to teach people. Again, going back to the token, to teach people the technology itself. There’s nothing wrong with technology, just like there is so many potential with social media.

Yiying: And going back to people saying money is evil, money is a energy. Money is neutral. In fact, there is so much abundance that we can create if we have the right intention and also if we do it with the right people, who also have the same goal and mission. And so going back to, again, your question on whether or not the space, there’s a lot of criticism. There’s also a lot of projects unfortunately failed, that stemmed back to the innate difference between Web3 and Web2 because in Web2, because it’s cryptic, a lot of times, people don’t really know the early days crypto artists, they’re anonymous.

Yiying: I’m doing NFT, but I wouldn’t necessarily call myself a crypto artist per se because people know who I am and I am relatively public. People know my real name and there’s also obviously, a lot of trust you have to establish with your community. And that’s also something I’m very excited about, is that when you are creating something from the identity, who you are, and the community knows you and vice versa, you wanted to create something that people could treasure. And unfortunately, a lot of the scams are coming from there is this trust that was being established. People wanted to purchase their art piece from this particular NFT project.

Yiying: And yet later on, there was disappointment because the crypto artist or the project failed because it’s a scam, because the foundation was shaky. There was no mutual transparency over there. And so that’s something that I think that there’s going to be a lot more experiment and there’s also going to be a lot more trial and fail, trying and … how would I put this? Sorry, I’m going off the topic, but that’s what I’m trying to say.

Vitaly: That’s okay, that’s okay.

Yiying: That’s what I’m trying to say. I think that give yourself an opportunity. If there is a new piece of technology that existing, sure there will be a lot of pros and cons, but really try it yourself and you might create something completely new. That would be my message.

Vitaly: Right. Well, at this point, I just really have to ask that one question that probably is somewhere out there in the dark corners of the web, because now that I look at all the work that you’re doing, not to mention of course, your studio, not to mention of course, all the incredible nonprofit work that you’re doing as well from Asian Art Museum and Women Talk Design, the Kids & Art Foundation, San Francisco Zoo, and so many others. And you’re also a San Francisco arts commissioner. I mean, how does it all work? Where do you even find time for all of this? Do you even sleep at night? How does it work, Yiying? Tell us, what is the secret to your productivity?

Yiying: Thankfully, I think I have been always doing the things I love. So, I’ve been always doing the work I enjoy, with the people that really have been supportive and with the community, like Smashing community and yourself, the people that I really have so much gratitude and also had so much fun working with. It’s always helpful when you work with people that you enjoy working with and also learning from them. I’ve learned so much from the Smashing community, the speakers, yourself, and also the community. I always enjoyed meeting all the Smashing attendees offline, and really appreciate the time that we spend in different parts of the world, whether it’s Toronto, Vyborg, here in San Francisco, New York. And yeah, I can’t wait to meet more folks now that COVID-19 is calming down a little bit, travel reopened. To me, it’s something to look forward to.

Yiying: I always, doing something that potentially could look forward to. Going back to your question about being a San Francisco arts commissioner. I am very thankful the mayor of San Francisco, London Breed, appointed me to be the arts commissioner and together with 14 other arts commissioners, we work with the City of San Francisco and it’s actually a very wonderful community that works to serve the larger community. In this case, we work with the artists in the Bay Area for RTC in the San Francisco International Airport, SFO. Whether it’s the murals outside of the zoo, or the park that’s within the San Francisco Chinatown, it’s a very big honor to be able to help the community offline. Because I am very passionate about the online community, but I think that we live in that three-dimensional world, in a physical world. And so a lot of times, I do think that being able to also contribute to people’s wellbeing and happiness in the physical world is something that I’m just very happy to be part of.

Vitaly: Right. Also, you just mentioned COVID, of course. I’m wondering at this point for all of us, I think, and for everybody who I’ve been interviewing and for myself as well, COVID had a tremendous impact on the life habits, the views on things, relationships, and so many other things. What was it for you? Did you learn something? Did you something about yourself, about art, about anything else? Did it motivate you to do something? How did it change your life?

Yiying: Thank you for the question. Yeah, I would say the entire pandemic has been very challenging and yet I see it as a opportunity to connect with myself, but also connecting with my community. Because during COVID-19, especially 2020 and 2021, I was in San Francisco and I have not still, until now, I haven’t seen my parents for almost four years. My parents are still in Sydney, Australia and my family, my relatives, at the time my grandmother, is in Shanghai. So, I haven’t seen my immediate family for at least more than three years, three and a half years.

Yiying: And so, I think that it’s a very isolated situation and the only way that kept me going and also kept me stay at float is creativity and community, really, truly. I was very fortunate to be able to get a lot of support from different sources. One of them was Adobe. Adobe had Adobe Creative Funds, so I was very fortunate to receive it. I created this project, which you can see on the back. I was very passionate about biological conservation for the endangered species, but I was also very interested in creating something for children.

Yiying: So, I’ve been always wanting to write a children’s book. So, during the pandemic I was working on this project called The Very hungry Red Panda, because me, myself, I’m from Asia. Red panda was also from Asia and most people don’t know, the cute red panda … By the way, fun fact, if you use Firefox Mozilla, the Firefox is actually not a fox. Firefox is actually a nickname for red panda, so that’s a-

Vitaly: Oh, this is shocking.

Yiying: I know, it’s not a Fox, it’s a red panda. So, I was very interested in showcasing the beauty and the nature of Asia. It was also during the … Unfortunately, I think the pandemic was also … really showed a lot of the issues in the world. I wanted to also find a way to shed some lights on this issues, but in a more uplifting way. What I’m interested in doing is using art as a vehicle to advocate for diversity, for inclusion, and how does that look like when we bring people together? I think that one of the metaphor I was using, which is what if we create these stories that can bring people and children from around the world together to appreciate each other?

Yiying: So, the children’s book, the ethos of the children’s book, which is The Very Hungry Red Panda, was initially coming from the Red Panda Creation. I created the red panda, was during an Airbnb Asian Night Market. That was before COVID in 2019, supported by all the folks in Airbnb. It’s all volunteer work from the employees at Airbnb. So, they wanted to create this amazing, called night market, for the local mom and pop shops and for the local performers for the local hosts who, AAPI heritage, it was during the AAPI Heritage Month, which means Asian American Pacific Islander Heritage Month. So, they bring all the people together. But the attendees, people from all kinds of genders, all kinds of ethnicity, and people are able to come over and enjoy the food from Asian Pacific Islander heritage.

Yiying: And at the time, they didn’t have anyone to do the branding, creative campaign work. Basically, it was two weeks before that market opening and they couldn’t find anybody to do the design volunteer work. My friend Mabel at the time, she was the global lead and she contacted me. She said, “Can you help out?” So I said, “Okay, I would love to help out in any way I can for the community.”

Yiying: So, I created that red panda initially for that event as my contribution to my community and because red panda is endangered, just like the artists and all the small businesses in the Bay Area. And so, we need to take care of them and protect them. And the reality is the red panda actually was less than 10,000 in the world on the Earth. Most people don’t know about, they’re really cute, but they’re also very endangered.

Yiying: So, I was very excited to of expand the families of the red panda and then 2020 happened, and I got this creative fund. I wanted to create something to advocate for all endangered animals from around the world, from African animals like the giraffe and the zebra, or the polar bear in the North Pole, and the whale shark in the East Asia Ocean, and the koalas in Australia, or the sloth in South America. So, it’s a way for me to really send my love to not only people, but also geographic location around the world. But essentially, the ending of the story is, it will be a play. All these animals are actually animal costume and there’ll be little kids jumping out of the costume and there will be kids from around the world. So, that’s the hope of that children’s book.

Vitaly: Oh, that’s nice. That’s very cute. I’m wondering at this point, with all the project that you already had done, is there any dream project that you’d love to work on one day? Something that you always wanted to do? I don’t know, NASA? I have no idea. Anything that you have in your mind that will be, eventually you will start work on.

Yiying: Great question. I think I am literally just starting working on it. I am three weeks in on writing a book about creativity, entrepreneurship. Really it’s a book about happiness and creativity, that’s my name. I would love to use this book to bring more happiness and creativity to more people. So, I’m incredibly excited to start this dream project. I haven’t shared this with anybody publicly, so I’m sharing it with you here.

Vitaly: Well, now you have. Excellent, excellent. Now, maybe the final question for you Yiying, until … and then we’ll wrap up. Looking back at your career and again, all the incredible things that you have been working on. Is there anything you wish you’d told yourself maybe 10 or 15 years ago when you were just starting out?

Yiying: Yeah. I think that if … One thing I think I would like to tell myself, I love this quote from Conan O’Brien, which is, “If you work hard and be kind, amazing things going to happen.” I think it really helped me through some of the hardest time in my life. Another quote I love is from Joseph Campbell, which is, “Follow your bliss.” I think that everybody in themselves, they all know what makes them happy, what brings them joy. And that is such a bliss for thing to know or to realize. So, I would say follow your bliss, follow the things that make your heart sing.

Vitaly: That’s very nice. Well, if you dear listener, would like to hear more from Yiying, you can always find her on Twitter when she’s @YiyingLu, and also on her website, which is surprising, surprising yiyinglu.com. Yiying will also be speaking. I heard, I think in New York, at SmashingConf, if I’m not mistaken. So, please drop in if you have time, we’d love to see you there as well. Well, thanks for joining us, Yiying. Do you have any parting words of wisdom? I mean, you already shared some, but anything else that you want to put out there in the world for all the wonderful people listening till the very end of this podcast?

Yiying: Yes, drink a lot of water and take deep breath every now and then.

Categories: Others Tags: