Interactive Design: Project 2
| 19.06.2024 - 29.06.2024 (WEEK 9 -WEEK 10)
| Tang Chin Ting [ 0366473 ]
| Interactive Design / Bachelor of Design in Creative Media
| Project 2: Working Web Page
| Interactive Design / Bachelor of Design in Creative Media
| Project 2: Working Web Page
.jpeg)
LECTURES
Every week's lecture can be found in Interactive Design: Exercises.
INSTRUCTIONS
SUBMISSION
Project 2: Working Web Page
Introduction:
In Week 9, the second project of the interactive design module, "Working Webpage" was introduced. We were given two weeks to transform our digital resume, designed in Figma, into a fully functional and responsive HTML website. The detailed assignment brief is as follows:
1. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
2. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
The assignment is quite challenging for me as I need more coding knowledge. Additionally, my prototype designed from the previous week is complicated, which might result in my working website needing to align better with the prototype.
Prototype Design
Since I have done this part in Project: Prototype Design, I just need to code it to follow my design.
HTML
First, I start coding the HTML for all the information. This is a bit easier for me since we have done some exercises in the class and I still remember how to code it out. After coding the HTML, this is what it looks like:
Figure 1.1 HTML Outcome
Figure 1.2 HTML Outcome
Figure 1.3 HTML Outcome
In the first part of this process, I created a main container for the background with a fixed width of 1440px to accommodate desktop screens. I then applied a gradient color to this container, as shown in the screenshot below.
Figure 1.4 CSS Code of Main Container
The resume section features a flexible layout with items aligned at the start. The content is initially justified, and elements are positioned absolutely. The text, centered with a height of 449px, uses transparency in its colors to create a visually appealing effect.
Figure 1.5 CSS Code of Resume Title
The second part, which involves placing my portrait into my digital resume, is easier than creating the "RESUME" section. Our lecturer taught us how to create a dotted line rectangle, so I am familiar with the process.
The portrait element is positioned absolutely within the layout, with dimensions of 528px width and 824px height. It is placed at the top left, offset by 833px from the left edge, and features a background image that covers the entire element. The element uses a z-index of 74 and a border radius of 40px, giving it a unique and distinctive visual style.
Figure 1.6 CSS Code of My Portrait
For the introduction, I used a large "HELLO!" to grab the viewer's attention. The "HELLO!" is styled with the Almendra font family, set to 160px in size, with a line height of 192px. It is centered and uses the 'no-wrap' white-space property.
In contrast, the introduction text uses the Inria Serif font family at a size of 30px, with a line height of 35.97px. The text is justified and has a z-index of 1 applied for layering purposes.
Figure 1.7 CSS Code of Introduction Section
Figure 1.8 CSS Code of Contact Icons
Creating the CSS for this project was the most challenging part for me. I started by designing a rectangle and assigning it a color. Then, I moved on to coding the title and language options. For the progress bar, I began with a darker rectangle as the background, then added a white bar on top of it to indicate progress.
Figure 1.9 CSS Code of Language Section
In the next section, the "software-skills" section features similar properties but uses a different font family (Inria Serif) and smaller dimensions. The visual element on the right side prominently displays the word "Skills" in a large, bold font, with "Software Skills" shown below it. This visual representation likely aligns with the code snippet that defines the "skills" and "software skills" sections.
Figure 1.10 CSS Code of Skills Section
The illustration on the right side features logos for various design-related software and disciplines, including Adobe Illustrator (Ai), Adobe Premiere (Pr), Adobe Photoshop (Ps), Adobe After Effects (Ae), and Adobe InDesign (Id). These logos are paired with labels such as "Graphic Design", "Creative Design", "Video Production", and "UI/UX Design", showcasing the diverse range of design skills and tools relevant to the context.
.png)
Figure 1.11 CSS Code of Software Skills Section
In the "Education" and "Experience" parts, I did a similar one. The stars are based on the illustration elements that I have created in Figma. I download it as a PNG and place it beside the date range.
Figure 1.12 CSS Code of Education Section
In the final part of the CSS code, I showcase my e-portfolio projects. Initially, I aimed to implement a scrolling feature to display more projects but was unsuccessful. Consequently, I decided to display only three of my projects. I set the image as the background and created a rectangle overlay with a grey background color for each project.
.png)
Figure 1.13 CSS Code of Projects Section
After I had done the whole part of CSS, I faced this problem. I have no idea how to solve it, so I just asked Mr. Shamsul and he told me that I need to select * which is the new selector to remove all padding and margin. There is the code that I have shown in Figure 1.15.
Figure 1.14 Facing Problem
Figure 1.15 New Selector to Solve the Problem
Final Submission
Click here to visit my digital resume!
REFLECTION
I have learned a great deal from this task, as it represents an advanced challenge for me in the module. Having designed my favorite digital resume in Figma, I realized that the coding needed to closely match my design. This made it difficult to simplify the code without deviating from my original vision, so I needed to search online for solutions to implement everything effectively.
This task has demonstrated my ability to translate design concepts into functional, interactive web experiences. The code I produced is clean, well-organized, and successfully reflects the intended design. This attention to detail and technical execution will be invaluable in my future interactive design projects.
Keep up the great work and continue exploring new ways to push the boundaries of HTML and CSS. This digital resume serves as a solid foundation for further developing and refining your interactive design skills.
.jpeg)
Comments
Post a Comment