Mobile UI prototyping

In this learning content, we will prototype the interface of the mobile application we have designed. During the prototyping process, we will use the system actions provided by Kuika.

If you are ready, let's begin.

1. Open the Homepage screen with the Dashboard screen design.
2. Select the notification icon in the Header and add Navigate action.
3. Select the screen named Notifications as the screen to be opened and leave it in the Current page selection.
4. Again, to access the detail screen for the ideas on the screen in the Dashboard, select the Column in GalleryView and add the Navigate action.
5. Select the SuggestionDetail screen to be navigated to and select Current Screen.
6. In the area where the ideas are listed, add the Navigate Action to the Vote and Comment icons to redirect to the relevant screens, select the screen opening formats and edit the screen sizes.
7. Navigate each of the columns in the Tab Bar to the screens they represent with the Navigate action. Edit the screen opening formats and screen sizes for navigation actions. After connecting the Navigate actions of the columns in the Tab Bar, open the listing screen with Idea lists.
8. On the listing screen, select the filter icon in the header and add Navigate action.
9. Select the relevant screen and choose the screen opening format as Drawer.
10. Adjust the orientation and size of the screen to be opened.
11. Select the notification icon, another icon in the header, and add the Navigate action.
12. Select Notifications as the screen to open and leave Current page selected.
13. To redirect to the detail screen of the ideas, select the Column in GalleryView and add the Navigate action.
14. Select the SuggestionDetail screen to be redirected to and make it open in Current Screen format.
15. In the listing area, add the Navigate Action to the Vote and Comment icons to redirect to the relevant screens, select the screen opening formats and edit the screen sizes.
16. In this screen, just like in Dashboard, direct each of the columns in Tab Bar to the screens they represent with the Navigate action. Edit the screen opening format and screen sizes in the navigation actions.

Now let's move to the screen for adding a new idea titled New Suggestion.

17. Select the icon in the header.
18. Add the GoBack action.
19. Add Navigate action for Tab Bar.

After prototyping on the New Suggestion screen, let's move on to another screen, the Suggestion Detail screen.

20. Select the notification icon in the header and add a Navigate action.
21. Select the screen named Notifications under the Navigate action and leave it in the Current page selection, just like the Dashboard and idea listing screen.
22. In the listing area, add the Navigate Action to the Vote and Comment icons to redirect to the relevant screens, select the screen opening formats and edit the screen sizes.
23. Add Navigate action to the columns in Tab Bar to redirect them to the relevant screens. Edit the screen opening format and screen sizes in navigation actions.

We have completed the prototyping of the screens whose designs we prepared together for the mobile application. If you wish, you can test your prototype by clicking the Run button.

We expect you to perform the operations in this learning content for the form screens, detail screens and profile screens that were previously presented to you as homework.