Interactive Design - Project 01: Prototype Design
INTERACTIVE DESIGN GCD 60904
WEEK 04 - WEEK 06 (15.05.2024 - 29.05.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 04
Interactive Design - Project 01: Prototype Design
- LIST -
TABLE OF CONTENT1. Instruction
2.2
Looking for idea
2.6
Final Prototype
3.
Feedback
4.
Reflection
To the TOP ↑
1. INSTRUCTION
Module Information Booklet (MIB)
<iframe
src="https://drive.google.com/file/d/1YEH0Ri7vzbhdZBqUNjLtI80L6MrIDxmn/preview"
width="640" height="480" allow="autoplay"></iframe>
To the TOP ↑
2. PROJECT 01: PROTOTYPE DESIGN
In this project we are tasked to make a digital resume (CV) ad come up with the relevant content for the CV. We need to decide on a layout and visual design (type colour and imagery), and have a good organization of information in the CV.
Figure 2.1 Requirement from Mr Shamsul
2.1 Drafting the CV
Before I started up the CV, I decided to write down all the content of the CV.Name: Chin Tze Wei
About: Ello~!!! I am a first year design student from Taylor's
University who plans to major in UI/UX design. I am a passionate designer and
willing to learn person. I hope to improve my design skills and become a
skillful person in the future.
Education: August 2022, Taylors's Collage (Foundation in Design). September 2023, Taylor's University (Bachelor of Design (Honors) in Creative Media).
Experience: March 2022, Part-Time job at Restaurant. October 2022, Part-Time job in Sunway Pyramid.
Skills: Adobe Photoshop, Adobe Illustrator, Adobe InDesign, Adobe Premiere Pro
Project: E-Portfolio (Blogger)
Contact: Instagram (TzeWei_1029), Phone Number (+60142823030), E-Mail (tzewei1029@gmail.com)
2.2 Looking for Idea
After drafting the CV, I went onto Pinterest to look for some idea.
Here is the link link
to the inspo board on Pinterest.
Figure 2.2 Idea for resume (CV)
2.3 Sketching wireframes
After all the findings in Pinterest, I start to sketch out my idea for the wireframes.
Figure 2.3 Sketch 01
2.4 Exploration Figma
Since this time is my first time to use Figma, therefore before using it to
digitalize my resume, I start to explore Figma.
2.4.1 Sign-Up
I first sign-up Figma using my Google Account.
2.4.2 Explore
After I sign-up Figma, I start to explore Figma.
Figure 2.4 Explore Figma
2.5 Digitizing in Figma
After getting the sketch is done, I started doing the digitization using Figma. I had never used Figma before so this was really a hard time for me.2.5.1 Working Process
I first open a new frame and rename the file as "Project 01".
Figure 2.5 Open a new frame using Frame Tool
Next, I decided to open the "Layout Grid", this can adjust the text and elements makes then more allign.
Figure 2.6 Open Layout Grid
I decided to add all the content and layout first before moving to the colour
Figure 2.7 Add all content into the frame
After finnishing the layout and typesetting, I start to decide on the colour palette.
Figure 2.8 Colour Palette
After decided the colour palette, I start to used in the layout.
Figure 2.9 Working Proress 01
After I put on the colour to the layout, I found out that the colour and layout is very messy and I don't like it that much, so I have to change the whole design again. I then sketch a new design layout and digitalize all over again.
Figure 2.10 Sketch 02
This is the new design with the same colour palette, but in different transparency.
Figure 2.11 New design layout
After finnishing the new layout, I start to add all the information text and my photo into the frame.
Figure 2.12 Add all information into the layout
When I finished, I was not satisfied, and I thought there was still something to be improved. For example, layout and fonts. Because the current version is a little too crowded, it might be better to loosen it up a bit, or replace the text with some interactive elements to save spaces.
Figure 2.13 Improvement layout
This was my new layout in new frame size. I have made changes on the content, which I have added the content, which make m resume more plentiful. I have added the part, "About Me", "Personalities", "Hobbies", "Languages" and "Abilities". I have also added several icon that make my resume (CV) more attractive and easy to read.
Figure 2.14 New layout in new frame size
Figure 2.15 Icon download from website
After that, I went to Colour Hunt to select colour palette for my layout.
Figure 2.16 Colour Palette (Final Layout)
After decided the colour palette, I then put them into the layout.
.jpg)
Figure 2.17 Final Layout with colour
These are all the layout and working progress that I have done for this project 01.
Figure 2.18 Working Progress for the project
2.6 Final Prototype
.jpg)
Figure 2.14 Final Prototype (JPEG File)
Figma embeded file
Font used: 1. Libre Caslon Display 2. Source Serif Pro 3. Crimson Text
Heading 1 size: 128px
Heading 2 size: 55 px
Subheading 1 size: 36px
Subheading 2 size: 32px
Information Text size: 27px
To the TOP ↑
To the TOP ↑
I found my experience with this task to be satisfactory. To be honest, this task mainly involved me browsing Pinterest for inspiration on how to design a website, as I don't have much experience in that area.
To the TOP ↑
To the TOP ↑
3. FEEDBACK
No feedback given from Mr Shamsul.
To the TOP ↑
4. REFLECTION
This project provided a great introduction to web layout. I learned that when designing a webpage, it's important to keep the amount of text to a minimum to avoid clutter. However, a well-organized paragraph of text can also be effective. It also made me realize the importance of presenting information on a screen.I found my experience with this task to be satisfactory. To be honest, this task mainly involved me browsing Pinterest for inspiration on how to design a website, as I don't have much experience in that area.
To the TOP ↑
