UI Design 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.
Cameron Chapman
The Role of Color in UX

A well-thought-out color palette can elevate a design from “good” to “great” while a mediocre palette can detract from a user’s experience and even interfere with their ability to use a site or app.

Continue reading →
Miklos Philips
The 10 UX Deliverables Top Designers Use

Regardless of the environment or size of a project, UX professionals need a variety of deliverables to help facilitate design communication with various stakeholders and teams, document work and provide artifacts for meetings and ideation sessions. Here are 10 of the most common UX deliverables.

Continue reading →
Sergio Ortiz
How to Design Delightful Experiences for the Internet of Things

The next wave of IoT will connect millions of devices. The skills needed in this new paradigm will shift from component thinking to whole systems thinking.

In this article, Toptal designer Sergio Ortiz writes about the Internet of Things, its design implications, how it will change the way businesses operate, and how we see the world—and how to help make homes, cities, and factories smarter and more efficient.

Continue reading →
Miklos Philips
A Rant Against Pretty Designs

Often, designers make the mistake of designing apps for their own vanity, focusing on the veneer instead of designing a great user experience. As Steve Jobs once said, “Most people make the mistake of thinking design is what it looks like.”

In this article, Toptal UX Designer Miklos Philips discusses Jobs’s point of view and clarifies the importance of designing for people.

Continue reading →
Bree Chapin
Stop Making Garbage: A Guide to Designing Interfaces That Last

We are a throw-away society—products wear out far too quickly or are replaced by something shinier, newer, or more trendy.

In this piece, we look at designs that have stood the test of time and break down what made them successful. No matter what you’re working on, these guiding principles will help you stop designing disposables and begin creating designs that last.

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 →
Jônatas Vieira
20 Testimonial Pages to Inspire Future Customers

Check out a collection of testimonial page inspirations created by different designers from around the world. Toptal designer Jônatas Vieira curated a selection of designs that each empowers its brand story.

Some of the screens are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Cai Cardenas
20 eCommerce Mobile UIs That Make Shopping Easier

Check out a collection of mobile eCommerce inspirations created by different designers from around the world. Toptal Designer Cai Cardenas curated a selection of designs that each delights their users.

Some of the screens are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

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 →
Jason Gonzalez
Logo Animation Inspirations to Make Your Brand More Relatable

Check out a collection of brand animation inspirations created by different designers from around the world. Toptal Designer Jason Gonzalez curated a selection of designs that each finds a way to energize its respective brand.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Francesca Gilibert
Please Your Readers With These Blog Layout Inspirations

Check out a collection of blog layout design inspirations created by different designers from around the world. Toptal Designer Francesca Gilbert curated a selection of designs that each finds ways to communicate a blog’s unique personality.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Michael Abehsera
Retain Users With These Mobile App Onboarding Inspirations

Check out a collection of onboarding design inspirations created by different designers from around the world. Toptal Design Blog Lead Editor Michael Abehsera curated a selection of designs that each finds creative ways to retain users.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Kent Mundle
Convert Visitors With These Landing Page Inspirations

Check out a collection of landing page design inspirations created by different designers from around the world. Toptal Technical Blog Editor Kent Mundle curated a selection of designs that each finds creative ways to convert visitors into leads.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Tidjane Tall
The Super Simple Guide to Iconography

We often hear that an image is worth a thousand words. Well, this applies very much to icons, which replace long sentences and words to optimize visual space, usability, and aesthetic.

In this article, Toptal Designer Tidjane Tall shows us how to create 10 custom icons in less than 10 seconds each (we promise). Knowing how to design your own icons can go a long way, so learn how to craft a set of simple and effective icons to upgrade your skillset.

Continue reading →
Michael Abehsera
Taking IKEA Out of Its Box and Redesigning It for 1.6B Users

Although IKEA is one of the world’s most well-known retailers, its online presence doesn’t reflect the same success. Too many users find that the brand’s online presence is cluttered, difficult to navigate, and doesn’t reflect a more modern lifestyle.

