Interactive Design | Exercises

-

27/08/19 - 15/10/19 (Week 1-Week 8)
Yeo Ava (0340222)
Interactive Design
Exercises
Instructions


Lecture Notes

 Lecture 1 : Introduction to Interactive Design
27.08.19 (Week 1)

On our first class, Mr. Shamsul briefed us about the module and the software that we will be using are Adobe Dreamweaver and Brackets. Through this module, we will learn on how to do web design with coding and learn about HTML and CSS.

Lecture 2 : UX vs UI design
03.09.19 (Week 2)
Mr. Shamsul introduced us to user experience (UX) and user interface (UI) design. He explained the difference between UX design and UI design.



Lecture 3: The Web
10.9.19 (Week 3)

Mr. Shamsul gave us a lecture about web standards. He also assigned us and explained about our first project. We have to design a landing page and we have to choose our own topic. The size have to be 1920 x 1080 (web large) on Adobe Illustrator.



 Lecture 4: No lecture
17.9.19 (Week 4)
Mr. Shamsul taught us on how to use HTML using TextEdit (Mac)/ Notepad (Windows).

 Lecture 5: Extra Markup & Cascading Style Sheet (CSS)
24.9.19 (Week 5)

Lecture 6: CSS Boxes Model
1.10.19 (Week 6)
We learned on how to create containers and boxes from css for a website layout.


Lecture 7: No lecture
8.10.19 (Week 7)No lecture today as we were focused on our Adobe Photoshop website layout exercise.

 Lecture 8: Responsive Website
15.10.19 (Week 8)
We learned about on how to create a responsive website with Bootstrap. 



Exercises
Good & Bad Websites
27.08.19 (Week1)

Our task of the day was to do a presentation on 'Good and Bad Websites' from https://www.webbyawards.com/ and https://www.thebestdesigns.com/. We were split into 4 groups among the class. The judgment must be made based on the usability, accessibility, layout as well as the visual aesthetic of it. The following are the good and bad websites that my group has decided on.

Good Websites
Fig 1 : https://wpengine.com/

Fig 2 : https://www.hopewellbrewing.com/beer

Fig 3 : https://clothandcompany.com/
Fig 4 : https://airtifact.heythemers.com/

Bad Websites
Fig 5 : https://www.netted.net/guides/

Fig 6 : https://airnauts.com/
Surveying the Possibilities

Basic Interface Design
03.09.19 (Week 2)

For this week's exercise, we were again divided into 5 groups. I was in group 3, we were assigned to design an interface for an information kiosk for Taylor's University with a scenario in mind. Our group's scenario was for new students to find the Taylor's University library.

Below is the paper prototype of our interface :-







HTML Document Development
17.09.19 (Week 4)

In this week's exercise, we were introduced into the basic of HTML. Mr Shamsul guided us on how to make a website using HTML on TextEdit ( Notepad for Windows user). The exercise aims to familiarise us with HTML basic structure and code tags.

 We were then asked to write 4 sections about ourselves, and the 4 sections should include two paragraphs, lists, images and links.

This is the link of it : https://yeoava.000webhostapp.com/index%20.html#top

HTML and CSS Development
24.09.19 (Week 5)

We start to decorate our blog with colours, set margins, and learn the basics of html in general. We practice using the html we've created on the textedit / notepad, paste it all to Adobe Dreamweaver. We had to add additional HTML and CSS elements that we learned from the lecture from there.

Fig 5.1 CSS elements in Dreamweaver

Fig 5.2 CSS elements and HTML elements in Dreamweaver

Fig 5.3 HTML elements in Dreamweaver

Fig 5.4 HTML elements in Dreamweaver

Fig 5.5 HTML elements in Dreamweaver

Fig 5.6 HTML elements in Dreamweaver

This is the link of it : https://yeoava.000webhostapp.com/index%20.html#top

Layout Exercise
01.10.19 (Week 6)

 Today we were guided by our lecturers on how to create a website layout.

Fig 6.1 HTML Codes

