Interactive Design / Lectures & Exercises

on

03.28.2022 - 05.11.2022 (Week 1 - Week 7)
Audrey Gracia Djohari / 0348120
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Lectures & Exercises

LECTURES

WEEK 1:

- What Is A Website

Figure 1.0: Week 1 Notes

Personal Note:
  • Every computer is connected to a network (it can be PAN, LAN, WLAN, etc.)
  •  Every computer has an IP number, so every computer knows which computer to whom it communicates is. A network allows us to send files to other devices.
  • A server is a huge computer (looks like a giant CPU full of hard disks).
  • Server + IP number + network = you can upload something.
  • Domain name/URL (uniform resource locator): the link
  • The domain name must be purchased.
  • A flash website is a website that is dynamic, there are usually videos, animation etc.
  • These flash websites used to be created using Adobe Flash, now Adobe Dreamweaver.
  • Use javascript for animation.
  • Host (transfer) your web document to a server (internet transfer protocol).
  • A call to action (CTA) is a prompt on a website that tells the user to take some specified action.
  • The best examples of successful websites: Netflix, Spotify
  • Whenever you design a website, the goal of that website must be clear. It differs on what kind of website you design.
  • Portfolio: to showcase your work for future employers
 
Figure 1.1: Website in Chrome

Right Click < Inspect
The upper part is HTML
The lower part is CSS
Types of Website

There are many different types of websites in the internet:

• Informational website
• Corporate website
• Portfolio website
• Brochure website
• Entertainment website

WEEK 2:

- Web Design & New Media

Figure 1.2: Week 2 Notes
How to Open TextEdit
  • Open TextEdit < Format < Make plain text
  • Format < Wrap to Page
Codings

  • Bold <b>text</b>
  • Italic <i>text</i>
  • Em Dash &#8212

  • Heading <h1>
  • Subheadings <h2>
  • Paragraphs <p>
  • Ordered List <ol>
  • Unordered List <ul>

  • Font Typeface <font face=times new roman>
  • Font Color <font color=#337ab7>

  • Link <a href="https://totaltriathlon.com/triathlon-terms#usat">Name</a>
  • Colored Link <a style= "color: #337ab7" href="https://totaltriathlon.com/triathlon-terms#usat">Name</a>

WEEK 3:

- Adding Image in HTML

Figure 1.3: Week 3 Notes

Personal Note:
  • The only 3 image format that can be used for Web: JPG, GIF, PNG
  • The image files must be in the same folder as the html file.
  • Must have an alt attribute with the image code
  • Use width="400" to adjust the image scale.
Codings
  • Image <img src="images/pexels-guduru-ajay-bhargav-863988.jpg" alt="swimming" title="swimming" width="400">
  • ID <h1 id="history">TRIATHLON HISTORY</h1>
  • Link an ID Window < Properties < Link < type #id
  • Smooth Scrolling (CSS)
<style type="text/css">
html {scroll-behavior: smooth;}
</style>

WEEK 4:

- UI/UX


Figure 1.4: Week 4 Notes

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).

Interface elements include but are not limited to:
  • Input Controls: buttons, text fields, checkboxes, radio 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
Example of the difference between UI & UX:
  • UX: how the button is pressed
  • UI: how the button should look like

Types of Apps
  • Web Apps: 
On the other hand, Web Apps are accessed via the internet browser and will function according to the device you're viewing them on.

  • Native Apps: 
Native to the device,
Mobile apps are developed for a specific platform, such as iOS for the Apple iPhone or Android

Codings
  • Typeface Codes: Google Fonts < + Select This Style < View Selected Families < Copy CSS rules
h1/h2/h3/p { font-family: 'Ubuntu Condensed', sans-serif; }
  • Color Codes:
h1/h2/h3/p { color:midnightblue }
or
<li> style ="color: midnightblue">

Figure 1.5: Color codes

WEEK 5:

- Border, Margins, Padding, Display Property, Background, etc.

Figure 1.6: Week 5 Notes

Figure 1.7: Line Height & Italic

Figure 1.8: Span

INSTRUCTION


TUTORIALS

- Week 2 Tutorial (Headings, Paragraph, Bold & Italic, Lists, Links)

Media: TextEdit (Macbook)

Outcome


<!DOCTYPE html>

<!--
Details of the Doc

