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.

Article

on

Jan 11, 2022

Adding Vite to Your Existing Web App

learning react

Adam Rackis

Article

on

Jan 18, 2022

Making a Site Work Offline Using the VitePWA Plugin

learning react

Adam Rackis

Article

on

Jan 12, 2022

Parcel CSS: A New CSS Parser, Transformer, and Minifier

learning react

Chris Coyier

Article

on

Apr 25, 2019

Using Parcel as a Bundler for React Applications

learning react

Kingsley Silas

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.

Article

on

Oct 23, 2019

Demonstrating Reusable React Components in a Form

learning react

Kingsley Silas

Article

on

Jun 7, 2017

I Learned How to be Productive in React in a Week and You Can, Too

learning react

Sarah Drasner

Article

on

Aug 31, 2018

Props and PropTypes in React

learning react

Kingsley Silas

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.

Article

on

Aug 31, 2018

Props and PropTypes in React

learning react

Kingsley Silas

Article

on

Mar 27, 2018

Putting Things in Context With React

learning react

Neal Fennimore

Article

on

Nov 16, 2018

An Overview of Render Props in React

learning react

Kingsley Silas

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.

Article

on

Jul 6, 2019

Getting to Know the useReducer React Hook

learning react

Kingsley Silas

Article

on

May 1, 2020

Intro to React Hooks

learning react

Kingsley Silas

Article

on

Jul 15, 2022

React Hooks: The Deep Cuts

learning react

Blessing Ene Anyebe

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.

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:

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.

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);

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

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.

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:

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.

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

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;
}

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

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.

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.

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.

Cakedesk

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.