INTERACTIVE DESIGN - PROJECT 01


20/5/2023-3/6/2023 (Week 04-06)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Interactive Design | GCD60904 | Sec 04

Project 01


 LIST 

TABLE OF CONTENTS:

1.1 LECTURES

1.2 INSTRUCTIONS

1.3 PROJECT 01

1.4 FEEDBACK

1.5 REFLECTION


 LECTURES 

WEEK 05 - HTML & CSS BASICS

 ID & Class Attribute 
  • ID Attribute
    • Every HTML element can have an ID attribute
    • Used to uniquely identify elements on the page
    • IDs must be unique within the page
    • Allows unique styling via CSS
    • Example use : assign a unique style to a specific paragraph
  • Class Attribute
    • Every HTML element can have a class attribute
    • Identifies multiple element as distinct from others
    • Example use : Style certain paragraphs differently due to their importance
    • Multiple elements can share the same class name 
 Extra Markup 
  • Block Elements
    • Always start on a new line
    • Examples : '<h1>', '<p>', '<u1>', '<li>'
  • Inline Elements
    • Continue on the same line as neighbouring elements.
 Introduction to CSS 
  • Cascading Style Sheet (CSS)
    • Allows creation of rules to style HTML content
  • CSS Rule Structure
    • Selector
      • Targets the HTML elements
  • Declaration
    • Specific styling, consists of :
      • Property : Aspect to change ( e.g : colour, fonts)
      • Value : Desired setting for the property
 CSS Style Rules with HTML Elements 
  • Selectors
    • Indicate which elements the rules apply to
  • Declarations
    • Specify the style properties and values
 Method to Employ CSS 
  • External CSS
    • Use '<link>' element inside the '<head>' element
    • Attributes : 'href' ( path to CSS file ), 'type' ( 'text'/'css' ), 'red' ('stylesheet')
    • Multiples CSS file can be linked
  • Internal CSS
    • Use '<style>' element inside of the '<head>' element 
    • Attribute : 'type' ( 'text'/'css' )
  • Best Practices
    • Use external CSS for multiple pages for consistencies and easier maintenance
 CSS Properties 

  • Colour
    • Set background and text colours, border colours
  • Background 
    • Set background colour, image, repeat, attachment, shorthand
  • Text Formatting
    • Text colour, alignment, decoration, transformation, spacing
    • Specific properties : 'text-indent', 'letter-spacing', 'word-spacing', 'text-shadow'
  • Fonts
    • Web safe fonts : Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT
    • Add customs font using Google Fonts


