Labels

Interactive Design - Project 1: Prototype Design

13/9/2023 - 4/10/2023 Week 3- Week 6
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Interactive Design
Project 1: Prototype Design


LECTURE NOTES

Refer to another blog

INSTRUCTION

Part 1 Prototype Design – Digital Resume/CV

Duration: 2 weeks

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.

Requirements:

1. Content and Structure:
  • Prepare the content for your resume, including personal details, education, work experience, skills, projects, and other relevant sections.
  • 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, colour palette, and imagery.


PROCESS
1. Sketch

In the beginning, I was a bit confused about what we were supposed to do. Initially, I thought the task was to create a personal website for self-introduction. So, I leaned towards designing it in a website landing page style from the start.

Let's take a moment to appreciate my "not-so-perfect" drafts with a wry smile.
Sketch 1
Sketch 2

Sketch 3

Sketch 4

Then, when I discussed it with my friend, I realized that the lecturer wanted the resume or CV format. So, I had to start from scratch again, give up all my previous draft (P.S. Internally, I was totally freaking out😭😭, and my hand felt like it was about to break)

So, there is my redone 4 prototype draft：


I liked the #4 design the most, so I proceeded to digitalize it with Figma.
Choose sketch 4 to proceed digitalize

2. Figma

Because I was completely unfamiliar with Figma, I went online to find tutorials to get started. 
I watched these playlists of basic Figma tutorials on Bilibili.
  1. 【【Figma教程】全网火爆的Figma精讲|Figma工具|Figma应用|Figma学习|Figma项目】 https://www.bilibili.com/video/BV1wa411V7mU/?p=20&share_source=copy_web&vd_source=a0b2ee6dd550d590973e483d7d5d5341
    • This tutorial was very practical and explained things clearly. I highly recommend giving it a watch. (P1-P16)
  2. 【零基础学 Figma【酸梅干超人出品】】 https://www.bilibili.com/video/BV1fg411G7cs/?p=9&share_source=copy_web&vd_source=a0b2ee6dd550d590973e483d7d5d5341
    • This tutorial uses examples to demonstrate commonly used tools. I watched P7 and P8, which explained the use of guides and grids and responsive web design.



So I applied what I learn to my project, which is the layout grids and rulers tool, are very convenient to arrange our prototype nicely and neatly.


For those labels, I framed the text and applied corner radius, drap shadow and background blur.




I also adjusted the constraints to the centre so that the text will remain center when resizing the frames.



Since I've already made adjustments, might as well tweak all the constraints to make my prototype adapt to different screen sizes.


To insert icons, I use the Iconbuddy plugin which is found in the Figma community.


I made this progress bar things with two rectangles overlay.


I also noticed that some icons can adjust stroke width and some cannot, so I some icons that cannot adjust stroke widths I think are too thick when compared to others, I drew it manually with the pen tool in Figma, but the pen tool in Figma is very rubbish. It can't cut the stroke, only can adjust the anchor point only. 


However, one of Figma's advantages is that it makes adjusting spacing very convenient, and you can freely swap positions after arranging frames.

Finally, I made some adjustments to the counter space, ensuring uniform spacing between each section to create a balanced look. And that's a wrap!

Final Outcome:
Click here to view my digital resume in Figma

Final Prototype (jpg)


Final Prototype (pdf)


Final Prototype (figma)

REFLECTION

This project's design requirements may seem simple, but precisely because they appear straightforward, it often requires putting more thought into design details. Moreover, I feel that the challenge lies in the content. Many of my friends are struggling with what to write. For example, in the "experience" section, if you haven't had a job, it's difficult to figure out what to include. Also, expressing design projects in words can be challenging because they often feel like they can't be adequately conveyed through text alone. So, it seems like I might need to create a portfolio in the future to complement my resume.

Overall, Figma isn't difficult to use, and I managed to learn it in just a week. I'm really happy to have acquired proficiency in new software, as it will be immensely helpful in the future.

Labels:

Comments

Post a Comment