Interactive Design - Project 2

-

Week 6 - Week 10

Jason Antony / 0356335

Interactive Design / Bachelor of Design (Hons) in Creative Media

Project 2
Task Requirements:

The objective of this assignment is to transform our static prototype from Project 1 into a fully functional and interactive web page. We will apply our knowledge of web layout class to create a working website that closely aligns with our original prototype.
Task Deliverables:

Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog.

HTML and CSS


I used many classes to separate each section. I built the website in a modular format, so every section is clear to me and easily navigable. At first, I didn't know that classes are such a powerful tool. I also learned a lot about divs. there is so much we can create with divs. we can nest divs and overlap containers made from divs. At one point during the process of building the website, I realized the true function of divs, and this made the rest of the process much easier. Initially, I was going insane on how to build my Figma design. 

Web Page

Challenges and Reflections

In this exercise, I had a lot of challenges. I had to build a working website from scratch. I was unfamiliar with HTML and CSS and this exercise forced me to learn it from the ground up. I had to spend hours and hours learning CSS to learn how the elements of my design could be arranged in the way that I had designed my website in Figma. I succeeded in the end and I am proud of it. Although the design is not responsive for phones, it is compatible with tablets and desktops. I intended this because the mobile version is better suited to an application form factor. The hardest part of this exercise is the positioning of elements within the website. It is such an alien feeling to design with numbers and code instead of just dragging the items to move them around. This made me feel extremely frustrated. I created this website from scratch manually. Honestly, I wish there was a way to make designing websites easier. 

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