UI Posts

Color is the master key to compelling design communication, but UI designers must learn to wield its power. This guide simplifies color theory concepts and shows designers how to use color with precision.

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.

Gestalt’s guiding principle, that our minds tend to perceive objects as part of a greater whole, is a very useful and powerful design technique [includes infographic].

UI and UX designers must work in tandem in order to create a finished product that delights users both visually and functionally.

How does Figma improve the design process and outperform Sketch and other design tools when it comes to designer collaboration? Learn the big differences that every designer should know.

Virtual reality is no longer in the realm of science fiction. Immersive technology desperately needs skilled designers to jump in, get involved, take risks, and create something new. Leap into VR/AR!

Every month, we bring you compelling design news and inspirational content focused on design innovation. Here are six hand-picked pieces of intriguing design news.

A consistent UI leads to a better UX. But with so many moving parts in modern user interfaces, how can UI designers be sure they’re staying true to a digital product’s look and feel?

Sketch is a valuable, time-saving resource for any designer’s toolbox. Though not every designer chooses to do so, creating style guides in Sketch can make it even more of a time-saver.

AI has become an over-hyped buzzword and the design world is no exception. Instead of resisting it, designers will soon be co-creating with AI. It will make them smarter. (Includes infographic)

The ultimate aim of icon design is to enhance the user experience. But what does that look like, and how can UI designers ensure that the icons they make will be easily understood?

Finding inspiration for design projects is one thing. Organizing it into a cohesive base for creating a design that wows clients and users is an entirely different beast. The solution? Mood boards.

The internet is a primary source of information, entertainment, and communication. Yet, for people with disabilities, there are barriers that make it inaccessible, as many websites don’t consider their needs.

Travel gives a fresh perspective, inspires creativity, and improves our empathy for people around the world. By making the globe your office, you can benefit from new insights and become a better designer.

When having the right UX tools is the crucial difference between having a highly effective design workflow, and one that’s slow and unproductive, it’s important to stay up to date with the latest tools.

Following some basic mobile app design best practices and avoiding the most common mistakes will help designers create apps that live past the crucial 90-day mark when 71% are abandoned.

Creating meaningful designs, capturing customer attention, and influencing their behavior is something that designers and marketers will agree is one of the most difficult things to achieve.

No matter what design discipline you are working in—whether it’s visual design, UX, or traditional print—typefaces are essential elements of virtually every bit of design produced.

The most progressive and interesting designers steer clear of visually stale design solutions and ditch restrictive rules by learning UI design best practices and avoiding common design mistakes.

A lion’s share of websites and apps in the online media space are powered by content management systems (CMS). The optimal way to design for these applications is putting content first, style second.

Gestalt principles are an important set of ideas for any designer to learn and their implementation can greatly improve the aesthetics of a design as well as its functionality and user-friendliness.

UI and UX are two design terms that often get used in the wrong context. Designers who call themselves “UI designers,” or design for trends rather than users, could be harming their reputation.

Polished design wireframes are great but don’t reveal the work that goes into research and content organization. See how a thorough approach to early project planning leads to successful website redesign.

Every month, we bring you riveting design news and inspiring content focused on design. Here are five hand-picked pieces of design news.

Sketch plugins can help designers speed up their design process and automate repetitive tasks in Sketch. Learning Sketch plugin development allows designers to constantly improve their workflow.

The wearable technology revolution is shifting our long established patterns of how we utilize data in our daily lives and social interactions. In many ways, it’s a lot more personal.

Successful products and experiences offer more than pure functionality. They are designed to engage human emotions and motivate users to forge ongoing interactions that are both meaningful and memorable.

Discover why conversational UIs and voice apps are surging in popularity and learn how to design voice user interfaces (VUIs) for both mobile and smart home speakers.

Prototype design is a powerful process detailing how designers do everything required to test, iterate, and develop prototypes, beginning with user flows and ending in functional wireframes.

Redesigning a website is about more than making cosmetic changes; it’s about identifying the real issues that the business is facing and solving them with design.

New design tools are emerging at an incredible rate, but the future promises a vast array of astonishing tools that will forever change the way designers think and work.

Mobile usability isn’t just about scaling a website or app to fit various devices. It’s about understanding how people use mobile devices and that the mobile experience is as unique as the user.

