Back to all topic

Design Tips

Component resources leading to a business record interface

Lightning Design System: SLDS Resources, Components and Setup Choices

Understand SLDS components and setup choices, interpret the historical Aura/static-resource workflow, and prototype a clear record-editing task.

Atomic Design System: Five Levels, Examples, and a Workflow

Understand atomic design's five levels through an equipment-request example, five design-system references, and a component review workflow in Mockitt.

Required and optional parts of a reusable lodging card

Airbnb Design System: DLS Principles and Reusable Component Lessons

Study Airbnb DLS as a historical case: shared principles, required and optional component parts, and a practical lodging-card prototype.

Search controls combine into a search unit, clinic header, page template and populated appointment page.

Atomic Design: From UI Elements to Complete Pages

Understand atoms, molecules, organisms, templates and pages through one appointment-search example, with practical component and prototyping guidance.

A structured table with theme, type and component references

Carbon Design System: Current Resources and an IBM UI Design Workflow

Find current Carbon resources, distinguish Figma from the historical v10 Sketch workflow, and review an inventory-table interaction.

A museum workshop brief connects a location-change message to a door notice and mobile card while keeping the time unchanged.

Communication Design: Roles, Visual Formats and Practical Skills

Learn what communication designers do, how visual formats serve different messages, and which skills and portfolio evidence support the role.

Material UI, Ant Design and React Bootstrap connect to one shared pagination behavior specification.

React Design Systems: Material UI, Ant Design and React Bootstrap

Compare Material UI, Ant Design and React Bootstrap, distinguish component libraries from design systems, and plan behavior before React implementation.

Shared design foundations separated from an external-content integration boundary

Spotify Design System: Encore and Integration Guidelines Explained

Distinguish Spotify’s internal Encore systems from public integration guidelines, with practical branding, attribution and prototype boundaries.

A return-policy findability task connects a reader’s question to help navigation and the relevant answer.

Website Usability Testing: Plan a Task, Observe It, and Improve the Flow

Understand website usability and plan a focused test with relevant participants, neutral tasks and useful evidence. Includes a return-policy findability example.

A shared notification preference connecting Account and Team settings through a reviewed specification.

What Is a Design System? Components, Guidance and Five Examples

Understand how a design system connects reusable components, code and shared rules. Compare five public references and plan a controlled component change.

Skills for Product Designer

How to become a product designer? This article will introduce what a product designer is and the product designer skills.

Connected component, token and documentation references

Atlassian Design System: Components, Tokens and Team Documentation

Use Atlassian components and tokens, document decisions in Confluence, and prototype an assignee selector with clear default, empty and error states.

How to Make Glass morphism with Adobe XD

What is Glass Morphism? This article will give a full introduction of glass morphism and how to create glass morphism style.

What is Image Slider and Types of Image Slider

What is image slider? This post will explain the definition and types of image slider in details.

10 Most Important Skills for Designer 

What skills are needed to be a designer? This article will introduce 10 of the most important skills for designer.

Top 5 Must-Have tools in Industrial Design 

 What is industrial design? This post focuses on explain the definition of industrial design and also offers 5 of the best tools for industrial product design.

Product design connects a user problem, design alternatives and a testable decision.

What Is Product Design? Process, Lifecycle, and a Practical Example

Understand product design, distinguish the design process from the product lifecycle, and connect user needs to a prototype and review decisions.

What is Instagram Carousel Ad and Examples

This article details how you can create a carousel in Instagram. This article also describes a prototyping tool, which enables you to prototype and design a carousel for Instagram.

How to Make a Carousel with a Carousel Widget

Learn how to plan carousel content, set useful interactions, and test keyboard, touch, and responsive behavior before publishing.

The Best Tool to Create Image Slider and Generate Code

This article details how you can create a carousel in javascript. This article also explores a faster and more effective way to achieve the same using the Carousel Widget available in Mockitt. Finally the article provides some useful tips to create a carousel in Javascript

Reusable-container concept moving from a customer need through a return-screen prototype to a review decision.

Product Development: From an Idea to a Reviewed Product and Launch

Understand product development, new-product decisions, strategy, and the market life cycle. Follow a reusable-container example from a need to a prototype review.

How to Quickly Get Your Work Approved?

How can you get your work approved quickly? This guide offers some useful tips for you.

Design Collaboration: A Practical Workflow for Product Teams

Learn how design collaboration works, compare tools by their role, and turn prototype feedback into clear decisions, owners, and an approved version.

An ambiguous report-export dialog revised to distinguish selected rows from filtered rows.

Iterative Design: A Practical Cycle from Feedback to Revision

Use planning, analysis, implementation, testing and evaluation to refine a design. Follow an export-dialog example and avoid mistaking repeated changes for learning.

How to Create Image Slider in HTML and CSS