Fig 1.0 Week 5 Lecture Slides



       INSTRUCTIONS 





       PROJECT 01 

      INSTRUCTIONS

      In this first part of the assignment, We need to create a UI design prototype for our digital resume/CV using Adobe XD or Figma. This prototype will showcase the layout, visual elements, and user interface interactions of our digital resume.

       Process 

      To facilitate an engaging introduction for viewers, I have designed a hero section for the page that succinctly conveys who I am. The introduction is structured to follow a logical hierarchy, guiding the viewer's attention from my name, to my specialization, and then to a brief paragraph about my passions and current field of work. This layout ensures a smooth flow of information from left to right.

      To add a personal touch and make the page visually appealing, I have included a photo of myself at the bottom right corner of the hero section. This not only humanizes the introduction but also helps to create a connection with the viewers. Through this design, I aim to provide a clear, concise, and visually appealing snapshot of who I am and what I do.


      Fig 1.1 Hero Section of The Page


      For the main part of the resume page, I carefully selected the content to include in my resume to create a comprehensive and visually appealing layout. The sections I chose are contacts, social media links, skills, experience, education, and awards.

      Understanding that experience is often the most critical part of a resume, I placed this section prominently in the middle row. This strategic placement ensures that it stands out and immediately catches the viewer's eye.

      On the left side of the page, I included essential information, starting with my contact details at the top, followed by my social media links, and then my skills. This arrangement ensures that vital information is readily accessible.

      On the right side, I placed my education details at the top and followed them with my awards at the bottom. While both education and awards are significant, they serve as complementary information rather than the primary focus. This thoughtful layout prioritizes key sections while presenting a balanced and organized overview of my qualifications.


      Fig 1.2 Main Part of The Resume


      To enhance the overall design of my resume and address the issue of it looking a bit boring and empty, I decided to add another section at the bottom of the main part of the resume. In this section, I placed another image of myself to add a personal touch and create visual continuity.

      To ensure cohesion, I added a rectangle filled with the same background color as the hero section, creating a seamless connection between the sections. Inside this rectangle, I included my date of birth, providing additional personal information in a visually appealing manner. This thoughtful addition not only fills the empty space but also enhances the overall aesthetic and cohesiveness of the resume design.


      Fig 1.3 Last Section of The Page



       Final Outcome 

      Link to Figma


      Fig 1.4 Final Outcome of Project 01



      Fig 1.5 Final Outcome for Project 01, PDF



       FEEDBACK 

      No feedback from tutor 



       REFLECTION 

      This assignment was a comprehensive exercise that enhanced my skills in UI design, content organization, and project presentation. It provided me with practical experience in creating a digital resume that is not only visually appealing but also user-friendly and tailored to specific job applications. This project has equipped me with valuable insights and skills that will undoubtedly benefit me in my future career endeavors.



      Comments

      Post a Comment

      Popular posts from this blog

      GAMES DEVELOPEMNT - TASKS

      Image
      23/04/2025 -21/05/2025 (Week 01-14) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Games Development  | DST611104 | Sec 01  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS   INSTRUCTIONS   TASKS  TASK 01 & 02 : GAMES DESIGN DOCUMENT & GAME ASSETS  TASK 01  For  Task 1  of our Game Development module, our group was formed during  Week 2 . I teamed up with  Mei Hui  and  Emily , and together, we began brainstorming ideas for our 2D side-scrolling game. After some discussion, we decided to draw inspiration from a tabletop game we previously created in one of our past semester projects, titled  "Sudsprite Spin."  We felt that the characters and gameplay mechanics from that game had potential to be developed into a fun and whimsical digital experience. In our 2D game adaptation, the  Sudsprite  becomes the main character. We wanted to preserve the bubbly, playful the...
      Read more

      APPLICATION DESIGN 2 - TASK 2

      Image
      19/05/2025 -08/06/2025 (Week 05-07) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Application Design II | DST60504 | Sec 01 Task 02 | Interaction Design Proposal & Planning  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS 3.REFLECTION   INSTRUCTIONS   TASKS  INSTRUCTIONS For this assignment, we are required to develop a  comprehensive interaction design plan  for our final  web-based mobile application . The goal is to  visually and conceptually prepare the user interactions and animations  that will enhance the overall user experience. The key components of the assignment include: 1. Interaction Design Documents Create  detailed flowcharts and wireframes  to map out the user journey. Clearly show the  layout of each screen  and the  navigation structure  of the app. 2. Animation Prototyping Micro Animations : Design small interactive effects (e.g., button clicks, loading in...
      Read more

      INFORMATION DESIGN - EXERCISES

      Image
      03/02/2025 -11/02/2025 (Week 01-02) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Information Design | GCD60504 | Sec 01 Exercises  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS 3.REFLECTION   INSTRUCTIONS   EXERCISES  EXERCISE 01 - QUANTIFIABLE INFORMATION  Instructions  Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap & more. In this exercise we are required to quantify our chosen objects and arrange them into  a presentable layout or chart .  The information must be presented as is, and we need to arrange the objects with relevant indicators written out with pens to visualize the quantity and data. The examples of objects that can be use are buttons, coins, lego pieces, M&Ms, and more.  Process  During our first tutorial, we were ...
      Read more