Interactive Design - Exercises

13/Sep/2022 - 29/Nov/2022 (Week 3 - Week 14)
Kim MinJoon (0353248)
Bachelor of Design (Honours) in Creative Media / GCD60904 / Taylor's University
Exercises

---

Lectures

Week 3

Most appararnt advantage of using the right color combinations in web design is that it helps users navigate through the site.

 

Color matters in web design because it can improve visitors’ experience, and it enables them to find the information they need and repond to your Call to Action (CTA). This also has a significant role in branding the product with its color combinations. With the help of colors, it has been studied that color increases overall brand recognition.

 

Color Relationship

Monochrome – Same color that consists of different tints, shades and satration.

Complementary – 2 colors on the color wheel that are opposite to each other directly.

Analogous – 3 colors on the color wheel that are next to each other.

Triadic – 3 colors that are at the end of a triangle when drawn onto the color wheel.

 

Complementary and analogous color schemes are easy to work with for designers.

 

Color Warmth

Colors that contain a higher amount of yellow and red are considered to be warm colors.

They evoke a sense of passion, happiness and heat.

They can bring feelings of danger. So they are used for alert messages.

 

Colors that contain higher amount of blue and purple are consider to be coo colors

They can represent chilly climates, clear waters, or the sky.

It might be more soothing and relaxing than warm colors.

They can carry connotations of formality and sadness.

 

Color System [RGB, CMYK, HEX]

CYMK is used for Pring Design.

HEX color system uses six digit, 3 byte, hexadecimal description of each color. Ex: #000000

Tint and Shades

Project 1 // by week 5

1.       Decide Topic

2.       Research

-          Moodboard

Visual reference

Font choice (Google fonts)

Color palette

Layouts

-          Sketches / Wireframe > 20 sketches

3.       Design

-          Photoshop (common web dimension, 72 dpi)

-          Illustrator

(must export in Jpeg)

Week 4

Call to action button** can be many but usually have a default button

Cards are mostly used in a website, images and a designated information below. Can have call to action button.

Call to action can be “add to Wishlist” as well in a card.

Drop down list is also available to see the other options

Modal window is something that pops up and isn’t able to click elsewhere unless selected on a call to action button.

Carousel can have navigators to show where

3 cards is enough. If not you do not have white space, it doesn’t give room to breathe and is cramped. White space is also a part of design.

Lazada has more room to breathe than shopee

Getbootstrap.com

Pexel for photos

Necessary to put in copyright claim in footer as well as a back to top button

Pagination is like breadcrumbs and it’s a navigation to tell users what page they are on.

Week 8

Display

CSS’s most important property for controlling layout

A block element is block-level element

 

<div> standard block-level element

Starts on a new line and stretches out to the left and right as far as it can

 

Other block-level elements are p and form, and new in HTML5 are header, footer, section and more.

Most web designers tend to use <div> to create a layout for website design.

Before HTML5, div was used, and a class was needed to be inserted in the div.

 

<span> is an inline element, and this doesn’t break a line but adds onto the line.

For example, a bullet point can be shown horizontally than vertically downwards.

 

#navi > li (
                display: inline;

 

Any element can become a child and parent element. 

---

Instructions

---

Tasks

Exercise 1 - HTML website creation #1

For the first exercise, we were to make a html website through a tutorial that Mr Shamul has provided us. We created a note named index.html and with the document that he gave us with the video, we copied down the information down onto the code. 

With the help of Mr Shamul's lectures and the video recording of the class, I was able to get down the simpler codes and the structure on how to make an html website work. 

Figure 1.1: Code of notepad

From the class of creating about 'myself' through html, we were able to quickly get this done through notepad.

The video that Mr Shamul provided us showed how we were supposed to publish our index file into netlify so that it can be opened through different computers through the internet. 

Later in the next class however, we installed a program called Visual Studio Code which is a programming software that is widely used in different programming studies. We used this to reformat our code from the notepad and with this, restructuring the index file was a lot quicker and neater.

Figure 1.2: Code of Visual Studio Code

The code structure wasn't perfect and that great looking but it got the job done and since it was my first time creating a html website I was pretty okay with how it turned out. 

I searched up on some ways on how to make the letters bold, italic and such and added it in to the code. With a few trial and errors, I got it down to work. 

In the same class, Mr Shamul has taught us some further information on markup coding. But since it was with visual studio code, it was a lot easier as it gave us the options on what to choose from. 

