User Research

Idea Validation Checklist

Instead of assuming a product idea will be successful, companies should first focus on validating their product idea(s) in order to determine if it is useful for their targeted users. Companies should focus on validating idea(s) in order to determine its success rate. In this article, we will discuss the process of idea validation to prevent negative results, both from business and customer perspectives. 

Why Non-Validated Ideas are a Problem

Here are some reasons why product design teams should validate ideas before developing it into a finished product. 

  1. Ideas may lead to no improvements for both the business and the customers. In other words, perhaps the ideas have no measurable improvements. 
  2. Because of the unknown areas, no one can predict if an idea is valuable for businesses and customers. 
  3. Launching ideas without data-driven research and robust validation criteria can result in a waste of time and effort for businesses. 

The Process of Validating Ideas

Primarily the purpose of this process of idea validation is to learn if your idea is useful, usable and feasible. However, before validating any idea(s), you will need to make sure if there are real users out there who will be benefited from your idea(s). This process will require you to identify your market in order to validate your idea(s) effectively. Idea validation process involves 4 phases; Assessment, Fact-Finding, Test and Experiment

Phase 1: Assessment

The purpose of the assessment phase is to help evaluate the ideas, filtering out what does and does not align with business goals, while identifying the hidden risks. The goal is eliminating any ideas that may risk the business and customers.

Stakeholder Interview/Review 

Review your idea with a stakeholder to sift out risk in the business aspect. Stakeholders may also provide insights on how to change the idea, to reduce potential risks.  

Assumption Mapping

Identify the hidden risk behind your idea through this experimentation. The goal is to map out all assumptions and hidden risks, especially useful for bigger ideas. 

Phase 2: Fact-Finding

Now that you filtered out your ideas based on assumptions and risk, the next step is to gather all the available facts and data to back-up your idea(s). Essentially, we want to build data-driven idea(s) that proves that it can be impactful for both businesses and customers. Another benefit of fact-finding is that it may also provide insights to further refine your idea(s) before launching it to the public. 

Analysis of Data 

Analyze data through user feedback, screen heat maps, and many other analysis tools in order to understand your target audiences.

User Surveys/Interviews

Give you quantitative and qualitative information directly from your users regarding your valuable question of the idea. The purpose to gather insights about your users’ needs, current methods to solve problems, pain points and their opinions about your idea. 

User interviews provide qualitative data. You will be able to gather detailed insights as they talk about the topics you bring up. The only downside of user interviews is that it requires time and effort to gather data. 

Surveys provide quantitative data. Although the data is not as detailed as the user interview, you will benefit from gathering numerical data. The positive side of surveys is that you will be able to gather data much faster than user interviews. 

Competitor Analysis

Learn how to solve the problem and know how real users think through analyzing and understanding your competitors. It is beneficial to identify your competitors’ solutions, its weaknesses and strengths. Gain an understanding of the products’ scope by analyzing what already exists in the market, prior to building the idea(s).

Field Research

Get the intention of the users’ actions and behaviours from observing them in their natural space. You will get a true sense of your users’ actions and behaviours from a natural environment, rather than an artificial one in a controlled setting. Natural spaces can include the workplace, at home or in public spaces. 

Phase 3: Test

At this stage, you are not validating a finished product. Instead, this stage requires you to create a version of your idea and launch it to your user group. The purpose is to measure the reaction and learn if it works with your user group. 

Usability Test

Testers walk through the product under guidance and supervision by using similar tools with the actual product such as an interactive prototype. The purpose of usability testing is to ensure if the targeted user group is able to use the idea(s) effectively. The goal is to ensure that the idea(s) is convenient, easy-to-use and intuitive.

Phase 4: Experiments 

Experiments are not the same as the testing phase. In the testing phase, we are measuring the user groups’ reactions and the ability to use the idea(s). In the experiment phase, we are experimenting with our idea against a false result. For example, the majority of users prefer version 1 over version 2. 

A/B Test

Let users experience and compare between the original version and the new version to compare. The version with the most likes or is widely accepted by the majority of users is the best option. Learn More here.

Percentage Experiments

As you are implementing a product UX change, stop at a specific milestone – such as 30% – and conduct A/B test to verify the coherence of the results.


Validating ideas before launching it to the public for use is essential in product growth. Moving forward with developing product ideas without validating key areas can ultimately lead to a waste of time and money. Idea validation can prevent negative results, both from business and customer perspectives. 

You can download the checklist.

What Next

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

User Experience

Guide to Onboarding UX and Best Practices

When it comes to building a mobile app, website, or any other product, building a great, effective, and intuitive UI is only half the battle. Onboarding UX is an important part of the product building. Even if your UI is amazing and intuitive for a current user, it also needs to be accessible for new users – and they need to quickly understand the purpose of your product, how to interact with it, and what benefits it can offer them. This is when the onboarding UX (user experience) becomes important – the user onboarding process allows you to give your users a quick overview of what your app or website does, and demonstrates how to use it.

In this article, we’ll take a deep look at this process, and provide you with some best practices about how you can improve the onboarding UX process for your own app or website. Let’s get started now.

What Is User Onboarding?

Imagine that you’re trying to get your pilot’s license. You’re dropped into a cockpit for the first time, and your instructor says “Alright! Time to get in the air! Take off for me, would you?” You’re staring at dozens of dials, hundreds of switches, and more flashing and blinking lights than you can count. You don’t even know where to begin!

Chances are, your customers feel a similar feeling when they first open your product and begin their customer journey. They don’t know what button performs each function, and they need an overview of how things work before they can start exploring your app on their own.

Okay, maybe it’s not quite as complicated as learning how to fly – but the analogy is still there! Just as an experienced pilot would know how to make sense of the cockpit, a user who gets an overview of your app and learns a bit about its basic functions will be more able to explore it on their own and deepen their familiarity with the app and what it does.

Most often, user onboarding consists of a few screens that include information about the basic functions of an app or website. On-screen tooltips are also frequently used to deliver contextual information.

In some cases, tutorials are also an important part of the user onboarding process – if you built a calendar app, for example, users may be walked through the initial process of setting up an event for the first time. The particular type of onboarding UX that should be used depends mostly on the app or website you’re building.

Why Does User Onboarding UX Matter?

User onboarding matters because it’s the way that you show your product has value. Chances are, your app or website is presenting itself as a solution to a particular problem – and it needs to demonstrate its ability to solve that problem. If it doesn’t demonstrate its ability to solve the problem, the user will become frustrated – and stop using it.

