INTERACTIVE DESIGN TASK 1: PROTOTYPE DESIGN

15.05.2024 - 29.05.2024  / Week 4 - Week 6

Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media 

Interactive Design / GCD60904 / Section 04

Task 1: Prototype design—Digital Resume/CV

TABLE OF CONTENTS

1. LECTURES

2. INSTRUCTIONS

3. TASKS

4. FEEDBACK 

5. REFLECTION

6. FURTHER READING

LECTURES


Week 4- LECTURE 


Fig 1.1 Web Standards Lecture

Week 5- LECTURE 


Fig 1.2 HTML & CSS Lecture


INSTRUCTIONS

submission- eportfolio

proj 1(requirements): 

-wireframing(few sketches) , 5-10

-moodboard


TASKS

PROTOTYPE DESIGN PART 1: DIGITAL RESUME/CV

Duration: 2 weeks

Objective: 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.

Requirements:

1. Content and Structure:
Prepare the content for your resume, including personal details, education, work experience, skills, projects, etc. Decide on the order and hierarchy of sections based on their importance and relevance.

2. Layout and Visual Design:
Design the layout of your digital resume using the chosen prototyping software. Define the placement of different sections and how they will flow together. Apply a consistent visual design using typography, color palette, and appropriate spacing.

3. Sections and Organization:
Organize your resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact." Prioritize sections based on their relevance and significance to the position you're targeting

4. Visual Elements:
Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.

5. Prototype Presentation:
Update your e-portfolio explaining and showcasing the processes of the task


Evaluation Criteria:

Your UI design prototype assignment will be evaluated based on the following criteria:

  • Clarity and effectiveness of the UI design, layout, and visual elements.
  • Appropriateness of the chosen typography, color palette, and imagery.



1. RESEARCH

Throughout my search for references, I noticed that the CV designs that caught my attention used large profile images, either square or rectangular, instead of round. Therefore, I decided to create a CV inspired by these appealing references. Additionally, I want my CV to have a minimalistic style, so I plan to use basic colors for the design.


 
Fig T1.1 References/Inspirations


2. CV PLANNING DETAILS

I outlined the key details to include in my CV to facilitate easier planning.


Name: Emily Goh

Intro/About me: I'm currently a student pursuing Creative Media Design with a specialization in UI/UX. "Designing smiles with every interaction", I aim to transform complex problems into elegant, user-centric solutions that bring happiness to users in the future.

Contact information:

  • +60 128588928
  • emilygohh@gmail.com
  • blog: https://emilygohjy.blogspot.com/
  • Petaling Jaya, Malaysia

Software Skills:

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Lightroom
  • Adobe Premier Pro
  • Adobe After Effects
  • Adobe InDesign
  • Adobe Dreamweaver

Personal Values:

  • Problem Solving
  • Collaboration
  • Creativity
  • Communication
  • Open-mindedness
  • Attention to Detail

Education:
  • 2017-2021 | Highschool | SMK Bandar Utama Damansara 4
  • 2022-2023 | Foundation in Design | Taylor's College
  • 2023-Present/2025 | Bachelor of Design in Creative Media | Taylor's University
Experience:
  • Cashier / Customer Service Assistant
    ⤷ Family Restaurant, PJ, Selangor
    ⤷ 2019 - Present
    ⤷ Assisted with daily operations by taking orders, managing transactions, and providing excellent customer service. Developed strong communication and interpersonal skills through interactions with diverse customers, and demonstrated reliability and teamwork during peak hours.

Awards(project):
  • Malaysia Forest Fund Animation Ads Competition
    ⤷ Consolidation Prize
Social:
  • Blogger
  • Instagram


3. DIGITISATION ON FIGMA

Firstly, I included the main content for the CV, such as a profile picture, name, and a description about myself. 

Colours used:

background- #F3F3EF
background (rectangle, behind image)- #ECECEA
text- #161417

Fig T1.2 Process

I used a picture of myself, adjusted it to monochrome on my phone, and slightly edited the lighting, contrast, and shadows etc. on Figma to give it a smoother look.
Fig T1.3 image adjustments

After that, I added the contact information and experimented with different placements. In the first design, I placed it on the left side. In the second design, I used a black rectangle at the bottom, placed the information inside the rectangle in a line, and changed the text color to light. I decided to go with the second option because it creates a striking contrast.
Fig T1.4 placements of contact information

While searching for the type Archivo Black, this caught my attention with its barcode design? So I added it as a design element to enhance this part, which I found too plain.(although it was unnecessary)
Fig T1.5 barcode element

Next, I inserted all the drafted information into the body of the CV. I made sure the texts are all aligned as much as possible to create a neat looking layout.
Fig T1.6 Body

For more exploration, I tested a dark background and experimented with both purple and greyish-brown backgrounds for the contact information section. While both options were visually pleasing, I opted for the greyish-brown tone as it aligns better with the overall color scheme, which revolves around shades of grey, beige, and white, represented by the color code #F3F3EF. This specific color is a light grey with a hint of beige, giving it an almost off-white appearance.

