Dashboard is an essential part of most apps. It summarizes key events within the application or shows stats that can be used for further analysis. That’s why it’s so common in business tools for teamwork, sales, marketing, and other apps. 

At first, dashboard design seems complicated – it integrates loads of information and datasets. When you actually get to create one, it can be quite easy to put together. The key thing is to have out-of-the-box components that will help you guide design decisions.

In this article, we will walk you through designing a responsive dashboard with a coded component library – Material UI, one of the best, thoroughly documented libraries of ready-made elements.

Create responsive layouts blazing fast. Drag and drop fully interactive elements to assemble professionally-looking UI in minutes– as easy as pie. Discover UXPin Merge.

Create beautiful layouts without designers

Take UI components directly from Git repo, Storybook, or through NPM and design production-ready prototypes.

Bring code to design

Why use MUI components to build a dashboard

MUI created its design library following Google’s Material Design standards. Back in the day, it was a revolutionary component library, helping React developers build responsive layouts faster. It is still relevant to this day, as the MUI team continues to evolve its library, releasing new versions every now and then. To read more about it, check out our article about MUI.

MUI is full of data display components

MUI offers many user interface elements that are perfect for dashboards. They’re customizable to a great extent. Let’s highlight some of them:

• Cards – You can create cards representing a specific data point or a group of related data that you want to highlight.
• Data table – MUI published to a clean-looking React component that has built-in sorting and filtering features.
• Date and time pickers – If you need to be super specific and sort by date or time, Material-UI components have you covered.
• Input components – You’ll find every type of button and input field you’d like to have in a data table, be it a checkbox, rating, select, and more.

It’s a well-documented library

Material UI is one of the most documented UI component libraries. It has comprehensive official documentation, stemming from its commitment to keeping the documentation aligned with the evolving nature of the library.

Aside from the effort of MUI’s team to keep its library up to date, the library enjoys strong community support. Developers often share tutorials on building apps with Material UI and they’re ready to help out others. 

It is accessible and responsive

There are two major characteristics of MUI: accessibility and responsiveness which are key when it comes to modern interface design.
MUI places a strong emphasis on accessibility. Its documentation contains tips on accessibility best practices, including using ARIA attributes. When it comes to responsive design, MUI is one of the best component libraries to use. You can easily create responsive layouts that will work across devices and screen sizes.

How to Build a Simple Dashboard with MUI components

We’ll show you how to use UXPin Merge to build a simple – yet fully functional and responsive – dashboard with MUI components. If you want to follow along, create a UXPin account or log into it if you already have one.

Here’s what we’re going to create. To see it up close, inspect its code, and see how interactive and responsive it is, open this UXPin preview.

Step 1: Create a new prototype

When in UXPin’s dashboard, start by creating a hover on “Design with coded components” and pick MUI library.

An editor will pop up. In the center of it, you have a canvas. It’s your work field. Adjust the canvas size to match the device you want to design your layout for. You can do that in the right-side menu. In this menu, you can also change the background colors and add grids to help you align elements.

On the left side of the canvas, you have a menu where you can find all the pages and layers or ready-made components. To find the MUI library, go to Design System Libraries in the bottom left corner and pick MUI V5 (you’ll find it under Merge libraries.)

Now, you can click on any component you like and drag it onto the canvas or just click on it to have it appear in the center. See how easy it is.

Step 2: Access ThemeCustomizer

Open the MUI library and search for ThemeCustomizer – you can use the search bar. It will come in handy when you want to adjust the look of your MUI components. Place ThemeCustomizer above and outside the canvas, so you’re able to navigate to it easily.

Step 3: Place MUI components on the canvas

Pick the components that you want to design with. Start with navigation, such as an app bar and breadcrumbs UI elements. The app bar will help users access other pages and move around the app. When it comes to breadcrumbs, they allow users to orient themselves within the app. Watch this part of the tutorial: 

You can easily adjust the size of the components by clicking on their corners and expanding or contracting them. 

We’re also pulling out:

• Cards – We will duplicate this component to highlight different insights.
• Paper – It will be our textbox.
• Typography – We drag it out of the library and put it into the Paper components. It helps us manipulate fonts.
• Table – It will be our data table that we can sort through.

Now that we have the components ready. We can switch their theme with ThemeCustomizer which we placed above the canvas.

Step 4: Customize components

Now the fun part! Move the components around, fill them with your own content and data, and edit their padding and size. Arrange them in any way you want. This is also a step in which you can create complex components from the basic ones.

Just look at how we took our textbox components and copied a few children inside. Then, we filled them with real content, adjusted text size, and added padding. Same goes with the table. We added more rows by simply copying the Table cells and pasting them in the Pages and Layers panel. 

Step 5: Set up grids and layout

Make sure that our layout can be responsive. Push your components out of the canvas for a moment and place the layout elements in. Here’s how you can do it.

Start with a container for a menu. Place the container on top of the canvas, resize it to fit the width, and place the app bar back in. Make sure that your container is set to “responsive.”

After that, drag a box for our breadcrumbs and put grids for our data table, cards, and text boxes.

It’s super easy to do that because you are just moving the components in the menu, copying the grids, and placing different components inside of them.

Step 6: Preview and share your design

You are ready to see your dashboard and share it with others. Go to “Share,” copy a URL to preview the prototype, and paste it in the browser or click the preview button ▶️. 

Do you have it? Great! Now, you can change the size of the window to see if your prototype adjusts its size as a truly responsive design would. Share your link with others, so they can preview it too.

Step 7: Develop the dashboard

The design is done, so the last step is to copy the code into your React application.

We have provided a starter React App boilerplate, containing all the dependencies and configuration needed – or begin editing right-away in CodeSandbox or StackBlitz (click to go to the preferred one.)

Installing and running the React App Boilerplate:

1. Download or clone the Starter React App boilerplate repo
2. Install the project by running: npm install
3. Run the project by running: npm start

Importing the theme:

1. From UXPin’s spec mode, copy the JSX of the ThemeCustomizer component.
2. Paste JSX into the theme.js file of the project

Here is a video example of using the starter React App repository.

Importing the components:

1. From UXPin’s spec mode, copy the JSX of the desired component composition. 
2. Paste JSX into to the App.js file
3. Make sure you have added import statements for each component that you are importing from MUI. Example: import Button from ‘@mui/material/Button’

For the more in-depth instructions, see the last part of CoderOne’s video tutorial.

Build layouts 10x faster with UXPin Merge

That’s it! You’ve now set up a new dashboard for your app that is fully responsive and consistent with the MUI component library. Check if your dashboard looks exactly, as the dashboard in our Preview.

With UXPin Merge, you can build way more than just dashboards. Create full user interface designs of apps, websites, and other digital products that can be easily translated into code – without advanced design skills. Get started with UXPin Merge.

The post How to Design with Coded Components – Simple & Responsive Dashboard Tutorial appeared first on Studio by UXPin.

Creating wireframes is a critical step in the UX design process, serving as the blueprint for the final product. This guide offers an in-depth look at how to build effective wireframes using UXPin, an end-to-end design tool that stands out for its code-based technology and built-in features. 

The article provides a detailed, step-by-step approach, from assembling basic UI elements to incorporating user feedback. Learn how UXPin’s unique features, like interactive form elements and code-to-design capabilities, can streamline your design process, improve collaboration, and contribute to a more intuitive user experience.

Key takeaways:

• UXPin offers code-based wireframing capabilities that enable designers to create fully interactive and functional wireframes.
• UXPin stands apart from other design tools by offering built-in features like design libraries and advanced prototyping capabilities.
• UXPin facilitates a seamless transition from wireframing to high-fidelity prototyping, allowing for complex interactions and even API integrations, making it a comprehensive full-stack design solution.

Streamline your design process and build wireframes faster with UXPin. Sign up for a free trial to explore UXPin’s full-stack design solution.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a UX Wireframe?

A UX wireframe is a low-fidelity visual blueprint representing a user interface’s underlying framework. Typically devoid of color, graphics, and intricate details, it primarily focuses on space allocation, content prioritization, and intended functionalities. 

Designers craft wireframes in the early stages of the design process to communicate the structure of a webpage, app, or system. Their primary purpose is to establish the basic layout and interaction patterns before diving into detailed mockups and hi-fi prototypes.

What are the Benefits of Wireframing?

Wireframing offers a range of benefits that streamline the design process and foster effective communication among team members. Here’s a rundown of its advantages:

• Clarity: Wireframes remove ambiguity by visually representing the layout, providing a clear roadmap for everyone involved.
• Efficiency: By resolving issues early, wireframes save time and resources in the later stages of development.
• Alignment: Wireframes help align stakeholders and team members on the project’s goals and functionalities.
• Usability: They provide an opportunity to assess the user experience, ensuring intuitive navigation and layout.
• Collaboration: Wireframes serve as a tool for discussion, allowing designers, developers, and stakeholders to offer early design feedback.
• Prioritization: They help identify the most crucial elements of a design, allowing for effective content hierarchy.
• Flexibility: Wireframes make it easier to iterate and make changes, serving as a lo-fi model for experimentation.
• Architecture: Wireframes provide the foundation for a digital product’s information architecture.

Is UXPin the Right Tool for Wireframing?

UXPin is an end-to-end design tool with excellent wireframing capabilities. Designers have several features to create interactive wireframes effortlessly:

• Box: a flexible UI element that allows you to add text
• Shapes: rectangle, oval, circle, rounded, line, arrow, polygon, and star
• Text: basic text block
• Forms: a set of foundational unstyled form elements, including a button, textarea, select/multi-select, checkbox, and radio button
• Hotspot: make any element or a specific location on a UI interactive
• Icons: choose from several icon sets, including Material Design, Fonts Awesome, Retina Icons, and more.

Unlike other design tools, UXPin’s UI elements are interactive by default. For example, all UXPin’s Form elements are fully functional. You can drag a checkbox or radio onto the canvas, and it already has clickable on/off interactivity.

These interactive elements allow design teams to gather more data and feedback during the wireframing process before moving to the design process’s more costly, high-fidelity phase.

What is the Difference Between UXPin and Other Wireframing Tools?

UXPin’s most significant differentiating factor is that the platform uses code-based technology. Rather than generating vector graphics like Sketch or Figma, UXPin renders HTML, CSS, and Javascript behind the scenes. 

This code-based approach gives design teams enhanced functionality to build fully interactive wireframes and prototypes. For example, in image-based tools, an input field is a graphical representation, whereas, in UXPin, it’s a functional input capable of capturing, storing, and sharing user data.

Built-in features vs. plugins

Another differentiator is that UXPin offers more features as standard than other wireframing tools, eliminating the need for plugins and extensions. UXPin plans come with Design Systems, built-in design libraries, Content and Data, Fonts (Google and custom), Accessibility Features, and much more–many of which would need plugins with other design tools.

Code-to-design

UXPin’s Merge technology allows design teams to import code components into the design process for prototyping. Designers can create fully functioning interactive prototypes using the same UI library devs use for the final product.

If your engineering team uses a specific wireframe component library, you can import this into UXPin using Merge. There are also several built-in Merge libraries, including Material UI, MUI, Ant Design, Fluent UI, and UXPin Boilerplate, which you can use to build interactive prototypes–allowing you to go from wireframing to high-fidelity prototyping to test concepts and ideas fast.

How to Build a Wireframe in UXPin

Here are ten steps for building a wireframe in UXPin, including gathering feedback and collaborating with stakeholders.

You will need a UXPin account to follow this step-by-step tutorial. Sign up for a free 14-day trial if you don’t have one.

Step 1: Open UXPin and create a new project

• Open UXPin and click the blue + New project button.
• Enter a project name and click Create New Project.
• The next screen asks, “What do you want to start with today?” Click New prototype.

Step 2: Choose the wireframe’s canvas size

Choose your wireframe’s canvas size in the Properties Panel on the right. UXPin provides a wide selection of standard viewports, including TVs, desktops, tablets, mobile, and wearables, to name a few. Use Grids and Guides to help maintain horizontal and vertical consistency.

Step 3: Create pages for each screen

Unlike Figma or Sketch, which use artboards and frames, UXPin uses a separate page for each screen.

• Select Pages & Layers at the bottom of the left sidebar,
• Click the + icon at the top of the sidebar to create a new page. You can also use the OPTION+N keyboard shortcut.
• Double-click on the page name to change it–we’ve created two pages: Login and Welcome.

Pro tip: Use the built-in User Flows library to design your user journeys and information architecture to determine the number of screens and navigational layouts for your project.

Step 4: Create wireframe UI elements

You can assemble wireframe patterns and layouts using UXPin’s Shapes, Forms, Boxes, etc. Auto-Layout lets you manage group elements effectively, including size, gap, alignment, distribution, and more. Use UXPin’s Components feature to create reusable wireframe elements for faster iterating and maximum consistency.

Step 5: Define interactions

We will add a basic navigation interaction from the Login to the Welcome screen for this demonstration.

• Click on an element to select it and click Interactions in the Properties Panel.
• Create a navigation interaction as follows:
  • Trigger: Click (Tap)
  • Action: Go to Page
  • Page: Select Welcome from the dropdown
  • Click Add to complete the interaction

Learn how to set up Interactions, including Triggers, Actions, Animations, and Conditions.

Step 6: Collaborate and gather feedback

How to go From Wireframe to Prototype in UXPin

Going from wireframing to prototyping is easy in UXPin. You can design your components from scratch to build mockups or use a design system to generate high-fidelity interactive prototypes quickly.

UXPin provides four key features to enhance your prototyping capability:

• States: allow you to create multiple states for a single UI element and design complex interactive components like menus, drawers, and more.
• Variables: capture data from user inputs and create personalized, dynamic user experiences–like a custom welcome message after signing up.
• Expressions: Javascript-like functions to create complex components and advanced functionality–no code required!
• Conditional Interactions: create if-then and if-else conditions based on user interactions to create dynamic prototypes with multiple outcomes to replicate the final product experience accurately.

Increase prototyping complexity with APIs

UXPin’s IFTTT integration allows you to connect external products and services through an API connection. For example, adding an appointment to a user’s calendar or sending an email, like a welcome message.

With UXPin’s Design Systems, advanced prototyping features, and API capabilities, you can create complex product replicas without technical expertise or input from engineers. These sophisticated prototypes enable you to get meaningful feedback from users and stakeholders to improve product user experiences.

Build wireframes and prototypes faster using the world’s most advanced product design tool. Sign up for a free trial to create your first interactive wireframe with UXPin.

The post UXPin Wireframe 101 – A Short Guide for Product Teams appeared first on Studio by UXPin.

UXPin is your all-in-one prototyping tool that helps designers collaborate seamlessly with devs, build production-ready prototypes, and streamline design systems’ scale and maintenance. Let’s see how you can use the tool to build a prototype. Let’s get you started.

Key takeaways:

• UXPin offers advanced interactive prototyping features like States, Interactions, Variables, and Expressions, allowing designers to create prototypes that are almost indistinguishable from the final product.
• UXPin’s design technology, Merge, merges design and development by bringing code components into the design process, increasing prototyping quality and scope.
• UXPin allows you to test advanced prototyping features and Merge technology while still on trial.

Follow this tutorial step by step. Get a trial of UXPin and tests its every feature, from prototyping to design handoff. Sign up for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Downloading UXPin for Desktop

Firstly, we recommend downloading UXPin’s desktop app. UXPin works in the browser, or you can download the desktop application for Mac or Windows.

While the experience is indistinguishable between the web and desktop environments, the desktop application allows you to work offline. It also mitigates any internet issues–your browser requires a stable internet connection, whereas the desktop app does not.

Navigating UXPin’s Dashboard

When you first open UXPin, you’ll see an empty dashboard with four tabs at the top of the screen:

Projects: This screen displays all your UXPin projects and files.

Design Systems: Displays any design systems you have created or people have shared with you.

Merge Component Manager: Shows your open-source npm imports.

Manage your team: View and manage team members you share projects with.

For this tutorial, we’ll focus on Projects and touch on Design Systems.

Learn about Merge Component Manager and the npm integration here.

Getting Started in UXPin

From your Project’s dashboard, click the + New project in the top left to create a project. Name your project and click Create New Project.

What do you want to start with today?

The next screen will ask you, “What do you want to start with today?” with three options:

• New prototype: opens UXPin’s design editor to start working from scratch.
• Import Sketch, images, or documents: opens a window on your computer to upload Sketch files, JPGs, PDFs, PNGs, or UXPin’s file format, UXP.
• Design with Merge components: opens UXPin’s design canvas with the selected Merge library, or you can +Add a new library–learn more about this later in the article when we cover UXPin’s Merge technology :)

Click New prototype to open the design editor.

Exploring UXPin’s Design Editor

We’ll give a quick overview of the design editor for this tutorial. Our documentation provides a deeper dive into the design editor and its features.

There are three primary workspaces in UXPin’s design editor:

• Pages & Layers and Design System Libraries on the left
• Design canvas center
• Properties Panel on the right

Pages & Layers

Once you add elements to the canvas, they’ll appear in the Layers sidebar, allowing you to select, group, and rearrange them here. You can view Pages at the top of this sidebar or click the + icon to add more.

The Pages workflow is different from other design tools. In Sketch and Figma, you have all your screens for user flows on a single canvas; in UXPin, you have a separate Page per screen. You can click the Overview icon (OPTION+O) to view all your screens in one interface.

Design System Libraries

Design System Libraries displays the components and assets for each design system. You can drag these onto the canvas to start prototyping or switch between libraries at the bottom of the sidebar.

Design canvas

The design canvas displays your screen’s width and height set in the properties panel. This is where you build your prototypes.

Properties Panel

The Properties Panel is where you control properties and interactions for components on the canvas. You can also set the grids, change the background color, and other global canvas settings.

UXPin’s Interactive Prototyping Features

Interactive prototyping sets UXPin apart from its competitors, allowing you to accurately replicate a final product experience. UXPin has four unique features for prototyping that you won’t find in other design tools:

• States
• Interactions
• Variables
• Expressions

States

UXPin’s States allow you to create component states comparable to code. For example, you can program a button to have a default, active, disabled, and hover state, each one triggered by a separate user or system action.

You can also use States to create complex UI components, like Carousels, Accordion Menus, and Multilevel Dropdown Navigation.

Interactions

UXPin’s Interactions allow you to define what happens when users engage with your prototype. Triggers, including desktop and mobile, enable you to create realistic, intuitive prototypes.

Actions determine what happens after the trigger. UXPin provides 20+ actions, including API requests, changing states, navigation, component property adjustments, playing video/audio content, and more. 

Conditional Interactions

Conditional Interactions let you set if-then and if-else conditions, similar to Javascript. These conditions set the rules to trigger different scenarios based on user and system actions. 

For example, you can set up multiple form conditions to trigger error messages for incomplete required fields or incorrect data, like an invalid email address. If all this data is correct, only then will the prototype allow the user to submit the form successfully.

Variables

Unlike image-based tools, UXPin’s forms are fully functional out of the box. You can use Variables to capture data from these forms and use them elsewhere in the prototype. For example, capturing a user’s information during a checkout process and displaying it on a confirmation screen for them to verify.

Expressions

UXPin’s Expressions are the closest you’ll get to Javascript without writing any code. With Expressions, you can add another layer of complexity, including validating forms, checking password criteria, or building computational components for shopping carts. 

When combined, these four advanced prototyping features allow you to create realistic, dynamic prototyping experiences indistinguishable from the final product.

Check out UXPin’s example apps and patterns to see what’s possible using States, Interactions, Variables, and Expressions. You can download these and import them to a UXPin project to look under the hood and see how these features work.

Component-Driven Prototyping With Merge Technology

Now we move on to UXPin’s Merge technology. Aptly named because it merges design and development by bringing code components into the design process.

If you’re using UXPin’s free trial, you can access three built-in Merge design systems in your Design System Libraries:

• MUI
• Ant Design
• Fluent UI

While these look like regular design elements from a UI kit, they’re actually React components pulled from a repository. We’ll use two seemingly identical buttons to illustrate the difference between Merge and a UI kit.

Both are Material Design buttons. The purple one is from Google’s Material Design UI kit, and the bottom one is from the MUI Design System–which uses Material Design as a foundation.

When we click the purple Material Design button, it displays UXPin’s standard Properties Panel, where you can create the component’s styling and interactions.

When we click the blue MUI button, the Properties Panel changes to the Merge variation. Instead of creating properties, you select them based on the React component’s available props–or Args if you’re working with the Storybook Integration.

