9.10.2023 - 16.10.2023 / Week 07 - Week 08
Tan Zhao Yi / 0363285
Interactive
Design / Bachelor of Design (Honours) in Creative Media
Project 2 / Working
Web Page
LIST
Process
INSTRUCTION
Project 2: Working Web Page
Objective: The objective of this assignment is to 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 analyse its layout,
typography, colour 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.
|
|
Fig 1.1. Project 1 Prototype
|
Fig 1.1 shows my final digital resume prototype for Project 1. The
difficulties that immediately come up to my mind is the profile picture, the
small circles and the decorative boxes. I didn't know how to add them in my
ideal space using HTML and CSS.
Process
1. Side Navigation Bar
First, I learned how to create a side
navigation bar from
w3schools.
|
|
Fig 1.2. Side Navigation Bar - HTML View
|
|
|
Fig 1.3. Side Navigation Bar - CSS View
|
|
|
Fig 1.4. Side Navigation Bar - Web Page View
|
2. Introduction
Then after I code out the overall rough resume, I was struggling with
the introduction part. I wanted the image to place on the left, and text
on the right, but I couldn't find any other solution beside of {float}
in CSS. However, while it seems fine in Safari preview, it keeps overlapping to other text box in Dreamweaver.
|
|
Fig 2.1. Text Overlapping in Dreamweaver
|
|
|
Fig 2.2. Safari Preview
|
It will also overlap if I exit full screen of preview.
|
|
Fig 2.3. Text Overlapping in Small Screen
|
After millions of attempts, I finally decided to make the text left-aligned
and image placed on the right. Then here comes a new problem, the font size
of "Hi, I am Tan Zhao Yi." is jumping between 80px and 20px.
|
|
Fig 2.4. Introduction - HTML View
|
|
|
Fig 2.5. Introduction - CSS View
|
|
|
Fig 2.6. Introduction (20px)
|
|
|
Fig 2.7. Ideal Introduction (80px)
|
In the end, I change the HTML from <p> to <h1>. It did works but
I couldn't create contrast between "Hi, I am" and "Tan Zhao Yi".
|
|
Fig 2.8. Final Introduction - Web Page View
|
3. Self-description, Education, Work Experience and Skills
This four parts are the basic one. I followed my prototype with the
format and edit some of the content.
A. Self-description
In CSS, I adjusted the right margin of the text and line to make it
balanced visually with the containers, or else it will fill up all the way
to the right.
|
|
Fig 3.1.1. Self-description - HTML View
|
|
|
Fig 3.1.2. Self-description - CSS View
|
|
|
Fig 3.1.3. Self-description - Web Page View
|
B. Education
I added my high school education in the content.
|
|
Fig 3.2.1. Education - HTML View
|
|
|
Fig 3.2.2. Education - CSS View
|
|
|
Fig 3.2.3. Education - Web Page View
|
C. Work Experience
This is an additional part to enrich my resume. I added 4 icon
for each interest.
|
|
Fig 4.1. Interests Icon
|
It looks fine in full screen mode, but the image will come into the
next line if the screen gets smaller.
|
|
Fig 4.2. Icon Displacement
|
I couldn't find any solution online, so I decided to divide them into two
lines instead. I set their gap in 40% (top) and 33% (bottom) because the
text "Community Involvement" is too long and it will look weird if I set
them in the same gap width.
|
|
Fig 4.3. Interests - HTML View
|
|
|
Fig 4.4. Interests - CSS View
|
|
|
Fig 4.5. Interests - Web Page View (Full Screen)
|
|
|
Fig 4.5. Interests - Web Page View (Small Screen)
|
5. Contact and Footer
In the contact section, I also
emphasise it with a container because it serves as a connection between
client and me.
|
|
Fig 5.1. Contact & Footer - HTML View
|
|
|
Fig 5.2. Contact & Footer - CSS View
|
|
|
Fig 5.3. Contact & Footer (Grey coloured) - Web Page View
|
REFLECTIONS
Experience
Designing this web page has provided me with invaluable experience, reshaping my understanding of web design. I faced numerous challenges, which pushed me to develop creative solutions. This practical experience allowed me to apply my theoretical knowledge, improving my skills and fostering a deeper appreciation for the intricacies of web design.
Observations
One of my key observation was the impact of responsive design. Designing for a variety of screen sizes and devices is vital to ensure a seamless user experience. I also recognised the importance of self-directed learning, particularly after lecture classes.
Findings
I noticed the importance of content hierarchy and visual hierarchy became evident. Effective use of typography, colour, and layout can guide users through the content and enhance overall readability. Streamlining the code is also crucial to reduce page loading time and improve user satisfaction.
Comments
Post a Comment