Text colour: #F3F3EF

Fig T1.7 Comparison of backgrounds for the contact information section

I added back the icons of Phone, email, and location.
Fig T1.8 icons of contact information

Fig T1.9 Comparison of Initial and Final Outcome

I believe my CV shows a neat and simplistic design and clear information. So, I want to proceed with this design for my final submission.


Chosen Types:
Main Heading/Content Headings- Archivo Black
Subheading- Roboto Bold
Body- Fredoka Regular

Colour Code:
  • #f1f2ec
  • #c1bdb1
  • #f3f3ef
  • #161417
Fig T1.10 Colour code

Fig T1.11 Final UI design prototype for CV/digital resume


FINAL OUTCOME


Fig T1.12 UI design prototype for CV/digital resume in Figma

Fig T1.13 Final UI design prototype for CV/digital resume


FEEDBACK


WEEK 4 - 6

General Feedback 

  • no feedback given

Specific Feedback

  • overall looks good
  • could enlarge the font size of 'EMILY GOH' , maybe make bigger and place at center instead of aligning to the right
  • could enhance the design by using a accent colour to emphasize on 'EMILY GOH'
  • the lines placed at education area, might be troublesome when it comes to the HTML coding later on (so I will remove that)
  • for the contact information area, placement can be slightly more balanced
  • for now, can just leave it like that, can refine and edit again for upcoming project




REFLECTION

Experience

This task was really useful; I learned new skills, such as using Figma. I found the software easy to use, with clear and understandable functions. By observing CV layouts from others' work, I realized that formal resumes tend to have simpler designs. I also learned that information should be concise, as viewers might not read everything, so it's better to highlight only the important points.

Initially, I created my CV without much planning to test Figma, which resulted in an unattractive design. After redoing it, I first drafted what I wanted to include in the CV. I chose an informal selfie for the picture, as this is just an exercise. Lacking extensive work experience, I included my role in my family business, where I assisted with daily operations by taking orders, managing transactions, and providing excellent customer service. This experience helped me develop strong communication and interpersonal skills through interactions with diverse customers, and I demonstrated reliability and teamwork during peak hours. Although this work was not in the design field, the skills I gained—such as understanding customer needs—are directly applicable to design work.

Overall, I am satisfied with the outcome. It reflects my preference for a minimalistic design and a clean color theme.


QUICK LINKS


EXERCISES: WEB ANALYSIS & REPLICATE A DESIGN

TASK 1: PROTOTYPE DESIGN

TASK 2: WORKING WEB PAGE

FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION

FINAL COMPILATION & REFLECTION






Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION

Image
24.04.2025 - 15.05.2025  / Week 1 -Week 4 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Task 1:  App Design 1 Self-Evaluation and  Reflection TABLE OF CONTENTS 1.  INSTRUCTIONS 2.  EXERCISES 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS CLASS EXERCISES WEEK 3 EXERCISE To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass. process Outcome WEEK 4 EXERCISE To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie). Task flow chart for cinema app TASKS TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION  For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve th...
Read more

INFORMATION DESIGN EXERCISES

Image
03.02.2025 - 17.02.2025  / Week 1 -Week 2 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Information Design / GCD60504 / Section 01 Exercises TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  EXERCISES ↪ EXERCISE 1 ↪ EXERCISE 2 4.  FEEDBACK 5.  REFLECTION LECTURES INSTRUCTIONS CLASS EXERCISES EXERCISE 1: QUANTIFIABLE INFORMATION Objective: Quantify raw data and visualize information through a photograph. Create a visual representation of numerical data that allows for easy interpretation and analysis. Instructions: Gather a set of objects and categorize them based on quantifiable factors such as color, shape, or pattern. Arrange the objects in a presentable layout or chart. Clearly label the quantities and data using written indicators (e.g., pens or markers). Example Objects: Box of LEGO pieces Jar of buttons Jar of marbles Set of colorful rubber bands M&Ms, coins, or other small items The goal of this exercise is ...
Read more

APPLICATION DESIGN FINAL PROJECT & E-PORTFOLIO

Image
11.11.2024 - 12.01.2025 / Week 8 -Week 16 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Final Project: Hi-Fidelity App Design Prototype & E-portfolio TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS TASKS FINAL PROJECT: HIFIDELITY & E-PORTFOLIO After completing the low-fidelity app design prototype, I transitioned to the high-fidelity version. To start, I used the Color Shades Finder tool to refine the color palette. One of the issues with the Watsons app is its lack of a consistent color theme. While the current colors somewhat represent the brand and make the app recognizable, they can also feel overly distracting. For the high-fidelity prototype, I focused on creating a more cohesive and simple color theme. In the existing app, green, blue, pink, and various gradients are frequently used. For this redesign, I chose colors...
Read more