Interactive Design Project 1 / Prototype Design

18 Sep 2023 - 2 Oct 2023 / Week 4 - Week 7

Leem Sejin / 0362419

Interactive Design / Bachelor of Design (Honour) in Creative Media
Project 1 - Prototype Design

---

LECTURE

Refer to Exercise

---

INSTRUCTION

>

<iframe src="https://drive.google.com/file/d/1Zox9a8xcIHU_u9RH3dAo0nFTMqSvedj1/preview" width="640" height="480" allow="autoplay"></iframe>

Week 5

For Project 1, we are tasked to create resume website. Before we start, we have to do some research how do people create their resume, and draft at least 5 designs. 

Fig 1.1 Reference board

Based on the references, I draw rough sketches. I want to divide the resume into 8 sections based on the understanding of model resumes :

• About me
• Contact
• Education
• Work Experience
• Projects
• Skills
• Language

Fig 1.2 Rough sketches

We can use either figma or Adobe XD to create the prototype. I decided to use Adobe XD but could not decide which layout to create the prototype. Thus, I choose to do all 5 layouts.

Through the research, the recommended font size for resume is 10-12 pt for normal text, and 16-18pt for section titles. Also, the preferred fonts are Arial, Helvetica, Verdana, Times New Roman, Garamond, Georgia, Calibri, Cambria.

For my resume, I choose Helvetica & colour script ; blue

Fig 1.3 First draft

I start off with the common layouts in the resume. I find that the most important contents are introduction, work experience, projects and skills , thus, I put the information in the larger space.

Also, I explored the shape of the left box.

Fig 1.4 Contact details

I created two versions for contact section, unsure whether the icons are necessary. After comparing Ver 1 and Ver 2, I decided to add the icons next to the contact info. It attracts attention to the contact, easily analyse the information.

Fig 1.5 Second Draft

Fig 1.5 Skill section exploration

Fig 1.6 Draft resume

I find that the overall draft is too simplistic, so i decided to explore furthermore.While drafting the ideas, I come out with the idea, referencing the Korea MRT map.This idea is about guiding the viewers' attention according to the map.

Fig 1.7 Idea Sketch

For title sections, I can create them as platform sign board.

Fig 1.8 Title design

Under the Skill section, I just placed the icons of the softwares. However, I find that many resumes contains the percentage bar, to indicate their level of handling the softwares. Also, I find that it is easier to state the name of softwares for easier visualisation and indication.

 

Fig 1.9 Exploration

Resume Prototype

Fig 1.10 Project 1 Prototype jpg

---

REFLECTION

I explored different sample resume from the internet and figure out what is the important information to listed in the middle of the website. I took a long time to figure out how to make my resume interesting, and also think whether I can build in html code in project 2.