If you build a messaging app similar to Slack, for example, and release it to customers without any information about how to use it to send messages to users, they’ll load it up, get confused, and then become frustrated and uninstall the app.

That’s why user onboarding is important – it demonstrates the value of your app, and gives users the basic tools they need to explore it on their own and see the benefits for themselves.

When you are building a product, this will also result in a higher customer retention rate – customers are more likely to stick around and explore once they know what they’re doing. In addition, customer churn will also be correspondingly lower, and you’ll also get fewer support requests about the basic functionality of the product.

How Can I Make The User Onboarding Process Better?

Wondering how you can streamline your user onboarding process, and maximize the potential of your onboarding UX? Here are a few tips and techniques you can use to ensure that your users learn what they need to use your product properly.

Define the type and purpose of your onboarding UX – First and foremost, you need to define the type of onboarding you’re doing. There are 5 distinct types of onboarding UX, as follows:

  1. Benefit-focused – This type of UX onboarding helps explain a few of the core benefits of an app or website, and why they matter to the user.
  2. Function-focused – This type of onboarding explains the primary functions of the product and how to use them.
  3. Doing-focused – Doing-focused onboarding UX walks the user through the process of a few common actions – like writing their first note in a “memos” app, or browsing the latest headlines of a news website.
  4. Account-focused – This is often used for social media apps. It walks the user through the process of account creation, adding interests/friends/preferences, and so on.’
  5. Combination – In some cases, a combination of all of the above types of onboarding may be necessary.

By knowing which type of onboarding you’re using – and why – you can ensure that your onboarding UX is focused and delivers the right information at the right time.

  • Keep it as brief and concise as possible – You’re walking a fine line when it comes to onboarding UX. You want to give users enough information so that they can start using your product properly – but if you make them go through dozens of setup screens and tooltips, they’ll get frustrated and leave. Because of this, you need to do your best to keep your onboarding as brief and concise as possible. Limit yourself to just the essentials. Otherwise, your onboarding UX actually can cause users to leave.
  • Let users skip onboarding (but make it repeatable) – Some people prefer to learn by doing, and don’t want to sit through your onboarding screens. You should make sure it’s possible for these people to skip the initial onboarding process so that they can get straight into experimenting with your product. Importantly, though, you should make it easy for a customer to repeat the initial onboarding process – this way, if they find themselves lost and confused, they can bring the initial startup screens and tutorials back, and choose to go through the initial process to make sure they understand what they’re doing.
  • Onboard users whenever you add a new feature – If you have added a great new feature to your product, you can’t just wait for users to discover it on your own. You need to make sure that both new and existing users know about it – so we recommend a quick onboarding pop-up or screen that helps announce it, and show users how it works. Doing this will help speed up the adoption of new features, and boost product satisfaction.

With these best practices – knowing the intentions behind your onboarding UX, keeping things brief and simple, allowing it to be skipped, and keeping both new and existing users updated about your product’s features – you’ll be able to build a much better onboarding UX.

Need more tips? Take a look at this blog from IdeaTheorem now for even more best practices for onboarding UX!

Demonstrate Your Product’s Value With A Great Onboarding User Experience!

You only get one first impression – and that’s as true in product development as it is in real life. Your onboarding is when you get the first opportunity to blow your users away – and demonstrate the value of your product in a real, tangible way.

So make sure you understand what onboarding UX is, why it’s so important, and the best practices that can help you improve your onboarding user experience. If you do, your product is sure to succeed.

What Next

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

User Experience

13 Dark UX Patterns To Avoid If You Don’t Want To Spook Your Users

What are dark patterns?

In UX, dark patterns are deceptive UX/UI methods that are designed to trick or mislead users into doing something they don’t want to do. An example would be hiding extra fees from the user by making it visually unnoticeable. These UX patterns try to exploit human psychology in an attempt to boost company profits or goals. 

It is important to note that dark patterns are not a right, ethical practice. 

Why do some companies use them?

There are still companies out there that choose to use these dark patterns in their products. The reason why is because of money. Dark patterns are used for short-term results rather than qualitative information like user-friendliness. Dark patterns work, in a sense. They can successfully trick some people, so companies choose to keep on using them. 

Why should they be avoided?

Good user experience design is about giving users enjoyable and seamless interactions with the products. It is centered around the user and it is not deceptive or sneaky. Dark patterns spoil trust and take advantage of the users. This is quite the opposite of what UX/UI designers should be doing. Dark patterns are also damaging to the company in the long-term. Users know and don’t like to be tricked or feel like they have to watch out for themselves. This will cause anger, frustration, and corrode a company’s relationship with its users. Users will not feel like they can trust you, which will damage the product in the end. 

Instead of using dark patterns, it is better to use good UX patterns in the beginning. 

The dark pattern checklist

Idea Theorem created a checklist on 13 dark patterns as a guide on what not to include in a product. 

Confirmshaming: Are you using language that tries to shame the user for wanting to opt-out of something?

Tricky questions:  Are you asking the users confusing questions, trying to make them do what you want them to?

Forced continuity: When a user’s free trial has expired, are they getting charged without warning? 

Disguised ads: Are there ads that disguise themselves as part of the product?

Hiding costs: Are you hiding extra costs such as delivery fees until the very last stage of the checkout process?

Sneaking into a purchase: Are you trying to sneak an additional item into the user’s bag? 

Trapping: Are you making it very hard for the user to opt-out of something?

Misdirection: Are you trying to lead users into doing things that they don’t want, such as highlighting a more expensive option over the others?

Baiting and switching: Are you using an established UX pattern and then changing its function to something completely different, giving the user an unexpected, undesirable result?

Hidden options: Are you hiding things like subscription checkboxes from the user or unsubscription links?

Privacy:  Are you trying to trick users into publically sharing more about themselves than they intended to?

Bewildering Language: Are you purposefully using language that is unclear or complicated to prevent users from cancelling or opting out of something?

Using Fear: Are you using language that tries to scare the user of what will happen if they choose to opt-out of something?

Please download the checklist.

What Next

Idea Theorem is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

User Experience

Understanding The Most Common Misconceptions About UX Design

User Experience (UX) design is an important part of the development of any application or website – and is critical for delivering value to people who are interacting with your product or service.

But despite how widespread UX design is, there are some common misconceptions about UX design that refuse to go away – partially thanks to confusion with the similar, but distinct field of UI (User Interface) design.

So, in this article, we’ll discuss some of the most widely-held misconceptions and myths about UX design, and explain why each one is incorrect. Let’s get started now, and explore this subject in further detail.

UX Is The Same As UI

