Interactive Design || Exercises
28/3/2022 -
Jodiann Yeoh Chooi Kit 0352238
Interactive Design || Exercises
LECTURES
Fig 1. Week 1 Lecture Notes
Fig 1.1 Week 2 Lecture Notes - Web Standards
Fig 1.2 Week 3 Lecture Notes
Week 4 Lecture Notes - UI vs UX
Week 4 Lecture Notes - Introduction to CSS
Week 5 Lecture Notes - CSS
INSTRUCTIONS
Fig 2. Interactive Design MIB
Week 1
- Pick 3 good websites and 3 bad websites and to evaluate
them
Week 2
- Create web doc based on the content provided, upload document
to Netlify and Mr. Shamshul will demonstrate how to do so in the
next class.
Week 3
- Download the content in the link. You are required to create a
single html page that contains the content given. You should
also include images for required sections (use all the images
provided). In each main sections, you need to include an id
attribute that will be later used as an anchor to be linked from
the navigation (in the first part of the content). After completing the task, upload it to Netlify and submit the
link in Google Classroom. Complete the task by next week (Week
4).
EXERCISES
Week 1
We were briefed on our first task where we had to find 3 good
and 3 bad websites from a websites https://www.webbyawards.com and https://www.awwwards.com/sites/transmissions#comments then evaluate them from different perspectives.
Week 2
Mr. Shamshul gave a demonstration on how to do some basic coding in TextEdit eg. paragraph spacing, heading, sub-heading, links, text style, ordered & nested lists etc. He then gave us a content as reference for our Exercise 1 task.
Week 3
We were given a demonstration on how to insert images and insert jump links into Exercise 1(from Week 2) in Adobe Dreamweaver. Mr. Shamshul gave us another content where we had to apply the new knowledge we've obtained into the new task which is Exercise 2. This also will be done on Adobe Dreamweaver.
Good Websites
1. MOHIEM by Taro Yoshimura & Ryo Fujita from Japan https://moheim.com
Pros - The website's design is minimalistic which correlates with the design of their products showcased and most importantly
the vision of the designers. To add to its simplicity, the website does not contain words which fill up the place but instead has a pleasant amount of negative space making it suitable to the eyes.
Cons - None
Target Audience - Teens and older
Goal - To demonstrate their products sustainability
Purpose - To promote their interior accessories, furniture and kitchenware
2. La Nouvelle from France https://lanouvelle.agency
Pros - The website is interactive in the sense that its sort of a "hunt" to find information. When you enter the page, you have to scroll to unravel animated information, making me want to explore the page even more.
Cons - Whats unfortunate was the language barrier. The information being communicated(atleast the crucial ones) were all in french.
Target Audience - French speakers.
Goal - To demonstrate their creative approach of words and an expertise in visual design.
Purpose - To attract brands who are interested in their formats, designs etc.
3. Portfolio by Jack Jaeschke from Australia https://www.jackjaeschke.com
Pros - The web design itself is not only captivating to look at, but also has humour and sufficient information which tells me alot about the designer and the work that they've done.
Cons - None
Target Audience - Designers
Goal - To make their skills evident through an online platform. This allows possible future employers to easily see a designers skillset through their portfolio.
Purpose - To provide information on their different social media platforms
Bad Websites
1. "demophorius" by Kommigraphics from Greece https://demophorius.com
Pros - The Pros are, it provides readily available medical related supplies eg. surgical gloves, needles & accessories, extraction machines and many more. This validates that it is a reputable source and gives an ease in mind that it is a "click" away.
Cons - Though there are pros, its cons outweights it. Off the bat, the website is disorienting, especially to newcomers(not user friendly). There were atleast 5 or more differing fonts which was unappealing.
Target Audience - Hospitals and Medical Units
Goal - To generate revenue
Purpose - To showcase their products & its quality.
2. Om Swami by Niccolo Miranda from The Netherlands https://omswami.com
Pros - I feel that the static animations are nice
Cons - Static animations are not very interesting. I find that the informations are hard to navigate and i did not find the way the art style was done to be pleasant.
Target Audience - Spiritualists
Goal - To speak on his experiences with the aid of visuals(web design)
Purpose - To tell his life changing story which might have a spiritual impact on others
3. Transmissions by Zorraquino from Spain https://transmissions.cristobalbalenciagamuseoa.com
Pros - The text animations were nice and design is simplistic.
Cons - As I am scrolling through the portfolio images, it is hard to control and goes so fast that it starts to strain the eyes. The arrangement of text could be better as when I was taking in the images, large words filled the image, making it hard for me to appreciate the work itself. Language was also an issue as it was mostly in Spanish.
Target Audience - Fashion Designers/ Students/ Spanish Speakers
Goal - To touch on the details/ history behind each fashion piece.
Purpose - To demonstrate the legacy of the late Cristobal Balenciaga
Week 2 Exercise 1 - HTML DOCUMENT
Fig 3. Week 2 Exercise 1 Content - HTML Document
The document above is the content and format which we'd have to replicate using TextEdit.
Fig 3.1 Exercise 1(Progress 1)
Netlify Link - https://exercise1-jodiann.netlify.app
Fig 3.2 Exercise 1 Final Completed HTML Document(Final Progress)
Fig 3.3 Exercise 1 Final HTML Code
Fig 3.4 Week 3 Exercise 2 Content - Final HTML Document
Fig 3.5 Exercise 2 Final HTML Code
Fig 3.6 Exercise 2 Final Completed HTML Document
Netlify Link - https://exercise2-jodiann.netlify.app/exercise2.html
Week 4 Exercise 2 Further Development - Final HTML Document
Week 4 Exercise 2 Further Development - Final HTML Code
Week 6 Layout Demonstration Final HTML Document
Week 6 Layout Demonstration Final HTML Code
Week 6 Layout Demonstration Final CSS Code
Week 7 Layout Exercise Final Document
Netlify Link - https://finallayoutexercise-jodiann.netlify.app
Week 7 Layout Exercise Final HTML Code
Week 7 Layout Exercise Final CSS Code
Comments
Post a Comment