Interactive Design · Project 2

19/6/2024 - 29/6/2024 / Week 9 - Week 10

Yang Zhi Ching / 0365154

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

Project 2 · Working Web Page

Instruction

Doc 1.1 MIB of the module

This assignment is to transform the static prototype from Project 1 into a fully functional and interactive web page, create a working website that closely aligns with your original prototype.

Review the 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.

Progress

1. Task 1 Prototype

I will create the website according to this prototype I made before.

Doc 1.2 Prototype in Project 1

1. HTML Structure

The first step is to type out all the information that needs to be included. Before this, I organized the images that I will use on this website into a "Working Web Page" file.

Fig 1.1 Images File, Week 10

Firstly, I added the link for the font source in the opening (the CSS style link was added after completing the HTML code). After the <h1> "CHELSEA" (like the logo of the page), there are 5 items in the navigation bar: about, professional, experience, my works, and contact. After the header, I started working on my first page - the Hero Page section. I linked the Submit button to my Contact section.

Fig 1.2 HTML opening code with font resource link, Week 10

Fig 1.3 Header and Navigation, Week 10

Fig 1.4 Hero-Section html, Week 10

This section is a short introduction about myself. For the next Professional section, I divided it into "skill-container" and "education-container". In the Skill part, I inserted all the icons (Adobe software icons) which I resized in Photoshop to ensure they display correctly. I made a "skill bar" to show my skill level, which is something we haven't learned in class, so I searched online for how to do it.

Fig 1.5 About-Section html, Week 10

Fig 1.6 Showing the html and the Icon Preview, Week 10

Fig 1.7 Education Preview, Week 10

Fig 1.8 Experience Section Html, Week 10

Fig 1.9 Works Section Html, Week 10

Fig 1.10 Contact Section and Footer Html, Week 10

2. CSS Styling

After completing the HTML, I started working on the CSS layout. Before that, I encountered a problem with my font.

Heading Font: Blippo Blk BT

Paragraph Font: Gluppo

My heading font Blippo is not available on Google Fonts, so I didn't know how to get the embed code. I downloaded the font from another font-sharing website, not from Google Fonts.
To embed the font, I converted the .ttf file to .woff and .woff2 (learned from the Internet), then placed them in the "Fonts" file at the same level as the index and Images files.

Fig 2.1 Font Format Converter, Week 10

Fig 2.2 File Index, Week 10

Then, I started typing out the CSS file. I couldn't remember everything I needed to type, so my working process was: "think about what I want for the layout - refer to previous tutorials from the lecturer - if not taught previously, search for the tutorial online".

Fig 2.3 Header CSS, Week 10

Fig 2.4 Preview for the First Page (before adjust the gap between navi-items), Week 10

Fig 2.5 Adjust the Gap and Hover Reflection, Week 10

Fig 2.6 10% Gap of Navigation, Week 10

After that, I used the tutorial code to make my hero-title "CHELSEA" have a shadow, but it was messy in alignment, so I added the class "hero-title-grey" to create the shadow effect and manually adjust the color.

Fig 2.7 Hero-Title before Adjustment, Week 10

Fig 2.8 Adjustment in HTML, Week 10

Fig 2.9 After Adjustment, Week 10

Fig 2.10 CSS in hero-title, Week 10

I made some changes in the about-section, inserting the container and div-class. After that, I moved on to the Professional section. I found that I couldn't get the title of Professional in the right place, so I fixed it by adjusting the hierarchy (inside the container). For the skill-bar part, I encountered a problem where the bar didn't start from the same point. I fixed it by changing the "width" to "min-width" in .skill span.

Fig 2.11 HTML Adjustment in About Section, Week 10

Fig 2.12 Hieracy Adjustment, Week 10

Fig 2.13 Problem of the Skill Bar, Week 10

Fig 2.14 Adjustment, Week 10

The layout of the timeline was difficult for me, so I decided to change my layout to a simple column display.

Fig 2.15 Timeline Layout in Prototype, Week 10

Fig 2.15 Preview of Experience Section before CSS, Week 10

Fig 2.16 CSS of Experience Section, Week 10

Fig 2.16 Preview, Week 10

Moving on to the My Works section, I made some adjustments to the HTML file (adding container and class) to make the CSS layout easier.

Fig 2.17 Adjustment in HTML, Week 10

Fig 2.18 Works Showing Gallery (without alignment and space), Week 10

Fig 2.19 CSS in myworks Section, Week 10

Fig 2.20 Preview, Week 10

Then I proceeded to my last page - the contact page. I first made a background box, but I couldn't find a way to layout the form so that the name and email fields were on the same line. So, I changed the layout of my final outcome. After that, I added a silver background image, referring to my prototype, by creating a new class "section-with-background" so I could directly add the background to the sections I wanted (from the about-page to the contact-page).

Fig 2.21 Reference Prototype, Week 10

Fig 2.22 Preview of Contact Box, Week 10

Fig 2.23 HTML of Background Image, Week 10

Fig 2.24 CSS of Background Image, Week 10

Fig 2.25 Preview, Week 10

3. Ensure the Responsive in Other Device

To ensure the website works properly on devices other than desktops, I referred to tutorials from both the lecturer and online. I found that I had made some mistakes in my previous CSS code, so I spent time finding and fixing the bugs.

Fig 3.1 Adjustment in CSS, Week 10

Fig 3.2 Bugs in Inspect Mode (Other Device View), Week 10

Fig 3.3 Fixed Result, Week 10

Fig 3.4 Preview in Inspect Mode (Other Device View), Week 10

After first submission in Week 11, Mr. Shamsul had given me some feedback, in my website there have two problem, both are responsive problem. In Mr. Shamsul's desktop he can't have a full view of my hero-page, so i need to adjust my hero min-height to 1000vh. And the second problem is in mobile phone preview, my header h1 "CHELSEA" (logo), need to be in the center. After I adjusted it, i have updated a new version in classroom.

Fig 3.5 Preview in Responsive Dimension (before adjustment), Week 10

Attached with before-updated version: xxichelseacv.netlify.app

4. Final Outcome

Link to My Digital CV Website:

xxichelseacvv.netlify.app

Screenshot Preview:

Fig 4.1 Preview in Desktop Dimension, Week 10

Fig 4.2 Preview in Responsive Dimension (after adjustment), Week 11

Feedback

Week 11

Adjustment needed:

hero min-height: 1000vh
radius need consistent
navigation background color transparency: 61> 80/90
inspect - navi in middle

Reflection

| Experience |

I didn't feel too much pressure on this task because the lecturer's lessons were very clear, and there were a lot of resources online. As long as you are willing to spend time, you can complete it. In this task, I combined what the teacher taught and online tutorials to complete my own digital CV. Although I'm not proficient in coding, I've become more familiar with it and got a lot of practice based on the teacher's lessons. However, I spent a lot of time on this homework, which resulted in me not being able to complete the homework for other modules on time, making me very anxious.

| Observation |

I found that if you make a clear and well-structured plan in HTML, it will be much easier in CSS. I was not too careful when working on HTML, so I encountered many difficulties in CSS and had to correct them one by one, which took a lot of time.

| Findings |

I need to spend more time familiarizing myself with the structure of HTML so that I can complete the subsequent work more efficiently.

Search This Blog

YANG ZHI CHING (0365154)