For example, opening the color dropdown displays the MUI button’s color properties which match MUI’s documentation.

These properties give product teams the necessary constraints to build prototypes with minimal drift or inconsistencies.

Who is Merge for?

Merge is ideal for anyone–from startups to enterprises–who builds digital products using a design system. You can use one of UXPin’s built-in UI libraries or import your product’s design system for prototyping and testing.

If you have a design system, it must have code components for Merge to import from a repository. Learn more about design system maturity here.

Why use Merge?

Using code components in the design process enables designers to build prototypes that accurately replicate the final product. These code-based prototypes give stakeholders and users a realistic user experience, resulting in meaningful feedback for designers to iterate and improve.

Prototyping with Merge is also much faster than using traditional design tools. In one experiment, a client was able to build a one-page prototype in under 10 minutes vs. over an hour using an image-based design tool–and the Merge prototype had significantly more functionality and interactivity.

Bridging the gap between design and development

With traditional product development workflows, there’s a definitive handoff process from design to engineering. Engineers must convert prototypes and mockups into code.

With Merge, design handoffs are more seamless because devs already have the exact same components pulled from the exact same repository. Merge produces production-ready JSX so engineers can simply copy/paste to replicate the prototypes.

Get Started with UXPin

We hope you’ve enjoyed this UXPin beginner tutorial. If you haven’t got an account, sign up for a free trial. Build prototypes that can be easily translated to code. Enjoy a better design workflow. Get started here.

The post UXPin Tutorial for Beginners appeared first on Studio by UXPin.

Designers are always looking for ways to improve their prototypes–for stakeholder feedback, accurate user testing, and design handoffs. Figma is a fantastic design tool but lacks prototyping features, meaning designers must use external tools.

UXPin has a plugin for Figma called UXPin – Copy. Paste. Prototype. Designers can literally copy Figma designs to UXPin. Let’s see how it works.

Key takeaways:

• UXPin’s plugin for Figma helps you turn static Figma designs into interactive prototypes. that behave like an end-product.
• The plugin is free to use, but it needs to be installed in Figma.
• After clicking Command+V in UXPin (or Control+V), you can paste your Figma design to UXPin.
• Once you have a design copied to UXPin, you can add interactions (variables, expressions, and states).

Improve design project delivery and create better user experiences for your customers with the world’s most sophisticated design and prototyping tool. Test UXPin’s advanced prototyping features. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Figma and UXPin – What’s the Difference?

Unlike Figma, UXPin is a full-stack, end-to-end design tool. What does this mean?

Figma allows designers to design beautiful static mockups but lacks advanced prototyping features. Designers must use additional tools or rely on engineers to build interactive prototypes–adding time and resources to design projects.

UXPin is powered by code, significantly enhancing its capability for creating high-fidelity, fully functioning prototypes that accurately replicate the end product’s experience. Design teams can create prototypes and hand them off to developers for production without any extra tools that need to translate design to code.

What’s great about UXPin is that it has a technology for handling MUI, Ant design, Bootstrap, and other design libraries’ components that look and behave exactly like they do in the end product. Using it, you can prototype 10x faster and reach ultimate consistency between design and code. Read more about UXPin Merge.

Integrate Figma with UXPin for Collaborative Product Design in 7 Steps

Even though UXPin is an end-to-end design tool, we recognize that many designers love designing their wireframes and mockups in Figma. So, we created the UXPin – Copy. Paste. Prototype. plugin to allow design teams to export their Figma designs into UXPin for prototyping–the best of both worlds.

This step-by-step guide will demonstrate how to install the UXPin plugin for Figma, copy designs into UXPin, and what they can expect from UXPin’s advanced, interactive prototyping capabilities.

Note: UXPin – Copy. Paste. Prototype. works best with the Chrome browser or when copying from the Figma to UXPin desktop applications.

We’re using the Moood Music App UI Kits, which you can download from the creator, Fabrx’s website.

Step 1: Install the plugin

You’ll find the UXPin – Copy. Paste. Prototype. plugin in Figma’s Community. Click “Try it out” to install.

Step 2: Copy a Figma design

Open a Figma project and select the screen you want to copy. We recommend copying one screen at a time. Select the frame or drag your cursor around the components you want to copy.

Step 3: Activate the plugin

Right-click on the design, navigate to Plugins > Saved Plugins > UXPin – Copy. Paste. Prototype.

In Figma’s desktop app, the plugin will copy automatically. In Chrome, you must click “Copy to Clipboard” to trigger the copy process.

A message will appear at the bottom of the screen saying “Copied to clipboard” once complete.

Step 4: Paste into UXPin

Create a project in UXPin, and open it. Use the paste shortcut COMMAND+V or right-click Paste > Paste Here.

Drag the design to position it if necessary.

If you have more than one screen, add a new page and repeat steps 2 & 3.

Note: In Figma, you have multiple screens on a single artboard or view, whereas UXPin uses a single screen per page. You’ll notice this workflow is more intuitive when you create prototypes with interactions and page transitions.

Step 5: Add interactivity

Once you have imported your Figma designs, it’s time to create interactive prototypes in UXPin. We have several example apps and patterns demonstrating UXPin’s prototyping features. You can also follow our example YouTube video for this application.

Here are some examples of UXPin’s prototyping features.

A desktop Carousel example demonstrates three methods for creating animated carousels. One is automatic, while the other two rely on a click/tap trigger.

UXPin’s sign-up form example demonstrates how designers can create fully functioning forms that capture user data (using UXPin’s Variables) and use it elsewhere in the prototype–like a personalized confirmation screen.

The sign-up form uses a combination of Interactions and Expressions for dynamic error messages that respond to user inputs.

This stepper example shows how you can combine an interactive button with an input field–a standard eCommerce UI pattern. Users can use the + or – buttons to step up or down or use the input field to enter a custom amount.

The bottom line is that design teams can recreate in UXPin most of what engineers can do with HTML, CSS, and Javascript. Designers can connect to APIs using IFTTT (If This, Then That) to go beyond any image-based design tool’s capabilities.

Step 6: Share prototype with stakeholders

Stakeholder feedback is an essential part of the design process. The problem with image-based prototyping is that stakeholders battle to interpret designs, adversely impacting the design team’s ideas and buy-in.

UXPin prototypes look and feel like the final product, so there’s no confusion about what the designs should do. Stakeholders can interact with UXPin prototypes, including completing forms, making purchases, upgrading/downgrading plans, and more. 

Designers use Preview and Share to share prototypes in the browser or UXPin Mirror for mobile applications. They can also password-protect designs so that only those authorized can view them. 

UXPin Comments allow stakeholders to share feedback on prototypes. They can assign comments to team members who can action and mark them as resolved once complete. You can add these extra team members and stakeholders for free, allowing everyone to collaborate in UXPin without purchasing additional users for non-designers.

Step 7: Run usability tests

As with stakeholder feedback, designers can use Preview and Share to test in the browser or UXPin Mirror for native app testing.

With UXPin’s advanced prototypes, design teams receive meaningful, actionable feedback from usability participants, allowing them to identify more problems and opportunities.

UXPin uses a component-based approach to designs, meaning designers create fully interactive components rather than multiple frames as they would in image-based design tools. The result is fewer screens, making it easier and faster to test and iterate.

Step 8: Design handoff

Design handoffs are much smoother with less confusion in UXPin. Prototypes look and feel like the final product, giving engineers an immersive understanding of triggers, interactions, animations, and user flows.

Designers can include prototypes, design files, documentation, assets, and technical specs for engineers to examine. With final product-like functionality and fidelity, prototypes need less explanation and documentation.

Team members can use UXPin Comments to collaborate throughout the design handoff, keeping everything in one location, minimizing errors and “missed” files.

Create prototypes that are fully interactive

UXPin’s code-based features enable designers to go beyond what’s capable in image-based design tools like Figma, Adobe XD, InVision, and others.

Here are five UXPin features to take your prototyping to the next level.

States

Many design tools offer features to change component states, but these are limited to basic interactivity, like active, hover, disabled, etc. UXPin’s States enable designers to create complex components, including fully functioning accordions, multilevel dropdown navigation, and carousels.

Interactions

Interactions are the heart of any prototype or digital product. Without interactivity, the prototyping scope is severely limited. UXPin’s Interactions include multiple Triggers, Actions, and Animations to create immersive experiences that respond to user engagement and system changes.

Designers can use Conditional Interactions to design “if-then” and “if-else” conditions (similar to Javascript functions) to recreate dynamic “code-like” outcomes–as the user would experience using the final product.

Variables

UXPin comes with several form elements that respond to user engagement like they would in code. Designers can use UXPin’s Variables to capture user inputs and use that data elsewhere in the prototype.

In the sign-up form example above, the prototype captures data from the email input to tell that an email was sent to the address they entered and to check their inbox–accurately replicating a typical sign-up confirmation screen with dynamic user information.

Expressions

Expressions allow designers to increase prototype complexity with code-like functionality. Returning to our sign-up form, we used Expressions to ensure the email and password inputs met specific criteria and triggered error messages when they weren’t met.

Some of the data designers can use in Expressions include: 

• Numbers – matching numerical values
• Strings – text specified in double quotation marks, e.g., “Text”
• Content of elements – content of an element specified in single quotation marks, e.g., ‘Box’
• Function – any of the supported functions, e.g., length(string)
• Boolean values – true or false value

When designers combine these features, the possibilities are endless. They’re only constrained by code, thus enhancing prototype capability and developer collaboration.

Component import

Code import is a way to sync development components with UXPin. If you want to increase productivity, reach consistency, and collaborate better with engineers, here’s something for you. With this import, you can bring components from Git, Storybook, or npm, and speed up every part of product design process, from prototyping to design handoff.

Don’t let image-based design tools limit prototyping scope. Improve prototypes with UXPin for better stakeholder feedback and user testing. Sign up for a free trial and design the user experiences your customers deserve with the world’s most advanced design tool.

The post Figma Plugin Tutorial – Copy and Paste Design from Figma to UXPin appeared first on Studio by UXPin.

Date pickers are some of the most familiar UI patterns in digital product design. UX designers use date pickers on websites, applications, games, enterprise software, operating systems, and more.

Designers must understand how these date pickers will work across screen sizes, operating systems, devices, etc., to test the impact on the product’s aesthetics, functionality, and overall user experience.

UX designers can’t build date pickers using traditional image-based design tools…but they can with UXPin Merge! This technology allows you to import a fully functional date picker from Git repository or npm package, as well as bring one from Storybook.

The date picker that you will sync to UXPin will behave like a date picker in the end product. No need to link static artboards to create interactions! Request access to Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Date Picker?

Date pickers are UI patterns that allow users to choose a specific date, time, or combination of both–for example, selecting a date of birth. The purpose of these date pickers is to streamline date capture while ensuring format consistency.

Why are Date Pickers Necessary?

People worldwide use different date formats. For example, the United States places the month before the day (mm/dd/yyyy), whereas the UK uses the day, month, year format. 

Although these differences seem subtle, a database cannot distinguish whether the user uses the US or UK format. It can only decipher a date correctly in one or the other format. Let’s look at October 1, 2022, numerically:

• US: 10/01/2022 (10 January 2022 in the UK)
• UK: 01/10/2022 (January 10, 2022, in the US)

In this example, the database would interpret each entry as January rather than October.

Users can also enter this same date multiple ways and use different separators. Here are a few examples:

• Oct 1, 2022 
• Oct 1, 22
• 1 Oct 2022
• 1 Oct 22
• 10-01-22 / 01.01.2022 / 10/01/22 
• 22/10/01 / 2022/10/01

Date pickers eliminate ambiguity and ensure systems receive a consistent, accurate format by users selecting the day, month, and year individually.

Date Picker UI Design for Mobile vs. Desktop

Mobile Date Picker

It’s important for designers to recognize how mobile operating systems like iOS and Android display date pickers to users. The native iOS picker uses an infinite scroll UI, while Android applications use a calendar view displaying the entire month.

A mobile date picker aims to make it accessible to a user’s thumb reach. iOS allows users to scroll using their thumb, while Android’s UI is optimized for thumb taps.

While you can use a custom date picker from your design system, using the native options creates familiarity and reduces the product’s learning curve. If you decide to use native date pickers for mobile apps, make sure you’re not creating usability issues, as we pointed out with iOS.

Desktop Date Picker

Most desktop websites and applications use calendar date pickers. The extra space and mouse make it easy for users to choose a date with just a few clicks. Many products also provide an input field for users to enter a date manually.

Numerical date input fields work well on desktops too. UX designers must include a placeholder and helpful error messages to guide users toward the correct format.

5 Types of Date Picker UI Design

Numerical Input Field

The most basic date picker is a numerical input or text input field. These fields might include a modal popup with a date picker, or users must type out the date with separators.

Some products offer users the option to type the date or use a modal, like this example from US Web Design Systems.

Placeholders must show users how to format the date, i.e., MM/DD/YYYY. UX designers can take this further by applying an auto-format for the date where separators appear as users complete the month and day. Designers can also add helper text below, so users know how to complete the form. See the example.

Dropdown Date Selector

Designers commonly use dropdown date-selectors for websites and desktop applications. These date pickers work well with a mouse, but with little space between options, they might be challenging for mobile device users, especially those with large fingers and thumbs.

Dropdown selectors take up more space than a single input field with a calendar modal. And they’re more time-consuming to complete because users have to select the day, month, and year individually.

Dropdown selectors are best for desktop applications and websites but might create bottlenecks for onboarding forms.

Scrolling Date Pickers

Scrolling date pickers work similarly to dropdowns as users choose a day, month, and year separately. These scrollers are most useful on mobile devices where users can use their thumbs to scroll to a day, month, and year.

Many users complain that scrolling date pickers are not suitable for dates far in the future or past. Scrolling through decades takes time and can be challenging for users, especially those with hand or finger disabilities.

The iOS default date picker is the most common example of a scrolling date picker; however, Apple often uses a calendar picker for dates far in the past or future.

Calendar Date Picker

Calendar UIs are the most commonly used date pickers. These calendar date pickers work well across operating systems, devices, and screen sizes.

As people are used to seeing calendars in physical and digital formats, these date pickers create familiarity for users, reducing cognitive load and the product’s learning curve.

Calendar UIs are especially helpful for date range pickers, allowing users to visualize their choice and make quick adjustments.

Timeline Pickers

Timeline pickers work well for selecting a short date range (up to a week) or timeframe (a few hours). Timeline UIs are especially useful on mobile devices because users can drag indicators to choose a start and end date. 

While you can use timeline pickers for dates, they’re best suited for selecting a time window.

Date Picker UI and UX Best Practices

Date Picker Accessibility

Poorly designed date pickers can be frustrating for users with disabilities and screen readers. Keeping things simple is crucial to ensure date selection is accessible to all users.

Here are some recommendations for making date pickers accessible:

• Use explicit labels for your date fields. For example, if someone is booking an appointment, label the field Appointment Date or Choose an Appointment Date so screen readers and users with cognitive disabilities know what date you need.
• Include format hints in the placeholder and above or below the input field. This validation makes date pickets more accessible while benefiting all users with clear instructions.
• Users must be able to use a date picker using touch, a mouse, screen readers, and a keyboard. UX designers must test date pickers to ensure all users and devices can interact with the UI and choose a date effortlessly.
• Separating day, month, and year fields make it easy for screen readers and keyboard users to enter dates. UX designers can also include a button or calendar icon for users to complete their selection using a calendar, a win-win for all users. (See this date picker example from USWDS).

Date picker accessibility resources:

• Collecting dates in an accessible way by Hassell Inclusion
• Date picker by US Web Design System
• General accessibility guidance for forms by US Web Design System

Show Current Date

It is important to show users the current date and their selection on calendar pickers. Highlighting the current date gives users a reference for their choice, which is especially important for booking travel and appointments.

Differentiating between the current date and the user’s selection is crucial to avoid confusion. Material UI clarifies this distinction with an outline for the current date and a shaded background for the selected date.

Block Unavailable Dates

Choosing a date only to find it’s unavailable is one of the most frustrating user experiences. Users have to start their selection over and try until they find availability. Blocking out unavailable dates allows users to choose without returning to the calendar.

Provide Additional Critical Decision-Making Data

Many travel booking apps, including Booking.com and Airbnb, show the price per night below each date so users can find the best rates. This information creates a positive user experience because the product helps users save money.

Reduce Unnecessary Data

Calendar user interfaces can be busy and overwhelming. Designers must reduce as many UI elements, lines, and other content to make the calendar easier to read and complete tasks. For example, users don’t need to see the days of the week when choosing their date of birth.

UX designers must also use solid backgrounds for modal overlays to block out content behind the calendar, which may confuse users.

How to design a date picker in UXPin

UXPin is an advanced prototyping tool used to create interactive, dynamic, high-fidelity prototypes. Where most prototyping tools require designers to create multiple artboards to prototype just one interaction, UXPin enables designers to use States, Variables, and Conditions to create fully-functioning pages.

To insert a date picker in UXPin, start by clicking on the “Search All Assets” search icon (command + F / Ctrl + F) in the vertical toolbar.

Next, search for “date” or “calendar” using the input field.

Several options will be available under the “Components” heading, some of which are best for touch users and others for keyboard users. “Input calendar”, however, provides a calendar for touch users and an input field for keyboard users, offering the best of both worlds and is perhaps the simplest solution overall.

Styling the date picker Component

UXPin Components are already designed to offer great user experiences, but you’ll probably want to style them to match your brand’s visual identity and app/website’s aesthetic. To do this, use the Properties panel on the right.

If you’re using UXPin Design System Libraries (especially Text Styles and Color Styles), you can utilize the Styles that you’ve already established to help maintain some degree of visual consistency between the date picker Component and the rest of your design.

To customize your component, select the Layer that you’d like to style, navigate to your UXPin Design System Library after clicking on the “Design System Libraries” icon (⌥ + 2 / alt + 2), and then select the Style that you’d like to apply to the Layer.

Using real Components instead

Rather than reinventing the wheel by inserting and styling the same Component over and over again, designers can use production-ready Components that’ve already been built by developers. You can pull them from Git, Storybook, or NPM (no coding required) and they’ll look and work just like the real thing (because they are). Learn about UXPin’s technology that makes this happen. Request access today.

The post How to Design a Date Picker that Makes Your UI Shine appeared first on Studio by UXPin.

With UXPin’s npm Integration, designers can import npm component libraries to build fully functioning prototypes. These high-fidelity prototypes enable designers to test features, interactions, and functionality impossible to achieve with traditional vector-based design tools.

Build fully interactive prototypes with real building blocks of your app. Try UXPin Merge and sync MUI with Merge and bridge the gap between designers and devs. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is UXPin’s npm Integration?

Firstly, it’s important to understand UXPin Merge because our npm Integration is the latest iteration of this game-changing technology.

Merge allows you to sync a design system’s component library to UXPin’s design editor so designers can prototype using fully interactive components that come from their design system.

This component-driven prototyping creates a single source of truth where designers and engineers work with the same design system. Any changes to the repository automatically sync to UXPin, so teams always use the latest version.

Enter npm Integration

Previously, designers needed an engineer’s help to connect and sync Merge. You needed someone proficient at a Git repository or Storybook. But, with UXPin’s npm Integration, designers (or DesignOps) can complete the integration using an intuitive user interface without writing any code.

If the component library exists as an npm package, you can connect it to UXPin through Merge and import the UI elements needed to start prototyping. Open-source design libraries like MUI work best with the npm Integration because they have a consistent naming convention, file structure, and documentation.

The Benefits of Working With MUI

MUI is a React component library based on Google’s Material Design UI. The comprehensive design system is excellent for prototyping because it has everything you need to build UIs fast.

The MUI team has done fantastic work to ensure components solve foundational usability and accessibility issues, giving you a ready-to-go product development solution.

MUI is themeable, so you can use it as a foundation to build your design system or take advantage of the comprehensive library to test UI elements when trying to find new patterns for your product’s component library.

MUI npm Integration With UXPin Merge

MUI has design kits for a few image-based design tools, but with UXPin, you can import its fully functioning component library–the same foundational components engineers use for development.

MUI components in UXPin look exactly like any other static component but have the same fidelity and functionality as code–UXPin renders HTML, CSS, and Javascript in the backend rather than vector graphics.

When you import UI elements into UXPin, you also get MUI’s component states out of the box. If you’ve ever set these up in an image-based design tool, you’ll know how time-consuming and complicated it can be to add basic states and assign them to the properties panel. With UXPin’s npm Integration, you can import these states with a few clicks!