While there can be considerable overlap between user interface (UI) design and user experience (UX) design, they are distinct fields with different skills required for each role.

Microinteractions are single interactive moments in a product that enhance the workflow and make a product more enjoyable. This article highlights key parts of microinteractions and patterns.

Design frameworks help designers work more efficiently by utilizing reusable UI components. Using Sketch symbols, this article sheds light on how to create and use one (includes a free Sketch UI framework).

Great designers help teams and stakeholders make better decisions by using questions to identify opportunities, reveal underlying needs, and understand user context—all of which lead to better designs.

Web design is changing. Minimalist web design has been the reigning approach for years, but brutalist design is gaining in popularity. Despite its inelegant clutter and raw functionality, brutalist design may be taking over the web.

Dashboards are a unique and powerful way to present data-based intelligence using data visualization techniques. This post looks at the fundamental principles that lie at the heart of every successful dashboard design.

By leveraging new and emerging technologies like AI, AR, VR, and MR, designers have fresh and exciting opportunities ahead in designing future products.

Emojis are universal symbols of expression, transcending cultural and linguistic divides. As technology continues to advance, designers will be the ones to define the next evolution of human communication.

Despite having many things in common, virtual, augmented, and mixed reality (VR/AR/MR) are not the same thing. Learn the essential differentiators, driving forces, and design considerations for these three promising cousin technologies.

What is UX design? This article dispels the myths and lays bare the many misconceptions surrounding the discipline by looking at what UX design is and what it is not.

Many a promising project can be stymied by unyielding personalities, inflexible attitudes, and big egos. Learn to navigate these tricky waters with grace and professionalism.

Designers are not mere pixel pushers. They must frame the problem, identify a solution, and engage users while also impacting their client’s bottom line. This article explains how the S.M.A.R.T. framework helps designers stay goal-oriented and increase their success rate.

Prototyping with real data can be compared to building something out of LEGO blocks: Instead of working with imaginary, loose shapes, we can use existing components from the box and build something real.

This Framer tutorial uses real data and public APIs. Working prototypes and code snippets are included.

White space is a frequently overlooked and underutilized element in many TV interface designs that are often crowded and busy.

Thoughtful use of white space in TV UI design improves comprehension and focus, and it enhances the user’s experience.

Why do we still use buttons in our user interfaces? Technology has come so far and offers so many possibilities, there is no longer any reason to force our users to click the tiny rectangles we call “buttons.”

Dark-themed UIs can be dramatic, stylish and elegant. But despite the many benefits, they come with a slew of challenges and potential pitfalls that every designer would be wise to keep in mind.

After years without a dedicated UX tool and the mass migration to other options like Sketch, InVision, Zeplin, and Figma, Adobe started the development of Adobe XD, its new UX solution. Explore the Adobe alternative, its exclusive features and how it compares with Sketch, the market’s main choice.

Buttons—We use them daily in apps and websites to finalize crucial actions. Digital design develops at an incredible pace, and buttons as one of its most important elements along with it. How has their style developed over the past 8 years? Check the Dribbble Buttons Timeline.

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.

The argument for type design, what it is, and why it should be the next step in the evolution of UI from skeuomorphism and flat design.

Want to improve your page load speeds for your responsive website? Here is a full list of everything you could do to improve your site’s loading times

It is now possible to more accurately shape experiences that dynamically personalize content by coupling behavioral design with data science and analytics.

Designing for television has become part of the continuum of devices that require a rethink of how we approach user interfaces and user experiences.

These 10 surprising UX books from various disciplines will broaden a designer’s perspective and provide insight into diverse approaches to problem solving.

Interaction design principles form the bedrock of awesome UX. Truly great interaction design relies on a set of conventions, standards, best practices and rules-of-thumb.

The relationship between art and design is often misunderstood, and although a design outcome can be artful, the process behind it is altogether very different.

The top five reasons why creating a styleguide early is especially important for startups in spite of the inherent challenges.

Reflections on the disappearance of web forms. How mobile biometrics could unlock a personal data vault that provides what’s necessary, killing forms entirely.

In many product design scenarios wireframes may not be necessary and skipping them altogether may cut down on confusion and save a lot of time.

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.

UX and usability testing analysis is a critical skill. How do you go about collecting data and analyze results? Here’s a way to stay sane during the process.

