Archive

Archive for the ‘Designing’ Category

10+ Best WooCommerce Themes for 2023

March 21st, 2023 No comments

Are you looking for the best WooCommerce theme to help you build your online store, but are afraid of making a wrong choice?

For starters, you want to select a WordPress WooCommerce theme since not all WordPress themes offer complete WooCommerce support. If a theme doesn’t support WooCommerce, it won’t support all the available addons and extensions. And it will make it all the more difficult, if indeed even possible, to build the online store you have in mind.

WooCommerce is a free, open-source e-commerce plugin built for WordPress websites. The plugin allows you to easily sell almost any type of product while giving your visitors an intuitive and seamless on-brand buying experience.

The best WordPress theme for you will therefore be a WordPress WooCommerce theme, whether you’re about to create a new eCommerce site or redesign your current site.

The following list of the 11 Best WooCommerce Themes features one or more themes that will best meets your needs.

  1. Be – the Biggest WordPress & WooCommerce Theme

BeTheme, the biggest WooCommerce theme of them all, is more than capable of meeting your needs. BeBuilder, BeBuilder Woo, the Loop Builder, and 360+ professionally crafted pre-made websites are just a few of the 40+ powerful core features this popular (250,000 customers) website building machine places at your fingertips.

  • BeBuilder, the fastest WordPress website builder, lets you view each element as you customize it.
  • BeBuilder Woo helps you design versatile Shop and Single Product layouts that sell. 6 pre-defined layouts for Single Product are also at your disposal, you can create templates for Shop Archive or for Single Products, and BeBuilder Woo is loaded with customer-centric login, account management, and checkout features.
  • With the Loop Builder you can jazz up your website by designing any type of slider, blog, portfolio, or shop listing you can think of.
  • Add Be’s library of 650+ customizable pre-built websites and BeTheme’s flexibility becomes apparent.
  • Be’s updated Setup Wizard will help you get your project underway.

Click on the banner to learn more about what BeTheme can do for you.

  1. Jupiter X – Probably the Best WooCommerce Theme

Jupiter X, the go-to theme for many businesses, brands and marketers, is probably the best theme for WooCommerce with its huge WooCommerce base of exclusive shop features and capabilities.

Jupiter X is also the only Elementor theme that fully eliminates the need for an Elementor Pro subscription with its massive native widget library and native replacements to multiple Elementor features.

Key Jupiter X WooCommerce features include –

  • True shop builder: Build and customize product pages, membership pages, all checkout pages, and build single-step and multi-step checkouts
  • Checkout optimization features: Increase engagement and maximize profits with advanced sales funnels, order bumps, smart checkout notices, and more.
  • Fast Checkout features: Create Shopify-like checkouts with express checkout, sticky cart, checkout expiry and more.

Click on the banner to learn about Jupiter X’s many other WooCommerce features. 

  1. Blocksy – Best Free Ecommerce WordPress Theme

What makes Blocksy the best free eCommerce WordPress theme? Is it the selection of elegant pre-built starter sites? Or the powerful header builder and footer builder, both of which feature multiple content and design options? Or the fact that Blocksy is Gutenberg ready and features the latest web technologies?

Answer: Yes, yes, yes.  And there’s more.

  • Blocksy is fast and features thoughtfully written clean code.
  • A content blocks feature allows you to insert any piece of content anywhere in your site, plus any changes you make to a page, section, or item is synced in real time in the preview window so as not to slow your workflow.
  • Blocksy is also compatible with the popular Elementor, Brizy, and Beaver Builder page builders, is compatible with WooCommerce, is responsive, and features a White Label module.

Click on the banner to learn even more reasons why Blocksy is best.

  1. Uncode – Creative & WooCommerce WordPress Theme

The Uncode WordPress theme for WooCommerce gives its users the ultimate in shop building experience with its advanced drag and drop Product Builder, impressive Shop layouts, custom Cart and Checkout, Ajax Filters, and more.

Other reasons for making Uncode your choice:

  • 100,000+ sales that make it one of Envato’s top-selling themes of all times.
  • You can mix and match more than 70 carefully crafted and importable pre-made designs with over 100 builder modules to create custom pages.
  • The Wireframes plugin with its 500+ wireframes sections gives you a ton of design flexibility.
  1. Total WordPress Theme

Total is an aptly named super-intuitive WooCommerce-ready multipurpose theme that has everything needed to give your online store a unique and custom look and to get it up and running quickly.

  • Use a pre-made custom demo, Total’s extended WPBakery page builder, or both to create your custom website.
  • In addition, you have at your fingertips 100+ builder modules and shortcodes, and 90+ section templates, with no limits on customizing options.
  • With the native WordPress customizer and advanced Total settings you can change site colors, widths, and typography, and view your changes live before making them permanent. 
  1. Avada WordPress & WooCommerce Theme

With the Avada WooCommerce builder you can create a completely customized experience for your WooCommerce users.

  • You can design and build your own conditional layouts for individual WooCommerce Products
  • You can create custom Shop, Cart, Checkout and Archive pages using the design flexibility and power of Avada Builder, Woo Design, and other Avada Builder Elements.
  • Avada is lightweight, responsive, and built for speed and its impeccable code quality translates into exceptional performance.

Avada is popular. It’s the #1 best-selling theme ever, with its more than 750,000 happy users. 

  1. Rey – Exceptionally Intuitive WordPress WooCommerce Theme

The Rey WooCommerce theme is so fully equipped and flexible that you very likely will not need to rely on external plugins, plus its website demos are feature-rich yet designed with minimizing workflow in mind. With a few edits you can get a store up and running in a few hours.

There are plenty of supporting features as well, including –

  • 70+ internal optional modules and pre-made store templates.
  • flexible visual editing and fast search, filtering, and products navigation.

Rey is SEO friendly as well and puts you in good hands with its 5-star customer support.

  1. Woodmart – WordPress WooCommerce Theme for Any Kind of Store

WoodMart is ThemeForest’s most popular WooCommerce WordPress theme for a simple reason. It is loaded with features you will not find in most other eCommerce-oriented themes, such as –

  • shop and product page Elementor builders with an Elementor custom checkout feature, the WPBakery page builder, a header builder, and AJAX filters, product swatches, and search capabilities.
  • 80+ prebuilt websites to get projects underway or combine to create your pages.
  • 400+ templates you can use to prototype your website pages.

Woodmart, its plugins, and its dummy content can be installed in a few clicks. 

  1. Hongo – Most Powerful WooCommerce WordPress Theme

Hongo is a modern and multi-purpose WooCommerce WordPress theme which is specially curated for creating WooCommerce stores and company websites.

Hongo users have plenty to work with, including –

  • 12 Stunning and impressive store demos, 200 plus creative elements and a library of around 250 templates
  • Out of the box premium features like quick view, compare products, wishlist, catalog mode, advanced filters, color swatches, product tabs, and product videos.
  • WordPress Customizer and WPBakery custom shortcodes to support flexibility and customizability.

Users will also appreciate Hongo’s online detailed documentation and highly rated customer support.

  1. XStore – The Most Complete & Customizable WordPress WooCommerce Theme

