Interactive Design GCD60904/Final Project

-

23/06/2024 - 28/07/2024 

Week 11 - Week 14

Wang Yifan (0368363) / Bachelor Of Design In Creative Media

Interactive Design / Final Project | / Design, Exploration and Application


TABLE OF CONTENTS

  1. Instructions
  2. Lectures
  3. Project
  4. Final Submission
  5. Reflections


INSTRUCTION 



LECTURE 

Week 11

Lecture slides:




PROJECT

Job requirement

Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

Content:
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.  

Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

Main page: Home
Page 2:Pricing
Page 3: Company
Page 4: Blog
Page 5:Support


Website references
Website references

Website references

I browsed some websites to find concept references and understand what the website of the pet shelter I wanted should look like. I found that the colors used in these websites are usually colorful and lively. The content on the homepage is usually an introduction to the content of the website, with various explore more read more buttons connecting to other pages, etc.


Website planning
The website I want to design is about pet shelters. In addition to viewing pet shelter content, you can also get veterinary information, including information about pet types, and see the healthy diet of pets. Everything about pets is here.

Website Content 

I use figma to design the appearance of my specific web page, and what I imagine is a long-screen web page that can view different information in the web page by clicking on different section names


Webpages prototype design




Page Code
In the 12th week, I started writing web pages on DW. In the process, I changed some pictures in figma because I wanted the pictures on the page to be clearer.

DW process，Week 12 (8/7/2024)

DW process，Week 12 (8/7/2024)

DW process，Week 12 (8/7/2024)

DW process，Week 12 (8/7/2024)

DW process，Week 12 (8/7/2024)

DW process，Week 12 (8/7/2024)

DW process，Week 12 (8/7/2024)


Because I still have some professional questions and don't understand them very well, I searched the video websites on the Internet to find relevant content that I don't understand, and tried to make my own web page. Obviously, this assignment is difficult for me, so I also asked my friends who are learning to build computers for help, asking them to help me how to successfully complete this web page. I tried to feel the complexity of this assignment. It is very complicated, so I spent a long time to understand and figure it out and finally complete it.

Search Process



CSS Code:

HTML Code:

JS Code:


FINAL SUBMISSION



FEEDBACK
Figma designs should be created using images to ensure integrity. Mr. Shamsul suggested that adding footers to the sketches is very important, emphasizing their significance in the overall design process.


REFLECTION
This was a significant challenge for me. I struggled to translate my prototype design into actual code and turn it into functional web pages. Properly aligning elements, ensuring consistent spacing, and maintaining the intended layout across various screen sizes were all quite complex for me, and it took a long time to get everything right.

Due to these difficulties, I sought help from my brother, who works as a software engineer. He recommended using online resources for coding, provided me with several resource websites, and showed me how to effectively apply them in my code. From these online resources, I found various tutorials, code snippets, and CSS frameworks that helped me address specific issues I encountered. I realized that seeking help and learning from others is a normal part of the coding process, and it's also crucial to make effective use of available resources.






评论

发表评论

此博客中的热门博文

Advanced Animation - Exercises

-
图片
23/04 /2025 - 28/05/2025 / Week 1 - Week 6 Wang Yifan / 0368363 Advanced Animation / Bachelor of Design (Honours) in Creative Media /  Taylors University Exercises INTRODUCTION LECTURE Week 1:Miro Board Fig 2.1 Week 1 Miro Board Week 2: Lecture Slides Fig 2.2 Week 2 Lecture Slides Week 2 Miro Board Fig 2.3 Week 2 Miro Board Week 3: Lecture Slides Fig 2.4 Week 3 Lecture Slides Week 5: Lecture Slides Fig 2.5 Week 5 Lecture Slides Week 5 Miro Board Exercise 1: Bouncing Ball Animation In the first exercise, we need to find references and observe the difference of each ball's physical property (football, ping pong and bowling) and its weight. Then, we should analyse how does it affect: The timing and travel distance of each bounce (Contact pose to Contact pose) The overall timing that determines the number of bounces The height of each Up pose when it bounces   Reference for different bouncing ball: Football -   https://www.youtube.com/watch?v=01cm7H1QoJg Ping Pong -...
阅读全文

Motion Graphics and Compositing - Project 1: Technical and Motion Graphics Sensibilities

-
图片
21/04/2025 - 18/05/2024 (Week 01 – Week 04) Wang Yifan / 0368363 Montion Graphics & Compositing / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1: Individual Task - Technical and Motion Graphics Sensibilities INTRODUCTION LECTURE Week 1 Practical: Fill up the details below: 1. E-Portfolio link 2. Pinterest Board: 3. List down 3 of your favourite Motion Graphics works and explain why you like it the most. Fig 2.1 Week 1 Practical Class, Week 1 (25/4/25) Week 5  Practical: 1. Follow instructions on the Tutorial demo during online class.  2. Create your own composition based on the requirements below: 3. Download all of the design elements from this link: https://bit.ly/3cHoqZ6   Create 1080 x 1920 size poster (I.G Stories size) on Photoshop Trace and crop the images using the Pen tool. Create 1 composition and attach below (I.G poster) Animate the composition for 5-16 second loop with sound (I.G video story) Firstly, before I imported the...
阅读全文