Assigning Properties in Merge Component Manager

The Merge Component Manager allows you to set up properties for each MUI component.

You can use MUI’s docs to choose which React props you want to import for each component. Once imported, these React props appear in UXPin’s righthand Properties Panel, allowing you to customize individual UI elements.

For example, an MUI button has several color properties:

• Primary
• Secondary
• Success
• Error
• Info
• Warning

When you import these props via the Merge Component Manager, a dropdown appears in the Properties Panel, allowing you to select the desired color. The same applies to variant (contained, outlined, text), size (small, medium, large), and other multi-option props.

There are several property types, including boolean, function, string, array, and enum, to name a few. You can import any MUI React props found in the documentation according to your prototyping needs.

Connecting UXPin to the MUI npm Package

Step 1

Navigate to your UXPin dashboard and click “New Project.”

Step 2

Name your project and click “Create New Project.”

Step 3

Click “New prototype” to open the project in UXPin’s design canvas.

Step 4

Click the dropdown at the bottom of the Design System Libraries tab in the lefthand sidebar, and click “New library.”

Your sidebar and available libraries may differ from the example.

Step 5

Select “Import React Components” and click “Next.”

Step 6

Name your library. This name is purely for your reference and won’t impact the import.

You also need to grab the npm package repository name, which you find under Install on MUI Material’s npm page. Copy and paste the Install contents from npm into the “Library package name” field.

Delete everything preceding the @ symbol (so you only have @mui/material), leave everything else as default, and click “Next.”

Importing MUI Components

UXPin will automatically redirect you to the canvas once you complete the npm integration. Now it’s time to select the MUI components you want to import.

Step 1

From the lefthand sidebar, click “Open Merge Component Manager.”

Merge Component Manager will open in a new tab.

Step 2

Click “Add new component.”

Step 3

Enter the name of the component you want to import.

You’ll find the correct naming convention in the MUI docs under Component API. MUI’s components use CamelCase with no spaces. Always capitalize the first letter. For example, bottom navigation would be BottomNavigation.

Let’s import an MUI Button as our first component and add it to a new category called Inputs. We recommend using the same categories as MUI’s docs, so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Step 4

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute or two.

Step 5

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (Inputs) and your first component (Button) in the left sidebar.

Step 6

Click on the Button to begin adding properties. You can find these React props in MUI’s documentation under Component API > Button.

Adding Component Properties with Merge Component Manager

Let’s add a few MUI button properties using the React props from the documentation.

Button Label

Step 1

A button label (or content) in MUI uses the “children” React prop.

• Property name: enter “children” (always use lowercase for props)
• Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Label”
• Description: Add a short description or instructions for designers–we’ve used “Button’s label or CTA”
• Property type: “node” as per MUI’s docs
• Property control: “textfield” (note: this field will only appear once you select a property type and will differ depending on your selection)
• Default value: Your preference–we’ve gone with “Button” (note: MUI capitalizes button labels)

As you complete the component’s properties, you’ll notice a component preview will appear and change according to your preferences.

Step 2

Once you have completed all the fields, click “Add property.”

Then “Save changes.”

Lastly, “Publish library changes.”

Component-Driven Prototyping in UXPin

Once you import the MUI components you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three MUI components in less than a minute.

When you select an MUI component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Ready to discover the possibilities of component-driven prototyping in UXPin? Try the MUI npm Integration (or other open-source component libraries available on npm).

The post Bring MUI Components to UXPin – npm Integration Walkthrough appeared first on Studio by UXPin.

MUI is one of the most popular and robust React component libraries. Developers use MUI to put together user interfaces for React apps. MUI is also useful for prototyping. Using this library, a designer can create high-fidelity prototypes that are fully interactive and ready for usability testing or even the handoff in practically no time.

If you want to try prototyping with MUI, sign up for a free trial. You’ll be able to use the MUI kit for 14 days.

See how close to the real product your prototypes can get when you use a design tool that renders code instead of vector graphics. Explore the full potential of designing with MUI with UXPin Merge. Request access to UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Why Material UI?

A ton of teams use MUI as a ready-made component library for their design systems. It’s an open-source library, documented and maintained by a large community, so it makes a lot of sense to take advantage of it, instead of wasting resources on building a React library from the ground up.

MUI components are customizable. In this article, we will go through a simple overview of different ways to style MUI v5 components, and why you should consider those styling methods. 

6 Methods of Customizing MUI Components

When discussing the customisation of MUI components, it mostly comes down to how they are styled, with so many in-depth articles on this topic already, we’ll quickly go over the best styling methods.

1. ThemeProvider

The first styling method of MUI would be the ThemeProvider which is a HoC wrapping other components. It injects custom styling, allowing the user to override styles and props.

You’d want to use this to create an easily usable style across most of all of your components, for example, to build a branded library. Since it isn’t a tutorial but a really simple and quick showcase, see a Button component and pay attention to the way you can override styles and start developing a branded component.

2. createStyled

The second way of MUI customization is the styled method. It is a function extended from the styled utility. I found that method very useful when needing to apply styles that aren’t used very often, but they were important enough to spend time on making them reusable.

For instance, if you have a highly used component, but only 25% of the time you need to give it a certain style such as no padding or margin then add a corresponding prop to enable styles in these use cases. Shown in the image below, is a case where you need to remove the padding on a MenuItem component on occasion.

const stylesFromProps = {
 shouldForwardProp: (prop) => prop !== 'disablePadding',
};
const MenuItemM = styled(
 MenuItem,
 stylesFromProps,
)(({ theme, disablePadding = false }) => ({
 ...(disablePadding && {
   padding: 0,
 }),
}));

3. sx={…} Prop

With the newly released MUI 5, the prop sx has been introduced, which is a quick way to define custom styling that has access to theming and it’s variables or any valid CSS you can think of.

This is very useful when you have a component that is being used in multiple places, but you need to have very specific styles or fix a niche issue for a single case, for example, the previously described issue of having to remove the padding on a MenuItem component.

<MenuItem sx={{ p: 0 }}></MenuItem>

4. Component Wrapping

Next, you could try wrapping the component and passing in props to change styles. It’s a possibility, but I found it quite prone to having duplicate props and just generally problematic.

5. Unstyled Components

Another way of customizing MUI components is using the very new and not fully implemented Unstyled Components. It is said to support more components in the coming months.

This seems to be a great solution, as Unstyled Components can be used to create a component library that is not based on Material Design, which is a reason for some not to use MUI. It seems great for avoiding CSS conflicts.

6. MUI Box Component

One option that I’ve only just found out about is using the Box component to override styles. The documentation is continuously being updated, so I’m eager to find out more information about how it works..

In conclusion, these are the recommended methods to customize the MUI v5 components. Those methods provide a lot of possibilities and even allow you to create a unique branded library when using Unstyled Components.

Sync MUI with UXPin Merge

With so many styling methods, you need to give MUI a go. Once you’re ready to create interface design with it, see how UXPin Merge can help you.

It’s a revolutionary solution that allows you to design with full interactivity and functionality of MUI components, and then use those components in the production phase, without the need to translate your design into code with third-party tools. Finally, your design and development teams can share a single source of truth.

The post MUI 5 Customisation – What is the Best Styling Method? appeared first on Studio by UXPin.

Our friend from PayPal, Anthony Hand, decided to share how to make designers’ lives easier using parsing props with UXPin Merge. 

Merge is UXPin’s revolutionary technology that helps you import and sync your dev’s UI components from the component library in the design tool.

You can bring the components via Storybook integration or Git repository. You can also use NPM integration for importing and components without engineer’s help. Either way, you don’t need to worry about trading off between time and robust prototypes – you can have both.

It’s possible to design fully interactive prototypes extremely fast because the UI elements you use during the design process are live code. Discover more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Prop Parsers for UXPin Merge Controls

As any UI developer knows, parsing and validating user inputs is as much of an art as a science. While most of the users most of the time may enter the expected values, we must always be prepared to do a little graceful massaging and tweaking, as well as error handling. 

In my days as a Sr. UX Designer on a DevOps team at PayPal and all of my projects are internal web-based tools, we used UXPin Merge. After we settled on the Microsoft Fluent UI library for our next generation of web apps, we embarked on the process of importing the UI library into UXPin using their Merge technology. The process was straightforward enough, though it did have a little learning curve. 

One of our first learnings with UXPin Merge was that standard parsing and validation needs applied. The Properties Panel in UXPin is, after all, just a fancy user input form. We developed a few standard parsing utilities for basic user inputs like colors and dates, for example.

As we got deeper into the UXPin Merge preparation, we soon realized that more complex UI controls would need complex JSON in the underlying control. However, surfacing raw JSON to non-technical people in UXPin would quickly kill user adoption.

JSON is a complex data model expressed as a string, created for computers, not humans. As a result, one of our most important innovations was to create an advanced multi-use parser that allowed us to gather plain text user inputs to configure complex UI controls like dropdowns, navigation lists, and data tables. 

Basic Parsing

We created a few basic parser functions in JavaScript to handle the validation for common user inputs around colors, dates, and numbers, for example. Although these were primarily created to make it easier to configure UI controls in UXPin, some of these utilities have found wider use internally. 

Parsers converted the string “50” to an integer and validated the hex color, adding back in the required # mark. Our Merge wrapper also trimmed leading and trailing whitespace from the icon name. (UXPin Editor and Props Panel view)

Color Parsing & Formatting

The Microsoft Fluent UI controls want hex values, such as “#0078d4” (a lovely shade of blue), but we wanted to allow users to use both hex values and easier to remember theme tokens (such as “themePrimary”). Plus, we wanted to support semantic tokens (e.g., “success”) and a handful of basic colors (e.g., “white”, “transparent”).

As for gracefully handling errors, we trimmed input text of whitespace and accepted valid hex values, even if they didn’t start with a # mark.

Our custom color parser gives a huge range of freedom to users and accepts all of those types of values, returning either a validated hex value for use by the UI control, or “undefined” as an error flag.

The color parser checked to see whether “themePrimary” was a color token in the theme, then retrieved its hex value for use by the icon object.

Similarly, the color parser looked up the special semantic color token, “success,” and converted it to a hex, as well. “Success” is easier to remember than an arbitrary hex value. 

Complex Parsing

As mentioned previously, many of the underlying UI controls use complex JSON for configurations, like menus, navs, and dropdowns. However, JSON is hard to read for humans, and easy to break. So instead of JSON, we invented an innovative syntax that’s much easier for regular humans to use. In addition to plain text, the syntax tokens we developed include: 

• icon(Icon_Name | color): Any icon in Microsoft’s icon library
• link(Display Text | URL)
• Divider or —-: To display a divider in a list
• * : To mark a child in a section, like in a nav or menu
• CSV Parsing: For table rows or when commas are needed in plain text in certain controls

Note: In most cases, this special syntax is only for use within UXPin to help designers and (typically) non-technical people easily build prototypes. To build the actual web apps, developers would set up these UI controls in the standard way with JSON, event handling, etc. 

Icons & Text in Menus

Let’s look at how a user would add popup menu items to a CommandButton control in UXPin. In this example, the user clicks on the button with the text “New” to display a popup list of the types of objects the user could add, such as various file types, a folder, a user, etc. 

In the UXPin Editor, the user clicks on the Menu Items prop to view a large text editor. Our improved parser now looks ahead to determine whether a string like “File” is a regular menu item or a section heading. The star ( * ) indicates that “Document” is a child, so “File” must be a section heading. Note the usage of the icon() token, and two intuitive ways to indicate a divider. 

This is the view of the same CommandButton as rendered in the UXPin Prototype Preview mode. 

This powerful, innovative syntax was reused across nearly a dozen other UI controls that supported a list-style view: Dropdown, Combobox, Pivot (tab strip), Nav, ChoiceGroup (radio buttons), GroupButton, SplitButton, Breadcrumb, and more. 

Although support for icons, dividers and groups varied between controls, once UXPin users became familiar with this basic approach, they are able to easily apply the same approach across a ton of controls to create rich, interactive prototypes without knowing a lick of JSON. 

Data Tables

As you might imagine, internal web apps are data intensive and data tables are extremely common. So, one of the main drivers for developing this advanced parsing engine was to help us easily create realistic — and modestly functional — data tables in our prototypes. 

To create rich prototypes with reasonably advanced functionality, our workflow starts off with Excel. We first develop a model of the view in Excel, using the link() and icon() syntax mentioned above within each cell. Then we export that worksheet as a CSV file.

Using any text editor, we can open the CSV file and copy just the headers, or the row data, into the Headers and Rows props in UXPin, respectively. Compare this streamlined workflow to what we used to do to create tables in other prototyping tools!

The UXPin Editor view for the DetailsList’s Rows prop showing the comma-delimited cells (CSV format) with our innovative link() and icon() syntax. 

Designer’s Perspective on Parsing 

As you look through the source code for our parsers, you may have some opinions on some of the design decisions in the code, and how (relatively) inefficient or verbose the code is. You may even notice some errors. I accept responsibility for these decisions.

Keep in mind that I’m a UX designer, not a professional programmer. More importantly, I explicitly decided to optimize for readability, modularity and ease of maintenance over efficiency, per se, given my limited knowledge of JavaScript. This is open source code, so you’re welcome to borrow some or all of the code, make modifications, or offer updates and bug fixes. 

On Optimizing UXPin Merge

UXPin’s Merge technology lets any company import the exact same UI component library that they use for development into UXPin so that anyone on the team can create rich, interactive prototypes. It’s a powerful technology that can dramatically increase the velocity of design for user feedback and stakeholder reviews, and can improve developer handoff.

However, as our team learned, there needs to be a modest investment in setting up the end user experience for success in UXPin. We made an explicit decision to optimize the UXPin user experience with smart parsing that brings maximum power while minimizing errors.

We recently ported our proprietary Microsoft Fluent UI library to an open source library which your team are welcome to experiment with and gain inspiration from. And feel free to liberally modify and/or borrow any of our parsers for your own UXPin Merge projects!

The post Parsing Props for UXPin Merge Controls – A How-to Guide appeared first on Studio by UXPin.

UXPin Merge provides developers, UX designers, and product teams with an intuitive user interface to prototype and test using ReactJS components. The drag-and-drop workflow is the perfect environment for rapid React prototyping–even for non-designers or those without design tool skills.

Payment giant PayPal and startup TeamPassword both have non-designers building and testing prototypes in UXPin. PayPal’s product teams complete 90% of design projects, while TeamPassword’s two-person development team does all the company’s prototyping and user testing.

This article demonstrates how engineers can use UXPin Merge to design, prototype, and test products before development, allowing them to iterate faster and reduce UI inconsistencies.

Key takeaways:

• React rapid prototyping is a prototyping process for creating prototypes fast.
• Just like in rapid prototyping, product teams build UIs, test them, and release as fast as they can.
• Instead of starting with writing code, React rapid prototyping tool like UXPin Merge gives you building blocks to assemble your prototype – React components from your repo.

Streamline your React rapid prototyping workflow with UXPin Merge. Visit our Merge page for more details and how to request access.

Create beautiful layouts without designers

Take UI components directly from Git repo, Storybook, or through NPM and design production-ready prototypes.

Bring code to design

What is Rapid Prototyping?

Rapid prototyping is a prototyping process where product teams conduct lots of experiments fast to find the best solution. Team members ignore “nice-to-have” features and focus solely on optimizing UIs for user experience.

The team uses a design system or open-source component library to prototype new products. Using an existing library means product teams don’t have to design from scratch. Instead, they go from paper sketches to rapid high-fidelity prototyping and testing.

React rapid prototyping

React rapid prototyping uses a similar methodology where engineers use component libraries to build a minimum viable product (MVP). Using a React library enables engineers to develop user interfaces with minimal front-end programming from scratch, allowing for faster testing and iteration.

The Challenges of Prototyping in Code

The biggest challenge with prototyping in code is that it’s slow compared to the drag-and-drop design tool workflow (in which you create prototypes with pre-made component.) Even small changes require some code and styling adjustments to achieve the desired result.

Prototyping in code also means engineers must focus on multiple tasks, including writing code, referencing documentation, and UI design. As the prototype grows in complexity, so does the focus and time required to make changes and iterate–the opposite of rapid prototyping.

How TeamPassword Overcame React Rapid Prototyping Challenges

Password manager startup, TeamPassword, struggled with speed-to-market and UI inconsistencies. The small team had no designers, leaving engineers to design, prototype, and test releases using code.

TeamPassword switched to MUI’s open-source React library, which they customized to meet brand and product requirements and hosted in a private repository.

Prototyping and testing using UXPin Merge.

TeamPassword also needed a better method to prototype and test new products. The small startup didn’t have the resources to hire a UX designer, so they looked for a “developer-friendly” design tool. After exploring several options, TeamPassword’s devs discovered UXPin Merge.

Merge allowed TeamPassword to sync their MUI design system repository to UXPin’s design editor, giving engineers a drag-and-drop prototyping environment. 

When TeamPassword has completed the prototyping phase, they simply import their design system into the project, add the components, and copy JSX component props from UXPin to develop the final product.

This Merge product development workflow eliminated TeamPassword’s UI consistencies while allowing developers to prototype, test, and iterate significantly faster. Merge’s Version Control enables the team to ship design system changes which automatically sync to UXPin–creating a single source of truth between design and development.

Using UXPin Merge for React Rapid Prototyping

Unlike image-based design tools that generate vector graphics, UXPin renders HTML, CSS, and Javascript, making it possible to import fully interactive React components.

The TeamPassword case study demonstrates how developers can prototype faster using React components without learning the complexities of a design tool. Here’s how you can too.

Choose a design system

If you don’t have a design system, use an open-source library. Some of our favorites include MUI, React-Bootstrap, Ant Design, and Semantic UI. These design systems are themeable and offer vast component libraries, including desktop and mobile UI elements.

Follow UXPin’s documentation for setting up your repository correctly. You can also request access to Merge; our technical support team will help you through the process.

“We had a training session with Jack which was really valuable. We learned how to set up the tool and use the editor. The team also showed us how to adjust components.” – Matthew Chigira, Fullstack Developer at TeamPassword.

Customize your design system

Follow the component library’s documentation to theme your design system, or leave it as is to start prototyping immediately. Save your design system to a private repository so you can sync it to UXPin.

When you make changes to the repo, like adding custom components and templates, Merge will automatically sync these back to UXPin. Version Control allows you to choose when to update projects, and you can always switch to earlier versions of your design system.

Choose an Integration

Bring components to UXPin with one of three integrations:

• Git Integration: connects directly to a Git repository–only available for React libraries,
• Storybook Integration: connects to a public or private Storybook–available for React, Vue, Angular, Ember, and other front-end frameworks,
• npm integration: paste npm link to UXPin and import components that you want to use.

Once the initial setup is complete for both integrations, Merge will automatically update any repository changes in UXPin and notify all team members of the new version.

The Git Integration requires some setup to sync correctly with UXPin. UXPin provides a Merge boilerplate that you can download. Running npm install in the root directory will install the dependencies required to run the code from the boilerplate repository (things like React, Webpack, Babel, etc.)

With the Git Integration, you get all the Merge features, including Version Control, Patterns, and Merge component Manager. 

Storybook offers an intuitive dashboard for developing design system components in isolation. Devs can document and test components before distributing them to a GitHub repository. Storybook also has collaboration, QA, and approval features, so teams can manage every aspect of the design system and follow governance procedures.

Configuring the Properties Panel

Each component’s React props will appear in UXPin’s Properties Panel, allowing you to make changes defined by the design system, including color, size, state, typography, etc.

Note: only the Git Integration will display React props. If you’re using Storybook, you’ll have to use Args to configure the UXPin Properties Panel.

Get to work

With your components imported to UXPin, it’s time to start prototyping. Drag UI elements from your design system library onto the canvas to build UIs.

With UXPin Patterns, you can create new patterns and templates and save these to your personal Patterns library. Because these UI components already exist in your repository, it’s a matter of combining them during development to replicate the prototype.

You can test prototypes in the browser for websites and web apps or use UXPin Mirror for mobile app testing (available for Android & iOS).

Test and iterate on your prototype in UXPin until you’re satisfied it’s ready for development.

Create-react-app

The final step is converting your UXPin Merge prototype to a React application. YouTuber CoderOne has an excellent tutorial about going from UXPin prototype to development.

The best way to copy your prototype is in UXPin’s Preview and Share mode. Here you can view the product’s site map, adaptive versions, specifications, and each component’s props. UXPin will even provide a link to the component’s documentation.