The first thing people notice about XStore is its library of 120+ stunning and ready-to-go pre-built shops, which have become somewhat of a trademark for this theme.

Upon closer inspection, they find there’s plenty more to like about this WooCommerce WordPress theme including –

  • Its full support for Elementor and WPBakery, header builder, single product page builder, and 500+ prebuilt blocks.
  • $510 worth of premium plugins and a built-in WooCommerce email builder.

XStore gives every one of its users incredible value for a relatively small investment.

  1. Electro – Best WooCommerce theme for Affiliates, Dropship, and Marketplace Websites

Electro is a clean, modern, user friendly, responsive and highly customizable WooCommerce Theme with a 1.25 sec load time that makes it an ideal choice for your WooCommerce electronics store.

  • Electro’s compatibility with both Elementor and WPBakery page builders will enable you to take your design to the next level.
  • Electro’s design platform offers pixel perfect design, while producing 100% clean code.

You can choose from 7 awesome home pages and 3 different layouts to showcase your product, while using the power of Electro to add features like quick checkout and display product reviews.

*******

WordPress WooCommerce themes provide an excellent pathway to create an eCommerce shop and sell your products thanks to the easy to use WooCommerce extensions.

The right theme will ensure that your store will be both fast and reliable while providing an exceptional shopping experience that converts visitors to customers and boosts your store’s sales.

Choose one of these 11 Best WooCommerce WordPress Themes to launch your successful online store. There are no wrong choices here.

Read More at 10+ Best WooCommerce Themes for 2023

Categories: Designing, Others Tags:

Making Calendars With Accessibility and Internationalization in Mind

March 13th, 2023 No comments

Styling the calendar

You might recall how all the days are just one

    with list items. To style these into a readable calendar, we dive into the wonderful world of CSS Grid. In fact, we can repurpose the same grid from

Doing a quick search here on CSS-Tricks shows just how many different ways there are to approach calendars. Some show how CSS Grid can create the layout efficiently. Some attempt to bring actual data into the mix. Some rely on a framework to help with state management.

There are many considerations when building a calendar component — far more than what is covered in the articles I linked up. If you think about it, calendars are fraught with nuance, from handling timezones and date formats to localization and even making sure dates flow from one month to the next… and that’s before we even get into accessibility and additional layout considerations depending on where the calendar is displayed and whatnot.

Many developers fear the Date() object and stick with older libraries like moment.js. But while there are many “gotchas” when it comes to dates and formatting, JavaScript has a lot of cool APIs and stuff to help out!

I don’t want to re-create the wheel here, but I will show you how we can get a dang good calendar with vanilla JavaScript. We’ll look into accessibility, using semantic markup and screenreader-friendly -tags — as well as internationalization and formatting, using the Intl.Locale, Intl.DateTimeFormat and Intl.NumberFormat-APIs.

In other words, we’re making a calendar… only without the extra dependencies you might typically see used in a tutorial like this, and with some of the nuances you might not typically see. And, in the process, I hope you’ll gain a new appreciation for newer things that JavaScript can do while getting an idea of the sorts of things that cross my mind when I’m putting something like this together.

First off, naming

What should we call our calendar component? In my native language, it would be called “kalender element”, so let’s use that and shorten that to “Kal-El” — also known as Superman’s name on the planet Krypton.

Let’s create a function to get things going:

function kalEl(settings = {}) { ... }

This method will render a single month. Later we’ll call this method from [...Array(12).keys()] to render an entire year.

Initial data and internationalization

One of the common things a typical online calendar does is highlight the current date. So let’s create a reference for that:

const today = new Date();

Next, we’ll create a “configuration object” that we’ll merge with the optional settings object of the primary method:

const config = Object.assign(
  {
    locale: (document.documentElement.getAttribute('lang') || 'en-US'), 
    today: { 
      day: today.getDate(),
      month: today.getMonth(),
      year: today.getFullYear() 
    } 
  }, settings
);

We check, if the root element () contains a lang-attribute with locale info; otherwise, we’ll fallback to using en-US. This is the first step toward internationalizing the calendar.

We also need to determine which month to initially display when the calendar is rendered. That’s why we extended the config object with the primary date. This way, if no date is provided in the settings object, we’ll use the today reference instead:

const date = config.date ? new Date(config.date) : today;

We need a little more info to properly format the calendar based on locale. For example, we might not know whether the first day of the week is Sunday or Monday, depending on the locale. If we have the info, great! But if not, we’ll update it using the Intl.Locale API. The API has a weekInfo object that returns a firstDay property that gives us exactly what we’re looking for without any hassle. We can also get which days of the week are assigned to the weekend:

if (!config.info) config.info = new Intl.Locale(config.locale).weekInfo || { 
  firstDay: 7,
  weekend: [6, 7] 
};

Again, we create fallbacks. The “first day” of the week for en-US is Sunday, so it defaults to a value of 7. This is a little confusing, as the getDay method in JavaScript returns the days as [0-6], where 0 is Sunday… don’t ask me why. The weekends are Saturday and Sunday, hence [6, 7].

Before we had the Intl.Locale API and its weekInfo method, it was pretty hard to create an international calendar without many **objects and arrays with information about each locale or region. Nowadays, it’s easy-peasy. If we pass in en-GB, the method returns:

// en-GB
{
  firstDay: 1,
  weekend: [6, 7],
  minimalDays: 4
}

In a country like Brunei (ms-BN), the weekend is Friday and Sunday:

// ms-BN
{
  firstDay: 7,
  weekend: [5, 7],
  minimalDays: 1
}

You might wonder what that minimalDays property is. That’s the fewest days required in the first week of a month to be counted as a full week. In some regions, it might be just one day. For others, it might be a full seven days.

Next, we’ll create a render method within our kalEl-method:

const render = (date, locale) => { ... }

We still need some more data to work with before we render anything:

const month = date.getMonth();
const year = date.getFullYear();
const numOfDays = new Date(year, month + 1, 0).getDate();
const renderToday = (year === config.today.year) && (month === config.today.month);

The last one is a Boolean that checks whether today exists in the month we’re about to render.

Semantic markup

We’re going to get deeper in rendering in just a moment. But first, I want to make sure that the details we set up have semantic HTML tags associated with them. Setting that up right out of the box gives us accessibility benefits from the start.

Calendar wrapper

First, we have the non-semantic wrapper: . That’s fine because there isn’t a semantic tag or anything like that. If we weren’t making a custom element,

might be the most appropriate element since the calendar could stand on its own page.

Month names

The element is going to be a big one for us because it helps translate dates into a format that screenreaders and search engines can parse more accurately and consistently. For example, here’s how we can convey “January 2023” in our markup:

<time datetime="2023-01">January <i>2023</i></time>

Day names

