Labels

Interactive Design - Weekly Journal


Jump Links



Week 2 (2/10/2024)

In today's class activity, we are tasked with creating either a kiosk or an application to help students with wayfinding on campus. This is a relevant problem, as many of us experienced difficulties as first-time visitors, such as finding parking, navigating the campus, and learning about available facilities. As a solution, we propose an all-in-one app that provides everything newcomers might need.


Figure 2.1 Low fidelity prototype


Our prototype offers four main functions: finding available parking, providing directions, searching for restaurants or cafes on campus, and offering translation services, especially for international students. Although it's just a simple prototype with basic functionality, it addresses common problems that remain unsolved. This class activity encouraged me to brainstorm with my classmates, and we were pleased to come up with this idea in just 30 minutes and receive positive feedback from our lecturer.


< back


Week 3 (9/10/2024)

In today's class, we learned the basics of web structure. A landing page, which is the first page users see when they enter a website, consists of three main elements: the header, body, and footer. To enhance user experience, elements like color, typography, and organization are important for leaving a strong visual impression. Additionally, clear navigation is essential for helping users easily find the information they need. For today's class activity, we were tasked with replicating the design of a well-made website to learn from its design features.


Figure 3.1 Original vs replicated



Figure 3.2 Replicated web design


< back


Week 5 (23/10/2024)

This week, we were taught basic HTML coding to create a website, including adding text, setting headers, inserting images, and adding hyperlinks. Below are some lecture notes on the HTML coding we learned today.


Lecture Notes

  • <!doctype html><html><head></head><body></body></html>
  • <h1></h1> - header
  • <p></p> - paragraph
  • <hr/> - line
  • <meta name="viewport" content="width=device-width, initial-scale=1"/> - can be shown in different device size
  • <b></b> - bold
  • <ul><li></li><ul> - bullet form
  • <ol></ol> - nested bullet form
  • <a href="link" target="new" title="name of website when cursor hovers"> text shown to click the link</a>
  • <img src="file/name of image.jpg"/ alt="name of image" title="name of image" width="300"/>


Below are the HTML codes, followed by their output.


Figure 5.1 HTML code in Notepad



Figure 5.2 Outcome in Google


< back


Week 6 (30/10/2024)

In today's class, we learned about the basics of Adobe Dreamweaver, including how to build a table and fundamental CSS code. We were encouraged to use Adobe Dreamweaver because it provides a real-time preview of our website and offers shortcuts for coding and inserting elements, which simplifies the coding process. Below are some notes from the lecturer during the class.


Lecture Notes

  • Insert > Images > Pick a file of an image
  • Attach link - Copy the link from a website > Highlight the words that need to be attached > Paste the link under Property panel
  • <th> - Table header
  • <tbody> - Table body
  • <tr> - Table row
  • <td> - Table content
  • <th colspan="5">
  • <table border="1" cellspacing="0" cellpadding="5">
  • Choose fonts from Google > Embed code > Copy the code and paste at <head>
  • Start CSS code with <style type="text/css">
  • body {font-family: ; color: ; background-color: ; padding: ; margin: 0;}

In our class, we were taught how to build a timetable using <table>, <tbody>, <tr>, and <td> tags. By applying CSS code, this is the outcome of my timetable.


Figure 6.1 Code for timetable


Figure 6.2 Outcome of my timetable


Using CSS code, we can customize the aesthetic aspects of our website, such as font, color, alignment, and more. In our class activity, we learned how to import fonts, change colors, and set specific styles for each header and paragraph. Click here to view my website for this class tutorial.


Figure 6.3 CSS Code


< back


Week 9 (20/11/2024)

In today's class, we were introduced to the box collider, which is a common function used to create website layouts in Dreamweaver. We were also briefed on Assignment 2, which requires us to create a prototype of our previously refined proposal using Figma. I was so shocked when I realized that we needed to submit a wireframe for our last project!


Lecture Notes

  • To make your website responsive in all devices - <meta name="viewport" content="width=width-device, initial-scale=1.0">
  • To make container - <div>
  • To add left and right container - .side_left, .side_right width
  • background-attachment: fixed; background-repeat: no-repeat; background-size: cover


Figure 9.1 Output


< back


Week 10 (27/11/2024)

In today's class, we primarily learned how to create layouts for websites, including small sections, positioning, hover effects, and more.


Figure 10.1 Carousel

< back


Week 11 (4/12/2024)

In today's class, we learned how to implement Bootstrap into our coding process. Bootstrap is a platform that provides code in HTML and CSS to help with website development.


Figure 11.1 Bootstrap


< back


Labels:

Comments

Post a Comment

Popular Posts