INTERACTIVE DESIGN / Project1 (Prototype Design)

15 May 2024 - 30 June 2024 (Week5-6)
Kaho Yamaya / 0364278
Interactive Design / Creative Media / Taylor’s University
Project1- Prototype Design
JUMP LINK

LECTURES


INSTRUCTIONS


Fig 1.1 Instructions for this project, (page9-10)


Part 1 Prototype Design – Digital Resume/CV
Duration: 2 weeks

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, colour palette, and appropriate spacing.
3. Sections and Organization:
  • Organise 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.

SUBMISSIONS

Part 1 Prototype Design – Digital Resume/Week5-6

WEEK5

Fig 2.1 Pre-structure, Week5 (17/5/2024)

Before I start building my resume in Figma, I made rough sketch in Adobe Illustrator for page structure. I use screen size of iPhone13&14 (390 x 844). I placed profile and skills, projects were above, contact sections were below. 


WEEK6

Fig 2.2 Working screen, Week6 (26/5/2024)

I want to make smooth eye movement for viewers, so I placed visual elements in the background. My theme for this resume is spooky colouring. The main colours are purple and orange/yellow. The heading size is 28pt and body paragraph size is 9 to 18.

Fig 2.3 Working progress, Week6 (29/5/2024)

My profile is almost true, phone number is fake one. Education and Skills, Experience, Language and Projects were came from my past activities. I choose Adobe applications that I learned in past semesters.


The button roles are below:

Home button: Direct to the main page.
Resume button: Direct to the page which has my resume informations.
My projects button: Direct to the page that showing my project in line.
Contact button: Direct to the contact section at the end of the page.
EN button: When user click this button, they can choose page language from English/Japanese/Italian.
SNS icons: Direct to the particular SNS page and show my account/contents.
Images: Direct to the specific project pages.
Submit button: 
Portfolio button: Direct to my portfolio page.
Google folder button: Direct to my google folder that has my contents.
Back to the top section: Direct to the top section of the page.


Fig 2.4 Adjusting layouts after feedback, Week6 (30/5/2024)

From Week6 Feedback, my visual elements are too strong in the screen and loosing simplicity. Also, the skills and language sections are separated and the classification is bad. I removed some visual elements and change colours to get more comfortable visual. I’ve focused on the eye movement and constancy in the heading and body paragraph, so I adjusted a bit for place object appropriate in vertical and horizontal line. 


FINAL DIGITAL RESUME

Fig 2.5 Final Digital Resume, JPEG, Week6 (30/5/2024)


Fig 2.6 Final Digital Resume, PDF, Week6 (30/5/2024)


FEEDBACK

Week6 (30/5/2024)
The background elements are too strong in the screen and it reduce the simplicity, constancy and visibility. The content in the resume is fine, but skill and language should classify as same section. Education and experience is also the same class.

REFLECTIONS

In this project, I could fully understand how web page layout is difficult to build. The examples that gave by Mr. Rahman are professional work and having five principles of usability. I also want to make them in my resume, but when I try to make it simple, it looks little bit poor. When I try to make smooth eye leading with the visual elements, they appears too strong in whole visual. When I try to think about the usability, the design becomes messy. Keep these balance and trying to make attractive visual is really hard for me. However, when I think about the role of buttons and some functions, I could put all elements that I love to use. For example, the language change button is for multiple national people and the home/go back top button for improve quality of user experience. Mr. Rahman’s feedback also work for me because it is from third people’s perspective. When we are designing, it is inevitable to be biased towards designer’s perspective, but we also need to fix it for user’s perspective.


Comments

Post a Comment

Popular posts from this blog

Digital Matte Painting / All Exercises and Projects

Image
24 Sep 2024 - 10 Jan 2025 (Week1-16) Kaho Yamaya / 0364278 Digital Matte Painting / Creative Media / Taylor’s University Exercises 1&2, Project1-3 JUMP LINK ・ Submissions ・ Feedback ・ Reflections INSTRUCTIONS Fig 1.1 Instructions for this module, PDF SUBMISSIONS For the first exercise, we need to get a fundamental knowledge for the field painting. To get these sense, we are going to do a edit on landscape picture to several time (morning, noon, twilight, night). Fig 2.1 Original landscape pic, Week1 (24/9/2024) This picture is for my original reference. I will use Photoshop for editing. Fig 2.2-5 Edited pictures, Week1 ( 26/9/2024) As the time and the sun goes, I edited the shadows in these pictures. The backgrounds in here are mountains, so I added some white in here because the objects paled out by the air.  Fig 2.6-8 Working screen of landscape drawing, Week2 (6 /10/2024) In this exercise, students requires to draw exact the same colour with their reference image. Student...
Read more

Information Design / Project1

Image
17 Feb 2025 - 10 Mar 2025 (Week3-6) Kaho Yamaya / 0364278 Information Design / Creative Media / Taylor’s University Project1: Animated Infographic Poster JUMP LINK ・ Lectures ・ Submissions 　・ Infographic Poster 　・ Minimal Animated Infographic ・ Feedback ・ Reflections INSTRUCTIONS Fig 1.1 Instruction of this module, PDF LECTURES Past lectures(W1-W7) are in  Exercise  post SUBMISSIONS DESCRIPTION:  After time exploring media and learning about information design, you will now develop an infographic that presents a series of different processes as visuals rather than text. REQUIREMENT: Your main intention is to analyse the “delivery mechanism’s” that affect the outcomes of your infographics. Though content is important, however the aim of this presentation is too look at what makes an infographic presentation work or does not work. This includes content but only as one of the many components of an infographic: PART 1: Infographic poster (10%)       ...
Read more

Major Project Ⅰ / Task1: Proposal

Image
3 Feb 2025 - 23 Feb 2025 (Week1-3) Kaho Yamaya / 0364278 Major Project Ⅰ / Creative Media / Taylor’s University Task1: Proposal JUMP LINK ・ Reflections PROGRESS From the week2 meeting, we decided our team's goal as animation. The basic storyline is come from Yong. The main characters are three. Father(protagonist), Mother, and daughter. We try to find references for character, world/environment, scene, artstyle, colour, and architecture.  Fig 1.1  Miro board progression, Week2 (12/2/2025) Fig 1.2  Storyline rough sketch, Week2 (16/2/2025) Before we proceed the sketches, I made a rough sketch of storyline(main event) to visualise and share the idea with all team members. Fig 1.2 Animation references, Week3 (17/2/2025) After we decided our decision, we started to find animation references. I suggested the stylised art style before we start to find the references because it makes our research more easy.   Fig 1.3 Environment sketch reference, Week3 (17/2/2025) Fig...
Read more