The row above the calendar’s dates containing the names of the days of the week can be tricky. It’s ideal if we can write out the full names for each day — e.g. Sunday, Monday, Tuesday, etc. — but that can take up a lot of space. So, let’s abbreviate the names for now inside of an

    where each day is a

  1. :

    <ol>
      <li><abbr title="Sunday">Sun</abbr></li>
      <li><abbr title="Monday">Mon</abbr></li>
      <!-- etc. -->
    </ol>

    We could get tricky with CSS to get the best of both worlds. For example, if we modified the markup a bit like this:

    <ol>
      <li>
        <abbr title="S">Sunday</abbr>
      </li>
    </ol>

    …we get the full names by default. We can then “hide” the full name when space runs out and display the title attribute instead:

    @media all and (max-width: 800px) {
      li abbr::after {
        content: attr(title);
      }
    }

    But, we’re not going that way because the Intl.DateTimeFormat API can help here as well. We’ll get to that in the next section when we cover rendering.

    Day numbers

    Each date in the calendar grid gets a number. Each number is a list item (

  2. ) in an ordered list (
      ), and the inline tag wraps the actual number.

      <li>
        <time datetime="2023-01-01">1</time>
      </li>

      And while I’m not planning to do any styling just yet, I know I will want some way to style the date numbers. That’s possible as-is, but I also want to be able to style weekday numbers differently than weekend numbers if I need to. So, I’m going to include data-* attributes specifically for that: data-weekend and data-today.

      Week numbers

      There are 52 weeks in a year, sometimes 53. While it’s not super common, it can be nice to display the number for a given week in the calendar for additional context. I like having it now, even if I don’t wind up not using it. But we’ll totally use it in this tutorial.

      We’ll use a data-weeknumber attribute as a styling hook and include it in the markup for each date that is the week’s first date.

      <li data-day="7" data-weeknumber="1" data-weekend="">
        <time datetime="2023-01-08">8</time>
      </li>

      Rendering

      Let’s get the calendar on a page! We already know that is the name of our custom element. First thing we need to configure it is to set the firstDay property on it, so the calendar knows whether Sunday or some other day is the first day of the week.

      <kal-el data-firstday="${ config.info.firstDay }">

      We’ll be using template literals to render the markup. To format the dates for an international audience, we’ll use the Intl.DateTimeFormat API, again using the locale we specified earlier.

      The month and year

      When we call the month, we can set whether we want to use the long name (e.g. February) or the short name (e.g. Feb.). Let’s use the long name since it’s the title above the calendar:

      <time datetime="${year}-${(pad(month))}">
        ${new Intl.DateTimeFormat(
          locale,
          { month:'long'}).format(date)} <i>${year}</i>
      </time>

      Weekday names

      For weekdays displayed above the grid of dates, we need both the long (e.g. “Sunday”) and short (abbreviated, ie. “Sun”) names. This way, we can use the “short” name when the calendar is short on space:

      Intl.DateTimeFormat([locale], { weekday: 'long' })
      Intl.DateTimeFormat([locale], { weekday: 'short' })

      Let’s make a small helper method that makes it a little easier to call each one:

      const weekdays = (firstDay, locale) => {
        const date = new Date(0);
        const arr = [...Array(7).keys()].map(i => {
          date.setDate(5 + i)
          return {
            long: new Intl.DateTimeFormat([locale], { weekday: 'long'}).format(date),
            short: new Intl.DateTimeFormat([locale], { weekday: 'short'}).format(date)
          }
        })
        for (let i = 0; i < 8 - firstDay; i++) arr.splice(0, 0, arr.pop());
        return arr;
      }

      Here’s how we invoke that in the template:

      <ol>
        ${weekdays(config.info.firstDay,locale).map(name => `
          <li>
            <abbr title="${name.long}">${name.short}</abbr>
          </li>`).join('')
        }
      </ol>

      Day numbers

      And finally, the days, wrapped in an

        element:

        ${[...Array(numOfDays).keys()].map(i => {
          const cur = new Date(year, month, i + 1);
          let day = cur.getDay(); if (day === 0) day = 7;
          const today = renderToday && (config.today.day === i + 1) ? ' data-today':'';
          return `
            <li data-day="${day}"${today}${i === 0 || day === config.info.firstDay ? ` data-weeknumber="${new Intl.NumberFormat(locale).format(getWeek(cur))}"`:''}${config.info.weekend.includes(day) ? ` data-weekend`:''}>
              <time datetime="${year}-${(pad(month))}-${pad(i)}" tabindex="0">
                ${new Intl.NumberFormat(locale).format(i + 1)}
              </time>
            </li>`
        }).join('')}

        Let’s break that down:

        1. We create a “dummy” array, based on the “number of days” variable, which we’ll use to iterate.
        2. We create a day variable for the current day in the iteration.
        3. We fix the discrepancy between the Intl.Locale API and getDay().
        4. If the day is equal to today, we add a data-* attribute.
        5. Finally, we return the
        6. element as a string with merged data.
        7. tabindex="0" makes the element focusable, when using keyboard navigation, after any positive tabindex values (Note: you should never add positive tabindex-values)

        To “pad” the numbers in the datetime attribute, we use a little helper method:

        const pad = (val) => (val + 1).toString().padStart(2, '0');

        Week number

        Again, the “week number” is where a week falls in a 52-week calendar. We use a little helper method for that as well:

        function getWeek(cur) {
          const date = new Date(cur.getTime());
          date.setHours(0, 0, 0, 0);
          date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
          const week = new Date(date.getFullYear(), 0, 4);
          return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + (week.getDay() + 6) % 7) / 7);
        }

        I didn’t write this getWeek-method. It’s a cleaned up version of this script.

        And that’s it! Thanks to the Intl.Locale, Intl.DateTimeFormat and Intl.NumberFormat APIs, we can now simply change the lang-attribute of the element to change the context of the calendar based on the current region:

        January 2023 calendar grid.
        de-DE
        January 2023 calendar grid.
        fa-IR
        January 2023 calendar grid.
        zh-Hans-CN-u-nu-hanidec

        Styling the calendar

        You might recall how all the days are just one

          with list items. To style these into a readable calendar, we dive into the wonderful world of CSS Grid. In fact, we can repurpose the same grid from a starter calendar template right here on CSS-Tricks, but updated a smidge with the :is() relational pseudo to optimize the code.

          Notice that I’m defining configurable CSS variables along the way (and prefixing them with ---kalel- to avoid conflicts).

          kal-el :is(ol, ul) {
            display: grid;
            font-size: var(--kalel-fz, small);
            grid-row-gap: var(--kalel-row-gap, .33em);
            grid-template-columns: var(--kalel-gtc, repeat(7, 1fr));
            list-style: none;
            margin: unset;
            padding: unset;
            position: relative;
          }
          Seven-column calendar grid with grid lines shown.

          Let’s draw borders around the date numbers to help separate them visually:

          kal-el :is(ol, ul) li {
            border-color: var(--kalel-li-bdc, hsl(0, 0%, 80%));
            border-style: var(--kalel-li-bds, solid);
            border-width: var(--kalel-li-bdw, 0 0 1px 0);
            grid-column: var(--kalel-li-gc, initial);
            text-align: var(--kalel-li-tal, end); 
          }

          The seven-column grid works fine when the first day of the month is also the first day of the week for the selected locale). But that’s the exception rather than the rule. Most times, we’ll need to shift the first day of the month to a different weekday.

          Showing the first day of the month falling on a Thursday.

          Remember all the extra data-* attributes we defined when writing our markup? We can hook into those to update which grid column (--kalel-li-gc) the first date number of the month is placed on:

          [data-firstday="1"] [data-day="3"]:first-child {
            --kalel-li-gc: 1 / 4;
          }

          In this case, we’re spanning from the first grid column to the fourth grid column — which will automatically “push” the next item (Day 2) to the fifth grid column, and so forth.

          Let’s add a little style to the “current” date, so it stands out. These are just my styles. You can totally do what you’d like here.

          [data-today] {
            --kalel-day-bdrs: 50%;
            --kalel-day-bg: hsl(0, 86%, 40%);
            --kalel-day-hover-bgc: hsl(0, 86%, 70%);
            --kalel-day-c: #fff;
          }

          I like the idea of styling the date numbers for weekends differently than weekdays. I’m going to use a reddish color to style those. Note that we can reach for the :not() pseudo-class to select them while leaving the current date alone:

          [data-weekend]:not([data-today]) { 
            --kalel-day-c: var(--kalel-weekend-c, hsl(0, 86%, 46%));
          }

          Oh, and let’s not forget the week numbers that go before the first date number of each week. We used a data-weeknumber attribute in the markup for that, but the numbers won’t actually display unless we reveal them with CSS, which we can do on the ::before pseudo-element:

          [data-weeknumber]::before {
            display: var(--kalel-weeknumber-d, inline-block);
            content: attr(data-weeknumber);
            position: absolute;
            inset-inline-start: 0;
            /* additional styles */
          }

          We’re technically done at this point! We can render a calendar grid that shows the dates for the current month, complete with considerations for localizing the data by locale, and ensuring that the calendar uses proper semantics. And all we used was vanilla JavaScript and CSS!

          But let’s take this one more step

          Rendering an entire year

          Maybe you need to display a full year of dates! So, rather than render the current month, you might want to display all of the month grids for the current year.

          Well, the nice thing about the approach we’re using is that we can call the render method as many times as we want and merely change the integer that identifies the month on each instance. Let’s call it 12 times based on the current year.

          as simple as calling the render-method 12 times, and just change the integer for monthi:

          [...Array(12).keys()].map(i =>
            render(
              new Date(date.getFullYear(),
              i,
              date.getDate()),
              config.locale,
              date.getMonth()
            )
          ).join('')

          It’s probably a good idea to create a new parent wrapper for the rendered year. Each calendar grid is a element. Let’s call the new parent wrapper , where Jor-El is the name of Kal-El’s father.

          <jor-el id="app" data-year="true">
            <kal-el data-firstday="7">
              <!-- etc. -->
            </kal-el>
          
            <!-- other months -->
          </jor-el>

          We can use to create a grid for our grids. So meta!

          jor-el {
            background: var(--jorel-bg, none);
            display: var(--jorel-d, grid);
            gap: var(--jorel-gap, 2.5rem);
            grid-template-columns: var(--jorel-gtc, repeat(auto-fill, minmax(320px, 1fr)));
            padding: var(--jorel-p, 0);
          }

          Final demo

          CodePen Embed Fallback

          Bonus: Confetti Calendar

          I read an excellent book called Making and Breaking the Grid the other day and stumbled on this beautiful “New Year’s poster”:

          Source: Making and Breaking the Grid (2nd Edition) by Timothy Samara

          I figured we could do something similar without changing anything in the HTML or JavaScript. I’ve taken the liberty to include full names for months, and numbers instead of day names, to make it more readable. Enjoy!

          CodePen Embed Fallback

          Making Calendars With Accessibility and Internationalization in Mind originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

