Explore

Design Checklist (new)

Design Properties

Responsiveness - Breakpoints

Design - Responsive

Creating/Editing Breakpoints

Understanding responsiveness

⁠

⁠

Spacings

Types of Spacing

Margins: The space outside the elements, defining the distance between the element and its surroundings.

Paddings: The space inside the elements, defining the distance between the element's content and its border.

Gaps: The space between elements, particularly in grid or flex layouts.

White/Negative Space: The empty or unused space around and between elements in a design. It helps create balance, improves readability, and focuses attention on the key elements by giving the design "room to breathe."

States

States in design elements typically refer to the different conditions or variations an element can have based on user interaction or system status. Here are common states that might apply.

Default: The standard appearance of an element.

Hover: The appearance when a user hovers over an element with a pointer.

Pressed: The appearance when an element is being clicked or tapped.

Disabled: The appearance when an element is not interactive or unavailable.

Focused: The appearance when an element is focused, usually through keyboard navigation.

Selected: The appearance when an element is selected, often used in forms or lists.

Invalid: The appearance when an element has invalid input.

Motion

In design refers to the use of transitions and animations to enhance the user experience by providing visual feedback and improving the flow of interactions. Motion can make interfaces feel more dynamic and responsive, and help guide users' attention.

Transitions: Smooth changes from one state to another (e.g., fading in/out, sliding).

Animations: Movements or visual effects when elements appear, disappear, or change position (e.g., slide transitions, element entrances/exits).

Feedback

in design refers to the information and visual cues provided to users to indicate the status of their actions or the state of an element. This includes error messages, success messages, help text, and visual changes that communicate validation results. Types of Feedback -

Tooltips: Short messages that appear when a user hovers over or focuses on an element, providing additional context or instructions.

Help Text: Static or dynamic text that provides guidance or clarification for an element.

Error Messages: Text and visual cues that appear when an input or action is incorrect, explaining what went wrong and how to fix it.

Success Messages: Text and visual cues that confirm a successful action or input.

Validation Feedback: Visual changes to elements, such as border color changes, to indicate valid or invalid input.

Loading Indicators: Visual cues that indicate a process is ongoing, such as spinners or progress bars.

Styles

Style Variables

Fonts

Header

Body

Colors

Given list, and adding states of colors and extras

Element Styles

All element styling following this

Element

Done

Color-Default

Font-Default

Extra Small (<320)

Small (320-576px)

Medium (577-768px)

Large (769-1200px)

Extra Large (>1200px)

Default

Hover

Disabled

Pressed

Focussed

Selected

Padding

Margin

Gap

Transistion

Animation

Tooltips

Validation

Help Text

Status Message(Error,Success,warning,alert)

Working indicator(loading)

Dark/light mode

There are no rows in this table

⁠

Brand Data

Option set - OS Brand Data

Logos in all shapes, light dark

App Slogan or all text about the app and brand

App Images

Option Set - OS App Images

All App Images that app is using.

Welcome Screen/Onboarding

Permission Request

Empty States ( search, content, no network)

Error States

Success/Confirmation

Under Maintenance

Skeleton Loader

Navigation

Header - Web

Footer - Web

Side Menu - Web/Native

Bottom Menu - Native

Breadcrumbs - Web

Settings List - full page, quick actions

Form

Single Page - Auth/Contact

Multi Page - Onboarding

Table

Basic Table

Data Table with Sorting and Filtering

Null Data

Loader

Skeleton Loader

Go to top/bottom navigation

Information/Feedback to User

Types and Kinds

Null Data

Fixed Alerts

Modal Popup - Web - popup

Modal Popup - Native - Bottom Sheet

Confirmation Modal - Two Buttons

Information Modal - Single Button

Form Modal - Inputs and Button

Null Data

Success Alert

Error Alert

Warning Alert

Information Alert

Small Components

Icons

Cards

Blocks

Pages

Settings

Dashboard

Notifications

Home

List Page with filters

Product View Page

Cart

Orders

Add - Input Page

Favourites/Bookmarks

Write and sketch ( web/native)

Welcome

Auth

Onboarding

Home

Settings

Map

Quiz

Score

Checklist

YT music content

Profile

Calendar

Scheduler

Meetings Manager

Bubblers Profile market

Job listing

Notifications

Payments

Forum chat topic wise

Resources from forum-topic based form

Feed from forum chat -reddit style

Videos - shorts - YT (up next, related )

Coworking build meet

App search

Contact - admin (me)

Admin tool

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.