INTERACTIVE DESIGN [ PROJECT 1 ]
16.05.24 - 30.05.24 / Week 4 - Week 6
Bachelor of Design (Hons) in Creative Media / Interactive Design / Taylor's University
Project 1
OUTLINE
Instruction
- Project 1 - Prototype Design - Digital Resume/CV
Reflection
INSTRUCTION
Module Information Booklet (MIB) of Interactive Design
<iframe src="https://drive.google.com/file/d/1xs_1Oul1eI2COsIo2W3eILWqBWQTsykD/preview" width="640" height="480" allow="autoplay"></iframe>
Project 1 - Prototype Design - Digital Resume/CV
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 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, colour 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, colour palette, and imagery.
For this project, I started to make a mood board first. I researched several web designs from Pinterest to better understand the web designing part. And then I started sketching.
Mood board (Week 5 / 20.5.2024)
 |
| Fig. 1.1 Sketch 1 (Week 5 / 20.5.2024) |
 |
| Fig. 1.2 Sketch 2 (Week 5 / 20.5.2024) |
 |
| Fig. 1.3 Sketch 3 (Week 5 / 20.5.2024) |
 |
| Fig. 1.4 Sketch 4 (Week 5 / 20.5.2024) |
 |
| Fig. 1.5 Sketch 5 (Week 5 / 20.5.2024) |
Before designing the site in Figma, I first picked one of the sketches I drew and then based on that, I made a rough layout in Figma.
 |
| Fig. 1.6 Process 1 (Week 6 / 27.5.2024) |
And I've organized the writing I will write in the artwork on a notepad. I'm still a student and don't have much experience because I'm young, so I combined education and experience.
 |
| Fig. 1.7 Process 2 Memo (Week 6 / 27.5.2024) |
After taking notes of my information, I came back to the layout and designed it based on the sketches.
 |
| Fig. 1.8 Process 3 (Week 6 / 28.5.2024) |
 |
| Fig. 1.9 Process 4 (Week 6 / 28.5.2024) |
 |
| Fig. 1.10 Process 5 (Week 6 / 28.5.2024) |
 |
| Fig. 1.11 Process 6 (Week 6 / 28.5.2024) |
 |
| Fig. 1.12 Process 7 (Week 6 / 28.5.2024) |
 |
| Fig. 1.13 Process 8 (Week 6 / 28.5.2024) |
Then I found one of my photos that I could put in my portfolio, removed the background from Photoshop with a mask, and put it on where I decided. I thought it was a bit boring just to put in the picture, so I added a shadow-like effect in the back.
 |
| Fig. 1.14 Process 9 (Week 6 / 28.5.2024) |
 |
| Fig. 1.15 Process 10 (Week 6 / 29.5.2024) |
After attaching the photo, the colour was adjusted little by little to make it look more harmonious.
 |
| Fig. 1.16 Process 11 (Week 6 / 29.5.2024) |
 |
| Fig. 1.17 Process 12 (Week 6 / 29.5.2024) |
 |
| Fig. 1.18 Process 13 (Week 6 / 29.5.2024) |
When I was done, I wanted to change some colour. So I copied the two changed the colour to a cleaner colour, and compared them. Comparing the three, the artwork on the left was more noticeable and in my eyes it looked better than before. So I chose the left one and converted it to PDF.
 |
| Fig. 1.19 Process 14 (Week 6 / 29.5.2024) |
Fig. 1.20 Final Prototype Design PDF (Week 6 / 29.5.2024)
REFLECTION
Experience
Over a total period of three weeks, I worked on an assignment to design my portfolio. I decided what information to include by looking at various examples posted by the lecturer on Google Classroom. Since I had already done similar assignments in the Exercises, designing the site wasn't too difficult.
Observations
Although it wasn't particularly challenging, I did spend a lot of time thinking about the layout of the site. As with any task, I had to consider what information to include, what layout to use, and which colours to choose. I especially spent a lot of time deciding on the colour scheme. Initially, I had chosen the colors, but as I continued working, the colors started to look a bit tacky, so I spent a lot of time at the end reconsidering the overall color scheme.
Findings
In the end, I felt satisfied to have completed the assignment. Even though it might just be designing a site, it wasn't an easy task, so I couldn't help but feel a sense of accomplishment. It was a bit embarrassing to use my own photos, but since I was designing my portfolio, I thought it might help me in getting a job someday.
QUICK LINKS
Projects
Comments
Post a Comment