Under Spec Mode, UXPin will display each component and its relative props in JSX. Devs can copy/paste this production-ready code to replicate the prototype in their React project.

Switch to UXPin Merge and enjoy the convenience of a design tool with the power of code. Build stunning layouts without drawing any components. For more details, visit our Merge page.

The post React Rapid Prototyping — How to Design a React App Fast? appeared first on Studio by UXPin.

A design brief is crucial in guiding the design process toward a successful outcome where designers meet client/stakeholder expectations. A good design brief can avoid costly scope creep, missed deadlines, poor communication, and inferior results.

Enhance your design projects with the world’s most advanced collaborative design tool. Create high-fidelity prototypes that look and feel like the end product for meaningful feedback from stakeholders and user testing. Sign up for a free trial to explore UXPin’s features and build your first fully interactive prototype.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a Design Brief?

A design brief describes a project’s scope, expectations, responsibilities, deadlines, and deliverables specific to designers. It tells designers what to design, who it’s for, and when to deliver it.

Projects that don’t have a comprehensive design brief risk wasting resources, for example:

• Unnecessary back-and-forth communication between designers and stakeholders
• Exceeding budgets
• Misunderstood deliverables and expectations
• Missed deadlines
• Scope creep
• No accountability

What is the purpose of the design brief?

A design brief serves multiple purposes:

• Most importantly, it informs designers of the problem they must solve–i.e., what they must design.
• Defines the design project’s goals and features.
• Tells designers about the target audience, including pain points and needs
• It defines expectations so designers know how to approach a project and what they must deliver.
• Ensures UX design teams allocate and prioritize resources to meet time and budget constraints.
• Defines timelines and deadlines.
• Informs designers of key stakeholders, i.e., project manager, client, product owner, technical lead, etc.

What is the difference between a design brief and a design specification?

A design brief outlines what designers must create, while the specifications define specific details, including visual design elements, user flows, assets, file formats, accessibility requirements, brand guidelines, technical limitations, etc. Many design briefs include design specs to provide context and guidance for design teams.

How to Create a Design Brief Template

Creating a design brief template can save time while prompting the right questions before writing one at the start of a project.

Project summary

The project summary provides a high-level overview of the project, whether it’s an existing product or something designers are building from scratch. If the brief is for a design agency, the summary might include client details and contact information.

The project overview might also include high-level details like:

• Industry/market segment
• Competitors
• Current challenges
• Relevant product and user metrics

Summaries are essential for stakeholders who typically don’t need too much detail but want to understand the purpose of the design project.

Project overview

The project overview defines the scope and deliverables. Most importantly, it’ll outline the problem designers must solve or the purpose of the design project.

Some points to include in the overview include:

• Define the problem
• What must the team design?
• Is this a new product or a redesign?
• Who are the key stakeholders, and what is their involvement?
• Potential challenges
• What is not within the project’s scope?

UX research & artifacts

If there is any existing research, the brief will list these UX artifacts with links to a shared project folder. Some examples include:

• User personas
• Product analytics
• Mood boards, empathy maps, user journeys, etc.
• Interviews
• Competitor and market research
• Videos or screenshots showing the problem(s)
• Existing design files (wireframes, mockups, prototypes, etc.)
• Brand assets (logos, colors, fonts, etc.)

Project goals

The project’s goals describe what the design must achieve. These are typically business or marketing-related metrics like increasing conversions or reducing a website’s bounce rate.

Most importantly, project goals must be measurable using a baseline and KPIs and have a deadline. For example, “we want to increase the current conversion rate from 1.4% to the industry average of 3% by April 10, 2022.” Designers can analyze the current design, research competitors, conduct tests, see why users might be hesitant to convert, and design an appropriate solution.

Target audience

Most redesigns have an existing target audience and user groups with personas and other user research data. The person compiling the design brief will include a high-level overview of this information, with links to any research.

If there is little or no user data, the UX team will have to research the market and competitors to identify the product’s target audience and create personas, empathy maps, user journeys, etc., for the design project. Conducting this research from scratch will take considerable time, which stakeholders must consider when setting deadlines.

Design requirements

The design requirements (design specifications) describe the visual assets, formats, guidelines, and tools designers must use.

Some examples include:

• Brand assets (logos, fonts, etc.)
• Brand guidelines (usually an external link or supporting documentation)
• Color palette
• Technical information (front-end framework, CMS, APIs, etc.)
• Existing design files
• The project’s design system or UI kit

The design requirements will also include the project’s deliverables, but you can have this as a separate section. Some examples include:

• What format(s) must designers deliver the project for development–i.e., wireframes, mockups, prototypes, etc.?
• How and where to save assets
• Naming conventions

Timelines and budget

The project’s timeline and budget are essential for any design brief. This section lets designers plan, prioritize, and allocate the appropriate resources.

Some considerations for the project’s timeline include:

• Project roadmap and key milestones
• Stakeholder feedback sessions
• Prototyping and testing schedule
• User interview dates
• Design handoff date
• Task dependencies
• Final release
• Quality assurance

It’s essential to allocate the project budget to specific tasks or disciplines within the project so that team members can take ownership and manage resources accordingly. For example, defining budgets for the following areas:

• Research
• Ideation
• Design
• Copywriting
• Testing
• Tools
• Human resources

Additional notes and information

You can create an extra session for additional notes and information. Some examples of what to include here:

• A link to the project in your project management tool (Trello, Notion, Asana, etc.)
• Information about the project’s tools
• Where designers have creative freedom

Design Brief Example Templates

Here are some design brief templates from popular project management tools. 

• Free Google Docs and Word design brief templates
• Notion creative brief template
• Milanote website design brief template
• Milanote app design brief template
• Miro UX brief template
• Free PDF design brief template from Elementor
• ClickUp design brief template
• Free Google Doc design brief template from Superside

5 Tips for Writing a Design Brief

Interviewing clients and stakeholders

Most of a design brief’s details will come from a client or stakeholders. A project manager or design lead’s job is to interview these people and gather the information required to compile the design brief.

Encourage creativity

Designers are experts at finding creative and innovative solutions. A good design brief must guide rather than dictate the creative process. While it’s important to outline your design requirements, it’s just as important to inform designers where they have creative freedom.

Define tasks and decision-makers

An effective design brief delegates tasks and identifies key stakeholders and decision-makers. Assigning these roles at the beginning of a design project creates accountability while eliminating the “too many cooks in the kitchen” scenario. Designers must know who has the final say to avoid adding features or taking instructions from the wrong people.

A succinct way to include these key people in your design brief is by using the RACI project management model:

• Responsible: who must do the work
• Accountable: the team leader who ensures the work gets done
• Consulted: stakeholders who provide input and feedback
• Informed: stakeholders designers must keep in the loop with high-level progress updates–they do not have any decision-making authority

Effective timelines and deadlines

Many design briefs only include a final deadline, but there are many milestones for a design project. Setting deadlines for each milestone ensures designers prioritize their time effectively and don’t spend too much time in one discipline.

Some critical time milestones include:

• Project start date
• Key milestones and timelines–i.e., research, design, prototyping, testing, etc.
• Stakeholder feedback sessions
• Design handoff
• Release date
• Quality assurance

Plan beyond the scope

Thinking about the future is crucial. There might be a marketing campaign to promote the release or a possible future redesign. Make sure you include these requirements in the design brief.

For example, a marketing campaign will require social media assets. The design brief can instruct designers to provide images and videos in the necessary formats for Instagram, LinkedIn, Facebook, Pinterest, etc.

Getting all the design files, prototypes, and research for future design projects is also crucial because they could save valuable time and resources. Create a shared folder where designers can dump these assets for future reference.

Clear brand expectations

Clear guidelines save time with back-and-forth communication or redesigns because designers used the wrong elements. Create a shared folder or zip file that designers can download and use for the project.

Some key brand assets include:

• Fonts
• Logos (dark and light versions in vector format)
• Brand guidelines
• Color palette
• Brand graphics and video
• Copy

Improve Product Design Projects With UXPin

User testing and client/stakeholder feedback are crucial for delivering design projects. Designers use this feedback to iterate and improve design ideas to deliver great user experiences.

The biggest challenge for designers and stakeholders is poor prototype quality. These inferior prototypes are difficult to interpret, making it difficult to get client/stakeholder buy-in.

With UXPin, designers can build fully interactive prototypes indistinguishable from the final product. They can even connect APIs and use live data to demonstrate the end result accurately. These high-fidelity prototypes get meaningful, actionable feedback from testing and stakeholders, so designers can iterate faster with higher quality outcomes.

Enhance your projects with a sophisticated design tool built for modern UX demands. Sign up for a free trial to explore UXPin’s advanced design and prototyping features.

The post How to Write a Good Design Brief? [+ Templates] appeared first on Studio by UXPin.

As digital product complexity increases, so does the need for interactive prototyping. To minimize UX debt and reduce usability issues, designers must test and iterate with the highest accuracy during the design process.

Get the world’s most advanced end-to-end design tool. Create fully functioning interactive prototypes that look and feel like the final product. Sign up for a free trial to explore UXPin’s advanced prototyping features.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What are Interactive Prototypes?

Interactive prototypes respond to user engagement like clicks/taps, swipes, scrolls, etc., accurately replicating the final product experience. These prototypes include navigation, transitions, animations, popups, and other interaction design characteristics.

What is the difference between an interactive and a non-interactive prototype?

The short answer is interactive prototypes have interactivity triggered by user engagement or system changes, while non-interactive prototypes don’t. 

Product teams often call prototypes built using image-based design tools non-interactive, even though they have some basic functionality. Image-based design tools are excellent for designing wireframes and mockups, but they lack features to add interactivity–most don’t even offer functioning input fields.

Designers can only build truly interactive prototypes using a design tool like UXPin or collaborating with UX engineers to develop a code prototype (HTML, CSS, & Javascript)–the latter being the more expensive and time-consuming option. 

High vs. low fidelity interactive prototypes

Designers can create both high and low-fidelity interactive prototypes. Low-fidelity interactive prototypes are usually wireframes with basic interactivity, while the high-fidelity version looks and feels like the final product. Check out an extensive comparison of low-fidelity and high-fidelity here.

Designers use low-fidelity prototypes early in the user experience design process because they’re easy to build and allow faster iterations. This speed enables designers to test many ideas quickly without wasting too many resources. Because these wireframes are interactive, designers can increase the prototyping scope during the early stages.

High-fidelity interactive prototypes are fully functional, offering a comparable, immersive user experience indistinguishable from the final product. These high-fidelity prototypes allow designers to identify usability issues and business opportunities. Insights they wouldn’t get using traditional image-based design tools (non-interactive prototypes).

Benefits of Interactive Prototyping

Accurate usability testing

The closer designers get prototypes to the final product, the more accurate their testing results. One of the challenges with image-based design tools is that designers can’t test UI elements like forms, date pickers, filters, dropdown navigation, accordions, and other “complex” components, without using multiple frames, plugins, and other workarounds.

The problem with these workarounds is that they’re time-consuming to create and don’t provide an authentic user experience. Designers may think they have solved an issue within the design tool’s constraints which doesn’t translate to the final product.

Interactive prototypes increase prototyping scope, so designers get accurate results from usability testing. They can pinpoint usability issues and iterate on solutions.

Meaningful stakeholder feedback

To get feedback and approval, UX designers must present stakeholders with wireframes, mockups, and prototypes throughout the design process. Poor quality prototypes result in stakeholders fixating on what the UI design doesn’t do rather than visualizing the bigger picture.

Designers can present ideas that accurately replicate the final product with interactive prototypes. Instead of “imagining” what a prototype does, stakeholders can engage with user interfaces, components, etc., to get a true sense of what the final product will do.

“There’s a lot more confidence from everyone (including designers, C-suite, directors, and developers) about what the final product will look like, the user experience, and interactivity—giving us higher quality feedback from stakeholders.” Erica Rider, UX Lead EPX @ PayPal, discusses interactive prototyping with UXPin Merge.

Visualizing information architecture and navigation paths

Understanding how users navigate digital products and the different paths is crucial for designing information architecture that meets user needs. Image-based prototyping tools allow basic navigational functionality but lack features for dynamic outcomes, testing search fields, and filters.

Designers must create multiple frames to achieve comparable final product functionality in image-based design tools or rely on UX engineers to build coded prototypes, requiring significant time and resources!

With interactive prototypes, designers can test search fields, filters, and other navigational elements to organize and optimize information architecture to align with user behavior.

Smoother design handoffs with less documentation

Design handoffs are challenging for product development teams. The friction between designers and engineers is usually down to prototype quality or not meeting technical constraints.

Interactive prototypes eliminate ambiguity while conforming to technical constraints with code-like interactivity, providing engineers with an accurate reference for programming.

With a clearer picture of the final product, engineers need less explanation, documentation, or back-and-forth communication for development. 

Design handoffs are seamless if the product design team uses a tool like UXPin Merge for bringing interactive components to UXPin. Engineers install the design system’s package and pull the components they need to replicate the prototype. Merge renders any component changes as JSX for developers to copy and paste.

Learn more about Merge and how to request access.

How to Build Interactive Prototypes in UXPin

Our sign-up form example provides an excellent demonstration of what’s possible with interactive prototyping in UXPin. You can download the sign-up form example and import it to a new project to follow along.

This article provides the steps for creating a new project and importing .uxp (UXPin) files.

Build a mockup

We’re using a template for this example, but you can build mockups from scratch in UXPin.

UXPin works like any other design tool when it comes to designing mockups. Designers can choose from a selection of shapes, freehand tools, text, and boxes. UXPin also provides several function form fields and icons, enabling designers to create high-fidelity mockups much faster.

Check out our documentation for more details about the UXPin Interface and how to design UIs.

Add interactions

You’ll notice some of the elements in the sign-up form example, have a little yellow and black lightning icon, like the one pictured below.

This icon tells us the component has interactions set up, which you can view by clicking Interactions in the Properties Panel.

Compared to elements with no interactions like this one.

Select the element you want to make interactive and click Interactions at the top of the Properties Panel and New interaction (in this example, we’re adding interactions to the SIGN UP button).

UXPin Interactions have four properties:

• Trigger: a user action that starts the interaction–click/tap, swipe, scroll, etc. UXPin offers 20+ triggers for mobile and desktop.
• Conditions: allow designers to make rules before the prototype performs an action or design dynamic user flows.
• Action: what happens after the trigger (assuming this meets any conditions). Actions can be as simple as a page transition or more complex, like an API call or playing a video.
• Select: below actions is a select property that changes depending on the action. For example, the selector will include a dropdown with available pages if you choose Go to Page.
• Animation: lastly, you can add animation. UXPin provides many CSS animations with easing, duration, and delay to breathe life into your prototypes.

Our sign-up form button has four interactions:

• Show confirmation screen: if the user completes the email and password fields correctly, the prototype will open the confirmation page. We’ve used a regex expression to ensure the email field includes an @ and domain extension, and the password must be longer than eight characters. The following error messages appear if the user doesn’t meet these conditions.
• Email error: if the user doesn’t complete the required email field, an error message appears below the input “Can’t be blank.”
• Password error: performs the same error message as email above.
• Set content of Email: creates a Variable for designers to use elsewhere in the prototype. In this example, we use the email variable to tell the user we have sent a verification link to their email address (see below).

UXPin’s Interactions allow designers to create dynamic prototypes that respond to user engagement comparable to code. To achieve similar results in an image-based tool, designers must create multiple frames, predicting potential user actions and outcomes, thus biasing the test’s results. Image-based tools don’t have functioning inputs, limiting the testing scope.

Interactive Prototype Examples

Here are some more interactive prototype examples created in UXPin.

Share Text Between Screens

UXPin’s Variables enable designers to personalize a user experience and pass data between screens, as we saw with the sign-up form’s confirmation screen above. Designers can share a single input, like the user’s name, or populate an entire profile with the user’s full name, address, contact number, and billing information used for eCommerce checkouts.

Follow the Share Text Between Screens to learn more about UXPin Variables.

Scrollable Content

Vertical and horizontal scrolling is a significant facet of the mobile user experience. UXPin lets designers set up scrolling in a few clicks, creating a smooth, intuitive mobile app interface.

Follow the Scrollable Content tutorial to learn more.

Stepper

Steppers are essential eCommerce patterns. They allow users to add multiple pieces of the same item to their cart. Designers can use stepper functionality for volume control, light dimmers, and other incrementally controlled features.

Follow the Stepper tutorial to learn more.

Get started with interactive prototyping in UXPin

Design user experiences your customers love with the world’s most advanced design tool. Sign up for a free trial to discover UXPin’s interactive prototyping features.

The post A Quick Guide to Interactive Prototyping appeared first on Studio by UXPin.

Open-source design systems offer an opportunity to develop high-quality products at a rapid pace. By solving foundational usability and accessibility challenges, organizations can focus on product development and solving problems.

Fluent UI is an open-source design system favored by companies developing enterprise products. The comprehensive component library allows organizations to build apps for the Microsoft ecosystem while enabling full customization and flexibility through theming for any product.

Import your Fluent UI design system into UXPin using our revolutionary Merge technology to create a single source of truth between design and development. Visit our Merge page for more details and how to request access.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is the Fluent UI Design System?

Fluent UI is a design system built and maintained by Microsoft. The open-source design system has two functions:

1. A design language and component library for developing Microsoft 365 products–much like Lightning does for Salesforce
2. A themeable component library for building enterprise applications outside of the Microsoft ecosystem

The comprehensive design system includes components and patterns for building cross-platform applications, including platform-specific UI elements for web, Windows, iOS, Android, and macOS.

Every component and pattern includes basic states and interactivity to enhance cohesion and consistency for cross-platform product development. These features allow organizations to focus on the product and user experience rather than designing, prototyping, testing, and iterating from scratch.

The Benefits of Using Fluent UI Design System

Aside from cohesion and consistency–which you get from most open-source component libraries–Fluent UI has many benefits for B2B and enterprise product developers.

Seamless Microsoft 365 Product Experiences

If your company uses Microsoft 365 for email, Excel, Word, Teams, etc., Fluent UI is a fantastic design system for internal products–even if they don’t sync with Microsoft 365.

Creating a seamless UI design from inbox and spreadsheets to warehouse inventory systems and data visualization gives employees a familiar user experience in every workspace, reducing learning curves which ultimately improves collaboration and productivity.

Enterprise Product Development

Enterprise UIs often have more complex architecture, layers, and data than B2C applications. Designing from scratch requires significant resources adding to the burden and complexities of developing and maintaining the final product.

An open-source library like Fluent UI eliminates hundreds (possibly thousands) of hours of building and testing components from scratch. Instead, product teams can effectively drag and drop Fluent UI components to develop new products.

Fluent UI includes a comprehensive library from Basic Inputs to more complex patterns like date pickers, list UIs, navigational components, notifications, modals, and more. The design system is also themeable, making it easy to adapt the library to integrate with other products or meet brand requirements.

Organizations also benefit from free maintenance as the Fluent UI team matures the design system, ensuring products meet foundational usability and accessibility requirements.

Component-Driven Prototyping With Fluent UI

Component-driven prototyping uses ready-made UI elements to build prototypes during the design process rather than designing from scratch.

The benefit of this prototyping methodology is that design teams can go from sketching and paper prototyping straight into high-fidelity prototyping, bypassing the time-consuming process of designing new UI elements.

For example, designing tables from scratch is particularly tricky and time-consuming. Fluent UI comes with many list UIs with implementation instructions and best practices.

Designers can choose an appropriate list for their project, add relevant content, and begin testing immediately. This document library UI, for example, would require many hours of designing, testing, and iterating. Fluent UI eliminates that work, so designers can focus on solving the core user need rather than drawing lines, circles, squares, etc.

While Fluent UI offers many benefits, building prototypes using traditional design tools have constraints that limit testing–like non-functioning inputs, date pickers, and other user controls.

With UXPin Merge, designers achieve code-like fidelity and functionality!

As a code-based design tool, UXPin Merge enables component-driven prototyping, where designers can build exact replicas of the final product without writing a single line of code!

Advanced Component-Driven Prototyping With UXPin Merge

UXPin Merge allows organizations to sync a component library from a repository, so designers use the same UI elements as engineers. Instead of using one of Fluent UI’s UI kits, designers use the design system’s React components in UXPin’s design editor.

These Merge components include Fluent UI’s React props defined by the design system, like color, size, interactivity, states, functionality, etc. These props appear in UXPin’s Properties Panel so designers can adjust components to meet product requirements.

How PayPal Uses Fluent UI and UXPin Merge

