Service Application: Creating Forms

Simon Leen
3 min readOct 22, 2021

--

Objective: Build Service Adjustment App

The above images represent the artboards and flow of the app that will be built.

To get started we set a UI panel for the Main Menu then add the background by adding a UI image to the panel and setting the source image as shown below.

To create the Main Menu, UI Images for the Logo and an overlay(grey) were added along with two button elements and positioned, stretched and modified to match the specs in the artwork provided.

Main Menu

Next we create the Find Case screen panel. Using the same process of adding UI elements such as Images, Text, Buttons and an InputField, then stretching, modifying and positioning the elements to match the Artboards we get the panel shown below.

Search Case

The same process was done to set up the rest of the panel but before that, there are some common element like the top and bottom nav, logo and buttons that were seperated into their own panel which can then be reused over the the rest of the panels with the same layout. The rest of the panels/scenes can be seen below.

Select Case
Case Overview
Create Case Name
Create Case Location
Create Case Photo Start
Create Case Photo End
Create Case Overview

--

--

No responses yet