Do you want to create image slider in HTML and CSS? This article will introduce how to do it step-by-step.

A fictional desktop photo-review window connects a Rotate action with its menu and keyboard routes.

How to Design a Mac App: Conventions, Prototype and Handoff

Prototype a Mac app in five steps, using desktop conventions for windows, menus and shortcuts while separating design review from native implementation.

Design-strategy board connecting a repair customer’s question to status, next action, and a contact route.

Design Strategy: Connect User Needs, Product Goals, and Design Decisions

Build a design strategy through six practical decisions, then use a repair-status example to connect research, priorities, prototype review, and measurement.

Carousel Design: How to Do Carousel UX Design

How do I make a carousel design? This article will introduce how to do carousel UI and UX design.

What Does Carousel Mean? A Full Introduction to Carousel

Wondering what is carousel? This post will introduce the definition of carousel and the types of carousel.

How Can I Make a Slideshow on Google Photos

How do I make Google photo slideshow? This article will introduce the detailed steps on how to make a Google slideshow.

How to Create Carousel with jQuery

How do I create a carousel with jQuery? This article will introduce the detailed steps on creating carousel with jQuery.

How to Create React Image Slider

How can I create react image slider? This article will introduce the easiest way to create react native image slider. Check it now.

The Process to Create a Bootstrap 4 Image Slider

Want to create an image slider with bootstrap? Follow this guide and you will learn how to use bootstrap create multiple image slider.

How to Create a Carousel with WordPress Quickly (Step by step tutorial with pictures)

How can you create a carousel with WordPress? Here is a tutorial on how to create carousel with WordPress step-by-step.

Prototype a Carousel for a React Development Handoff

Plan carousel slides and controls in Mockitt, then hand off visual specifications for React development. The prototype and CSS values are not a working React component.

How to Create a Carousel Web Design: Learn from These Examples

Do you want to know more about carousel web design? Read on to learn how to work on carousel website design and check a few of its amazing examples here.

5 Design Tools Compared: Prototypes, Vectors, and Graphics

Compare Mockitt, Gravit Designer, Vectr, Design Wizard, and Snappa by deliverable, editing needs, and handoff. Check current access before choosing.

How to Create Image Slider with JavaScript

How do you create image slider with JavaScript? Follow this guide and you will learn how to make an image slider with JavaScript.

A file-upload component shown in selection, progress, error and completion states.

How to Use UI Design Components in Web and Mobile Prototypes

Choose, adapt and review reusable UI components without losing their purpose. Follow a file-upload component through default, progress, error and completion states.

How to Create Carousel in HTML and CSS

Can you create a carousel in HTML and CSS? This article details how you can create a carousel in HTML and CSS.

Create a Responsive Carousel/Image Slider That Acts Like a Lead Magnet in 2024

What is responsive carousel? This post will give a full introduction of responsive image slider.

How to Create Slider Images for Website under 5 Minutes: A Beginner's Guide

How do I create slider images for website? This article will give detailed guide on how to create HD slider images for website.

How to Make a Facebook Carousel for Ads and Post

Can you make a Facebook carousel? This article will explain what is FB carousel and how to make one easily.

Top 5 Angular Carousel Libraries for You

Wondering what is angular carousel? This article will explain the detailed meaning of it and how to create one angular image slider step-by-step.

Top 5 Bootstrap Carousel Examples and How to Create Carousel with Bootstrap

Looking for bootstrap carousel examples? This article offers 5 of the best bootstrap carousel sliders for you.

A team connects interface feedback with a decision owner, an approval record and delivery work.

10 Collaboration Tools for Design Teams: Choose by the Task

Compare collaboration tools for meetings, design feedback, documents, whiteboards, and work tracking. Choose a setup that keeps review decisions and handoff clear.

Top 10 Remote Work Tools in 2024

Sourcing out the best remote work tools? This article will introduce 10 of the best work form home tools in 2024.

Merchant inventory task with component and content guidance

Shopify Polaris: Design System Resources for Merchant Apps

Choose current Polaris resources for merchant apps, distinguish Shopify surfaces and versions, and prototype a clear inventory-editing flow.

Four project phases carry one booking-design deliverable with monitoring shown across the work.

Project Management Process: Phases, Reviews and Design Deliverables

Understand four example project phases, distinguish them from PMI process groups, and organize practical decisions, reviews and design deliverables.

Named surface, text and action swatches connected to a pottery-class booking card and its spacing.

Design Tokens: Name Visual Decisions for Consistent UI Handoff

Build a small design-token vocabulary for color, typography and spacing, map roles to components, and manage themes and handoff with a worked example.

A shared component is mapped to replacement patterns while one existing use remains an explicit exception.

Deprecating a Design System Component: Plan a Safe Migration

Retire a shared component with a consumer inventory, behavior mappings, a migration period, and clear removal criteria. Follow a worked message-banner example.