Yap Guang You/0363730
Interactive Design/Bachelor of Design(Hons)in Creative Media
Project 2/Working Web Page
Content
Lecture
Week08/Independent learning week
This week was independent learning week, I found some tutorial videos on YouTube, to learn more about HTML and CSS languages, and it does help a lot in my project.
Week09/Final project briefing
Mr. Shamsul briefed us on our final project, in this exciting web design project, I am tasked with crafting a single-page website that celebrates my absolute favorite artist. This endeavor promises to be an excellent opportunity for me to nurture and enhance my web design and development abilities. Mr. Shamsul gave us some advice on the progression, he provided a timeline for us from start to submission. Last, he showed us some composition skills that we can use in our coding for Project 2 and the final project. Then he gave us some feedback on our latest project 2 progressions, and then he showed us some skills to let our resume look more decent.
 |
| Example_Artist web page |
Instructions
<iframe src="https://drive.google.com/file/d/1WDr6LjbPz7rzqeuoLSDc2fPzvQnd0KSu/preview" width="640" height="480" allow="autoplay"></iframe>
My goal for this assignment is to turn my static prototype from Project 1 into an engaging and fully functional web page. I will utilize my understanding of web layout classes to craft a website that closely mirrors my original prototype.
Visual Reference
The prototype of my resume is quite simple in content, so I decided to make some changes to it.
|
| Project 1 Prototype Design |
Progressions
I use Adobe Dreamweaver to do my project, the languages I use are HTML for basic web development and CSS for decoration. I just typed the content of my resume, it has a few parts, bio, education, experience, skills, languages, etc. I separate them into the head, left, and right, and the specific section for each content, so it will be a bit convenient when I am decorating the web with CSS language.
|
| Progression_1 |
After typing the information, I decided to add the icon for the skills section., and then add some new content to it, I decided to show the details of my experience and add some communication skills showcase into my resume.
|
|
Progression_2 |
|
|
Progression_3 |
|
| Progression_4 |
After decorating the web, I started adjusting to let my web fit with the devices like smartphones and tablets. I use the web development tool in Microsoft Edge to simulate the view of these devices and also, I use my own device which is the Samsung S22 so I can have a clearer mindset for the adjustment.
|
|
Progression_5 |
After making some adjustments I will be considering about the submission, I upload my file to Netlifly.
Submission
Link submission: https://yaguangyou-project2.netlify.app/
|
| Project 2_Final Submission.Jpeg |
Project 2_Final Submission.Pdf
|
| Project 2_Final Submission Phone View.Jpeg |
Project 2_Final Submission Phone View.Pdf
Project 2_Final Submission.HTML Code
Project 2_Final Submission.CSS Code
Reflection
In this project, I found that the color using is a very important part of the web design, it can help user read more easily. To let the web page fit into any device, it better start in the beginning when we develop a web page, if not it will be a big issue in the end of the progression. Organizing our code nicely is a big part of the progression it will have a big positive impact during our work, especially when it comes to the adjustment and decoration.
No comments:
Post a Comment