https://blog.logrocket.com/how-to-use-svgs-in-react/
https://css-tricks.com/creating-ui-components-in-svg/
I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you. You can accomplish some of the same effects in CSS, but it’s a little more particular to get positioning just right, especially across viewports and for responsive development.
What’s special about SVG is that all the positioning is based on a coordinate system, a little like the game Battleship. That means deciding where everything goes and how it’s drawn, as well as how it’s relative to each other, can be really straightforward to reason about. CSS positioning is for layout, which is great because you have things that correspond to one another in terms of the flow of the document. This otherwise positive trait is harder to work with if you’re making a component that’s very particular, with overlapping and precisely placed elements.
Truly, once you learn SVG, you can draw anything, and have it scale on any device. Even this very site uses SVG for custom UI elements, such as my avatar, above (meta!).
That little half circle below the author image is just SVG markup.
We won’t cover everything about SVGs in this post (you can learn some of those fundamentals here, here, here and here), but in order to illustrate the possibilities that SVG opens up for UI component development, let’s talk through one particular use case and break down how we would think about building something custom.
The timeline task list component
Recently, I was working on a project with my team at Netlify. We wanted to show the viewer which video in a series of videos in a course they were currently watching. In other words, we wanted to make some sort of thing that’s like a todo list, but shows overall progress as items are completed. (We made a free space-themed learning platform and it’s hella cool. Yes, I said hella.)
Here’s how that looks:
So how would we go about this? I’ll show an example in both Vue and React so that you can see how it might work in both frameworks.
The Vue version
We decided to make the platform in Next.js for dogfooding purposes (i.e. trying out our own Next on Netlify build plugin), but I’m more fluent in Vue so I wrote the initial prototype in Vue and ported it over to React.
Here is the full CodePen demo:
Let’s walk through this code a bit. First off, this is a single file component (SFC), so the template HTML, reactive script, and scoped styles are all encapsulated in this one file.
We’ll store some dummy tasks in data, including whether each task is completed or not. We’ll also make a method we can call on a click directive so that we can toggle whether the state is done or not.
<script>
export default {
data() {
return {
tasks: [
{
name: 'thing',
done: false
},
// ...
]
};
},
methods: {
selectThis(index) {
this.tasks[index].done = !this.tasks[index].done
}
}
};
</script>
Now, what we want to do is create an SVG that has a flexible viewBox depending on the amount of elements. We also want to tell screen readers that this a presentational element and that we will provide a title with a unique id of timeline. (Get more information on creating accessible SVGs.)
<template>
<div id="app">
<div>
<svg :viewBox="`0 0 30 ${tasks.length * 50}`"
xmlns="http://www.w3.org/2000/svg"
width="30"
stroke="currentColor"
fill="white"
aria-labelledby="timeline"
role="presentation">
<title id="timeline">timeline element</title>
<!-- ... -->
</svg>
</div>
</div>
</template>
The stroke is set to currentColor to allow for some flexibility — if we want to reuse the component in multiple places, it will inherit whatever color is used on the encapsulating div.
Next, inside the SVG, we want to create a vertical line that’s the length of the task list. Lines are fairly straightforward. We have x1 and x2 values (where the line is plotted on the x-axis), and similarly, y1 and y2.
<line x1="10" x2="10" :y1="num2" :y2="tasks.length * num1 - num2" />
The x-axis stays consistently at 10 because we’re drawing a line downward rather than left-to-right. We’ll store two numbers in data: the amount we want our spacing to be, which will be num1, and the amount we want our margin to be, which will be num2.
data() {
return {
num1: 32,
num2: 15,
// ...
}
}
The y-axis starts with num2, which is subtracted from the end, as well as the margin. The tasks.length is multiplied by the spacing, which is num1.
Now, we’ll need the circles that lie on the line. Each circle is an indicator for whether a task has been completed or not. We’ll need one circle for each task, so we’ll use v-for with a unique key, which is the index (and is safe to use here as they will never reorder). We’ll connect the click directive with our method and pass in the index as a param as well.
CIrcles in SVG are made up of three attributes. The middle of the circle is plotted at cx and cy, and then we draw a radius with r. Like the line, cx starts at 10. The radius is 4 because that’s what’s readable at this scale. cy will be spaced like the line: index times the spacing (num1), plus the margin (num2).
Finally, we’ll put use a ternary to set the fill. If the task is done, it will be filled with currentColor. If not, it will be filled with white (or whatever the background is). This could be filled with a prop that gets passed in the background, for instance, where you have light and dark circles.
<circle
@click="selectThis(i)"
v-for="(task, i) in tasks"
:key="task.name"
cx="10"
r="4"
:cy="i * num1 + num2"
:fill="task.done ? 'currentColor' : 'white'"
class="select"/>
Finally, we are using CSS grid to align a div with the names of tasks. This is laid out much in the same way, where we’re looping through the tasks, and are also tied to that same click event to toggle the done state.
<template>
<div>
<div
@click="selectThis(i)"
v-for="(task, i) in tasks"
:key="task.name"
class="select">
{{ task.name }}
</div>
</div>
</template>
The React version
Here is where we ended up with the React version. We’re working towards open sourcing this so that you can see the full code and its history. Here are a few modifications:
- We’re using CSS modules rather than the SCFs in Vue
- We’re importing the Next.js link, so that rather than toggling a “done” state, we’re taking a user to a dynamic page in Next.js
- The tasks we’re using are actually stages of the course —or “Mission” as we call them — which are passed in here rather than held by the component.
Most of the other functionality is the same 🙂
import styles from './MissionTracker.module.css';
import React, { useState } from 'react';
import Link from 'next/link';
function MissionTracker({ currentMission, currentStage, stages }) {
const [tasks, setTasks] = useState([...stages]);
const num1 = 32;
const num2 = 15;
const updateDoneTasks = (index) => () => {
let tasksCopy = [...tasks];
tasksCopy[index].done = !tasksCopy[index].done;
setTasks(tasksCopy);
};
const taskTextStyles = (task) => {
const baseStyles = `${styles['tracker-select']} ${styles['task-label']}`;
if (currentStage === task.slug.current) {
return baseStyles + ` ${styles['is-current-task']}`;
} else {
return baseStyles;
}
};
return (
<div className={styles.container}>
<section>
{tasks.map((task, index) => (
<div
key={`mt-${task.slug}-${index}`}
className={taskTextStyles(task)}
>
<Link href={`/learn/${currentMission}/${task.slug.current}`}>
{task.title}
</Link>
</div>
))}
</section>
<section>
<svg
viewBox={`0 0 30 ${tasks.length * 50}`}
className={styles['tracker-svg']}
xmlns="http://www.w3.org/2000/svg"
width="30"
stroke="currentColor"
fill="white"
aria-labelledby="timeline"
role="presentation"
>
<title id="timeline">timeline element</title>
<line x1="10" x2="10" y1={num2} y2={tasks.length * num1 - num2} />
{tasks.map((task, index) => (
<circle
key={`mt-circle-${task.name}-${index}`}
onClick={updateDoneTasks(index)}
cx="10"
r="4"
cy={index * +num1 + +num2}
fill={
task.slug.current === currentStage ? 'currentColor' : 'black'
}
className={styles['tracker-select']}
/>
))}
</svg>
</section>
</div>
);
}
export default MissionTracker;
Final version
You can see the final working version here:
This component is flexible enough to accommodate lists small and large, multiple browsers, and responsive sizing. It also allows the user to have better understanding of where they are in their progress in the course.
But this is just one component. You can make any number of UI elements: knobs, controls, progress indicators, loaders… the sky’s the limit. You can style them with CSS, or inline styles, you can have them update based on props, on context, on reactive data, the sky’s the limit! I hope this opens some doors on how you yourself can develop more engaging UI elements for the web.
<hr class="hrstyle12">
https://medium.com/sketch-app-sources/designing-for-code-svgs-496050dae1a6
Intro 👋
If you’re looking to add visual interest or interactivity to a website or webapp, SVGs are a fantastic option for visuals. Since they’re vector-based, you get unlimited scalability and clarity compared to raster and bitmap images. And because they’re made up of code, you can manipulate every single shape with CSS — add animations, interactions, or dynamically change the color scheme—something that you cannot do with icon fonts. However, as with any method of coding, there are many things to watch out for to avoid making writing or maintaining code any harder than it has to be. This article aims to cover how that applies to creating SVGs that are intended to be animated.
Who is this article for?
Web, UX, or UI designers who want to create animated SVG graphics (icons, illustrations, etc.) for the web.
What will you get out of this article?
A step-by-step guide on what to do with your SVG graphics after you’ve designed them and before you start animating them with code. Nothing in this guide is required to add animations to SVGs. But it will make your life (or the life of whoever is adding the animations) much much easier, as well as avoid creating potential bugs or code conflicts.
Why SVGs?
Need some selling points to your manager or developer on why you should SVGs? I’ve got a shortlist here.
Step By Step Instructions 📝
If you haven’t created your graphic, yet, go ahead and read through section 2 (Clean up your design), as some of those steps can be done during the design phase to save you time. I personally recommend working in Sketch, especially if you’re creating icons, because it’s specifically intended for creating web graphics. Some of the steps in this guide are also easier to perform in Sketch. But if you’re making more complex illustrations, you may find it better to design in Illustrator. If you’re using a design tool other than Sketch or Illustrator, you’re probably fine, but may run into questions not anticipated in this guide. You can also try opening your design in Sketch if saved as an SVG.
Note: These steps are simply advisories for best practices. They are not required. Furthermore, if you’re not animating individual layers inside the SVG — for eample, basic hover states such as scale or rotate that would also work on a JPEG or PNG — this guide is not necessary and will have no affect on your animation.
1 ) Clean up your design
This section focuses on things you can do in your design software to help clean things up and avoid issues later on.
Setup your file
Sketch: If you’re working in Sketch, either create a new artboard with the graphic you want to export or create a new file with just the graphic. Either way, make sure you keep a copy of the original graphic in case you want to change the design later.
Illustrator: If you’re working in Illustrator, it’s best to make sure the only layers in your file are part of the graphic you plan to export. Keep a copy of the original file in case you want to change the design later.
Vectorize strokes
Web browsers sometimes have trouble rendering strokes that are aligned to the inside or outside of their shapes. I recommend either re-constructing those lines to be center-aligned or flattening them to solid shapes to avoid potential rendering issues in the browser. Or, to make things even simpler, any strokes that you do not plan to animate, go ahead and flatten to filled shapes just to be safe. If you do leave strokes aligned to the inside or outside, make sure you do thorough browser testing once it’s been exported to SVG. Tip: Check out this great tutorial from CSS Tricks on SVG line animation.
Outline text
Rendering live text inside an SVG is possible, but requires the font being made available in the web page where the SVG is being displayed. So unless you need the text to be actual text and you’re able to serve up the font file it needs, you’ll need to convert it to outlines.
Add a container
If you select your artboard and export it as an SVG, design software usually does not honor empty white space and crops it out. So if your graphic needs white space around it, add a transparent rectangle in the back to enforce a bounding box.
Round to nearest whole pixel
This is more important the smaller your graphic is. Keep in mind that you’re designing for the screen, which means each pixel is a perfect sqaure. If you have any straight lines or edges that don’t sit exactly between pixel grid lines, that’s going to result in a fuzzy line, especially on screens with lower pixel density (non-retina). Your graphics will look more crispy and clear across all devices if they’re pixel-perfect, especially if adding animation causes your viewer to pay more attention to the deails. If your design software offers a pixel preview, you can use that to test the results.
Pixel grid view of a 1px horizontal line
Check rounded corners
Let’s say you have a rectangle that’s 10px tall with rounded corners set all the way up to 100px. A radius more than a 5px (half the rectangle’s height) won’t actually look any different, just yet. But if the height on the rectangle increases once it’s been animated, the border radius will also grow if it can. So just keep in mind that if you want your border radius to stay fixed, make sure it’s set to exactly the size you want before exporting your SVG. As of this writing, Sketch v 50.2 automatically reduces the border radius on a shape if you apply a radius beyond what it’s capable of rendering, unless you override it in the text field. So if you’re using Sketch, you may be able to ignore this step entirely. Tip: You can also override a border radius with CSS.
Comparing border radius (rounded corners)
Check for raster images
If you have any raster or bitmap images inside your graphic, those can be embedded or linked. Embedded images get converted to Base64 code when saved/exported. Linked images (an option in Adobe Illustrator) requires that you store the image outside of the SVG somewhere, which can allow the image to be updated independently of the SVG code. If you’re working with a developer, just be sure to check in with them and decide which method is most appropriate for your situation.
Limit groups
Using groups can be helpful in keeping your design files organized and easy to edit later. But when applying animation, simplifying your layer structure can help you focus on just the few parts of your graphic you want to animate. Additionally, for every group in your file, there are 2 extra lines of SVG code. So keep things simple by reducing the number of groups to the essentials that you plan on animating.
Limit layer names
When your SVG gets exported, all group and layer names will be converted to id tags. And chances are you have a ton of layers with pretty generic names. For example if you duplicated an oval multiple times, you may have something like “Oval 1”, “Oval 1 Copy”, “Oval 1 Copy 2”, etc…Most likely, those names aren’t going to be helpful to you at all and will be a nightmare to get rid of in the code. I’ll explain more on why they would need to be removed under Clean up ID tags, down below. For now, here’s what you can do in your design file to help make the code far more manageable:
Imagine all the layer names in your file disappeared and you only restored the most important layer names needed in order to navigate your file for applying the animations you have in mind. Which ones would you chose? Rename all non-essential layers to the same thing. For the purposes of this exercise, rename these layers to “#remove#” just because it’s super unique. This will save you a ton of time, later. And if you’re using Sketch, you can make this even faster by using the Rename It plugin for bulk renaming layers in a flash!
Separate responsive layers
I’ll go more in depth on responsive SVGs in another article. But here’s the gist: to show different versions of your graphic under different situations, like screen sizes or hover states, separate those versions into different top-level groups in your design file. For example, your main groups might be named “Mobile”, “Tablet”, and “Desktop” or “Default” and “Hover”.
Export/Save your SVG
You’ve cleaned up your design file! Good job 👏. It’s time to export it.
Sketch: If you’re using Sketch, select either your graphic or the artboard it’s sitting on and use Sketch’s Export menu in the bottom-right of the window. Your settings should look like the image, below. Click the “Export…” button and select where you want it to be saved. That’s it!
SVG export settings in Sketch
Illustrator: If you’re using Illustrator, make sure your file is clear of anything you don’t want exported. Select File → Export… from the main menu. After you select where you want it to be saved and hit Export, you’ll see an additional menu:
Here are my recommended settings if you’re going to be animating the SVG. If you want to learn more about these settings, Adobe has the details here. When you’re done, hit OK and you’re all set.
SVG export settings in Adobe Illustrator
Test your SVG
Now that your SVG has been exported, open it in your web browser to make sure everything looks good. If you made responsive layers, it’s going to look a little funky for the moment since they’re all going to overlap.
2) Clean up the code
You’ve been a real trooper, so far. You did a bunch of work cleaning up your design file and got it exported to a slick SVG that’s almost ready to be animated. Hang in there! There’s not too much more to go!
Open the SVG you just exported in a code editor. If you don’t have one, check out Atom, which is what I like to use. We’ll walk through how you can clean up the SVG code so that when you get started with adding animation code, you’ll have a clean and tidy file that’s easier to navigate.
Tip: After each step, open the SVG in your web browser to make sure everything still looks okay just in case something goes wrong. If you made responsive layers, go ahead and comment out the non-default layers so you can see what your graphic should look like more clearly.
Remove unnecessary tags
Design software tends to add extra code that you won’t need in your file. Here are some things to look for that can be deleted:
XML tags:
<?xml version="1.0" encoding="UTF-8"?>
Auto-generated comments, titles, and description tags:
<! — Generator: Sketch — http://www.bohemiancoding.com/sketch -->
<title>Artboard</title>
<desc>Created with Sketch.</desc>
Clean up ID tags
All group and layer names appear as id tags in the code. To avoid CSS conflicts, IDs should be converted to classes or simply removed if they’re not going to be used. For reference, these are examples of a circle with an id vs. class vs. comment:
<circle id="Dot" fill="#D8D8D8" cx="20" cy="10" r="41"></circle><circle class="Dot" fill="#D8D8D8" cx="20" cy="10" r="41"></circle><!-- Dot -->
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
Back in the Limit Layer Names step, I recommened that you rename a bunch of layers in your design file to “#remove#”. If you did that, you can now bulk remove the IDs those turned into by using your code editor’s find and replace tool. In the find field, type id="#remove#" and leave the replace field blank. If picked a different layer name, then type between the parentheses instead.
Now that all the extraneous IDs are gone, you can focus on the IDs that are left. Again, these should be converted to classes unless you have a specific reason to use an ID. To change each ID to a class, use find and replace again, but find id= and replace with class=. Or you can manually change them if you want to leave some as IDs. I recommend going one step further to make sure your ID and Class names are unique. I like using something relative to the specific SVG, like this:
<svg id="SVG-logo">
<g class="SVG-logo-top">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
<g class="SVG-logo-bottom">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
</svg>
That way I know for sure it’s not going to conflict with anything else in the code where the SVG might be used.
Another handy thing you can to do make your code easier to navigate is to add comments above main sections of your SVG, like above groups. For example:
<svg id="SVG-logo">
<!-- Top -->
<g class="SVG-logo-top">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
<!-- Bottom -->
<g class="SVG-logo-bottom">
<circle fill="#D8D8D8" cx="20" cy="10" r="41"></circle>
</g>
</svg>
FYI: Those “<g>” tags in your code are your layer groups.
Organize responsive versions
If you made responsive layer groups in your design file, then you’re going to want to add some CSS to your SVG by creating a “style” tag inside your SVG:
<svg id="SVG-logo">
<style>
// Add your responsive CSS here
</style>
<g class="mobile">…</g>
<g class="tablet">…</g>
<g class="desktop">…</g>
</svg>
For now, just add some basic CSS to hide anything that shouldn’t show by default. Then you’ll be ready to preview your file in a web browser and make sure things are looking good. More on responsive SVGs coming soon. Stay tuned.
Save your file!
Save your file and give yourself 2 big pats on the back because you just completed a ton of really picky file prep!
START ANIMATING!
Now that your SVG is exported and cleaned, the real fun starts…adding animation! If you’re interested in another how-to with some tips, tricks, and examples, stay tuned. I’ll be posting another article on SVG animation, where we’ll delve into applying CSS animation into our beauiful new vector graphics. Get excited.
The best collection of articles, tips, tutorials, and…
Follow
216
Related
<hr class="hrstyle14">
https://uxplanet.org/next-best-action-a-simple-model-for-user-engagement-495e7c4dbd64
“Next Best Action” — a simple way to ensure user engagement
Apr 15, 2020 · 6 min read
This is going to seem incredibly basic, but if everyone were doing it, the world would be a much better… user experience.
I was standing in an
They had a wall of design inspiration, a wall of printed out, finished UI screens and a several freelancers sitting in front of huge screens cranking out Things in Sketch.
They walked me through the work on the wall.
Here is the sign up screen…
and here is the home screen…
and here is a content page…
This went on for some time (and I bit my tongue and didn’t point out that the whole thing was inaccessible) until finally I asked —
So what does the user do here*?*
Silence.
So if they click this*, where do they go?*
Silence.
So what if they leave *at this point* because there’s no clear CTA?
Pause…
Oh, we haven’t though that through yet.
Funnily enough, I wasn’t invited back. Also the website failed post-launch.
So what was the problem here?
Well, apart from clearly not bothering with any kind of Information Architecture for this project, and not basing anything on any actual user needs (beyond their own and those of the brand manager) they had failed to create any kind of Next Best Action strategy.
What is “Next Best Action”?
The fundamental underpinning of everything that is “UX” is asking questions. Asking questions of users, of our designs, of each other and of ourselves.
For every screen, every interface and every experience we should be asking —
Why are we doing this?
What are we telling/showing the user?
What do we want them to do with it?
What is the *primary action* we want them to take?
Have we successfully communicated that?
If this is not something they want to do, then what is the Next Best Action*?*
If you’re not asking questions, then you’re not doing UX work. And if someone determinedly doesn’t want you asking questions, just walk away and let them screw it up on their own, as far away from you as possible.
Example: page-level ‘Next Best Action’
In this example, you see there is a primary action — it is super easy to see what the main purpose of this page is. This is a product page. We invite you to buy the product.
And yes, in an ideal world the user would have done all their research, fallen in love with your product (and your website) and have their credit card ready to go.
But what if they’re not ready?
If you’ve asked them too early and they’re not ready, you have to give users a way out — without leaving; a Next Best Action that is still sustained engagement, but with lower commitment.
Maybe they want to see and compare more products?
Maybe they want to sign up to hear about offers and other products like this?
You can’t know for sure what they want or what their mindset is at that moment (again, no such thing as psychic UX), but if you’ve gathered accurate stakeholder requirements for your project, then you know what you want your users to do, then you can hypothesise what kind of CTA hierarchy you could use.
Equally, if you’ve done upfront user research (‘course you have) then you understand users’ mental models, expectations and decision-making processes.
Example: IA-level ‘Next Best Action’
Next Best Action doesn’t only effect screen-level design. The Next Best Action strategy should be something that is defined early on during the project’s Define stage, because it’s where IA meets content meets user journeys.
If you understand your users’ mental models (because you’ve done your user research), and the task they need to accomplish, then you should be mapping task flows and user journeys along a decision-making process.
Your content therefore should be structured along these flows to aid decision-making.
Therefore all you need to do is add a CTA strategy on top of your existing work. Here’s a really basic example of a three-tier eCommerce flow, with each screen’s Next Best Action mapped out.
In each case, we are taking the user from the highest level of commitment (what we want them to do) all the way down to the minimum low-commitment behaviour (what we’d be happy with, if we can’t get them to do the thing above and the alternative is leave the product) on each screen.
What are the benefits of doing this?
As a designer receiving this kind of IA documentation you now understand at a page level — what we are asking the user to do, and in which order. This should influence your page hierarchy, messaging hierarchy, give your UX writers a good sense of direction and ultimately communicate different levels of decision commitment to the users so that they don’t run away from your product.
You also understand the different tasks and options we are presenting across the user journey, what design patterns might facilitate that, and how we might support the user’s decision-making, all the way down to the way we need to build our analytics implementation and tracking to validate design performance.
What I was seeing in the (true) story I outlined at the beginning of this post was a team that had not considered any of this at all, and were simply assuming that the user would press “next” on every screen until they had given the company all their data and all their money.
Not terribly realistic. And, as it turned out, product design suicide.
UX Designers are allowed to think like strategists
Again, thinking strategically is not only the remit of UX strategists and Information Architects. Those designing at a screen level should also be involved in (or at least have a thorough understanding of) decision-engineering and content strategy, otherwise the overall UX strategy and business objectives of your product are unlikely to be delivered through your design solutions.
Churning out screens is not designing
It’s no fun being at the production end of UX design. It can feel productive (as the word suggests) but it can often lead to large amounts of disconnected wrongness getting designed and shipped to users.
When briefed on a project, ask for the IA and content strategy work. If it’s not been done — do it. (Or ask annoying questions until it is done).
And when designing at a screen level ask yourself (and anyone else around you, and the users!) the following:
- What is the primary action communicated to the user by this screen
- If the user doesn’t perform the primary action, what else can they do or where else can they go rather than leave this product
- How can I, through my design work, make it completely clear to the user, which is which.
In short think. So the users don’t have to. Then design.
<hr class="hrstyle4">
https://blog.prototypr.io/colors-in-design-systems-7d6d02eca2a8
Creating Your Design System from scratch is never done overnight. You already prepared for building your UI Library by reading how others do it, seeing some samples & picking the right tool? Now you are ready to open Figma or Sketch and start to play… with Colors!
This is the series of articles helping you to create your own Design System UI Library, previous parts:
Colors are the most important (next to Typography), when it comes to creating a Design System. Your Graphical User Interface may not have icons, panels, pictures, but it surely contains some colors & text. That’s why picking the right set of tones is very important.
Naming Convention
Picking the right naming convention is the first thing you should do. It should be done before defining colors and the number of tones. Why? Here is the explanation.
Color names in the Design System should reflect their purpose. That is why your colors have to be named like: Primary, Secondary or Tertiary instead of Red, Purple, Blue. This will give you more flexibility, and even if your project goes through rebranding, the color names will stay the same in the UI Library. Prepare the following names:
- Primary — usually the main brand color
- Secondary — may be optional)
- Tertiary — may be optional)
- Success — for the accomplished goals and other successful operations
- Warning — use it when you have to warn a user
- Error — as the name suggests, elements displaying Error should use this color
- Neutral — for all kinds of grayish elements
- White & Black– white & black are always these pure colors that never changes.
Ok, so you have your base colors. But to ensure good flexibility and accessibility, your colors have to include more than one tone. You have to create tints & shades.
For these variations, I recommend following naming convention:
For base (default) color use name “500”, for lighter tones use “400”, “300”, “200” and “100”. For shades use bigger numbers like “600”, “700” and so on.
You will end up with following convention:
[Color name] / [Tone]
Examples of names:
- Primary/500
- Success/100
- Warning/300
- Secondary/600
- Neutral/700
Why should you consider picking these numbers as color tone names? Naming tones by numbers is simple, easily understandable & you may expand it in the future easily.
Imagine if you would have to name your color “Secondary light lighter lighter” — this would be hard to manage! 😉
Color Naming Convention
When you design in Figma or Sketch, I recommend adding “/” after the color name. Thanks to this, your tones will be gathered under one group.
How many tones of colors Design System need?
Actually, there is no straightforward answer. Some tiny projects for the landing page may need only 1 (base) tone. Some may require only 3 tones. However, to have good comfort of designing solution I recommend you to have at least 5 colors, one as a base, two as lighter tones and two for shades.
However, if you would like to have a very flexible design system strive for 8 or 9 tones for every color. Just like I did in my design system that I use to kick off every new project quickly.
How to set the right tone for the color
Many designers struggle with this task. If you would like to know my own technique that allows me to create an attractive looking palette, here is the short answer:
I switch my design tool color picker to HSB. Then I take the base color (for example: “Primary/500”). If I want to make the lighter color, I increase B value and decrease S (which stands for Saturation).
Creating Lighter Tones
For shades, I use the same technique, but the direction is opposite. B (Brightness) goes lower, and S is increased. More saturated dark tones look much better.
Creating Darker Tones
Obviously, I add some little tweaks to it, especially in H (Hue) value. For example, I want to make darker tones of purple more blueish, so the Hue goes a little in that direction with every darker tone. This technique creates nice looking gradient across the tones.
I added lots of tips on colors in my practical guide.
Do you need more colors?
As mentioned above, colors & tones are the absolute minimum for the Design System.
If your project will include badges for social media or sell products on eCommerce platforms, you may need to include also the color of their brands in your Design System to keep them consistent across your Library.
There are lots of modern gradients around the web in multiple designs. They also may be included in the Design System. When it comes to the naming of your gradients, you may be more creative and choose names like “Mint Forrest” or “Warm Sunshine”. Names like this will be better to remember than just 2 or 3 Hex codes that create the mood of the specific gradient.
Are you in a rush?
If you do not have time to play with separate tones, you may use one of the generators like Tint & Shade Generator. The final results are always good. However, for a truly excellent color palette, it is always good to adjust it on your own.
Neutrals — the most important ones
Your design may not include blue color, may not even include green, but it will surely include neutral colors. When It comes to black & white, I like to keep them as pure tones. However, grays are a bit different…
If you want to create gray tones, I recommend you experiment with adding some color to gray, a little bit of blue may give outstanding results. Try to avoid pure gray colors! They rarely occur in nature.
Cold gray looks better, than pure one
To sum it up
The first thing to do when you start creating Design Systems UI Library is to set proper colors that establish a foundation of shared styles. When it comes to the naming convention — think of the purpose of the specific color and plan for lots of additional tones.
You should also pay more attention to grays. These neutrals are more important than you may think!
Good luck with your Design System!
If you would like to level up your UI Design skills, my upcoming book may interest you — 🔥 UI Design Tactics. 100 Practical tips. Grab a free chapter.
Boost your design workflow in Figma & Sketch: check out the🚀 Design Starter Kit and 🏎 User Flow Kit that I am creating for you. You may also read more of my free ✍️ UI Design Tutorials.