Interactive Design - Project 2: Working Web Page

16.10.2023 - 24.10.2023 / Week 8 - Week 9
Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media
Interactive Design
Project 2 
INDEX:

1. Project 2
2. Feedbacks
3. Reflection

LECTURES

All lectures are recorded in Interactive Design - Exercises.

PROJECT 2: WORKING WEB PAGE  

In this second part of the assignment, we have to build upon the UI design prototype created in Part 1 to develop the final visual design of our digital resume or curriculum vitae (CV). We'll focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

The objective of this assignment is to transform our static prototype from Project 1 into a fully functional and interactive web page. We will apply the knowledge of web layout class to create a working website that closely aligns with our original prototype. We need to use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.

Before working on the web page, I reviewed my prototype web page in Project 1 regarding the layout and typography. My prototype has two columns and two rows. 

Prototype

I started with writing HTML codes in Adobe Dreamweaver and distributed each section with different <div> and class attributes. 

After writing the HTML codes, I started writing the CSS codes to style the web page. I followed what we did in the classes, I style the sections from left to right, top to bottom. I found a font that is similar to my prototype on Google Font. I also search for the way to mask the image to circle and tried it on my image as what I did in the prototype. 



I first styled the sections into left and right, top and bottom, and then I changed the typeface. Next, I added the background colours, but I faced difficulties because the text on the top is not aligned together with the text bottom, and the background colours were not aligned together. I amended the gap of the columns so that they were aligned perfectly. It was a little bit different from my prototype design, which the name and other sections are in two boxes respectively with margin from the top and right. 


First Draft of Working Web Page According to Prototype Design

After I reviewed on the webpage, I tried seperating the 2 backgrounds and see the result. I think the second draft is better than the first draft. 

Second Draft of Working Web Page

After that, I also added the codes for different sizes. This does not really work perfectly especially the second row ([.row] section) but I am not sure about the reason. So, I rechecked all the codes and search for the solutions. 




I found out the problem and changed and added the CSS codes including display, white space, flex wrap, line height to solve the problem such as the text overflowed in different media with smaller size, some part of the text is hidden in smaller screen size. I rewrite the CSS codes for a few parts and eventually, I am able to solve the problems that I faced using the codes stated earlier. I also added the title for the link under the section of 'Project'.


Final Working Web Page

I uploaded the web page to Netlify. Link: https://project2-chanwanqing.netlify.app/

FEEDBACKS

Add padding. Add box-sizing to avoid other elements to collapse.

REFLECTION

The project of creating a working web page using HTML and CSS has been a fulfilling and educational project. This hands-on experience has deepened my understanding of web development and design. I have learned to structure web content using HTML, emphasizing the importance of proper semantic tags so that I am able to style them according to the class attributes. Additionally, CSS has allowed me to style and layout the webpage, giving it a visually appealing and user-friendly design. The project has highlighted the significance of responsive design, ensuring that the webpage functions seamlessly across various devices and screen sizes. It was challenging to style them in different screen sizes as I could not recognise the problems and I could not style in like what I had in my mind. However, debugging and troubleshooting issues that arose during the development process improved my problem-solving skills. 

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 1: Exercises

Image
30.8.2023 - 13.9.2023 / Week 1 - Week 3 Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media Typography  Task 1 (Exercises) INDEX: 1. Lectures 2. Task 1 / Exercises     Exercise 1 - Typographic Systems     Exercise 2 - Type & Play 3. Feedbacks 4. Reflection 5. Further Readings LECTURES AdTypo_1_Typographic Systems Typographic systems provide a sense of purpose that focuses and directs the decision-making. Additional criteria like hierarchy, order of reading, legibility, and contrast are also to be considered.  Shape grammar: A set of set rules that apply in a step-by-step way to generate a set, or language, of designs. 8 major variations of typographic systems: Axial System - All elements are organised to the left or right of a single axis   Fig.1.1 Axial System Radial System - All elements are extended from a focal point  Fig.1.2 Radial System Dila
Read more

Interactive Design - Exercises

Image
28.8.2023 -  / Week 1 - Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media Interactive Design Exercises 1 - 4 INDEX:  1. Lectures 2. Exercises      Exercise 1 - Web Analysis      Exercise 2 - Replicating Website     Exercise 3 -  HTML and CSS Document Development 3. Feedbacks 4. Reflection LECTURES Week 1 / 28.8.2023  In week 1, we were briefed about this module and our assignments throughout the whole semester. Our first task is to do a web analysis on 2 websites based different aspects.  Week 2 / 4.9.2023 In the second week, we learned about the topic of "Usability: Designing Products for User Satisfaction." We were introduced about usability, which means how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.  The key principles of usability include consistency
Read more

Video and Sound Production - Project 2

Image
19.9.2023 -  29.10.2023 / Week 4 - Week 9 Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media  Video and Sound Production Project 2  INDEX: 1. Project 2     Production shoot      Instagram/TikTok Video Treatment 2. Reflection   LECTURES All lectures and exercises are recorded in Video and Sound Project - Project 1 PROJECT 2 PRODUCTION SHOOT In this project, we are going to shoot as a group and edit individually. We are divided into 2 teams, team B and team S. Team B is going to shoot according to the Netflix series, "Beef"; while team S is going shoot according to the Japanese drama named "Silent". This assignment aims to explore students to production shooting and editing environment. I am in team B. We are provided with the storyboard, which include the shots we need to shoot as a group. We divided our roles in the class.  Crew List My role is assistant art director, we need to find the
Read more