INTERACTIVE DESIGN / LECTURES AND EXERCISES

28.03.2022 - 00.00.000 (Week 1 - Week 5) 

Muhammad Azka Farezi Septenal / 0351345 / Bachelor of Design (hons) in Creative Media Interactive Design

Exercises

---

LECTURES

WEEK 1 : LECTURE 1

What Is A Website ?

A website is a document or data that is accessible via the internet. It has one or more pages on the internet, as well as an intended purpose.

Types of Website 

There are several types of websites that are currently available on the internet, including:

• Informational Website
• Corporate Website
• Portofolio Website
• Brochure Website
• Entertainment Website

WEEK 4 : LECTURE 4

What are the difference between UI and UX?

This week, we will learn the distinctions between User Interface (UI) and User Experience (UX) in order to better understand each subject. We will also learn about the various tasks assigned to each element.

UX Designer 

• UX designers focus on the structure and layout of content, navigation and how the users interact with them.
• The types of deliverables they produce include sitemaps, user flows, prototypes, and wireframes, which are more focused on the underlying structure and purpose of the software.
• The visual appearences does impact these, but can be created as a separate layer that is applied over the top.

User Interface Design :

• UI Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand and use to facilitate those actions.
• UI brings together concepts from interaction design, visual design, and information architecture (IA).

User have become familiar with interface elements acting in a certain way, be consistent and predictable in the choices and the layout design. Doing so will help task completion, efficiency, and satisfaction.

Interface elements include but are not limited to :

• Input Controls : Buttons, text fields, checkboxes, rain buttons, dropdown lists, list boxes, toggles, date field.
• Navigational Components : Breadcrumb, slider, search field, pagination, slider, tags, icons.
• Informational Components : Tooltips, icons, progress bar, notifications, message boxes, modal windows.
• Containers : Accordion

UI Designer 

• Focus on the way the functionality is displayed and the fine detail of how user interact with the interface.
• They produce the visual comps and functioning front-end code.
• This is very much about polished final production quality outputs.

---

INSTRUCTION

---

EXERCISE

WEEK 1 : SURVEYING THE POSSIBILITIES

For the first meeting, we will be required to complete a survey given to us by our lecturer (Mr Shamsul) in order for him to enlighten us further on the differences between a good and a bad website. We must explain to the selected websites why it is bad and why it is good.

GOOD WEBSITES 

Virgin Atlantic :

Pros :

• Unquestionably one of the best travel or airline websites.
• It is sophisticate and visually appealing due to the use of thin typefaces and the modern color combination between red and purple colors.
• Simple and very straight forward.
• The placement of each elements are neat and easy to find for the customers.

Square Space :

Pro :

• This is a highly interactive website compared to Virgin Atlantic.
• Various typefaces used in this website, which is a good choice to combine a different typefaces with a great execution.
• Although the website is very interactive but square space is an easy to understand/learn website.

Cons :

• True, they have a large number of typefaces combined in this website, but they eventually lack consistency.
• People are perplexed as to what kind of website it is. It is insufficient for people to understand that they are a website designer.

Super List :

EXERCISE 1 : TRIATHLON HISTORY

For the first exercise of the semester, we must adhere to Mr. Shamsul demonstrated an extremely elementary code in dreamweaver and visual studio code. During his class, all students are required to follow his demonstration and instructions. 

We are also taught how to use HTML for the very first assignment, such as <div>, <h1>,< ul>, and <li>, with the following progression during the very first interactive design exercise:

Figure 1.3 Exercise 1

Figure 1.4 Exercise 1 Code

EXERCISE 2 : VISION FOR THE UNEQUAL WORLD

The second exercise is nearly identical to the first, with the exception that this time we will style our website using CSS. It took longer and is more difficult than previous exercises. Nonetheless, I was able to follow Mr. Shamsul's class instructions and create my own version based on his demonstration.

Here is the preview of my own website, as per Mr. Shamsul's instruction and the preview of the code below:

Figure 1.5 Exercise 2

Figure 1.6 Exercise 2 Code

EXERCISE 3 : LAYOUT EXERCISE

This exercise was the most difficult among others. Using Mr. Shamsul's example as a guide, it was extremely difficult to produce a similar composition or layout. I spent roughly two days completing this composition. During this period, students must also use row and section as well as play with padding. 

And here is the result of my exercise in layout:

Figure 1.7 Exercise 3

---

REFLECTION

Throughout this semester, I found this class to be interesting yet challenging. Code isn't just my thing but here, I could experience a little about ui/ux by learning code with Mr Shamsul. His class was great and I enjoyed a lot watching him demonstrate about code. We also learned many thing about website such as HTML, CSS, and java script. It was a great journey to learn about code and I'd be more happy to learn this even further in the future.