icon picker
Design-Checklist


info
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
Loading…
Step-by-step Slideshow
Loading…
Design Properties

Loading…
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
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
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
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 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
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
H1
1.2
600
1.2
600
1.2
600
1.2
600
1.2
600
H2
1.2
600
1.2
600
1.2
600
1.2
600
1.2
600
H3
1.3
600
1.3
600
1.3
600
1.3
600
1.3
600
H4
1.3
600
1.3
600
1.3
600
1.3
600
1.3
600
H5
1.4
600
1.4
600
1.4
600
1.4
600
1.4
600
H6
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
1
There are no rows in this table

Select Icon Library
Feather Icons
Brand Images(logos)
Images/illustrations
Welcome Screen/Onboarding
Permission Request
Empty States ( search, content, no network)
Error States
Loading
Success/Confirmation
Under Maintenance
Skeleton Loader
Style Elements and Inputs
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
Style Containers
Components - Navigation
Header
Footer
Side Menu
Mobile-Footer Menu
Breadcrumbs
Pagination
Components - Forms
Sign Up form
Header Text
Email Input + Label
Password Input + label
Invalid Email/password notification/validation
Forgot Password
Terms and Conditions
Login/Signup Switch
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
Null Data
Pages
Settings
Dashboard
Notifications
Home
List Page with filters
Product View Page
Cart
Orders
Add - Input Page
Favourites/Bookmarks




Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.