Interactive Design: Project 2
[Ng Jia Xuan / 0375273 ]
[Bachelor of Design (Honours) in Creative Media]
[ Interactive Design ]
[ Project 2 ]
2. LECTURES
WEEK 6
Extra Markup for HTML
ID attribute
-It must be unique (So no 2 elements with the same value)
Class attribute
-Can have several html elements with the same value
*Both won't effect the presentation unless CSS rule indicate
Block elements
-Elements that appear to start on a new line eg: <h1>, <p> etcInline elements
-Elements that appear to continue on the same line as their neighbouring elements
Notes in class:
4. OUTCOME
5. FEEDBACK
6. REFLECTION
eg: <b>, <img> etc
CSS
-Allows us to create rules that specify how the content will appear
eg: Changing background colors, change typeface etc
1. Selector
-Indicate which element the rule applies to
-Can add more element by adding commas (,)
eg: h1, h2, h3
2. Declaration
-Indicate how the elements should be styled
-Can add more properties by adding semicolon (;)
-Split into 2 parts: Property & Value, separate by a colon (:)
a) Property: Indicate the aspects of the elements you want to change (eg: Color, font etc)
b) Value: Specify the settings (eg: What typeface: Arial, what color: Yellow etc)
3. Method to Employ CSS
<link>
-Tell the browser where to find the CSS file to style the page
-Use href, type & rel attributes
<style>
-Indicate that the styles are specified in CSS
-Use type attributes
About these attributes:
a) href: Specify the path to CSS file
b) type: Specify the type of document being linked to, value should be text/css
c) rel: Specify the relationship between HTML page & the file linked to, value should be stylesheet
CSS Selectors
Universal Selector:
-Select all elements on the page
-Represent by (*)
*{
/Write CSS styles here/
}
Elements Selector:
-Target HTML elements by their tag names
p{
/Write CSS styles here/
}
ID Selector:
-Target element with a specific id attribute, ID must be unique
-Use # followed by the ID name
#my-element{
/Write CSS styles here/
}
Class Selector:
-Multiple elements can share the same class
-Use . followed by the class name
.my-class{
/Write CSS styles here/
}
Descendant Selector:
-Select an element that is a descendant of another element
.container a{
/Write CSS styles here/
}
Child Selector:
-Select elements that are direct children of another element
-Use >
ul>li{
/Write CSS styles here/
}
Pseudo-class Selector:
-Selects elemet based n their state/position in relation to other elements
-Including: hover, active, visited, link, focus, nth-child(n)
-Use :
a:hover{
/Write CSS styles here/
}
Pseudo-element Selector:
-Select parts of an element except itself
-Including: before & after
-Use ::
Use . followed by the class name
p::before{
/Write CSS styles here/
}
Class activity:
WEEK 7
The Display Property
Block-level Element
<div>
Inline Element
<span>
-Can wrap text inside <span></span>
Box Model
-Box has 3 layers which are:
1. Padding
2. Border
3. Margin
Flexbox (Flexible Box Layout):
display: flex
-Establishes a flex container
flex-direction
-Defines the direction (row, columns)
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)
WEEK 8
Class activity:
 |
| To create a new site in DW: Manage sites > New sites > Named it & Make sure to put in the right destination > Done Save As > Name it > Save in the destination |
 |
| To create subfolder (to put images etc) in DW: Right click your file > New folder |
 |
| For padding: We can type it in a row, no need to type every aspect (eg: Left right) |
 |
| For shortcut: We can find various shortcut key from DW instead of typing out the long code |
 |
| The usage of Flex: Can change the direction into rows (eg: for the menu) or column (eg: Feedback box) |
3. PROGRESS
3.1 PREPARATION
I have watched Mr Shamsul Figma Tutorial before designing my website in Figma.
Some notes that I have done after watching the tutorial:
 |
| Fig 3.1.1: Notes about Figma |
An additional tutorial that is provided by my friend (Thanks girl!!):
#1 TEXT/INFORMATION
My original website didn’t include much description, so I wrote the content myself and used ChatGPT to help improve it into more professional writing. This makes my website feel more complete and realistic.
 |
| Fig 3.1.2: Information to put in my website |
3.2 PROCESS IN FIGMA
After the preparation, let's start to do in Figma!
 |
| Fig 3.2.1: Making & Exporting elements & icons in Illustrator |
 |
| Fig 3.2.2: Workspace in Figma |
 |
| Fig 3.2.3: Interactive Button Making |
We are required to do 3 pages in total, including:
1. Home, Landing page
2. Core page (Mine is Menu)
3. Contact Page
Some adjustment made out through the progress:
Some adjustment made out through the progress:
 |
| Fig 3.2.4: Comparing which placement is the best (Last one is chosen) |
 |