5 Mistakes I Made When Starting My First React Project

March 10th, 2023 No comments

You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something that’s new, you’re bound to find a problem that doesn’t have a written solution.

That’s how it was for me the first time I created a React project — and React is one of those frameworks with remarkable documentation, especially now with the beta docs. But I still struggled my way through. It’s been quite a while since that project, but the lessons I gained from it are still fresh in my mind. And even though there are a lot of React “how-to” tutorials in out there, I thought I’d share what I wish I knew when I first used it.

So, that’s what this article is — a list of the early mistakes I made. I hope they help make learning React a lot smoother for you.

Using create-react-app to start a project

TL;DR Use Vite or Parcel.

Create React App (CRA) is a tool that helps you set up a new React project. It creates a development environment with the best configuration options for most React projects. This means you don’t have to spend time configuring anything yourself.

As a beginner, this seemed like a great way to start my work! No configuration! Just start coding!

CRA uses two popular packages to achieve this, webpack and Babel. webpack is a web bundler that optimizes all of the assets in your project, such as JavaScript, CSS, and images. Babel is a tool that allows you to use newer JavaScript features, even if some browsers don’t support them.

Both are good, but there are newer tools that can do the job better, specifically Vite and Speedy Web Compiler (SWC).

These new and improved alternatives are faster and easier to configure than webpack and Babel. This makes it easier to adjust the configuration which is difficult to do in create-react-app without ejecting.

To use them both when setting up a new React project you have to make sure you have Node version 12 or higher installed, then run the following command.

npm create vite

You’ll be asked to pick a name for your project. Once you do that, select React from the list of frameworks. After that, you can select either Javascript + SWC or Typescript + SWC

Then you’ll have to change directory cd into your project and run the following command;

npm i && npm run dev

This should run a development server for your site with the URL localhost:5173

And it’s as simple as that.

Using defaultProps for default values

TL;DR Use default function parameters instead.

Data can be passed to React components through something called props. These are added to a component just like attributes in an HTML element and can be used in a component’s definition by taking the relevant values from the prop object passed in as an argument.

// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;

If a default value is ever required for a prop, the defaultProp property can be used:

// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;

With modern JavaScript, it is possible to destructure the props object and assign a default value to it all in the function argument.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;

This is more favorable as the code that can be read by modern browsers without the need for extra transformation.

Unfortunately, defaultProps do require some transformation to be read by the browser since JSX (JavaScript XML) isn’t supported out of the box. This could potentially affect the performance of an application that is using a lot of defaultProps.

Don’t use propTypes

TL;DR Use TypeScript.

In React, the propTypes property can be used to check if a component is being passed the correct data type for its props. They allow you to specify the type of data that should be used for each prop such as a string, number, object, etc. They also allow you to specify if a prop is required or not.

This way, if a component is passed the wrong data type or if a required prop is not being provided, then React will throw an error.

// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;

TypeScript provides a level of type safety in data that’s being passed to components. So, sure, propTypes were a good idea back when I was starting. However, now that TypeScript has become the go-to solution for type safety, I would highly recommend using it over anything else.

// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}

TypeScript is a programming language that builds on top of JavaScript by adding static type-checking. TypeScript provides a more powerful type system, that can catch more potential bugs and improves the development experience.

Using class components

TL;DR: Write components as functions

Class components in React are created using JavaScript classes. They have a more object-oriented structure and as well as a few additional features, like the ability to use the this keyword and lifecycle methods.

// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;

I prefer writing components with classes over functions, but JavaScript classes are more difficult for beginners to understand and this can get very confusing. Instead, I’d recommend writing components as functions:

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;

Function components are simply JavaScript functions that return JSX. They are much easier to read, and do not have additional features like the this keyword and lifecycle methods which make them more performant than class components.

