Interactive Design - Exercises

-

Interactive Design - Exercises


15.04.2020 - 13.06.2020  (Week 1 - Week 5)
Wong Kai Yi (0340236)
Interactive Design
Exercises

1. LECTURE

15.04.2020 (Week 1)

Mr Shamsul gave a briefing and simple introduction on the module. For interactive design, we will be making websites with html and css coding using DreamRiver. A website is a web document. There are different types of websites which are informational, corporate, portfolio, e-commerce, brochure, entertainment, educational, nonprofit and personal. We then made a compilation of the 9 types of websites with each purpose and target audience in Google Slides to be submitted.

My compilation of  9 different types of websites:

Fig 1.1 9 Types of Websites

22.04.2020 (Week 2)

Introduction to web standards:
Area of monitor is increasing which increases interactivity. We should make the website user friendly even to the visually impaired. Hardware and software: types of browsers (Google Chrome, Firefox), operating systems and screen resolutions. Web standards are to make the Internet a better place, a standardized platform so its easier for a developer to understand another's coding. Besides, all browsers will be displayed on Website properly.

How the web works:
When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server. When you search, there is a search robot to find keywords in your search. Search engine optimization (SEO). The unique number that the DNS server returns to your computer. Every device on the web has a unique IP address. A web server is constantly connected to the web. The web server then sends the page you requested back to your browser.

Structure of a Web Page:
Hamburger menu / sandwich
Responsive website: for all devices
Word: styles - right click, modify

HTML
lowercase, using US English (e.g. color, center)
HTML codes are made up of characters that live inside angled brackets
Elements: made up of 2 tags: opening and closing tag
<element> information </element>
e.g. <h1> Hello world </h1>
attribute: additional information about the tag e.g. height="100"
link: href: hyperlink reference

29.04.2020 (Week 3)

Image file types
  • JPEG - usually used for web page, file size is not too big
  • GIF - 256 colors, animated, transparent
  • PNG - high quality, transparent
Extra markup: 
  • Each HTML element: ID attribute, class attribute - identify several elements as being different from the other elements on the page
Block elements aka block level elements
  • some element will always appear to start on a a new line in the browser window. e.g. <h1>, <p>

Inline elements: 
  • some elements will always appear to start on the same line as their neighboring elements. e.g. <b> ,<i> ,<em>,<a>,<img>

JPEG:

  • Resize image: Image size: 1024*768
  • File export save for web, quality (0-100)%, 60%, save into the folder, rename image (use lowercase, img_xxxxx.jpg)
GIF: flat graphic
  • 256 colors
Link:
  • <a href="www.google.com"> Google website <a/>
  • target="_blank" to open link in new tab
  • highlight the word, bottom left properties (window>properties), add the link in the tab, target blank, title The world traithlon xxx, done :)

Week 4 (06.05.2020)

CSS

  • Don't change font size of headings
  • Can link 1 html to several css or vice versa
  • h1, h2 (remember to put space after comma)
  • differentiate link text and normal text
Precedence:
  • a more specific selector takes precedence over a less specific one
  • embedded higher precedence
  • inline css ( html style attribute ) overrides css rules in style tag and css file
  • a more specific selector takes precedence over a less specific one
  • rules that appear later in the code override earlier rules if both have the same specificity.
  • A css rule with !important always takes precedence.



3 ways of adding CSS:
External: 
<link>
Internal:
<style>: text: text/css
use google fonts



Example:
Internal CSS:
<link href="https:google
<style type="text/css">
body {
background:
font-family:
}

p, li {
font-family:
font-size: 1.25em (em space - width of "m");
line-height: 2em;
letter-spacing: 50px or can use percentage 150%;
word-spacing:
text-align:
}
*change color of link text* active / visited
a {
color: cornflowerblue
}

Week 5 (13.05.2020)


  • font-weight; bold 400 onwards (700)
  • font-style; italic
  • text-decoration: none, underline, overline, line-through
  • text-transform; UPPER lowercase
  • text-indent
  • text-shadow (4 values, including color of shadow, xyhv)


CSS Boxes Model

  • Box Dimensions - Width, Height (pixel px; fixed size - responsive / percentage %; relative to browser)
  • Limiting width [min-width, max-width] -
  • Limiting height [min-height, max-height] -  if you create a box of certain size, when you put in image and text, content might expand and affect the content below it; overflow property [auto, high, scroll]
  • Overflowing content [overflow], hidden, scroll
  • Border - every box has a border (even if it is not visible / is specified to be 0px wide)
  • Margin - sits outside the edge of the border
  • Padding - space between border and the 


Fig 1. Padding, border, margin

The Display Property
Block-level element
<div> is the standard block-level element
starts on a new line & stretches out to the left and right as far as it can
common block-level elements: p, form; new in HTML5: header, footer, section etc.

