Interactive Design / Project 1

18.09.23 - 02.10.23 / Week 4 - Week 6

Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904) / Section 1

---

INSTRUCTIONS

 

---

PROJECT 1 - PROTOTYPE DESIGN

Digital Resume / CV

For Project 1 of Interactive Design, we are to create a UI design prototype for our digital resume or curriculum vitae (CV) using prototyping software's such as Adobe XD or Figma showcasing the layout, visual elements, and user interface interactions of our digital resume.

The requirements are the following:

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

Design Process

I have decided to use Figma for this assignment as Mr Shamsul had given us word that those who are taking UI/UX as our specialization would be using it frequently for assignments in the future, and because I am, I wanted to familiarize myself early on with the software in preparation, so I had picked it over Adobe XD.

To start off, firstly, I adjusted the size of my cv to 1330 x 2302. Following this, I then created the base background sections of my cv using the rectangular tool, breaking the left-most section of it into 4 parts which would feature a short summary of myself in my "About me", my basic personal details in "Profile", my contact information in "Contact" and lastly my soft skills in "Expertise". My favourite colours are cool-toned pinks, so I wanted to incorporate that into my cv somehow as well and used a mix of darker and lighter shades to contrast each other and create visual appeal, and to maintain consistency I stuck with 3 pinks only. I have also left some space in the top left corner for a picture of myself.

Fig 1.0 Creating Base Background Sections

Once I had laid down the foundation of my cv, I then proceeded to fill it in with the headline and sub-headline text for each section, bolded, which includes my name and my role as of now in the top right corner, my "About Me", "Profile", "Contact", "Expertise" in the leftmost section, and my "Education", "Experience", and "Skills" on the right of the page, making sure I leave enough space for text under each of these sections. I have also added extra visual elements such as a line where the "About Me" section is and circle bullet points for "Education", "Experience", and "Skills" in order for a more sleek and aesthetically pleasing look which I believe helped tie together the layout in a way. Aside from this, I have also off-set the headline text for the left-most sections as when I had experimented with centering everything, the flow of information did not read or present as smoothly as I had anticipated- this was fixed with the minor adjustment of off-setting it slightly to the left, furthermore it also gave some room for the text to "breathe" in a way, creating a sense of empty/white space which made the layout feel much less congested and easier to process and read. As a final touch, the text "Creative Media Student"- describing my current role at the moment has had its text tracking increased in order to fill up the space.

Fig 1.1 Adding Headline/Sub-text for Each Section

This is then followed by the addition of relevant information and content under each section with all text descriptions being scaled down and coloured appropriately. In the leftmost section, I have also left some space for icons in order to better describe and relay to the viewer what each text entails. For the rightmost section, the way I have separated my information is by what I deem to make the most logical sense in terms of information hierarchy; first with where/what I am describing under each section with a main subheading, followed by the date it occurred in, and then a description of the content itself. The other reason I have chosen to assort the rightmost section this way is due to the importance of each section, especially in a hypothetical where an employer is going through this cv, studies would lie at the top or be one of the first things stated in order for them to grasp what kind of education you had undergone- followed by my more serious experiences regarding design where things were conducted in a more professional environment, and then comes personal projects and work, finishing off with my set of skills and what I am able to offer in terms of work. Lastly, I have italicized the text under the "About Me" section and coloured it differently in order to create emphasis and contrast to other elements in my cv as it is a summary one can read if they were unable to go through my entire cv. Throughout this process, I had also ensured the spacing of everything was consistent and even.

Fig 1.2 Adding Content (Informational Text)

Finally, I then added a photo of myself and icons into the cv in the spaces I had left for them and coloured them according to the colour palette/theme I had. For the photo, I had used created a circle using the shape tool, sent it to the back, selected everything and used masking tool to crop the photo into a circle before then adding it into my cv along with an extra visual element of a lighter circle line around it to "highlight" the picture in a way. To add the icons, I installed a plugin that would allow me to easily add them into the canvas by simply searching them up. For each icon in the leftmost section, it is outlined with a circle in order to look neater and to match the outline I had around my profile photo in the top left, this way, the entire layout looked very clean and organized.

Some icons, such as the ones in the "Expertise" and "Skills" section have been modified by more than just their colour- for the tick marks, I had to add an additional white circle and send it behind as the original icon had it transparent, and for one of the logos under my set of skills featuring the softwares and coding languages I was familiar in, one of them- TypeScript, had to be custom made as I could not find a suitable icon of it to match the rest of the icons and elements well. I have also ensured the spacing of each icon is even and the edges of them are rounded-off instead of sharp, this is to make the layout have a much "softer" appearance and to maintain consistency throughout as I primarily used circles as a visual element, although if I had made the icon logos circular in shape as well, they would not be recognizable anymore, thus only slightly rounding-off the edges was the best option. Once the entire layout had been completed, I went back and made final adjustments in spacing of every element including icons, text, and visual elements, to ensure everything was even and rendered the final UI design.

Fig 1.3 Masking CV Photo

Fig 1.4 Adding Icons and Photo

Final Outcome

Fig 1.5 Final Digital Resume/CV JPG

Fig 1.5 Final Digital Resume/CV PDF

---

FEEDBACK

Week 5

General Feedback: Have a reference for the digital resume to help you in designing the prototype and ensure the design is not too complicated as you will only have one week to create it into a working website.

---

REFLECTION

Designing a prototype for my digital resume using Figma was quite fun, as an app it is easy and efficient to use which I appreciated, yet designing my digital resume also had its difficulties. Lots of planning had went into it as I treated it like a real resume that could be used for reference- I structured the content by deciding on an order that emphasized relevance and importance, while the layout design process involved creating a cohesive visual appeal that was neat and professional, but still conveyed a personalized touch- so I tried to be very thoughtful in the arrangement of sections and in what elements I added into the design. There was a bit of trial and error when it came to spacing out certain elements, as I wanted the spacing to be consistent throughout the layout but also not have an abundance of white space to the point where it felt too "empty" I had to carefully assess and try out different arrangements for some elements until landing on one I believed had the best visual balance. In the end however, I was satisfied with the outcome of my design. Overall through this project, I not only honed my skills in Figma but also gained valuable insights into the nuances of creating an effective and aesthetically pleasing user interface for personal branding.