Function components also have the advantage of using hooks. React Hooks allow you to use state and other React features without writing a class component, making your code more readable, maintainable and reusable.

Importing React unnecessarily

TL;DR: There’s no need to do it, unless you need hooks.

Since React 17 was released in 2020, it’s now unnecessary to import React at the top of your file whenever you create a component.

import React from 'react'; // Not needed!
export default function Card() {}

But we had to do that before React 17 because the JSX transformer (the thing that converts JSX into regular JavaScript) used a method called React.createElement that would only work when importing React. Since then, a new transformer has been release which can transform JSX without the createElement method.

You will still need to import React to use hooks, fragments, and any other functions or components you might need from the library:

import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}

Those were my early mistakes!

Maybe “mistake” is too harsh a word since some of the better practices came about later. Still, I see plenty of instances where the “old” way of doing something is still being actively used in projects and other tutorials.

To be honest, I probably made way more than five mistakes when getting started. Anytime you reach for a new tool it is going to be more like a learning journey to use it effectively, rather than flipping a switch. But these are the things I still carry with me years later!

If you’ve been using React for a while, what are some of the things you wish you knew before you started? It would be great to get a collection going to help others avoid the same struggles.


5 Mistakes I Made When Starting My First React Project originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

March 8th, 2023 No comments
Large tomato colored circle with a vertical list of numbers 1-12 on the left.

CSS trigonometry functions are here! Well, they are if you’re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. In this tutorial, I thought we’d dip our toes in the water to get a feel for a couple of the newer functions: sin() and cos().

There are other trigonometry functions in the pipeline — including tan() — so why focus just on sin() and cos()? They happen to be perfect for the idea I have in mind, which is to place text along the edge of a circle. That’s been covered here on CSS-Tricks when Chris shared an approach that uses a Sass mixin. That was six years ago, so let’s give it the bleeding edge treatment.

Here’s what I have in mind. Again, it’s only supported in Firefox and Safari at the moment:

CodePen Embed Fallback

So, it’s not exactly like words forming a circular shape, but we are placing text characters along the circle to form a clock face. Here’s some markup we can use to kick things off:

<div class="clock">
  <div class="clock-face">
    <time datetime="12:00">12</time>
    <time datetime="1:00">1</time>
    <time datetime="2:00">2</time>
    <time datetime="3:00">3</time>
    <time datetime="4:00">4</time>
    <time datetime="5:00">5</time>
    <time datetime="6:00">6</time>
    <time datetime="7:00">7</time>
    <time datetime="8:00">8</time>
    <time datetime="9:00">9</time>
    <time datetime="10:00">10</time>
    <time datetime="11:00">11</time>
  </div>
</div>

Next, here are some super basic styles for the .clock-face container. I decided to use the  tag with a datetime attribute. 

.clock {
  --_ow: clamp(5rem, 60vw, 40rem);
  --_w: 88cqi;
  aspect-ratio: 1;
  background-color: tomato;
  border-radius: 50%;
  container-type: inline;
  display: grid;
  height: var(--_ow);
  place-content: center;
  position: relative;
  width var(--_ow);
}

I decorated things a bit in there, but only to get the basic shape and background color to help us see what we’re doing. Notice how we save the width value in a CSS variable. We’ll use that later. Not much to look at so far:

It looks like some sort of modern art experiment, right? Let’s introduce a new variable, --_r, to store the circle’s radius, which is equal to half of the circle’s width. This way, if the width (--_w) changes, the radius value (--_r) will also update — thanks to another CSS math function, calc():

.clock {
  --_w: 300px;
  --_r: calc(var(--_w) / 2);
  /* rest of styles */
}

Now, a bit of math. A circle is 360 degrees. We have 12 labels on our clock, so want to place the numbers every 30 degrees (360 / 12). In math-land, a circle begins at 3 o’clock, so noon is actually minus 90 degrees from that, which is 270 degrees (360 - 90).

Let’s add another variable, --_d, that we can use to set a degree value for each number on the clock face. We’re going to increment the values by 30 degrees to complete our circle:

.clock time:nth-child(1) { --_d: 270deg; }
.clock time:nth-child(2) { --_d: 300deg; }
.clock time:nth-child(3) { --_d: 330deg; }
.clock time:nth-child(4) { --_d: 0deg; }
.clock time:nth-child(5) { --_d: 30deg; }
.clock time:nth-child(6) { --_d: 60deg; }
.clock time:nth-child(7) { --_d: 90deg; }
.clock time:nth-child(8) { --_d: 120deg; }
.clock time:nth-child(9) { --_d: 150deg; }
.clock time:nth-child(10) { --_d: 180deg; }
.clock time:nth-child(11) { --_d: 210deg; }
.clock time:nth-child(12) { --_d: 240deg; }

OK, now’s the time to get our hands dirty with the sin() and cos() functions! What we want to do is use them to get the X and Y coordinates for each number so we can place them properly around the clock face.

The formula for the X coordinate is radius + (radius * cos(degree)). Let’s plug that into our new --_x variable:

--_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));

The formula for the Y coordinate is radius + (radius * sin(degree)). We have what we need to calculate that:

--_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));

There are a few housekeeping things we need to do to set up the numbers, so let’s put some basic styling on them to make sure they are absolutely positioned and placed with our coordinates:

.clock-face time {
  --_x: calc(var(--_r) + (var(--_r) * cos(var(--_d))));
  --_y: calc(var(--_r) + (var(--_r) * sin(var(--_d))));
  --_sz: 12cqi;
  display: grid;
  height: var(--_sz);
  left: var(--_x);
  place-content: center;
  position: absolute;
  top: var(--_y);
  width: var(--_sz);
}

Notice --_sz, which we’ll use for the width and height of the numbers in a moment. Let’s see what we have so far.

Large tomato colored circle with off-centered hour number labels along its edge.

This definitely looks more like a clock! See how the top-left corner of each number is positioned at the correct place around the circle? We need to “shrink” the radius when calculating the positions for each number. We can deduct the size of a number (--_sz) from the size of the circle (--_w), before we calculate the radius:

--_r: calc((var(--_w) - var(--_sz)) / 2);
Large tomato colored circle with hour number labels along its rounded edge.

Much better! Let’s change the colors, so it looks more elegant:

A white clock face with numbers against a dark gray background. The clock has no arms.

We could stop right here! We accomplished the goal of placing text around a circle, right? But what’s a clock without arms to show hours, minutes, and seconds?

Let’s use a single CSS animation for that. First, let’s add three more elements to our markup,

<div class="clock">
  <!-- after <time>-tags -->
  <span class="arm seconds"></span>
  <span class="arm minutes"></span>
  <span class="arm hours"></span>
  <span class="arm center"></span>
</div>

Then some common markup for all three arms. Again, most of this is just make sure the arms are absolutely positioned and placed accordingly:

.arm {
  background-color: var(--_abg);
  border-radius: calc(var(--_aw) * 2);
  display: block;
  height: var(--_ah);
  left: calc((var(--_w) - var(--_aw)) / 2);
  position: absolute;
  top: calc((var(--_w) / 2) - var(--_ah));
  transform: rotate(0deg);
  transform-origin: bottom;
  width: var(--_aw);
}

