Interactive Design | Exercises

on

29/03/2022 - 16/5/2022 | Week 1 - Week 7
Interactive Design | Bachelor of Design in Creative Media
Shofwa Alyadiena | 0350019
Exercises

Lectures

WEEK 1 | INTRODUCTION TO WEBSITES

For the first week, we were introduced to the basics of websites, starting from the definition. Mr. Shamsul explained that a website holds information digitally and can be used for multiple purposes, or sometimes only one purpose. The examples given are Netflix- as a landing page- and Taylor's website as an academic page. 

He gave us those two examples to explore our next topic, the landing page. A landing page is different for users who have and haven't achieved the website's goal. An unsubscribed user would see a landing page that gives information about what benefits subscribing would give them. 

Mr. Shamsul stated that four hours for each session isn't enough, due to the tedious nature of website designing. Some asked why it's important to learn how to build websites, to which Mr. Shamsul replied that with website-makers we would never learn the fundamentals, and we must know the fundamentals as design students.

Some of the examples for each type of website are shown below.

  • Informational website
    • Wikipedia
    • IMdB
    • Days of the Year
    • Knowyourmeme
    • All for reviews and information
  • Corporation Website
    • Petronas
    • All filled with only corporation details
    • Portfolio Website (Behance, Blogger)
  • Brochure Website
    • A brochure, digitized.
  • Entertainment Website
    • Youtube
    • Spotify
    • Disney+
  • Personal Website
  • Educational Website
  • E-Commerce website
  • Amazon
  • Nonprofit Website

WEEK 2 | WEB STANDARD

In the beginning there was just the web needing a monitor mouse and keyboard. now there are multiple different ways of accessing the website / which means we need to adapt in making that part !!! interface on a laptop, computer, tablet, and mobile phone are all different. there are even ways where people access websites solely through using voices 

Variety of browsers (google opera explorer safari), operating systems (mac windows linux), and screen resolutions (big-small).

because of this growing variety, we need to have a web standard that encompasses all varieties. of course we are able to not follow them but if we don't we risk having an inaccessible website to many of our target audience. the WWW (w3c) has defined dozens of standards. 

It's important to have a clear hierarchy of information on a website so that readers will know what is more important to see first. the structure generally starts from heading s to subheadings to content. a way to break up content is by using subheadings in between


HTML

html elements are usually made up of two tags, an opening and closing tag. the information that will show up in the website is the content in between them. Html uses all lowercase letters and American spelling.

<element>information</element>

you can have two attributes in one html tag.

Tags learnt this week:

  • <a href="[url]" target="blank [to direct to a new tab]" alt="[keyword]" title="[hovername]">[url name]>
  • <p>info</p>
  • <p styles="color:[color]"></p>


WEEK 3 | EXTRA MARKUP

ADDING IMAGE IN HTML

Tag is <img> is used to add an image in html, and does not need a closing tag. The tag is considered empty until an attribute is added.

<img src="[folder]/[image name]">
or
<img src="[url]">


IMAGE FORMAT FOR WEB

  • PNG
    Contains a bitmap of index colors and uses lossless compression, basically combining both gif and jpeg and allowing a full range of colors and compression. (Resolution must be 72 for PNG-24)
  • GIF
    Uses lossless compression, and can save the image repetitively without losing any data. However, the small size is not suitable for large photos.
  • JPEG
    The most commonly used image format used on the web. Highly compatible with little loss of quality.


ID AND CLASS ATTRIBUTE

Extra Markup

ID Attribute

It's used to uniquely identify the element from other elements on the page. It's important that no two elements have the same value for their ID attributes, otherwise the value is no longer unique. Linking an ID can work as a jump within one webpage. Example of how to link up to a section below.

<element id="[idname]"></element>
<a href="#[idname]">information</a>


Class Attribute

Every HTML element can also carry a class attribute. The class attribute on any elements can share the same value or name.


ID and Class Attribute

Using these attributes does not affect the presentation of an element, and only their appearance will change if there is a CSS rule that it should be displayed differently. 


Block Elements

Block elements always appear to start a new line in the browser window.
example:
<h1> <p> <ul> <li>


Inline Elements

Although placed in the code, these elements won't start a new line and instead continues from where it last left off.
<b> <i> <em> <a> <img> <strike>


WEEK 5 | CSS

Some basic CSS styling includes:

(Scrolling behavior of the page)

    html {
     scroll-behavior: smooth;
    }

(Styling)

    [.class or tag-text] {
    background: [color of background, using presets or hex code];
    padding: [size of top-bottom padding, size of left-right padding];
     margin: [size of top-bottom padding, size of left-right padding];
     color: [Color of text, using presets or hex code];
    }

Border To set the limit of the content within a box.

Margin The gap between borders of boxes next to each other.

Padding The gap between the border and content.

Instructions


Surveying the Possibilities

EXERCISE

Fig. 1.1 Surveying the Possibilities (31/3/2022)



WEB DOCUMENT 

WEEK 2 TUTORIAL | LINK

Fig. 2.1 Week 2 Tutorial (5/4/2022)

WEEK 2 EXERCISE 1 | LINK

Fig. 2.2 Week 2 Exercise 1 (11/4/2022)

WEEK 3 EXERCISE 2 | LINK

Fig. 2.3 Week 3 Exercise 2 (20/4/2022)

WEEK 7 EXERCISE 3 | LINK

Fig. 2.4 Week 7 Exercise 3 HTML (16/5/2022)

Fig. 2.5 Week 7 Exercise 3 CSS (16/5/2022)

FEEDBACK

WEEK 3

- Remember to add "target='blank'" to the link so it would open in a different tab.
- Always title the file as 'index.html' (all lowercase).


WEEK 7

- Remember to use paddings.
- Avoid having too many colors on a website.


REFLECTIONS

For the first half of the semester, our focus was on learning the basics of website designing. The exercises were given to us every week and each exercise was more difficult than the last. I enjoyed learning new elements and attributes to add to my website design. I have always enjoyed this kind of activity and though it's a bit time-consuming I feel rewarded after getting something to work. There were some parts that I couldn't figure out early on and the help of my friends was extremely valuable to me.

From learning in this class so far, I noticed that websites avoid using more than three colors. I've learned that they use a 60% 30% 10% rule from researching the web and from observing current existing websites. I also learned that I should keep a separate TXT file to remember the codes as it is meant to be written.

After understanding some key things from this module, I started to branch out and try for myself some other codes to practice. I realize that it's much faster for custom color picking by adding it onto a comments tag on the file to further convenience myself.

Comments

Post a Comment