Before PayPal switched to UXPin Merge, the company’s internal products were inconsistent and fraught with usability issues.

As Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal, notes in an interview with UXPin, “None of PayPal’s product teams had experienced UX people or UI developers. The result was a range of usability and design consistency issues—no two products looked the same!”

Erica decided on Fluent UI: “We settled on Microsoft’s Fluent design system with UI controls for our internal tools development because they’re more enterprise-focused and better suited to internal user interfaces.”

Fluent UI gave PayPal the UI controls and consistency to focus on product development rather than building and managing components. The company uses a private GitHub repo to host its themed Fluent UI library, including custom components and user interface templates that minimize any need to design from scratch.

With constraints set by code in the repository, PayPal’s product team completes 90% of design projects. UX designers act as “user experience mentors,” helping with complex usability issues and continuous coaching.

Since the switch to Fluent UI and UXPin Merge, PayPal’s product teams deliver products 8X faster than experienced UX designers could previously using image-based tools.

A Single Source of Truth

The most significant benefit of using a design system like Fluent UI and Merge is that it creates a single source of truth across all product development teams.

With every Fluent UI component coming from a single repository, designers and engineers work within the same limitations and constraints. Any changes to the repo automatically sync to UXPin, notifying design teams of the update. Designers can use UXPin’s Version Control to switch to any version of the design system in any project at any time!

Fast-Track Product Maturity

Achieving product and design system maturity takes considerable time and resources. With Fluent UI, a startup can fast-track years of research and development to compete with Fortune500 software companies with their first release!

Instead of worrying about developing components, Fluent UI users can focus on product innovation and solving problems. The design system has all the UI elements to scale a product with little or no design (or programming) from scratch.

How to Import Fluent UI Components Into UXPin

Designers have two options when importing Fluent UI’s React component library. Both options require engineering collaboration to correctly set up the file structure and repository.

Git Integration

UXPin’s Git Integration only works with React components and connects directly to a repository. Engineers can use UXPin’s boilerplate repo as a template to set everything up. UXPin’s technical support is on hand to guide companies through this process and ensure the design system syncs correctly.

Once the initial connection is complete, UXPin will automatically sync any changes and notify designers of the update.

Storybook Integration

UXPin’s Storybook Integration also works with React but also enables organizations to sync Fluent UI’s Vue, Angular, and Ember libraries.

Storybook is a fantastic tool for developing and managing UI components in isolation. UXPin’s Storybook best practices ensure organizations get the most out of Storybook and Merge.

Using Storybook Components in UXPin

Once the Storybook setup is complete, the component library will appear in the left sidebar under Design System Libraries. The Storybook icon will appear next to the library’s name, like this Material UI example below (note the MUI library has a different icon for the Git Integration).

Designers drag and drop components from the library to build user interfaces. They can also combine these Storybook components or elements from other libraries using UXPin Patterns.

UXPin Patterns offer two significant benefits:

• Creating new UI components and templates to scale the design system (designers can share and use these to continue prototyping while waiting for engineers to add them to the repository)
• Saving multiple states or versions of a component for faster changes during prototyping and testing

Using Args and Props

Organizations can use React props or Storybook Args to set component properties that appear in UXPin’s Properties Panel. These props and Args ensure designers stick to the design system’s guidelines for styling, like colors, typography, states, shadows, and other crucial values.

Designers can apply different properties using dropdowns, checkboxes, text fields, etc., to achieve an on-brand result with minimal effort every time.

These properties also help engineers develop the final product faster because they already have the components and styling in the repository–ensuring absolute cohesion and consistency with every release!

Start Designing With Merge and Fluent UI Today!

Leverage the power of UXPin Merge and Fluent UI to develop enterprise products that exceed customer expectations with high-quality user experiences. Visit our Merge page for more information and how to request access to sync your design system or open-source component library.

The post Bring Fluent Design System for React into UXPin with Storybook appeared first on Studio by UXPin.

Website footers are essential UI patterns. They guide visitors to important content while providing an excellent opportunity to add business value and connect with new customers.

This article explores website footer design, do’s and dont’s, expert examples, and best practices to inspire your next web project.

Prototype UI designs at higher fidelity and advanced functionality with UXPin. Sign up for a free trial to discover the endless possibilities of code-based design.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a Website Footer?

A website footer is a UI pattern at the bottom (or footer) of a website or application. Footers are important website components because they display helpful information, including navigational links, contact details, policies, copyright info, and social media links, so users can learn more about your business.

Link the primary header navigation; a website footer appears on every page so users can always access the links and content. Even though it sits at the bottom of a web page, footers are vital components for users and business goals.

What is the Purpose of a Footer?

How designers use a website footer depends on the business and content. Most websites use the footer for secondary navigation–important links that can’t fit in the website header like about, product docs, resources, etc.

With GDPR, CCPA, and other legal information, websites must include certain policies, like privacy, terms of use, etc. Designers usually have these links in the footer, so users always know where to find them.

Sales Benefits

Many UI/UX designers also use website footers for business purposes like a product CTA or capturing leads via contact page or a newsletter signup form. Footers help users to navigate to feature pages, best-selling product categories or more information about services.

Marketing Benefits

Many marketers also use website footers for SEO (search engine optimization) purposes. There are a couple of SEO benefits of footers:

• Help with boosting pages you want to rank
• Homepage links carry weight, meaning search engines see these internal links as important and prioritize accordingly
• Increases the likelihood of clicks, thus reducing bounce rates which improve domain authority and rankings

What Should a Footer Include?

Again, it depends on the website. An eCommerce website will have different priorities for the footer to a blog. Here is a list of items you might include in a footer:

• Navigation links
• Brand engagement and messaging
• Testimonials
• Copyright

Navigation Links

There are several types of navigation links businesses include in the footer. These include:

• Utility links: contact information, phone number, email address, physical address, customer service contacts, privacy policy, terms of use
• Doormat navigation: A copy of the main navigation for convenience (might be unnecessary for sticky headers)
• Secondary task links: job application, investor information, documentation/specifications, press information, affiliate signups, FAQs
• Sitemap: Links to multiple topic/product categories

Brand Engagement & Messaging

Another common use for a website footer is brand engagement and messaging–links and footer content that encourage people to connect with the company, including:

• Social media icons
• Social feeds with several latest posts (usually Instagram or Twitter)
• Brand logo
• Brand slogan or vision (1-3 sentences)
• Email signup

Testimonials

Some brands use the footer for testimonials and reviews. They might even include a Google Business or TrustPilot widget displaying their star rating. These UI patterns are excellent for social proof and creating interest in your product or service.

Copyright

The copyright symbol and notice at the bottom of a footer tell visitors that you own the website’s content. It’s not a legal obligation, but it is common practice to inform people that you plan to protect your rights to the content.

6 Footer Design Examples

We’ve chosen six footer design examples from different industries to show how designers create layouts that align with business goals and user needs.

The key takeaway from these examples is how different industries prioritize links and content. Each example also uses a clean, minimalist layout to help visitors find information quickly.

UXPin – Saas Footer Design

We decided to use our UXPin website as a SaaS footer example. You’ll notice we use a sticky header, so our primary navigation is always visible to desktop users.

UXPin’s footer includes key company, product, and marketing information. Customers often want to know how UXPin, an advanced tool, compares to popular image-based competitors, so we’ve included several product comparison links.

Other essential footer links for SaaS products are documentation, tutorials, educational content, and other helpful resources. UXPin also includes a language selector, social links, and policy information.

The BBC – News Footer Design

The BBC (British Broadcasting Corporation) is one of the largest news and media organizations worldwide. 

The media giant primarily uses its footer to display different 30+ language versions of the website with a separate section for popular news topics. The very bottom of the page features links to legal information, policies, contacts, and advertising with the BBC.

The clean layout is easy to read, allowing users to find content and links fast.

Asos – eCommerce Footer Design

Global eCommerce brand Asos uses a simple footer design with social media buttons, payment methods, and helpful links. Most important for eCommerce are links for delivery/returns policy, order tracking, and special promotions–in Asos’ case, they promote student discounts, gift cards, and Black Friday.

As a listed company (ASOMY), Asos must provide investor information and corporate responsibility. 

Lastly, as a global eCommerce brand, Asos shows customers which store they are viewing and a link to change to another region and currency.

Zorro Design – Agency Footer Design

Agencies generally use their websites for two purposes:

• Showcase their work
• Generate new leads

US-based Zorro Design uses a black and white footer design with a bright yellow CTA taking users to a contact form. Zorro’s designers have designed the footer perfectly, so the CTA sits in the center of the screen, with lots of surrounding whitespace screaming “CLICK ME!”

Lastly, Zorro places its logo and slogan to the left with several key links, including recent work, contact, about, and social media buttons.

Zorro’s footer design is clean and uncluttered, allowing users to absorb and find content quickly.

Alex Lakas – Freelancer Footer Design

Like agencies, freelancers need a portfolio website to showcase their work and get clients. Product Designer Alex Lakas uses his website footer primarily to connect with potential clients/employers and designers through his social channels.

As a remote worker, Alex also uses flashing text to tell visitors where he’s currently working–in this case, it’s Los Angeles.

Alex’s dark/light mode switcher is a nice touch for a UX design portfolio, showing he’s mindful of web accessibility. He also has links to past work and a contact page.

Booking.com – Travel Footer Design

Booking.com is one of the world’s biggest online travel agencies, with over 28 million accommodation listings in more than 70 countries. Booking.com’s goal is to sell accommodation, but they also want to onboard new properties, so their primary footer CTA is to “list a property.”

The website’s footer also features its five most important links using a large bold typography to stand out. Customers also have several search categories, including regions and accommodation options, for customers to find their ideal destination faster. 

As a listed company (NASDAQ: BKNG), Booking.com includes links to all necessary investor and corporate information.

At the bottom of the page, Booking.com features several logos of the company’s holding group, Booking Holdings Inc.

How to Design a Footer?

Prioritize Links

The first step to designing a great footer is prioritizing your links. Designers must consider user needs and business goals to create something meaningful and helpful to visitors.

Less is More

Cluttered UIs always perform poorly. They’re difficult to digest and can confuse users. Reducing UI elements, links, and text can help drive traffic to your most important content–which takes us back to point one, prioritize your links properly!

Use a Single CTA

A single CTA helps guide visitors to your most important task or business goal. Footer designs are usually two-tone, often black and white, providing the perfect background for a bright-colored CTA to pop and grab people’s attention.

Make Footers Mobile-Friendly

Mobile-first design is crucial for website footers. On a desktop, you may have 3-4 columns, while on a smartphone, you have one. The more columns and links, the more users have to scroll to find content. Place your most important links and content in the first column, so users see this first.

Use Hierarchy to Display Importance

The examples from Booking.com, Zorro Design, The BBC, and Alex Lakas used visual hierarchy to show users their most important links. Different sizes, colors, and weights are effective techniques for displaying importance.

Stay Compliant

Legal information like policies and disclaimers are crucial for modern web design. Designers must research their company’s obligations regarding where and how to display these links.

For example, financial and investment products in some countries must display their disclaimer information in the footer, so it’s always visible to customers. See this footer example from Chase Bank.

Branding Opportunities

Your website’s footer is a fantastic opportunity to connect users with your brand’s touchpoints, like social media, newsletter signup, and company links.

Be Helpful

Users often scroll to a website footer looking for help like documentation, tutorials, blog, and other resources. The UXPin footer design is a perfect example of providing multiple resources to educate customers about our products.

Designing Footers With UXPin

Create beautiful, interactive, responsive website footers in UXPin. With UXPin, designers can build prototypes with code-like functionality to improve user testing and get better feedback from stakeholders.

UXPin also includes built-in accessibility tools, including a contrast checker and color blindness simulator to test designs on the flying without leaving the canvas.

Deliver better products faster with UXPin–the world’s most advanced code-based design tool. Sign up for a free trial and deliver better user experiences to your customers with UXPin.

The post Footer Design – Best Practices Together with 6 Examples appeared first on Studio by UXPin.

A product and its design system are ever-evolving projects. As the product scales, designers must create new UI patterns and components to meet business goals and user needs while solving usability challenges.

UXPin’s Patterns allow design teams to combine existing Merge components with standard UI elements to create new UI patterns and save them to a UXPin library.

Create a fully-integrated design system and deliver a single source of truth to your product development teams with UXPin Merge. Head over to our Merge page for more details and how to request access to this revolutionary code-based design technology.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is UXPin Merge, and how can it help you?

Merge allows you to import a component library‘s elements hosted in a Git repository, Storybook or npm package to UXPin’s design editor, so the entire team uses the same design system. Then, designers can use those elements and build prototypes that are fully consistent with end product.

Traditionally, most design systems feature two UI libraries:

1. Design teams use a static UI kit
2. Engineers use a coded component library

Although many organizations claim this dual system is a single source of truth, achieving it takes a lot of time and resources.

UXPin Merge is genuinely a single source of truth because there is only one component library. Designers and engineers use the same UI elements and patterns from the same repository.

You can sync React components using Merge for Git or UXPin’s Storybook Integration for other popular front-end technologies like Vue, Ember, Web Components, Angular, and more.

Designers can also import the npm packages of open-source component libraries like MUI, Bootstrap, Ant Design, Lightning, etc., through Merge’s npmIntegration to build fully-functioning prototypes or a minimum viable product (MVP).

What is the UXPin Patterns?

Patterns is a Merge-exclusive feature enabling design teams to combine Merge components and standard UXPin UI elements to build more complex UI patterns.

In the context of Brad Frost’s Atomic Design, Patterns allows designers to take atoms and molecules (foundational UI elements and components) to build larger, more complex designs like organisms and templates (cards, forms, navigation, headers, footers, etc.)

Some of the most common use cases for UXPin Patterns include:

• Creating advanced components not available in your current library
• Save properties for your most commonly used component variants
• Grouping and saving Merge elements into bigger UI patterns
• Sharing new UI patterns with design teams to enhance consistency
• Promoting new patterns for engineers to add to the component library

Designers can combine UI elements from multiple component libraries or UXPin Classic components to create new patterns. This flexibility is beneficial if your design system doesn’t have the parts required for a new UI pattern.

For example, let’s say you want to build a header navigation with dropdown menus, but your current design system doesn’t have them. You can use UXPin’s npm Integration to import a dropdown menu from MUI (or another open-source library) and use it to build the new navigational pattern. Engineers can read MUI’s docs and view the JSX code to understand how to code your new pattern and add it to the design system.

3 Benefits of UXPin Patterns

Patterns offer three primary benefits to product development and design system teams. The common thread among these three benefits is that Patterns provides a comparable alternative when your Merge repository doesn’t have what you need. 

1. Nesting UI Elements to Build Complex Components

Even with a comprehensive design system, designers often have to create new components and patterns as the product evolves. Often, these patterns don’t exist in the design system, so designers must build them from scratch every time.

Designing from scratch can add valuable time to your project, especially if you’re building something like a graph or data table. Instead, you can create these complex patterns once and save them to your UXPin Pattern library. You can also share these with other designers so teams aren’t doing duplicate work or creating inconsistencies.

While many design tools offer this functionality, none allow you to manipulate and combine code components. With Patterns, designers take on a hybrid designer/engineer role capable of building fully functioning, complex UIs without writing a single line of code.

2. Reusing Properties for the Same Component

Even though Merge allows designers to build prototypes significantly faster than image-based design tools, there’s always room to create greater efficiency.

For example, you might want to save patterns for various Merge form input or button states, like default, error, warning, and success. With Patterns, you can set these up once and save them to your pattern library, ready to drag and drop for the next user interface.

These pre-built patterns are especially useful for design sprints or making quick changes during stakeholder meetings and user testing. Instead of fiddling with properties in UXPin’s Properties Panel, you simply drag the desired pattern onto the canvas, ready to go!

3. Promoting & Testing new Design System UI Elements

New UI elements don’t magically appear in your design system. The DS team must build and test these patterns before release. With UXPin Patterns, the DS team can combine existing components with UXPin Classic or open-source libraries to test and iterate at higher fidelity and functionality.

Component-driven prototyping with UXPin Merge and Patterns allows designers to test and iterate with less input from engineers, who are free to focus on developing the final component and working through any design system technical backlogs.

With Patterns, design teams don’t have to wait for engineers to develop the new component. They can use the prototype pattern created by the DS team to continue the design and testing process without compromising fidelity and functionality.

UXPin Patterns is a fantastic tool for creating one-off or rarely-used UI components. These patterns aren’t used enough for promotion to the design system, but design teams still need access to them.

Storing these in your UXPin Patterns Library provides the benefits of fully functional Merge components without adding them to the design system’s repository. Engineers can store the component in a separate repository and use it when needed.

How to use UXPin Merge Patterns?

This quick demo shows how easy it is to create a new Merge Pattern in UXPin. We’re using the same components we imported for our MUI npm Tutorial, which you can check out here.

The pattern below features three MUI components imported using Merge’s npm Integration and two UXPin Classic text elements–not going to win any design awards, we know!

But even a simple pattern like this takes some setting up, so it would be nice to eliminate that repetitive task by creating a reusable pattern.

Step 1

Add and arrange the components you want for your pattern. Remember, you can combine multiple component libraries and UXPin Classic elements.

Step 2

Set the properties for the Merge components. 

• We’ve created an email input field with a placeholder and some help text for accessibility. We’ve also made this field required so users know they must complete it.
• Next, we’ve added an MUI checkbox that users must check to accept marketing from us.
• Lastly, we’ve chosen an MUI button and set it to primary so it’s obvious where users must click once they complete the email field and checkbox.

Here is an example of the email component’s Properties Panel.

Step 3

Switch to the Patterns tab on the left sidebar above your component library.

Step 4

Select the group of UI elements or a single component you want to save as a pattern. Click the large white + Add button in the left sidebar, and your new pattern will appear.

Step 5

Click on the pattern’s name to change it to something more descriptive or to align with your design system’s naming convention. Once you have multiple patterns, you can use UXPin’s search feature to filter what you need.

Deleting a Pattern

You can also delete any old patterns by clicking the pencil icon (“Enter edit mode”) below.

Select the patterns you want to remove and click Delete.

Creating Different States

Now that we have a default pattern, we might want to create additional states to optimize our workflow further.

For example, we can set up an error state pattern triggered when the user doesn’t enter an email address.

We could also create a disabled state for the button that’s only active once the user enters a valid email address and checks the marketing terms.

Now we have three newsletter patterns ready to start prototyping. Designers can drag and drop to make quick changes without worrying about setting properties or switching individual components from the pattern.

Ready to streamline your workflows with UXPin Merge and Patterns? Request access to Merge and let’s get going.

The post How to Use UXPin Merge Patterns? A Quick Tutorial appeared first on Studio by UXPin.

Component-driven prototyping significantly improves user testing while providing stakeholders with realistic product design expectations. UXPin’s npm integration enables design teams to use open-source component libraries to design fully functioning, high-fidelity prototypes.

Get on board the code-based design revolution with UXPin’s Merge technology and npm Integration. Discover more about component-driven prototyping that maximizes the use of design systems, improves design handoffs, and scales design significantly.

Bring UI components via Git repo, Storybook, or through our newest npm integration. Learn more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is UXPin Merge?

UXPin Merge is a code-based technology allowing you to sync a component library hosted in a repository, Storybook or as an npm package to UXPin’s design editor. Designers can use these UI components to build prototypes that look and function like the final product.

Any changes engineers (or the design system team) make to functional components in the repository automatically sync to UXPin, notifying design teams of the update. Merge includes version control, allowing team members to switch to an older design system version if needed.

This single source of truth enhances collaboration while reducing the burden on DesignOps and the DS team to manage two design systems–one for design tools and the other for code.

What is UXPin’s npm Integration?

UXPin Merge required engineering expertise to set everything up until now. Not every team has valuable engineering resources for the setup, so we came up with a way of integrating npm components to UXPin.

Merge’s npm Integration gives designers complete control over installing and managing open-source component libraries available as npm packages. Designers can import and customize components to meet their prototyping needs using an intuitive interface. It requires zero coding skills to set everything up.

If you want to learn about npm for designer, read our introductory guide: What is npm package?

The Benefits of Working With Ant Design

Ant Design is the product of the Ant Group–a Chinese-based conglomerate of several tech/finance organizations, including Alipay, Huabei, and Yu’ebao, to name a few.

Organizations have used Ant Design to build a multitude of applications, including B2B, B2C, and enterprise products. The comprehensive design system includes React, Angular, and Vue component libraries, with a complementary icon set. You also get Ant Design Mobile for building native applications.

