INTERACTIVE DESIGN - PROJECT 02


3/6/2023-26/6/2023 (Week 06 - 11)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Interactive Design | GCD60904 | Sec 04

Project 02


 LIST 

TABLE OF CONTENTS:

1.1 LECTURES

1.2 INSTRUCTIONS

1.3 PROJECT 02

1.4 FEEDBACK

1.5 REFLECTION


 LECTURES 

WEEK 07 - CSS SELECTORS
  • CSS selectors target and style HTML elements on a web page
  • They define which elements receive specific styles (e.g., colours, fonts, spacing)
  • Selectors are crucial for controlling web page presentation and layout

 Universal Selector 
  • Selects all elements on the page
  • Represented by an asterisk (*)
  • Should be used with caution to avoid inefficient CSS
  • Example :
        *{
        padding :0;
        margin:0;
        }

 Element Selector 
  • Targets HTML elements by their tag name
  • Example :
    • 'p' selector targets all '<p> (paragraph) element
        p {
        text-align:left;
        }

 ID Selector 
  • Targets an element with a specific 'id' attribute
  • IDs must be unique within an HTML document
  • Use '#' followed by the ID name to select an element 
  • Example :
        #my-element {
        display : inline;
        }

 Class Selector 
  • Targets element with a specific class attribute
  • Multiple elements can share the same class
  • Syntax: ',className'
  • Example :
        .my-class {
        margin : auto;
        }

 Descendent Selector 
  • Selects elements that are descendants of another element 
  • Specify a hierarchy of elements to target
  • Example : Style all '<a>' elements inside a '<div>' with class "container"
        .container a {
        colour: red;
        text-decoration: none;
        }

 Attribute Selector 
  • Selects elements with a specific attribute value, used for styling elements based on their attributes.
  • Syntax : '[attribute=value]'
  • Example :
        input[type="text"] {
        border :1px solid blue;
        }     

 Child Selector 
  • Selects elements that are direct children of another element 
  • Example : 
        ul > li {
        list-style: none;
        }
  • Applies the style ( 'list-style: none;') only to '<li>' elements that are direct children of '<ul>' elements 
  • This selector ensures that only immediate child '<li>' elements within '<ul>' are affected, ignoring nested '<li>' elements within deeper levels of hierarchy.
 Pseudo-class Selector 
  • Selects elements based on their state or position in relation to other elements
  • Common pseudo-class include :
    • :hover
    • :active
    • :visited
    • :link
    • :focus
    • :nth-child(n)
  • Example :
        a:hover { 
        color:red;
        }

 Pseudo-element Selector 
  • Targets part of an element, not the element itself
  • Common pseudo-elements include '::before' and '::after'
  • Example :
        p::first-line {
        font-weight: bold;
        }

 Adjacent Sibling Selector 
  • Used to select an element that immediately follows another specific element. 
  • Syntax : 'element1 +element2'
  • Example :
        h1 + p {
        margin-top: 0;
        }

 General Sibling Selector 
  • Syntax : element~sibling
  • Selects all elements that are siblings of a specific element
  • Styling all sibling elements that follow a specific element
  • Example :
        h1 ~ p {
        color : blue;
        }


Fig 1.0 Week 7 Lecture PDF


       INSTRUCTIONS 





       PROJECT 02 

      INSTRUCTIONS

      In this assignment, we need to transform a static prototype from project 01 into a fully functional and interactive web page using HTML and CSS. We have to analyse the layout, typography, colour scheme, and imagery of your static prototype. We were require to use HTML and CSS to translate the design elements into code, ensuring accuracy to the original prototype. 

       Process 

      I began by analyzing the prototype I created in the previous task, extracting visual elements such as layout structure, text content, color schemes, and images. Using Adobe Dreamweaver, I then translated the content from the Figma mockup into HTML, creating an index.html file and a css.style file.

      Fig 1.1 Process of Project 02



      Fig 1.2 Process of Project 02



      Fig 1.3 Process of Project 02


      I then started writing the code for the style.css file to add design to my webpage.

       Global Styles ('body') 

      • Set margins and padding to 0 for the entire document
      • Background color is dark (#1C1C1A)
      • Font is 'Lexend Deca' for the entire document
      • Text colour is (#F5F5F5)
      • Text alignment is right-aligned
       Hero Section (.'hero') 
      • Occupies full width for responsiveness ('width: 100%')
      • Fixed height of 950px
      • Positioned relatively to its container
      • Background colour matches the body (#1C1C1A)

       Text Content ('.text-content') 

      • Positioned absolutely within '.hero'
      • Top-aligned at 150px from the top
      • Right-aligned with a margin of 20 px from the right
      • Width set to 40% of '.hero' width
      • Font size is 20px with 'Lexend Deca' font family.
      • Text alignment is left-aligned
       Hero Image (.'hero-image') 
      • Positioned absolutely within .'hero'
      • Top aligned at 480px from the top
      • Right-aligned with a margin of 40px from the right
      • Height set to 700px and width to 550px
      • Uses 'object-fit: cover' to ensure it covers the entire container without distortion

       Vertical Text ('.vertical-text') 

      • Positioned absolutely within '.hero'
      • Top-aligned at 150px from the top
      • Left-aligned at 270px from the left
      • Uses vertical writing mode ('vertical-rl') and rotates 180 degrees for vertical orientation

       Text Styling ('.chan', '.suetyee', '.uiux-designer') 

      • Specific styles for different headings and text within the hero section, adjusting font family, size, and alignment.

       Content Column ('.content-column') 

      • Background color is light (#F5F5F5)
      • Full width with padding of 40px and box-sizing set to 'border-box' for content box model
      • Font family is 'Lexend Deca' with dark text colour (#1C1C1A)

       Content Rows ('.content-row') 

      • Flex container with items spaced evenly
      • Margin-bottom of 40px between rows

       Section Headings ('h2', 'h3') 

      • Font family 'Lexend Deca' with varying weights and sizes for hierarchy
      • Text alignment is left-aligned

       Paragraphs and Body Text ('p', 'body-text-1') 

      • Font family 'Lexend Deca' with varying weights and sizes for readability
      • Left-aligned text

       Image Column ('.image-column') 

      • Background colour matches the body (#1C1C1A)
      • Flex container centered both horizontally and vertically

       Additional Image ('.additional-image') 

      • Responsive styling with maximum width and height for images.


      Fig 1.4 Process of Project 02



      Fig 1.5 Process of Project 02



      Fig 1.6 Process of Project 02



       Final Outcome 

      Link to Netlify


      Fig 1.7 Final Outcome of Project 02



       FEEDBACK 

      No feedback from tutor 



       REFLECTION 

      This assignment was a valuable learning experience that enhanced my web development skills and deepened my understanding of the complexities involved in creating functional and interactive web pages from static prototypes. The knowledge and skills gained will undoubtedly be beneficial in future projects, both academically and professionally. Overall, the assignment was a testament to the importance of precision, responsiveness, and attention to detail in web development, laying a solid foundation for further growth and development in this field.


      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

      ADVANCED INTERACTIVE DESIGN - TASK 02

      Image
      23/05/2025-13/06/2025 (Week 05-08) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Advanced Interactive Design | DST60804 | Sec 02 Task 2 | Interactive Design Planning & Prototype  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. EXERCISES 3. TASKS 4. REFLECTION   INSTRUCTIONS    EXERCISES  WEEK 5 - BOUNCING BALL ANIMATION In Week 5, we learned how to create a simple bouncing ball animation using Adobe Animate. The first step was to draw the ball using the  Oval Tool  and turn it into a  symbol . After that, we used the  Pencil Tool  to draw a curved path showing how the ball would bounce. Next, we added  keyframes  at the starting and ending points of the path. Then, we applied a  motion tween  so the ball would follow the path smoothly. To make the animation more realistic, we slightly adjusted the  speed and motion  using easing. This exercise helped me understand how keyframes an...
      Read more