Interactive Design | Project 1
Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative
Media
GCD61004 Advanced Typography
Week 4 — Week 6
It's digital resume prototype time!
Upon being given opportunities to experience coding for website design such as HTML and CSS, here comes the first assignment that will put our knowledge to the test.
These are the jump links to each part of this portfolio
Lecture summary
Week 5
ID and Class attributeID attribute
-Every HTML element can carry the ID attribute
-It is used to uniquely identify the element from other elements on the page
-It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
-Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page.
-Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page.
Class attribute
- Every HTML element can also carry a class attribute.
Block elements
Example: <h1>, <p>, <ul> and <li>
Inline elements
Example; <b>, <i>, <em>, <a> and <img>
Instructions
Mr Shamsul Hamimi, my module coordinator and lecturer for this semester, provided us with the necessary files including the module information, and reading elements to give us a headstart on this module.
MIB - Module Information Booklet
Part 1 Prototype Design - Digital Resume/CV
The objective of this assignment is to focus on creating a UI design prototype for our 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 our digital resume.
Deadline: Week 6
Requirements:
Assignment page with a clear and concise headline that describes the purpose of the website. The document page size width is 1366 pixels.
Learning goals:
This module helps in improving technical and digital media competencies and strategic communication competencies.
Work Process
The Curriculum Vitae (CV) design
With Figma
With Figma
In my design, I planned to infuse a portfolio design style into my digital resume by adding a sticky header with a navigation button to different sections of my resume.
Several text buttons are added in the header to allow viewers to navigate to different parts of my CV.
Several text buttons are added in the header to allow viewers to navigate to different parts of my CV.
 |
| Header design with text button layout |
To facilitate an introduction to the viewers', I first include a hero section for the page to briefly describe what a person I am.
The necessary introduction information is placed in an orderly manner and follows the hierarchy principles to direct the attention from my name to the career I'm interested in and experienced in.
A placeholder for my selfie is positioned on the right side with suitable spacings for breathability while maintaining visual balance.
The reason I want to include the project galleries first before the other information is also to communicate what potential I have to the viewers, and best to showcase my works to others.
The necessary introduction information is placed in an orderly manner and follows the hierarchy principles to direct the attention from my name to the career I'm interested in and experienced in.
A placeholder for my selfie is positioned on the right side with suitable spacings for breathability while maintaining visual balance.
 |
| Hero section of the page |
The reason I want to include the project galleries first before the other information is also to communicate what potential I have to the viewers, and best to showcase my works to others.
 |
| Project Gallery |
Here is the main part of the resume page
In this section, I've included essential content such as my designer profile, my formal education, work experience, past projects, skills and my contact for those interested in getting in touch with me.
For easier comprehension, I've divided different content into individual element groups for those who wish to learn more about me.
 |
| Resume section |
Typography
I've chosen Helvetica (Sans serif) as my main font for two reasons:
- I pursue the modernist design style.
- Helvetica is a web-safe font.
Colour Palette
The colour palette of the website is #222C4F, #D9D9D9 and #7886FF. The combination of dark shades and medium light shades of blue, and a bit of medium light grey to form a contrast in the design.
Imagery
Only a minimal amount of images are used for this digital resume, with only my selfies, my project images, icons and a bit of decoration in this design for a minimalist feel.The reason for using the small chain-like design in the design is to simulate how each section is linked together, at the same time providing some functions of guiding the reading flow downwards.
 |
| Adding symbolic icons to the sections |
Linking of buttons on sticky headers to individual sections
I linked individual text buttons on the header to the CV sections to allow viewers to quickly access different parts of the resume.
 |
| Buttons linking |
Prototype CV design (Subject to changes)
 |
| Prototype CV design — 25/5/2024 |
After reviewing other's works, I'm not satisfied with the arrangement of the previous CV design. Hence, I added more graphic elements and made some changes to the elements' alignment.
Access the prototype with the buttons below (Figma account login required)
Visit my digital resume website
Or interact with my design here:
Or interact with my design here:
Lecturer's Feedback
Until now, there have been no active feedback sessions from Mr Shamsul. I will be deleting this section soon.
My reflections
CV Prototype Design
In this assignment, I'm glad to have the chance to learn more about how to use Figma to prototype my website design before I move on to the coding sessions and finalize the whole website.
Because of this assignment, I'm able to learn the basic controls in Figma, which this experience will prove to be useful in the near future.
Because of this assignment, I'm able to learn the basic controls in Figma, which this experience will prove to be useful in the near future.
Comments
Post a Comment