Interactive Design / Project 2

29.05.2024 - 29.06.2024 (Week 6 - Week 10)

Tan Sin Mi (0368821)

Interactive Design

Project 2

CONTENT
  1. Instructions
  2. Project 2 - Working Web Page
  3. Reflection
INSTRUCTIONS
 
PROJECT 2 - WORKING WEB PAGE
Objective:
In this first part of the assignment, you will focus on creating a UI design prototype for your digital resume or curriculum vitae (CV) using prototyping software such as Adobe XD or Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions of your digital resume.

Objective:

This assignment aims to create a fully functional and interactive web page based on our Project 1 static prototype. Using the skills we learned in web layout class, we will produce a functional website that closely resembles our initial prototype. 

  • Review our static prototype from Project 1 and analyse its layout, typography, colour scheme, and imagery.
  • Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
  • Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
  • Upload the file in Netlify, update e-portfolio with all the processes documented in the blog, and submit the link as a submission.

Process:
First, I have refer to my layout of project 1 design.

Figure 1 Figma Outcome.pdf

Then, I start the coding of my resume design by using Adobe Dreamweaver.

First, I opened a new html file first, and I have code out all of the content of my resume. I separate the content in two class so that I could adjust it to two column just as my design from figma.
Figure 2 HTML Code

After done all the code of html, I started on the CSS code. I first add a new CSS file for this html code. Then I started to code the style one by one of every section.
Figure 3 CSS Code
Final Outcome:


Figure 4 Webpage Outcome

REFLECTION

Comments

Post a Comment

Popular posts from this blog

Advanced Typography / Task 2

Image
22.05.2024 - 21.06.2024 (Week 5 - Week 9) Tan Sin Mi (0368821) Advanced Typography Task 2 CONTENT Instructions Lectures Task 2A - Key Artwork Task 2B - Collateral Feedback Reflection Further Reading INSTRUCTIONS   LECTURES Week 5: Lecture 5- Perception & Organization Perception 1. Definition Perception is how something is regarded, understood, or interpreted. In typography, it involves visual navigation and interpretation via contrast, form, and organization of content. 2. Focus Typography deals with how textual, visual, graphical, and color elements are perceived and understood. Contrast 1. Size Large elements draw attention first, such as a big letter standing out against smaller letters. Commonly used to make titles or headings more prominent than body text. 2. Weight Bold type can stand out amidst lighter type of the same style. Other met...
Read more

Advanced Typography / Task 3

Image
21.06.2024 - 23.07.2024 (Week 9 - Week 14) Tan Sin Mi (0368821) Advanced Typography Task 3 CONTENT Instructions Task 3 - Type Exploration & Application Feedback Reflection Further Reading INSTRUCTIONS TASK 3 - TYPE EXPLORATION & APPLICATION  In this task, we are required to create or improve a font that addresses a problem or adds value in graphic design, animation, new media, or entertainment design. In last, we need to use the font we created to applying and presenting. This task can take one of three forms: Creating a new font Improving an existing font Experimenting Proposal: Figure 1.1 Proposal PPT Sketches: Figure 2.1 Letterforms Sketches First Version Digitized Letterforms: ...
Read more

Advanced Typography / Final Compilation & Reflection

Image
22.04.2024 - 23.07.2024 (Week 1 - Week 14) Tan Sin Mi (0368821) Advanced Typography  Final Compilation & Reflection INSTRUCTIONS Task 1:  Typographic System & Type and Play Task 2:  Key Artwork & Collateral Task 3:  Type Exploration & Application SUBMISSIONS TASK 1 | Exercise 1: Typographic System 24.04.2024 – 15.05.2024 | Week 1 – Week 4 Figure 1.1 Final: Axial (08/05/2024) Figure 1.2 Final: Radial (08/05/2024) Figure 1.3 Final: Dilatational (08/05/2024) Figure 1.4 Final: Random (08/05/2024) Figure 1.5 Final: Grid (08/05/2024) Figure 1.6 Final: Modular (08/05/2024) Figure 1.7 Final: Transitional (08/05/2024) Figure 1.1 Final: Bilate (08/05/2024) Figure 1.9 Final Typographic System.pdf (08/05/2024) Figure 1.10 Final  Typographic System with grids.pdf  ...
Read more