Interactive Design | Project 01

16/5/2024- 30/5/2024 / Week 4 - Week 6

Kerly Ooi / 0358726

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Project 01 | Prototype Design

INSTRUCTIONS 

 

PROJECT 1 - Prototype Design | Digital Resume/ CV

For our first project, we needed to create a user interface prototype for our digital resume/curriculum vitae (CV). We required to utilise either Figma or Adobe XD, and the UI design should centre on the layout, visual aspects, and user interactions.


Research :

After looking at all of the instructions and requirements, I started looking up what a digital resume should look like on Pinterest. As, I needed to look at CV examples to get ideas for my own. Below are my references. 

After looking at the instructions and requirements, I started looking through Pinterest for digital resume examples to obtain ideas for my own CV. Below are my references. 



Fig 1.1 References , Week 4

Besides that, I also found a website that suggest the examples of colours palette combination for a resume.



Fig 1.2 Website's header , Week 4


Sketches :



Fig 1.2 Sketches #1 - #4  , Week 4


Process :

Layout without images -






Layout with images and profile picture -





Exploring different colour combinations -







Chosen colour :


Final Outcome :



FEEDBACK

Week 6

Specific feedback : Mr Shamsul commented that my layout was alright, clean and visible. However, he suggested me to add colours since the layout I showed him was the first layout with only grey colours so by adding eye-catching colours to my resume it will provide contrast and it will be more exciting when looking at it.


REFLECTION

During my prototype creation period, I found it exciting to create concepts and bring them to reality. Learning to use Figma was very beneficial since it improved my ability to design compelling website interactions. While reviewing several CV samples, I discovered that, while resumes frequently follow a similar pattern, they stand out by incorporating specific specialisations that boost the individual's professional identity. I used this information to create a prototype design that highlighted my unique style and specialisation. This project taught me the fundamentals of prototyping and creating virtually functional websites. 



Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design | Task 1

Image
22/4/2025 - 13/5/2025 / Week 1 - Week 4 Kerly Ooi / 0358726 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1 | Thematic Interactive Website Proposal TUTORIAL / PRACTICAL WEEK 2 - Introduction to Adobe Animate Card title swf/ html (create new file) html 5 canvas 25 - 30 frames per sec new project (save as index) - upload to Netlify preview (command + return) vector / bitmap - (see pixels) WEEK 3  Animation tutorial square/ rec to circle fluid brush - tool panel- point selection original brush ( limited settings) compared to Fluid brush tool delete everything - double click keyframe (starts / ends) exp to include keyframe select one of the frame / insert, keyframe double click - create shape tween ease out - Quad to loop - publish settings - more settings - loop animations / command + enter Play with timeline break apart text - command + b / modify →break apart Exercise (countdown 10 - 1 ) Adobe Animate WEE...
Read more

Minor Project

Image
23/4/2025 - 1/8/2025 / Week 1 - Week 15 Kerly Ooi / 0358726 Minor Project / Bachelor of Design (Honours) in Creative Media / Taylor's University Final Compilation | Yubari (Expedio) INSTRUCTIONS   TASKS TASK 1 | PROPOSAL Group Formation | Week 1  On the first week, Mr Mike gave us a briefing of the project we will be carrying out in the next 14 weeks. We were instructed to form a group with people from different specializations and choose a topic from given topic lists for the project.  Below are the topics to choose from: WarisanXR Digital Hologram Experience WayangMind – Mindfulness Solution EXPEDIO Project: Self-Watering Pot & Mood Light CONTINENTAL TIRES Project (for SOE groups) IMPACT LAB: Edu4All – The Night School Project IMPACT LAB: Food Security and Nutrition – Food Aid Foundation IMPACT LAB: Innovation and Technology for Sustainable Hospitality and Tourism After reviewing the options, we were required to form groups of 6–7 members. My group decided to c...
Read more

Advanced Interactive Design | Task 2

Image
20/5/2025 - 10/6/2025 / Week 5 - Week 8 Kerly Ooi / 0358726 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2 | Interactive Design Planning & Prototype TUTORIAL / PRACTICAL WEEK 5  Modify - convert to symbol - make sure its graphic Graphic (colour in different keyframe etc) & Stage (change looping etc) Masking background (add frame & lock) / shape - two layers For shape - 20 keyframe - shape tweet right click layer 2 - choose mask   WEEK 6 (Online) - Button exercise  Ease out → Ease In (Quart effect) Movie Clip & Graphic (The differences) right click on the layer (new layer(actions)) - add wizard button → stop → this timeline →NEXT → with this frame → finish and add WEEK 7    INSTRUCTIONS   Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to i...
Read more