Fig 6.2 CSS Codes

Fig 6.3 Final Outcome
Website Layout Exercise
09.10.19 (Week 7)

We had to design a Adobe Photoshop website layout this week using the CSS that we learned last week with HTML. Then we had our lecturers come around and take a look at our coding and layout.

Fig 7.1 HTML codes

Fig 7.2 HTML codes

Fig 7.3 HTML codes

Fig 7.4 HTML codes

Fig 7.5 HTML codes

Fig 7.6 CSS codes

Fig 7.7 CSS codes

Fig 7.7 CSS codes

Fig 7.8 CSS codes

Fig 7.9 CSS codes

Fig 7.10 CSS codes

Fig 7.11 CSS codes
The link to the website : https://dreamy-snyder-051559.netlify.com

Fig 7.12 Outcome layout 1

Fig 7.13 Outcome layout 2

Fig 7.13 Outcome layout 3

Fig 7.14 Outcome layout 4
Responsive Website
15.10.19 (Week 8)
We learned on how to use the example codes on Bootstrap. We downloaded the source and applied it into our Adobe Dreamweaver and also linked the CSS source. We used an example layout called "Carousel". This exercise will help us in our upcoming Project 2 which is a microsite for our "The Troublemakers Manifesto : A Design Colloquium" collateral.


Comments

Post a Comment

Popular posts from this blog

Publishing Design | Exercises

-
Image
15/04/2020-20/05/2020  (Week 1 - Week 7) Yeo Ava (0340222) Publishing Design Exercises Lecture Notes Briefing & Formats 15.04.2020 | Week 1 We started class with a Facebook Live session with Mr.Vinod. He briefed us about the module, the projects and exercises that we would be doing for class. Moreover, we were briefed on about our project 1, he showed us some of our senior's works. We should be starting our content gathering by next week. He also posted a lecture video about "Formats" on Youtube for us to watch at home. In the video, he explained about the different formats that have been used by different civilisations around the world. He explained about how the formats have changed over different periods of time. The civilisations that were looked into were Mesopotamian civilisation, Ancient civilisation, Indus valley civilisation, Han Chinese civilisation and European civilisation. History of Print 22.04.2020 | Week 2 We started...
Read more

Design Exploration | Projects

-
Image
  27/03/2021-05/07/2021 (Week 1 - Week 15) Yeo Ava (0340222) Design Exploration Projects Instructions Projects We were given the option to build any project we wanted based on the 17 Sustainable Development Goals for this module. By the end of the semester we would have to present one product from the project. This project is interesting as it gives us an opportunity to venture into different design applications. We were strongly urged to step out of our specialisations. After much considerations and research on the 17 Sustainable Development Goals, I've decided to choose Gender Equality as my topic for the project.  Gender equality, also known as sexual equality or equality of the sexes, is the state of equal ease of access to resources and opportunities regardless of gender, including economic participation and decision-making. We came up with our first draft of the project proposal and presented our ideas and approach to the topic. Below is my first proposal. Progression Af...
Read more

Advanced Typography | Exercises

-
Image
26/08/19- 23/09/19 (Week 1-Week 4) Yeo Ava (0340222) Advanced Typography Exercises Lecture Notes Lecture 1 : Introduction to Advanced Typography and Group Presentations about Typographic Systems 26.08.19 (Week 1) On the first day of class, Mr.Vinod briefed us about the module and what to expect it. Our task of the day was to teach the class about the 8 typographic systems, we were divided into 4 small groups to give a presentation on the topic given. Each group was assigned to present 2 typographic systems. My group got 'Grid & Modular Systems'. Following is the presentation slides of the 8 typographic systems. We get to have a Q&A session after every presentation, it was helpful and interesting to listen to other people's different opinion. Lecture 2 :  02.09.19 (Week 2) We didn't have much lectures this week in class, we were focused on showing our 8 typographic systems to Mr. Vinod and Mr. Shamsul. Mr. Vinod then contin...
Read more