Design Tools and Tutorials posts

The Toptal Design Blog is a hub for advanced design studies by professional designers in the Toptal network on all facets of digital design, ranging from detailed design tutorials to in-depth coverage of new design trends, techniques, and technologies.
Michael Abehsera
Free eBooks All Designers Should Read

A picture may be worth a thousand words, but a book contains that and more. To improve your design skills and stay in line with market trends and needs, you need to be continuously learning. This article reviews 19 free ebooks written to help designers grow as professionals and creatives.

Continue reading →
Michael Abehsera
The Gap Between Developers and Designers is Disappearing

In the not-so-distant past, completing a design according to a designer’s vision was a nightmare. There was a huge gap (or cold war) between developers and designers; now, that war is finally coming to an end.

In this article, Toptal lead design editor Michael Abehsera talks about the prototyping tools that are spearheading the disappearing gap between design and development.

Continue reading →
Tidjane Tall
How to Create Custom Loading Animations to Decrease Bounce Rates

You probably wouldn’t stare at a white screen on a site or app for more than a few seconds without a page load status or time indicator. A well-crafted loading animation helps you stay engaged while you wait. Toptal Design Editor Tidjane Tall will show you how Slack, Trello, and Flickr loading animations can be done with ease. You’ll be able to apply what you learn to create your own branded loading animation from scratch.

Continue reading →
Tidjane Tall
A Step-by-step Guide to UI Animation with Principle and Sketch

Interfaces that have animations and transitions provide a better UX for app users, and stimulate user engagement. It’s becoming increasingly important to understand how to add motion to your designs, which is why we wrote today’s tutorial.

In it, Toptal Design Editor Tidjane Tall demonstrates how to craft effective UI animation techniques, using Principle for Mac, in a series of short videos.

Continue reading →
Tidjane Tall
A Step-by-step Guide to Designing Custom Illustrations Without Any Drawing Skills

Many designers shy away from making their own custom illustrations for the fear that they don’t have conventional drawing skills. What if we could show you how to make your own great custom illustrations, no sketching skills required? In this article, Toptal Design Blog Editor Tidjane Tall guides us through three step-by-step illustrations each with different styles.

Continue reading →
Lauren Holliday
The Best Design Articles of 2016

Today, in a world where only three percent of adults spend time learning each day, reading is a competitive advantage.

To jumpstart your learning in 2017, we’ve curated the absolute best design links published around the web in 2016. You’re welcome.

Continue reading →
Nick Vyhouski
Everything You Need to Know about UX Sketching

UX sketching is a crucial, yet often overlooked, aspect of user-experience design. Sketching is a very efficient way of communicating design ideas while allowing designers to try out a multitude of options and iterate them before settling on one.

In this post, Toptal Freelance Designer Nick Vyhouski explains UX sketching step by step and outlines a range of tips and techniques used by leading designers.

Continue reading →
Danielle Reid
Presenting Design Work: The Right Way

Designers spend much of their careers developing the ability to beautifully communicate the intentions of their products. Yet, some designers fail to direct these same skills towards the communication of their own work. The ability to present your design work is fundamental for any designer, as it is often the first step to landing a job with any new client or agency.

In this article, Toptal Director of Design Danielle Reid and Toptal Design Blog Editor Kent Mundle discuss what designers can do to present their work in the most effective ways. Give the products that you make some justice, and use these tips to effectively present your portfolio.

Continue reading →
Alex Gurevich
Sketch vs. Photoshop: Is It Time To Switch From Photoshop To Sketch?

Sketch promises a faster workflow and greater ease-of-use than its counterparts. You can think of Sketch as Illustrator with some Photoshop stitched together, but that’s only part of the story. Many Adobe features that you don’t use 90 percent of the time have been stripped out, giving us a streamlined tool that is designed to quickly prototype everything from simple wireframes to complex mockups.

In this article, Toptal freelance designer Alex Gurevich takes a closer look at the Sketch vs. Photoshop dilemma, explaining which has the advantage from a variety of perspectives.

Continue reading →
Kent Mundle
Design Principles: Introduction To Hierarchy

In this article, Freelance Designer Kent Mundle examines the basics of good design: hierarchy, shapes, sizes, and colors. The foundational rules of visual perception are critical for any graphic design, as they instruct how information with embedded meaning is conveyed as quickly as possible.

However, these rules were founded in print and have yet to be redefined for digital media. There has yet to be a sort of digital Bauhaus school to set these new principles. The rules of hierarchy and composition are not just dated, they break down in web interfaces.

Continue reading →
Ana Gregurec
Web Animation In The Post-Flash Era

We often use allegory to pass on an idea, trying to visually present the point of the story to allow the other person easier understanding. Using some kind of visualisation to paint a full picture of the story we are trying to tell is a good idea. Using animation to get the message across can be even better; if a picture is worth a thousand words, how much is an animation worth?

Continue reading →