Interactive Design · Project 1

15/5/2024 - 31/5/2024 / Week 4 - Week 6

Yang Zhi Ching (Chelsea) / 0365154

Interactive Design / Bachelors of Design (Hons) in Creative Media

Project 1 · Digital Resume

---

Instruction

Doc 1.1 MIB of the module

---

Project 1 - Prototype

Duration: 2 weeks

We are tasked to create a UI design prototype for a digital resume or CV using prototyping software such as Adobe XD or Figma. The prototype should effectively showcase the layout, visual elements, and user interface interactions.

Requirements:

1. Content and Structure:

   • Prepare resume content including personal details, education, work experience, skills, projects, etc.
   • Decide on the order and hierarchy of sections based on their importance and relevance.

2. Layout and Visual Design:

   • Design the layout using the chosen prototyping software.
   • Define the placement and flow of different sections.
   • Apply consistent visual design with appropriate typography, color palette, and spacing.

3. Sections and Organization:

   • Organize the resume into logical sections: "Profile," "Education," "Experience," "Skills," "Projects," "Contact."
   • Prioritize sections based on their relevance to the targeted position.

4. Visual Elements:

   • Incorporate relevant images, icons, or placeholders to enhance visual appeal.

5. Prototype Presentation:

   • Update your e-portfolio to explain and showcase the process of creating the digital resume prototype.

Evaluation Criteria:

• Clarity and effectiveness of the UI design, layout, and visual elements.
• Appropriateness of chosen typography, color palette, and imagery.

Moodboard and Sketch |

· Color Palette

To avoid misleading the eye and conflicting with the color of the Image (profile picture, artwork's picture), I use the tone of Black and White.

Fig 1.1 Color Palette, Week 6

· Reference Website -

1. Robert Caro
2. Turli Tu Art

· Sketches -

Software Used: Figma - Figjam Board

Fig 1.2 Layout Sketch, Week 6

Process |

First, I do it In Adobe AI to roughly look for the layout (as I haven't used Figma before). Then I directly go to Figma and start my progress.

Fig 2.1 Progress in Adobe AI, Week 6

Fig 2.2 Progress in Figma, Week 6

After drawing the sketch, I didn't have much difficulty in making the finished product, it just took time and patience.

My overall design uses rounded rectangles/dots as elements, which are repeated to achieve conherancy. I only used two fonts in total, both of which were downloaded from online resources, the heading font is Blippo Blk BT, and the content font is Gruppo.

Final Prototype |

Fig 3.1 Final Prototype in JPG, Week 6

Doc 1.2 Final Prototype in PDF, Week 6

---

FEEDBACK

No Feedback Received.

---

REFLECTION

| Experience |

Building my digital resume website prototype was a fun and eye-opening task as it is my first experience in UI/UX. Starting with some rough sketches, I gradually shaped it into a polished prototype. I used various design tools such as Adobe Illustrator, and Figma, and learned a lot beginning knoeledge about web design, user experience, and technical skills along the way.

| Observation | 

As I worked on the prototype, I noticed a few key things. A clean and simple layout is crucial for a professional look and easy navigation. I had changed my mind from the first sketch of Pink Theme but i feel it was weird when appearing with multicolor image like my profile picture, my artwork's image, so I changed my theme color to Black-and-White which make me easy to reach out the website.

| Findings | 

This project not only boosted my web development skills but also taught me how to present myself better online.

---