Interactive Design - Project 2: Working Web Page
19.6.2024 - 29.6.2024 (Week 9 - Week 10)
Vanessa Kei Kurniadi /
0360525
Bachelor of Design (Hons) in Creative Media
Interactive
Design - Project 2: Working Web Page
INSTRUCTION
fig 1.1 Instructions
In this task we were instructed to recreate the design of our resume that
we've made in Figma into a working web.
I already made my resume prototype in Figma during our previous task. Here is how it
looks like:
fig 1.2 My resume design in Figma, week 6 (31.5.2024)
Thankfully, on week 10's class, Mr Shamsul taught us so new tutorials on
making a working web. It was very quick and I spent the whole class time
trying to type what Mr Shamsul typed, because not only it was fast, but we
had to follow and make sure we can show it if he calls our names.
Even though the class was relatively very fast, I had some time to process
what I was even doing, and learn on the new commands and codes to make new
things using Dreamweaver.
So in this project, the exercise's code are once again my cheat sheet. I
put them side by side and copy pasted the codes into my new worksheet. Of
course, I had to re-study the codes and make changes where necessary.
Not only that, the layout that I made for my resume is not at all an easy
task. I had to push my brain really hard to figure out what does which,
and how to do it outside my knowledge. I even had to ask my friend and
chatgpt a lot for tips and tutorials.
Headings
The headings were actually pretty easy. I followed the exercise's header
given by Mr Shamsul and modify it where it's needed. I changed the
image, the words on the navigation, the min-width so it looks nice with
the size of the logo and all, and adjusted the color and styles on the
CSS file.
Body
Home
The home section is a pain in the butt for me. I spent hours just to
modify it so it looks how I want it to look. I forced the padding, margin,
text size, etc until it can look as close as it could to the design. The
one that I had a lot of difficulties with is the placement of the image. I
look through chatgpt on how I could make the image be placed on the
border.
Making the button was also a bit challenging. I tried to re-study the
codes that Mr Shamsul gave me and change the colors here and there. I
can't just blindy put in colors because if I put it in the wrong place,
the button won't look like how I want it to look.
fig 1.4 Making the home section, week 10 (29.6.2024)
Here is what I have with me so far. The home screen looks almost the
same as my original design.
fig 1.5 Progress photo 1 on my resume web, week 10 (29,6,2024)
This part is done, but the bottom parts are still messed up. I have only
roughly copied the content and structure for the section, but I haven't
make proper placement yet.
fig 1.6 Progress photo 2 on my resume web, week 10 (29.6.2024)
The photo still has that gap on the left side, and the text is still
on the top area. I also need to give this part some background color
according to the original design.
After about an hour of tweaking, I finally managed to do what is close
to the original design.
fig 1.7 Progress photo 3 on my resume web, week 10
(29.6.2024)
I then continued to add assets and tried to adjust the placement.
But for some reason it looks something like this:
fig 1.8 Progress photo 4 on my resume web, week 10
(29.6.2024)
It took me another few hours with the help of chatgpt, a friend,
and even coding sites and videos to finish the layout properly,
and it's not even the responsive one yet.
You can notice that I changed the look of the skill sets, because
I'm not sure how to efficiently show the skill sets using the bar
(I meant the coding part lol). So I used a bar template that I
found on the internet to replace it. The original color was actually lots of different bright colors, which is just not suitable for my design, so I changed them to a single color.
fig 1.9 New bar look for the skill sets, personality, and
languages section, week 10 (29.6.2024)
After hours of trying to figure things out with my friend, I
finally managed to pull out somewhat of a satisfying result.
fig 1.10 Adding the rest of the content to the resume, week 10 (29.6.2024)
Footer
fig 1.11 Adding the footer, week 10 (29.6.2024)
It was a happy moment when I finally managed to "safely" add all the content until I realized I somehow messed up
the top part of the resume again. I realized it might be
because I hard coded some of the essential elements, which
then I use into different section.
So with all the knowledge I gained from all that brain
fumes working on the web, I tried to redo the WHOLE upper
part of the web that makes everything messy :/ . I avoided to
directly edit the elements itself, and instead edit the
class that the object was in.
I also removed the "Contact Me" section because there is
no section in the page to link it into. Instead.
throughout the page there are multiple buttons to link
into my socials where they can directly contact me.
fig 1.12 Tidying up my codes, week 10
(29.6.2024)
I also managed to put a button where the viewer can download my resume, which is pretty cool. I initially inserted the file and saved, but it keeps on saying that the file is not available on site.
I closed the file and reopened it after I tidied up my files on my computer, and apparently it got reset to the initial wrong link. I reinput everything that I know about method, saved it, and checked in chrome, and it worked :/ So I think it's just an input error? But at least it works now lol.
fig 1.13 Making a button to download my pdf resume file, week 10 (29.6.2024)
I thought I will need to work on the responsiveness later, but then Mr Shamsul told us that for this project it is okay to not be responsive, but it is compulsory to have it be responsive for the final project. It's a relieve, and I'll put the headache and trouble of attempting that for another time when I'm working on my final project later.
Final Result
Netlify link: https://vanessak-resume.netlify.app/
fig 1.14 Final Look for my Resume, week 10 (29.6.2024)
FEEDBACK
(there isn't much feedback because most of class time is used for tutorials, and other times it was public holiday)
Week 11
- For project 2 it is okay to not make it responsive, but for the
final project it is compulsory to make it responsive. You just
need to override the codes for the phone version.
REFLECTION
Experience
I know that I didn't really have any interest in doing coding and this module has been proving my statement. Figuring out how to remove errors, reading and adding a bunch of codes, combined to having to beautify them all is a challenge to keep myself motivated.
When I just started adding the codes and forcefully adding the modification and placement in CSS, everything just kept on moving around when I change something. My head was hurting from all the thinking and my mood has never been so low for the last few months.
But after having some help from my friend and tidying up my codes, it makes it so much easier to tidy up everything. Compared to my first experience, at this point the process was so much more enjoyable and I was able to constantly progress through the work without meddling back and forth with placement issue.
The overall experience wasn't too bad. At this point I don't have too much of a hatred towards coding, but it also didn't really improve my
Observation
We don't really show other's work in this class, thus I can't really compare my learning process with my friends. But I think everyone has been working hard to keep up with the class and that's why I'm also trying my absolute best not to fall behind.
Findings
Through this project I found out the better way to code to make all the modifications easier, and I've also kinda gotten used to the way Dreamweaver works. Even in blogger I keep on unconsciously saving with ctrl+s instead of updating the blog, which is a bit funny.
I also found out a lot of things and methods that weren't really taught in the class in order to give variations to my web.
Comments
Post a Comment