Interactive Design | Project 1

on
19.09.2023 - 3.10.2023 (Week 4- Week 6)
Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative Media
Interactive Design 
Project 1

LECTURE

Week 4
We learn how to write a HTML code to create a webpage.  We learn how to write the HTML element for web Body, Heading, Title, Paragraph. Other elements include writing Bold & Italic words, Ordered list & Unordered list, imbedding links. and adding images

Practical

Webpage Exercise:

My Profile Page:


Week 5
We learn about the ID and Class attribute in HTML and the CSS for our class actitvity we learn how to customize our webpage. 

Practical

Customized Profile Page:
My Profile (wondrous-sawine-2ae4bd.netlify.app)


Week 6
Our lecture is about different types of CSS Selectors, there is Universal Selector, Element Selector, ID Selector, Class Selector Descendant Selector, Child Selector, Pseudo-class Selector and a Pseudo-element Selector. In Class we had a tutorial how to use the CSS in our HTML code.

Practical

Profile Page with CSS:
Selector (jocular-baklava-13a747.netlify.app)


Week 7
On week 7 we learn about the Display Property and Box model in CSS 


Week 8
(Independent learning week.)

INSTRUCTION

 

Project 1 / Prototype Design - Digital Resume/CV

In Project 1, we to use either Adobe XD or Figma to design prototype for a digital resume.  We have to showcase layout, visual elements. and user interactions on the resume the max width is 1330px and the Frame is Desktop.

Initial Layout

Moodboard
I pick out a picture from the internet. to create a moodboard, 
Fig 1.1 Initial Layout Moodboard (23/9/2023)

Content 

Profile:
I am a bachelor's degree Creative media student interested in learning the inner workings of a graphic designer and how it engages people in mundane objects. Confidant and Passionate to inspired people and lift spirit by communicating them thought design. I am detail-oriented and always finish my work on time. Thanks to the aid I revive from my lectures throughout the years, challenging my creative thinking skills. I am ready to utilize my skills at it is fullest.

Personal Details
  • D-7-1, Subang Jaya, Selangor, Sri Baya Condominium, USJ 11
  • 012-384-4841
  • caitlinong012@gmail.com
  • Portfolio Caitlin Ong (0343801)
Work Experience
  • April 2022 - August 2022: Intern at CHS Interior Decoration SDN BHD I work at CHS Interior Decoration SDN BHD during my Industrial training in Diploma in Interior Design where I help create working drawing for furniture and render photos of house interior.

Education:
  • Jan 2009 – Nov 2013: Primary education (IGCSE), Taylor’s International School, KL
  • Jan 2014 – Nov 2019: Secondary education (IGCSE), Taylor’s International School, KL
  • April 2020 – Present:  Taylor’s College, KL 

Skills:
  • Photoshop 
  • Illustrator 
  • After Effect 
  • InDesign 

Accomplishments:
  • December 2019: Award for Acting with Integrity
  • December 2019: Award for Tenacity
  • December 2019 Award for Passionate
  • Jun 2023: Finalist in My Tiger Competition

Volunteer Experience
Taylor’s International School:
  • 2014: Volunteer for World Hunger Day
  • 2016: Committee for a day orphanage programme
  • 2017: Plant mangrove trees program
  • 2018: Visit The old folks home, spens a day with them

Project

Design Principles:
  • Exercise 1 & 2
  • Project 1: Self Portrait 
  • Final Project: Visual Analysis

Typography:
  • Task 1: Exercise 1 - Type Expression
  • Task 1: Exercise 2 - Text Foromattion
  • Task 2: Typographic Exploration & Communication
  • Task 3: Type Design & Communication
Digital Photography and Imaging
  • Project 1: Physical Design & Digital Collage Design
  • Project 2: Poster Design
  • Final Project: Self-Titled 