Ant Design npm Integration With UXPin Merge

Ant Design’s React component library is available as an npm package (antd). Designers can import Ant React components using UXPin’s npm Integration and customize properties in the Merge Component Manager.

If design teams want to use Ant Design with other design tools, they must use one of Ant Design’s static vector-based UI kits, but with UXPin’s npm Integration, designers have access to the same components engineers use.

Component-driven prototyping with Ant Design creates a single source of truth between designers and engineers while ensuring the highest consistency between UX and product teams.

With UXPin’s npm Integration, you can choose which Ant Design React props you want to import–color, size, icons, states, etc.

Assigning Properties in Merge Component Manager

Our npm Integration includes Merge Component Manager–your central control for importing and managing each Ant Design’s component properties.

UXPin’s npm Integration works with React components, so you can follow Ant Design’s React documentation to reference which props you want to import. Once you set these up in Merge Component Manager, the component’s properties appear in UXPin’s Properties Panel.

For example, there are six types or variants of an Ant Design button:

• Primary
• Ghost
• Dashed
• Link
• Text
• Default

These button types (and all other properties) appear as a dropdown in the Properties Panel for designers to choose. Props can appear as text fields, checkboxes, code editors, etc., depending on the component.

Connecting UXPin to the Ant Design npm Package

Navigate to your UXPin dashboard and click “New Project.”

Name your project and click “Create New Project.”

Click “New prototype” to open the project in UXPin’s design canvas.

Click the dropdown at the bottom of the Design System Libraries tab in the lefthand sidebar, and click “New library.”

Your sidebar and available libraries may differ from the example.

Select “Import React Components” and click “Next.”

Name your library. This name is purely for your reference and won’t impact the import.

You also need to grab the npm package repository name, which you find under Install on Ant Design’s npm page. Copy and paste the Install contents from npm into the “Library package name” field (delete everything preceding antd).

To import component styling properties, Merge requires the path to Ant Design’s CSS (antd/dist/antd.css). You can find this under Usage in Ant Design’s React installation instructions.

Importing Ant Design Components

UXPin will automatically redirect you to the canvas once you complete the npm integration. Now it’s time to select the Ant Design components you want to import.

From the lefthand sidebar, click “Open Merge Component Manager.”

Merge Component Manager will open in a new tab.

Click “Add new component.”

Enter the name of the component you want to import.

You’ll find the correct naming convention in the Ant Design docs under Component API. Ant Design’s components use CamelCase with no spaces. Always capitalize the first letter. For example, Date Picker would be DatePicker.

For this tutorial, we will import an Ant Design Button as our first component and add it to a new category called General. We recommend using the same categories as Ant Design’s docs, so designers and engineers have the same reference point.

You can add multiple components to a single import, saving you time repeating steps two and three.

Click “Import Components.”

Click “Publish Changes” in the top right to initialize the import process.

The first time you do this for a new component, it might take a minute or two.

Once the import is complete, click “Refresh Library” to update the changes in your project library.

If you follow these instructions step-by-step, you’ll notice you have a category (General) and your first component (Button) in the left sidebar.

Click on the Button to begin adding properties. You can find these React props in Ant Design’s documentation under API in Components > General > Button.

Adding Component Properties with Merge Component Manager

Let’s add a few Ant Design button properties using the React props from the documentation.

The React button type prop imports the six Ant Design button styles.

• Property name: enter “type” (always use lowercase for props)
• Display name: This is for your reference, but something descriptive that both designers and engineers use–we’ve gone with “Type” to keep things uniform
• Description: Add a short description or instructions for designers–we’ve used “Type of button”
• Property type: “enum”–allows you to create a dropdown display the six styles
• Property control: “select”
• Options: Add the options from Ant Design’s API docs–primary, ghost, dashed, link, text, default
• Default value: Your preference–we’ve gone with “default” as per Ant Design’s docs

As you complete the component’s properties, you’ll notice a component preview will appear and change according to your preferences.

Once you have completed all the fields, click “Add property.”

Then “Save changes.”

Lastly, “Publish library changes.”

Component-Driven Prototyping in UXPin

Once you import the Ant Design components and properties you need, prototyping in UXPin is as simple as drag-and-drop to build layouts. We created this simple email sign-up form using three Ant Design components in less than a minute.

When you select an Ant Design component, the properties you created in Merge Component Manager appear in the righthand Properties Panel.

Try building an Ant Design prototype with UXPin’s npm integration. Discover how component-driven prototyping can revolutionize your product development workflows to deliver better user experiences to your customers. Learn more about UXPin Merge.

The post How to Import Ant Design to UXPin? An npm Integration Guide appeared first on Studio by UXPin.

Material Design is one of the most popular design systems. If you own an Android device, you use Material Design daily. Many companies use the Material Design System as a foundation for building mobile and web applications.

The system’s comprehensive component library and resources, including Material Icons (now Material Symbols), give organizations and startups the building blocks to scale products infinitely without designing from scratch.

This article explores Material Symbols and other Material resources you can use for your next product development project.

Material Design UI and Icons come standard with every UXPin plan. Sign up for a free trial to build beautiful apps with UXPin and Material Design today!

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is Material Design?

Material Design is a design library developed by Google, including UI components, icons, typography, and more. Every Material component includes guidelines for implementation, usage, anatomy, behavior, and more to help designers and engineers achieve the best results while delivering high-quality user experiences.

Google launched the first version of Material Design at the 2014 Google I/O Conference. In May 2021, Google released Material Design 3, including notable features like Dynamic Color, foldable device components, and design tokens.

Material Symbols Launch

One of Material Design’s most exciting recent updates was the launch of Material Symbols–a customizable icon set with over 2,000 open-source icons in five styles. You can still find all your favorite Material Icons, but now you have more flexibility and customization to meet your product and brand’s requirements.

Material Icons are still available but don’t offer the same customization as Symbols. You can only adjust the size and density versus the four variable options with symbols.

Material Icons Set

Google has kept the old Material Icons, albeit fewer than the Symbols catalog. Icons are available in five styles, Outlined, Filled, Founded, Sharp, and Two-tone.

Material Symbols – What’s New?

Material Icons has moved under Google Fonts, offering a variable icon set in three styles, Outlined, Rounded, and Sharp. Designers also have the option to customize the icon set with four variables or axes:

• Fill: Fill or unfilled appearance
• Weight: Defines the symbol’s stroke from 100 to 700 weight
• Grade: Granular adjustments to the symbol’s thickness to convey emphasis
• Optical size: Size icons to 20, 24, 40, or 48 pixels

The variable methodology allows engineers to store multiple variations in a single font (or icon) rather than several files. By reducing the file size and number of files, engineers enjoy better performance and fewer assets to manage.

Three Styles

Google also introduced three new styles to match a brand’s identity and UI design.

• Outlined: Clean and light. Designers can adjust the icon weight to complement the product’s fonts.
• Rounded: The curved aesthetic works well with rounded logos and heavier fonts.
• Sharp: Designed to match UIs with straight edges and 90-degree corner styling.

Build Your Own Material Icons

If you can’t find the icon you need in Material Symbols’ vast catalog, Google includes guidelines for designing custom icons, including:

• Design principles: best practices to create clear iconography that’s meaningful and helpful to users.
• Icon sizes and layout: how to set up the grid size and layout for designing icons using a design tool.
• Grid and keyline shapes: techniques for creating consistent a consistent icon set.
• Icon metrics: icon design anatomy including corners, weight, stroke, and complexity.

Following these helpful guidelines, you can utilize Material’s comprehensive icon set while including a few relevant to your brand.

How to Use Google’s Material Icons & Symbols

There are several ways designers and engineers can use Material Icons and Symbols. 

Downloading SVG or PNG

You can download Icons and Symbols in SVG or PNG format. We recommend using SVG for its performance and customization benefits. PNG files are much larger and more complicated for designers and engineers to edit and resize.

Google allows you to customize your Icons and Symbols before downloading, so you have a finalized asset to use in your project.

CSS/CDN

Material Symbols provides a CSS file for website installations similar to what you use for Google Fonts. The problem with this method is that it requires your website to make additional requests, which can severely affect performance.

If you’re planning to use more than one Material Symbol, it’s better to use another method for installation.

Operating Systems & Frameworks

Material Icons and Symbols offer downloads for Android and iOS to install as project assets, with code snippets for implementation. Material Design includes instructions for Flutter (a Google-developed programming language) and Angular. React instructions are available in MUI’s documentation.

Designer Usage

Most design tools offer plugins or extensions for Material Icons. If you’re using UXPin, the complete Material Icons set comes standard with every plan.

You can also import your own SVG icons, edit them in UXPin and save them to your Design System to share with other team members.

Using Material Icons and Symbols With Typography

Google’s Material 3 documentation offers tips and best practices for pairing icons with typography.

Weights

Never use different weights for your icons and text. Google makes it easy to pair these assets with Material Symbols’ Weight customization variable. Ensure you always match the font weight with the icon weight to achieve a clean and consistent aesthetic.

Correct font weight.

Incorrect font weight.

Sizing & Alignment

Always match the icon size and alignment with the text. Users must be able to read both and recognize they’re related. Google recommends designers “shift down the baseline of symbols to approximately 11.5% of the type size.” This technique will keep icons and text uniform and aligned.

Material Icons Accessibility

Google provides brief but helpful advice to designers about icon accessibility. Designers must always use meaningful, descriptive labels with icons, especially for navigation. Icons without text labels can appear ambiguous and confusing to users. Designers must also include alt text for screen readers and other assistive technologies.

Target size is also a crucial factor for icons. People with large fingers or hand disabilities might accidentally hit the wrong icon button, causing confusion and frustration.

Google recommends designers use a minimum target size of 48 pixels. If you’re using a 20-pixel icon, provide enough padding to make the total target area 48 pixels.

Designing with Material Design’s Icons in UXPin

With several icon sets, including Material Icons, preinstalled with UXPin, designers don’t have to install plugins or upload external files. Here’s how easy it is to add icons to your project.

Step One – Click the icon element

Click the icon element in the Quick Tools panel to the left of the canvas. Alternatively, you can use the keyboard shortcut OPTION+I (on Mac) or ALT+I (on PC).

Step Two – Draw an icon on the canvas

Click and drag a square where you’d like the icon to appear on the canvas. Hold down SHIFT to maintain an equal width and height.

Step Three – Icon properties panel

Once you draw an icon, an icon properties panel will appear on the right Properties Panel. You can select Material Icons or one of the other sets, including Fonts Awesome, Retina Icons, and a UXPin set, to name a few.

Step Four – Select an icon

Scroll through the available Material Icons to find what you need. Click on any icon in the properties panel (while you have the icon selected on the canvas) to make your selection.

Step Five – Adjust icon properties

Once you have chosen an icon, you can style it using the Properties Panel above the Icon section. Below the Color Picker is a dropdown with available design systems, including Material Design, so designers don’t have to copy/paste HEX codes from elsewhere.

Step 6 – Add interactions

At the top of the Properties Panel, you’ll find Interactions. Add interactions, animations, transitions, etc., to make your icons interactive. For example, we might want this user icon to open a personalized profile page.

Check out UXPin’s Interactive UI Patterns and App Examples to see how UXPin’s features work and what’s possible with code-based design.

Improve Prototyping and Testing With UXPin

Material Icons are just one convenience of working in UXPin. Our goal is to help designers build prototypes quicker and with greater functionality and fidelity as image-based design tools.

Using one of UXPin’s built-in design libraries, designers can drag and drop elements to build interactive prototypes in minutes. We’ve included five popular design libraries to accommodate every type of project, from websites to web and mobile applications for enterprise and B2C products.

Every UXPin plan includes Material Design, iOS, Bootstrap, Foundation, and User Flows, with each library’s interactive elements, colors, text styles, and icons.

UXPin’s Design Systems feature allows designers to build a design system from scratch, automatically categorizing the library into Colors, Assets, Typography, and Components. You can also set up permissions and include documentation for designers and engineers to follow.

Build better prototypes that accurately replicate the final product experience using UXPin’s code-based design tool. Sign up for a free trial to discover the possibilities of designing with UXPin.

The post Material Design Icons – Building Blocks of Web and App Design appeared first on Studio by UXPin.

We often associate dashboard design with enterprise products. But dashboards are everywhere, including social media applications, games, and even our mobile devices. These dashboards show users critical information in a succinct visualization that’s easy to digest.

Let’s explore dashboard UI design and prototyping plus some best practices to ensure you create amazing dashboard user experiences for your customers.

UXPin is an advanced code-based design tool allowing you to create accurate dashboard prototypes for meaningful, actionable feedback from usability participants and stakeholders. UXPin’s Merge technology helps bring teams together by allowing them use a single source of truth in the product development process. Learn more about UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is a Dashboard?

A dashboard is a user interface element that allows users to visualize important information (like analytics, status, statistics, reports, etc.), complete administrative tasks, and tweak settings. 

The user interfaces for your mobile phone or desktop settings are dashboards. If you’ve ever used WordPress, Shopify, or another CMS (content management system), the admin UI is a dashboard. Your online banking user interface is a dashboard.

Dashboard Types

Choosing a dashboard design depends on the functionality and information you want to give users. There are four types of dashboard UI designs:

• Analytical: Displays data visualizations
• Operational: Shows real-time or short-term data
• Strategic: Visualizes long-term goals with KPIs and status
• Tactical: Displays high-level performance monitoring 

Type 1. Analytical Dashboard UI Design

Product designers use analytical dashboards to simplify and display vast amounts of data. These dashboards show a high-level overview of data in single numbers or graphical representations.

Analytical dashboards generally look at historical data so users can identify trends to make predictions or decisions. For example, a marketer will use an analytical dashboard to analyze key demographics, user locations, and traffic sources to create a marketing strategy.

Type 2. Operational Dashboard UI Design

Operational dashboards show real-time or short timeframe data so users can monitor a system or operations. The data on operational dashboards changes regularly, often in real-time, relating to data-source changes.

Operational dashboards usually display operation-critical information near the top–where most users’ eyes focus on first. For example, a logistics manager will use an operational dashboard to monitor real-time warehouse activities and respond to potential issues.

Type 3. Strategic Dashboard UI Design

A strategic dashboard allows users to track performance against KPIs towards long-term goals. These dashboards summarize complex data so users can identify strengths and weaknesses.

Strategic dashboards usually display a goal, current status, and the projections required to meet the target. Strategic data might also include previous periods or years. For example, a sales manager will use a strategic dashboard to view performance on sales targets and compare the previous year, quarter, month, week, and day to track progress.

Type 4. Tactical Dashboard UI Design

A tactical dashboard is a strategic/operational hybrid, allowing users to monitor performance towards an objective–like completing a project.

Tactical dashboards allow users to visualize overall and segmented performance to guide strategies and decision-making. For example, a project dashboard shows overall progress and which tasks the team must still complete. The tactical dashboard will also flag potential issues, like missed or upcoming deadlines, for a project manager to follow up.

Check out this article from Datapine for more information and examples on dashboard UI types.

Dashboard UI Design Elements

UI Designers use several key elements to display different types of data. These graphical representations make it easy for users to visualize and compare information.

Data Tables

Data tables (similar to an Excel sheet) are important in dashboard design because we can use them to create other UI elements like charts, gauges, pies, and graphs. Tables usually take up a lot of space, so designers place these on secondary pages where users can analyze the data behind a visualization.

Bar Charts

Bar charts are fantastic for comparing data on a timeline–like monthly revenue. The visualization of varying heights means users can instantly compare different data points.

Pie Charts

Pie charts visualize data distribution across multiple points that make up a whole. We often see pie charts in expense tracking applications because they allow users to visualize their expenses and see where they spend the most.

Graphs

Graphs are most helpful in tracking performance or trends over a specific period. The lines make it easy to see which way a trend is moving and changes at various key intervals (like months of a year).

Gauges

Designers can use gauges to display progress or status. A progress gauge can include a numerical value/s, giving the user two visualizations for better clarity.

Designers can also use gauges to indicate status when monitoring a specific system. For example, a warehouse management system might use a gauge to display the packer’s current performance towards meeting a daily target with poor, below average, acceptable, and optimal. If the indicator drops below acceptable, the manager can investigate and attend to any performance issues.

Metrics or Numbers

Designers can use metrics to show a key value or support a visualization–for example, a number representing the current revenue.

Metrics are most effective when they stand alone, making it easy for users to digest the information and reducing cognitive load.

Dashboard UI Design Process

The Data School’s eBook, Dashboard Prototyping and Feedback, outlines a four-step dashboard design and prototyping strategy. We’ve modified this slightly to include a comprehensive six-step end-to-end dashboard design process:

1. Review
2. Sketch
3. Feedback
4. Prototype
5. Test
6. Design Handoff

Step 1. Review

The first step is to review the research to define your dashboard’s goals and requirements. Designers must align the user’s needs with the available data to determine how to structure and prioritize the design.

Make a list of the UIs and elements you’ll need to start sketching. Arranging these elements by importance will help prioritize your dashboard UI.

Step 2. Sketch

Designing dashboards is complex and time-consuming. It’s crucial that designers sketch and refine ideas before committing to high-fidelity mockups and prototyping.

Designers use sketches to determine how best to represent the data. If you have multiple graphics on a single UI, sketch them in isolation before combining them on a single paper screen.

 The Data School’s eBook recommends asking two questions as you sketch:

• What decisions does the user need to make?
• What does the user need to know to make those decisions?

Dashboards are busier than most other UI layouts, so keep data to a minimum. If you have lots of critical data, consider categorizing the information and splitting them over two or more pages.

Step 3. Collect Feedback

Feedback from team members and stakeholders is essential before designers commit to digital mockups and prototypes. This input can help improve designs and iron out issues before the time-consuming digital process. 

Keep in mind that there might be a few rounds of iteration before proceeding to the next step.

Step 4. Prototype

Use paper prototypes and notes, create your wireframes, digital mockups, and prototypes. We recommend using a component library or UI kit, so you don’t have to start from scratch.

UXPin features built-in design libraries, including Material Design UI, Bootstrap, and Foundation–excellent libraries for dashboard prototypes.

You can also sync your design system or a component library to UXPin using Merge. UXPin powered by its Merge technology is an excellent choice for prototyping dashboards because it allows designers to build fully functioning graphs and charts–an impossible task with image-based design tools.

Step 5. Test the prototype

Prototyping and testing is an iterative process. UX designers must test prototypes comprehensively to ensure usability issues don’t affect the final product.

It’s important to get feedback from end-users and key stakeholders to ensure designs meet users’ needs while maximizing business value.

Step 6. Handoff the design

Dashboard design handoffs are complex and tricky. We recommend following this design handoff checklist to streamline the process and improve collaboration between designers and engineers.

Dashboard UI Design Best Practices

Here are some user interface tips for good dashboard design.

Prioritize Content

It’s important to ask users what data matters most during the research phase to guide the design process. Try to separate data between “mission-critical” and secondary, so you know how to prioritize and arrange content. Read about UX Content Strategy.

Less is More

Always look to reduce your dashboard layout as much as possible. Dashboards UIs are busy, which can severely impact cognitive load and usability.

Mobile-First UI Design

It’s easy to make a dashboard look great on a desktop. The real challenge is creating a mobile-friendly dashboard. Adopting a mobile-first dashboard design strategy can help solve two problems:

• Making your dashboard accessible for mobile users
• Reducing UI elements

Be Consistent

Consistency is essential for any UI, but for complex dashboard designs, it’s vital! A design system can help keep typography, colors, spacing, layouts, and other UI elements consistent throughout your design.

Double Margins

In 10 Rules for Better Dashboard Design, designer Taras Bakusevych recommends using double margins and white space to separate content. It’s difficult to read when content touches the margins or is too close together.

Don’t Scroll!

Taras also says one of the biggest design mistakes is making dashboards scrollable. Summarize as much as possible, move it to a new screen or create tabs so users can switch between content.

Be Flexible

It’s impossible to create a one-size-fits-all dashboard layout. Users will have different needs and priorities even within an organization or individual project.

Providing the functionality for users to arrange their dashboards to meet their needs creates a positive user experience while solving the one-size-fits-all challenge.

Design Dashboards Using UXPin Merge

UXPin Merge will allow you to design dashboard UI accurately. Instead of prototyping static designs, designers can assemble dashboard UI using pre-made functional components that will behave like a real dashboard that was built by a developer.

Build your first dashboard UI using true components that come from your dev’s library. Simply drag and drop ready-made elements to build fully functioning dashboards and other user interface elements. 

