21/04/24 - 28/05/24 Week 5 - Week 6
Sheren Princessa Davon / 0362134
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 1: Prototype Design
INSTRUCTIONS
EXERCISE
Project 1: Part 1 Prototype Design - Digital Resume/CV
For this project, we were required to design a UI design prototype of our own CVs on Adobe XD or Figma. The UI design prototype has to showcase the layout, visual elements, and user interface interactions of our digital resume. Below are the requirements for this project:
 |
| Fig 1.1 Requirements |
Sketch
First, I created a sketch to visualize how the layout of my CV. I arranged the different sections based on hierarchy of what I want the audience to view first: Profile > Skills > Contact > Education > Experience > Projects.
 |
| Fig 1.2 Sketch |
Color Palette
I went on color hunt to search for a color palette so my design will be cohesive. I wanted earth and natural tones as I feel like those colors reflect my personality. I decided on these two color palettes, but took the darkest brown on the left one to replace the light beige in the middle.
 |
| Fig 1.3 Color Scheme |
Figma
I decided to create my prototype on Figma. This was the first time I'm using Figma, so I had to search up some tutorial videos beforehand, after trying it out myself, the process turned out quite smooth.
I chose the fonts Sora Bold for my headings and Poppins for the body text. For the Adobe app icons and Contact details icons, I used free vectors from here and here. I changed the colors of the icons to match my color scheme.
 |
| Fig 1.4 App Icons |
I grouped the different sections together (Profile, Skills, Contact, Education, Experience, and Projects), this way my elements won't be messy and I can easily edit and move the objects/text around smoothly. With the same margins and alignment, I kept proper spacing in between elements so that it looks neat. I kept the background a plain, light beige color to give it a clean look. To fill the empty space in the top right corner, I added some spikey star-like shapes, this is to also show a bit of my personality in my resume.
In the Profile section, I put my name and some personal information about myself. In the Contact section I put my location, email and phone number. In the Skills section, I placed the editing software I'm familiar with along with some of my design skills. I also put a short overview of personal projects in the Project Section. I don't have a lot of Experience yet, so I put that at the bottom of the page to establish hierarchy.
 |
| Fig 1.5 Figma Process |
Final Project 1: Part 1 Prototype Design - Digital Resume/CV
Fig 1.6 Final Project 1 - PDF. Week 6 (28/05/24)
Fig 1.7 Final Project 1 - Figma Prototype Presentation. Week 6 (28/05/24)
REFLECTION
This Project was enjoyable for me as I really like doing layouts. It was a great experience to be able to use Figma for the first time, and I am glad that I've gained new skills to use a new editing platform. It feels accomplishing to create my own digital resume with my own creative freedom and colors that represent me. With this project, I not only learned new skills, but also sharpened my layout skills and how to place objects in a nice visual hierarchy.
Comments
Post a Comment