Interactive Design - Project 2

-


8/5/2024-  25/6/2023（week9-week11）

Yang Jiayi/0369288

Interactive Design / Bachelor of Design (Honours) in Creative Media       

Project 2 ：Working Web Page

TABLE OF CONTENTS

1. Instructions

2.  Lectures

3. Exercises

4. Reflection
 Instructions



Lectures
Week9

Display is CSS's most important property for controlling layout.
Every element has a default display value depending on what type of element it is.

Block level element
<div>is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.

inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph<span> like this </span> without disrupting the flow of that paragraph.

Most HTMl elements are containers. Consider some of theHTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
Each of these is a container, or box.
Each box has three layers that surround its content. The layers are, in order from inside to outside:
  • Padding
  • Border
  • Margin

fig1.1 Box

CSS Flexbox is a powerful tools for creating responsive and efficient web layouts. lt rely on a solid understanding of the Box Model, as they manipulate elements' positioning and spacing within a container.
Flexbox (Flexible Box Layout)
  • Key Concepts:
  • Flex Container: The parent element with display: flex.
  • Flex ltems: The children of the flex container.
lmportant Properties
Flex Container:
  • display: flex: Establishes a flex container.
  • flex-direction: Defines the direction of the flex items (row, column).
  • justify-content: Aligns flex items along the main axis (start, end, center,space-between, space-around).
  • align-items: Aligns flex items along the cross axis (stretch, center, start.end)

Exercises

Project 2: Working Landing Page

  • Landing Page Design (Project 1)

fig1.1 Page Design

We used Figma to design our own CV in Project 1 and prepare for Project 2


fig1.2 process

I use flag to create the effect. When the mouse is placed on the text, the specific content will pop up automatically.

This is the example given. I changed my avatar according to the example.

fig1.3 example


fig1.4 process


I didn’t know how to make the photo look like what I did in Figma, so I searched online for how to set the avatar style. I followed the example and set it up.

I searched online for how to make the progress bar change. I will use 'speedOfProgress to set it. I searched for how to use it and cases.

fig1.5 example

fig1.4 process


I used <a> to create a hyperlink. It was originally underlined, but I used text-decoration: none to cancel it.

fig1.5 process









评论

发表评论

此博客中的热门博文

Information Design Exercises

-
图片
 03/02/2025-10/02/2025 Yang Jiayi/0369288 Information Design / Bachelor of Design in Creative Media Exercises1/2 Introductions Lectures week 1 Type of Infographics Infographics are highly effective when it comes to increasing engagement and capturing your audience’s attention.   An infographic is a powerful way of communicating ideas in a visual form . Different types of inf ographics are used in design and marketing to present information in a simple and visually appealing way. They can be a useful alternative to standard text-based content. 8 types of infographics List infographics Statistical infographics How-to infographics Timeline infographics Comparison infographics ...
阅读全文

Information Design-Final project

-
图片
3/02/2025-23/03/2025 Yang Jiayi/0369288 Information Design / Bachelor of Design in Creative Media Final project Introduction Weekly progress Week 1 We formed FLIP TEAM 2 in G6 group in Teacher Fauzi’s class，After class, the group leader created a group and we started discussing our topic. Three topics we could choose: Creating awareness (such as Global Warming, Recycle, etc.) Explaining a process (such as "how to" video) Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Faced with three themes, our group voted and we finally chose Theme 2. fig1.1 Topic voting results We think that for 2, there are many topics we can explore, such as scie...
阅读全文

Minor Project

-
图片
  Minor Project WEEK 01 - WEEK 15 (22/04/2025 - 1/08/2025) Yang Jiayi  (0369288) / Bachelor of Design (Honours) in Creative Media Minor Project INSTRUCTIONS Project Proposal In our first class, Mr. Mike briefly introduced the projects we could choose. Then, we were asked to form groups of 6-7 people. I decided to form a group to discuss food aid with Kieran (group leader), May, Ma Pei yuan, Sun Qing, Wu Ziyang, Lin Zhiyi Their main struggle right now is trying to reach out to the communities that need the food aid help due to a lack of advertising and good exposure, Also a language barrier of malay  and english. We had a meeting to discuss everyone's tasks. Scenario Study Research "food aid" and learn about similar activities. To answer the "why", "how" and "when", we will study our part based on the following photos Each of us summarizes a key point: where, how, why, education metho...
阅读全文