UX/UI are often used interchangeably – or alongside each other – but it’s important to be able to recognize the differences between UX and UI. They are not the same – and in fact, they are two distinct processes that must be used in parallel to reach the same goal.

At the most basic level, you can understand the difference between UX and UI as this: UX design is the starting point of the design process – and has the goal of creating a particular user journey. In contrast, UI design is meant to help create the final user interface – the UI process takes place after the UX process has defined the basics about how the user will interact with a given product.

In other words, UX design specializes in the research of user experiences, understanding human engagement, and studying the ways that customers interact with a product, and their journey while using it.

In contrast, UI is intended to focus closely on the look and feel of a product – and creating a user interface based on the UX principles that were found throughout the UX process. To further define the difference between these two fields, we’ve put together a few more differences in the table below.

UI Design

UX Design

UI is concerned with the visual design of a product and focuses on the look and feel of a particular interface.

UX is interaction design, focusing on the customers’ experience and ways they can interact with a product to accomplish a particular goal.

UI utilizes design trends and brand guidelines to ensure that the UI conforms to the proper branding and design elements.

UX utilizes user research, empathy, user emotions, and data to understand how users interact with digital products and websites.

UI design consists mainly of color, typography, and layout creation, and using UI tools to create mockups.

UX focuses primarily on wireframes, site maps, and persona creation.

UX Design Starts With Technology

This is not true. While advanced technology and interfaces can be helpful when designing a user interface, UX design is not just concerned with using the latest technology.

Instead, UX design focuses on creating products that are meaningful and provide seamless, relevant experiences to their users. This requires deep knowledge about how customers interact with products – regardless of the digital interface or technology used to create the product.

While UX design should leverage advanced technologies to improve the end result of a product, the process does not start with focusing on technology – but with an emphasis on the customer, and their experience. From there, UX design can work toward creating a great customer experience – and leverage advanced technologies that can help trigger this experience.

UX Design Is Only About Users

Naturally, UX design emphasizes the need to design a great, optimal experience for users – but this is not the exclusive goal of UX design. In fact, the overall goals and objectives of a given UX project are typically defined in advance by the businesses which are developing a new piece of software or a website.

This ensures that a UX team has a clear set of expectations and deliverables – and understands both the customer’s needs and the goals and expectations of a business. The process of UX is, in part, a balancing act – allowing for the best possible user experience while still satisfying the goals and objectives of the business developing the software or website.

To create a successful product, UX design must cater to both of these needs – and the company responsible for the product must provide guidance and clear goals toward which the UX design can work.

UX Design Is Just Another Step In A Product’s Development

This is another common misconception. UX is never “done.” It’s not just a step in the planning process – it’s a continuous cycle that begins from the moment that a project starts, and must continue throughout the entire product development cycle.

There are a few reasons for this. Scope creep and feature creep, for example, can lead to the implementation of more features and objects than were initially anticipated – which can require a change in UX design, as well as in UI design.

Additionally, it’s not always easy to predict how users will react to a particular design. UX requires continuous refinement and A/B user testing to ensure that the goals of the UX design are being met and that the original objectives of the UX design can be accomplished.

For this reason, UX phase should be a continuous process that occurs in parallel with the development of a product – when features and new content are added to a product or a website, the UX team must respond accordingly, and ensure that the product is easy to interact with, and provides a great user experience. Even after a project is completed, regular UX audits can help refine the product in the future.

Great UX Design Is Universal, And Easy-To-Use For Everyone

This is, for the most part, not true. Why? Because UX is concerned with making a product intuitive and easy-to-use for a particular audience. In other words, the product will be designed to be very usable for a specific subset of people. You’re focusing on a specific user persona.

For some products, like an eCommerce website, this means that, yes, the UX design should be extremely intuitive and easy-to-use for just about anyone – because your “audience” is everyone!

But when it comes to more technical websites and applications, the user persona changes. A designer working on UX phase for a 3D modelling program, for example, would want to adopt the best practices that other 3D modelling programs use, in order to provide a great user experience – and make it intuitive for the target audience, which is people who know how to use a 3D modelling program.

UX design is about making the experience great for a particular user. If the UX designer in the above example attempted to create a user experience that was more simple, had fewer features, and was more intuitive, they may (counter-intuitively) actually alienate the user that the product is intended for. For a product to be valuable, it must be understandable and user-friendly towards a specific user persona.

Know The Facts Behind These Common UX Misconceptions!

We hope that this article has been helpful, and helped you learn about a few of the most common misconceptions about UX. For more information, you can take a look at our blog – and get even more insights about UX, UI, and other related subjects like information architecture from Idea Theorem.

What Next

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

User Experience

Complete Guide To Information Architecture In UX Design

If you’re designing a SaaS product, a website or even an app and you’re working with UX designers, you may have heard the term “information architecture” (IA) quite a bit – and you may not be sure what it means, or how it relates to UX design.

In this guide, we’ll be taking an in-depth look at information architecture, and how it relates to UX design. You’ll learn everything you need to know in order to understand the concept of information architecture in detail, and how it relates to UX design. Let’s get started.

Defining Information Architecture – What Is It?

When it comes to incorporating any kind of information, the human brain needs one thing – structure. Imagine trying to read a dictionary that wasn’t in alphabetical order, a novel which does not have its chapters arranged in the correct sequence, or a textbook without a table of contents, glossary, or bibliography.

In the same way, we need a consistent structure that we can use when we’re browsing information online. That’s information architecture – the art and science of designing navigational systems and constructing content in such a way that it’s intuitive to browse and understand on websites, web and mobile apps, software, and more.

To boil it down further, information architecture is the practice of figuring out how you can arrange the parts of something to make it understandable. The goal is to organize content in such a way that users can quickly adjust to how the product works, and find everything that they need without making a big effort.

The structure of the content and the method by which this is achieved is different, depending on the application or website. A SaaS product, for example, has different needs than an eCommerce site, because the purpose of each is distinct.

Understanding The Role Of Information Architecture In Design

In any effective development project, information architecture helps define the “skeleton” of a project. UX Designers typically focus on IA first, before determining a design approach and developing further any design elements.

This is because design elements – from visual elements and graphics to interactions, functionality and navigation – must be built on strong information architecture. Even the best content and design will fail without using appropriate IA. UX is important, but even if an app or a website looks great, users will quickly become frustrated if it becomes clear that the information is not organized properly, and it’s confusing to use.

IA And UX Design – How Do They Relate?

If you know a bit about UX design, you may be wondering if there is really a difference between IA and UX at all. After all, they’re both concerned with intuitive user experience, simple navigation, and other such things, right?

