Smashing Magazine - #351: Interface Design Tools

With image clean-up tools, free icons, font utilities, accessible color palettes and image upscaling. Issue #351 May 3, 2022 View in the browser 💨

Smashing Newsletter

Hei Smashing Friends,

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.

Video course on Interface Design Patterns
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 6h-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!

SmashingConf San Francisco

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.

Cleanup Pictures

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.

Material Symbols

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)


From our sponsor

Stories From The Blok #7 Frameworks Edition Is Coming Soon!

Stories From The Blok #7 Frameworks Edition Is Coming Soon!
This time we decided to focus on frontend frameworks. Let’s dive into popular, and brand new frameworks! This is the perfect opportunity to learn what the benefits of different frameworks for your headless setup are. Sign up today!


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.

Wakamai Fondue

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

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.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming 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.

Reasonable Colors

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.

Contrast Grid

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)


From our sponsor

Take Your Work For Clients To New Monetary Heights

Take Your Work For Clients To New Monetary Heights
Discover how successful Wix Partner and founder of 120 Design Studio, Marshall Fox, works smart to earn five figures for the client sites he builds. In this video, Marshall covers everything from how to position your business as a premium service provider to adopting a clear marketing message. Watch video →


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.

Let’s Enhance

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 Smart And Honest Typeface

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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


10. New On Smashing Job Board


11. Recent Smashing Articles


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


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#350: Front-End Debugging

Tuesday, April 26, 2022

With memory debugging, terminal tips, debugging strategies, DevTools and debugging tooling. Issue #350 • Apr 26, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A few years back

#349: SVG

Tuesday, April 19, 2022

With SVG masks, SVG Grids, grainy gradients, SVG cut outs, image grids and conversion from bitmap to SVG. Issue #349: SVG • Apr 19, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#348: UX and Interface Design

Tuesday, April 12, 2022

On interface design, accordions, breadcrumbs, contextual menus, motion in UX and design patterns. Issue #348 • Apr 12, 2022 • View in the browser 💨 Smashing Newsletter Tâi-gí Smashing Friends,

#347: Web Performance

Tuesday, April 5, 2022

On Core Web Vitals, 3rd-Party-Scripts, B/F Cache, Priority Hints and responsive images preloading. Issue #347: Web Performance • Apr 5, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#346: UX and Interface Design

Tuesday, March 29, 2022

How to prevent errors, measure usability, dive into internationalization and User Research Report 2022. Issue #346 • Mar 29, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A

Lessons from PM & UXR collaboration

Monday, May 23, 2022

Part 2: What we learned from working on a new product project together ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤩 Magnificent Landing Page Designs + 🏆 Challenge Updates

Monday, May 23, 2022

Your Freshest UpLabs Design News Is Here! 🙌 First off, congratulations to Arjun Makwana, the winner of our latest 🛒 Ebay Website Redesign Challenge! Next off, remember that the second week to vote in

Step Inside Ken Fulk’s Cinematic Universe

Monday, May 23, 2022

Plus, 6 new glass collections to know View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Confectionery, Food, Sweets, and Plant GLASS IS RED-HOT: HERE

An Op-Art Loft in Los Angeles

Monday, May 23, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: Lane Barden Architect, critic,

Into the Archive: California Dreaming

Monday, May 23, 2022

Plus, everything you need to know about designing an ADU (image) Architectural Digest AD PRO Logo Into the Archive: California Dreaming The June 2022 issue of AD is all about families. But from cover

Button Component, Line Length, Design Thinking, Glenn Davis, Keyboard Accordion

Monday, May 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 23 2022 Building a button component web.dev A foundational

✏ Exciting New Tools for Designers May 2022, and more…

Sunday, May 22, 2022

Your Inbox Needs This Clever Business Newsletter [ad] MORNINGBREW.COM Exciting New Tools for Designers, May 2022 WEBDESIGNERDEPOT.COM COMMENTS HTMLrev - 50 Beautiful HTML Landing Page Templates Library

Invoke fun at work

Sunday, May 22, 2022

Issue 93: Fun and play leads to sustainable creativity ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The 7 Design Trends All the Spring Markets Agreed On

Friday, May 20, 2022

Plus, Victor Glemaud teams up with Schumacher, Hermès opens in Austin, and more news View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Shop, Flooring,

The Games Table Is Having a Moment—And We're All In

Friday, May 20, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and