Inline element
<span> standard inline element
common: <a>

Exercise:
Landing page, call to action
Width of container have to leave some space
Sections within a container

Comment: HTML <!---->; CSS /*blablabla*/


Project 1 brief
choose topic and come up with sketches for landing page

2. INSTRUCTIONS



Exercises

22.04.2020 (Week 2)

Pre-exercise: Introduction to HTML
We tried an easy website layout where we write a bit regarding ourselves.

Below is the screenshots of the pre-exercise:

Fig 1.2 Pre ex 01

Fig 1.3 Pre ex 02

29.04.2020 (Week 3)

For Exercise 1, we are given the files to be made into the website. A word file of the information is given for us to follow. Images are also given. Save as: index.html

Here is the link to Exercise 1: Exercise 1

Here are some screenshots of the exercise done.

Fig 1.4 Ex1 01

Fig 1.5 Ex1 02

Fig 1.6 Ex1 03

Fig 1.7 Ex1 04



3. FEEDBACK

15.04.2020 (Week 1) - 29.04.2020 (Week 3)

No feedback

06.05.2020 (Week 4)

Tutorial, not exercise (Triathlon):
Change the Title from index.html to Triathlon. Since p and li is using line height 1.3em, can put them together. Nice and clean layout for the website.

13.05.2020 (Week 5)

No feedback

Comments

Post a Comment

Popular posts from this blog

Design Research Dissertation

-
Image
Design Research Dissertation 27.08.2020 - 26.11.2020  (Week 1 - Week 14) Wong Kai Yi (0340236) Design Research Dissertation 1. INSTRUCTIONS 2. SUBMISSIONS Turnitin Report (PDF) Fig 1.1 Turnitin Report (PDF) Flipbook (Fliphtml5) Fig 1.2 Flipbook Journal Article (PDF) Fig 1.3 Journal Article (PDF) 3. REFLECTION This module is very different from the other modules in the Creative Media course, because it focuses on research. This journey through design research methodology and design research dissertation has been interesting yet challenging, as we are exposed to the systematic way of conducting research. I have learnt a lot on research, such as methodology, discussion etc. It is also crucial to include references from reliable sources and provide justification wherever required. Otherwise, the research would be not convincing and reliable as it is not backed up by academic sources.  Although I have faced many difficulties throughout both modul...
Read more

Publishing Design - Final Compilation & Reflection

-
Image
Publishing Design - Final Compilation & Reflection 28.08.2020 -  27.11.2020 (Week 1 - Week 14) Wong Kai Yi (0340236) Publishing Design Final Compilation & Reflection 1. INSTRUCTIONS Exercises Project 1 Project 2 Final Project 2. SUBMISSIONS Exercises Determining book size We are to take an A3 paper or stick 2 A4 papers together then fold it into half. After that, we have to determine our book size by making at least 3 sizes which are between A5 to A4. Fig 5.1 determining book size - red line (chosen size) Fig 5.2 determining book size - 32 pages cut out (untrimmed) Fig 5.3 determining book size - opened book (untrimmed) Here is a video of how it looks:  Fig 5.4 paged book before trimming Fig 5.5 Final 32 paged book Fig 5.6 Final 32 paged book Fig 5.7 Final 32 paged book Fig 5.8 Final 32 paged book Van de Graaf Grid Fig 5.9 Van de Graaf grid and with text Text formatting Fig 5.10 text formatting 1...
Read more

Brand Corporate Identity - Project 2

-
Image
Brand Corporate Identity - Project 2 28.08.2020 - ..2020  (Week 1 - Week 14) Wong Kai Yi (0340236) Brand Corporate Identity Project 2 1. LECTURE Project 1 2. INSTRUCTIONS Progress 11.09.2020 (Week 3) After checking our brand profiles, Mr Vinod explained to us how our brand profile was supposed to be. The brand value is a bigger aspect for the brand. 18.09.2020 (Week 4) Brief Brand Profile for my brand: Fig 2.1 Brand Profile 25.09.2020 (Week 5) For the progression, we are to do: 1. mindmap keywords 2. sketches (ideas and concepts) 3. finalize sketches 4. digitization 3 chosen ideas 5. rationale My mindmap for my brand is as below: Fig 2.2 keywords mindmap Then I drew the mindmap of possible symbols for the logo: Fig 2.3 symbols mindmap Ideas and concepts: Fig 2.4 Idea 1: video + rating Fig 2.5 Idea 2: community + rating Fig 2.6 Idea 3: shopping + video Fig 2.7 Idea 4: shopping + video Upon receiving feedback, ideas 1 to 3 did not work. Therefore, I h...
Read more