Interactive Design/ Project 1: Prototype Design

19.09.2023 - 03.10.2023 (Week 04 - Week 06)
LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / INTERACTIVE DESIGN
Project 01: Prototype Design

---

INSTRUCTIONS

---

Project 01: Prototype Design

For this project, our task is to develop a UI design prototype for our digital resume or CV using Adobe XD or Figma. The resume's content should include personal information, educational background, work history, skills, projects, and contact details. We need to structure these details into coherent sections, giving priority to sections based on their importance and relevance. Additionally, integrate suitable images, icons, or placeholders that complement the content and enhance the visual aesthetics of the digital resume.

Progress
Following the guidelines provided by Mr. Shamsul Hamimi in Google Classroom, we began our research and initiated the process of sketching our initial ideas for the project during week 04. We were specifically directed to create a minimum of 5 sketches by week 05 to ensure that we could advance to the digitalization phase in week 05 and meet the submission deadline.
I began this project by compiling all the necessary content for my digital resume, including personal details, education, work experience, skills, projects, and contact information. This step helped me organize the information effectively for the design phase.

Figure 1.1 Necessary content. 

Next, I turned to Pinterest for inspiration, studying various digital resume examples to understand how others had structured their resumes. I analyzed how they divided information into sections and established hierarchical relationships among these sections.
I have a personal preference for a minimalist layout, which is why most of the visual references I discovered lean towards the design aesthetics of minimalist digital resumes.

Figure 2.1, 2.2, 2.3 Visual references. (credits: Pinterest)

Sketches

Afterward, I proceeded to sketch out five distinct design concepts, drawing inspiration from the content list I had compiled earlier and the visual references I had gathered from Pinterest.
For my initial sketch, I chose to divide the information into two sections, creating a layout that guides the viewer's reading in a 'Z' pattern.

Figure 3.1 Sketch 01.

In the second sketch, I decided to explore different styles of separating information into two sections. The placement of images and icons differs from the design in sketch 01.

Figure 3.2 Sketch 02.

In sketch 03, the design still separates information into two sides. However, the information is centered on the whole page and split into two sides.

Figure 3.3 Sketch 03.

In sketch 04, I arranged all the information in each section from left to right. The titles for each section move from left to right and then back to the left. This is to add visual interest to the digital resume, rather than simply filling each section with information.

Figure 3.4 Sketch 04.

In sketch 05, I moved the "About Me" section to the top section, combining it with my image and introduction. This way, the top section wouldn't be empty. Then, I filled the other sections with information on the left and right sides.

Figure 3.5 Sketch 05.

Digitalize
After sketching out all five of my different ideas, I began to digitize the sketches. I chose to digitalize two sketches that I found most satisfying, which are Sketch 03 and Sketch 05. These two sketches have different styles, allowing me to better assess which style is most suitable for my digital resume.

Figure 4.1 Sketch 03.

Figure 4.2 Sketch 05.

I utilized Color Hunt to search for the color palette that I wanted to incorporate into my digital resume. After conducting an extensive search, I finally found a color palette that met my satisfaction.

Figure 4.3 Color palette.

I conducted online research to find the most suitable font for my digital resume that aligns with my desired style. While searching on Google, I came across a mix of paid and free fonts. To streamline the process of finding a free font that suits my digital resume, I used Canva and examined the fonts available in their website templates. This approach helped me identify the font combinations that yielded the best results. Subsequently, I downloaded the fonts I deemed suitable for my digital resume from online sources.

Figure 4.4 Paid font.

Figure 4.5 free font.

Initially, I employed Photoshop to remove the background from my selected self-portrait image. Afterward, I duplicated the outline of my self-portrait and filled it with two distinct colors from the chosen color palette. Subsequently, I positioned these filled color shapes separately on the left and right sides behind my image. I believe this approach enhances the visual appeal compared to simply placing the image.

Figure 4.6, 4.7 Photo editing.

I chose to use Adobe XD to create my prototype design since I'm more familiar with Adobe applications, having learned Illustrator, Photoshop, and others in previous modules. Adobe applications share similar workflows and features, making it a comfortable choice for me. I did explore Figma as well, but I found it less intuitive since the placement of features differed significantly, and I would have had to start from scratch in terms of learning the software.
I created an artboard in Adobe XD with a width of 1280px and filled the background with the lightest color from the chosen color palette. I added a navigation bar at the top. Following this, I imported the edited image into the center of the section, with the introduction text positioned on both the left and right sides of the image.