We were taught on the CSS or the style on how the website would look and we started out by making the scrolling on the website smoother. Then, we followed through the class and the lecture and for the last thing to do, Mr Shamul told us to create a 'back to top' button in our websites. 

I searched up on different ways to make it and since without experience, I had no idea what I was doing and just randomly copied the codes and pasted it onto the coding. But somehow it worked and although it didn't look great it was alright. 

Figure 1.3: Back to Top Button

In the end, it looked a lot better than before, and since there was a format on the website it looked more like a proper website than having everything aligned on the left and simplistic. 

Exercise 1 (before edit) - Here

Figure 1.4: Exercise 1 after CSS

Exercise 2 - HTML website creation #2

For this exercise, it was similar to the first exercise but a little more difficult as it had more images provided to fit into the website. 

Figure 2.1: Images provided

Figure 2.2: Text Given

*In the text, there are helpful changes that was made by someone (probably the lecturer) but there wasn't any of these when we first did this (such as "<h1></h1>.) *

starting off, I made the <ul> and the list for the things at the top as I thought that they were the hyperlinks to direct the user to the designated sections of the website. 

Then, the heading 'Vision for the unequal world'. This part was pretty okay as it was just copy pasting the texts into visual studio code. However, the formatting of the codes were a lot better as it wasn't through notepad and studio visual code displays the different codes in different color and allows the user to have a more clear visualization of the format. 

After doing what I could to the texts such as making them bold, italic, arranging them as h1, h2, h3, li and etc. 

Figure 2.3: HTML code

I then categorized each heading and lists as it would make the styling of them much easier. when writing the code for CSS. 

I also looked out for a good font to use for the theme and the aesthetic in google fonts. I tried to go for something that is simple yet serious as this website was an informational website rather than an advertising one. So I landed on PT Sans on google fonts. 

The background color was decided to be a dark purple as it would fit the whole aesthetic of the picture that was given. As for the texts that were in need of colors (eg. hyperlinks), I made them either bright pink or purple as well. 

The addition of pictures were somewhat difficult as I wanted them to fit on the left side of the text, more like a text wrap in Microsoft Word. But I did try out different layouts but I just didn't quite like them. So, I search it up and I found a way to add/float them right next to the text. What I wasn't expecting was that I could id images to edit them in CSS later on. 

Figure 2.4: Image code

After putting in the necessary details in the code, I imported the images. 

For the images however, I didn't like that it was placed on the left side right after a text. So I searched it up and got a code named float. This was to place things separately on a div. 

with this code I placed images where I wanted and this really helped out bring the site be more organized.

Figure 2.5: Exercise 2 website layout

For the images as well, the pictures of the people were not in the same dimensions so by searching it up again, I learnt that you can change the width and the height when importing the photo.

Figure 2.6: Image dimension

I added in a back to top button here and made it better than the one I had in exercise 1. It was more of a proper button and the border got a little bigger. The color was set to match the site's theme.

Figure 2.7: CSS of back to Top 

Figure 2.8: HTML of Back to Top

Exercise 2 Website - here

Exercise 3 - Website design analysis

For this exercise we were told to make a replicated design of an already existing website. However this could be done through illustrator as it would take ages to actually make a landing page. We were given 4 choices and we were to choose 1 for this exercise. 

Figure 3.1: Instruction for Exercise 3

For this, I chose to go with stockcreative. There was no particular reason that made me to with it, it was just that it looked more like what I would design. 

Since I already had some experience on Illustrator, it was easy for me to replicate this design. I got some pictures through freepik to be used in replacement of the original pictures (I didn't know we could use the same one). 

Figure 3.2: Image used #1

Figure 3.3: Image used #2

Figure 3.4: Image used #3

Then by looking at the website, I got the results of the figure below.

Figure 3.5: Final Redo of website

Exercise 4 - HTML website creation #2

For this exercise, it was basically the same instructions as exercise 2. So Mr. Shamsul gave us the instructions and the document to make the website. However, as I did not remember that there was pictures to be put in and I didn't have enough time, I just left it out without the pictures... :(

Figure 3.6: Exercise 4 Instructions

Exercise 4 Website - here

---

Reflections

Experience

For the exercises, I think that it really gave me a nice touch up on the assignments and it was a very good step for us to get the exercises that can help us code html a lot more efficiently.

Observations

I think that it was quite easy for me to finish up the exercises, as I did do coding before but not a lot but it was very fun and interesting to see the outcomes as I did the codes.

Findings

Interactive design module was very fun and the exercises really helped us out for learning each components of the html codes.