Interactive Design - Task 2:Project 1
7/5/2025 - 1/6/2025 / Week 4 - Week 6
ChenYuhan / 0378131
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Task 2: Project 1
ChenYuhan / 0378131
Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylors University
Task 2: Project 1
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1ZboslTwWd0VcBq-AuI1L_iQSMfel1WbL/preview" width="640" height="480" allow="autoplay"></iframe>
LECTURES
week 4:
<iframe src="https://drive.google.com/file/d/1zqzLy2E13dBTAGKeJJ_kI3UV2ehrJDpo/preview" width="640" height="480" allow="autoplay"></iframe>
Why Web Standards?
When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.
Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites.
The HTML code is made up of characters that live inside angled brackets <>.
These are called HTML elements.
Elements are usually made up of two tags: an opening tag <> and a closing tag</>
For example:
<element>Information</element>
For a web page production, it should include the following three parts:
1.title
The contents of the <title> element are either shown in the top of the browser (tab bar)
2.head
Before the <body> element you will often see a <head>element. This contain information about the page.You will usually find a <title>element inside the <head> element.
3.body
You met the <body> element inthe first example created.Everything inside this element is shown inside the main browser window.
HTML has six levels of headings:
<h1> main headings
<h2> subheadings
If there are further sections under the subheadings then the <h3> element is used and
so on..
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
By enclosing words in the tags <b> and </b> we can make characters appear bold.
By enclosing words in the tags <i> and </i> we can make characters appear italic.
For List:
The ordered list is created with the <ol> element.
Each item in the list is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
The unordered list is created with the <ul> element.
-I can put a second list inside an <li> element to create a sub-list or nested list.
Browsers display nested lists indented further that the parent list.
If want to include a link and an image, use <a><img> respectively.
week 5:
<iframe src="https://drive.google.com/file/d/1-_usmnc_XeTiJbXhREeFktJnt1EWay1I/preview" width="640" height="480" allow="autoplay"></iframe>
-Block elements
Some elements will always appear to start on a new line in the browser window.
It is know as block level elements.
Example: <h1>, <p>, <ul> and <li>
-Inline elements
Some elements will always appear to continue on the same line as their neighbouring elements.
It is know as inline elements.
Example: <b>, <i>, <em>, <a> and <img>
CSS:
CSS allows you to create rules that specify how the content of an element should appear.
CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.
A CSS rule contains two parts: a selector and a declaration.
Selector:Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.
Declaration:Declarations indicate how the elements referred to in the selector should be styled.Declarations are split into two parts (a property and a value) and are separated by a colon.
CSS declaration sit inside curly brackets and each is made up of two parts: a property and a value,separated by a colon.
Property:Property indicate the aspects of the element you want to change. For example, color,font, width, height and border.
Value:Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color that you want it to be for the elements.
You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page.
The <style> element should use the type attribute to indicate that the styles are specified in CSS.
The value should be text/css.
Exercises:
In class, we also created our own basic webpage. We used all the knowledge we learned in class. Although it is still relatively simple, any webpage can be advanced from the beginning.
 |
| Fig1.1.1,Code Showcase,week 5(2025/05/19) |
week 6:
CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allow you to target and style HTML elements on a web page.
Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
They are a crucial part of web development because they enable you to control the presentation and layout of your web pages.
Universal Selector: Selects all elements on the page. lt's represented by an asterisk (*). Use itwith caution, as it can affect al elements and lead to inefficient CSS
* {
Element Selector: The simplest type of selector, targets HTML elements by their tag name.
p {
ID Selector: Targets an element with a specific id attribute.lDs must be unique within an HTML document. To select an element with a specific ID, use a # symbol followed by the ID name.
#my-element {
Class Selector: Targets elements with a specific class attribute. Multiple elements can share thesame class. To select elements with a specificclass, use a . symbol followed by the class name.
.my-class {
Descendant Selector: Selects an element that is adescendant of another element. You can specify ahierarchy of elements to target. For example, to style alla> elements inside a <div> with class 'container,'
.container a {
Child Selector: Selects elements that are children of another element. To select only theimmediate <li> children of an <ul>, you can use.
ul > li {
Pseudo-class Selector: Selects elements based on their state or position in relation to other elements. Common pseudo-classes include :hover, :active, :visited, :link, :focus, and :nth-child(n).
a:hover {
Pseudo-element Selector: Selects parts of anelement rather than the element itself. Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.
p::before {
TASK 2:PROJECT 1
In Project 1, we need to write a proposal for improvements to the selected website.
Chosen Website:Gatesnfences
Assignment Description:
-Layout
-Color scheme
-Typography
-Imagery
-Overall aesthetics
-Site's usability and navigation
-Accessibility
-Responsiveness
Functionality:
1. When browsing on a mobile phone or tablet, the content may overflow the screen and require horizontal scrolling, affecting the user experience.
2. Photo files are large and load slowly.
Redesign Goals:
1. Redesign the homepage layout and navigation logic to make it simple and intuitive.
2. Modify the interface aesthetics, including font color and photo selection.
3. Enhance the interactivity of the webpage, reduce loading time, and make the webpage adaptable to mobile phones.
Target Audience:
The person in charge of the family, who does not know about driveway gate installation, and the middle-class family.
UX Enhancements:
Because the original website had a complex UX design, I needed to redo it after sorting out the logic.
1. Delete redundant and duplicate items and keep clear instructions.
2. Ensure that all images are in the same format and as small as possible to facilitate website loading.
3. Try to make the website adaptive on mobile devices.
More details can be seen in my Google Slides and PowerPoint.
<iframe src="https://drive.google.com/file/d/18FZGPLFlUJReUCAQqEfdBNqVieaMRhLg/preview" width="640" height="480" allow="autoplay"></iframe>
Google Slides Link:https://docs.google.com/presentation/d/1iFoAWJtDHur-HluCghm6X84ZGCif20aYpaUHNUTmxKY/edit?usp=sharing
FEEDBACK
week 4:
In this class, we learned how to create a basic web page using HTML. This was my first time to learn anything related to code, and everything was new to me. However, the professor's explanation was very detailed, and I successfully completed the basic construction of the website.
week 5:
In this class, in addition to reviewing HTML knowledge, we also learned another system, CSS, which is a system that can make websites more beautiful, and can modify fonts, colors, and layouts. At the same time, we added images and adjusted their sizes for easy layout.
REFLECTION
Experiences:
During these two weeks, I learned basic coding, which I had never touched before. Coding is the basis of creating web pages, and I studied it very seriously. In addition to HTML and CSS learned in class, there is also a task to create a modification proposal for the website I found. The proposal needs to integrate several essential elements of the website I learned before, and drawing sketches can easily help me sort out my ideas.
Observations:
What bothers me most is that the code has no tolerance for errors. I often find that something is wrong with the website and need to check it from the beginning (when there is no error). This is a big challenge to my meticulousness and patience.
Findings:
Don't be afraid to try new things. I used to be afraid of the interactive design course because I needed to learn code. But after actually learning it, I found that code is actually very interesting... It is even more specific than some imaginative paintings, because you always know whether it is on the right track.
Comments
Post a Comment