It’s true that these two terms do relate to one another, but they are not the same. You can think of IA as a blueprint for a home – while UX design is more like the finished house.

In other words, IA is a basic design structure of information – one which can be turned into wireframes and sitemaps. It’s a high-level hierarchy that is used to organize, catalog, and understand the placement of content in any product. When building a new website, SaaS product or an app, UX designers use IA as a way to construct an outline of how the site will work, so that they can plan out a navigation system.

UX, on the other hand, is concerned with much more than simply structuring content. Using IA principles in UX is important, of course. But there are many other things that UX designers must focus on, too – like influencing user’s behavior, making it pleasant to interact with the product, designing intuitive navigational systems, and much more.

So, you can think of IA as the foundation or blueprint of UX. Both IA and UX are essential for a great product, because without strong IA, your content will be difficult to navigate – but without proper UX, it will not be fun to navigate. Both practices build upon one another, and both are used by most UX designers who specialize in user-focused design.

Understanding IA System Components And What They Are

If you’d like to dive more deeply and understand a bit more about IA, it’s a good idea to have a basic knowledge about each individual component of information architecture.

The information architecture components – organization systems, labeling systems, navigation systems, and searching systems – are defined in Information Architecture for the World Wide Web, one of the pioneering texts in this field. Below are more in-depth meaning of each component.

Organization Systems

Organization systems are, as the name implies, a way to categorize how information is divided. They are designed to help users predict where they will be able to find a certain type of information. There are three main types of organization systems.

  • Hierarchical – Using a visual hierarchy helps users determine the importance of each individual element. By using things like contrasting fonts, element sizes, and colors, users can quickly understand the important information on a page at a glance.
  • Sequential – This type of organization system creates a path for a user. Imagine checking out on Amazon or another online retailer. You know what to expect – click your shopping cart, view your order summary, check out, choose your shipping address, enter your payment method, and then confirm your order and place it. That’s an example of a sequential organization system.
  • Matrix – Matrix organization systems allow users to browse content based on different kinds of groupings or “schemes.” By doing things like allowing users to sort information by alphabetical order, date, topic, and other categories, users can quickly find what they’re looking for.

Almost every website, SaaS product and app uses a combination of all of these information architecture systems to provide a seamless, intuitive user experience.

Labelling Systems

Labelling systems are a way to simplify data representation and group multiple sets of data and content into just a few words, allowing for easier navigation.

If your website has a “Contact” page, for example, this is an example of a labelling system. Rather than having a different page for your email address, phone numbers, physical address and other information, it’s grouped and labelled into the same page – one that users intuitively know will contain this information. Your user understands that they’ll find that information on the “Contact” page.

Navigation Systems

Navigation systems include a wide variety of different design techniques and actions that must be taken in order to guide a user through the process of using an app or a website – allowing them to interact with it successfully, and achieve their goals.

There are many different types, including embedded navigation, global navigation, local navigation, contextual navigation, supplemental navigation and more.

Searching Systems

Searching systems allow users to enter search terms into a search bar – just like they would in a search engine like Google – and find the results that they are looking for quickly. This is a great choice for websites and apps with a huge amount of data and different features.

Imagine trying to use an enormous website like without a search bar, and you’ll understand why searching systems are so important in some websites and applications.

Final Thoughts

We hope you’ve learned a bit more about IA and UX, and how these two fields of design are distinct – yet related and codependent. During the UX design process, IA play a pivotal role in helping mapping out the flow of the user and making sure that all the functionalities, screens are covered before starting with the design. This not only helps the designers but also helps stakeholders and devs understand how the product will flow. 

Want to learn more? Check out the Idea Theorem blog for more information about these topics and much more.

What Next

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

User Interface

7 Best UI Design Tools

At Idea Theorem, our Design Process consists of 4 key phases. Among the 4, UI design (or user interface design) is our 3rd key phase in creating a great user experience.

UI design is an important part of any product designing stage. UI design focuses on the visual design, look, and feel of a product. Using visual elements, a great UI should be able to manoeuvre users throughout their journey and provide them with high usability design and ease of use.

The UI designs during this process should directly correlate with the user goals and need to result in greater return of investment. Learn more about ROI of User Experience.

“If we want users to like our software, we should design it to behave like a likeable person: respectful, generous, and helpful.”

Alan Cooper

To design user interfaces there are several available tools to achieve the right UI for your product. These tools can help prepare UI designs as prototype mockups or wireframes and essentially bring creative ideas to life. Learn more about Best Wireframe Tools.

Tools give shape to these creative solutions, therefore, how do you decide which one is right for you? In this blog, we will be describing several tools in detail that can help you create the greatest UI experience.



7 Best UI Design Tools: Sketch

Sketch is a tool that is primarily used by many UI and UX designers for designing and prototyping mobile and web applications. This tool is a vector graphics editor which allows designers to create user interfaces quickly and efficiently.

Sketch contains several features which creates room for unlimited possibilities. Some of the many features include:

  • Symbols: This feature allows users to create pre-design elements that have the ability to be easily replicated and re-used across any project or artboard. This feature saves a lot of time and can allow designers to create a design library for future projects.
  • Slicing and Exporting: Sketch offers plenty of slicing control, and provides users with the ability to select, slice, and export any layer or object they like. An added bonus, the exporting functions can be exported anywhere from @1x – @3x.
  • Plugins: Perhaps the default sketch app doesn’t include a feature you are looking for. In that case, rest assured, there are plenty of created plugins that can be downloaded externally and added to your sketch app. The possibilities are endless!

Platforms: macOS

Price: $99/year (Personal License)


7 Best UI Design Tools: Figma

Figma is an interface design tool based on the browser that allows for design, prototyping, and code – generation. The greater advantage of Figma is the ability to be used in a team setting, appealing to more collaborative design culture. This saves time from sending a single file from one person to the next. Rather, Figma has ultimately found a way to create real-time changes which can be done simultaneously across all team members.

Some other features include:

  • Component Libraries: This feature allows users to build libraries to be reused and easily accessible to the whole team. There is no need to send updates as changes are saved and updated across all designs.
  • Vector Networks: Creating more complex shapes and objects are easier with the vector networks feature. With this feature, objects can fork off into different directions without the need to create a new separate path object.
  • Image Imports: Multiple images can be easily imported simultaneously and placed at the exact location intended.

Platforms: Web for windows and macOS

Price: Free (Starter), $12 per editor/month (Professional), $45 per editor/month (Organization)

Adobe XD

7 Best UI Design Tools: Adobe XD