Date: 6 April, 2022
Author: Audrey
Task: Exercise (HTML)

-->

<!-- The comment -->

<html>

<head>

<title>Welcome to my page</title>

</head>

<body>

<h1>Hi! My name is Audrey</h1>
<p>Hello! <i>My name is Audrey</i> and I'm a student at Taylor's University majoring in the Bachelor of Design (Hons) in Creative Media. I'm 19 years old and I'm currently living in Bandung (Indonesia) and working as a Florist and Social Media Manager for an online business. </p>

<h2>Where you can find me</h2>

<ul>

<li>Instagram: <b>@odrrey</b></li>
<li>LinkedIn: <b>Audrey Gracia Djohari</b></li>
<li>Twitter: <b>@odrrey</b></li>
<li>Youtube: <b>Audrey Gracia Djohari</b></li>
</ul>

<h2>Top 5 things that I love to do</h2>

<p> I consider myself as an active person because I have many hobbies. <b>Here are the things that I like to do...</b></p>

<ol>
<li><a href="https://audreydjohari.blogspot.com">Designing</a></li>
<li>Flower Arranging</li>
<li>Singing</li>
<li>Eating</li>
<li>Swimming</li>

</ol>

</body>

<html>

Figure 2.0: Coding Exercise, 06.04.2022


- Week 3 Tutorial (Adding Image & ID, Class Attribute)

Media: Adobe Dreamweaver

Outcome

Web Link: https://exerciseduringclass2.netlify.app

Figure 2.1: Week 3 Exercise, 13.04.2022

- Week 4 Tutorial (Adding Color & Typeface)

Media: Adobe Dreamweaver

Outcome

Web Link: https://exercise-week4.netlify.app


Figure 2.2: Results

- Week 5 Tutorial  (Adding Text Box, Background Color, etc.)

Outcome
Figure 2.3: Tutorial Results

Figure 2.4: Document Folder

- Week 7 Tutorial (Rows, Columns, CSS)

Outcome


Figure 2.5: Tutorial Result 1

Figure 2.6: Tutorial Result 2

Figure 2.7: Document Folder


Good Websites

1) Eyes Here: https://www.eyeshere.com

Figure 3.0: Eyes Here, retrieved from awwwards.com

Pros: 
- The website is uniquely designed and it easily gets the attention of the viewer. It gives a strong urge to the viewer to keep scrolling and checks out everything in the website.
- The eyes animation is very smooth, also, they interact with the audience's cursor movement. 
- The color palette is aesthetically pleasing and delicate. 
- The use of typefaces are good in presenting the information hierarchy. 

Cons: 
- The web looks very interesting at first, however, It somehow gets quite boring halfway. Perhaps because the eyes animation keeps being repeated without anything particularly new. 
- There are too many words and letters halfway through the website. Reducing it might be better.

2) Lucalem: https://lucalem.com

Figure 3.1: Lucalem retrieved from awwwards.com
Pros:
- the design concept and animation is very pleasing to the eyes. They're unique and they bring fun. - the information is on point, not rambling, and effective. The viewers can understand directly what the creator wants to say. 
- The color scheme is harmonious and it succeeds in emphasizing the information 

Cons: 
- Scrolling down experience is not so smooth, a bit rigid 
- The rest of the page is not as interactive as the main menu, there aren't much animation in other pages.

3) Prometheus Fuels: https://www.prometheusfuels.com
Figure 3.2: Prometheus Fuels, retrieved from awwwards.com
Pros:
- the website has a very unique 3D animation which is very interesting and uncommon for a company profile website.
- the animation and transition of every page are very smooth, despite being very complicated. Shoutout to the web designers.
- the colors have good contrast and the color palette of the website represent the brand so well. 

Cons:
- it takes quite some time for the website to load when accessed on mobile phone.
- it might be a bit difficult for people to search a particular information when in hurry. Because only small chunks of information are shown when we scroll, so the whole article cannot be seen in one glance.

Bad Websites

1) Emprego: https://www.emprego.co.mz
Figure 3.3: Emperego, retrieved from awwwards.com

Pros:
- the design is simple and quite easy to be understood.
- user experience is good and smooth, not laggy at all.
- user can easily use the website and get many information they need.

