Interactive Design - Project 1

18/9/2023 - 2/10/2023 (Week 4 - Week 6)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Interactive Design)
Project 1 - Prototype Design

---

LECTURES

WEEK 4 - 18/9/2023

In week 4, we had a lecture about interactive designs web standards. Mr. Shamsul then gave us a tutorial on how to code. After learning about it, we were given an exercise to code a website for our own profile as homework.

In Class Exercise: file:///C:/Users/User/Desktop/interactive%20design%20coding/index.html

Personal Profile Webpage Exercise (Homework): https://katelyntankyeling.netlify.app/

WEEK 5 - 25/9/2023

In week 5, we learnt about CSS like how to add different fonts, colour, background, etc. We were also introduced to Adobe Dreamweaver and Mr. Shamsul showed us step by step on how to use it and code.

WEEK 6 - 2/10/2023

Class cancelled. Class cancelled. However, Mr. Shamsul did give us an exercise to complete along with the recorded lecture and tutorial video.

---

INSTRUCTIONS

PROJECT 1 - PROTOTYPE DESIGN

In this first part of the assignment, you will focus on creating a UI design prototype for your digital resume or curriculum vitae (CV). The UI design prototype will showcase the layout, visual elements, and user interface interactions of your digital resume. Firstly, we had to hand draw 5 sketches of our own digital resume, either on paper or an IPad. Then move onto Figma or Adobe XD to do our resume.

Reference/Moodboard:

Fig. Moodboard

Sketch:

Fig. 1.1 Sketch #1

Fig. 1.2 Sketch #2

Fig. 1.3 Sketch #3

Fig. 1.4 Sketch #4

Fig. 1.5 Sketch #5

Process:

I liked the top introduction part of sketch #5 and liked the content design from sketch #1 therefore I combined both of them together. I added a project area which wasn't in my sketches initially, I also added lines to separate each section and make it seem neater.

Fig. Sketch #1 + Sketch #5

For the head of the resume, I made it a "bubbly" and welcoming style which was the whole vibe I was going for. I included a little preview of me to allow others to get to know me better. As said previously, the head of the resume was taken from Sketch #5.

Fig. Head of Resume

For the education section, I made it like a timeline showing from my secondary education to my current tertiary education.

Fig. Education Section

For the skills, hobbies and contact section, I used the iconfinder website to search for all of them which was really convenient. 

Fig. Skills & Hobbies Section

Fig. Contact Section

Fig. ICONFINDER

I only added the projects section midway because I thought that my resume was lacking some information and I wanted to show more about myself. Therefore, I played around and fitted this section in my resume.

Fig. Projects Section

The work experience section included from which month/year I started the job till the day I left.

Fig. Work Experience Section

As shown in the pictures of the sections of the resume, I was going for a pastel theme which is very like me, because those are the colours I usually like to wear and I am also a very bright person. I felt that the resume was very bland, therefore I added some decorations around it. And to make my work more neat, I used the column function taught by Mr. Shamsul.

Fig. Digital Resume With Grid

Final Digital Resume:

Link: https://www.figma.com/file/83yxn5YGQQgEJ78qD57OC5/DIGITAL-RESUME?type=design&node-id=0%3A1&mode=design&t=Go962ckTxnGMiCe2-1

Fig. 1.6 Embedded from Figma

Fig. 1.7 Final Digital Resume (JPEG)

Fig. 1.8 Final Digital Resume (PDF)

---

REFLECTION

Experience

I personally really enjoyed this assignment as it allowed me to show my personality through my work. It allowed me to share about myself through colours and icons/pictures. Though I struggled to use Figma at first, I slowly started to get used to it.

Observation

I noticed that colour coordination is really important, i took some time to choose the background colour because if it was too light, it'll look too plain and if it's too dark it'll affect the text colour. The font and its size also plays an extremely important role, different fonts and the size of it show the importance of the content.

Findings

I find that when I look at samples of digital resume on Pinterest, it really isn't that easy to create a resume. A lot of thought and effort is put into creating one. From sketching, to planning different sections and to deciding where to place each section so everything fits in place. Therefore now I admire small 1 page designs more as I know how much effort and time is required.