Adobe XD is a vector-based tool that is used for designing interfaces and prototyping for web and mobile applications. Adobe takes a similar form to Illustrator and Photoshop but focuses on UI design. An advantage for Adobe XD is that it comes packed with UI kits for Apple, Windows, and Google Material Design, which assists designers in creating user interfaces across all devices. Learn more about why you should use material design for your next project here.

Some other features include:

  • Repeated Grid: The repeat grid feature allows a seamless way to duplicate chunks of content while maintaining spacing. This feature can run both horizontally and vertically which can easily design elements like lists and grids.
  • Responsive Resize: This feature can automatically resize and adjust elements/objects that are on the artboards depending on the screen size or platform required.
  • Collaboration: Adobe XD can connect to other tools such as Slack which allow teams to collaborate from macOS to Windows.
  • Voice Trigger: A very unique and innovative feature introduced by Adobe XD which allow prototypes to be manipulated through voice commands.

Platforms: Windows and macOS

Price: Free (Starter Pack), $9.99/month (Single App), $52.99/month (Creative cloud all apps)

Invision Studios

7 Best UI Design Tools: Invision Studio

Invision Studios is an intuitive vector-based drawing tool with the capabilities to design, prototype, and animate. Studios is still a newer tool but thus far has demonstrated their strong ambition through their many available functionalities and impressive prototyping features. An added bonus includes the ability to transfer and open files from Sketch onto Invision, creating the possibility to design more interactive user interfaces than Sketch is capable of.

Some other features include:

  • Responsive Design: This feature saves plenty of time as multiple artboards are no longer needed to design for multiple devices. Invision Studios allow users to design a single artboard which can then adjust depending on the intended device.
  • Advanced Animations: Animating your prototype has gotten far more exciting with the several possible animations offered by Studios. Smart-swipe gestures, auto-layer linking, and timeline editing, you can expect higher fidelity prototypes with this feature.
  • Synced Workflow: To support team collaboration, Studios allow a synced workflow across all projects from start to finish. This includes live design collaboration and real-time changes with the ability to comment immediate feedback.
  • Exporting: For greater efficiency, Studios lets users export their designs onto Invision services to let others previous the work. However, this also includes the ability to export guidelines but also needed assets which can be available to download.

Platforms: Windows and macOS

Price: Free


7 Best UI Design Tools: UX Pin

UXPin is another amazing design tool with the capabilities of designing and prototyping. In comparison to other UI tools, UXPin is suggested to be an advantageous tool for larger design teams and for larger sized projects. Furthermore, UXPin includes UI element libraries that allow access to Material Design, Bootstrap, iOS libraries, and several available icons.

Some other features include:

  • Accessibility: This feature allows users to check if their designs follow WCAG contrast standards.This feature has the capability to view their designs from the perspective of 8 different types of colour blindness.
  • Expressions: Designing prototypes on UXPin is more than just linking static screens, with the expressions feature, users are able to use JavaScript to create computational components for a higher-fidelity prototype.
  • Conditional Interactions: Another unique feature includes conditional interactions which allow an added layer of logic. Rules can be set in place to create specific interactions. This feature allows for better visualization of possible user interactions when designing UI.
  • Collaboration: Sharing work is not just limited to the team but UXPin created an efficient way for stakeholders and developers to view the prototype, components, and specs.
  • Design System Portal: Guidelines, assets, and components are located in one place which allow anyone to easily access documentation and codes.

Platforms: Windows and macOS

Price: Free (1 prototype), $20/month (Professional), $79/month (Team)

Framer X

7 Best UI Design Tools: Framer X

Framer X is one of the more latest design tools that was released in 2018 to design digital products from mobile apps to websites. The most exciting features of Framer X is the ability to prototype with advanced interactions and animations while also integrating the components of the code. Users who have used React.js find that they can now design and code under one platform. Furthermore, Framer X offers the ability to create very realistic prototypes which can help in demonstrating the finished product to clients or stakeholders.

Some other features include:

  • Interactions: With the provided interactions, rapid prototyping is quick and simple as this feature allows the ability to create 3D effects or more realistic flows.
  • Components: Framer X provides components that can be used to create designs from scratch or through code. These components can be designed custom-made and reused across all projects.
  • Design Store: To save time there are multiple resources available including UI kits, live maps, media players, and more, to assist in creating amazing UI design and they’re all free!
  • Stacks: This feature is useful when designing UI elements for lists and grids. It has the ability to automatically distribute and align your designs.

Platforms: macOS

Price: Free (14 day trial), $12/month (personal)

7 Best UI Design Tools: is also on the list for designing and prototyping. This tool can take you from hand-drawn designs to wireframes and finally higher-fidelity prototypes. Furthermore, uses a drag-and-drop system which means that designing user interfaces are made simple and efficient for experienced and non-experienced designers. There is no coding required and includes the option of importing files from Sketch, Photoshop or assets from Dropbox.

Some other features include:

  • Sharing and Collaborating: As a web tool, allows users to easily share their work with a single link and has the capability to automatically save changes to the prototypes.
  • State Transitions: With no coding, this feature allows the creation of beautiful animations, quick and easy.
  • User Testing Integration: To create the greatest UI experience, testing user interfaces is key. provides a feature that allows the support of user testing platforms like User testing and Validately to test prototypes and to receive immediate user feedback.

Platforms: Web

Price: $24/month (Freelancer), $40/month (Startup), $80/month (Agency), $160/month (Corporate)

Final Thoughts

In summary, these are only a few of the many available tools for UI design. Several others are upcoming and still in their early beta phase, but the mentioned tools above are the most commonly used applications preferred by several UI/UX designers.

Each tool carries its own advantages and its own unique features. Deciding which tool to use is based on your own preferences from designing alone or as a team, from built-in UI kits to starting from scratch.

All in all, you can expect these tools to continuously improve as they frequently roll out updates to ensure users can create the best UI design for great user experience.

What Next

Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.


Digital Innovations within Retail: Current and Future Trends [Infographic]

In the retail industry, there has been two evident shifts. One is an increase in technological use, and secondly, changes in consumer behaviour.

Currently, there is now a higher expectation to have more convenient alternative to shop which is resulting in digital innovations within the retail industry.

In February 2019, Tesla’s CEO Elon Musk, announced a plan to eliminate show rooms and physical retail locations transitioning into only an online approach.

According to Elon Musk, this change will increase attention to customer service and enable a more effective way to sell cars.

[qodef_blockquote text=”This is 2019 – people want to buy things online – Elon Musk.” title_tag=”h2″ width=””]

