LogoLogo
EN
EN
  • Release Summary
  • What's new in 5.0.23.04
  • Deprecated and Removed features in 5.0.23.01
  • Get started with Avalant ONEWEB
    • Get started with Avalant ONEWEB
    • Traditional Development vs Low Code
    • ONEWEB Concepts
      • ONEWEB Apps
      • ONEWEB AppSpace
      • ONEWEB Runtimes
      • ONEWEB Designer Studios
  • Install & Configure ONEWEB Platform
    • Install & Configure ONEWEB Platform
    • Plan your ONEWEB Installation
      • Design ONEWEB Architecture
        • Standalone Architecture
        • High Availability Architecture
        • Cloud Architecture
          • Container structure
        • Production vs. Disaster Recovery vs. Testing Environment
        • ONEWEB Server Configuration
        • Monitoring in ONEWEB
      • Sizing Consideration
        • CPU Sizing
        • Memory Sizing
        • Storage Sizing
        • Network Sizing
      • Check Prerequisite for ONEWEB Installation
        • Hardware Requirements
        • Software Requirements
        • Database Requirements
        • Security Requirements
        • Network Requirements
        • Client Requirements
        • Third-party Tools
    • Install and Manage ONEWEB Components
      • User Privileges
      • Prepare Prerequisite Software
        • Prepare Database Server
          • PostgreSQL
        • Prepare Web Server
          • Apache Web Server
        • Prepare Application Server
          • Configuration ONEWEB on Wildfly
            • Step1: Prepare database user permission
            • Step2: Configure access to Wildfly Management Console
            • Step3: Create database driver
            • Step 4: Create datasource
            • Step 5: Deploy the application archives
            • Step 6: Single Sign-On
            • Step 7: Wildfly Encoding and Undertow
            • Step 8: Authentication with Wildfly
            • Step 9: Authentication with LDAP
          • Configure tuning threads
      • Install ONEWEB Application Components
        • Install ONEWEB Application Designer
        • Install ONEWEB Application Server
        • Install ONEWEB Page Designer
        • Install ONEWEB Page Server
      • Install ONEWEB Process Components
        • Install ONEWEB Process Designer
        • Install ONEWEB Process Server
      • Install ONEWEB Integration Components
        • Install ONEWEB Microflow Designer
        • Install ONEWEB Microflow Server
        • Install ONEWEB IAM
      • Verify ONEWEB Installation
        • Application Verification
        • Process Verification
        • Integration Verification
  • Design and Develop ONEWEB Apps
    • Design ONEWEB Apps
      • Choose Between a Web App and a Mobile App
      • Choose your ONEWEB Design Patterns
        • UI Apps: UX/UI only
        • Process Apps Business Process only
        • Interface Apps: Integration with other system only
        • Complex Apps: Combine UX/UI, Business Process and Interfaces
    • Design and Develop UX/UI
      • What is UX/UI?
      • Best Practice for UX/UI
        • Do
        • Don’t
        • How to choose between Smart Form and Page
      • UX/UI Components
        • Smart Forms
          • What is Entity?
          • Modules within an entity
          • Buttons & Actions
          • Entity Modes
          • Smart Form Patterns
            • Single Tab Forms
            • Multiple Tab Forms (General Tab)
            • Parent – Child Forms
          • Create your first Smart Form
            • Step by Step to create your first smart form
            • Deploy your smart form
          • Smart Form Features
            • Universal Search
        • Pages
          • What is page?
          • Page Navigation
          • Page Features
            • Header Footer
            • Dynamic Image
            • Switch Language
            • Custom Font
            • Custom Icon
            • Pass Parameter
            • Signature Pad
            • Theme Designer
            • Local Storage in Page
            • Sync Service in Page
            • Local Notification in Page
            • Push Notification in Page
            • Multi-language
            • Splash Screen
            • Plugin
            • App Icon
            • PGD Directives
            • Charts
            • UI Kits
            • Component Extension
            • Share Pages as Template
            • Page Expression Editor
            • Page Structure window
            • Popup Properties Editor
            • Box Model Editor
            • Environment Variables
            • Improved Drag & Drop
            • Microflow Version settings
            • Custom Dependencies
            • Navbar
            • Display Flex
            • Builder setting
            • Add New Screen
          • Create your first Web Page
            • Step by Step to create your first page
            • Preview Web Page
          • Create your first Mobile App
            • Step by step to create your first mobile page
            • Preview Mobile App
            • Mobile App CI/CD
            • Customizing mobile apps
            • Mobile Application Security
        • Dashboard
          • Widget Dashboard
            • Step to create widget dashboard
              • Create dashboard page
              • Create dashboard menu
              • Create chart widget
              • Add widget on Page
              • Configure chart widget
              • Configure chart series
              • Edit chart series
              • Change the chart to pie chart
              • Change pie color
              • Add another series to chart
              • Change the chart to column stacked chart
              • Change series color
            • Deploy your dashboard
          • Dashboard using Page Extension
            • Add chart to page
            • Create Microflow
            • Integrate chart with data
        • Report
          • Integration with reporting tool
        • Menu & Navigation
          • Menu & Navigation in ONEWEB
          • Link menu to a smart form
          • Link menu to a page
          • Link menu to external URL
      • Mobile UX/UI
        • Web Responsive
          • Smart Form Responsive
          • Web Page Responsive
        • Mobile hybrid
        • Build Mobile App
          • Add CI Server
          • AppStore & Playstore Details
      • UX/UI Customization
        • Smart Form Customization
          • Customize Look & Feel
          • Add Validation Logic
          • Add Calculation Logic
          • Add Custom SQL
          • Add external Java class
        • Page Customization
          • Custom CSS
          • Custom JS action
          • Third party resources
          • Custom extensions
        • Mobile App
      • UX/UI Integration with Process, Micro flow, External UI
        • Smart Form Integration with Process
        • Page Integration with Microflow
        • Page Integration with Process
        • Smart Form Integration with Microflow
      • Import/Export/Clone UX/UI
        • Export Import Clone Smart Forms
          • Export Entity
          • Import Entity
          • Clone Entity
        • Export Import Clone in Pages
          • Export Import App
          • Clone Pages
          • Import page from another App
      • UX/UI Test & Debug guideline
    • Design and Develop Process
      • What is Process?
      • Best practice for Process Design
      • Process Components
        • What is Business Process?
        • Process Template Diagram
        • Process Activity
          • Human Task
            • Task Allocation & Queuing for Human Task
          • Gateway Decision
          • Web Service Task
          • Sub Process
          • Java Task
          • Database Task
          • File Read Task
          • File Input Task
          • Timer
          • Error Handling
          • Event Trigger
          • Push Notification
        • Business Object & Data Mapping
        • Formula Editor
          • Formula Editor for Data Mapping
          • Formula Editor for Gateway Condition
        • Work Party
        • Upload File
        • Environment Configuration
        • Process Instance
      • Start with Business Process in ONEWEB
        • Create a Process in ONEWEB
        • Create your process diagram
        • Simulate your process
        • Deploy your process
      • Integration
        • Integrate Process with UX/UI
        • Integrate Process with Microflow
      • Monitoring
        • Process Monitor
        • Task Monitoring
        • SLA & OLA
        • Monitoring Dashboard
      • Process Validation
      • Import/Export Process
      • Process Deployment from development environment to other environment
      • To Do List
      • Process Test & Debug Guideline
      • Language Switch
      • Process Instance Migration
      • Sync User
      • Custom Extensions
        • Create workspace for Extension
        • Build extension in workspace
        • Install Extension in application
        • Manage the extension
        • Use Extension in workflow
    • Integration with other systems
      • What is ONEWEB Integration?
        • Integrate with other system from/to Microflow
        • Integrate with other system from to Process Flow
        • Integrate with App Runtime
      • Best practice for ONEWEB Integration
      • Microflow vs. Process Flow
      • Develop Integration with ONEWEB Microflow
        • Embedded Microflow vs. Runtime Microflow Server
        • Integration Node
        • Synchronous vs. Asynchronouse
        • Data Mapping
        • Custom Logic/Coding
        • Data Transformation
        • Activity Nodes
          • Exclusive Gateway Node
          • Web Service Task
          • Sub Flow
          • Java Task
          • Database Task
          • Timer
          • Error Handling
          • Push Notification
        • Start with Microflow in ONEWEB
          • Create a Microflow
          • Configure the Flow
          • Simulate your flow
          • Export your Microflow.
            • Embedded Microflow
            • Microflow Server
        • Integrate Microflow with UX/UI
          • Integrate Smart Form with other systems using Microflow
          • Integrate Page with other systems using Microflow
        • Import/Export Microflow
        • Upload File
        • Environment Configuration
        • Language Switch
        • Push Notification
        • Custom Extensions
        • JSON Path Mapping
        • Excel Reader
        • Excel Writer
        • Validation Node
        • JavaScript Node
      • App Runtime REST API
        • Sample use cases for APP Runtime API
        • Create a custom app to call APP Runtime REST API
      • Process Runtime REST API
        • Sample use cases for Process API
    • Design Data & Content Access Management
      • What is Data Access Management?
      • Best practice for Data Access Management
      • Database Access
        • Database Structure
        • Data Access from UX/UI
          • Access Database from Smart Forms
          • Access Database from Page
        • Data Access from Process
          • Database Activity
        • Database Access from Microflow
          • Database Node
      • Images, Files & Documents Access
        • Access from UX/UI
        • Access from Process/ Microflow
    • Design and Implement Security & Compliance
      • What is Security & Compliance?
      • Best practice for Security & Compliance
      • Authentication
        • LDAP Integration
        • Open ID protocol
      • Authorization and Access control
        • Roles, Permissions and Objects
        • Managing Access Control with IAM
          • Create User
          • Manage User Roles & Permissions
          • Manage Permission and Object
          • Manage Role
      • Token in ONEWEB
      • Logging and Audit logging
      • SSL support
    • Design & Develop Low code Apps using AppSpace
      • Create Application in AppSpace
      • Database Tools
        • Data Designer
          • How to create Data Designer app
          • Data Designer tools
          • Entity Properties
          • Compare schemas
        • SQL Builder
          • How to create SQL Builder app
          • SQL Builder tools
          • Connection
        • Data Viewer
          • How to use Data Viewer
          • Data Viewer Tools
      • Manage versions of App
      • Pipeline
        • Deploy Application in ONEWEB
        • Deploy Middleware
        • User Management
        • Distribute Application
      • Manage user access
        • Development Team Management
        • End User Access Management
      • Switch language in AppSpace
      • Link Application
      • Link Component
      • App Details
        • Fix applications with broken link
        • Rename Application
        • Export Application
      • Import Application
      • Cloud Native
  • Sample Apps
    • Sample Apps
    • Workforce App. (Mobile)
      • Database Preparation
      • Create and Test Microflow Service
      • Integrate Microflow with UI to produce dynamic App.
      • Create Mobile UI
    • Order Management App (Web)
      • Database Preparation
      • App Designer
        • Create Order Request Entity
        • Create Order Request Item Entity for Admin
        • Clone Order Request Entity for Admin
        • Link Parent Child Entity for Admin
        • Clone Order Request Entity for Back Office
        • Clone Order Request Item Entity for Back Office
        • Link Parent Child Entity for Back Office
        • Clone Order Request Entity for Authorize
        • Clone Order Request Item Entity for Authorize
        • Link Parent Child Entity for Authorize
        • Clone Order Request Entity for Admin PO
        • Link process button to Process Designer
        • Create menu for requester
      • App Designer Customize
        • Filter Requester search screen by login user
        • Default Requester with login user
        • Validate at least one Order Item when submit
        • Calculate remain order unit
        • Summary Price per order item
        • Summary Price per request
        • Validate order details when back office submits
        • Validate supplier details when admin submit
        • Validate Order Unit and calculate Total Price
      • Process Designer
        • Create Order Request Project
    • Leave Control App
      • Database preparation
      • App Designer
        • Create Leave Request Entity
        • Clone Leave Request Requester Entity
        • Clone Leave Request Supervisor PM Entity
        • Clone Leave Request One Down Head Entity
        • Clone Leave Request HR Entity
        • Clone Leave Request Authorize Entity
        • Link process button to Process Designer
      • Process Designer
        • Create Process Leave Request
  • Reference
    • Reference
    • Page Designer Reference
      • Create a New Application
        • New Mobile Page
        • New Web Page
      • Menu Controls on Pages
        • Web Pages
        • Mobile Pages
      • Page Designer Tools
        • Generic Tools
          • Page Designer Parameter
          • Add element
          • Placing of element
          • Removing element
          • Editing Text
          • Formatting Text
          • Creating Links
          • Uploading Images
          • Add an Image to page
          • Additional Settings
        • Tab
          • Adding Tab on Web
          • Adding Tab on Mobile
        • Menu
          • Adding Menu on Mobile
    • Process Designer Reference
      • Create New Proces
        • Create an Application in AppSpace
        • Create an Application in PD
        • Create Blank Project
        • Create Project Wizard
        • Process template Diagram and Guidelines
      • Process Designer Component
        • Activity Nodes
          • Human
          • Sub Process
          • File Read
          • Web Service
          • Java
          • Database
          • File Write
          • Push Notification
        • Event
          • Start
          • End
          • File Input
        • Gateway
          • Exclusive
          • Parallel
          • Inclusive
        • Boundary Events
          • Timer
          • Error
        • Pool/Lane
        • Work Party
        • Upload File
        • Environment Configuration
        • Custom Extensions
          • Create workspace for Extension
          • Build extension in workspace
          • Install Extension in application
          • Manage the extension
          • Use Extension in workflow
    • App Designer Reference
      • Entity
        • Create New Entity
          • Module
            • One to Many
            • One to Many
            • Reusing Module
          • Fields
            • Label
            • Hidden
            • Radio
            • Checkbox
            • Text area
            • Dynamic
            • List Box
            • Suggestion
            • Popup
            • Calendar
            • No Object
            • MultiSelect
            • Upload
            • Text Box
          • Buttons
          • Actions
          • Tabs
            • Normal Tab
            • 2 Layer Tab
        • Export Entity
        • Import Entity
        • Clone Entity
      • Search
      • Utilities
        • Menu Configuration
        • Parent Child Utility
        • Master data Import Export
        • Datasource Configuration
  • API Guide
    • API Guide
    • App Runtime API
      • List all methods of REST API and explain the API functionality
    • Process Runtime API
      • List all methods of REST API and explain the API functionality
    • Session Manipulation API
      • List all methods of Java API and explain the API functionality
    • Microflow Runtime API
      • List all methods of REST API and explain the API functionality
    • IAM2 API
      • List all methods of REST API and explain the API functionality
Powered by GitBook
On this page
Export as PDF
  1. Design and Develop ONEWEB Apps
  2. Design and Develop UX/UI

What is UX/UI?

User Experience (UX) is the feeling that people get from using any application, product or website. The User Interface (UI) is what people interact with as part of that experience. A good user interface provides a "user-friendly" experience, allowing the user to interact with the software or hardware in a natural and intuitive way. Nearly all software programs have a graphical user interface, or GUI. This means the program includes graphical controls, which the user can select using a mouse or keyboard. A typical GUI of a software program includes a menu bar, toolbar, windows, buttons, and other controls

UX Design is a more analytical and technical field, whereas UI Design is closer to what we refer to as graphic design, though the responsibilities are somewhat more complex. Both these elements are crucial to a product as they work closely together. Undoubtedly, UX/UI design is an important aspect of doing any application work or making a website.

Last updated 2 years ago