In this article, Toptal Lead Design Blog Editor Michael Abehsera leads a redesign of IKEA’s online presence, exploring how the user experience can be overhauled to fix some of its most pressing issues.

Continue reading →
Santiago Baigorria
Upgrade Your Analytics With These Dashboard Design Inspirations

Check out a collection of analytics dashboard design inspirations created by different designers from around the world. Toptal Designer Santiago Baigorria curated a selection of designs that each offers insightful analyses.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Luciano Vizza
What Google and Adobe Can Teach Us About Feature Creep

Most designers know that feature creep is a big time problem, but knowing is only half the battle. How do we stop feature creep from smothering our projects?

In this article, Toptal Designer Luciano Vizza guides us through the steps to recognize and dispel feature creep in your next project. One extra feature might not sink the ship. But, it doesn’t take long for one feature to become 20 features, and before you know it, Captain, you are going down with the ship.

Continue reading →
Jônatas Vieira
Turn Error Into Opportunity With These 404 Page Inspirations

Check out a collection of 404 page design inspirations created by different designers from around the world. Toptal Designer Jônatas Vieira curated a selection of designs that offer a unique solution.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Jônatas Vieira
The Complete Guide to Cross Cultural Design

Designing across cultural boundaries has broader implications and more challenges than Google Translate can solve. Designers must consider not just language differences, but also cultural tendencies, values, and taboos.

In this article, Toptal designer Jônatas Vieira gives us the tools to navigate cultural boundaries and shows us one of his own projects that taught him the value of cross-cultural design.

Continue reading →
Michael Abehsera
Design for Reality, Not Glory

Designers too often work for their ego and choose to redesign the next billion-user start-up to boost their career, rather than doing something that will really help them grow. We receive no substantial criticism when publishing portfolio work online, but when we design for reality we put ourselves in a position to learn.

In this article, Toptal Lead Blog Design Editor Michael Abehsera shows us how to kill our egos, design for the small and local, and to always be students.

Continue reading →
Kent Mundle
Delight Users at Checkout With These Payment Page Inspirations

Check out a collection of payment design inspirations created by different designers from around the world. Toptal Technical Editor Kent Mundle curated a selection of designs that each offer unique UI solutions to the popular platform.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Kent Mundle
Let’s Redesign Facebook: 10 Inspirations to Get You Started

Check out a collection of new Facebook redesigns created by different designers from around the world. Toptal Technical Editor Kent Mundle curated a selection of designs that each offer unique UI solutions to the popular platform.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Kent Mundle
Get Inspired With These Data Visualisations

Check out a collection of intuitive data visualisations created by different designers from around the world. Toptal Technical Editor Kent Mundle curated a selection of designs that each offer unique UI solutions to data.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Michael Abehsera
Write or Fade Away as a Designer

As freelance designers, we tend to search for any way to leverage our careers to get more and better work. However, with so many opinions online it can be difficult for designers to know how to invest their time. Writing is one of the highest ROI skills a designer can develop.

In this article, Toptal Lead Design Editor Michael Abehsera talks with some of the best designers around the world who write to leverage their careers. Keep reading to learn how you too can get writing.

Continue reading →
Kent Mundle
These Design Inspirations Can Change How We Read The News

Check out a collection of intuitive news UIs created by different designers from around the world. Toptal Technical Editor Kent Mundle curated a selection of designs that each offer unique UI solutions to news interfaces.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Michael Abehsera
The Art of Stealing: How to Become a Master Designer

Many people believe that designers are unicorns, gifted or special in some way. They’re not. Truth is, anyone can become a great designer if they’re willing to put in years of hard work, experimentation, and failure. All it takes is a simple mindset shift. Instead of looking at other designers’ work with envy, think of it as the key to your success.