We’ll use the same animation for all three arms:

@keyframes turn {
  to {
    transform: rotate(1turn);
  }
}

The only difference is the time the individual arms take to make a full turn. For the hours arm, it takes 12 hours to make a full turn. The animation-duration property only accepts values in milliseconds and seconds. Let’s stick with seconds, which is 43,200 seconds (60 seconds * 60 minutes * 12 hours).

animation: turn 43200s infinite;

It takes 1 hour for the minutes arm to make a full turn. But we want this to be a multi-step animation so the movement between the arms is staggered rather than linear. We’ll need 60 steps, one for each minute:

animation: turn 3600s steps(60, end) infinite;

The seconds arm is almost the same as the minutes arm, but the duration is 60 seconds instead of 60 minutes:

animation: turn 60s steps(60, end) infinite;

Let’s update the properties we created in the common styles:

.seconds {
  --_abg: hsl(0, 5%, 40%);
  --_ah: 145px;
  --_aw: 2px;
  animation: turn 60s steps(60, end) infinite;
}
.minutes {
  --_abg: #333;
  --_ah: 145px;
  --_aw: 6px;
  animation: turn 3600s steps(60, end) infinite;
}
.hours {
  --_abg: #333;
  --_ah: 110px;
  --_aw: 6px;
  animation: turn 43200s linear infinite;
}

What if we want to start at the current time? We need a little bit of JavaScript:

const time = new Date();
const hour = -3600 * (time.getHours() % 12);
const mins = -60 * time.getMinutes();
app.style.setProperty('--_dm', `${mins}s`);
app.style.setProperty('--_dh', `${(hour+mins)}s`);

I’ve added id="app" to the clockface and set two new custom properties on it that set a negative animation-delay, as Mate Marschalko did when he shared a CSS-only clock. The getHours() method of JavaScipt’s Date object is using the 24-hour format, so we use the remainder operator to convert it into 12-hour format.

In the CSS, we need to add the animation-delay as well:

.minutes {
  animation-delay: var(--_dm, 0s);
  /* other styles */
}

.hours {
  animation-delay: var(--_dh, 0s);
  /* other styles */
}

Just one more thing. Using CSS @supports and the properties we’ve already created, we can provide a fallback to browsers that do not supprt sin() and cos(). (Thank you, Temani Afif!):

@supports not (left: calc(1px * cos(45deg))) {
  time {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) rotate(var(--_d)) translate(var(--_r)) rotate(calc(-1*var(--_d)))
  }
}

And, voilà! Our clock is done! Here’s the final demo one more time. Again, it’s only supported in Firefox and Safari at the moment.

CodePen Embed Fallback

What else can we do?

Just messing around here, but we can quickly turn our clock into a circular image gallery by replacing the  tags with  then updating the width (--_w) and radius (--_r) values:

CodePen Embed Fallback

Let’s try one more. I mentioned earlier how the clock looked kind of like a modern art experiment. We can lean into that and re-create a pattern I saw on a poster (that I unfortunately didn’t buy) in an art gallery the other day. As I recall, it was called “Moon” and consisted of a bunch of dots forming a circle.

A large circle formed out of a bunch of smaller filled circles of various earthtone colors.

We’ll use an unordered list this time since the circles don’t follow a particular order. We’re not even going to put all the list items in the markup. Instead, let’s inject them with JavaScript and add a few controls we can use to manipulate the final result.

The controls are range inputs () which we’ll wrap in a and listen for the input event.

<form id="controls">
  <fieldset>
    <label>Number of rings
      <input type="range" min="2" max="12" value="10" id="rings" />
    </label>
    <label>Dots per ring
      <input type="range" min="5" max="12" value="7" id="dots" />
    </label>
    <label>Spread
      <input type="range" min="10" max="40" value="40" id="spread" />
    </label>
  </fieldset>
</form>

