Labels

INTERACTIVE DESIGN-PROJECT 1/Prototype Design

 

INTERACTIVE DESIGN

28 September 2023

28.08.2023- 14.07.2023/Week 4 - Week 6

Nur Fariha Binti Mohd Rodzuan/0351242
Interactive Design/Bachelors(Hons) in 
Creative Media 
Project 1- Prototype Design
                                                             

LABELS:

Lectures

Instructions


LECTURES
All lectures slide are in: Interactive Design- Exercises

INSTRUCTIONS 

Module Information Booklet

Project 1-Prototype Design

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.


PROJECT 1-PROTOTYPE DESIGN

1. Process

1.1 Visual References
Before starting the project, I went through Pinterest to find references and ideas on how designers format their resume and how they had placed information in a hierarchical order. In addition, to taking note to the layout, content management and usage of colours.

fig 1 Visual References of CVs and Resumes week 4 (20/9/2023)

1. 2 Content and Structure

Prepare the content for your resume, including personal details, education, work experience, skills, projects, and other relevant sections Decide the hierarchical content to ensure that the most relevant information are placed on top.

1.3 Layout 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.

Wireframing:
I sketched out a few wireframes on paper with the content structure arranged below:

1. Name and Contact Information (BIO)
2. Profile (Description)
3. Education 
4. Work Experience
5. Skills
6. Project (to be placed)
7. Award

While sketching the wireframe, I had my idea of the content based on my previous resume for a scholarship, therefore certain information such as projects were not placed. (I forgot to read what is required in the content but it will be added later on)


fig 2 Wireframe sketches #1 week 5 (27/9/2023)

According to Mr Shamsul, in pursuit of finding a good resume layout, sketching more than 5 wireframes could help us brainstorm as well as generate unique Resume layout. 

fig 3 Wireframe sketches #2 week 5 (27/9/2023)

  • I wanted to create a resume for UI/UX design position
  • The sections are organized starting with Profile>Contacts>Education>Work Experience>Skills>Projects

1.4  Attempt on Prototyping in Figma

fig 4 Attempt on creating variation of resume layout week 5 (27/9/2023)

fig 5 Attempt on creating variation of resume layout week 5 (27/9/2023)

For the visual element, I decided to choose the color green (B2BDA0), because it symbolizes calmness, the environment, and development or growth, a kind of traits I would like to present myself  in my resume. Unfortunately, there were a lot of subtle mistakes in terms of the elements used for the resume, such as using the font Futura Std for the body text, Futura leans more toward decorative and interesting(display font, meant to be used sparingly) than practical for text-heavy documents like resumes. 

1.5 Improvised Prototype Resume

After getting feedback from my peers, I decided to change a few things on the resume.


fig 6 Screengrab on Figma week 5 (27/9/2023)

  • I decided to structure the content hierarchy (added Projects according to the content requirements and sections them with a border. In terms of fonts, I changed the title and subheadings to Arial and uses Verdana as the body text. With the font size, Title: Arial, Regular (64pt), Subheading: Arial, Bold (subheading), Body Text: Verdana, Regular (20pt).

fig 7 Improvised Prototype Resume #1 week 5 (27/9/2023)

fig 8 Improvised Prototype Resume #2 week 5 (27/9/2023)


2. Final Project 1-Prototype Design

fig 9 Final Project 1-Prototype Design (JPEG) week 5 (29/7/2023)


                                    fig 9 Final Project 1-Prototype Design (PDF) week 5 (29/7/2023)


REFLECTION

Experience:

During this project, I was able to put into few new things that I have learnt during the lectures and exercises, such as structuring contents according to its relevance. The project introduced me to a new app called Figma, which I've never used before and I've been using Canva to make my previous resume. After using it, I realized that Figma focuses on designer with their prototyping features while Canva is more non-designer friendly, the sitemap was confusing at first but the more I use it the more I got the hang of it.

Observation:

While doing project 1, I realizes how inorganized I handled the process of creating the resume, such as reconstructing the content. There were a lot of content readjustments due to my own negligence in checking on the required contents. Furthermore, I was able to learn a lot in terms of using colour and correct typefaces for resumes can change the contents entirely which is why it is crucial to understand what kind of subtle visuals that we try to express in our resumes.


Findings:

There's a lot that needs to be considered when creating a digital resume, the structuring content, readability and creating an interesting layout that would be eye-catching. 

Labels:

Comments

Post a Comment