Interactive Design / Project 1
16.5.2024 - 29.5.2024 / Week 4 - Week 6
Bong Sue Zhiun / 0366866
Interactive Design / Bachelor of Design ( Hons ) in Creative Media
Project 1 / Prototype Design
TABLE OF CONTENTS
1. Instructions
2. Project 1
3. Feedback
4. Reflection
INSTRUCTIONS
PROJECT 1
Part 1 : Prototype Design - Digital Resume/ CV
In this first part of the assignment, we will focus on creating 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 our digital resume.
Requirements:
1. Content and Structure:
Our UI design prototype assignment will be evaluated based on the following criteria:
- Prepare the content for our 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.
- 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, colour palette, and appropriate spacing.
- Organise our resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."
- Prioritise sections based on their relevance and significance to the position we're targeting.
- Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of our digital resume.
- Update our e-portfolio explaining and showcasing the processes of the task
Our 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, colour palette, and imagery.
Mr. Shamsul also shared us some links to inspire ideas for creating this digital resume.
1. Research
After reviewing all the instructions and requirements, I began researching what a digital resume should look like on Pinterest. Below are my references.
 |
Fig.1.1. References , Week 4, 17.5.2024
|
2. Sketching
I referred to the chosen references and began sketching four different resume layouts.
Fig.1.2. My Sketches , Week 4, 17.5.2024
3. Digitising
I chose to digitise Sketches#4 using Figma. Initially, I drafted the layout of the prototype and then filled in the content for each section in my resume.
 |
Fig.1.3. (Left) Sketches#4 ( Right) Draft Layout, Week 5, 23.5.2024
|
 |
Fig.1.4. Prototype Resume Draft, Week 5, 23.5.2024
|
During the week 6 class, I presented my prototype progress to Mr. Shamsul to receive his feedback. Afterward, I made adjustments to the layout, typeface, and colour scheme based on his suggestions. To avoid overusing lines in my prototype, I opted for shapes to organise each section. I then decided to change the typeface because the current font lacked variations such as bold, regular, and light. I chose Playfair Display for all the headings and Lora for the body text. I initially experimented with a gradient of colours in my prototype, ranging from darker to lighter shades using black, grey, and white.
 |
Fig.1.5. Refinement process, Week 6, 30.5.2024 |
After I was satisfied with my work, I began searching on Pinterest for the colour scheme I wanted to use. I selected three different colour schemes and then tried applying each one to my prototype. I found that colour schemes #1 and #2 worked better in my prototype.
 | |
|
I decided to apply colour scheme #2 in my prototype resume. Therefore, I change my profile picture's background using Adobe Photoshop to match my colour scheme.
 | |
|
Final Submission / Project 1: Prototype Design
Fig.1.8. Final Submission / Project 1: Prototype Design , Week 6, 30.5.2024 |
FEEDBACK
Week 6
Specific Feedback: Mr Shamsul discouraged me avoid overusing lines in my prototype since it could make HTML coding more difficult. Moreover, he advised experimenting with various typefaces and colour schemes. He also suggested that I change my profile picture's background to match my colour scheme. He emphasised selecting a colour palette with well-contrasting colours to make the resume more attractive. Overall, he found the layout elegant and minimalist, requiring only minor adjustments.
REFLECTION
Designing the prototype resume was difficult for me at first. I didn't know how to lay out everything and make it look good. But after looking at many examples and ideas from different sources, I started to get the hang of it. I had to think about not just how it looked but also how I would actually build it with HTML and CSS later on. Planning the structure and figuring out how to code everything was a big part of the process. It taught me how to blend creative design with practical web development skills.
Comments
Post a Comment