Interactive Design - Exercise 3

6/11/2024 - 17/11/2024 / Week 7 - Week 8

Tay Yue Chern / 0373215

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Exercise 3 - Personal CV Page

---

TABLE OF CONTENTS

1. LECTURES

2. INSTRUCTIONS

3. PROCESS WORK

---

1. LECTURES

Week 2 - Week 6 lectures documented in Interactive Design - Exercise 1 & 2

Week 9 - Week 11 lectures documented in Interactive Design - Project 2

Week 7 - CSS Selector

Week 8 - Independent Learning Week (No class)

Back to top

---

2. INSTRUCTIONS

Back to top

---

3. PROCESS WORK

Exercise 3 - Personal CV Page

To design and build a personal CV page using basic HTML and CSS, organise information into sections, practice styling text, and create a clean, professional-looking page layout.

1. Sketch

Mr Shamsul gave us detailed instructions and guidance in Week 7 class before we started doing the exercise.

Fig 3.1.1 References

I began by looking for visual references and creating a rough sketch about the layout of my CV page.

Fig 3.1.2 Sketch

I chose to merge the 'contact' section with 'intro' section, as I think if the layout was like one section after another it might looks quite boring and lack of hierarchy, so I decided to try putting both sections together.

2. HTML & CSS

Fig 3.2.1 Working process in Adobe Dreamweaver

I structure the webpage according to my sketch, and I spent most of my time exploring the ways of merging 'intro' and 'contact' in one section while maintaining a clean and clear structure.

Fig 3.2.2 'intro-contact' section coding

Fig 3.2.3 'intro-contact' section coding

Fig 3.2.4 Coding detail

I changed the colour scheme to a warm tone to match with my profile photo. I wanted to create a circular profile photo and align it with the slogan, as shown in Fig 3.2.4. I adjusted the margin and styled the text.

Fig 3.2.5 Adjustment

Fig 3.2.6 Position changes

However, I don't really feel satisfied with the previous alignment, thus I tried to align them vertically as shown in Fig 3.2.6, and I go with the design at the bottom in the end.

Fig 3.2.7 'Skill' section coding detail

For this section, I searched free icon images and attached into the webpage, however, due to the different margin of the images, the spacing between words and images were terrible. Therefore, I used complex selector to adjust the margin of each image.

3. Refinement

While reviewing, I noticed that the 'intro-contact' section looks a bit awkward due to the unequal amount of information. The 'contact' section on the right appears unbalanced. Therefore, I decided to move the 'contact' section out independently and align it with the 'skill' section, which also has less text information.

Fig 3.3.1 Adjusted layout

While checking the website's performance, I noticed that the 'skill' and 'contact' sections did not follow the set margins and adjust automatically to the screen size. As a result, these sections remained unchanged when the screen was narrowed, causing some text to extend outside the website, as shown in Fig 3.3.2. The same problem occurred when browsing on a phone.

Fig 3.3.2 Adjustment error of 'skill' and 'contact' sections

Fig 3.3.3 Adjustment made

I added flex-wrap to make it compatible with different screen sizes, as shown below.

Fig 3.3.4 Webpage in narrow screen size

4. Final Outcome

Fig 4.1 Personal CV Page

Link to my personal CV page: Click here

Back to top