Patterns

Patterns are reusable structure composed from existing components. Reusable patterns helps organizations in enforcing design rules. A design pattern is like a template for your project. It uses certain conventions and you can expect a specific kind of behavior from it. Some of the common Patterns are explained below.

Empty State

Empty states always appear in an empty space, in the context of the data that's missing. They can be used whenever a data displaying component or a page does not have the required data in it.

No records found

Records will start appearing once they are created.

From the above design, you can see that the first row has a graphic or an image, representing some reason for the empty data, the second row has the primary text and the third row has a secondary text. The fourth row is optional, it can be used for navigation buttons. The entire empty state has to be center aligned.

Forms

Forms are used to interact with the user to get the required data to use it in the aplication or to configure some options. Designing forms requires to decide on structure form labels, error feedbacks, titles, action buttons position, etc.

New record

Create a record by entering values in the below fields

Name

Age

Description

Vaccinated

Click yes if you are vaccinate or else click no

Yes

No

Form design pattern has three main sections, the heading portion which contains a primary header and an optional secondary text. The the actual form field section, this can have all the form fields like input , textarea , select , etc.

In the form section, each form field part has a label and a optional description which comes as a single unit (i.e both the texts should not have gap more than 3px) and the other portion is the actual field item. The width of the bordered fields (select, input, textarea, timepicker and datepicker) should be always increasing or same and not decreasing. For example the name and age field are of same size and description field has larger size compared to name and age field.

The final section is the action buttons section if there are any. As you can see the secondary button comes first and then the primary button comes.

Multiple Buttons

In general, if there are two buttons, then the secondary button should come first and then the primary button. If there are more than two buttons then all the buttons except the primary & secondary buttons should be compresed in the form of a popover and then the secondary button and the primary button should be present.

Coming Soon

More new patterns are coming soon. Ex: Table layout pattern, error message pattern, etc.