Menu Design

Introduction to Web Interface Design

About this lesson

In this learning content, we will learn how to create a Menu design that provides navigation within the application using the Master Screen structure.

First, we will add an Image with the app logo that will be located at the top of the menu.

Next, we will add representative icons to direct users to the Dashboard, Suggestion List, User List and Department List screens. By following these steps, we will create the menu design step by step.

Now, let's prepare by practicing this process in detail.

  1. Create a Master Screen via the Screens Panel.
  2. On the screen that opens, give the MasterScreen a name. You can name it according to your creativity.
  3. Through the Properties panel of the Master Screen, remove the other Layouts so that only the Left Layout remains.
  4. Then drag and drop a Row into the Left Layout and turn it into a single column.
  5. Add an Image element inside the column and load a temporary image.
  6. With the Image element selected, select the Image64 style.
  7. Then select the Radius style from the Border field.
  8. Select the parent column of the Image Element and center it horizontally and vertically.
  9. Drag and drop another Row into the Left Layout and turn it into a single column.
  10. Add a Menu element inside the column.
  11. With the Menu element selected, delete the Sub-Menus via the Properties panel and add two more menu items.
  12. Select each of the menu items one by one to name them and select icons.
  13. Then select the Menu element and activate the Collapsed Switch and turn off the Collapsible Switch via the Properties panel.
  14. Select the Menu Element's parent column and center it horizontally and vertically.

With these steps, your menu design is ready. Now you can use the menu design you have prepared by selecting Master Screen on the screens you need.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

In this learning content, we will learn how to create a Menu design that provides navigation within the application using the Master Screen structure.

First, we will add an Image with the app logo that will be located at the top of the menu.

Next, we will add representative icons to direct users to the Dashboard, Suggestion List, User List and Department List screens. By following these steps, we will create the menu design step by step.

Now, let's prepare by practicing this process in detail.

  1. Create a Master Screen via the Screens Panel.
  2. On the screen that opens, give the MasterScreen a name. You can name it according to your creativity.
  3. Through the Properties panel of the Master Screen, remove the other Layouts so that only the Left Layout remains.
  4. Then drag and drop a Row into the Left Layout and turn it into a single column.
  5. Add an Image element inside the column and load a temporary image.
  6. With the Image element selected, select the Image64 style.
  7. Then select the Radius style from the Border field.
  8. Select the parent column of the Image Element and center it horizontally and vertically.
  9. Drag and drop another Row into the Left Layout and turn it into a single column.
  10. Add a Menu element inside the column.
  11. With the Menu element selected, delete the Sub-Menus via the Properties panel and add two more menu items.
  12. Select each of the menu items one by one to name them and select icons.
  13. Then select the Menu element and activate the Collapsed Switch and turn off the Collapsible Switch via the Properties panel.
  14. Select the Menu Element's parent column and center it horizontally and vertically.

With these steps, your menu design is ready. Now you can use the menu design you have prepared by selecting Master Screen on the screens you need.

We are transitioning to a new user interface on the Kuika Platform and updating our Kuika Academy courses and videos as soon as possible.

In this learning content, we will learn how to create a Menu design that provides navigation within the application using the Master Screen structure.

In this learning content, we will learn how to create a Menu design that provides navigation within the application using the Master Screen structure.

First, we will add an Image with the app logo that will be located at the top of the menu.

Next, we will add representative icons to direct users to the Dashboard, Suggestion List, User List and Department List screens. By following these steps, we will create the menu design step by step.

Now, let's prepare by practicing this process in detail.

  1. Create a Master Screen via the Screens Panel.
  2. On the screen that opens, give the MasterScreen a name. You can name it according to your creativity.
  3. Through the Properties panel of the Master Screen, remove the other Layouts so that only the Left Layout remains.
  4. Then drag and drop a Row into the Left Layout and turn it into a single column.
  5. Add an Image element inside the column and load a temporary image.
  6. With the Image element selected, select the Image64 style.
  7. Then select the Radius style from the Border field.
  8. Select the parent column of the Image Element and center it horizontally and vertically.
  9. Drag and drop another Row into the Left Layout and turn it into a single column.
  10. Add a Menu element inside the column.
  11. With the Menu element selected, delete the Sub-Menus via the Properties panel and add two more menu items.
  12. Select each of the menu items one by one to name them and select icons.
  13. Then select the Menu element and activate the Collapsed Switch and turn off the Collapsible Switch via the Properties panel.
  14. Select the Menu Element's parent column and center it horizontally and vertically.

With these steps, your menu design is ready. Now you can use the menu design you have prepared by selecting Master Screen on the screens you need.

Glossary

No items found.

Assignment

E-Posta Tasarımı
Email Builder Basics
Using Email Templates
New Email Design
Introduction to Mobile Interface Design
Introduction to Mobile Interface Design
Tabbar Menu Design
Dashboard Screen Design
Form Screen Design
Listing Screen Design
Detail Screen Design
Mobile UI Prototyping
Web UI Prototyping
Working with Actions
Working with Navigations
Screen Display Types
Web App Prototyping
Add Notify
Preview
Introduction to Web Interface Design
Introduction to Web Interface Design
Introduction to Registration Screen Design
Preparation of Header Design
Working with Master Screens
Menu Design
Dashboard Screen Design
Listing Screen Design
Form Screen Design
Display Screen Design
Elements
Container Elements
Date and Time Input Elements
Display Elements
Text Input Elements
Numeric Input Elements
Select Input Elements
Data Elements
Navigation Elements
Interactive Elements
Chart Elementler
Introduction to Interface Design in Kuika
User experience on the Kuika platform
The Application Interface Design Process
Working with Color
Definition of paddings
Working with Font Styles
Working with complex styles
Working with Mock Data
Concept Design
Wireframe: visualization of the first idea
Preparation of Concept Design
UX Design
Principles of usability
Basic design Principles
Information architecture
Screen Flow
Analysis and Planning
Defining the project scope and objectives
Reading the analysis document
Reading the example flow chart and defining the requirements
Planning of the project
Introduction to Designer Training Kit
What is Low-code?
What is Kuika?
What can be done with Kuika?
Let's examine the platform interface
Understanding the learning process‍