Part I – Reviewing this week’s
lectures (record in blog)
Page Layout
1. <table> </table>
<tr> </tr>
<td> </td>
<caption> </caption>
2. colspan is used to merge a number of columns
rowspan is used to merge a number of rows
3.
CODE FOR FIRST TABLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center">
<h1>Banner</h1>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<h2>Navigation</h2>
</td>
</tr>
<tr height = 600>
<td width="80%" align="center" valign="middle"><b>
Main <br>
Content</b></td>
<td align="center" valign="middle"><b>Side<br>
Bar</b></td>
</tr>
</table>
CODE FOR SECOND TABLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<table border="1" align="center" width="80%">
<tr>
<td colspan="3" align="center">
<h1>Banner</h1>
</td>
</tr>
<tr height = 600>
<td width="15%" align="center" valign="middle"><b>
Navigation</b></td>
<td width="70%" align="center" valign="middle"><b>
Content</b></td>
<td align="center" valign="middle"><b>
Content</b></td>
</tr>
</table>
4. A metaphor is a set of user interface visuals, actions and procedures that exploit specific knowledge that users already have of other domains.
Examples
- The 'start' button on old versions of Windows is the natural place for someone with no prior knowledge of the OS to first click on. It is now a Windows button since Windows 7 but this would still be a type of metaphor as anyone who as used a Windows machine before will automatically go to the bottom left as a starting point.
- The 'x' button on browsers to close a page
- Folders on a computer are a straightforward metaphor for storing files
5.
a. Skeumorphism is when a recreated object has a design element that was structurally important in the original but no longer necessary. In UI design it helps the user understand the purpose of an application almost immediately, for example an email application having an envelope logo would immediately indicate to the user its purpose.
b. Flat design advantages
- Ease of use
- Fast load times
- Modern appearance
- Efficient responsive design
c. Flat design disadvantages
- Lacks personality
- Can be unclear what is clickable
- Boring design
- Difficult to execute well
No comments:
Post a Comment