Interactive Design | Project 2

Jun 2024 - Jun 2024 | (Week 7 - Week  )
Chan Xiang Lam | 0358400 
Interactive Design | Bachelor of Design (Honours) in Creative Media 
Project 2 | Working Web Page
Table Content
    
    1. Instructions
    2. Project 2 | Working Web Page
        - Progress
        - Final Outcome
        

  Instructions 

Project 2

Part 2 ｜Final Design - Creating a Digital Resume/CV

Objective:
Transform your static prototype from Project 1 into a fully functional, interactive, and responsive web page.

Requirements:
  1. Analyze Prototype: Review layout, typography, color scheme, and imagery.
  2. Develop with HTML/CSS: Create a pixel-perfect web page matching the prototype.
  3. Ensure Responsiveness: Make the design compatible across different devices and screen sizes.
  4. Deploy on Netlify: Upload the web page to Netlify.
  5. Document Process: Update your e-portfolio with detailed documentation and a blog post summarizing the project.

Progress 

I began by analyzing the layout, typography, color scheme, and icon usage from the Project 1 static prototype. This step was crucial to identify the structure and grouping of elements to replicate in HTML and CSS.

Fig.1.1 studying the layout

I created the project folder structure, including "index.html", "style.css", and an images/ directory for storing images and icons. All necessary images, such as the profile picture and icons, were saved in the images directory to ensure easy access during development.

Fig.1.2 project folder

Fig.1.3 image&icons


The "About Me" section was styled with appropriate fonts and spacing, making the text readable and visually pleasing. The "Education" section was structured and styled using timeline for each education entry. The "Experience" section was formatted to ensure a clear hierarchy and readability of job roles and responsibilities. 

Fig.1.4 progress#1

The "Skills" and "Personal Skills" sections were styled with bullet points for clarity and ease of reading.

Fig.1.5 progress#2

Fig.1.6 progress#3

Fig.1.7 progress#4
 
Final Outcome

Final Digital Resume Link: Netliyf link





Comments

Post a Comment

Popular posts from this blog

Typography | Task 1: Exercises 1 & 2

Image
25 Sept 2023 - 23 Oct 2023 | (Week 1 - Week 5) Chan Xiang Lam | 0358400  Typography | Bachelor of Design (Honours) in Creative Media  Task 1 | Exercises 1 (Type Expression ) & Exercises 2 ( Text Formatting) TABLE OF CONTENTS     1.  Lectures     2.   Instructions     3.   Exercises         - Task 1| Exercises 1          -  Task 1| Exercises 2      4. Feedbacks     5.  R eflections     6.  Further Reading      LECTURES Lecture 1 | Briefing / Introduction  1.1 What is Typography? - Typography can be defined as the art of creating letterforms, involving elements like letter construction, grid usage and classic proportions. It is use to designs the shape of letters that you see in printed or digital media. Therefore, typography involves the creation of typefaces or type families.     1.2  Type History 1. Early Evolution of Roman Letters 1 Early evolution of roman
Read more

Digital Photography and Imaging | Project 1

Image
  5 Oct 2023 - 25 Oct 2023 | (Week 2 - Week 4) Chan Xiang Lam | 0358400  Digital Photography and Imaging  | Bachelor of Design (Honours) in Creative Media  Project 1 | Part 1 (Digital Collage) & Part 2 (Digital Imaging) JUMPLINKS            1. Lectures      2. Instructions      3. Practical      4. Project 1          - Part 1 | Digital Collage          - Part 2 | Digital Imaging LECTURES Week 1 | Introduction to Digital Photography & Imaging   Week 2 | Introduction to Photoshop Week 3 | Imaging Exercise 01  Week 4 | Blending Mode top^ INSTRUCTIONS top^ PRACTICAL Week 2 We have been i
Read more

Typography | Task 2: Typographic Exploration & Communication

Image
30 Oct 2023 -  6 Nov 2023 | (Week 6 - Week 7) Chan Xiang Lam | 0358400  Typography | Bachelor of Design (Honours) in Creative Media  Task 2 | Typographic Exploration & Communication (Text Formatting and Expression) TABLE OF CONTENTS      1. Lectures      2.   Instructions      3.   Exercises          -   Task 2| Text Formatting & Expression      4.     Feedbacks      5.     Reflections      6.    Further Reading LECTURES  All lectures 1 to 7 completed in   Task 1 INSTRUCTIONS  top^ EXERCISES Task 2| Text Formatting and Expression For this  task , we were required to select one of the three provided texts and express its content typographically. In this task we will need to design a two page editoria
Read more