Advanced Interactive Design - Project 2

10/06/2024 - 23/06/2024
Ng Zheng Kai 0359424
Bachelor of Design in Creative Media
Advanced Interactive Design
Project 2

INSTRUCTIONS




Project 2 - Interactive Web Application Pre-production and Prototype

For this project, we are to create a prototype for our website.
So I started by creating a mood board based on the aesthetic that I want to create.


Fig 1.1 Mood Board

Then I started to create the user flow of the website by using Figma


Fig 1.2 User Flow


After that, I start to create my High-Fi wireframes using Adobe Illustrator, and create a prototype using Figma.

Fig 1.3 High-Fi wireframe


Fig 1.4 Prototype


After that, I made some animations using Adobe Animate as to show an example of how my final website design would look like.

Fig 1.5 Welcome Page Animation


Fig 1.6 Bearing Test GIF



Final Submission



Fig 1.7 Final Presentation Slides



Fig 1.8 Final Presentation Video






Prototype link: https://www.figma.com/board/ASTugfIKcSVovaBaxT1qqn/Prototype?t=PPBxSGTY1sRj0AO8-1



Reflection

It was an educational and fun experience designing the wireframes and prototype for my website. It was confusing at first when learning how to animate using Adobe Animate, but I eventually got the hang of it thanks to external resources from the educational websites. I found that the process of wireframing and prototyping plays a crucial part in designing a website. In conclusion, this project has provided me with a comprehensive understanding of the design process of a website, and I am excited to continue finalizing my website in the upcoming project.











Comments

Post a Comment

Popular posts from this blog

Intercultural Design

Image
Week 1 - 7 Ng Zheng Kai 0359424 Intercultural Design / Bachelor of Design in Creative Media (hons)`  Project 1, 2 & 3: Hanhaba Obi  INSTRUCTIONS A proposal to concretise ideas, supported by research, for a final design revolving a given theme that reflects students’ understanding and interpretation of global issues and design aesthetics. The general theme is “Cultural Sensitivity in Design” You are to study a cultural phenomenon, or a particular subculture that is perceived as ‘sensitive’, and “frame” your study within the chosen theme. You are to convey this cultural aspect without altering the actual facts but within a presentable interpretation and adaptation that raises awareness from the viewers. Produce some preliminary ideas on how to visually express you interpretation using design language. Each idea is to be supported by a short ratio
Read more

Advanced Typography- Task 2: Key Artwork & Collaterals

Image
21/9/2023 - 7/11/2023, Week 5 - Week 11 Ng Zheng Kai / 0359424 Advanced Typography / Bachelor of Design in Creative Media (Hons) Task 2: Key Artwork and Collateral LECTURES All lectures are completed in  Task 1 INSTRUCTIONS Task 2A: Key Artwork Sketch For my key artwork, I am going for a graffiti bubble style font. Because I want to give off a sense of a chill and friendly vibe for my key artwork. Fig 1.1 Sketch Digitalize Fig 1.2 Image Trace Fig 1.3 Word Digitalization Color Palette Fig 1.4 Color Palette For my color, I decided to choose a bright and vibrant color palette. Final Design Fig 1.5 Final Design (JPG) (B&W)
Read more

Interactive Design: Project 2 - Working Web Page

Image
Ng Zheng Kai Interactive Design / Bachelor of Design in Creative Media (Hons) Project 2 - Working Web Page INSTRUCTIONS Project 2 - Working Web Page The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype. 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 do
Read more