Several companies are beginning to develop an online shopping method while others are slow to catch up on the trend resulting in bankruptcy such as Claire’s and Toy ‘R’ Us.

This article will discuss the current trends amongst the retail industry, and the future trends that are expected to change the way consumers currently shop.

Current Retail Trends


In between the years of 2000 and 2018, online retail has grown to 300% while simultaneously, department store sales have dropped down to almost 50%. This is followed by several companies like Gap, JCPenny, and Claire’s declaring bankruptcy and store closures.

While companies like Amazon continue to dominate online retail. According to a new study by Feevisor, 74% of consumers go to Amazon immediately to purchase specific products and by the end of 2019, Amazon will account for 52.4 of the e-commerce market in the US.


Consumers are now finding other ways to purchase their items at lower prices. As a result, consumers are diverting to thrifting at thrift stores or buying used clothing online. As a result, retailers are losing customers due to their full retail prices that consumers no longer want to pay for.



In the US Buy Online Pickup In-Store (BOPIS) orders accounted for 21% to 30% of online revenue among the respondents.

Furthermore, according 28.8% of US retailers reported internet orders and in store pickup to make up 11 to 20% of their sales.

Another retail alternative are mobile applications that account for 59% of online shopping.



As online shopping becomes more prevalent, this also brings out the challenges that come with it. For example, in association with BOPIS, 45.6% of retailers surveyed by Signifyd found challenges within their logistics and inventory tracking. While 16.1% of retailers found challenges within fraud and customer information security.

Future Retail Trends


As customers continue to use online avenues to shop, this means that digital marketing is gaining greater importance. According to Gartner’s 2018: Retail Industry Insight, digital marketing is considered to be one of the top areas for spending in business.

This makes sense, as digital marketing can help retailers connect with their shoppers and attract more exposure to their brand.

Using methods like, digital coupons or monthly newsletters can increase their exposure and ultimately invite more customers.



In order to enhance customer experiences, companies will begin exploring a new method of retail shopping called: Omni-channel.

Omni-channel is referred to as a new digital approach to shopping that intends to create a seamless connection between in-person and online channels. This approach is meant to provide customers with alternative and more convenient options.

For example, as a way to compete with Amazon, Walmart announced a plan to introduce their new “order – by – text service”. This allows Walmart customers to shop via text message and receive same day delivery.

This technology can also create personalized shopping experiences through product suggestions and reminders to purchase products the customer may be running out of.



In order to keep up with the increased use of web and mobile applications, companies are also innovating the in-person shopping experience with AI technology. Amazon, for example, has begun opening stores that require no cashier which eliminates check out lines. Amazon Go, is a fully – automated grocery store which allows customers to easily walk in, scan the items they wish to purchase and leave. Amazon will then charge your account which means no wait times with a quicker paying process.


Another in-person shopping experience alternative is the introduction of augmented reality. This allows customers to virtually try on items from clothes or makeup using AR technology. This is a game changer as it presents a quicker and more convenient way to shop. Sephora, for example, has a mobile application that allow their customers to virtual try makeup in real time.

UX Design Trends


With future trends like AI an AR rolling out, this indicates greater importance to improve in-person experiences and how to effectively maximize the advantages of this technology.

Especially with online shopping alternatives, retailers will need to pay closer attention to customer needs and pain points.

Customers require more than just a hello as they walk through the door, but they are looking to find the most convenient and quickest way to shop while satisfying their budget.

[qodef_blockquote text=”To exceed consumer expectations consistently, brands must ensure those customer interactions are rooted in empathy, genuine engagement, and emotional intelligence – Chris Guillot.” title_tag=”h2″ width=””]


As consumers continue to demand more from retailers, this will increase challenges. Therefore there is a greater need to satisfy both business perspectives and customer goals.

There are already evident challenges within the BOPIS service, however, with UX design there could be solutions that can be explored to overcome these challenges and satisfy both parties.

In summary, the retail industry has a few challenges coming their way as retail companies continue to explore other possible alternatives to shopping. Retail companies are trying their best to come up with the next big thing and to create a greater competitive edge. But in doing so, this also highlights opportunities for user experience design to enter and assist to create a greater customer experience to ensure quicker and more convenient ways of shopping exist and ultimately to keep up with the demands off consumers.

Full infographic:

Digital Innovations within Retail: Current and Future Trends [Infographic]


What Next

Idea Theorem is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.


The Evolving Fintech Industry: Current + Future Trends [Infographic]

In the finance industry, there has been an emerging innovation that focuses on improving financial services with the use of technology. Smartphones and cryptocurrency are just a few technological examples that are becoming more regularly accessible. This is called Financial technology, also known as Fintech.

Fintech is defined as a combination of technology and finance, where technology is integrated to improve the delivery methods of financial services.

This evolving industry has resulted in the introduction of startup companies, along with stronger already established institutions that intend to transition and enhance their current financial services.

In the last year, 2018, fintech investments were up to $30.8 billion from 2011 where it was reported $1.8 billion in investments. This demonstrates a significant increase in interest which is making this industry so successful.

Current Fintech Trends


In 2018, it was reported that countries such as the United States, United Kingdom, and China are accounting for 39% of fintech deals which shows the capability of a growing industry on a global scale.

Among these countries, Asia is reported to have the biggest boost in deals with 38% YOY as funding has been raised to $22.65 Billion.


With an increasing interest in fintech, 16 fintech unicorns have emerged in 2018 alone. The term unicorns are to represent successful privately held companies that are valued at one 1 billion.

Currently, 38 fintech unicorns exist globally with a value of $147.37 billion.


In 2019, it was reported that fintech firms are  beginning to expand their lines of business resulting in the following:

  1. Smaller financial companies to be bought out.
  2. An establishment of partnerships between companies
  3. The rebuilding of their offered services to create a competitive edge.


Fintech companies are racing for customer deposits. Attaining deposits means acquiring money through interests and a possibility for future products (for eg. savings and investment accounts). This will set companies for future growth.


In a survey conducted by Morgan Stanley in 2017, it was reported that millennials are


86% very interested or interested in sustainable investing

61% made at least 1 sustainable investment action in the last year

75% think their investments can influence climate change

This indicates that millennials are currently looking for choices that have a positive return on investment (ROI) and impact. This is good news for fintech companies that intend to establish services for specific markets.

Future Fintech Trends


As blockchain begins to evolve from a retail focus to more institutional use, blockchain is expected to become an essential part of fintech. Blockchain will assist in tracking the lifecycle of a financial transaction, create security, and assist in the functionality of financial services.

