Explore

Design-Checklist

This is a checklist styled, expandable list document. ( click on

⁠

to expand ) Click

!⁠

to expand to find detailed steps and videos inside the collapsed topics.

⁠

Optimise Application

Settings> General> App File Management > Optimize Application

Video Explaination

⁠

Click to view on full page view⁠

⁠

Step-by-step Slideshow

⁠

Design Properties

⁠

Click to View Video on Properties on full page⁠

⁠

1. Responsiveness : Responsiveness refers to how your app adapts to different screen sizes and devices. By adjusting based on breakpoints.

Responsiveness Example for a Text Element

Text Breakpoints and Sizes:

Extra Small (<320px): 20px

Small (320-576px): 24px

Medium (577-768px): 28px

Large (769-1200px): 36px

Extra Large (>1200px): 48px

Every design element, like this H1 text, needs to include breakpoints and adjust sizes accordingly to ensure responsiveness across different screen sizes

2. 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.

Example for a Input element

Example for a Input element

State

Description

Default

Standard input appearance

Hover

border color changes to indicate interactivity

Active

input appears pressed or highlighted when clicked

Disabled

input is grayed out and cannot be interacted with

Focused

input has a visible outline to indicate keyboard focus

Selected

input remains highlighted to show it is selected

There are no rows in this table

⁠

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.

Common Motion Types

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).

Example Table for Input Element Motion

Example Table for Input Element Motion

Motion Type

Description

Behavior

Transition

Smooth change from one state to another

Border smoothly changes color from gray to blue

Animation

Visual effect when an element appears or hides

Input field shakes to let know some attention

There are no rows in this table

⁠

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.

Example Table for Input Element Feedback

Example Table for Input Element Feedback

Feedback Type

Description

Behavior

Tooltip

Provides additional context or instructions

"Enter your email address" (appears on hover or focus)

Help Text

Provides guidance or clarification

"Your email will be used to send order updates" (static text)

Error Message

Indicates incorrect input

"Invalid email address" (appears on invalid input)

Success Message

Confirms successful action or input

"Email successfully saved" (appears on successful submission)

Validation Feedback

Visual changes to indicate valid/invalid input

Border changes to green for valid input, red for invalid input

There are no rows in this table

⁠

Spacing in design refers to the use of margins, paddings, and gaps to create a visually appealing and well-structured layout. Proper spacing helps to improve readability, focus attention, and create a balanced design.

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."

⁠

Set Your Breakpoints

Mobile Small - Extra Small ( < 320px)

Mobile - Small (≥320px and ≤576px)

Mobile Medium - Medium (>576px and ≤768px)

Tablet - Large (>768px and ≤992px)

Laptop - Extra Large (>992px and ≤1200px)

Desktop - Very Large (>1200px)

⁠

Set Spacings

Base unit - 4

Scale - 4, 8, 12, 16, 24, 32, 40...

Types of spacing :

Margin

Padding

Gap

Line Spacing

Setting Spacings -

Element

Spacing

Desktop

Mobile

Base Page Left/Right Margins

Container Padding (Left/Right)

Container Vertical Padding

Gap Between Inputs (Vertical)

Gap Between Input + Label

Input Padding (Left/Right)

Header Padding (Top/Bottom)

Header Padding (Left/Right)

Card Padding (Inside)

Gap Between Cards

Gap Between List Items

Footer Padding (Top/Bottom)

Text - Line Spacing

There are no rows in this table

⁠

List of States

Default (Normal): The standard state of the element.

Neutral: The lightest shade of the color.

Hovered: The element is being pointed at by the cursor.

Pressed (Active): The element is being clicked.

Focused: The element is selected for input.

Disabled (Inactive): The element cannot be interacted with.

Selected: The element is marked as chosen.

Invalid/Error: The element indicates an error.

Valid/Success: The element shows successful action.

⁠

Color Palette

Color System1-

Color System1-

Color Type

Name

Code

#0E82FF

#06478D

#0E82FF

#06478D

#F9F9F9

#C0C0C0

#2B2B2B

#FF6F61

#AF453A

#FF6F61

#882F27

#3EB489

#C5E9DC

#3EB489

#194837

#FFA500

#FFDFA3

#FFA500

#AD7000

#8A2BE2

#D9BAF6

#8A2BE2

#601D9E

There are no rows in this table

⁠

Typography

Set Fonts

Primary -

Secondary -

Tertiary -

Set Styles

Text Styles

Text Styles

Text

Device

Font Size

Line Height

Letter Spacing

Font Weight

Display 1

1.1

600

1.1

600

1.1

600

1.1

600

1.1

600

Display 2

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.2

600

1.3

600

1.3

600

1.3

600

1.3

600

1.3

600

1.3

600

1.3

600

1.3

600

1.3

600

1.3

600

1.4

600

1.4

600

1.4

600

1.4

600

1.4

600

1.5

600

1.5

600

1.5

600

1.5

600

1.5

600

Body Large

1.5

400

1.5

400

1.5

400

1.5

400

1.5

400

Body Medium

1.5

400

1.5

400

1.5

400

1.5

400

1.5

400

Body Small

1.5

400

1.5

400

1.5

400

1.5

400

1.5

400

Body XSmall

1.5

400

1.5

400

1.5

400

1.5

400

There are no rows in this table

⁠

Select Icon Library

Feather Icons

⁠

Style Elements and Inputs

Style Checklist

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

⁠

Inputs types

⁠

ButtonTypes

Primary Button

Secondary Button

Tertiary Button

Disabled Button

Icon Button

Link

Input

multiline input

Dropdown

Multi dropdown

Search-box

file uploader

checkbox

slider

date-time

csv input

⁠

Brand Images(logos)

⁠

Images/illustrations

Welcome Screen/Onboarding

Permission Request

Empty States ( search, content, no network)

Error States

Success/Confirmation

Under Maintenance

Skeleton Loader

⁠

Style Containers

⁠

Components - Navigation

Header

Footer

Side Menu

Mobile-Footer Menu

Breadcrumbs

Pagination

⁠

Components - Forms

Header Text

Email Input + Label

Password Input + label

Invalid Email/password notification/validation

Forgot Password

Terms and Conditions

Social Logins

Single Page ( Signup, etc)

Multipage ( Onboarding )

⁠

Components - Table

Basic Table

Data Table with Sorting and Filtering

Null Data

Loader

Skeleton Loader

Go to top/bottom navigation

⁠

Components - Modal Popups

Confirmation Modal - Two Buttons

Information Modal - Single Button

Form Modal - Inputs and Button

⁠

Components - Notifications/Alerts

Success Alert

Error Alert

Warning Alert

Information Alert

Pages

Settings

Dashboard

Notifications

Home

List Page with filters

Product View Page

Cart

Orders

Add - Input Page

Favourites/Bookmarks

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.