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

VIDEO & SOUND PRODUCTION | FINAL COMPILATION

Week 1 –  Week 15 | 26/04/24 – 04/08/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Video & Sound Production | Section 03 | VSP60104 Final Compilation TABLE OF CONTENTS  1.0 PROJECT 1 — AUDIO EDITING EXERCISES     1.1 EXERCISE 1 — AUDIO DUBBING     1.2 EXERCISE 2  — SOUND SHAPING 2.0 PROJECT 2 — SHOOTING & EDITING     2.1 PROJECT 2A — PRODUCTION SHOOT     2.2 PROJECT 2B  — IG / TIKTOK VIDEO 3.0 FINAL PROJECT — STOP-MOTION 1.0 PROJECT 1 — AUDIO EDITING EXERCISES  1.1 EXERCISE 1 — AUDIO DUBBING Google Drive Link to Project 1 blog post Figure 1.1-1:  Exercise 1 — Video (Final Submission), Week 4 (19/05/24) Figure 1.1-2:  Exercise 1 — PPT (Final Submission), Week 4 (19/05/24) 1.2 EXERCISE 2 — SOUND SHAPING Google Drive Figure 1.2-1:  Exercise 2 — Phone Call Sound Effect (Final Submission), Week 10 (27/06/24) Figure 1.2-2:  Exercise 2 — Closet Sound Effect (Fina...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 3 — FINAL PROJECT

Week 6 –  Week 8 | 11/03/24 – 29/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 3 — Final Project TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 3 — FINAL PROJECT     2.1 TASK DELEGATION     2.2 SKETCHES     2.3 CRAFTING     2.4 DECORATING & ASSEMBLY     2.5 PHOTOSHOOT      2.6 FINAL SUBMISSION 3.0 FEEDBACK     3.1 WEEK 7 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 3 — FINAL PROJECT Instructions:   Produce a visual design outcome that reflects your interpretation and definition of "framing". Consider the cultural and aesthetic aspects of your design. 2.1 TASK DELEGATION 1. KANZASHI OF THE PAST: Sketching:  Ying Ying, Velicia Crafting:  Emily, Velicia Decorating:  Emily, Ying Ying Photoshoot: Ying Ying (photography), Velicia (modelling), Emily (editing) 2. KANZASHI OF THE PRESENT: Sketching:...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 2 — FIELD STUDY

Week 4 –  Week 5 | 26/02/24 – 10/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 2 — Field Study TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 2 — FIELD STUDY     2.1 RUNDOWN     2.2 OSAKA     2.3 KYOTO     2.4 NARA     2.5 INFORMATION COMPILATION      2.6 FINAL SUBMISSION 3.0 FEEDBACK 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 2 — FIELD STUDY Instructions:   Collect research materials (i.e. visual, oral, textual, tactile artefacts) to support Project 1. All research materials must be recorded, documented, and should include information such as: Type of artefact / material. Purpose. Symbolism. Cultural / historical background. 2.1 RUNDOWN We decided to base our field of research on the three major cities in the Kansai region: Osaka, Kyoto, and Nara . This is for two reasons: 1. The Heart of Japan:  Osaka is known...
Post a Comment
Read more