Interactive Design/Exercise 3 & 4

on
10.5.2023 - 22.5.2023/Week 6 -Week 8
Sim Jian Xiong (0356498)
Bachelor Design (Hons) in Creative Media
Exercises 3 & 4
LECTURES

Week 6 - How Pages Use Structure
Many web pages act like electronic version of documents such as newspapers, catalogues, insurance forms etc. Structure is important in helping readers to understand messages and navigate around the document.

Fig 1.1 Newspaper comparison

The use of headings and subheadings in any document often reflect a hierarchy of information. Any document will start with a large heading, followed by an introduction or the most important information.

For example, the structure is very similar when a news story is viewed online. Each story will have a headline, body and images to help readers understand the story in the newspaper. If the article is long, there may be subheadings that split the story. 

Week 7 - Uploading Images for Web
In Photoshop, there are ways to export different types of images for your website.

Hero Image 
  1. Export via Save for Web
  2. Before saving, optimize and check if the time and bps is as low as possible, but the image quality has to be good
  3. Save as JPEG
Logo
  1. Use the Selection Tool to copy and paste the logo in its own file
  2. Make the background transparent
  3. Export via Save for Web
  4. Save as PNG-24/GIF 128D
Large Image
  1. Reduce resolution to 72. Adjust either width or height
  2. Export via Save for Web
  3. Save as JPEG
Note: Name files correctly so it's easier to find!

Week 8 - Learning CSS
INSTRUCTIONS
 
Exercise 3 - HTML Exercise: Personal Profile Page
For this exercise, we are creating a profile page using HTML. In our profile page, we have to include:
  • An image of ourself
  • A brief bio
  • Lists of personal interest
  • Links to social media profiles or interesting websites
I was unable to download Adobe Dreamweaver in my device so Visual Studio Code becomes my workplace.

HTML CODING 
Fig 1.2 HTML Coding, Week 6 (13.5.2022)

I followed the tutorial recording by Mr. Shamsul step by step, only making minor changes for my personal interest.

HTML VERTIFICATION
Fig 1.3 validator.w3.org, Week 7 (15.5.2023)

Before submission, we used a website suggested by Mr. Shamsul that checks our coding. I went back to my file and make changes until there are no more fatal errors.

FINAL SUBMISSION

Originally, I hosted my web page on Github, but I couldn't get my image to load. Mr. Shamsul showed me how to upload my file onto Netlify and the image finally show itself.

Exercise 4
For this exercise, our task is to create a responsive grid layout for a website with the images provided. The design and alignment should be visually appealing and functional. We also have to host it on Netlify.

I used w3 school to assist me in this task with CSS commands.

Fig 1.4 Upload Error, Week 8 (26.5.2023)

After I'm finished, however, I couldn't host it on Netlify. The notification above keeps popping up. At first, I thought it's my coding so I went back, ran validator and fix some error. But to no effect. After watching several YouTube videos, I learned to rename my file to "index" and it worked.

FINAL SUBMISSION
FEEDBACK

Week 7
General Feedback: Do not resize images in code as it will distort them, resize them in Ai or Ps.

REFLECTION

It was a pain to fix the errors in both exercise 3 and 4. I didn't know I've made so many mistakes as I just copy and paste the commands. Furthermore, I was furious when I couldn't host Exercise 4 on Netlify and the solution was to rename the file. Don't ask me how that work.
FURTHER READING

Week 7

This week's reading material is an online web page that busts or confirm the top 34 myths on web design using research articles.

I've made some points that I find interesting:
  • In 2013, analytics vendor Chartbeat analyzed Slate and other websites and found that most visitors scroll through about only 50-60% of an article page.
  • Usability expert Jakob Nielsen’s eye-tracking studies show that while attention is focused above the fold, people do scroll down, especially if the page is designed to encourage scrolling.
  • In contrast with art, good design is not only visually and emotionally appealing but is made for use.
  • In regards to small details in design, Joshua Brewer states: "If the customer walks away feeling like there was a little extra attention paid to them, you can guarantee they will be back and most likely will tell their friends about it as well.”

Comments

Post a Comment