Interactive Design - Project 1: Prototype Design

on

13.9.2023 - 3.10.2023 ( Week 3- Week 6)
Gam Jze Shin / 0353154
Interactive Design / Bachelor of Design in Creative Media
Project 1: Part 1 Prototype Design
Index
1. Lectures
2. Instructions
Lectures
Refer to Lectures.

Instructions

Project 1
Part 1: Prototype Design – Digital Resume/CV

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, color palette, and imagery.

Research
Before I started my sketches for  digital CV, I found some examples of digital CV via Pinterest. Then, I saved the references that I interested with in my design mood board in Pinterest.


  
fig. 1.1 - 1.3 References of digital CV

For the first reference, it looks like a social media page. By using this layout, viewers will have better understanding on it as this type of layout is familiar to viewers especially social media users. The minimalist style in second reference is what I like, the information is sufficient even it is simple but easy to understand. It may bring comfortable feeling to viewers. The overall colour palette of third reference is blue, which is also my favourite. Hence, I would like to refer on it in my digital CV.


Sketches
Before we started doing our digital CV in Figma, Mr. Shamsul asked us to draw at least five digital CV sketches on paper. Based on my research, I had design different style of digital CV.



                          fig. 1.4- 1.8 Sketches


After that, Mr. Shamsul told us to choose the best design and do it in Figma. I decided to choose the third sketch as I think is is more creative than others. Besides, I listed out all of the information that I needed in my digital CV.

fig. 1.9 -1.10 Sketches chosen & Information needed


Digitalization
First Attempt
As it is my first time using Figma, I had watched some youtube tutorial in order to have better understanding on the tools and the function button of Figma.

fig. 1.11 Youtube videos

For every box, I use group selection to group it as it will be convenience for me when I need to move it.

fig. 1.12 Group Selection Tool

After I done my first attempt resume, I showed it to Mr. Shamsul at class. I realized that it will be difficult for me to continue my design of digital CV in the next project which is using HTML and CSS to create it. In the other hands, Mr. Shamsul told me there are a bit unbalance for my digital CV such as the margins and the space between the content.

fig. 1.13 First Digital CV attempt

Second Attempt
I created a new design before I started my second digital CV attempt. I decided to create a more simple layout compare with the previous. I changed the shape which behind my self portrait from oval to circle as the style of my whole digital CV will be rounded.


fig. 1.14 - 1.15 Background shape changes compare                                

For the line, I changed one side is circle arrow and another is round in Figma.


fig. 1. 16 - 1.17 Stroke tools

I used Icons 8/ Material Design Icons to insert icon into it.

fig. 1.18 Plugins tool

As my digital CV's colour palette is blue, I changed the icon's colour into dark blue. Therefore, the icons that I found will be in that colour.

fig. 1.19 Icon's colour


In order to make sure all of the lines, texts and icons are in the same grids, I used the layout grid (35px) to adjust it. I remain 2 small boxes for the border.

fig. 1.20 Grids tool
The font family that I used for my digital CV is AIegreya Sans SC. Bold for name and Title/ Section. Light for the subtitle. Italic for the content information. Font size for Title is 55px. Besides, font size of content is around 32 - 40. 
 
fig. 1.21 - 1.22 Fonts type and size used

I find some references colour from Colour Hunt. Based on the references, I created my own colour palettes in Figma and I used it in my digital CV. The most common colour I used is Blue, Black, Green.

fig. 1.23 - 1.24 References' colour palettes
fig. 1.25 Colour palettes used

Final Digital CV
Feel free to see my Digital CV in Figma.

fig. 1.26 Final Digital CV


 

Reflection
From project 1, I had done my Digital CV. I am satisfied with my final outcome as it is what I expected even I faced a lot of troubles when doing it. The most importance things is I had studied some techniques and knowledges on how to use Figma to create an artwork. When doing my digital CV, I also noticed that we should present our content or information in a simple and uniform way. Hence, viewers will more clear on what ideas that designer would like to convey. There are a lot of details that designers need to aware of such as the space between the fonts, consistency of the font and the overall visual experience.


Comments

Post a Comment