| Fig 3.2.5: Reducing the size of the Hading and Subheading, adjust the alignment |
 |
| Fig 3.2.6: Attempt #1 |
After consulting with Mr Shamsul, there are some minor adjustment.
 |
| Fig 3.2.7: Adding a call to action button in hero page |
1. Add a call to action button on the hero page, it can be RESERVATION.
 |
| Fig 3.2.8: Fix the border for the hover affect (Make it remain square instead of rounded side) |
2. For the hover effect, remain the original shape don't make it curvy.
 |
| Fig 3.2.9: Adjustment for the footer |
3. The font size for the information in the footer can be smaller.
4. The copyright mark can put it in the left to make the footer balance.
5. The information gap between each other can be wider.
 |
| Fig 3.2.10: Attempt #2 |
4. OUTCOME
My Website:
A brief write-up to introduce my website design:
Here is a brief write-up outlining the key features of my website. To enhance the Chinese vibes, I specially chose a color scheme that best represents Chinese culture—red, yellow, and white. Additionally, I incorporated Chinese elements such as ink-style flowers, gold tiles, and decorative Chinese tiles in the background to strengthen the traditional aesthetic. For typography, I selected different typefaces to clearly differentiate the heading, subheading, and body text, making the content easier to read. A fancy Chinese calligraphy font is used for headings, a bold typeface for headings & subheadings, and a simple, clean font for body text. The website layout is clean and simple, yet retains strong Chinese visual elements. The key pages are split into individual sections and categorized to keep the structure neat and easy to navigate. The navigation bar is located at the top of every page, while the footer contains consistent contact information, helping users easily access important links. The main pages of the website include Home, Menu, and Contact. The Home page features a welcoming message on the first image, followed by a brief “About Us” section and an introduction to our “Specials.” The Menu page includes descriptions of our dishes, grouped into categories for clarity. Lastly, the Contact page features a feedback form along with our social media links and address. Interactive elements are also included throughout the website. For example, a “Our Menu” button is placed on the landing page, and a “Reservation” button is included in the navigation bar, making the site more engaging and user-friendly.
The first design development focuses on the layout of the header and footer. The navigation bar was reorganized, placing the logo and navigation buttons in a clearer and more structured arrangement. The footer was also improved by adding section titles and introducing a cleaner layout. Second, the key pages were split into individual pages. This allows each page to contain more detailed information and makes it easier for users to find what they need. Third, the menu section was redesigned. Originally, it consisted of poorly taken pictures that made the layout look messy. Now, the menu is organized into categories, each with descriptions and improved images. This not only provides more useful information for users but also enhances visual alignment and makes the layout more appealing. Fourth, I added more ways for users to contact the restaurant by including a feedback form. This offers a direct communication path and enhances user interaction. Finally, the overall aesthetic and layout of the website have been significantly improved. The previous version lacked design direction, making it hard to attract users or clearly identify the site as a Chinese restaurant. With the new color scheme and cultural design elements, the website now conveys a strong Chinese atmosphere while maintaining a clean and consistent layout.
My objective is divided into two sections: “Modernized Look” and “Improved Usability.” For the first objective, the new design gives the website a cleaner and more visually appealing appearance, aligning with current design trends. The layout and alignment have been refined, including improvements in typography, visuals, and overall aesthetics. For the second objective, both readability and functionality have been significantly enhanced. Key improvements, such as using different typefaces to distinguish headings, subheadings, and body text, replacing and repositioning navigation buttons and reorganizing information contribute to a more user-friendly experience. These changes make it easier for users to access and navigate the website, successfully fulfilling both of my objectives.
5. FEEDBACK
Overall is good, but need some minor adjustment
1. The font size for the information in the footer can be smaller.
2. Add a call to action button on the hero page, it can be RESERVATION.
3. The copyright mark can put it in the left to make the footer balance.
4. The information gap between each other can be wider.
5. For the hover effect, remain the original shape don't make it curvy.
6. REFLECTION
This task has been really hard for me, not gonna lie TT. It’s my first time designing a website, and I’m not very good at it… I’ve made some adjustments from my previous wireframe, and through this experience, I’ve learned what I should consider more when creating wireframes and designs. It’s all new to me, and I definitely need to do more research and exploration. Well, at least I gained something from the process, which is a win for me! Not just learning how to use the tools, but also understanding how to design headers, footers, website layouts, and more. Figma was completely new to me too. At first, it felt overwhelming, but after some practice, it got better and better! Thanks to Mr Shamsul, he provide us a lot of material and valuable feedback for my work. Mr Shamsul help me create a column as a guide to adjust my footer, it was REALLY USEFUL it's definitely better thank you so much sir TT!! The next task will be even tougher since we’ll have to use Dreamweaver instead of Figma. Wish me luck!
Comments
Post a Comment