Figure 4.8 Progress screenshot. 

I proceeded with the digitalization process by arranging the information within each section according to the set grid and guides, ensuring a well-organized layout. To enhance the visual appeal and representation of content, I utilized plugins in Adobe XD to access icons that align with the overall design style and effectively convey the intended message.

Figure 4.9 Progress screenshot.

Next, I installed another plugin called VizzyCharts in Adobe XD, which allowed me to create the percent pie charts for the skills section of my digital resume. This plugin helped me represent my skills in a visually appealing and easy-to-understand manner.

Figure 4.10 Progress screenshot. 

Following that, I retrieved the work I had completed for previous modules and added it to the project section of my digital resume. I listed the names of the modules to showcase the projects that I did.

Figure 4.11 Progress screenshot.

I noticed that there was an issue with the size of my artboard when Mr. Shamsul Hamimi mentioned in the WhatsApp group that the width of the artboard should be 1330px. I promptly created a new file with the correct width, 1330px, and copied and pasted the work I had done previously. I then readjusted all the sizes and positions according to the grid and guides. Besides, I removed the navigation bar as Mr. Shamsul Hamimi mentioned that it would be a single-page design, and there would be no need for a navigation bar.

Figure 4.12 Progress screenshot. 

I continued to work on completing the digitization, focusing on the final section, which is the contact section. I retained the color bar at the top, which was originally intended for the navigation bar, and also added a color bar at the end of the page. This was done to add an interesting visual element to the page, rather than having a single color background throughout.

Figure 4.13 Progress screenshot.

After completing the entire page, I exported it and reviewed the design. I noticed that it appeared too monotonous and it was challenging to differentiate between the sections. To address this issue, I returned to Adobe XD and added color blocks to certain sections. This addition of color and background variations made it easier for viewers to recognize the different sections.

Figure 4.14 Refined.

Attempt 01 Outcome

Adobe XD Link
*The final design outcome may differ slightly from the initial sketch as I refined and adjusted it during the digitization process to achieve a more suitable layout.

Figure 5.1 Attempt 01.

Following that, I proceeded to digitize sketch 05. This process was more straightforward as I already had the fonts, color palette, images, and elements from my first digitization attempt. I created a new file with a width of 1330px, selected the background color, and maintained the color bar at the top. Then, I copied and pasted the information and images from my previous attempt and rearranged their positions according to the layout of sketch 05.

Figure 4.15 Progress screenshot. 

Attempt 02 Outcome

Adobe XD Link
*The final design outcome may differ slightly from the initial sketch as I refined and adjusted it during the digitization process to achieve a more suitable layout.

Figure 5.2 Attempt 02. 

In the Week 06 class, I presented my second attempt to Mr. Shamsul Hamimi because I felt that the page size in the first attempt was a bit too long. After receiving feedback from Mr. Shamsul Hamimi, I proceeded to refine my second attempt at the digital resume, which I then submitted as my final work.

Final Prototype Design
Adobe XD Link

Figure 6.0 Final prototype design.

---

FEEDBACK
Week 06 
The overall design looks impressive. However, there is a need to change the font used in the ' Hi, I'm LIEW XIAO HUI! ' to maintain consistency throughout the design. Additionally, it's advisable not to use the lines to separate information, as the next project, Project 2, will require the use of HTML and CSS code to create this digital resume, and lines may be challenging to replicate using HTML and CSS code.

---

REFLECTIONS
From this project, I gained a deeper understanding of the difficulty of designing a webpage. I realized that the preparatory work is extensive and that the placement of each element and content has a significant impact on the final outcome. Maintaining consistency in styles, font combinations, and color choices is crucial for creating a page.
Additionally, I expanded my knowledge of using various applications to create prototype designs. While working with Adobe XD, I learned that it takes practice to become more proficient in using the tool professionally. Completing this project may not be difficult, but creating a creative and unique webpage with a personal style can be challenging and requires further study and practice.