The post How to Prototype a Dashboard? appeared first on Studio by UXPin.

In a world filled with an extensive range of devices and different screen sizes, it’s safe to say that responsive design is design. Organizations cannot afford to build any website or application for a single device or screen size because they’ll lose out to a competing product that’s more accommodating to more users.

This step-by-step responsive website design guide walks designers through the process of designing for multiple viewport widths. Incorporating these processes into your UX workflow will ensure that design teams consider various screen widths when designing user interfaces.

Design responsive prototypes without adjusting multiple layouts for different screen sizes Try the power of UXPin’s Merge technology and bring React components to a design tool. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is Responsive Design?

Responsive design is the process of designing user interfaces to accommodate multiple viewports. The aim is to provide a consistent user experience no matter what device someone uses.

Traditionally, responsive web design considered three primary screens, mobile phones, tablets, and desktops. Nowadays, designers have more screens and devices, including smartwatches, TVs, vehicle dashboards, and fridges, to name a few. Some products also include voice, meaning design teams must also incorporate VUI (voice user interface).

Understand Responsive Design

Before designers start designing responsive UIs, they must understand responsive design and the techniques developers use for their products. 

For example, engineers can use CSS to serve users different-sized images based on their screen size or use an optimization tool that does this automatically. If engineers use the former, designers must supply assets for multiple screen sizes, whereas the latter only requires one.

So, before designers start a project, they must consult with engineers to understand the technical requirements and constraints. Some questions designers need to ask include:

• Does the product use a responsive grid or a fluid grid?
• What are the product’s breakpoints?
• Does the operating system (Apple iOS, Android, Windows) impact the product’s layout?
• How do engineers scale and serve images?
• What formats do engineers use for videos, images, icons, and other media?
• What grid system does the product use?
• Does the product use Flexbox or regular CSS?

Responsive Grid vs. Fluid Grid

A responsive grid uses a standard 12-column grid system with pixels for sizing. Using pixels means engineers set the size of a component or container that only changes with CSS media queries. A fluid grid uses percentages, allowing UI elements to resize according to the available space.

Define Your Breakpoints

Listing the breakpoints allows designers to plan information architecture, layouts, and features for each device. For example, some complex features limit what you can do on mobile vs. desktop application versions.

The most common breakpoints include:

• Desktops – max-width: 1200px
• Laptops – max-width: 991px
• Tablets – min-width: 768px and max-width: 990px
• Smartphones – max-width: 500px

Designers must also consider screen orientation and how designs adjust to a landscape layout. For example, the iPhone 13 is 390 pixels × 844 pixels, more than double the width in landscape vs. portrait. 

Content Strategy Approach

Designing layouts around content enables designers to build intuitive, easy-to-navigate UIs. Defining your content hierarchy allows designers to organize layouts according to breakpoints.

Designers must consider hierarchy relating to the action they want users to take. For example, a blog feed’s purpose is to show users a list of articles and get them to click on something of interest. The blog feed’s most essential elements are the featured image and headline that entice users to click on an article.

On a desktop feed, designers have space to include more information, like the article’s excerpt, published date, author, and category tags. User research and interviews can guide responsive design according to what matters most to users. 

Mobile-First Design

Mobile-first design is a process of starting with the smallest screen size and scaling up. This design strategy offers two primary benefits:

1. The constraints of small screens force designers to include only the most critical features and UI components. Reducing unnecessary features reduces costs and time to market.
2. It’s easier and faster to convert a mobile layout to larger screens than the other way around. Designing desktop-first often leads to compromises and redesigns to scale down to a mobile version.

A mobile-first approach also makes business sense for web design. Google prioritizes mobile-friendly content, which means a responsive design could benefit SEO to rank higher and generate more clicks.

Prioritize Content

Part of a mobile-first and content-first approach is prioritizing content that is always visible on smaller devices and what to hide behind navigational drawers, dropdown menus, or accordions.

For example, on a desktop layout, designers often show the questions and answers to users for an FAQ section. This layout would mean users would have to scroll over every Q&A to find what they want on mobile devices. Instead, designers can show users the question on smaller screens with the answer hidden behind an accordion, reducing scrolling for mobile users.

Responsive Images & Videos

Deciding on media formats at the start of the project could save designers rework later. For example, designers might use PNG for icons, but engineers use SVG because they adapt better to responsive layouts and deliver better performance.

Engineers might require several sizes and formats to serve different media depending on the device or viewport for complex responsive designs. Agreeing on these formats from the beginning ensures designers test prototypes correctly while preparing assets for a smoother design handoff.

Responsive Typography

Typography is a crucial design component impacting brand/identity, readability, voice, and readability. Selecting a typeface that translates across multiple devices is something designers spend hours, days, or even weeks deliberating.

In A guide to responsive typography, UX designer Augustine Thomas talks about what designers must consider for responsive typography, including:

• Choosing the right typeface
• Selecting a typography scale
• Alignment and spacing

Your project’s content, like images, video, graphics, etc., has a significant impact on all three of these elements. So, always test your typeface pairings with real content and avoid dummy text to get accurate results.

Responsive Design Performance Optimization

While performance is often a developer’s job, there are some things designers can do to make their job easier:

Use System Fonts

Every operating system has a font stack. iOS uses San Francisco, Android Roboto, and Windows Segoe UI, to name a few. Using these default fonts means the responsive website or application doesn’t have to make additional requests, improving performance.

If your product prioritizes performance over aesthetics, consider using system fonts instead of a custom one. Make sure you test your product with each font to get consistent results across all operating systems.

Animations

CSS and Javascript animations impact performance and could adversely affect the user experience. Conversely, designers can use animations when engineers need a few seconds to load a feature. Finding the right balance between these two takes collaboration and testing with designers and engineers.

Responsive Design with UXPin Merge

One of the challenges with responsive design is that the static nature of image-based design tools doesn’t allow designers to test UIs and components across multiple viewports accurately. 

The only way to test a web page accurately is by using HTML, CSS, and Javascript–languages most designers don’t speak.

UXPin Merge is a code-based design tool allowing designers to prototype and test using the same components engineers use. Engineers can also program responsive properties, so UI elements function in prototypes as they do in the final product.

What is UXPin Merge?

UXPin Merge allows you to sync your product’s component library to UXPin’s design editor so designers can prototype using fully functioning code components.

You can connect a React component library direct to Merge using Git or our Storybook integration for Angular, Ember, Vue, and other front-end frameworks.

Creating Responsive Components Using Merge

Using a React component library, engineers can program an IFrame component to respond to responsive properties, media queries, and styling, providing the same responsive functionality as components in the final product.

Check out this step-by-step tutorial for building responsive components with UXPin Merge.

Enhance Testing

Instead of using multiple frames, designers can achieve the same responsive functionality as code using a single frame and component. These UI elements also have the same fidelity and functionality as the final product providing designers with meaningful feedback from usability testing and stakeholders.

With Merge, designers can prototype and test using fully functioning, responsive UI elements from a component library without writing code or relying on engineers to build it.

Streamlining the Design Handoff

These responsive Merge prototypes also streamline design handoffs, reducing time to market. Engineers no longer have to inspect multiple mockups and documentation to convert designs into responsive code; they simply copy/paste components from the repository plus any JSX changes from UXPin to start the web development process.

The post A Guide to Responsive Design – 8 Easy Steps appeared first on Studio by UXPin.

Design sprints have become common strategies for companies to solve big problems fast! Developed by ex-Googler Jake Knapp, the design sprint methodology is about prototyping and testing a product in just five days.

Prototype and test your design sprint product with UXPin. Built-in design libraries allow you to drag-and-drop components to quickly build high-fidelity mockups and prototypes–even if you’re a non-designer. Sign up for a free trial to explore UXPin for your next design project.

What is a Design Sprint?

A design sprint is a rapid methodology to prototype an idea in just five days. This prototype could be for a new product or redesign an existing product.

The five-day process includes a small team of designers, stakeholders, and other members who come together to solve a big problem in as little time and resources as possible.

A sprint incorporates group and individual activities, including brainstorming, designing, prototyping, and testing. By the end of the week, you have a design solution or MVP to start developing.

How did Design Sprints Originate?

Jake Knapp developed the design sprint methodology while working at Google in 2010. Jake took inspiration from IDEO’s design thinking, various books, and Google’s product development culture.

In 2016 Jake Knapp co-authored the book Sprint with John Zeratsky and Braden Kowitz, which outlines the process he had perfected during his time at Google. John and Jake also worked with Google Ventures (GV) to perfect and refine the process you read about in Sprint.

Since Sprint’s release, every organizational type, including startups, agencies, colleges, government entities, Fortune 500s, and museums, has used Jake’s sprint framework to prototype ideas. 

What are the 5 Stages of Design Sprint?

The five stages of the design sprint draw inspiration from the design thinking process. These stages include:

1. Map
2. Sketch
3. Decide
4. Prototype
5. Test

Some design sprint variations complete the process in four days, but most follow the five-day format described in Jake Knapp’s Sprint. Either way, it’s essential to start on Monday and run your sprint consecutively over four or five days without breaks.

There is a crucial step 0, which includes all the planning and preparation to run a design sprint.

What Happens Before a Design Sprint Process? – Sprint Preparation

A design sprint will never work without proper preparation. Here are some things you must consider for a design sprint:

• Pick a facilitator: The facilitator must be a strong leader capable of promoting dialogue and keeping to a schedule. This person is responsible for the sprint process, most importantly timekeeping, leading discussions, venue preparation, and facilitating discussions.
• Gather the sprint team: Jake recommends a cross-functional sprint team of seven or fewer. During the first three days, you’ll also need stakeholder input to help with brainstorming and ideation.
• Invite experts: Experts include people inside and outside your organization with acute knowledge about the product or problem you’re solving. You’ll need these experts on the first day to ask questions to understand the problem and start ideating potential solutions.
• Pick the Decider: The sprint Decider plays a vital role in a design sprint. This person will decide which idea the team must prototype and test. Examples of a Decider include the CEO, product manager, product VP, or another decision-maker directly responsible for the problem you’re working on.
• The venue: Find a room that can comfortably hold your sprint team, including space for desks and snacks (which you can place outside of the room too). Check out Fast Company’s article about how to find a sprint “war room” for more details. IMPORTANT: Choose a venue where your team won’t be disturbed during the five days! You need to maximize the time without distractions or people “popping in” to see how the sprint is going.
• Schedule dates: Block five full days for your sprint and ensure everyone is available for those days. Gathering stakeholders is often tricky, so you might have to have a pre-sprint workshop when they’re available. Check out this short video from red-id for more on prep work.

Check out this article from Sprint’s co-authors for a complete sprint preparation checklist. A remote design sprint requires different planning and preparation–check out this article for more info.

Day 1 – Monday – Map

Day one of a sprint or mapping is a slow start to the rapid prototyping process. The sprint team spends the first day creating a map of the user experience flow, interviewing experts, and defining the target or goal for the week.

Some of day one’s activities include:

• Rules and introductions: The sprint facilitator introduces everyone and outlines the rules and procedures for the week.
• Set a sprint goal: The sprint goal must be optimistic and answer the question, “Why are we doing this design sprint?” Your sprint goal should align with the product’s long-term goals and business strategy.
• Identify users: Identify the users associated with your sprint goal and find participants for day five’s testing. You can use your own customers or a tool like User Interviews to find the right target demographic.
• Create a map: A high-level flowchart from key players (customers) to an end goal with five to fifteen steps drawn on a whiteboard. The aim is to keep your sprint map as simple as possible without too much detail.
• Interview experts: The sprint team has 15-30 minutes to ask each expert questions about the project, customers, topic, market, vision, and other details. The facilitator will add details to the map during these questions to provide context.
• How Might We (HMW): The sprint team reframes problems using how might we questions. The purpose of HMW is to generate lots of ideas to begin ideation.
• Organize HMW: The facilitator adds HMW to one of the steps on the flow chart, grouping similar ideas and identifying themes.
• HMW voting: Each team member casts two votes on their favorite ideas. The winners get added to the map.

Check out this Map Checklist for more information on the first day of a design sprint. Alternatively, read pages 51 – 91 in the Sprint book.

Day 2 – Tuesday – Sketch

Things get a little more interesting on Tuesday with sketching ideas. The day starts with a group exercise called Lightning Demos, where teams present relevant ideas from other successful products. 

The aim of Lightning Demos is to look beyond your industry. For example, if you’re a productivity app, you might look to the automotive or food industry. Team members write these ideas on Post-It notes and stick them on the whiteboard.

After lunch, team members start sketching ideas using storyboarding techniques, including Crazy 8s and Solution Sketch.

At the end of the day, everyone places their sketches face down, ready to decide on Wednesday.

Check out this Sketch Checklist for more information on the first day of a design sprint. Alternatively, read pages 93 – 123 in the Sprint book.

Day 3 – Wednesday – Decide

On day three, the sprint team reviews each sketch in a five-step process:

• Art museum: Taping up every sketch for the team to see
• Heat map: Each team member reviews sketches silently and puts one to three small dots next to their favorite parts
• Speed critique: The group discusses each sketch, pointing out the best ideas and solutions–limited to three minutes per sketch
• Straw poll: The team silently chooses their favorite idea with a large dot to place their vote
• Supervote: The Decider reviews each idea and casts a “supervote” for their favorite, and the solution the sprint team will prototype on day four

The sprint team spends the second half of day three storyboarding and planning for prototyping.

Check out this Decide Checklist for more information on the first day of a design sprint. Alternatively, read pages 125 – 160 in the Sprint book.

Day 4 – Thursday – Prototype

On Thursday, the sprint team brings the idea and storyboard from the previous day to life. The first step is to choose the right prototyping tool. John Zeratsky and Jake Knapp recommend using a tool that allows you to design and prototype fast!

With UXPin’s built-in design libraries, you can build mockups and prototypes in a matter of minutes, perfect for the demands of a design sprint! You can even use your own design system using UXPin Merge to build on-brand prototypes fast–PayPal’s product team can create a fully functioning one-page prototype in eight minutes!

Once you have chosen the right prototyping tool, it’s time to “divide and conquer.” To accelerate the prototyping process, the sprint team splits into five roles:

• Maker: Primarily responsible for arranging UI layouts
• Stitcher: The person in charge of information architecture and navigation
• Writer: Writes all the copy for the prototype
• Asset Collector: Collects assets like stock images, videos, icons, and other visual assets
• Interviewer: Prepares for day five test by compiling the script and user testing questions

You can separate these roles however you feel will deliver the fastest results. It’s crucial to remember that the sprint team is only building a prototype for a single user flow. Avoid getting sidetracked with redundant pages, UI elements, and features. The goal is to create a prototype that solves a specific problem–like an eCommerce checkout or sign-up form.

Towards the end of day four, the team tests the prototype internally. You might also invite stakeholders to review the prototype and give feedback for improvements. 

Make sure you leave enough time for this review process so you can make changes, test, and iterate before the end of day four. If you’re using UXPin, you can send stakeholders a link to your prototype so they can review and add comments remotely. This feature is especially helpful for remote design sprints.

By the end of the day, your prototype is ready for user testing on day five. Check out this Prototype Checklist for more information on the first day of a design sprint. Alternatively, read pages 163 – 190 in the Sprint book.

Day 5 – Friday – Test

On the final day, you get to test and validate your prototype with the real users you identified on day one. According to the Sprint book, five is the magic number for usability participants. These five users will give you enough feedback to identify patterns and create actionable insights.

The Interviewer, from day four, will conduct user interviews while the rest of the sprint team watches from another room. It’s essential to have a camera showing the user’s face for expressions and a screen monitoring application.

The sprint team takes high-level notes using Post-Its to share and discuss these as a group at the end of the interview process. The team then organizes the notes into common patterns labeling them positive, negative, or neutral.

Lastly, the sprint team decides on the next course of action, which may include another sprint, further testing, or refining the prototype for a design handoff. 

If the team decides to do another sprint, you can skip days one to three and go straight back into rapid prototyping and testing based on insights from the first design sprint.

Design Sprints With UXPin

Create fully functioning high-fidelity prototypes with UXPin quicker and easier than image-based design tools. With UXPin, you don’t have to compromise on prototype quality during a design sprint and get more meaningful results and feedback from participants.

Sign up for a free UXPin trial to enhance your next design sprint with the world’s most advanced rapid design, prototyping, and testing tool.

The post Design Sprints – Validate Your Hypothesis Within 5 Days appeared first on Studio by UXPin.

Did you know that as many as 88% of users will not come back to an app or site after just one bad experience? This only goes to show the importance of UI design, which goes way beyond aesthetics and has a crucial impact on user experience.

In the following guide, we’ll cover everything you need to know when designing a user interface – from explaining “what is UI?” and discussing the key elements, all the way through to sharing the newest UI trends for 2022 and beyond.

What is UI design? 

UI design which stands for User Interface design refers to the process of creating a digital product’s graphical layout to support the final look and feel of the application. It includes a variety of elements that users interact with such as images, animations, sliders, text fields, buttons, etc. Good UI design translates into a friendly user experience, which is why it should be part of every software development process. 

Let’s now take a look at the elements that you can use while designing an interface. 

UI Design – UI Elements that Every Designer Should be Familiar With

There are a variety of UI elements, which you can use while designing a user interface. We can split them into three categories:

Input elements

Input elements are the most popular category. They require users to provide all sorts of information, such as, their age, reason for purchasing, etc. The input can come in a variety of formats including text, graphics or audio. Input elements can take the form of:

• Dropdowns
• Combo boxes
• Buttons
• Toggles
• Text/password fields
• Date pickers
• Checkboxes
• Radio buttons
• Confirmation dialogues

Output Elements

Output elements are the outcome of the actions you take with input elements. Their character is never neutral – they display alerts, warnings, success or errors. For instance, if you upload an image whose format is unsupported, you’ll get a message saying “unsupported image” and you’ll immediately know that you have to provide an image in a different format. 

Helper Elements

The third category falls into an umbrella term for all the elements that can’t be placed within the output or input categories. As the name indicates, they assist the user in understanding the contents of a site and/or finding their way around the interface. 

Helper elements can be further broken down into three subcategories:

• Navigational, that helps you navigate through the interface. Some examples include menus, breadcrumbs, link lists, etc.

Informational, that tells you which step of the user journey you’re currently at, or which processes the website is currently running. Progress bars, icons, and toolbars are all great examples.

• Containers/groups, which keep various UI components together. These elements most often come in the form of pop-ups, side bars, and widgets. A great example are newsletter sign up boxes like the one on the image below:

Why is it important to understand the differences among UI design elements?

As you can see from the three groups above, output, input, and helper elements all serve different purposes. That being said, UI designers should also properly distinguish among elements falling within the same group. 

To give you an example, let’s imagine you’re adding a filter on an online grocery store page. You want your search results to display “vegan” products only.

From a UI standpoint, you could be looking at a number of input elements:

• Radio button list, which lets you tap on the right option
• List, where you can find the fitting element and click on “vegan”
• Dropdown, where you scroll and tap on the right product tag (usually, the options will be listed in alphabetical order)
• Checkbox, where you can choose “vegan”, but potentially also other elements, like “sugar-free” or “fair trade”. 

To know which one to choose for your UI, you need to understand the goals of your users, and make it as simple and convenient for them to complete them!

Speaking of user goals and simplifying interactions, this leads us to the next section:

Best Principles of UI Design

What is UI design? Making life easy for your users. 

That’s the key principle to successful UI design. By making users central to your ongoing design processes, you can increase engagement and retention. It’s about understanding how users think while using data to learn how they act. The result is a more refined product that meets your users’ needs and expectations. 

And expectations are high. As users spend tons of time online, they have become more demanding than ever before. They know what a great user interface looks and feels like – even if they don’t realize it or call it ‘UI design’. 

Because what happens when a user struggles to navigate your app or site? 

They X out. It’s uninstalled. 

So, it’s business-critical that you apply the right principles to simplify the user journey. To start, you should:  

1. Minimize Actions and Steps Per Screen

Users should be able to get where they need to go in as few clicks or taps as possible. This is especially important when designing a user interface for devices with smaller screens, where space is at a premium and navigational techniques need to be big and bold, and thumb-friendly. 

Keep designs focused – both in aesthetic and intent. It should be clear what the page or screen is about, what users need to know, and what they need to do. Take the Amazon checkout page as an example. The focus is on your items and price, your details and delivery options are auto-filled, and all you need to do is hit ‘buy’. 

