Interactive Design - Project 1: Prototype Design

18.8.2023 - 2.10.2023 / Week 04 - Week 06
Tan Zhao Yi / 0363285
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 1 / Prototype Design

LIST


Further Reading


INSTRUCTIONS


Project 1: Prototype Design

In this project, we were instructed to create a digital resume or curriculum vitae (CV) using Adobe XD or Figma. 

Task Requirements:
1. Content & Structure
2. Layout and Visual Design
3. Section and Organisation
4. Visual Elements (icon, placeholder etc.)
5. Presentation - e-portfolio

1. Research
I Google searched digital resume to look for content reference as this is my first time writing a resume myself. I'm not sure if it should be visually representative of my abilities of designing, or just make it simple.
Fig 1.1. Simple CV and Complex CV, Week 5 (25.9.2023)

In Week 5 lecture class, Mr. Shamsul mentioned don't make it too over so I decided to go with a simple one.
2. Sketch
We were required to come out with 5 sketches.
Before that, I divided my contents into sections: 
A. Profile
B. About me
C. Education
D. Work Experience
E. Skills
F. Language
G. Contact me
I didn't manage to include my projects on it because I don't think I have had a work I'm very satisfied with yet.

#1 
Fig 2.1. Sketch #1, Week 5 (25.9.2023)
I've taken the first step by sketching out a basic design idea. While it seems very familiar that you can find millions of them online, it serves as my starting point of crafting my own idea. There's some bars in the Language section, it allows viewers had a more specific understanding of my level of proficiency.

#2
Fig 2.2. Sketch #2, Week 5 (25.9.2023)
My second sketch was inspired by common social media profile. In the Skills section, the boxes represents Adobe softwares which I've learned before, like Illustrator, Photoshop, After Effects etc.

#3
Fig 2.3. Sketch #3, Week 5 (25.9.2023)
In my third sketch, I emphasise my name because I wish viewers had a strong impression on my name.

#4
Fig 2.4. Sketch #4, Week 5 (25.9.2023)
Although this one simple, but surprisingly I like it. I think it creates a visual balanced composition. Also, it meets my expectation on its sequence, which improves readability.

#5
Fig 2.5. Sketch #5, Week 5 (25.9.2023)
Sketch #5 features a straightforward and clean design including small design elements to suit the design industry job hunt.
3. Digitalisation
In the end I decided to go with sketch #4. I'm using Adobe XD to create my digital resume.
Fig 3.1. Digitalisation Progression, Week 5 (29.9.2023)
**click into the image to have a clear look

Attempt #1: It seems very weird for me in my first attempt, looks like it doesn't really match my expectation from my sketch. I added the bars and small circles which have the same usage as I mentioned in sketch #1. 

Attempt #2: In my second attempt, I reduce the bars' height so it wouldn't draw all the attention. 

Attempt #3: I added some minor elements to create sequence. However, it's still looked unbalanced at the top of the page, probably it's because of the image. 

Attempt #4: I cropped it into oval to generate a smoother and more harmonious visual effect. Also I moved my profile to the centre to examine the visual balancing.

Attempt #5: I move it back to left I insist to have the left alignment. To solve the balancing problem, I added a light grey rectangle between the image and text box and I think it works.

Final Project 1: Prototype Design

Fig 4.1. Final Prototype Design - JPG, Week 5 (29.9.2023)

REFLECTIONS

Experience
Creating a digital resume not only enabled me to apply my knowledge of UI, but also provided me with a foundational real-life experience, as it was the first time I had ever written a resume. Throughout the project, I gained hands-on experience with design tools and techniques, which deepened my understanding of UI design and its importance in creating impactful digital experiences.

Observation
I observed that keeping things simple and clear in the design is important. Having a clean layout, easy-to-use navigation, and making sure everything looks good on different screens are key. Also, I noticed that getting feedback from my friends and testing how easy it is for them to use the design helped a lot in making it better.
Findings
One of the key findings from this project is that user-centered design principles are essential for creating effective digital resumes. It's not just about showcasing skills and experiences but also about ensuring that the user can easily access and understand the content. Additionally, I learned that UI design is an iterative process, and it's crucial to remain open to feedback and continuous improvement. 

FURTHER READING

Fig 5.1. The Book of CSS3: A Developer's Guide to the Future of Web Design

Book Title: The Book of CSS3: A Developer's Guide to the Future of Web Design
Author: Peter Gasston

# Section 7: Multiple Columns - Column Layout Methods (pg81 - 87)
People prefer to read short lines of text, roughly 65-75 characters per line.
Designers can divide the content into columns by two ways: 
1. Prescriptive Columns: column-count
  • Setting a specific number of columns
  • E {column-count: columns;}
    • E: Parent of the content divided
    • columns: An integer that sets the number of columns
    • Exp: To split content inside a div element into two columns: div {column-count: 2;}
Fig 5.2. Result of text broken into two columns

2. Dynamic Columns: column-width
  • Specifying the width of columns
  • E {column-width: length;}
    • E: Parent of the content divided
    • length: Width of the column (unit of length - px / em or percentage)
    • Exp: To split content inside a div element into columns 100px wide: div {column-width: 100px;}
Fig 5.3. Result of Dynamic Columns

*A note on readability: Justification is ONLY recommended when you have absolute control on your content, as it appears irregular spaces between words, which can decrease readability.
You can set both column-count and column-width properties in one element.
Fig 5.4. Combing properties

Comments

Post a Comment