Interactive Design - Project 1: Prototype Design
Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media
Interactive Design
Project 1
INDEX:
1. Project 1
2. Feedbacks
3. Reflection
LECTURES
All lectures are recorded in Interactive Design - Exercises.
In project 1, we are going to create a UI design prototype for our 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 the digital resume. The contents of the digital resume should include personal details, education, work experience, skills, projects, and other relevant sections.
1. Research
I started this project through doing some research on Pinterest. I take notes on the layout, sections and context of the digital resumes while doing research. Most of the resumes consist of 5 to 6 sections, including profile image, about me, work experiences, education, skills and contacts; some of the resumes also include languages as their additional information.
Most of the digital resumes are simple and minimalistic, some of them had a short paragraph of explanation, some of them used lists in the resumes.
2. Sketch
After doing research, I started to sketch the layouts of the digital resumes on Procreate. I created 3 sketches with different layouts. The name is usually in the largest size, which I reckon is heading 1. Then, there are different categories which used a smaller size, followed with normal paragraph size under the name of each category. I did a few sketches while thinking about the layouts. I listed out the sections I wanted to include in my resume and tried out different arrangements. Initially, I thought of using all wording for the contents, but in sketch 4, 5 and 6, I used icons for the section of 'skills' because I feel like it will be boring if there are only words.
Sketch 4; Sketch 5; Sketch 6
I think sketches like sketches 1, 3 and 5 are a little bit too crowded for me. I chose sketch 6 to develop it into a digital resume in Adobe XD. This is because I think sketch 6 is more balanced in terms of white space and graphic elements.3. Adobe XD
I begin to digitise my prototype design of digital resume in Adobe XD. This is my first time using Adobe XD, so I'm not familiar with it. I started by familiarising myself with the software, I simply insert the shapes, text without following the sketch layout.
After I get used to the functions, I started a new artboard where I began to draw and digitise the digital resume following my sketch. First of all, I started to draw the boxes following the grid. Then, I type out the title (my name) following what I drew in the sketch. I chose Garamond - bold as typeface for the headings and Garamond - regular and Adobe Caslon Pro - regular for the paragraphs. I used three colours to differentiate the areas, including the main title, main contents sections and relevant contents sections.
After that, I started to insert the contents including working experiences, education, skills and languages into the larger area because I think they are the more important sections in a resume. After that, I included the other contents such as profile picture, projects, awards and contacts into the other area on the left. I masked my profile picture with a circle like what I had in my sketch. I bolded some of the text to show hierarchy and differences between the text.
Then, I started to find the icons for the section of 'skills' on Pinterest. I imported the image and masked out the icons and adjusted the size so that they match within the section.
After finishing the contents, I tried to arrange the contents differently with the same layout to try out different attempts and see which is the best result. I also tried using different typeface for the contents as initially, I used both Garamond and Adobe Caslon Pro for the contents. I change the typeface into same one, Adobe Caslon Pro as I feel like the size Garamond is very small and it will increase the difficulties in terms of readability.
I like the last one the most as it doesn't look too crowded and it has white space to keep the balance. I think there are a few details in terms of the alignment need to be improved to have a better result. I also tried to arrange the section again and see which will have a better result.
I am not sure if I need to have navigation bar for this digital resume, so I make one more design, with header, navigation bar and footer.
I added a wordmark on the top left part. However, I feel like this is a little bit too much for a digital resume. Then, I tried to include hyperlinks for some of the text for both of the designs.
FEEDBACKS
Week 5 / 25.9.2023
Must have more than 5 sketches for the digital resume because the first few one, we tend to follow the references more. Not to be too complicated as we need to make it become a real website in the next task.
REFLECTION
This project has allowed me to dive into the layout of creating a digital resume. I did a lot of research on the examples of digital resumes before I started sketching. Some of them are good, some of them are bad since they are too packed. From here, I am able to observe the good ones and bad ones in terms of layouts of the design. I observed that it is important to have white space in the digital resume design so that the overall artboard will not be too suffocated. Besides, I also observed that alignments are very important while creating the digital resume. While creating the layout in Adobe XD, I have to match the measurements of each section for the headings and contents so that they look consistent throughout the whole design. I was able to incorporate elements such as graphics which made my resume more engaging. I gained a deeper understanding on layout design and was able to use my digital media skills to promote my design concepts while designing the digital resume.
Comments
Post a Comment