We’ll run this method on “input”, which will create a bunch of

  • elements with the degree (--_d) variable we used earlier applied to each one. We can also repurpose our radius variable (--_r) .

    I also want the dots to be different colors. So, let’s randomize (well, not completely randomized) the HSL color value for each list item and store it as a new CSS variable, --_bgc:

    const update = () => {
      let s = "";
      for (let i = 1; i <= rings.valueAsNumber; i++) {
        const r = spread.valueAsNumber * i;
        const theta = coords(dots.valueAsNumber * i);
        for (let j = 0; j < theta.length; j++) {
          s += `<li style="--_d:${theta[j]};--_r:${r}px;--_bgc:hsl(${random(
            50,
            25
          )},${random(90, 50)}%,${random(90, 60)}%)"></li>`;
        }
      }
      app.innerHTML = s;
    }

    The random() method picks a value within a defined range of numbers:

    const random = (max, min = 0, f = true) => f ? Math.floor(Math.random() * (max - min) + min) : Math.random() * max;

    And that’s it. We use JavaScript to render the markup, but as soon as it’s rendered, we don’t really need it. The sin() and cos() functions help us position all the dots in the right spots.

    CodePen Embed Fallback

    Final thoughts

    Placing things around a circle is a pretty basic example to demonstrate the powers of trigonometry functions like sin() and cos(). But it’s really cool that we are getting modern CSS features that provide new solutions for old workarounds I’m sure we’ll see way more interesting, complex, and creative use cases, especially as browser support comes to Chrome and Edge.


    Creating a Clock with the New CSS sin() and cos() Trigonometry Functions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

  • Categories: Designing, Others Tags:

    Exciting New Tools for Designers, March 2023

    March 6th, 2023 No comments

    This month’s edition of Exciting New Tools for Designers and Developers focuses on getting work done smarter.

    We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer. And there are some really helpful testing and prototyping tools.

    Glaze

    Rise

    Rise is an intelligent time tracker that helps you maximize your productivity. It’s an excellent solution for freelancers hoping to improve their income.

    Relicx

    Relicx is a testing app that tracks down the UX issues in your product using real user journeys. It’s 10x more effective than beta testing.

    Relicx

    Outerbase

    Outerbase is a GUI for your database. Easily view, edit, and manage all of the data in your database without needing to know SQL.

    Outerbase

    Selldone

    Selldone is an enterprise-grade service for building large-volume ecommerce experiences. It’s no-code, white-labeled, and can handle millions of orders.

    Selldone

    Cakedesk

    Cakedesk is an excellent invoicing app for freelancers. You can send invoices and proposals and build a database of clients.

    Cakedesk

    Roastd

    Roastd is a feedback service that’s not for the faint of heart. You can pay for brutally honest feedback, and although it may hurt, acting on it will improve your conversions.

    Roastd

    Galileo AI

    Galileo AI is a new service that promises to design user interfaces for you. Trained on thousands of designs, it uses AI to create a design based on a text prompt.

    Galileo AI

    Sizzy

    Sizzy is a powerful browser for web development that packs all the tools you need into a single app. You can test different device sizes, debug, and it integrates with lots of devtools.

    Sizzy

    Linke

    Linke is a link manager that lets you create fully branded short links that you can share on social media, your website, or via email. You’ll get notified whenever it’s clicked.

    Linke

    AssemblyAI

    AssemblyAI is a speech recognition API that uses AI to detect speech, transcribe it to text, and understand it. It’s an incredible resource for anyone building customer service apps.

    Assembly AI

    Freelance Brain

    Freelance Brain is an add-on for Notion that helps you manage your freelance business. You can manage clients and projects for a more straightforward work life.

    Freelance Brain

    Glint

    Glint is an excellent free GUI for Git. It allows you to version control your files in a visual manner, so you don’t need to mess around with the command line.

    Glint

    Maya

    Maya is an AI assistant for startups. So instead of spending valuable time hunting through your data for answers, ask Maya and get better answers faster.

    Maya

    PersonaGen

    PersonaGen is a fantastic alternative to spending hours writing personas for user testing. It uses the power of AI to create your personas in seconds.

    PersonaGen
    Categories: Designing, Others Tags:

    Free Download: Budget Planner UI Kit

    March 3rd, 2023 No comments

    Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could turn users off. This freebie is a great starting point for your own designs, either for prototyping or as a sanity check to ensure that you’ve included the essentials.

    This awesome UI kit designed by Premium UI Kits features 28 mobile screens. The designs are based on the onboarding process for a budget planner, but they’re super easy to customize and can easily be transformed into any onboarding or sign-up process.

    The design is in the popular minimal-tech style and features pill-shaped buttons and subtle gradients that make the screens feel both familiar and fresh.

    All of the graphics are 100% vector-based, using customizable symbols for Sketch and Figma users.

    You can use the Budget Planner Mobile UI Kit on your sites for free. Download it here now.

    Categories: Designing, Others Tags:

    3 Essential Design Trends, February 2023

    February 27th, 2023 No comments

    There’s a common theme in this month’s collection of website design trends – typography. All three of these trends showcase popular type elements that seem to be exploding in popularity.

    Here’s what’s trending in design this month.

    1. Focus on Typography

    Admittedly this trend seems a little vague, but we think you’ll know it when you see it. Plenty of projects are being designed with an emphasis on typography.

    This includes big, bold lettering, interesting typefaces, big variances in size or color, tiny type animations, and an overall stripping of strong imagery from the screen. You won’t see many photos or videos here (and if you do, they are probably small).

    After that, almost anything is allowed. And the designs are quite stunning!

    These projects include all kinds of typography, from experimental to bold. (You can even find it in the new typography animation in the new design for this website in the homepage banner.)

    Here are three examples of three very different directions on this website design trend:

    IGZIST combines an oversized slab serif with a handwriting style that takes the whole screen. With a black-and-white aesthetic and red accent, everything has an in-your-face feel. There’s a glitch animation that also layers on top of everything to keep it interesting.

    Contra Bureau combines a too-close-for-comfort headline in “CONTRA” with sideways text, a sub-headline with underlines, and multiple typefaces in a bold red and beige color scheme to make you hang on to every word. Immense contrast in style and size contribute to the effectiveness of this typographic gem.

    Readymag uses an interesting typeface in a color variable animation to make you ready and get your attention. The green-on-white pattern isn’t common and is a bit of a disruptor in itself. The most graphic elements on the screen are the navigation buttons and the brackets for small text elements.

    Readymag

    2. Heroes with Very Little Text

    This typography trend actually includes very little text. Many designers are creating hero headers with almost no text at all aside from simple navigation.

    How does this work? How does a user engage when there isn’t anything to read?

    The images have to be super engaging. And even then, this design style can still be a risk. Look at the examples below; is there enough to make you click or scroll?

    Mathijs Hanenkamp’s portfolio site uses a big photo with a small headline in the bottom left corner. But there’s an interesting top layer with animation that makes you think are little more. Then when you realize it is for a photographer’s portfolio, everything kind of comes together.

    Mathijs HanenKamp

    AB Yachts has no text on the home hero besides the name brand. If you know the company, the video is probably enough to keep you going, but if not, it could be more of a stretch for unfamiliar users to continue engaging.

    AB Yachts

    Edlewerke focuses on an unusual image (there’s also a tiny animation here) and navigation to help you move through the site. It’s visually striking, but is it enough? Tracking analytics on a design like this would definitely hold the answer to that question.

    Edlewerke

    3. Serifs Everywhere

    For designers that came up in the world of print, this website design trend can be a breath of fresh air – serifs everywhere!

    While serifs have become much more common with websites, they still don’t come close to the usage of sans serifs. The right serifs can be beautiful and highly readable.

    They can also be used in various ways to create a design with a nice focus on typography that isn’t the only focus of the design. This trend is more of a middle ground between the two more extreme examples above.

    Momset uses a somewhat larger condensed modern serif for the primary headline in the hero area as well as other headers throughout the design. Color adds an extra element of interest here, and the use of space keeps this typeface readable.

    Momset

    Mbau goes super simple with a full-screen video that rolls behind a simple serif headline that never moves. This design feels elegant and classy, perfect for a travel site. Using “exclusive” in italics almost jumps off the screen because the design pulsates with that feeling.

    Mbau

    Caddis Eye Appliances uses a large serif headline and subheaders balanced by smaller sans serif elements for other text elements. What’s fun about his entire design is that it is about being different – they use the term “nonconformists” – and the serif helps exemplify that mantra visually.

    Caddis Eye Appliances

    Conclusion

    Typography trends are an exciting design element because, depending on your brand – and style guide – you may or may not be able to take advantage of these elements. How do you balance incorporating a trend and maintaining brand identity?

    There’s not always an obvious answer, but many brands do find a way to create just the right elements to keep themselves looking fresh without losing who they are. Look at your brand rules to decide what constraints you have to work within and how you can bend to be both on-brand and on-trend.

    Categories: Designing, Others Tags:

    Free Download: Education Icons

    February 24th, 2023 No comments

    Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important information and improve user experience. With icons, websites become more interesting and easier to navigate.

    These Free Education Icons are designed to help you add visual appeal and emphasize key ideas that complement the content of your website.

    The simple, colorful modern design of these line icons make them perfect for use by students, teachers, and institutions. They’re a fun way to represent education-related topics like mathematics or chemistry. Each icon is supplied in vector format as a .ai and a .svg file, so you can scale them to fit your designs without losing quality.

    Download these Free Education Icons now to add visual interest and bring life to your educational website!

    Categories: Designing, Others Tags:

    15 Best New Fonts, February 2023

    February 20th, 2023 No comments

    The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand experience and a high bounce rate.

    And so, every month, we put together this roundup of the fifteen best new fonts that have caught our eye over the past four weeks. Enjoy!

    Dewey Decimal

    Dewey Decimal is a modern take on the typewriter style of typeface. It’s proportional, with a large x-height and open counters, making it ideal for use on the web.

    First Aid Kit

    First Aid Kit is an interesting take on a typeface because each weight is a different style. It’s a smorgasbord of options that hands you plenty of bang for your buck.

    Vangeda

    Vangeda is a display font that’s perfectly on trend for the Art Nouveau revival that’s been gathering pace since last year. It’s ideal for branding or large print work.

    Mint Grotesk

    Mint Grotesk is a quirky sans serif with an extensive range of options, including stylistic alternatives and tabular figures. It’s a great workhorse and ideal for UI designs.

    Ada

    Ada is a contemporary calligraphic script font based on the Ruq’ah Arabic style. It includes Arabic and Latin characters and has three variations: sharp, flat, and round.

    Sterlington

    Sterlington is an ornate script with numerous flourishes referencing the grandiose style of the Victorian era. It’s crying out to be used on a Sherlock Holmes anthology.

    Vinco

    Vinco is a curvaceous serif with elegant strokes and a subtle organic flourish in letters like a, f, and y that reduces its formality, especially in the bolder weights.

    Marige

    Marige is a chunky serif with minutely flared terminals. Its confident but informal shape is excellent for editorial design or branding work.

    Similar

    Similar is a workhorse sans serif that looks pretty, well, similar to a lot of corporate sans serifs you’ve seen before, except for some lovely details that emphasize the baseline.

    Ravera

    Ravera is a brush script that leans into its hand-drawn look. It’s available in regular or texture, the latter of which adds a nice woodblock print effect for extra grunge.

    Baste

    Baste is a sans serif that was inspired by southern France, reflecting the softness of the shoreline and the edginess of cities like Marseilles.

    Artusi

    Artusi is a delicious serif font that’s inspired by an influential Italian cookbook writer. It’s available as a variable font, and the refined style is carried through all weights.

    Parnaso

    Parnaso is a high-contrast serif with fine details and a solid rhythm. Its italic is lively and playful. It’s ideal for running text, and its display variation is excellent at larger sizes.

    Fitzgerald in Berlin

    Fitzgerald in Berlin is a retro serif with contemporary details. Its shapes verge on the calligraphic, and it’s a solid choice for branding projects that need a touch of heritage.

    Rockers Garage

    Everyone loves a good brush script, and Rockers Garage fits the bill perfectly. Its clear rhythm provides excellent legibility, and the texture is nice and subtle.

    Source

    The post 15 Best New Fonts, February 2023 first appeared on Webdesigner Depot.

    Categories: Designing, Others Tags:

    Unlocking the Power of Design to Help Users Make Smart Decisions

    February 17th, 2023 No comments

    Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it appears, and poor decision-making can lead to user dissatisfaction, decreased sales, and damage to brand value. For this reason, it’s imperative that designers focus on decision-making throughout the entire UX workflow.

    UX, from a decision-making perspective, means focusing on a user’s context and individual needs. How does the immediate decision fit into the user’s broader goals? What is influencing their decision? Do they have enough information to make an informed decision they won’t regret?

    Decision-making can be complex, and it’s made all the more problematic when users don’t have enough information to make a decision. UX designers can address this by communicating all options and potential outcomes and providing visual cues to make decision-making more intuitive.

    Tip 1: Structure Decisions Around The User’s Needs

    A decision structure is a framework within which a user can make a choice. For example, should they keep exploring a site or abandon it? A good decision structure is transparent (meaning that the available options and the consequences of each option are clear) and consistent so that making one decision makes it easier to make the next.

    The mistake that too many designers make is to create a decision structure around a company’s needs rather than the user’s.

    Consider the issue of online flower sales. From a florist’s perspective, an order is received and then dispatched based on the customer’s preferred shipping options. From a company point of view, it makes sense to offer a range of bouquets, followed by the available delivery options. And that is how most e-commerce sites structure the decision-making process.

    However, from the perspective of a person who has forgotten Valentine’s day, what matters most are the delivery options because day-late flowers are worse than gas station flowers. In that case, the shipping options — specifically confirmation that delivery in a specific time frame is possible — should precede product selection.

    You’re more likely to deliver a positive user experience by designing decision structures around a customer’s needs.

    Tip 2: Make Decisions Clear

    Data doesn’t affect human beings in the same way that it affects algorithms, but if designers can communicate data in a way that makes sense to the human brain, we’ll have more information, and we’ll be able to make decisions in a more logical, algorithmic fashion.

    This is where UI design comes into its own. Effective UI design can make sense of complex data with color and hierarchy to highlight data that is critical to the customer’s current task. What designers need to do is constructively editorialize the data.

    One important technique is to focus on context. Presenting data in context makes it easier for a person to comprehend the information being conveyed. For example, if you sell a product at a discount, always present the original price alongside the discounted price, and even better, highlight how much the user is saving.

    Tip 3: Reward Decision-Making

    Human beings are pretty easy to manipulate — hence the prevalence of black-hat UX techniques littering the web. Different chemicals are released into a user’s system when good things happen — which is why gambling machines light up when you put money into them. One of the simplest ways to encourage users to take action is to reward them with positive chemicals in their system each time they do so.

    Because we’re not using black-hat techniques, we don’t want to reward a particular choice — that would be coercive — we want to reward the decision (any decision), no matter how small. Even something as simple as a pretty hover state on a link can reward a user for engaging with the UI and build positive feelings.

    When users feel good about small decisions (like reading more details about a product), they’re more likely to make big decisions (like purchasing the product).

    Tip 4: Repeat Critical Information

    The human brain excels at fast decision-making. This is because it evolved that way as a defense mechanism — the faster you decide something is dangerous, the more likely you are to survive long enough to procreate.

    Unfortunately, the human brain is also finite, and we somehow have to make up for this speed. And so the brain sacrifices memory recall in favor of speed. As a result, we tend to make decisions based on what is in front of us when we make the decision. That’s not to say we don’t rely on experience at all, but the human brain prefers current input over recalled input.

    If you want a user to make an informed decision, make sure that all of the most critical information is in front of them all the time. For instance, if you want to reduce cart abandonment on an e-commerce site, ensure the product list is sufficiently detailed so that the user doesn’t need to rely on the memory of why they chose to add the item to their cart to complete the checkout.

    Tip 5: Boost Confidence With Graceful Error Handling

    Error handling is one of the most critical aspects of UI design because try, as you might, you will never be able to design an interface that a user can’t abuse, misuse, or break. Anyone who has conducted extensive user testing will tell you that users often break things simply to see if they can. They are like infants, testing boundaries to discover where their limits lie.

    And so, if you design a website that handles errors gracefully, you enable users to explore without fear of doing irreparable damage, and they will be far more likely to make a decision.

    It can be as simple as giving the user a way to undo a decision. A simple pop-up that asks, “Are you sure?” Is an excellent way of reassuring a user that their choices won’t have lasting consequences.

    Helping Users Make Smart Decisions

    Decision-making is a complex process — there’s no one-size-fits-all solution. The key to making decision-making easier for your users is to remember that good UX isn’t about forcing decisions; it’s about giving the user the information they need to make an informed decision of their own.

    By structuring decisions around user needs, presenting information clearly, rewarding decision-making, repeating critical information, and handling errors gracefully, you can help users make decisions that benefit both them and your client’s business goals. It all starts with understanding the decision-making process — then it’s a question of finding ways to work within those parameters.

     

    Featured image by storyset on Freepik

    Source

    The post Unlocking the Power of Design to Help Users Make Smart Decisions first appeared on Webdesigner Depot.

    Categories: Designing, Others Tags: