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

ADVANCED ANIMATION | EXERCISES

Week 1 –  Week 5 | 22/04/25 – 20/05/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Advanced Animation  | Section 01 | GCD61604 Exercises TABLE OF CONTENTS  1.0 LECTURES 2.0 INSTRUCTIONS 3.0 EXERCISE 1 — BOUNCING BALL ANIMATION     3.1 PROGRESS     3.2 FINAL SUBMISSION 4.0 EXERCISE 2 — BALL WITH TAIL ANIMATION     4.1 PROGRESS     4.2 FINAL SUBMISSION 5.0 EXERCISE 3  — GOOD POSES     5.1 PROGRESS     5.2 FINAL SUBMISSION 6.0 REFLECTION 7.0 FURTHER READING     7.1 WEEK 4 — THE BOUNCING BALL WITH A TAIL 1.0 LECTURES  1.1 WEEK 1 — INTRODUCTION We were introduced to Advanced Animation along with the expectations and objectives of the module. We were also shown some of our seniors' works  and given a taste of future assignments. Due to Mr Kamal's absence during Week 2, we were taught Week 2's material this week. 1.2 WEEK 3 —  2.0 INSTRUCTION...
Post a Comment
Read more

DESIGN PRINCIPLES | LECTURE NOTES

Week 1 –  Week 2 | 06/02/24 – 14/02/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Design Principles | Section 01 | GCD60804 Lecture Notes TABLE OF CONTENTS 1.0 ELEMENTS & PRINCIPLES OF DESIGN 2.0 CONTRAST & GESTALT THEORY 3.0 BALANCE & EMPHASIS 4.0 REPETITION & MOVEMENT 5.0 HARMONY & UNITY 6.0 SYMBOL, WORD & IMAGE 7.0 VISUAL ANALYSIS 1.0 ELEMENTS & PRINCIPLES OF DESIGN ELEMENTS OF DESIGN: Design elements are individual "building blocks". Point, line, shape, form, texture, space, and colour. PRINCIPLES OF DESIGN: Design principles are rules that guide the arrangement of the elements. Contrast, balance, emphasis, rule of thirds, repetition / pattern / rhythm, movement, hierarchy, alignment, harmony, unity, and proportion. 2.0 CONTRAST & GESTALT THEORY CONTRAST: Definition of Contrast:  The juxtaposition of strongly dissimilar elements. Purpose: To provide visual interest. To emphasise a point. To express content...
Post a Comment
Read more

INTERACTIVE DESIGN | EXERCISES

Week 1 –  Week 8 | 23/04/24 – 11/06/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Interactive Design | Section 03 | GCD60904 Exercises TABLE OF CONTENTS  1.0 LECTURES     1.1 WEEK 1 — INTRODUCTION & BRIEFING     1.2 WEEK 1 — USABILITY     1.3 WEEK 3 — UNDERSTANDING WEBSITE STRUCTURE     1.4 WEEK 4 — THE WEB & LANGUAGE     1.5 WEEK 5 — HTML 2.0 TUTORIALS     2.1 WEEK 2 — PROTOTYPE DESIGN     2.2 WEEK 4 — HTML WEBPAGE #1 (PART 1)     2.3 WEEK 5 — HTML WEBPAGE #1 (PART 2)     2.4 WEEK 6 — HTML WEBPAGE #1 (PART 3)     2.5 WEEK 7 — HTML WEBPAGE #1 (PART 4)     2.6 WEEK 9 — HTML WEBSITE #2     2.7 WEEK 10 — FINAL PROJECT SAMPLE 3.0 INSTRUCTIONS 4.0 EXERCISE 1 — WEB ANALYSIS     4.1 WEBSITE #1 — HAUS     4.2 WEBSITE #2 — ARTS TECH 5.0 EXERCISE 2 — WEB REPLICATION     5.1 MAIN PAGE #1 — BANDIT R...
Post a Comment
Read more