How to

Building a task management system: create layouts configuring spaces and components. Part 2

Tatiana Yudina
9 min

Now, it's time to create our core page of the task management system, namely My tasks. 

Start from the following steps:

  • Open the Page management panel.
  • Click Add new page at the bottom.
  • Give it the name, i.e. My tasks. 

Once you've done it, we need to add a sidebar and a navigation bar (a navbar) to the My tasks page in the following way:

  • Go to the Page management panel.
  • Click Layout.
  • Select General.
  • Choose the layout with a sidebar and a navbar. 

The next thing we need to do is customize the navbar. Firstly, we need to add 3 more spaces aligned with the navbar. To do this, click the orange Plus button located to the right of the main space in the navbar. Now, drag and drop the spaces to resize them.

To create a logo for the task management system, conduct the following steps:

  • Select the first space from the left side in the navigation bar.
  • Add a background image URL for the space: copy the image URL you want to display and paste this link in the Background image URL input that is placed in the configuration panel.
  • Set the background image fit as "cover". 

The next step is to set up a link to the main page that will be placed in the space with the background image. To do this:

  • Select the space with the added background image.
  • Click the Plus button in the center of the space to add a Button link from the Components tab.

Make sure you choose the following settings for the Button link in the sidebar:

  • size - tiny;
  • appearance - ghost;
  • icon placement - only text.

Additionally, delete the button text and center the button link horizontally and vertically in the space settings.

Now, continue working with the spaces in the navbar.

Select the next space to the right of the one we’ve worked with. Add a text component here with the following settings:

  • type - paragraph;
  • color - success;
  • style - bold;
  • text - “Task system”. 

Center the text horizontally and vertically. See the results:

There are two more spaces to edit. Select the third one, add an Input component there, and change its settings as follows:

  • status - default;
  • type - text;
  • size - medium;
  • shape - rectangle;
  • width - custom 500px;
  • placeholder - “Search for a task”.

Add an Icon component in this space with the following settings:

  • icon - search;
  • color - info;
  • size - large.

After that, drag and drop the Icon to place it on the left side from the Input component. To avoid impositions of the Input and Icon components, add a 8px spacing to it on the right side in the sidebar (the configuration panel).

The page looks like this:

Now, it's time to work with the last space in the navigation bar. Add a Button link component there, and edit its settings in the following way:

  • status - info;
  • size - medium;
  • appearance - ghost;
  • width - auto;
  • state - active;
  • icon placement - only icon;
  • icon - log-out.

We've configured the navigation bar, and here're the result we get:

Now, move to our work area to build your a page prototype following the WYSIWYG approach. In UI Bakery, we use cards to place content in the work area. Add a card to the space at the bottom of the navigation bar. There is no need in a footer and a header in the card, so just uncheck them in the configuration panel. 

After that, work with only one space placed in a card. Conduct the following steps:

  • Align the future content in the space to the left side horizontally and to the center vertically.
  • Add its heading.
  • Name the heading as My tasks.
  • Put its setting as H6.

Add the Button link to the space with the heading with the following properties:

  • text - new task;
  • status - info;
  • size - medium;
  • appearance - ghost;
  • width - auto;
  • state - active;
  • icon placement - text and icon from the left side;
  • icon - plus. 

Further, stick the Button link to the right side to place the heading (My Tasks) and the button link (+ NEW TASK) opposite each other in one space. See the example:

To develop an easy-to-use UI, add a new space under the card. Select the Tasks widget from the UI Bakery widgets and insert it in this space, just in the way we've done it with the Register and Login widgets. The Tasks widget is displayed as a card with the content. Remove the header from this card. 

After that, create the column headers. To do this:

  • Go to the upper space in this card and click on it.
  • Add one more space above it.
  • Add 4 more spaces from the right side of the new space.
  • Drag and drop the spaces to resize them, so that the left space was bigger than the other spaces in the row. 

Add a Text component in every space with the following properties:

  • type - paragraph;
  • color - basic;
  • style - bold. 

Align the Text component in every space to the left horizontally and to the center vertically. Put their names from left to right as follows:

  1. Task description;
  2. Priority;
  3. Category;
  4. Date;
  5. Actions.

As a result, the headings will look like this.

Turn to the rows in the card, the tasks. Move to the space below the column header space. Add two more spaces in the same row. Resize the spaces to make the columns in them fit the column header spaces. See what we have now: 

The left space in the row placed right below the Task description has a checkbox component. Add the Text component below the Priority space with such names as "Normal", "Low", “Urgent”, or any other name you prefer. Set its color to green (success), or red (danger). 

Add the Text component with the following properties to the space placed under Category:

  • type - paragraph;
  • color - basic;
  • name - “Friends”, “Home”, or any other name you choose. 

Add the Text component under Date with the same properties as in the previous case. Name it appropriately, e.g., “15 Nov 2019”, “05 Mar 2017”, etc.

Now, work with the space in the row that is located under Actions.

Add 2 Button links with the following properties: 

  • status - primary;
  • size - medium;
  • appearance - ghost;
  • width - auto;
  • state - active;
  • icon placement - icon only;
  • the first icon - Edit-2, the second one - Trash-2.

Now, you can edit all the spaces below just in the same way you've created the first Task. See the results:

We've finished working with My Tasks page. Let's move further and discover how to add one more important page to our project - the Create a task page.

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.