Illustration and Visual Narrative 
  • Project 1: Exercise 1 - Vormator Character
  • Project 1: Exercise 2 - Illustrated Typography 
  • Project 2: Illustration Poster - MyTIGER Values Art
  • Project 3: Digital Triptych
  • Final Project: Motion Comic

Sketch
From the mood board as reference, I draw out three layouts. Layout 1 is a standard layout for any other resume, Layout 2 is a radial formant and Layout 3 is a modular formant.

Fig 1.2 Initial Layout Sketch (23/9/2023)



Layout
From there I organize the composition in Figma. During development I didn't know that Frame is Desktop in a horizontal formant, so I made some adjustments on the original composition.  to fit the horizontal formant.

Fig 1.3 Initial Layout 1 (23/9/2023)


Fig 1.4 Initial Layout 2 (23/9/2023)


Fig 1.5 Initial Layout 3 (23/9/2023)




Refinement

Accordioning to Mr. Rahman the layout is supposed to be portrait and the composition I done is not supposed to be infographic. I redo the composition.


Updated Mood board 
I find more reference form the internet. 

Fig 2.1 Updated Moodboard (24/09/2023)


Sketches
Mr. Rahman said that the 5 sketch is requirement so I draw new sketches for the layout. 

Fig 2.2 Updated Sketches (24/09/2023)


Layout
I choses Layout 2, 4, & as the best one and I organize the layout accordingly in Figma. For the icons I use a website called Icon finder. When I Watch Figma Tutorial for guidance and Iearned that using columns system can l help me make the compositions organized. 

Iconfinder Link: https://www.iconfinder.com/

Figma Turoial Link: (1) Introducing Figma: A Beginners Tutorial (2023 UI UX Design) - YouTube


Fig 2.3 Updated Layout (24/09/2023)

Fig 2.4 Updated Layout with Columns (24/09/2023)


Color Reference
I search on the internet for color scheme reference for the layout.

Fig 2.5 Color Reference (24/09/2023)

The Layout on the left is. the color I pick on my own while the other layout I had taken from the refences. 

Fig 2.6 Layout with color (24/09/2023)


Draft Resume
I created my draft. based on the Layout color (Fig 2.6). I personal like the color from (Fig 2.6, Left) Pick the color scheme as the final.

Fig 2.7 Layout Draft 1 (24/09/2023)


Fig 2.8 Layout Draft 2 (24/09/2023)


Final Outcome
Mood board
I show my resume in What Apps and one of my friends made it to a website style resume, thinking I made a mistake I change my resume into a website style. I search on the internet for website resume templates for a new moodboard.

Fig 3.1 Moodboard for Final Resume  (24/09/2023)


Final Resume
In my resume I put my name and profile photo on the Hero shot, when you scroll down there is about section along with Education, Volunteer Experience Work experience information. The Skill section has a list of software I use, and it is presented in a stye of a loading screen.  The Project section is presented in a Carousel format. Lastly The Contact Information is located in the Footer. From the feedback I received from Mr. Rahman my resume does not need a navigation section and the picture should be related to the Project Subject.

Fig 3.2 Final Resume Before Adjustment  (24/09/2023)

Final Outcome
Fig 3.3 Final Resume After Adjustment (24/09/2023)


Fig 3.4 Final Resume After Adjustment with Grid (24/09/2023)


Figma

Final Resume

Fig 3.5 Figma Final Resume  (24/09/2023)

FEEDBACK

Week 6
  • First draft looks ok
  • Final design is niciely done but remove menu on the top

REFLECTION

Experience
After looking at every single reference it is hard to come up with an original layout since several of them overuse the same layout and I am having difficulty on how the content is supposed to be arranged.

Observation

From the resume reference I collected, I identify design element that standout and mix and match those elements together to create my own layout.

Findings 

I often had trouble on deciding on the right color scheme as some of them ended up, unsuitable for my format so decided to mix up color from other resources, to create a color scheme of my own. 

Comments

Post a Comment