According to the global market, blockchain is expected to reach 7.6 million USD and with 77% of financial service, incumbents to adopt blockchain technology by the year 2022.


Advances in robotics and AI will assist in reducing costs and mitigate risks among financial services. This technology contains the capability for natural language processing, contains physical sensors and the ability to navigate, and a social-emotional intelligence which will allow the completion of complex tasks throughout the full cycle of a financial transaction.


In 2016, a global CEO survey reported 69% of financial services CEOs were somewhat or extremely concerned with cyber-threats. It is suggested that due to the changes in the following years, such as third-party vendors, advancements in more complex technologies, and increased use of mobile technologies by the public, this will generate an increase in security threats. Fintech companies will need to develop new ways to address these situations.


With the spread of mobile technology, there is also an emergence of contactless payment systems like Alipay and WeChat Pay. Contactless payment systems have been willingly adopted and actively used in Asia, specifically China, where it is demonstrating a huge interest to transition to a cashless economy.

In China, it is reported that

38% of the public use WeChat

54% use Alipay

8% choose to use other options.

What does this mean for UX Design?

As technology and advancement in the fintech industry continue to evolve, what are some of the UX design trends that can emerge in the fintech industry?


One of the key factors that will affect the development of the financial industry is customers and their needs. As technology advances, fintech companies will begin a more customer- centred approach in order to understand the capabilities of this technology with customer intelligence.

In future years, companies will begin to find ways to understand customer interaction in order to develop a seamless connection between technology and humans.


To enhance customer experiences means to create a personalized experience for each customer. As a result, the customer will be encouraged to see financial services as more than just service providers. This can influence the impact of customer experiences through the generation of a positive response.

This requires a specialized understanding of how to map a customer journey through financial services and find ways to maximize their experiences. This could relate to enhancing the functionality of financial services, identifying user insights, or increasing the speed and convenience of these transactions.


Companies that understand the benefit of proactive insights can leverage themselves among other companies as this can provide predictive analytics. This will lead to a better understanding of how to improve services for their customers. Additionally, this can lead to services that can combat risks to cyber-security through services that offer fraud prevention, and ultimately lead to enhanced customer experience.


With the advancement of AI technology and AR/VR, this brings greater importance in customer interaction. UI and UX principles will be required to assist in creating a seamless engagement between humans and AI/AR/VR technology.

Ant Financial Group introduced a VR-based payment service which allows customers to shop and pay in VR mode.

To know more about UX guidelines for fintech have look here.

Full infographic:


In summary, the future of financial companies and fintech will demonstrate a highly integrated technological advancement which might require changes in their platforms, offered services, and business models.

Year by year there is an emergence of fintech unicorns and the act of partnerships, rebuilding, or buying of other companies. How does one find leverage? Through a more customer-based approach, this can create a more positive customer experience which will lead to greater ROI.


What Next

Idea Theorem is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.


The Emergence of Digital Health Care: Current and Future Trends [Infographic]

In the health-care industry, there has been an increasing shift from illness to wellness. People are beginning to look at other options for managing their personal health, resulting in increased adoption of virtual care options.

This resulted in the emergence of digital health. Digital health is defined as the integration of digital technologies within healthcare and living wellness. The purpose is to enhance the efficiency of personalized care and medicine to assist in managing illnesses, promote health, and wellbeing. These technologies can include software solutions and services like telemedicine, mobile applications, wearable devices and remote monitoring sensors.

This article will discuss the current healthcare trends involving digital technology, and the future trends we will see in the next decade as digital healthcare continues to evolve.

Current  Digital Healthcare Trends


In the most recent years, current trends of digital health are starting to demonstrate a shift from non-adopters of technology to current digital health users. According to a National Physician survey in 2014, 75% of Canadian physicians have begun using electronic medical records instead of the traditional paper method. With the use of electronic medical records, it is suggested this will increase productivity and keep a better track of each patient and their records.


This advancement in digital health is due to a change in the patient’s needs. They require more attention and higher quality healthcare. They want to see changes in the overall procedures and more immediate attention when requesting assisting.

A report by Transcend Insights, 93% of patients with healthcare providers had full accessibility to their medical history. Majority of patients believe it is extremely important for health care providers to know their full medical history in order to receive high-quality healthcare.


A study by Rock Health demonstrated 46% of consumers reported to be digital health adopters, whereas the number of digital non-adopters was 12%. This indicates an open-mindedness to adopting technology order to manage their own personal health.

Furthermore, in the Transcend Insights report, 74% of patients stated it would be helpful for doctors to have access to this information – extracted from digital health devices – to ensure it is a part of their medical history.

In summary, this demonstrates two needs. Firstly, a rise in the desire to manage personal health using a digital device and secondly, the importance of healthcare professionals to have access to this information.


While these current trends show a strong need for the integration of digital technology into health care, there has also been discussion over the harm that may come along with this advancement.

According to Pew Research Center and Imagining the Internet Center, their report observed the opinions of 1150 technology experts. When asked about the impact of digital technology in health care, there was a small margin between harmful and not harmful. Out of the technology experts, 47% suggested that an individual’s well being will be more helped by digital life. Whereas 32% suggested that an individual’s well being will be harmed with digital life.

However, among those who believed digital technology will be helpful reasoned that digital tools are used to find solutions to problems which can assist to enhance overall lives and improve productivity.

Future Digital Healthcare Trends

TREND#1: Emergence of Personalized HealthCare

In addition to current trends, future trends have become evident in the next decade to come. For example the emergence of personalized healthcare. As stated before, with a strong desire to adopt digital technology among consumers and patients, there are estimated to be 250,00 health applications available on mobile.

However, this also raises concern as these applications do not carry clinical validation which implies that physicians and nurses do not have training in mobile or digital health.


Despite so, another future trend in digital healthcare is the integration of technology into the actual healthcare clinical process and medical routine. This suggests a rise in technological solutions for medical documentation and workload to allow doctors to give full attention to their patients.

Optum Reports stated that with virtual care, this can provide 20% faster appointments resulting in a 60% decrease in missed appointments and a 25% reduction in hospitalization rate and length of stay.


Finally, there will be a future trend towards the advancement of AI such as chatbots, virtual assistants, and robots to combat depression, assist in ageing, stroke rehab and even surgical procedures.

According to Rock Health, AI companies have raised their budget to $2.7 billion in 206 deals between the years of 2011 and 2017 suggesting that by 2026, U.S healthcare involving AI applications can create up to $150 billion in annual savings as it helps the productivity of frontline clinicians.

