Interactive Design - Project 2: Working Web Page

 Interactive Design - Project 2: Working Web Page

October 22. 2023

16.10.2023 - 22.10.2023 / Week 8
Xing Yu / 0361463 / BA of Design (HONS) in Creative Media
Interactive Design
Project 2 

---

PROJECT 2: WORKING WEB PAGE  

In the second phase of the task, we need to work on the UI design based on the prototype created in the first phase to make the final visual design of our digital resume. This step will delve into the details of the user interface, including colors, fonts, ICONS, and typography, to ensure a great user experience. In addition, we need to use HTML and CSS to translate these design elements into actual web code, thus turning the digital resume into an actual accessible online page. This process will require us to translate design concepts into actual interactive user interfaces, ensuring that the final product is both beautiful and functional.

This is my resume design prototype.

Prototype

Open Dreamweaver and create a new web project.

Create an HTML file named "index.html" and a CSS file named "style.css" in the project folder.

In the "index.html" file, write the HTML structure, including the title, header, content section, and so on

And this is my process.

process

 

process 2

Then I uploaded the website I made with Dreamweaver to Netlify.

Netlify

Final Working Web Page

Link: https://heartfelt-halva-01846c.netlify.app/

---

REFLECTION

Creating static web pages with Dreamweaver's HTML and CSS is easy and intuitive, and its visual editing tools and code editing capabilities allow me to quickly create a professional-looking web page. The real-time preview and adjustment of CSS styles helped me make sure the page looked the way I wanted it to. Dreamweaver's file management and automatic code prompts also make the whole process more efficient.