In fact, interactive design has a lot in common with the open source software community: You can master it by stealing and copying from the best of the best. Start by getting to know Dribbble’s rebound feature.

Continue reading →
Jônatas Vieira
How Much Coding Should Designers Know?

Much of the digital design community is locked in debate over whether or not designers should code. Some are in favor of seeking out the unicorns who can design and code, while others claim they don’t exist, or just get in the way.

In this article, Toptal freelance designer Jônatas Vieira offers his own firsthand perspective on this issue. Can learning how to code elevate your career to the next level? Or would such skills go unused?

Continue reading →
Danielle Reid
Amazing Travel UIs

Check out a curated collection of beautiful and futuristic travel UIs created by different designers from around the world.

Some of the designs are captured from live products, some are still in development, and some are purely concepts designed to push the bounds of what is even considered possible.

Continue reading →
Andrew Graunke
How CrunchBase Should Be Designed

Despite the widespread use of the start-up tracker CrunchBase, Toptal Freelance Designer Andrew Graunke believes that its site could use a redesign. Can the redesign transcend an aesthetic makeover, and improve user and business goals as well?

In this article, Andrew walks us through his thorough redesign and reorganization of the CrunchBase website. His process includes wireframes, design reviews, and a usability test.

Continue reading →
Ivo Gregurec
Tutorial: How To Create A Custom Icon Webfont

The possibility of embedding a custom font in an HTML website revolutionized the potential of web development and opened up many new possibilities for designers. The key advantage of custom fonts over sprite graphics is their superior load time, but that’s not the only benefit.

In this article, Toptal Freelance Designer Ivo Gregurec explains how you can build your very own icon font, allowing you to create a consistently unique style, unified line weight, and pixel-perfect results.

Continue reading →
Goran Ramljak
When We Should Redesign: An Automotive Case Study

When is the best possible time for a company to conduct a website redesign? What needs to be done in a redesign to ensure another won’t be needed for a long time to come?

In this article, Freelance Designer Goran Ramljak walks us through his redesign case study, exposing key issues with the automotive digital space in the process.

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 →
Bojan Janjanin
Are All Trends Worth It? Top 5 Most Common UX Mistakes That Designers Make

Many modern web trends offer a lot of visual appeal and the temptation to follow them blindly is quite real. These trends are not always bad, but they can be dangerous if not implemented with caution. In this article, Toptal designer Bojan Janjanin discusses some of the most common UX mistakes and some insights on finding the balance between what looks nice and what is actually usable.

Continue reading →
Nermin Hajdarbegovic
The Industry Could Do Without Pixel Density And PPI Marketing

Like it or not, once you start chasing pixels, you are more likely to end up with a bigger screen. This means more backlighting, more GPU load, more juice, and a bigger battery. Huge phones with insanely high pixel densities are a triumph of cunning marketing over sensible engineering.

The trend is not making hardware better in a noticeable way, yet it’s making it more expensive and less efficient. It is no longer improving the user experience, either, and in some cases it is even degrading it.

Continue reading →
Lucijan Blagonic
Make Website Design Decisions in Your Browser: My Process for Designing Websites

With an ever-growing device landscape, it is becoming increasingly difficult to design consistent user interfaces across all devices. Using paper and pencil, or design tools that do not properly mimic the dynamic nature of web browsers across multiple platforms and screen sizes, can sometimes lead to obvious inefficiencies. However, the web browser can be used as a critical and efficient tool for designing websites and interfaces.

Continue reading →
Darko Stanimirović
Usability And The Art Of Portfolio Design: A Toptal Design Talk

Is it ever safe to sacrifice usability for experimentation in web design? What can be learned from products that challenge the values of web designers? Are portfolio projects potentially the perfect venue to push the boundaries?

In the first Toptal Design Talk, Toptal Technical Editor Kent Mundle and freelance designer Darko Stanimirovic discuss these questions over a contentious website portfolio for the renown studio, Ro-Lu.

Continue reading →