SY Exp 3: UI Recreation Using Design Tool
Title: UI Recreation Using Design Tool
1. Selected Design Tool
Design Tool Chosen: Figma
Reason for Selection:
Figma is a freely available, browser-based design tool widely used in the UI/UX industry. It supports frames, shapes, and text tools effectively, making it suitable for recreating user interface layouts. It is easy to use for beginners and appropriate for academic practical work.
2. Creation of Blank Project
Opened Figma in a web browser
Created a new blank design file
Project Name: MobileHomeScreen_UI_Recreation
Device Type: Mobile
Canvas Size: 360 × 640 pixels
Orientation: Portrait
A blank frame representing a mobile screen was created to start the UI design.
3. Description of Given User Interface
Selected User Interface: First screen (Home Screen) of a personal mobile phone
Purpose of the Interface:
The mobile home screen allows users to quickly access applications, view system information, and perform basic interactions such as checking time and battery status.
Main UI Elements Identified:
Status bar (time, battery, network icons)
App icons arranged in a grid
Dock area for frequently used apps
Background area (wallpaper)
4. Screen Layout Creation Using Design Tool
The screen layout was recreated in Figma using the following tools:
Frames
One main frame was used to represent the full mobile screen.
Smaller frames were used to separate the status bar and app grid area.
Shapes
Rectangles were used to represent app icon backgrounds and the bottom dock.
Circles were used to represent app icons.
Uniform spacing was maintained between icons.
Text Tool
Text was added for:
Time display in the status bar
App names below each icon
Consistent font size and alignment were maintained for readability.
5. Layout Explanation and Design Justification
Frames helped divide the screen into logical sections such as status bar and content area.
Shapes were used to visually represent interactive elements like app icons.
Text elements were kept minimal to avoid clutter.
Proper alignment and spacing ensured a clean and balanced layout.
The design follows simplicity and familiarity, making it easy for users to understand and use.
6. Final Output Description
The final recreated UI screen includes:
A clearly defined mobile screen frame
A status bar at the top displaying time and icons
A grid of app icons arranged uniformly
A bottom dock for commonly used applications
The recreated interface closely resembles a typical mobile home screen layout and demonstrates effective use of frames, shapes, and text tools. The design is clean, readable, and user-friendly.
Conclusion:
This practical successfully demonstrates LLO 3.1 by creating a blank project using a design tool and LLO 3.2 by recreating a given user interface using frames, shapes, and text. The task aligns with UI/UX design principles and meets engineering practical assessment standards.