Skip to main content

INTERACTIVE DESIGN | PROJECT 1 — PROTOTYPE DESIGN

Week 4 – Week 6 | 14/05/24 – 28/05/24
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Interactive Design | Section 03 | GCD60904
Project 2 — Prototype Design

TABLE OF CONTENTS 

1.0 LECTURES 

1.1 WEEK 7 — CSS SELECTORS

CSS SELECTORS:
  • Purpose: 
    • To target and define which HTML elements should receive specific styles.
    • E.g. Colours, fonts, and spacing.
    • To control the presentation and layout of a webpage.
  • 1. Universal Selector:
    • Purpose: To select all elements on the webpage.
    • Represented by: Asterisk (*)
    • Use with caution, as it can affect all elements and cause inefficient CSS.
    • E.g.
      * {
      padding: 0;
      margin: 0;
      }
  • 2. Element Selector:
    • Purpose: To target  HTML elements by their tag name.
    • The simplest type of selector.
    • E.g.
      p {
      text-align: left;
      }
  • 3. ID Selector:
    • Purpose: To target an element by a specific ID attribute.
    • Represented by: [Hashtag (#)] + [ID name]
    • E.g.
      #my-element {
      display: inline;
      }
  • 4. Class Selector:
    • Purpose: To target an element by a specific class attribute.
    • Represented by: [Full stop (.)] + [class name]
    • E.g.
      .my-class {
      margin: auto:
      }
  • 5. Descendant Selector:
    • Purpose: To select elements that are descendants of another element.
    • Can specify a hierarchy of elements to target.
    • E.g. To style all <a> elements within a <div> with class "container":
      .container a {
      color: red;
      text-decoration: none;
      }
  • 6. Attribute Selector:
    • Purpose: 
      • To select elements with a specific attribute value.
      • To style elements based on their attributes.
    • Represented by: [attribute="value"]
    • E.g.
      input[type="text"] {
      border: 1px solid blue
      }
  • 7. Child Selector:
    • Purpose: To select elements that are direct children of other elements.
    • E.g. To select the immediate children <li> of a <ul>:
      ul > li {
      list-style: none;
      }
  • 8. Pseudo-class Selector:
    • Purpose: To select elements based on their state or position in relation to other elements.
    • Represented by: [Selector] + [colon (:)] + [pseudo-class]
    • Common pseudo classes: :hover, :active, :visited, :link, :focus, and :nth-child(n).
    • E.g. 
      a:hover {
      color: red;
      }
  • 9. Pseudo-element Selector:
    • Purpose: To select parts of an element.
    • Represented by: [Selector] + [double colon (::)] + [pseudo-class]
    • Common pseudo-elements: ::before and ::after.
    • E.g. 
      p::first-line {
      font-weight: bold;
      }
  • 10. Adjacent Sibling Selector:
    • Purpose: To select and style elements that are immediately preceded by a specific element.
    • Represented by: [Element] + [adjacent]
    • E.g.
      h1 + p {
      margin-top: 0;
      }
  • 11. General Sibling Selector:
    • Purpose: To select all elements that are siblings of a specific element.
    • Represented by: [Element] ~ [siblings]
    • E.g.
      h1 ~ p {
      color: blue;
      }
  • 12. Complex Selector:
    • Purpose: 
      • To select the nth child element.
      • To select the nth child of a specific type among its siblings.
    • E.g.
      ul li:nth-child(odd) {
      background-color: gray;
      }
    • E.g.
      p:nth-of-type(2) {
      font-size: 18 px;
      }

1.2 WEEK 9 — BOX MODEL

DISPLAY PROPERTY:
  • Purpose of Display: To control layout in CSS.
  • Every element has a default display value depending on the element type.
  • Can be overridden.
    • E.g. When making inline li elements for horizontal menus.
  • Default display for most elements:
    • Block.
    • Inline.
  • Other display properties:
    • Inline-block.
    • Flex.
    • Grid.

Figure 1.2-1: Block-level Element
  • 1. Block-level Element:
    • Standard block-level element: <div>
    • Properties:
      • Starts on a new line.
      • Takes up the full width available — stretches out to the left and right as far as possible.

Figure 1.2-2: Inline Element
  • 2. Inline Element:
    • Standard inline element: <span>
    • Properties:
      • Does not start on a new line.
      • Takes up as much width as necessary.
      • Can wrap text inside a paragraph without disrupting the flow of the paragraph.
    • E.g. <span>This is an example</span>

BOX MODEL:
Figure 1.2-3: Box Model Structure
  • Most HTML elements are containers. Container = box model.
  • Box model structure, from inside to out:
    • Content.
    • Padding.
    • Border.
    • Margin.
  • The size of each of the layers in a box model can be specified using the usual CSS units of measurement (i.e. em, %, and px).
  • E.g. The following <p> is wrapped inside a <div>:
    <div>
    <p>This is a paragraph<p>
    </div>

FLEXBOX (FLEXIBLE BOX LAYOUT):
Figure 1.2-4: Main Axis — flex-direction: row

Figure 1.2-5: Main Axis — flex-direction: column

Figure 1.2-6: Cross Axis — flex-direction: row

Figure 1.2-7: Cross Axis — flex-direction: column

  • 1. Flex Container: The parent element.
    • Represented by: display: flex
    • Common properties:
      • display: flex — Establishes a flex container.
      • flex-direction — Defines the direction of the flex items (row and column).
      • justify-content — Aligns flex items along the main axis (start, end, centre, space-between, and space-around).
      • align-content — Aligns flex items along the cross axis (start, end, stretch, and centre.
  • 2. Flex Items: The children of the flex container.

2.0 INSTRUCTIONS 


3.0 PROJECT 2 — PROTOTYPE DESIGN 

Instructions: 
  1. Create a UI design prototype for your digital resume or curriculum vitae (CV).
  2. The prototype should showcase the layout, visual elements, and user interface elements of your digital resume or CV.
  3. Software: Adobe XD / Figma.
  4. Requirements: 
    1. Content & Structure: 
      1. Content: Personal details, education, work experience, skills, projects, etc.
      2. Structure: Decide on the order and hierarchy of the sections based on their importance and relevance.
    2. Layout & Visual Design: Apply a consistent visual design using typography, a consistent colour palette, and appropriate spacing.
    3. Sections & Organisation: 
      1. Sections: "Profile", "Education", "Experience", "Skills", "Projects", "Contact", etc.
      2. Organisation: Prioritise sections based on their relevance and significance to your targeted position.
    4. Visual Elements: Relevant images, icons or placeholders.
  5. Size: 1400 (W) × infinite (H) px.

3.1 RESEARCH

Figure 3.1-1: Mood Board, Week 5 (24/05/24)

I like the condensed, compartmentalised look that some of my references have. I'm going to emulate that for my resume. 

Figure 3.1-2: Colour Palette, Week 5 (24/05/24)

I considered going monochrome like some of my references since it could make my design more cohesive, however, a drawback to this is that my resume could also look very plain. Instead, I went with a mostly green colour palette with a light colour (beige) and an accent colour (peach).

On to the colours themselves: I chose an earthy colour palette for my resume because 1. it's soothing and easy on the eyes, and 2. I like green (lol).  

3.2 CONTENT

Before planning the layout, I listed all the information I wanted to include in my resume to make the sketching process easier. Listed according to relevance:
  • 1. About Me:
    • Personal Details:
      • Name: Emily Soh Ching-Ling
      • Introduction: I’m Emily Soh, a Kuala Lumpur-based animator and graphic designer who’s all about creating meaningful and inspiriting visual experiences for people.
      • Birthday: 18 August (Optional)
      • E-portfolio: https://escl-0359478-portfolio.blogspot.com/
    • Contact Info:
  • 2. Technical Skills:
    • Software: Ps, Ai, Id, Ae, Pr
    • Illustration
    • Animation
    • Graphic Design
    • Website Design
  • 3. Languages:
    • English
    • Chinese
    • Malay
  • 4. Projects:
    • 2020: Kaleidoscope 2020
      • DTP artist and editor of digital magazine
      • Chong Hwa Independent High School, Kuala Lumpur, Malaysia
    • 2021: Kaleidoscope 2021
      • DTP artist of digital magazine
      • Chong Hwa Independent High School, Kuala Lumpur, Malaysia
  • 5. Education:
    • 2023 – Present: Creative Media Design
      • Taylor’s University
    • 2022 – 2023: Foundation in Design
      • Taylor’s College
    • 2017 – 2021: Secondary
      • Chong Hwa Independent High School
  • 6. Interests (Optional):
    • Embroidering
    • Puzzle-solving
    • Worldbuilding

3.3 SKETCHES

Figure 3.3-1: Sketches, Week 6 (25/05/24)

Chose Sketch #1 because it looks more dynamic and balanced.

3.4 PROTOTYPE

Figure 3.4-1: Icons & Images, Week 6 (26/06/24)
Icon source: Freepik, Software: Photoshop


Figure 3.4-2: Screenshot of Figma, Week 6 (27/06/24)

3.5 FINAL SUBMISSION


Figure 3.5-1: Prototype — Figma (Final Submission), Week 6 (27/06/24)

Figure 3.5-2: Prototype — PDF (Final Submission), Week 6 (27/06/24)

4.0 REFLECTION 

Sometimes, realising the vision in your head simply takes too much time. Simplifying my original idea would've made the sketching process much faster without losing its essence. I spent a good chunk of my time and brainpower on the sketches when I could've spent less without compromising the quality. 

Hindsight is 20/20, I guess. 

Labels:

Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT II | COMPILATION

Week 1 –  Week 7 | 03/02/25 – 22/03/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Major Project II | Section 06 | PRJ64804 Compilation TABLE OF CONTENTS  1.0 INSTRUCTIONS 2.0 COMPILATION       2.1 PROJECT RECAP     2.2  PRE-MPII PROGRESS     2.3 MAJOR CHANGES SINCE MPI     2.4 ENVIRONMENTAL ASSETS     2.5 CHARACTER ASSETS (SCRAPPED)      2.6 FINAL SUBMISSION 3.0 FEEDBACK 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 COMPILATION  Instructions: 2.1 PROJECT RECAP This is a continuation of Major Project I . I will be working on the VR game, Quest of Twelve , with the same group members: Emily Soh Ching-Ling, me  (Digital Animation). Lim En Yu (Digital Animation). Low Li Vern  (Digital Animation). Ng Kar Yee (Immersive Design). Quest of Twelve  is an educational 3D VR game about the twelve Chinese animal zodiacs. The player is introduced to the Chinese zodia...
Post a Comment
Read more

MAJOR PROJECT I | TASK 3 — CONCEPT PRESENTATION

Week 6 –  Week 7 | 11/03/25 – 18/03/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Major Project I | Section 01 | PRJ64904 Task 3 — Concept Presentation TABLE OF CONTENTS  1.0 INSTRUCTIONS 2.0 TASK 3 — CONCEPT PRESENTATION     2.1 ENVIRONMENT DESIGN PIPELINE      2.2 FINAL SUBMISSION 3.0 FEEDBACK      3.1 WEEK 7 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 TASK 3 — CONCEPT PRESENTATION  Instructions:   Project Integration & Feasibility: Clearly define the project concept. Highlight how it evolved from Task 1 to Task 2. Demonstrate how initial ideas were refined and expanded upon (iterative design and technical research). Design Execution & Development: Showcase the final design/concept art (character model sheets, character poses and expressions, environment design, storyboards, animatics, etc.). Provide visual evidence (e.g. mood boards, wireframes, breakdowns, animation previews). Explai...
Post a Comment
Read more

ANIMATION FUNDAMENTALS | PROJECT 1 — PRE-PRODUCTION FOR 2D ANIMATION

Week 4 –  Week 8 | 15 /10/25 – 12 /11/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Animation Fundamentals | Section 01 | GCD61104 Project 1 — Pre-Production for 2D Animation TABLE OF CONTENTS  1.0 LECTURES     1.1 WEEK 4 — ANIMATION PRINCIPLES (PART 3) 2.0 INSTRUCTIONS 3.0 PROJECT 1A — CHARACTER DESIGN     3.1 CHARACTER INFORMATION     3.2 RESEARCH & CHARACTER DESIGN     3.3 CHARACTER TURNAROUND SHEET     3.4 CHARACTER POSES SHEET     3.5 CHARACTER FACIAL EXPRESSIONS SHEET      3.6 FINAL SUBMISSION 4.0 PROJECT 1B — BACKGROUND DESIGN     4.1 RESEARCH     4.2 SKETCHES & WIP     4.3 FINAL SUBMISSION 5.0 FEEDBACK     5.1 WEEK 5     5.2 WEEK 6 6.0 REFLECTION 1.0 LECTURES  1.1 WEEK 4 — ANIMATION PRINCIPLES (PART 3) Animation Principles (Part 3) 6. Appeal: Definition: Likable qualities; charisma for animated draw...
Post a Comment
Read more