Interactive Design / Exercises

29.03.2022 - 13.05.2022 (Week 1 - Week 7)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Interactive Design / Taylor's University
Exercises

LIST

OTHER POST:

LECTURES
<back to top>

Week 1 (29/03/2022): The Briefing

In this lecture, Mr. Shamsul explained us about our MIB and lessons. Then, he began to introduced us to HTML. HTML stands for Hyper Text Markup Language. The difference with internet, internet is an infrastructure (platform), and HTML is the one that show content.

Websites are web documents in internet, which aways have purposes with 1 page or more. One page websites are called micro-website, while more than 1 websites are called complete website.

There are some types of website examples:

Informational website
Corporate website
Portfolio website
Brochure website
Entertainment website
Personal website
Educational website
E-commerce website
Nonprofit website

Week 2 (05/04/2022): Web Design and Media

In this week lecture, Mr. Shamsul introduced us to web more.

ABOUT WEBSITE

People back then used keyboard, mouse and monitor to access websites, while today we can access it through phones, tablets, etc. Now, a lot of improvement have happened. Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.

Hardware and software issues if no Web Standards:

Variety of browsers (safari, google, Mozilla, yahoo, etc.) -> web standards make it has the same access although its different.
Variety of program (Windows, Mac, Linux)
Screen size (phone, computer, tablet, etc)

Problem without web standards:

High probability that your website will look different

So, what's web standards?

Web standards: core set of rules for developing websites.

fig 1.1, W3C, Week 2 (05/04/2022), source; https://images.app.goo.gl/TFydbJrMP4ZE59W39

W3C or known as World Wide Website Consortium is the on who's responsible for creating and maintaining web standards. Developed by Mr. Timothy Berners Lee, markup languages are starting to develop.

Why using web standards?

- More simplified

- Site will be shown properly

How the web works:

Hosting - can be from everywhere
Domain - address of the web
IP address - like numbers to connect with the computer

WEB STRUCTURE

Structure - clear hierarchy of informations.

WEB STRUCTURE - HEADINGS - SUB HEADINGS

HTML CODE

ENG-US
lowercase
<> usually closed with </> (not all element)
(space) : separate values
Can use more than 1 attribute in 1 HTML

Basic format: <element> info </element>

Other format: <p attribute name="any element"> info </p>

Usual Website Format: <element></element>

Text Format: <element></element>

<b> : bold

<i> : italic

<u> : underline

Link Format: <element></element>

add : target="_blank" inside the a tag to make the site open in other window

Headings level: <element></element>

<h1> main heading

<h2> subheading

<h3>

until <h6>

fig 1.2, Headings, Week 2 (05/04/2022)

Numbers, bullets, and nested: <element></element>

1. Numbers

<ol> ordered list

<li> list item

fig 1.3, Numbers, Week 2 (05/04/2022)

2. Bullets

<ul> unordered list

<li> list item

fig 1.4, Bullets, Week 2 (05/04/2022)

3. Nested

Use another <ul> per nest

fig 1.5, Nested, Week 2 (05/04/2022)

Week 3 (12/04/2022): Image ID and Class in HTML

This day lecture, Mr. Shamsul taught us how to add image in our HMTL website.

CSS CODE FOR ID AND Class:

.class

#ID

- body no need

Image: <element>

Steps for file in the computer

download pic - move to same folder - rename (if needed)

Attribute : can

Image format : JPEG, GIF, PNG - support transparency

JPEG : little loss of quality

GIF : suitable for logo, limited color, small size

PNG : transparency

fig 1.6, Images, Week 3 (12/04/2022)

ID Attribute :

To identify elements, and style it differently

fig 1.7, ID, Week 3 (12/04/2022)

Class Attribute : -> similar like jump link

Same but can be used in any elements.

fig 1.8, Class, Week 3 (12/04/2022)

Smooth Scrolling Attribute :

To make a smooth scrolling effect.

fig 1.9, Smooth Scrolling, Week 3 (12/04/2022)

Week 4 (19/04/2022): Public Holiday

Week 5 (26/04/2022): CSS

fig 1.10, Example of CSS, Week 5 (26/04/2022)
CSS CODE:

{code: value; }

