Application Design 2 - Final Project

-

Jason Antony

0356335

Application Design 2

Final Project - Live Web App


Instructions

A) Final Project – Completed App – 30 % Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.

B) E-Portfolio - 10 % Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathize with others within group settings, interact positively within a team, and foster stable and harmonious relationships for productive teamwork. Reflective writing is part of the TGCP.


Netlify link
https://tgvwebapp.netlify.app/

Process and Reflection

Overview

For my final project in Application Design 2, I developed a web application aimed at providing users with an intuitive and interactive interface for booking movie tickets. The project involved extensive front-end development, focusing on creating a responsive and visually appealing user experience. Throughout the development process, I learned valuable lessons about UI/UX design and organization, and Tailwind CSS proved to be an invaluable tool that significantly enhanced my project’s efficiency and structure.


Streamlining the Design Process

Initially, I realized that my approach to coding was inefficient. I felt overwhelmed by the numerous classes for each element across many pages in my web app. This led me to explore CSS libraries, and I chose Tailwind CSS for this project. Tailwind helped me immensely in organizing and structuring my project. I could differentiate each element using CSS classes that offered native CSS functionalities directly in the HTML file, eliminating the need to link a massive CSS file to all the pages. Although there is still a stylesheet for shared elements across the web app, Tailwind simplified the process.

The utility-first approach of Tailwind CSS was one of its most notable benefits. Unlike traditional CSS frameworks that offer predefined components and styles, Tailwind provides a comprehensive set of utility classes. This allowed me to build custom designs directly in the HTML without needing to write additional CSS rules. As a result, I could rapidly prototype and iterate on design ideas, adjusting styles on the fly and seeing immediate results.


Enhancing Code Organization

Tailwind’s utility classes played a crucial role in maintaining a well-organized codebase. By leveraging these classes, I avoided the pitfalls of deeply nested CSS rules and specificity conflicts that often plague large projects. Each HTML element’s styles were self-contained, making the code more readable and easier to maintain. This modular approach also facilitated better collaboration, as team members could quickly understand and modify the design without digging through extensive CSS files.

Styling the navigation bar and buttons, for instance, was incredibly efficient with Tailwind. Utility classes like bg-blue-500, text-white, font-bold, py-2, px-4, and rounded provided a clear and concise way to apply styles directly within the HTML. This not only reduced the need for additional CSS files but also minimized context switching between HTML and CSS, streamlining the development workflow.


Consistency and Scalability

Tailwind ensured design consistency across the entire application. By using predefined utility classes, I maintained a cohesive visual style without worrying about deviating from the design system. Tailwind’s configuration file allowed for easy customization of default styles, ensuring that the application adhered to the desired color palette, typography, and spacing guidelines.

Moreover, Tailwind’s scalability proved advantageous as the project grew in complexity. Adding new components or modifying existing ones was straightforward, thanks to the reusable utility classes. This scalability was particularly beneficial during the latter stages of the project when integrating additional features and refining the user interface.


Conclusion

In summary, Tailwind CSS significantly contributed to the success of my Application Design 2 final project. Its utility-first approach, combined with robust customization options, streamlined the design process, enhanced code organization, ensured consistency, and improved scalability. Beyond the technical benefits, using Tailwind taught me valuable lessons about efficiency, modularity, consistency, collaboration, and responsiveness in UI/UX design. Reflecting on this experience, I am confident that these insights will make me a better UI/UX designer, and look forward to leveraging more CSS Libraries like React's or Tailwind's capabilities in future projects.


Video Presentation - correct link

https://youtu.be/zjzfNvbOk1s





Comments

Post a Comment

Popular posts from this blog

Final Eportfolio - Games Development

-
Image
 Exercise Week 1 Adam's Nightmare  The concept of this game is similar to Limbo, by using silhouettes, and dreamlike design elements. The game is designed so that the users interpret their own stories. This creates a mystery that can be a profound experience for gamers. However, the gameplay could be drastically improved. For instance, the game basically revolves around jumping over obstacles and pushing or dragging different elements to progress within the "nightmare". However, the physics of the jumping is not responsive enough for the obstacle courses within the levels. the dragging and pushing are also designed in a way that causes the game to feel unrealistic. for instance, when the user tries to pull a box, the character seems to have the "force", so it could pull objects without actually touching them. The difficulty of the game is also a problem. Usually, difficulty levels scale within the game in a way where easier levels are
Read more

EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE

-
Image
EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 3 : Creative Experience Design Project Prototype November 5, 2023 TASK Instructions The prototype will enable the students to discover certain limitations that they might not have learnt about before. They’ll have to creatively think about how to overcome the limitations to materialize their proposed ideas. The objective of this task is for the students to test out the key functionality of their project. The output may not necessarily be a finished visually designed project. The students will be gauged on their prototype functionality and their ability to creatively think of alternatives to achieve the desired outcome.  Progression I started the project by looking at some 3D models for the cells on sketchfab, but then I found out there is a sketchfab plugin on unity. I then exported the 3d model into the AR Scene.  Once I exp
Read more

EXPERIENTIAL DESIGN - Final Task

-
Image
EXPERIENTIAL DESIGN - Final Task Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 4: Creative Experience Design Project December 15, 2023 Coming from the prototype I've improved several parts of the app. **1. AR Scene:**    - In the AR scene, I experienced the heart of our educational AR app. Here, I harnessed the incredible capabilities of Unity's AR Foundation to bring cell biology to life. By simply tapping on the screen of my mobile device, I was able to place a 3D model of a cell into my real-world environment. It was awe-inspiring to see the cell model seamlessly blend with my surroundings. I used Sketchfab to import the 3d model and create the labels. Then I made the object able to rotate, zoom, and move using a plugin called Lean Touch.  **2. Notebook Scene:**    - The Notebook scene was like opening a digital textbook on my mobile device. It was designed to be viewed in portrait mode, offering a comfortable reading experience. The
Read more