How to

Building a task management system: create layouts. Part 3

Tatiana Yudina
5 min

Once My Tasks page is ready, let's add one more page to our project and name it as Create a task. To do this, conduct the following steps:

  • Click on the space on the page.
  • Add a card there.
  • Leave a footer and a header. 

Type "Create a task" instead of "Card header" in the card header space. 

Turn to the space placed in the middle of the card, click on it, and add one more space from the right side.

Now, we have 2 spaces in the middle of the card. Resize them so that each space took 50% of the row.

Add one space below, and one more from the right side of the space. Resize two new spaces in the same way. 

Work with the lower left space. Conduct the following steps:

  • Divide it into two horizontal spaces.
  • Click on the necessary space.
  • Select a table icon, and set the proper division.

As a result, we get three spaces from the left and two spaces from the right.

Now, divide the spaces on the left side until there are six spaces on the left side in total.

Note: there should be only two spaces on the right side.

Fill in the spaces with content starting from the upper left corner. Insert the Text component here with the next properties:

  • text - “Task description”;
  • type - paragraph;
  • color - basic;
  • style - bold.

Move to the space below. Add an Input component in it with the following properties:

  • status - default;
  • type - text;
  • size - medium;
  • width - full width;
  • state - active. 

See the results:

Move down to the space below. Add a Text component there with the following properties:

  • text - “Category”;
  • type - paragraph;
  • color - basic;
  • style - bold. 

Move to the other space placed below. Place the following categories here:

  • option 1 - "Home";
  • option 2 - "Work";
  • option 3 - "Hobby";
  • option 4 - "Friends".

Further, add a Select component with the properties: 

  • placeholder - "select";
  • status - primary;
  • size - medium;
  • width - full width;
  • state - active.

Move to the next space placed below and add a Text component here with the following properties:

  • text - “Priority”;
  • type - paragraph;
  • color - basic;
  • style - bold. 

See the results:

Now, let's work with the lower space placed on the left side, and add a Select component here with the next properties:

  • option 1 - "Low";
  • option 2 - "Normal";
  • option 3 - "Urgent".

Add a "Select" component with the properties:

  • placeholder - "select";
  • status - primary;
  • size - medium;
  • width - full width;
  • state - active.

The left part of the screen is ready:

Move to the upper right space, and add a Text component there. Edit its properties as follows:

  • text - “Due to date”;
  • type - paragraph;
  • color - basic;
  • style - bold. 

Now, work with the space placed under Due to date. Add a Calendar component there, and set the following properties: 

  • size - medium;
  • mode - day. 

Our Create a Task page is almost ready, see the results:

The last part to work with is the card footer. Add a Button link in its space and select the button settings: 

  • text - create;
  • status - success;
  • size - medium;
  • appearance - filled;
  • width - auto;
  • state - active;
  • icon placement - text only.

Copy the button link (select it and press ctrl+C) and insert it (ctrl+V) again in the same space. Change the following properties of the copied button link:

  • text - cancel;
  • status - danger.

Additionally, align the buttons to the left side of the space horizontally and to the center vertically. See the results:

For now, we can link only the Cancel button: go to its settings, find and click on the Link in the configuration panel, and select the My Tasks page.  

Our task management system is almost ready! Now, we need to create one more page with the tasks. Conduct the following steps:

  1. Copy the My Tasks page.
  2. Change its name to My Tasks Updated.
  3. Add some new tasks in the table.
  4. Go back to the Create a task page, click Create.
  5. Go to the configuration panel, find the Link field, and choose the My Tasks Updated page. 

Almost done! Let's finish with the following steps:

  1. Open My Tasks.
  2. Click + NEW TASK.
  3. Edit the button link settings in the configuration panel as follows: find the Link field and select the Create a task page.

Let’s now look at our task management system. Click on the view button (an eye icon) on the top center part of the screen. Now, you can share the project you've created with your friends using the Share button placed on the upper right part of the screen.

For your convenience, we've summarize all the actions we've taken in the course of our guide in one place. Feel free to follow the link to have a look at the task management system created in UI Bakery! 

January 28, 2020

More articles

Don't want to miss anything?

Get updates on the newest stories, case studies and tips right in your mailbox.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.