Cons:
- the user interface is very bad because it doesn't look aesthetically pleasing.
- the design concept is basic, the website only uses boxes and lines as the design elements.
- Color palette lacks variety, but they're neat.
- Too much boxes of information and too many words on the left side of the page. The whole website, lacks chunking of information.
- no attempts of animation

2) Visit Laholm https://visitlaholm.se//en/

Figure 3.4: Visit Laholm, retrieved from awwwards.com


Pros:
- It has a good attempt in using 3D panorama (similar to Google Street View) 
- The information provided are sufficient and quite helpful 
- The color scheme is okay

Cons:
- The website is super laggy, it takes a few minutes just to open the main menu
- The use of font could be more elegant
- user experience is not good enough
- there's no other animation other than the 3D panorama. So the website looks quite stiff

3) Resplendent Ceylon: https://www.resplendentceylon.com

Figure 3.5: Resplendent Ceylon, retrieved from awwwards.com

Pros: 
- it provides many information and they are chunked well, so it's easy to understand. 
- All of the pages are equally designed well. 
- Leading of fonts are good. The information are well organised. 

Cons: 
- The video on the main menu doesn't play directly. It would be much better if the video is autoplay 
- The website loads slowly (especially the main menu) 
- Lack of animation and transition
 - some shapes and fonts are not in a good scale and a bit awkward 
- color scheme aren't very harmonious

- Exercise 1, Week 2

Instruction

You are required to create a web document based on the content given. Please follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). For a start, you need to create the document using Text Edit or Note Pad as shown in class. Remember to name the file as index.html and save the file in a folder name Exercise One.  
After you have completed the task, you are required to upload the web document to a web hosting (Netlify). I will demonstrate on how to upload the file in class next week (Week 3).
Content: 
Figure 3.6-3.7: Exercise Contents, 07.04.2022
Outcome

Web Link: https://exercise1-audreygraciadjohari.netlify.app


Figure 3.8-3.9: Week 2 Exercise (Google Classroom), 12.04.2022


Figure 3.10: Completed Codes in TextEdit, 12.04.2022

Figure 3.11-3.12: Completed Web, 12.04.2022


- Layout Exercise, Week 7

Instruction

You are required to create a single web page based on the content given in the link. You must 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.

Content:

Figure 3.13: Layout Exercise Reference given by Mr. Shamsul

Outcome




Figure 3.15-3.17: Layout Exercise Final Outcome


REFLECTION


Experience
This module is very new as it teaches me all about HTML and CSS, a design field I never tried before. Mr. Shamsul taught us how to use codes in DreamWeaver. Surprisingly, I could understand what he taught and I was quite proud of myself when I managed to follow his codings. It was a huge satisfaction whenever I see the web outcomes I made from scratch through coding. 

Observation
I observed that a good website is not just about aesthetics but also functionality. I also learned that HTML is where we arrange the images, text, rows, columns, and other elements. While CSS is where we stylize the elements.

Findings
Nowadays, I realized that a lot of good websites are usually simple. I also found that anyone can access HTML if they learn the way it works.

FURTHER READING


- The Book of CSS3: A Developer's Guide to the Future of Web Design

Figure 4.0: The Book of CSS3: A Developer's Guide to the Future of Web Design
 (2011)

Reference: 
Peter Gasston, (2011), The Book of CSS3: A Developer's Guide
to the Future of Web Design, No Starch Press.

Chapter 7: Multiple Columns

Figure 4.1: 
Dynamic Columns: column-width

Figure 4.2: Column Gaps & Rules

Although CSS3 makes flowing your content into columns easy, the challenges it presents are not so much technical as they are practical: What happens if you want to use images that are wider than a column or if you want to use long headlines in narrow columns?


Although using multiple columns is definitely appropriate in certain situations, think twice about whether your content is suitable. Make sure you have full control over your content before using these properties and don’t design websites that rely on multiple columns if your client doesn’t have a dedicated and conscientious web content team.


Also, bear in mind that screen resolutions can vary dramatically, and content that looks readable to you may not be readable to the visitors of your website. If they have to scroll up and down too frequently, which can cause lots of confusion, they may be put off from visiting your site altogether. But with all that said, clever use of columns can make your content much more readable.

In the last three chapters, I’ve described how CSS3 provides methods to format and present your text copy, giving you better control over your typography and layout. Next, I introduce ways you can improve the overall visual presentation of your websites, starting with new background and bor- der effects.


Comments

Post a Comment