Interactive Design - Project 2: Working Web Page

 16.10.2023 - 22.10.2023 / Week 8

Nie Weiqiu / 0360239 / BA of Design (HONS) in Creative Media
Interactive Design
Project 2 
INDEX:

1. Project 2
2. Feedbacks
3. Reflection

Project 2: Work Page

In the second part of the assignment, we had to develop the final visual design of a digital resume or curriculum vitae (CV), based on the UI design prototype created in part 1.

The goal is to turn the static prototype from Project 1 into a fully functional interactive web page. We will apply our knowledge of web layout classes to create a working website that closely integrates with our original prototype. We need to convert design elements into code using HTML and CSS.

I checked the layout and typography of the prototype web page from Project 1.


I first wrote the HTML code in Adobe Dreamweaver.


After writing the HTML code, I started writing CSS code to style the web page.


Complete HTML



Complete css


I set PROJECTS to be interactive, click on the link, and you can see what I have done before.



Comparison between project one and project two


Final Working Web Page

 Netlify:  https://nieweiqiu-project2.netlify.app/


This week the teacher showed us other people’s works and asked us to continue to improve and make a mobile version.

But when it opens, we need to shrink it.


So later I made a second version.

Computer turns on

Turn on the phone

Final Working Web Page:https://nieweiqiu-task2.netlify.app/.

feedback

add padding

Reflections

I was afraid to start this project because of my limited experience with HTML and CSS. Although I gained basic coding skills from my previous projects and exercises, I still felt like my knowledge was too limited to create an actual complete web page like this. However, in hindsight I realise that the hardest part was actually starting it, and by thinking through each small part individually instead of the whole web page, the task became much less daunting. Initially I had to refer to coding tutorials for every little thing, but as time went on, I started figuring out solutions myself using the knowledge I had already gained, and the end result was quite similar to my prototype. There were some parts of my prototype that I could not transfer to my code because of its complexity, but other than that, I feel like I did a fairly good job at one of my first ever web pages




Comments

Post a Comment

Popular posts from this blog

Immersive Visual Effects

Image
23.9.2024 - 14.10.2024 (Week 1 - Week 4) NIE WEIQIU/ 0360239 / Bachelor of Design (Hons) in Creative Media / Taylor's University Immersive Visual Effects Task 1 / Pre-production INSTRUCTIONS Fig. 1. Module Information Booklet Pre-production According to the teacher's further explanation, I roughly understood it, so I wrote three ideas PPT introduction After receiving feedback, I finally thought the idea of ​​forest was good, so I continued to use the idea of ​​forest. Final Thoughts Week 2 Exercise: 3D Camera For this exercise, we just had to learn how to use and experiment with using the 3D camera feature. We were given an After Effects file and we had to use it as a template and animate it.  https://youtu.be/eKh4FhTSVNk Project 2 Introduction: Produce 3D block-out pre-visualization. • Produce 3D elements and effects block-out • Composition nesting and layer breakdowns • Timing and transition confirmation • Style frame for final look and feel • Composition ready renderin...
Read more

Design Research Dissertation

Week 1 - Week  NIE WEIQIU / 0373215 Design Research Dissertation  Bachelor of Design (Honours) in Creative Media / Taylor's University INSTRUCTIONS Final Submission Task 1: Dissertation draft Task 2: Visual Design Publication Task 3: Final Dissertation and Turnitin Submission Turnitin Submission Final Dissertation KREATE google drive FEEDBACK Weekly Progress Reflection Sheet.docx REFLECTION Throughout this module, I went through three key stages: drafting the research paper, designing the visual publication, and submitting the final paper. In the initial phase, I reviewed a wide range of literature, gradually clarifying my research topic and objectives, while also learning the fundamental methods and structure of academic writing. During the visual publication stage, I worked on transforming academic content into a visually engaging publication. This not only deepened my understanding of layout design but also enhanced my ability to organize and present information effectively...
Read more

Information Design - Exercise

Image
  6.2.2024 -  / Week 1 - Week  Nie Wei Qiu / 0360239 / BA of Design (HONS) in Creative Media Information Design Exercises 1 - 2 LECTURES Week 1 / 6.2.2024 In the first week, the teacher introduced us to the entire module, and also introduced us to exercises, electronic portfolios and projects.  We have to prepare a presentation on our first week with our group too, one of the first topics we have to prepare is to find out the different types of infographics and we are going to use a free online infographic tool to reframe a poorly structured piece of information  infographic poster. Group Task (FLIP Presentation) FLIP 1: Types Of Infographics Individual Task (Re-design Infographic Poster) I started by doing some research on infographic posters on Pinterest. I found a few posters and analyzed them.I found a poster that I thought was problematic and reworked it Infographic Poster from Pinterest I think its structure is a little too crowded and I want to chang...
Read more