Interactive Design Project 2

-

10.10.2023 - 24.10.2023 / Week 7 - Week 9
Tan Jian Xin / 0350784
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2 / Working web page

INSTRUCTIONS
Objective: 
- 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.



Based on my prototype, I then start to create a html and css file in Adobe Dreamweaver (Dw) and save it in a new folder, project 2. After typing out all the contents, I realized that the top part (header) is quite easy compared to the other sections.

Figure 1.1: main

Then, my next challenge is that I'm not sure how to create spaces between boxes shown below. 

Figure 1.2: no spacing between boxes

However, I managed to create the spaces by applying margin around the columns.

Figure 1.3: spacing between boxes

Mr. Shamsul suggested me to remove the text background for headings as it will be more consistent and it will be easier for the viewers as it has only 2 colours (pink and blue).

Figure 1.4: contents

Thus, below shows the altered version.

Figure 1.5: altered content heading

For the footer, Mr. Shamsul taught me to make 6 sections of <div></div> to make the footer look as it is shown below. 

Figure 1.6: Figma footer

Then, although I find it very frustrating for the alignments of contact in smaller devices such as iPhone SE, iPhone XR and others, I realized that it's because of the length of my text that caused the alignment shown below.

Figure 1.7: contact at other devices 

Then, I tried to reduce the margin for the first row icons and it works. 

Figure 1.8: Reduced margin

Final: tanjianxin-project2

Comments

Post a Comment

Popular posts from this blog

Design Principles Task 1 / Exploration

-
Image
6.2.2024 - 20.2.2024 / Week 1 - Week 3 Tan Jian Xin / 0350784 Design Principles / Bachelor of Design (Hons) in Creative Media Task 1 / Exploration List / Jump Link Lectures Instructions Feedbacks LECTURES Elements of Design - Individual "building blocks" Point  Simplest element of design Repetitive mark forms a line Other 2/3D figures and forms are created as the point moves in space Figure 1.1: Point Line   Can be active or static / aggressive or passive / sensual or mechanical Can indicate direction, define boundaries of shapes and spaces, imply volumes and suggest motion or emotion Can be grouped to depict qualities of light and shadow and to form patterns and textures Figure 1.2: Line Shape Expanse within the outline  Becomes visible when a line enclose an area or change in value (light/dark) or texture General category of shapes - Geometric (Tend to be precise and regular)  & Organic ( Irregular, more informal than geometric) Figure 1.3: Shape Form 2D - shap...
Read more

Design Principles Task 3 / Design

-
Image
5.3.2024 - 19.3.2024 / Week 5 - Week 7 Tan Jian Xin / 0350784 Design Principles / Bachelor of Design (Hons) in Creative Media Task 3 / Design List / Jump Link Instructions Feedbacks References INSTRUCTIONS Following your analysis of the design you selected in Task 2, you will now create a new piece of work that is either a response to or an inspiration from the previous one. You will incorporate your understanding of design principles in your design. Any appropriate medium and/or resources may be used to convey your visual message. Direct use of photographs is not allowed. If any work is shown to be plagiarized, the student will receive a failing mark for the entire module and be subject to the university's regulations regarding academic misconduct. 1. Visual references After choosing the 14th goal set by the United Nations - Life Below Water, I decided to read more information in relation to this goal to narrow down the topic in which I hope to portray in my design. Figure 1.1: In...
Read more

Intercultural Design Proposal / Field Study / Final Project & Portfolio

-
Image
5.2.2024 - 29.3.2024 / Week 1 - Week 8 Tan Jian Xin / 0350784 Intercultural Design / Bachelor of Design (Hons) in Creative Media Lectures / Proposal / Field Study / Final Project & Portfolio List / Jump Link Lectures Instructions Proposal Field Study Final Project & Portfolio Feedbacks Reflections LECTURES Briefing on MIB (module information booklet) Communicate the essence and the information efficiently and effectively Figure 1.1: Visual communication Visuals Everything that can be seen Wide, all-inclusive including nature (tree, bird, cat) Everything produced or created by humans that can be seen Produced or created by humans for the purpose of visual representations that has functions, content and communicative purpose Figure 1.2: Example of visual Design system (cultural sensitivity) Freedom and Spontaneity Easily distinguished in their environment Physical activity Can be physical, involving movement and activity that engages in physical challenges Mindfulness and Relaxat...
Read more