Interactive Design -Final Project

 28.8.2023 -  / Week 1 -

Woo Yau Ka / 0355281 / BA of Design (HONS) in Creative Media
Interactive Design
Final Project


Divide the page into sections for easy navigation. Common sections may include:

Introduction/Bio

Portfolio/Gallery

Events/Exhibitions

Contact/Inquiries

Social Media Links

Design the Header:


Sketches:




 








Refences:

https://pin.it/171eY5g

  

https://pin.it/1AkI9M9

Mood board:


https://pin.it/3EKvXp6

https://pin.it/6htEPdH


Color:
#000000

Adobe XD:




#html code (Unchanged)




#css code (Unchanged)









I tried several times but couldn't adjust the length of the section. After changing it on the mobile phone, the web version will also be affected, and it seems that the color of Navi cannot be changed.



I tried to unify the size and height of the three pictures, but the picture on the left was always smaller, no matter how I modified or replaced it.

Final Link:
Project 3 (wooyauka-finalproject1.netlify.app)

#Final outcome



#Phone version



#Final html code






#Final CSS codes












































FEEDBACK:
Week 11
To separate five different areas, the button is too big. There should be text on it, not just the button.


 
REFLECTION

Through this project, I learned more about HTML than before, because I have been exposed to and learned HTML5 code before, but this was the first time I came into contact with CSS code, so this felt novel to me.  During the production process, I encountered many obstacles, which made the final product slightly different from the Adobe XD sketch, but it made me feel very challenging and engaging.
















留言

發佈留言

此網誌的熱門文章

Advanced Tyography/Task 1

圖片
30.8.2023 -  / Week 1 - Week 4 Woo Yau Ka / 0355281 / BA of Design (HONS) in Creative Media Typography  Task 1 (Exercises) INDEX Lectures Task 1 Exercise 1: Typography System  Week 1 8 major variations of typographic systems:            Axis system  - all elements are organized to the left or right of a single  axis. Fig.1.1 Axial System Fig.1.2 Axial System Radial system - all elements extend from one focal point. Fig.1.3 Radial system Dilatational system   - all elements expand in a circular fashion from a central point. Fig1.4 Dilatational system Random system - elements appear to have no particular pattern or relationship. Fig1.5 Random system Grid system - a system of vertical and horizontal divisions Fig1.6 Grid system Transition System - an informal system of tiered grading Fig1.7 Transition system Modular System - A series of non-objective elements that are constructed as standardized units. Fig1.8 Modular system F...
閱讀更多

Design Research Methodology - Compilation & Reflection

  31.8.2023 - / Week 1 - Week 14 Woo Yau Ka / 0355281 / BA of Design (HONS) in Creative Media Design Research Methodology  Final Compilation and Reflection  INSTRUCTIONS ASSIGNMENT 1: RESEARCH PROPOSAL ASSIGNMENT 2: CRITICAL REVIEW ASSIGNMENT 3: RESEARCH DESIGN - PRIMARY DATA ASSIGNMENT 4: REFLECTION REPORT & PRESENTATION PRESENTATION  SLIDES: RECORDED PRESENTATION LINK: wooyauka_presentation FEEDBACK: Week 3 -Research questions cannot be researched -The theme has nothing to do with social design Week 4 -Change research questions -The purpose is how to achieve cultural communion -Delete third research objective -The citation needs to include the article name, year and website address. -Start making assignment 2 Week 5 Public Holiday Week 6 -Add the document to the references list -Explain why it is a weaknesses -If there are more than two authors, just write one author's name - Change to To explain - Intergrate strengths and weaknesses together - Example of...
閱讀更多