APPLICATION DESIGN // FINAL TASK
Hasnol Rafiq Bin Hasnol Raduan / 0356767
Application Design II / Bachelor of Design (Hons) in Creative Media / Taylor's Design School
Final Task:
I have been tasked with developing a prototype for a train booking app in HTML using Adobe Dreamweaver. As my final project, I will be focusing on the development and implementation of the sign-in page.
Figure 1 - Sign in
The first step in developing the sign-in page was to set up the basic HTML structure. This included defining the document type, language, character set, and viewport settings for responsive design. The
head section also includes a reference to the external stylesheet for styling the page elements.In the
style section, I defined the CSS to style the various elements on the sign-in page. The styles ensure a cohesive look and feel, aligning with the app's overall design. Body: Set the font, background color, text color, margin, padding, and overflow to prevent scrolling during loading.
Container: Set maximum width, margin, opacity, and transform properties for the initial hidden state for animation.
Buttons and Inputs: Styled buttons and input fields for consistency and usability, including padding, border radius, background colors, and font properties.
The body of the document contains the HTML structure for the sign-in page. This includes a loading overlay, a container for the sign-in form, and various form elements.
Loading Overlay: A full-screen overlay that displays a loading message while the page loads.
Sign-in Container: The main container for the sign-in form, initially hidden for animation.
Form Elements: Includes input fields for username and password, a submit button, and an alternative sign-in button using SMS.
GSAP Animations: Animates the loading overlay to fade out and the sign-in container to slide in from the left.
To enhance the user experience, I used JavaScript to handle form submission and page animations. The submit event listener on the form prevents the default submission, validates the input, and redirects to a new page if the input is valid. Additionally, I used GSAP (GreenSock Animation Platform) to animate the sign-in container and loading overlay.
GSAP Animations: Animates the loading overlay to fade out and the sign-in container to slide in from the left.
Figure 2 - Homepage
The fixed header at the top of the page shows the user’s KTM wallet balance. It's styled with a darker blue color and a drop shadow to stand out against the background. The bottom bar is a fixed element at the bottom of the page with icons and text links for promotions, tickets, news, and settings. It’s designed to be always accessible for quick navigation.
The booking form uses dropdown menus for selecting the train service (`MyRailTime`), origin, destination, date, and number of passengers (`Pax`). Each dropdown is interactive, toggling its visibility when clicked. The options within these dropdowns are dynamically inserted and styled for a smooth user experience.
A calendar dropdown allows users to select a date for their journey. The calendar dynamically updates to show the current month and year, and users can navigate between months. Clicking on a date updates the selection in the form.
The `validateAndSubmit()` function ensures that all form fields are completed before submission. If any field is empty, an alert prompts the user to fill out all fields.
Both sections feature horizontally scrolling content, which is auto-scrolled using JavaScript. This feature highlights promotions and news items dynamically, allowing users to view multiple items without manual scrolling.
GSAP (GreenSock Animation Platform) is used to animate key elements on the page:
- **Fixed Header and Bottom Bar:** Slide into view with a bounce effect.
- **Booking Details Section:** Slides in from the left side of the screen.
These animations are designed to provide a more engaging and interactive user experience.
The `toggleDropdown()` and `selectOption()` functions manage the visibility of dropdown menus and handle option selection. Clicking outside a dropdown closes any open dropdowns. Functions like `toggleCalendar()`, `updateCalendar()`, and `changeMonth()` manage the display and interaction of the calendar. The calendar updates to show the correct dates and allows users to select a date. The `autoScroll()` function ensures that the promotions and news sections continuously scroll, drawing attention to featured content without user intervention.
The app uses a blue color scheme with contrasting white elements for readability. It incorporates modern design elements such as rounded corners, box shadows, and flexible layout containers to ensure a visually appealing and responsive design.
The layout is designed to be responsive, with adjustments made for various screen sizes. For instance, the fixed header and bottom bar are positioned to remain visible on all devices, enhancing usability.
This prototype effectively combines functionality and aesthetics, providing users with a seamless and enjoyable train booking experience. Future updates will focus on integrating backend functionality and further refining the user interface.
Figure 3 - Discount Page
The app uses a clean and modern design with a blue background and white accents to ensure readability and visual appeal. The Arial font is employed for a straightforward and easy-to-read typeface. The `.container` class centers the content and provides consistent padding for a neat layout.
The `.fixed-header` class ensures that the header remains visible at the top of the page, even when the user scrolls. It includes a back button, a search bar, and a date-selector container. Styled as a circular button, this element uses an SVG icon to allow users to navigate back to the previous page. The `goBack()` function handles the navigation. Positioned within the header, the search bar features a magnifying glass icon and an input field for searching train options or other features. A horizontal scrollable container allows users to select different categories such as Travel, Hotels, and Dining. Each category is visually highlighted when selected.
The `.promo-card` class represents individual promotional offers. Each card displays an image, a title, and a brief description. The card's design includes a hover effect that lifts the card slightly and adds a shadow for a more interactive feel. Using GSAP (GreenSock Animation Platform), promotional cards have a subtle animation that makes them move up and down slightly, drawing attention to them.
Each card is a link that directs users to the `Payment.html` page. The `slideOutPromoCard()` function provides a sliding animation effect when a card is clicked before navigating to the linked page.
The `.bottom-bar` class keeps the navigation bar fixed at the bottom of the page, ensuring that navigation options are always accessible. Includes four items: Promotions, Tickets, News, and Settings, each represented with an icon and a label. This provides quick access to different sections of the app.
The `.date-selector-container` is horizontally scrollable on smaller screens, allowing users to view all date options without cluttering the interface.The app is designed to be responsive, ensuring a seamless experience across various device sizes by utilizing flexible containers and scalable elements.
GSAP is used to animate the entrance of the fixed header and bottom bar, enhancing the user experience with smooth transitions. The `.promo-card` elements have a repeatable bouncing animation that adds a dynamic touch.
Figure 4 - Ticket Booking Page
The header at the top of the page is fixed to ensure it's always visible for easy navigation. Back Button, a circular button with a back arrow that navigates the user to the homepage. This button is styled to be prominent and clickable. Route Info that displays the current route information, including the train service and stations. Date Selector that allows users to choose a date for viewing available train schedules. It features a horizontal scroll for easy navigation between dates.
The date selector allows users to filter the schedule by date. Each date is clickable and styled to highlight the selected date. This feature is crucial for user convenience, helping them quickly find schedules for their chosen day.
The schedule container is where train schedule items are dynamically loaded based on the selected date. Each schedule item includes, Schedule Header that shows the train type and price. Schedule Details that includes departure and arrival times, seating availability, and travel duration. It’s designed with a clear visual hierarchy for quick information retrieval. Select Button a button styled as a circle that directs users to the seat selection page when clicked.
The design uses a cohesive color scheme with white backgrounds for content areas and contrasting colors for buttons and text, ensuring readability and a pleasant visual experience. Implemented using GSAP (GreenSock Animation Platform), animations enhance user interaction: The header slides in from the top with a bounce effect on page load. Schedule items animate into view from below, with a bounce effect to draw attention and provide a lively experience.
The schedule data is loaded dynamically into the container based on the selected date. This feature ensures that the displayed schedules are always relevant to the user's date choice.
Clicking on a date updates the selection and reloads the schedule for that date.
Clicking on a schedule item redirects the user to the seat selection page.
Users can navigate back to the homepage using the back button in the fixed header. Each schedule item has a click event that directs users to the seat selection page.
Figure 5 - Seats Page
The seat selection interface is designed to provide a clear and interactive view of available seats:
Legend: A legend at the top of the page explains the color coding for seat availability:
Available: White seats
Filled: Dark blue seats (unavailable)
Selected: Yellow seats (selected by the user)
Cab Buttons: Buttons allow users to switch between different train cabins (Cab 1, Cab 2, Cab 3). Clicking a button updates the seat map to show the layout of the selected cabin.
Seat Map: The seat map is a grid layout where each cell represents a seat. Seats are dynamically generated based on the selected cabin layout:Filled Seats: Represented with a dark blue color.
Selectable Seats: Represented with a white color and change to yellow when selected.
Seat Selection: Users can click on available seats to select or deselect them. A bounce animation, created using GSAP, enhances the interaction, providing visual feedback when a seat is selected.
Seat Map Animation: When seats are loaded, they animate into view from the left side, improving the user experience with smooth transitions.
Cab Button Functionality: Clicking a cab button updates the seat map to display the selected cabin’s layout. The selected button is highlighted for visual clarity.
Select Button: A prominent button at the bottom of the page allows users to confirm their seat selection. It triggers a bounce animation on click to attract attention. If no seats are selected, an alert prompts the user to choose at least one seat.
General Styling: The page uses a consistent color scheme with dark blue, white, and yellow to ensure readability and visual appeal. The seat map and buttons are styled for clarity and easy interaction.
Dynamic Seat Map: The seat map updates based on the selected cabin using predefined layouts. This allows for a flexible and interactive seat selection experience.
Event Listeners: Cab Buttons: Update the seat map when clicked.
Back Button: Redirects to the previous page.
Select Button: Redirects to the payment page if at least one seat is selected.
GSAP Animations. Header Animation: The fixed header animates into view from the top on page load.
Seat Animation: Seats animate into view and bounce when selected.
Button Animation: The select button has a bounce effect on click for added emphasis.
Figure 6 - Payment Page
Payment Option Buttons: Users can select from various payment methods, including KTMB Wallet, Credit/Debit/ATM Cards, Net Banking, and Gift Cards. Each option is presented with an icon and brief description.
KTMB Wallet: Displays the current balance.
Credit/Debit/ATM Card: Lists the types of cards accepted.
Net Banking: Mentions the availability of major banks.
Gift Cards, Wallets, and More: Includes options like gift cards and mobile wallets.
The bottom bar provides essential actions and information:
Credit/Debit/ATM Card: Lists the types of cards accepted.
Net Banking: Mentions the availability of major banks.
Gift Cards, Wallets, and More: Includes options like gift cards and mobile wallets.
The bottom bar provides essential actions and information:
Discount Button: Allows users to access a discount page. The button is styled to stand out and attract attention.
Total Amount: Shows the total amount due for payment. This section provides a clear overview of the financial details before proceeding.
Pay Button: A prominent button for users to complete the payment process. It becomes active once a payment method is selected.
General Styling: The page uses a clean, white background to ensure a straightforward and focused user experience. Key sections are highlighted with contrasting colors for clarity.
Fixed Header and Bottom Bar: Both are styled with consistent colors and shadows to maintain visual coherence and enhance usability.
Payment Method Selection: Users can click on a payment option to select it. The selected option is visually highlighted, and the choice is stored for later use.
Proceed to Payment: Checks if a payment method is selected before navigating to the payment confirmation page. If none is selected, an alert prompts the user to choose an option.
Navigate to Discount Page: Provides an easy way for users to access discount options if available.
Go Back: Redirects users to the previous page (seat selection) to review or change their selections.
Header and Bottom Bar Animations: Both the fixed header and bottom bar animate into view using GSAP to create a smooth and engaging user experience. These animations enhance the visual appeal and provide feedback during page transitions.
Total Amount: Shows the total amount due for payment. This section provides a clear overview of the financial details before proceeding.
Pay Button: A prominent button for users to complete the payment process. It becomes active once a payment method is selected.
General Styling: The page uses a clean, white background to ensure a straightforward and focused user experience. Key sections are highlighted with contrasting colors for clarity.
Fixed Header and Bottom Bar: Both are styled with consistent colors and shadows to maintain visual coherence and enhance usability.
Payment Method Selection: Users can click on a payment option to select it. The selected option is visually highlighted, and the choice is stored for later use.
Proceed to Payment: Checks if a payment method is selected before navigating to the payment confirmation page. If none is selected, an alert prompts the user to choose an option.
Navigate to Discount Page: Provides an easy way for users to access discount options if available.
Go Back: Redirects users to the previous page (seat selection) to review or change their selections.
Header and Bottom Bar Animations: Both the fixed header and bottom bar animate into view using GSAP to create a smooth and engaging user experience. These animations enhance the visual appeal and provide feedback during page transitions.
Figure 7 - Card Payment Page
Before entering new card details, the page displays a sample credit card with:
Card Number: A placeholder card number to guide users on the expected format.
Card Details: Shows the cardholder's name and expiry date for reference.
The form collects user input for processing the credit card payment:
Card Details: Shows the cardholder's name and expiry date for reference.
The form collects user input for processing the credit card payment:
Card Number: An input field for the card number, formatted as four groups of four digits. It includes a placeholder and validation pattern to ensure the correct format.
Expiry Date: An input field for the card's expiry date, formatted as MM/YY. It includes validation to ensure the correct format.
Cardholder's Name: An input field for the cardholder’s name.
CVV: An input field for the card verification value (CVV), with a validation pattern for three or four digits.
The bottom bar provides:
Expiry Date: An input field for the card's expiry date, formatted as MM/YY. It includes validation to ensure the correct format.
Cardholder's Name: An input field for the cardholder’s name.
CVV: An input field for the card verification value (CVV), with a validation pattern for three or four digits.
The bottom bar provides:
Pay Button: A prominent button to submit the payment information and proceed to the confirmation page. It's styled to stand out and is interactive with bounce animation upon clicking.
General Styling: The page has a cohesive design with a blue background and white text for a clean and professional look.
Card Styling: The card details are styled with a darker background and rounded corners to differentiate it from the rest of the page content.
Input Fields: Styled with a consistent blue background and white text, enhancing readability and focus.
Back Navigation: Allows users to return to the previous page if they need to make changes or review their payment options.
Form Validation: Ensures all required fields are filled out correctly before proceeding. Alerts the user if any fields are incorrect or incomplete.
Proceed to Payment: Redirects users to the payment confirmation page if the form is valid. If not, it prompts users to correct their input.
Pay Button Animation: Uses GSAP to create a bounce effect when the pay button is clicked, providing visual feedback and enhancing user interaction.
Header Animation: The fixed header animates into view from above, creating a dynamic entrance effect.
Bottom Bar Animation: The bottom bar animates from below, ensuring it’s visible as users scroll.
General Styling: The page has a cohesive design with a blue background and white text for a clean and professional look.
Card Styling: The card details are styled with a darker background and rounded corners to differentiate it from the rest of the page content.
Input Fields: Styled with a consistent blue background and white text, enhancing readability and focus.
Back Navigation: Allows users to return to the previous page if they need to make changes or review their payment options.
Form Validation: Ensures all required fields are filled out correctly before proceeding. Alerts the user if any fields are incorrect or incomplete.
Proceed to Payment: Redirects users to the payment confirmation page if the form is valid. If not, it prompts users to correct their input.
Pay Button Animation: Uses GSAP to create a bounce effect when the pay button is clicked, providing visual feedback and enhancing user interaction.
Header Animation: The fixed header animates into view from above, creating a dynamic entrance effect.
Bottom Bar Animation: The bottom bar animates from below, ensuring it’s visible as users scroll.
Card Animation: The credit card slides in from above with a fade-in effect, drawing attention to the payment details area.
Figure 8 - Booking Confirmed Page
Centered Container: The content is centered vertically and horizontally, making it the focal point of the page. The background color of the container is a strong blue (#0077BE) to maintain consistency with the app's color scheme.
Header: The fixed header at the top of the page is styled with a contrasting gold (#FFD700) color, which matches the checkmark and button styles for visual consistency. It helps in maintaining a branded look across different pages.
Heading: The main heading ("HOPE YOU HAVE A GOOD JOURNEY") is prominently displayed at the top of the container, informing users that their booking was successful.
Checkmark Circle: A large, gold circle with a checkmark icon inside signifies that the booking process is complete. This visual cue provides instant feedback to users, confirming their action.
Confirmation Text: Additional text provides reassurance and details about where to find booking information. It informs users that they will receive an email confirmation or can check their booking on the homepage.
Button: A "Continue" button in gold with blue text provides a clear call-to-action for users to proceed. This button redirects users to the homepage of the app. It’s styled to stand out and is easily clickable, enhancing the user experience.
Typography and Colors: The page uses a combination of blue and gold to maintain a cohesive color scheme. Text is styled for readability with appropriate sizes and spacing.
Button Design: The button is designed with rounded corners and a clear color contrast to draw attention and encourage interaction.
JavaScript Functionality
Continue Button Click Event: The button triggers a navigation event that redirects users to the homepage when clicked. This allows users to continue exploring or managing their bookings.
GSAP Animations:
Text and Button Animation: The page uses GSAP (GreenSock Animation Platform) to animate the heading, paragraphs, and button. They fade in and slide up from below, creating a smooth and engaging visual effect as the page loads. This adds a touch of modern interactivity and keeps the user experience dynamic.
.jpg)
Comments
Post a Comment