Interactive Design | Project 1 : Prototype Design

13/05/2024 - 28/05/2024 / Week 4 - Week 6

Eng Yan Ling

Bachelor's Degree in Creative Media (Hons) - (Taylor's University)

Interactive Design | Project 1 : Prototype Design

TABLE CONTENT

<span id="LIST"></span>

1. Instructions

2. Project Requirements

3. Presentation

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1UkhqnbQ7tgLrsvt2G92NyKarGMaPcPJm/preview" width="640" height="480" allow="autoplay"></iframe>
PROJECT REQUIREMENTS
Objective: In this first part of the assignment, you will focus on creating a UI design prototype for your 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 your digital resume.

Requirements:
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
Evaluation Criteria:
Your 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, color palette, and imagery.
PRESENTATION - PROJECT 2
PROJECT 2 - RESUME PROTOTYPE DESIGN
1. Visual References

Figure 1.1 Visual References

Source : Pinterest : Pinterest
My idea of the prototype design is a minimalistic but professional resume in a cool tone that matches well altogether.

2. Color Palette
Figure 1.2 Prototype Color Palette (Week 5, 21/05/2024)

Earthy tone palette that matches my personal energy and also maintain a minimalistic layout throughout my prototype without any color that stands out among the color combinations.

3. Draft

Figure 1.3 Resume Draft - Canva (Week 5, 21/05/2024)

Draft planned in Canva to get a general look of how I plan my resume layout and listed down the contents within the resume with grids and guidelines created.

4. Figma Prototype
Imported Images (Self- Portrait & Logos)


Figure 1.4 Imported Images & Background Removed (Week 5, 21/05/2024)

Elements in Figma
Figure 1.5 Language Proficiency Loading Bar (Week 6, 28/05/2024)

Language proficiency bar is created using the rounded edges square tool by creating a filled and lined bar.
Figure 1.6 Text Hierarchy (Week 6, 28/05/2024)

To maintain a consistent and minimalist layout, I used to Simple fonts in Figma with the information hierarchy as seen in Figure 1.6 

Info Hierarchy :
H1 - Name (Regular Text)
H2 - Categories (Bold)
H3 - Title of Body Text (Bold, Underlined)
H4 - Title Sub-heading  (Bold)
Body Text 1 - Info (Regular)
Body Text 2 - Timeline/Date (Refular)

With all the imported images background removed in canva, I import the downloaded PDF into Figma for the visual elements, background size and color within the prototype design. To all software logos are aligned, I used the alignment feature to ensur eboth logos and text are aligned.
The layout of the design is divided into 2 columns and all the text are aligned to the left except for the software logo texts.

The overall layout of my prototype design is simple and organized which does not required too complicated adjustments around organizing the layout. The second page of the prototype design text are aligned left with the text box aligned to center division.

Figure 1.7 Language Proficiency (Week 6, 28/05/2024)

To avoid the whole layout being too wordy, I inserted a loading bar (Figure1.5) that represents may language proficiency to add some visual elements to the layout while maintaining its simplicity.

Figure 1.8 Contact Information (Week 6, 28/05/2024)

On the upper top right of the main resume page consist of contact info with icons representing each piece of information which are important in a resume. The color of the icons is adjusted to a color where it is still visible and matches well with the color palette but does not grabs attention away from the main headings in the layout.

Figure 1.9 Category Headings (Week 6, 28/05/2024)

The categories dividing each section of information is distinctly separated by is bolded text, size, and brighter shade of green allows it to be more visible and easily identified. By reducing its pt size, it does not particularly stand out in comparison to my name (main heading) but still remains visible and easily identified.

5. Final
FINAL SUBMISSION - PROJECT 1 : PROTOTYPE DESIGN DIGITAL CV/RESUME
Figure 1.10 FINAL PROTOTYPE DESIGN - DIGITAL CV/RESUME (Week 6, 28/05/2024)

QUICK LINKS
Blogs

Exercises : Click Here
Project 2 : Click Here
Final Project : Click Here

Comments

Post a Comment

Popular posts from this blog

Information Design / Final Project

Image
  03/03/2025 - 17/03/2024 / Week 5 - Week 7 Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Information Design / Final Project TABLE CONTENT <span id="LIST"></span> 1.  MIB 2. Progress     2.1 FLIP Presentation     2.2 Infographic Animation 3. Feedback 4. Reflection 5. Quick Links MIB PROGRESSION FLIP PRESENTATION Project Requirements TIME FRAME:  WEEK 01 - WEEK 07 DEADLINE:  WEEK 07 INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and softw...
Read more

Information Design / Exercises

Image
03/02/2025 - 03/03/2024 / Week 1 - Week 5 Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Information Design / Exercises TABLE CONTENT <span id="LIST"></span> 1.  MIB 2.  Lecture 3.  Exercise     3.1 Exercise 1 : Quantifiable Information     3.2 Exercise 2 : L.A.T.C.H Infographic Poster 4. Feedback 5. Reflection 6. Quick Links MIB LECTURE W1 - 10/02/2025 L.A.T.C.H Theory List of Infographic informational - written list info, numbering - data → visualize info a visual cannot entirely convey its message statistical infographic pie chart, bar graph, etc how to deliver message/set of info to your audience? how-to infographic step-by-step process timeline infographic movement from one point to another numbering → organic/linear/circular? comparison infographic map/location infographic flowchart infographic sequence of different step and action planning ...
Read more

Sonic Design / Exercises (Audio Fundamentals)

Image
21/04/2025 -  xx/05/25 / Week 1 - Week x Eng Yan Ling Bachelor's Degree in Creative Media (Hons) - (Taylor's University) Sonic Design / Exercises (Audio Fundamentals) TABLE CONTENT <span id="LIST"></span> 1.  Instructions 2.  Lecture 3.  Exercises     3.1 Exercise 1     3.2 Exercise 2     3.3 Exercise 3     3.4 Exercise 4 4.  Feedback 5.  Quick Links INSTRUCTION LECTURE Week 1 - 21/04/2025 Week 1 : Sound Fundamentals Reflection : Reflecting on the lecture videos from this week, I have learned and gain a solid understanding on the fundamentals in sound design in terms of its terminologies, transmission and how we process and identify sound from production to propagation to perception. Besides that, I have also learned the properties of sound in identifying its frequency/pitch, loudness, space and more. All in all, this week's lecture has opened new fields that I am...
Read more