Time is precious, and with so many firms vying for a user’s attention, you can’t risk ‘losing the crowd’ to competitors without streamlining tasks and actions. 

2. Reduce Cognitive Load

Remember the Million Dollar Homepage? It’s an incredible example of cognitive overload. Your eyes flicker across blobs of bright colors and barely legible words. You might be able to pick out a business – a casino, maybe, or a small retailer – but not before another flashy pixel ad else catches your eye, and you’ve forgotten everything that came before it. 

Cognitive load is the amount of information taking up bandwidth in your brain. And the goal, when designing an interface, is to cut back on distractions your users don’t need, while making it easy to interact or parse the information they do need. 

A common example is switching the color of a link a user has already clicked on. Instead of having to remember which pages they’ve visited, a user can see at a glance where they’ve been. 

Great UI design means people don’t have to think. The action is intuitive, with users unaware of your savvy behind-the-scenes design skills that enable them to complete their tasks. 

3. Ensure Dialogs Should Result in Closure

Think of the last time you bought an item online. There was a clear ‘narrative arc’ in three acts. In the beginning, you’re browsing different products. In the middle, you’ve selected your product and you run through the checkout. In the end, you receive an order confirmation. 

That’s satisfying – our brains get a big kick out of cause and effect because it’s the easiest way to make sense of the world. If I throw this ball against the wall, it will bounce. If R2D2 holds the blueprints, then Luke can destroy the Death Star. If you click ‘buy’, you’re notified that the product is in your basket. 

Apply the ‘three-act structure’ to user actions, adding feedback, like ‘Added’ notifications, at each step. 

4. Provide a Clear Next Step

How often have you scrolled to the end of a webpage, only to find it as barren as Arrakis? Your journey has abruptly stopped, leaving you to scroll up, click back, or close the tab. 

Make sure your app or site doesn’t make the same mistake. You’ve helped users get where they wanted, but what happens next? 

A core part of UI design is guiding users through a journey. Subtly (or not-so-subtly) telling them where to go next, or what to do. Consider the location and function of call-to-action buttons. Use the data to focus on user intent and placement to maximize engagement. 

Find out more in our guide The Basic Principles of User Interface Design

Top 3 User Interface Design Mistakes and How to Avoid Them

Designing a user interface also comes with a set of risks and potential mistakes. As many of them can be easily avoided, we’ve reached out to several experts, asking them to share their observations. Here are three of the eleven user interface design mistakes we’ve gathered.

1. Putting Creativity over Usability 

Josh Wright, CEO of CellPhoneDeal said that frequently businesses try too hard to stand out which has a negative impact on usability. While it’s recommended to design a UI which is memorable, cluttering it with too many images or animations is never a good idea. It can make your app or your website too hard to use. And instead of attracting attention, it might discourage users from using it, and push them into the hands of competitors. Focus on usability instead, and make sure that your UI is not only pleasant to the eye but also intuitive. 

2. Relying too Heavily on Design Trends 

Deepasha Kakkar, Founder at CRACKITT quite rightly pointed out that companies often fall victim to trends. And as we all know, trends come and go, which is why following them blindly without any initial evaluation is a mistake. Take a look at your performance metrics and see if it’s necessary to make any changes; if it’s not then don’t do it just because everyone else does. If you decide to modify your product based on a newest trend, then first check if there is any data which supports it, otherwise you might waste a lot of time and money.

3. UI Design Style over Substance

Another common obstacle is putting “style over substance”, as told us by Arek Nowakowski, Product Designer at spacelift.io.

Throughout his career, Arek has seen quite a few examples of designers wrapping up a useless (or non-existent) UX into beautiful branding. Such projects are set up for failure, as they only ‘look’, and do not ‘perform’. 

A good analogy is thinking of a car without wheels – the jaw-dropping exterior and interior won’t matter if the vehicle can’t do the very basic thing it’s intended to and take you places.

To tackle this mistake, Arek suggests starting off with the website or app’s flowchart, and validating your hypotheses among potential clients. If your assumptions are proven true, you can then consider including them into your UI. The key here is to be consistent. So, what does design consistency mean? Let’s discuss this next.

Best design consistency practices for UI and UX designers

What is Design Consistency? 

Design consistency is all about keeping visual and functional elements uniform across all platforms. You might even call it ‘design predictability’ – when your user performs X action, Y always occurs, whether on mobile, tablet, or desktop. 

A simple example: your app places a green ‘Yes’ on the right and a red ‘No’ on the left of a dialog box. Users become familiar with this, the action becomes – as every UI designer craves – instinctive. But on certain screens, the placement is flipped. Suddenly, the user is selecting the wrong option. They eye every future choice with suspicion, thumb hovering a second too long over each interaction. 

Inconsistent design shatters the contract between you and your user. 

Best Design Consistency Practices

1. Perform User-Centric UI and UX Design Research

Begin your research by answering two questions. 

• What does your user want? 
• What does your user expect? 

Before you can design a solution, you need to get into the user’s mindset. They’ve downloaded your app, clicked on your site. But why? UI and UX is awash with a cocktail of data and empathy. 

Once you’ve identified the user’s need, focus on the user’s expectation. This means building on design familiarity. Google determined how we search online. Facebook influenced how we connect with friends. Amazon defined how we shop.  

Where’s the homepage button on this page? Top left. No hesitation. Pure online consistency.

2. Define Product Design Patterns

The ‘rule of three’ helps you maintain consistency. You want to keep user actions down to a minimum. That means no more than three taps or clicks from where they are to where they want to be.  You can do this in several ways. 

• Design hierarchy: direct users’ attention, making the most-used sections stand out. 
• Branding: your branding is what makes you stand out, from your color palette to your tone of voice. It’s all you, always.
• Components: the various interactive elements should behave uniformly. A progress bar is always a progress bar.
• Template: standardize layouts across all platforms, templates are an efficient way to maintain consistency. 

3. Build Consistent Actions

You want users to just know how your product works. Consistent actions create an easy-to-use design flow – once a user knows that X action results in Y, they take that knowledge across your product. They won’t even need to think about it. Draw on existing influences and your own designs when building consistent actions. 

4. Create Consistent Content

Keep your copy consistent. The way you ‘talk’ to users should be maintained across the product, especially when you’re using specific terminology. Consistency creates clarity, maintaining the user’s flow. On the branding side, it prompts users to remember they’re with you, not someone else. 

Content should be presented and behave in a standardized way. When designing these, place user goals to the center. 

5. Maintain Communication

The value of communication just can’t be understated. When users perform an action, they like acknowledgment – a chime, for example, when making a selection. The progress bar is the perfect example. The internet has taught us that patience is a virtue, if it isn’t instant, users want to know what’s going on. 

Users shouldn’t be left wondering whether they’ve ‘done it right’, or if the product’s behaving correctly. Wondering leads to wandering. 

Consistency also depends on internal communication. Everyone on the team is working towards a single vision – and how their roles help to build it. Strengthen your design consistency from ideation to implementation using code-based UI tools like UXPin. These allow cloud collaboration between designers crafting experiences with the same ‘live code’ elements used by your devs, so the product matches your vision. 

Learn more about maintaining a consistent design in our Design Consistency Guide: Best Practices for UI and UX Designers

What does ‘good UI design’ mean according to experts

Now that we’ve covered the principles of UI design and discussed some common mistakes, let’s look at what characterizes good design according to experts:

Designing a User Interface Requires Responsiveness

Technical Lead at ExaWeb Corporation emphasizes the importance of responsiveness, especially after Google made mobile indexing part of their top search ranking factors in 2019. While building an app or a website, it’s absolutely vital to make sure that it adjusts to different screen sizes to guarantee a good user experience irrespective of the device. Responsiveness, however, goes beyond screen size optimization, and also involves speed and performance. For this reason it’s key to abide by Google standards, and make sure that your UI design meets them on every device. 

UI Design Needs to be Empathetic

Greg Findley, Designer at Mantra Design, says one of the most important good UI design traits is empathy towards the users’ needs. While one might think that it’s primarily a UX-related issue, he argues that we can’t forget that it’s the UI users interact with – not the processes behind it.

Greg says that the UI needs to reflect common people behavior, for instance, our ever-shortening attention spans. If the interface or its messaging is too focused on conversion, the user might abandon the site or app, feeling pushed towards the purchase way too early in their journey. 

He suggest asking yourself the following:

• How does the interface make our users feel when they first see it?
• How do they experience it the second, tenth, and fiftieth time around?
• How does the UI support maintaining empathy in all the stages of the product life cycle?

In essence, as Greg sums up, how an interface feels and resonates emotionally can make all the difference between a decent and great UI design.

These were just a few of the good UI characteristics designers have told us about – be sure to give our dedicated piece a read for more. 

Good UI Design Should be Minimalistic

Karla Fernandes, UX/UI & Digital Product Designer at Vitamina K  says that the purpose of every product should be to help users resolve a problem or achieve a goal which was identified during the user experience research. A minimalistic UI design will do so by using colors, font, and proportions that not only have visual hierarchy, but also promote user attention and reduce informational overload. This, among others, can be achieved by spacing and a careful selection of images and animations. 

Karla also underlines that people love familiarity. When you use a repetitive pattern or element, you can rest assured that they’ll know how to find their way around. In the end, this positively impacts your product’s usability and reassures its role in peoples’ lives.

For more advice from experts, give our dedicated good UI design piece a read.

Best Practices for Mocking Up User Interfaces Fast

1. Sketch it

Time – we never seem to have enough of it, so you don’t want to waste it digitally working up concepts that may be doomed to fail (or totally unworkable, anyway). Sketching is quicker and cheaper, ideal for creating faster UI mock-ups. Just grab a pen and paper. It may be low-fidelity, it won’t look, feel, or function like the finished product. But it’ll give the team a clear idea of your vision, and how best to approach it. 

2. Mobile-First

Start small – in this case, the small screen. Mobile is where a huge chunk of your audience is, so it makes sense from a business perspective. However, the mobile-first approach brings practical design benefits, too, whether you’re making mock-ups, prototypes, or wireframing your latest brainchild. 

By creating for mobile-first, you’re including only the most important content (because space is at a premium). You’ll then find it easier to scale up, adding additional content for larger screens, rather than cutting, which usually leads to back-tracking and complicating designs. 

3. Grid Systems

Grid systems remain somewhat controversial, like all the best things in life. But there’s no denying they’ve grown in popularity in recent years, becoming an essential tool for designers who need to build efficient and consistent mock-ups. Grids let you bring order to what might otherwise be chaos. The organized grid system helps you determine the best spacing, sizing, and hierarchy of your content. Horizontal grids are most common, but if you’re concepting typography, you may find it handy to implement a vertical grid.

Get more tips by reading our article on the 19 Best Practices for Faster UI Mockups and in our ebook on Web UI Design Best Practices.

Responsive Design or Adaptive Design: Which is Best? 

What is Responsive Design?

Responsive design fluidly adapts to whatever screen size the user is on. It uses multiple CSS media queries to determine the display or size of the device and alters the style in response. 

What is Adaptive Design? 

Adaptive design presents a static layout based on breakpoints. So, if your user is on a 760-width screen, they’ll always see the 760 layout. Most adaptive design teams create adaptive designs for six screen sizes:

• 320
• 480
• 760
• 960
• 1200
• 1600

Pros and Cons of Responsive and Adaptive Design

Adaptive designs need more work to start – designers need to design for at least six screen sizes. But responsive design comes with complications, vulnerable to display issues if the proper media queries aren’t used. 

This is most notable when sites deliver the full desktop experience. We’ve all come a cropper of this one. If we’re lucky and the site loads, it slows to a crawl. Deploying media queries can help, but responsive sites are never as quick as one designed specifically for a mobile screen size.

When taking the adaptive path, choose a UI tool like UXPin, which lets you introduce multiple breakpoints to maintain on-screen consistency across devices. You can see how easy this is yourself with a free trial. 

What’s Better – Adaptive or Responsive Design? 

With all that in mind, what’s the best choice for designers?

Your design choice starts with your users. Answer: Who are your users? What devices do they use? Equipped with this knowledge, it’s easier to create a design that meets their needs. When most of your users are accessing your site on a 960 screen, you know which screen width to prioritize and optimize the content.

Your decision will also be influenced by whether or not you have an existing site. In the design world, responsive has become the go-to choice – adoption rates almost match dedicated mobile sites, with around 1/8 sites running a responsive design. 

But popular doesn’t always mean good. One pretty clever test showed out-of-the-box responsive designs seriously impact your site load times. That means rigorous optimization is an absolute necessity. Adaptive designs require more investment, but will typically be the better choice for any mobile-first operation, since it only loads what the user will see, precisely how the user should see it. Find the right design choice for you in our showdown Responsive Design vs. Adaptive Design: What’s the Best Choice for Designers?

Now, we have a pretty clear idea of using the principles of UI design and responsiveness to efficiently craft brilliant user journeys. So, it’s time for a more granular look at how to perfect your mobile and landing page UI.

Mastering Mobile UI

What is Mobile App Design? 

The mobile UI is everything displayed on the mobile screen. If a user can see it, tap it, swipe it, or do anything else, then it’s part of the mobile user interface.

There are almost 17 billion mobile devices operating worldwide. Over 300 million smartphone users in the US, spending more than $330bn a year. It’s a huge market that can’t be ignored, and in the high-competitive (dare we say, cut-throat?) digital space, it’s vital to make the right impression. 

Mobile design isn’t without its challenges. With smaller screens and touch-based interaction, the principles for designing an interface on mobile diverge from traditional desktop design. 

Tips for Designing a Mobile Interface

1. Present a Clear Vision

Every project should start with a vision. A clear objective communicated to the team and key stakeholders. Be specific, and use visual aids where possible. 

Everyone working on the project should leave that meeting understanding what your vision is and what’s required of them to deliver it. Counter any factor that might influence the end-product at this stage. For example, how will your idea gel with the brand colors, or the development tools you use? 

Kicking off your project this way helps make the design and development process more efficient; the end goal isn’t a shifting interpretation filtered through multiple departments, with more and more features added with every regeneration. 

2. Iterate Your Designs

‘Progressive enhancement’ describes the way you continually refine a design to its perfect point.

Creating a product takes up just about every resource a business can spare (and a few they can’t). Instead, you want to iterate an idea, working it up into a high-fidelity prototype the same way devs progressively develop modules. It’s a lot easier to start small, see what works (and what doesn’t), and build a product that really matches that initial vision. 

UI design software like UXPin’s Merge offers a great way of achieving efficient progressive enhancement. No more endless back-and-forths or redesigning elements every time. By using fully interactive ‘live code’ components, designers can create designs that look, feel, and function exactly the way the final product will. 

3. Stay Uniform

Mobile interfaces need to feature consistent designs. You could even argue that mobile design consistency is more important than it is in desktop design – at least our brains are switched when we’re sitting at a computer. 

Keep buttons, icons, and colors uniform. The placement of key actions should also remain consistent. When we’re scrolling through our phones, half-watching the TV, we don’t want to think about what our thumbs are tapping. It should be instinctive. Find out more about Mobile UI.

Understanding Landing Page UI

How to Create a User-Friendly Landing Page UI

• Trigger emotions

Your brand colors, tone, and imagery are a core part of your business personality. They’re what makes you you. Whether you’re a start-up or a veteran firm, these should all hold meaning for the user – and they should be reflected on your landing page. 

At the earliest stage of design, determine: 

• The message to communicate
• The emotions to convey
• The personality to present

Your answers will inform the shape of your design. 

Let’s say you offer online meditation services. Your landing page needs calming colors, soothing tones, a lightweight design with plenty of breathing space. 

Don’t dismiss the power of color psychology, either. According to Canva, ‘85% of consumers believe color is the biggest motivator when choosing a particular product, while 92% acknowledge visual appearance as the most persuasive marketing factor overall.’ 

• Use images 

Images are insanely powerful when you want to attract your users’ attention. We’re drawn to images – it’s part of our DNA. Moving vehicles and human faces are especially effective at catching (and holding) the eye. So effective, in fact, that users will naturally follow the gaze of a person in a photo.  

Use these tricks in your landing page designs to direct a user to look somewhere, or perform an action. However, make sure your image placement doesn’t break the compositional flow of the page.

• Run A/B tests

A/B tests are one of the best ways to gauge the user-friendliness of your landing page. This sees you create two versions of your page, with different call-to-action copy, for example. Half your users will see page A, the other half will see page B. Now, you can see which generates more clicks or sign-ups, and so on. 

Once you have a winner, you can continue creating A/B tests, refining the design as you go until you have an unstoppable landing page. For additional user testing, run your designs through a focus group of other UI designers and average users.

Check out our guide on Landing Page UI.

Choosing Your UI Design Software

Best UI Design Tool Features

1. Image-based or Code-based

When selecting your software, you’re likely to come across a lot of image-based tools. They’re pretty common in the design world because designers can mock-up interfaces fast. It’s the software equivalent of a pad and pencil; great for getting that initial spark of an idea out of your head and onto the screen. 

But they can’t go much further than that. You’re dealing with images, not functional elements. They only look awesome, too raw to develop into a tangible product. 

Code-based UI software lets you craft sweet designs just like an image-based tool. But it uses UI components built from the same code used by your developers. Designs retain consistency from start to finish, and by easing the design and development process, deployments are faster.

2. Functional Fidelity

Struggling through handoffs with the devs? Tired of explaining ‘but it needs to look like this…’? Embarrassed seeing a finished product that’s only more or less like what you envisioned? Then it’s a sign you need to boost the level of functional fidelity in your designs. 

Low-fidelity designs only give a sense of appearance. This makes it difficult for developers to translate into a working model – assuming it’s feasible. 

High-fidelity designs, like those created in UXPin, look and act like the real thing. By harmonizing the components used by both design and development, everyone’s on the same page. The vision – along with everything else – remains consistent. 

3. Working Together

In our connected world, communication and collaboration have never been easier to accomplish. Make sure your UI software isn’t the odd one out. 

Your tool should be geared towards making it simpler than ever to work together, share the latest updates, and chat about projects. Cloud-based design tools bridge the gap within teams and across departments. Emphasizing the collaborative approach, UXPin enables teams to work on the same designs in real-time, access shared libraries, collect feedback, and conduct remote brainstorming sessions. From mock-up to handoff, you’re able to manage the whole design process in a single online tool. 

To make an informed choice, read our guide on UI Software Tools.

Top UI and UX Trends in 2022

What does 2022 hold for UX and UI design? See top trends in the user interface design industry.

1. Lottie Animation

The popularity of Lottie Animation continues to rise. One study shows searches for the animation technique rocketing 2300% over the last four years. 

Lottie Animation is an open-source, JSON-based tool that lets you make animations really quickly. But don’t mistake these for mere GIFs. Lotties are smaller, while featuring far better image quality. It also offers greater control over your designs, letting you build and test each one before you display them on your site.

With animation experiencing a resurgence in UI design recently, and businesses keen to irresistibly attract users’ attention, expect Lottie’s user-base to grow. 

2. Code-based tools

Design and development teams don’t always see eye to eye, right? Design wants a product that looks like this, but development knows it won’t work that way… 

Ironing out these issues, especially when working remotely, is tricky since often it’s a case of communication breakdown. No one’s talking in the same language. 

Because of frustrations in the process, teams are shifting to code-based design tools. Unlike image-based software, which can only accurately represent the look of a product, code-based UI tools use live code components. Designers are free to craft interactive, high-fidelity prototypes using elements built with the same code used by your developers. This means prototypes behave just like they would on your site or app, and devs are already familiar with how each element functions. 

3. Voice UI

It’s easy to think of UI and UX in strictly visual terms – that’s where it manifests itself most commonly, after all. But don’t sleep on voice user interface. 

Google, Amazon, and Apple have all helped mainstream VUI with their AI-powered smart speakers. Almost every modern smartphone now has voice capabilities. And by 2025, the speech and voice interface market will hit nearly $25 billion. 

Designing for an audio audience is a major shift, bringing fresh opportunities (and a few challenges). However, users are increasingly familiar with and comfortable using voice UI. 2022 might be the right time to explore a new approach for interacting with your product. 

Design User Interfaces in UXPin

While designing an interface can be a challenging process, it’s crucial for creating good experiences for your users (and so, your brand’s success). The good news is, this guide has given you all you need to know to begin on your UI design journey!

If you’re looking for a tool that will support your designers and developers in their product development, be sure to check out UXPin! 

The post The Ultimate Guide to An Effective UI Design appeared first on Studio by UXPin.