Two eCommerce sites were losing customers due to poor UX. A small set of UX improvements were made that greatly enhanced the sites’ usability and boosted sales.

Toptal designer Bronwen Rees explains how in persuasive design, social and psychological triggers can be utilized to influence user behavior.

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.

Flipkart, India’s leading eCommerce marketplace, questioned why they were losing customers and asked themselves: How do you build a loyal customer base, increase engagement and solve the issue of app uninstalls? What behaviors should be studied to come up with a winning solution? The answer lay in designing a habit-forming experience.

In apps, the next big thing is almost always initially dismissed as a toy. Things like Snapchat and VR, initially targeting the gaming industry and teen markets, ended up blossoming into disruptive technologies.

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.

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.

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.

We can harness the power of constraints by consciously choosing to place strict limits on design options, and we needn’t look beyond our own smartphones to find compelling examples of how this works.

Anticipatory design is the UX technique of simplifying processes and responding to user needs one step before they actually express those needs, simplifying user decisions and leading to magical experiences.

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.

Like all people, designers have biases about the world. Unfortunately, many of these biases can seriously damage our quality of work before it’s too late to notice. In this article, Toptal Design Blog Editor Michael Abehsera tells us what kinds of biases designers unwittingly hold and how they can overcome them.

Check out a collection of custom illustration inspirations created by different designers from around the world. Toptal Illustrator Waldek Graczyk curated a selection of illustrations that each finds a way to represent its respective brand.

Some of the illustrations 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.

Despite Photoshop’s unparalleled feature set, everyone has a few extra things that they wish the product could do. Fortunately, there is a rich community of third-party developers who are regularly pumping out fantastic plugins and extensions to make you a better designer.

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.

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.

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.

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.

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.

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.

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.

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.

Most people know that the world of digital products, and how we design them, is changing every day. The question that we must ask then is: how will this affect the role of designers in the future?

In this article, Toptal designer Bree Chapin gives us an overview of user interactions today and how they are changing for tomorrow. Keep reading to learn how designers have to pivot and redirect their foci to create products and services that can adapt for the future.

Recent studies have found that in the U.S., 75 percent of children younger than eight have access to a smartphone or tablet, as do 36 percent of kids under the age of one. Although video games and apps have always carried the stigma of being detrimental to youth development, science has proven that some products can actually enhance a child’s cognitive strength. This presents a great opportunity and responsibility to digital designers and developers to influence tomorrow’s generations in a positive way.

In this guide, Toptal Designer Tanya Unger breaks down the differences and similarities between designing for kids and designing for adults. Then she presents a proven framework and offers some additional tips.

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.

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.

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.

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.

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.

Check out a curated collection of beautiful and futuristic vehicle 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.

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.

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.

Truly understanding design is easier said than done. Coding and aesthetic design require very different skill sets, which is why some front-end developers aren’t as proficient in design as they could be, and the quality of their work suffers for it.

In this post, Toptal Freelance Software Engineer Bryan Grezeszak explains why good front-end developers have to follow essential design principles down to the pixel, and should regularly seek out advice and feedback from their designers.

Navigation in mobile applications, when done right, can have tremendous positive impact on overall user experience. Android offers application developers multiple ways of implementing navigation in their application. However, not all navigation patterns are created equal.

In this article, Toptal engineer Becze Szabolcs shows us how to implement fragment-based navigation and how it stacks up against Android’s traditional navigation philosophy.

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.

2016 design trends are an evolution and extension of existing design languages and patterns. We are not reinventing the wheel this year, so this leaves room for innovative designs based on familiar building blocks. However, while the underlying basics remain unchanged, designers will have to master new skills and employ new tools to keep up.

In this post, Toptal Lead Designer Lubos Volkov lists a number of design trends that are likely to mark 2016. These industry trends are not limited to visual appearance or the advent of new tools. Some of them could potentially redefine our understanding of what it means to be a designer.

Toptal Freelance Designer Danielle Reid presents a number of exciting technologies and various interfaces to interact with them, while taking a historical perspective on interactions with man-made objects that have evolved with us to where we are.

From typewriters to touchscreens and beyond, UI design is constantly evolving to improve user experience and boost productivity. Find out what the next generation of connected devices will bring to the table.

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.