{color: cornflower; } or {color: #ffffff; } -> example

{font-weight: nromal/bold; }

{font-style: normal/italic/oblique; }

{text-transform: uppercase/lowercase/capitalise; }

{text-decoration: none/underline/overline/line-through; }

{text-indent: 25 px} -> example

{text-shadow; 1pt 1pt 1pt #ffffff} -> example

Changing BG:

fig 1.11, BG CSS, Week 5 (26/04/2022)

Text box model:

fig 1.12, Text Border CSS, Week 5 (26/04/2022), source; lecture

{height: 400px; }

{min-height: 400px; }

{border: solid black 2px; }

{border-radius: 20px; } -> (rounded corner)

{padding: 20px; }

{margin: auto; }

Week 6 (03/05/2022): Public Holiday

Week 7 (10/05/2022): Display in CSS

<div>

Important property for controlling layout.
Every element has a default display value depending on what type of element it is; the default for most elements is usually block or inline.

How to create some sections -> div inside div etc.

<div>

</div>

fig 1.13, DIV, Week 7 (10/05/2022), source; lecture

PRACTICAL

Week 3 (12/04/2022): Image ID and Class in HTML

Today, we were tasked on to add images and class in our exercise 1:

fig 2.1, image CSS, Week 5 (12/04/2022)

fig 2.2, image CSS, Week 5 (12/04/2022)

Week 5 (26/04/2022): CSS

Today, we were tasked on to add images and class in our exercise 2. We were taught on personalising each tags with attributes using CSS (color, size, case):

fig 2.3, example of CSS, Week 5 (26/04/2022)

Also adding fonts from google fonts:

fig 2.4, fonts CSS, Week 5 (26/04/2022)

We were also taught on personalising background:

Color only

fig 2.5, colored bg CSS, Week 5 (26/04/2022)

Image

fig 2.6, picture bg CSS, Week 5 (26/04/2022)

Then, about border, padding, and margin:

fig 2.7, border text CSS, Week 5 (26/04/2022)

Week 5 (26/04/2022): DIV

Attaching CSS to HTML doc:

Create CSS file, style.CSS
Save on same folder
CSS designer - add source

fig 2.8, Adding CSS file to HTML, Week 7 (10/05/2022)

How to create some sections -> div inside div etc.

<div>

</div>

fig 2.9, DIVs, Week 7 (10/05/2022)

To add some effetcs to the link, this what we can add:

hover: when mouse near the text

visited: when link already visited

fig 2.10, playing with a and navi, Week 7 (10/05/2022)

INSTRUCTIONS
<back to top>

fig 3.1, Module Information Booklet of Interactive Design

WEEK 1 TASK EXERCISE: (29/03/2022)
✅ 3 good websites and 3 bad websites excel sheet. (due: before next week)

WEEK 2 TASK EXERCISE: (07/04/2022)

✅ Create a web document based on the content given. Follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). Upload the web document to a web hosting (Netlify). I will demonstrate on how to upload the file in class next week (Week 3).

WEEK 3 TASK EXERCISE: (14/04/2022)

✅ Download the content in the link. You are required to create a single html page that contains the content given. You should also include images for required sections (use all the images provided). In each main sections, you need to include an id attribute that will be later used as an anchor to be linked from the navigation (in the first part of the content).After completing the task, upload it to Netlify and submit the link in Google Classroom. Complete the task by next week (Week 4).

WEEK 7 TASK EXERCISE: (11/04/2022)

✅ Required to create a single web page based on the content given in the link, follow the layout as in the reference given. Use an external CSS file to create the layout as shown in class. Upload the completed work in netlify and submit the link in Google Classroom.

EXERCISES

<back to top>

EXERCISE LIST

EXERCISE 0: GOOD WEBSITES AND BAD WEBSITES (WEEK 1)

Mr. Shamsul tasked us to explore various web design from awwwards.com, and find 3 websites that we think good and 3 websites that we think bad.

Exploring to a lot of choices made me now more about the web designed by professionals. I find it somewhat difficult to find the bad one. Then, I finally came out with these 6 websites:

Websites that I think good:
1. "Garbage" by Marina Loo

Preview:

fig 4.1-4.3, "Garbage" Preview, source on url sourced, Week 1 (02/04/2022)

The goal of the website is talking about enviromental issue, focusing on garbage. The purpose is specified on garbage issues, which most likely to show readers the cons of garbage waste, especially unreuseable garbage which can destroy environments. The website aims is to suggest people to reduce garbage and wastes.

Pro's:

Great interface combined with flowing animations, feels very interactive. (when we scrolled, things will automatically moved as direction)
Art style is simple but attracting. (using the minimalist concept)
All texts placement are good and not boring to read. (good readability, good choice of using sans serif)
The way of emphasising points are very effective, using red colors. (eye catchy color compared to other background color used on the website)

Con's:

Seems having a little to much words. (it looked so many informations all at once)
Some scribbles are not easy to understand. (some don't really describe the item well, too abstract.)

Targeted Audience:

Talking about enviromental issue, focusing on garbage, which I think really suitable for people with any age ranged around 15-50.
Reason: because people under 15 won't really understand the meaning of the design, and more than 50 maybe understand but won't really suit with the interface.

2. "Oh Happy Days" by Big Horror Athens

Preview:

fig 4.4-4.6, "Oh Happy Days" Preview, source on url sourced, Week 1 (02/04/2022)

The goal of the website is to introduce people about a fashion item; sole that are being sold. The purpose is by promoting the sole by providing the advantages and benefits of the sole, so people will interested to buy it.

Pro's:

Great interface and reading flow. (the animation flowed along with scrolling the website)
Color pallete looks very fun and trendy. (using pop color scheme)
Offers a good readability. (the arrangement of the design and typography is great)
Using cursor symbol which is unordinary. (more attractive and not boring)

Con's:

Website is a little bit laggy.
No "BUY NOW" sign. (usually in promotional website, especially about shop there's BUY NOW sign which can easily used and can improve the chance for customer buying.)

Targeted Audience:

Talking about enviromental issue, focusing on garbage, which I think really suitable for people with any age ranged around 15-50.
Reason: because people under 15 won't really understand the meaning of the design, and more than 50 maybe understand but won't really suit with the interface.

3. "Loewe x Studio Ghibli" by IN FOCUS

Preview:

fig 4.7-4.12, "Oh Happy Days" Preview, source on url sourced, Week 1 (02/04/2022)

The goal of the website is to promote some Studio Ghibli's merchandises. The purpose is promoting the design by showcasing about Studio Ghibli merchandises, by exhibit a Studio Ghibli themed website.

Pro's:

Interface and interaction of the website is insanely great. (very outstanding of art, as if readers/viewers are interacting in)
All color pallete and style really showcase the collaboration company, Studio Ghibli. (authentic)
Although background colors are constanly changing, font color is still readable.

Con's:

Not really promoting the item too much. (too focused on the main entrance, while forgetting the purpose of the website, ratio between intro and main is too much)

Targeted Audience:

Loewe is a fashion item company, which make it very suitable for fashion enthusiast.
It collabs with Studio Ghibli, which it's also targeted for all Studio Ghibli's fan, because they're selling Studio Ghibli's items.

Websites that I think bad:

4. "CIRCUS Shanghai Inc." by Studio Details Inc

Preview:

fig 4.13-4.17, "Circus" Preview, source on url sourced, Week 1 (02/04/2022)

The goal of the website is to make people who're interested in Chinese Market to have easier accessibility. The purpose is to help target audience to have easier access by promoting a service that they can use.

Pro's:

Great interface and flow. (the interface are quite fun)
Fun and bold color palette. (which made a really good contrast, except the headings part)

Con's:

Headings font are not really impactful because lack of contrast with the background. (made it feels like they aren't headings)
Font size for menu bar are really small and not readable enough. (they should've been having a good readability because they're important sections)

Targeted Audience:

Adults / people who want to enter the Chinese market to promote their items.

5. "Sceners" by Pranjal Kaila

Preview:

fig 4.18-4.19, "Sceners" Preview, source on url sourced, Week 1 (02/04/2022)

The goal of the website is to provides an exhibition of photographies. The purpose is to showcase some aesthetic photographies that visitors can enjoy.

Pro's:

The concept is good, like an exhibition. (it's unique)

Con's:

The use of pure white color as the main background. (my teacher always said that using pure white / black in designing is a big no)
Interface is a little bit confusing and laggy.
Feels like overwhelming, to many things happening at once. (it's to confusing which one is which, and the scrolling also)

Targeted Audience:

Not quite sure about the target audience, in my opinion adults aged around 20-40, and those who are interested in aesthetic photographies.

6. "The Festival of the Diaspora" by Oncilla Labs

Preview:

fig 4.20-4.23, "The Festival of The Diaspora" Preview, source on url sourced, Week 1 (02/04/2022)

The goal of the website is to introduce people about a cultural festival that's going to happen on Columbia. The purpose is to Promote and introduce The Festival of The Diaspora to people to join by showing on some information about the festival.

Pro's:

The color used really describe The Festival of the Diaspora.
Information distributions are not too much so not overwhelming. (the author made things flowing, not compiled all together)

Con's:

The design interface seems to monotonous, repeated interactions. (the layouts and style are the same, only a bit that's different)
Text placed are a little bit not easy to read because aligned to right. (I thought that majorly people reads from left to right, and align right is rarely used.)

Targeted Audience:

Diaspora people, activist or anyone interested in The Festival of the Diaspora that're living around Cartagena, Columbia.

On conclusion, this is my good and bad websites compiled in a single table:

fig 4.24, good and bad websites, Week 1 (02/04/2022)

EXERCISE 1: CREATE HTML DOCUMENT (WEEK 2)

(back to exercise list)

In the second week, we were tasked to create a document same as a file that Mr. Shamsul gave to us. We were required to make it using One Note or Notepad, like the one demonstrated on class this week.

fig 4.25, original document, Week 2 (07/04/2022)

First, I created the HTML format and tried to open it on website. Then, I created the head and body. I typed the first paragraph.

fig 4.26, progress 1, Week 2 (07/04/2022)

Continuing the next,

fig 4.27, progress 2, Week 2 (07/04/2022)

Finally the last page :D

fig 4.28, progress 3, Week 2 (07/04/2022)

After I'm done, I compared with the original one:

fig 4.29, progress 4, Week 2 (07/04/2022)

HTML code preview:

fig 4.30, HTML Preview, Week 2 (07/04/2022)

Submission link: https://exercise-1-abigail.netlify.app

EXERCISE 2: CREATE HTML DOCUMENT 2 (WEEK 3)

(back to exercise list)

I started to breakdown the datas first, started by headings and subheadings.

fig 4.31, breaking down, Week 3 (14/04/2022)

After I finished with all the sections and datas, I plan to make the bold and italic words. I also wanted to make color for the headings since the examples are using blue and change the body font to Helvetica because it's similar to Calibri (I think it's optional). So I searched on google about the code although I already learnt it back in high school. The newest thing for me is that I just know that Adobe Dreamweaver has feature to choose color from eyedropper tool, and it was so convenient!

fig 4.32, color, Week 3 (14/04/2022)

After I'm done with the datas and formatting, I started created the anchor link, and put the IDs in each sections:

fig 4.33, anchor link, Week 3 (14/04/2022)

I tried them to see if they're working.

fig 4.34, anchor link testing, Week 3 (14/04/2022)

Yay it worked! :D Then, I started to add the pictures by downloading it first.

fig 4.35, downloading picture, Week 3 (14/04/2022)

I basically put the picture using design mode, then adjust it in the code mode.

fig 4.36, picture formatting, Week 3 (14/04/2022)

All done! Next is, I compared the original and my work:

fig 4.37, comparison, Week 3 (14/04/2022)

I think Ok? Everything looked the same but at the same time I feel unsure about the headings since they don't have much space to the next paragraph. But if I make it same like that, it won't use headings, but we only have been taught headings so it"s better to play safe(?)

So then, I uploaded it on Netlify.

Submission link: https://exercise-2-abigail.netlify.app

EXERCISE 3: LAYOUT EXERCISE (WEEK 7)

(back to exercise list)

Mr. Shamsul tasked us to do some layouting. These are contents provided:

fig. 4.38, contents, Week 7 (12/05/2022)

First thing I do was studying the layout, thinking what should I use.

Then, I downloaded all the contents needed and opened Adobe DW and did the basic thing first; made html document, also created and attached the CSS.

fig. 4.39, first thing, Week 7 (12/05/2022)

Proceeding to create the display link and all the content of first div.

fig. 4.40, home link, Week 7 (12/05/2022)

Then, creating the div with three column, Then I edit the CSS first before I go to the next div.

fig. 4.41, three columns div, Week 7 (12/05/2022)

Followed by the 2 columns 2 rows div, and the footer. After that, I edit the CSS, from background to padding. I struggled in making the picture size, and the height of the div.

fig. 4.42, 2 columns 2 row div, Week 7 (12/05/2022)

Then I used Open Sans and Radio Canada because they both offer sans serif typefaces. After that, I finalize everything.

After that I want to try to add the text in front of the title image. I searched the code on Google.

fig. 4.43, reference code, Week 7 (13/05/2022)

I tried to combine it using 2 divs, I put it on my HTML and CSS:

fig. 4.44, using code, Week 7 (13/05/2022)

Submission link: https://exercise-3-abigail.netlify.app

REFLECTION

<back to top>

I found out these tasks are quite interesting and fun for me to do. I enjoyed every single process because I don't feel any struggle for the basic HTML and CSS itself, because I experienced some learning back in high school. I also didn't struggle with time, as I understand the concept. Thus, I learnt that learning is the key to enjoy, understand, and speed up working process.

Search This Blog

Abigail Kartika Darmowinoto (0350525)