In this article, we will show you how to quickly create a task management system using UI Bakery. Here are the steps we are going to take to develop this software solution:
So, let’s start to work with the page “Register”. A dashboard page will be the first page you’ll see in UI Bakery after registration (or login). The dashboard is the place where you can see the list of your projects.
At the moment, we don’t have any of them, so you can see the label “No projects” here. To get a new one, click on the button “Create a project”. We can’t make it without the name, so we can call it a “Task system” (or give some other name). Once this is done, click on the button “Create” to launch your first project.
Now we need to name our first page as “Register page”. Adhere to the following steps in order to do this:
After that, we can work with the page content. We will display our widget “Register” in the center of the screen. So:
From now, we can place our widget form in the space and customize it.
We are almost done with it. Edit the link in the register widget:
Once the “Register” page is ready, let’s work with the “Log in” page. Create a new one or duplicate (copy) the “Register” page. To avoid the previous space set up, copy the “Register” page. To this end, perform the following steps”:
UI Bakery duplicated the page and placed it at the end of the page’s list.
Open the duplicated page. Now, delete register widget from the copied page and add widget “Login”, also set its width to 30%. You can rename a new page and edit the “Login” widget the same way we recently did with the “Register” widget.
To link “Register” and “Log in” pages:
To check how the link works, click on the ‘Preview” (eye) button placed on top of the screen.
Click on the link “Already have an account? Log in”: it will move you to the page “Log in”. In the same way, you can link the page “Log in” with the page “Register”.
Now, it's time to make our core page of the task management system, which is called “My tasks”.
Let’s create a new page:
When this is done, we need the sidebar and navbar. To add them to the page “ My tasks”:
That’s it. The next thing to do is to customize the navbar. In the beginning, we will add 3 more spaces on par to the navbar. To do this, press an orange “Plus” button on the right side from the main space in the navbar. Now, let’s resize spaces by dragging and dropping them.
To create a logo for the task management system:
The next step is to set up a link to the main page that will be placed in the space containing the background image:
Now, choose the following settings for the "Button link" in the sidebar:
Continue to work with spaces in the navigation bar. Select the next space placed from the right side of the space we’ve already worked with. Add a text component here with the following settings:
Let’s align our text to the center horizontally and vertically. Lets see what we have done:
Well, we have two more spaces to edit. We select the third one and add “Input” component here and change its settings:
Now, another component “Icon” should be added in this space. Its settings had to be the following:
Then, drag and drop the “Icon” so that it will be placed on the left side of the “Input” component. To avoid impositions of input and icon components, add spacing to it in the sidebar (configuration panel) 8px from the right side.
For now, our page is look like this:
Finally, we shift to the last space in the navigation bar. Add a "Button link" component here and edit its settings:
So after configuring the navigation bar we should get a result like this:
For now, we can work with our work area, where you can build your page prototype using the WYSIWYG approach. In UI Bakery, we use cards to place content in it. Add a card to the space that placed below the navigation bar. You won’t need a footer and header in the card, so just delete it in the configuration panel.
After that, we will work with only one space placed in a card.
Additionally, add “Button link” to the space that contains the heading with the following properties:
Also, you should stick the “Button link” to the right side, so that the heading “My Tasks” and button link “+ NEW TASK” will be placed in one space but opposite to each other. See the example below:
To develop an amazing UI, add a new space under the card. Insert the “Tasks” widget in this space from the UI Bakery widgets (it works the same as adding “Register” or “Login” widget). The “Tasks” widget displays as a card with content. Remove the header from this card.
Then, you should create the column headers:
Now, add a “Text” component in every space with the following properties:
Remember about aligning the “Text” component in every space to the left horizontally and to the center vertically. Name them in the spaces from left to the right as:
As a result, you have your headings finished.
Then, we will work with our rows in the card - tasks. Go to the space placed right below space that contains column headers. Add two more spaces on the same line (row). Resize spaces so that the columns in it fit columns in the space that includes column headers. Let’s see what we have done.
The left space on par has a “Checkbox” component, also this space is placed right below space “Task description”.
The following space placed under space “Priority” should contain the “Text” component. Name "Text" component as “Normal”, “Low”, “Urgent” or the way you like it. Set it color to green (success), or red (danger).
The third space is placed under space “Category”, add the “Text” with properties:
Add the text component under the space “Date” with the same properties as in the previous case. Name it as date like “15 Nov 2019” or “05 Mar 2017”, etc.
We need to work with the last space on par that is placed under space “Actions”. Add here 2 button links components with properties:
Now you can edit spaces that placed below the same way as we created the first task.
Once, we finished with the page My “Tasks” add one more page to our project and name it as “Create a task”.
In the space placed in the card header, rename the heading “Card header” to “Create a task”.
At once, we will work with the space in the middle of the card:
Now, we have 2 spaces in the middle of the card, resize them so that every space takes 50% of a row.
Add another space below and then one more - from the right side of the space. Also, resize 2 new spaces the same way.
To continue working with the left lower space, you need to divide it into two horizontal spaces. Click on the necessary space, select a table icon and proper division. As a consequence, you will receive 3 spaces from the left and 2 spaces from the right.
Let’s divide spaces on the left side in the same way until we get a total of six spaces on the left side. Notice: from the right side should be only 2 spaces.
Then, fill in the spaces with content. Start from the upper left corner space. Insert a “Text” component here with properties:
Move to the space below that we recently worked with. Add “Input” component in it with the following properties:
Lets check what we have done:
Going down to the space that placed below. Add a “Text” component here with properties:
Continue to work with the other space placed below. In this space, you need to place our categories to select:
Moving to the next space placed below, add a “Text” component here with properties:
For now we should have an example like this:
Now we will work with the last lower space from the left side and add a “Select” component here with properties:
As soon as the left part of the screen is ready (see the example below), you can continue to work with the right side.
Move to the right upper space and add a “Text” component here, edit its properties:
Now we will work with the space that placed under “Due to date”. Add here a “Calendar” component with the following properties:
We are almost ready with the page "Create a Task":
The last part to work with the “Create a task” page is the card footer. Add a “Button link” component in its space and select button settings:
Now copy this button link (select and press ctrl+C) and insert it (ctrl+V) again in the same space. Change a few properties of the copied button link:
For this moment you should get a result like this:
At the moment, we can link only button cancel - go to its settings, find a Link in the configuration panel, click on it and select the “My Tasks” page.
Well done, our task management system is almost ready. We need to create one more page with tasks. Perform the following steps to create it:
And one more step:
Let’s see what we’ve created. Click on the “View (eye)” button on the top center part of a screen. Also, share your project with your friends with a “Share” button on the right upper part of the screen. For your convenience, we leave the link with the task management system here.