Interactive Design: Project 1
[ Ng Jia Xuan / 0375273 ]
[Bachelor of Design (Honours) in Creative Media]
[ Interactive Design ]
[ Project 1 ]
2. LECTURES
WEEK 3
Why website structure matters?
-It's the foundation of a user friendly & accessible website
-It help users find information easily & keep them engaged
HEADER:
-Contains website's logo, navigation menu & contact information
-Provide quick access to essential information & navigation
BODY:
-Main content, including text, images etc.
*Proper organization is important
FOOTER:
-Includes copyright information, links to important pages & contact details
WEEK 4:
Labour Day- No class
WEEK 5:
HTML:
Structure:
<element>Information</element>
Opening tag: <p>
Closing tag: </p>
Body, Head & Title:
<body>, <head>, <title>
Headings:
Main headings: <h1>
Subheadings: <h2>
Further section will be <h3>~<h6>
Paragraph:
<p>Type paragraph</p>
Bold & Italic:
<b>Information</b>
<i>Information</i>
Lists:
1. Ordered list: A list in number ordered
<ol>
<li>Information</i>
</ol>
2. Unordered list: A list with bullets
<ul>
<li>Information</i>
</ul>
3. Nested list: Adding a list inside a list
<ul>
<li>Information</i>
<ul>
<li>Information</li>
</ul>
</ul>
Links:
1. Links from one website to another
2. Links to one page to another on the same website
3. Links from part of a web page to another part of the same page
4. Links that open in a new browser window (tab)
Writing links:
<a href="Links">Text that user will click on</a>
Adding image:
<img src="The path to my image"alt="The path to my image" title="title of the image"/>
*src: Specifies the path to the image
*alt: Provide alternative text for the image (essential for accessibility)
*Title: Provides tool tip of the image in the browser
Class activity:
Making my own first website
3. PROGRESS
For this task we are required to:
Select an existing website which you feel has several design and UX
issue and prepare a detailed proposal for its redesign.
RESEARCH
1. Website Research:
|
| Fig 3.3.1: Kingdom Palace Restaurant Website |
-What I have gained from this website:
i) The idea of using Chinese calligraphy
ii) The color scheme
iii) Instead of using icon, I can try to use both English &
Chinese
*Might reconsider using Chinese after consultation, update &
final ver will be update in future blog
iv) For the mobile version, put all navigation button into a
section
v) Visual Reference
|
|
|
-What I have gained from this website:
i) Having a popular dishes section in landing page/Adding it in the
"Menu" page
ii) For the mobile version, put all navigation button into a
section
SUBMISSION
4. FEEDBACK
After consultation for the proposal:
1. Putting a non english font might be complicated, but sir will teach
it in the future tutorial class.
2. If the content isn't enough (In my case the website doesn't have a "About us" paragraph) you can always add on to it, write it yourself.
5. REFLECTION
Honestly, coding is a subject I am quite scared of (I know it
is complicated and my brain is going to be on FIRE). At first,
I am a bit overwhelmed as I am learning a brand new subject
but after one tutorial class I was quite ok surprisingly but I
know I haven't learn the hardest part, so let see whether
coding will be my new favorite?!
On Week 5 physical class, we get to do a exercise about HTML
coding, and I already make a mistake at the beginning TT.....
I am used to put "space" after typing a word, and I done it in
coding too (Of course unintentionally) and my code didn't
work. The journey of finding the error start, coding is full
of letters so it need to be super careful otherwise my eyes
will suffer so much. Thank you sir for helping me find the
error, I will remember this mistake until I graduated or the
rest of my life...
I am quite excited to recreate a website, as I didn't make a
website before. Finding all of these mood board is quite a fun
process, a lot of idea pop out. But the most important thing
is whether I can make it using my limited coding ability, we
will see we will see.
Comments
Post a Comment