Interactive Design Project 2: Working Web Page
18.6.2024 - 29.6.2024 (Week 8 - Week10)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Interactive Design
Project 2: Working Web Page
Jumplink
1. Lectures
1.1. Week 9: Box Model
2. Instructions
2.1. Exercise Week 10: Final Project
2.2. Task 2: Working Web Page
3. Reflections
Lectures
Week 9: Box Model
Fig9.1 Box Model PDF
Box Model and layout
- The display property is one of the most important in CSS for controlling layout. Every element has a default display value, usually block or inline.
- The Box Model consists of four layers: content, padding, border, and margin. The size of each layer can be specified using CSS units such as em, %, and px.
- Flexbox (Flexible Box Layout) is used to create responsive and efficient web layouts. Key properties of Flex containers and Flex items are highlighted.
Instructions
MIB for Interactive Design
Exercise Week 10
|
| Fig10.1 Layout |
This week's exercise is the layout for the final assignment, which can be
used later to modify into the final style.
|
| Fig10.2 After adjustmnet |
After adjusting and making basic modifications to the HTML and CSS based on the examples provided by the instructor, the successful layout looks like this. Since the instructor mentioned it can be used as the layout HTML and CSS file for the final project, I think I will still create a new file in the future for easier handling.
|
| Fig10.3 HTML |
Here is the HTML code. It uses navigation, section, header, and footer to organize the content. Additionally, it includes navigation links to navigate to specific sections, all within the same page.
|
| Fig10.4 CSS |
Task 2: Working Web Page
This task requires coding the resume prototype designed in Figma for task 1
using HTML and CSS. Additionally, it must be made responsive to accommodate
various screen sizes.
|
| Fig1.1 Resume Prototype |
|
| Fig1.2 HTML |
Based on the learning steps followed so far, define the server in the Files
page of Adobe Dreamweaver. Then, manage sites to create an HTML file for the
Task 2 working page, naming the HTML file index.html, and use an external
CSS file for styling.
Once everything is ready, I refer to the resume prototype design in Figma
and start working on the HTML by inputting all the content and dividing it
into sections. Many sections are also controlled using divs. Next, I add
classes to individual parts to facilitate targeted modifications in the CSS,
ensuring it aligns with my resume prototype.
|
| Fig1.3 Fonts |
|
| Fig1.4 SegouUI Font |
Since I used a font called Segoe UI in my design, which is not available on Google Fonts, I searched online for a long time and finally downloaded and installed it on my computer. I also researched how to embed local fonts and created a fonts folder along with the image folder. This font has many weights, and I used regular, bold, and black.
|
| Fig1.5 body p h |
Next, I modified the styles for the HTML, *, headings, paragraphs, and other basic common elements. I set the alignment to center, and adjusted the margins, padding, etc.
|
| Fig1.6 Layout |
I also set the height and overall layout for the body. I set the height to 100vh and used an image for the background. Since it was somewhat complex and couldn't be done with code alone, I used a linear gradient background color for the right side.
|
| Fig1.7 Name Photo Detail |
The layout for the name and photo is very simple. The details section is more complex and consists of three blocks, each separated by a div. The first part contains icons, the second part contains text, and the third part contains an Instagram QR code.
For the first and second parts, I used ul and li to arrange them. I removed
the bullet points using list-style: none in the CSS for a cleaner look.
Everything is center-aligned to maintain neatness.
|
| Fig1.8 Languages |
This part was also challenging. I created a blue gradient column to
accommodate 'Language' and 'Interests'. For the 'Language' section, I
created gradient lines using ::after for design, and they are arranged in a
single row.
|
| Fig1.9 Interest |
This part was quite simple. I arranged them using display: flex and justify-content: space-between, but afterwards I realized space-evenly would also work.
|
| Fig1.10 Line at top and bottom |
After completing the design on the left side, I started adding details. Above, I placed a yellow line floated to the right, occupying 50% of the width, while below it spans 100% of the width.
|
| Fig1.11 Work Experience |
This part is also quite complex, divided into several sections: the left side for years, the middle for the timeline, and the right side for text. Similarly, I used ul and li, set list-style to none for the years, but for the timeline, I opted not to use images. Instead, I created a timeline effect by combining a border-right for the years and ul circle dot for the text. To limit the length of the border, I used ::after for adjustments.
|
| Fig1.12 Ability |
In this section, most elements are images. I focused on centering their alignment and carefully controlling padding and margin. For the 'Talent' section below, I used display: flex and justify-content: space-evenly to achieve an evenly spaced effect, but I'm a bit disappointed that the centering isn't perfect.
|
| Fig1.13 Education |
In the 'Education' section, there is also a timeline similar to the one above, so this time it was familiar territory. I initially tried to use ::before for the content but it was too small and not visible. I opted not to use ul circle dot because it can't control positioning across multiple lines of li to stay centered. However, I still ended up using list-style: outside.
|
| Fig1.14 Project |
In this section, I considered placing two images per row to occupy more space, but I found that the photos are too small and placing them in two rows would look ugly. So, I chose to keep one image per row. I used flex and space-evenly to maintain neatness.
|
| Fig1.15 Line |
Lastly, decoration was essential, so I added lines below each section using simple divs to create the lines.
|
| Fig1.16 Responsive |
Lastly, I worked on making the design responsive. I rearranged the left and right sections to stack vertically, ensuring continuity. I also made adjustments to margins, padding, and ensured each section is evenly spaced.
|
| Fig1.17 Screen size view |
|
| Fig1.18 Responsive phone screen size view |
Netlify link: https://gyresume.netlify.app/
Reflections
Coding is quite interesting and challenging. HTML is relatively easy as it has less content, but using CSS to design a web page into a prototype is difficult. The process involves encountering numerous issues and requires constant adjustments.
Of course, the layout of HTML is also very important because it plays a role in structuring the content. Good HTML helps a lot with CSS. CSS is a very complex language with many possibilities and a high degree of flexibility. It requires continuous exploration to find the best solutions, and there are many ways to achieve this depending on which one is used at the moment.
Finally, you may notice that there is often a significant difference between the designed mockup and the coded outcome. Fine-tuning can be quite challenging, and mastering it requires a lot of practice and learning.
Comments
Post a Comment