AI technology can revolutionize the experience of health care, with patients receiving quicker clinical aid or diagnosis, it can also impact workflow and administrative tasks, and advancements in surgical processes. By the end of 2025, the market of digital health will be estimated to reach  $536.6 billion.

What does this mean for UX Design? 

With the emergence of digital health care, this will soon change the UX sector and become a key component in how this advancement will affect society. Digital health care will increase opportunities and develop new areas of UX work. UX design will impact the needs of patient’s and will affect the outcome in their experience with healthcare. This will ultimately affect everyone’s quality of life.


As stated above, the patient’s are beginning to change their needs and wants. UX Design has the capability to identify these needs and paint points, especially with a growing number of diverse patients. UX design can provide solutions that will allow patients to gain control over their own health experiences and wellness.


Eventually, UX design will be a necessity to create a seamless connection between patients, caregivers, healthcare professionals, and digital health. Especially with individuals beginning to demonstrate a desire to manage their own health with mobile devices, this shows a need for better user experience.


With more health-related apps emerging on mobile and becoming more readily accessible, UX Design can assist in the normalization of personal digital health. Currently, there are devices that manage health from the number of steps walked, to the amounts of hours you sleep every night. These applications are still in the early stages of its greater potential and can eventually produce greater means of managing one’s own health.

In summary, in the next couple of years as digital health continues to grow and as it begins to integrate more advanced technology, UX Design will also find a greater purpose in this fast-changing industry. Patient’s and health care professionals are demonstrating a desire for greater solutions in the health care process. But there is also a desire to find ways to receive and provide higher quality health service. UX Design can assist in this mission, by solving the problems they may face and to design for better user experience in healthcare.



What Next

Idea Theorem is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

User Interface

Why use Material Design for your next project?

What is Material Design?

“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”

Matías Duarte, Vice President of Design, Google

Material is a metaphor of paper. It is a flat surface that can hold content, cast shadows and stack on top of other surfaces. It also has the capability to expand and shrink in size.

Why use Material Design for your next project?


Why Material Design?

[qodef_blockquote text=”Material Design takes care of the UI and lets you focus on the UX” title_tag=”h5″ width=””]

Material Design has detailed guideline about how a component should look and behave.

The guideline includes font sizes, dimensions, margin and padding for each component. Following these specs will help you create layouts that look familiar to users. An easy way to apply Material Design is to utilize a material library. A material library allows you to save time designing individual components and focus more on the overall experience, workflow, and branding. At the end of this article, you will find a list of useful material libraries.

Why use Material Design for your next project?
Specs for a data table


Have you ever wondered about the meaning of the red, blue and green color in the specs? Click on the image to reveal more details. Here you can view the measurements, font size, and weight, corner radius and elevation. You can even manually measure elements using the ruler tool at the bottom of the page. On this page, you can find all the relevant details to reproduce the component.

Why use Material Design for your next project?
Detailed specs for a data table

Material Fundamentals


Material Design uses density-independent pixels (dp) as its unit of measure. As the name suggests, this measure is independent of the screen density (dpi: dots per inch). It ensures components all look the same regardless of the screen dpi.


The concept of elevation is fundamental in Material Design. When a layer is elevated from the surface, it will cast a shadow. The shadow is cast by two light sources: ambient light and key light. Ambient light shadow looks soft and goes in all directions, while the key light shadow is directional and sharp. A combination of key light and ambient light shadow creates the realistic looking for an “elevated surface”.

Why use Material Design for your next project?
Shadow cast by two light sources: ambient light and key light

In Material Design, all components have a predetermined elevation value indicated by dps. A 1dp elevation means the distance between the top and bottom surface is 1dp along the z-axis.

A component with a higher elevation value will draw more attention because it appears closer. For example, a floating action button is a primary action on a page, and it has a 6dp elevation, higher than elevation for other components like cards (1dp) and app bars (4dp).

Following the elevation, values will create a familiar environment as users have seen most of the components and know what to expect.

Why use Material Design for your next project?
Elevation values for different components


Enterprise products usually have a massive amount of data and require efficiency to location information. Hence high information density is often preferred in enterprise products. Learn more about Dashboard Design Guidelines for enterprise products.

Material Design provides the option to achieve high information density without reducing usability. Material Design specifies where to apply density (data tables and lists), and where not to (pickers and dialogs). While the guideline does not provide high-density specs for each component, It highlights the touch target minimum (48 x 48 dp). Keep in mind the minimum touch target when applying density will ensure users can effectively interact with the system.

Why use Material Design for your next project?
Touch target minimum


Knowing what components Material Design has for navigation, content, controls, and feedback will allow you to bring creativity and more freedom to the design.

Navigation Components

An application can have one or multiple navigation components at the same time.

  • App bars (top & bottom
  • Backdrop
  • Bottom navigation
  • Navigation drawer
  • Tabs

Content Components

Content components act like holders for contents in different formats.

ComponentContent Type
CardAll other components (pretty much)
Image listImages
ListImages, text (primary, secondary, metadata), controls, dividers
Data tableText, numbers, controls, tooltips, menus, text boxes, icons
Sheets (bottom & side)Icons, text, controls, dividers

Alert / Feedback Components


Selection / Control Components

  • Chip
  • Radio button
  • Checkbox
  • Switch
  • Menu
  • Slider

Mobile-friendly design

If you’re designing for mobile, you can find many options to enhance usability. For example, You can choose from a navigation drawer, a backdrop, tabs or a bottom bar to define the navigation structure for your application. You can also use a contextual app bar for task-specific actions, and expendable cards for progressive disclosure. Learn more about Mobile App Design.

It is important to ensure consistency across different screen sizes. Material Design uses responsive grids with 4-column, 8-column and 12-column grid layout at different breakpoints. A breakpoint is a screen size at which the layout needs to be adjusted to fit the screen. For example, when moving from mobile to tablet, the grid will change from 4-column to 8-column, and UI elements need to be reorganized in a consistent way.


Sketch Material Design template

Why use Material Design for your next project?

The Material Design Template in Sketch is a handy library to quickly find components like controls, cards and dialogs. It saves time since you don’t have to reproduce a component from scratch.

Sketch Theme Editor

Why use Material Design for your next project?

The sketch theme editor is a great tool to quickly visualize your branding style. You can change the theme color, typeface and corner style utilizing the options on the theme editor panel and see it apply to all screens in the document. You can easily get a sense of overall look and feel for your product with this plugin.

Material UI

Why use Material Design for your next project?

In this Material Design UI Kit you can see how each component would behave on a real application.


What Next

Idea Theorem is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.