May 3, 2022 Smashing Newsletter: Issue #351
This newsletter issue was sent out to 175,888 subscribers on Tuesday, May 3, 2022.
Editorial
We all love tiny little design tools that make our life slightly easier. In this newsletter, we focus on them — just a few little helpers for cleaning up pictures, dealing with typography, creating accessible color palettes and image upscaling.
Every attendee of the live UX training gets their own badge, too.
If you also love UX and smart design patterns, we have recently launched a Smart Interface Design Patterns, a 10h-video course on interface design and UX. We’ve also just announced Autumn dates for the Interface Design Patterns UX Training — with real-life projects, 1:1 feedback and UX certification.
Not quite your thing? We have plenty of other lovely online workshops lined up as well — on web performance, UX writing, Figma, CSS and effective usability testing, among many others!
This also goes for our upcoming Smashing Conferences this year — we’ve just announced new speakers and topics for San Francisco and Austin, and we’d be so happy to meet you in person, and enjoy some deep and friendly conversations, without distorted pixels and audio issues!
In the meantime though, off we go surveying the land of design tools! Happy reading, everyone!
— Vitaly (@smashingmag)
1. Image Retouching Made Easy
How much time do you spend cleaning up photos in an image editor? Especially removing unwanted objects or text from an image can turn into a real challenge and take up more time as planned if you want to get it right. Luckily, AI is here to help.
A handy tool that retouches images in seconds is Cleanup.pictures. Whether it’s an object, a person, a snippet of text, or a defect you want to remove from the image, all you need to do is drag the image into the browser tool, and Cleanup.pictures will do its magic and reconstruct what was behind the removed part. An alternative tool also worth looking into is Magic Eraser. Neither Cleanup.pictures nor Magic Eraser store data related to your images once the editing process is completed. (cm)
2. Free Material Icons
Do you need some UI icons for your project? Then Google’s Material Symbols might be for you. The collection consolidates over 2,500 glyphs in a single font file with a wide range of design variants — for anything from common UI actions, business, payment, and communication to security, transportation, and activities.
The icons are reduced to their minimal form and shine with a simple, modern, and friendly look. To ensure readability and clarity even at small sizes, they are made up of bold and geometric shapes and share a consistent style. Three different styles and four adjustable variable font styles (fill, weight, grade, and optical size) are available. (cm)
3. A Deep Dive Into Font Features
Layout features, supported languages, unicode support — if you’re looking for a quick and efficient way to find out what your font can do, Roel Nieskens’ Wakamai Fondue is for you.
The tool works right in your browser: Upload a font to it, and you’ll get a detailed overview over its features — from the number of characters and glyphs to more advanced layout features. Sliders let you play around with parameters such as size, weight, width, and style to test the features, and, to make use of them in your project right away, you can download a stylesheet with all the CSS you need. (cm)
4. Brush Up Your Screenshots
Screenshots are everywhere. On product landing pages where they present product features, for example, or illustrating real-world examples in blog posts. Let’s make them a bit more interesting! Pika is here to do just that.
Pika is a browser-based tool that helps you present your screenshots and mockups in the best light. You can add a browser wrapper in light or dark mode around your screenshot and add different backgrounds (with and without noise) and shadows, as well as rounded corners. It’s even possible to select the position of the screenshot on the background. Once you’re happy with the result, you can download the PNG of your brushed up screenshot or copy it to the clipboard. (cm)
5. Upcoming Workshops & Meet-ups
You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Web Performance Masterclass UX
with Harry Roberts. May 3–17 - DevOps Masterclass Dev
with Denys Mishunov. May 16–30 - The Fundamentals of UX Writing UX
Yuval Keshtcher. May 18–26 - UX for Mobile eCommerce Masterclass UX
Rinaldo Ugrina. May 23 – June 6 - Pushing CSS to The Limit Dev
with Amit Sheen. May 25 – June 2 - Jump to all online workshops →
6. Accessible Color Palettes
24 named colors, each one with 6 numbered shades — that’s the base of Reasonable Colors, an open-source system for building accessible, nice-looking color palettes. What makes the system special is not only the fact that colors use straightforward names like rose, red, lime, or cyan, but also the underlying mechanism that makes assessing the contrast between two colors super simple.
The core principle: The contrast between any two shades in the system can be inferred by the difference between their shade numbers. So if you have two shades with a difference of two (let’s say shade-2 and shade-4), for example, the contrast will always be 3:1, and, thus, meet the WCAG AA contrast for large text and icons and graphics. A shade difference of 3 is suitable for WCAG AA-compliant body text and WCAG AAA-compliant large text and a difference of 4 corresponds to WCAG AAA contrast for body text. The contrast rules work across all 24 color sets. Clever! (cm)
7. Testing Color Contrast Ratio
Getting contrast right can be a challenge, especially when you’re handling many different colors. For those instances, Contrast Grid is a fantastic little helper. It lets you test many combos of foreground and background colors for compliance with WCAG 2.0 minimum contrast.
To test background and text colors against each other, enter a list of color values, and Contrast Grid will display them in a grid that shows each color combination as a tile along with its contrast score. To narrow down your search for the best color combination, you can filter the color combinations by contrast levels. There’s also an option to copy the grid’s HTML and CSS for further use. Handy! (cm)
8. Upscale Images Without Quality Loss
We’ve all experienced the situation when we needed to upscale an image but the result was, well, disappointing. Luckily, technology has made a giant leap forward and AI is now available to help us increase image resolution without quality loss. Let’s Enhance, for example, is a tool that does just that.
Based on a neural network that is trained on a huge dataset of images, Let’s Enhance learns typical features of physical objects — bricks on a wall, hair, or skin, for example. After the network recognizes those features on an image, it is able to add extra details based on its general knowledge of the world and, thus, upscale the image up to 16× without losing quality. And if you need an alternative, Ojoy is also a great option to consider. (cm)
9. A Smart And Honest Typeface
Onest is a typeface with a mission. It’s designed for Moldova, a country with six spoken languages and two different writing systems — Latin and Cyrillic — to make communication between the state and the citizen honest and understandable. But no matter where in the world you might be located, the typeface has some smart features that make it interesting for everyone.
A hybrid of geometric and humanistic grotesque, Onest combines capaciousness and legibility, so it saves space without losing readability. With different variations for the same glyphs, Onest can adapt to the text and give the best possible layout for each element in any context — or as its makers put it: “Just the way we use intonation to convey extra meaning to our words, Onest does it with different lettering options.” The typeface comes in seven weights with 315 characters each and is available in TTF and WOFF formats. You can use it for free in personal and commercial projects. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.