INTERACTIVE DESIGN - EXERCISES
04.04.19 - 23.05.19 (Week 1 - Week 8)
Helen Angelia (0336203)
Interactive Design
Exercises
LECTURES
Lecture 1
04.04.19 (Week 1)
For today's class, we were only briefed of the MIB and the introductions of making websites, such as:
- We will be using Adobe Dreamweaver to make websites and Mr. Shamsul recommended us to use the original ones, because it might be a problem when uploading it.
- Mr. Shamsul told us the basic knowledge when making websites: EDM (Electronic Direct Mailing), HTML (Hypertext Markup Language, and CSS (Cascading Style Sheets).
Lecture 2
11.04.19 (Week 2)
For this week's class, we were taught the difference of UI vs UX Design. And after that, we continued to our next exercise, which is making a website prototype on A3 papers.
Lecture 3
18.04.19 (Week 3)
For this week's class, we were given a lecture about the web standards, how the web works, the structure of the web pages and how to use them.
Lecture 4
25.04.19 (Week 4)
We were lectured about how to make website page with Text Edit (Interactive Design - Project 1).
Lecture 5
02.05.19 (Week 5)
Lecture 6
09.05.19 (Week 6)
Lecture 7
16.05.19 (Week 7)
For this week, we were shown how to do layout exercise for our next exercise.
Module Information Booklet (MIB)
EXERCISES
Exercise 1
04.04.19 (Week 1)
We were given an exercise to research 12 websites; differentiate 6 good websites and 6 bad websites and analyse them, then write our rationales on the provided Microsoft Excel Sheets. The 12 websites could only be from: www.webbyawards.com and www.thebestdesigns.com. This exercise is done in a group and we will present it to the entire class.
First of all, me and my group started to studied what are the requirements for making good websites in https://www.optimus01.co.za/basic-website-requirements/, so that we will know how to differentiate good and bad websites.
Then we discuss together and agreed which should be considered good or bad websites. After we wrote down our rationales, we presented it to the class and upload the sheets into Google Classroom.
Here is the link to our rationales as well as the names of group members:
11.04.19 (Week 2)
For our exercise, we were told to make website prototype about the whole Taylor's University on A3 papers and present it to the class. In trying the website out, we had Yameen to do it. Here are the pages that Yameen chose:
Fig 1.1
Homepage
Fig 1.2
Academics Page (Second Page)
Fig 1.3
Classrooms Page (Third Page)
Fig 1.4
Classrooms Page + Additional Information (Third Page)
Exercise 3 / Project 1
18.04.19 (Week 3)
Because this is the starting of the first project, Mr. Shamsul gave us time to think what kind of website we wanted to make and we should choose the website based on what we like, because we were going to make a landing page. After the topic was approved, we need to sketch it the layout of the homepage.
02.05.19 (Week 5) - 09.05.19 (Week 6)
The next week, we were taught to do HTML exercise about ourselves. We need to divide the website into 4 sections done it both in HTML and CSS.
Fig 1.5
First Attempt
Fig 1.7
Changing the Typefaces
Fig 1.8
Organising the Webpage
Fig 1.9
Adding Background
Here is the link to my page website:
16.05.19 (Week 7) - 23.05.19 (Week 8)
For this exercise, we were tasked to do layout exercise, where we make a website from zero or scratch.
Fig 2.0
Layout Exercise HTML
Fig 2.1
Layout Exercise (Browser)
After that, we were tasked to make a website based on the information below:
Here is my first attempt in making the photoshop layout exercise:
Fig 2.2
First Attempt of Layout Exercise
Fig 2.3
Layout Exercise HTML
Fig 2.4
Layout Exercise CSS
Fig 2.5
Final Attempt of Layout Exercise
Link to my layout exercise:
FEEDBACKS
11.04.19 (Week 2)
The designs are good, but there is inconsistency in the last part. A website needs to be easily understand as much as possible and maintain the consistencies of the web graphics.
18.04.19 (Week 3)
I tried to sketch the layout of the website that I wanted to make, which is my own portfolio. But when I showed it to Mr. Shamsul, we were supposed to make the website for someone else, not for us. He told me to think about the topic first and think about the layout later.
25.04.19 (Week 4)
For my project 1, Mr. Shamsul said that I have good reasoning for my website and to proceed with the idea. However, I needed to fix some parts of the designs and in the end, my work got accepted.
02.05.19 (Week 5) - 09.05.19 (Week 6)
Mr. Shamsul didn't really comment on my work as it is just an exercise, but I did consult to him about the previous background as it wasn't readable. He agrees and allowed me to change it into white-textured background.
16.05.19 (Week 7) - 23.05.19 (Week 8)
The lecturers said that the layout is already okay, but I need to make the titles font size bigger for hierarchy, add line height to the paragraphs, change the colour for the 'a links' and drop shadow for the fonts that is overlapping with the image to make it more readable.
REFLECTIONS
EXPERIENCES
04.04.19 (Week 1)
For the first class, we were explained the basics of web design and we were given a task to survey good and bad websites and present it to the class. It was actually good and this exercise gave me knowledge that websites should be like this and shouldn't be like that.
11.04.19 (Week 2)
After given the another lecture about how to differentiate UI vs UX design, we were tasked to make websites prototype about Taylor's University and present it to everyone again. Making the prototype was pretty stressful, even though we already did it in a group. But, scouting the places around and draw everything from scratch was pretty confusing.
18.04.19 (Week 3)
After my idea got rejected, I was confused what I have to do. I didn't know how to make website for users based on what I like. I kept thinking about it until I finally asked Mr. Shamsul about the topic that I wanted to do and he approves it.
25.04.19 (Week 4)
I was pretty unsure about designing a website for my project 1 at first, since I have never design website before. However, the lecturers kept supporting me and telling me where I did my mistakes to make me improve.
02.05.19 (Week 5) - 09.05.19 (Week 6)
I kept asking Mr. Shamsul or Mr. Lun for help because I always having trouble in coding. I felt bad for it, but also very thankful as they were very patient in teaching me.
16.05.19 (Week 7)
For this week, I was quite busy with my other modules, so I only managed to make header for the layout exercise, and it was already confusing me already.
23.05.19 (Week 8)
I didn't have many problems so far until the last article and footer part, also the problem with webhosting, because I couldn't upload it. I asked Mr. Shamsul for help by asking online, but it didn't work that way. So, I asked him directly and that is why I handed the layout exercise late.
OBSERVATIONS
04.04.19 (Week 1)
I observed how designers design websites and how I found the similarities between most of them. That in some websites, the designs are all depends on what topic the designers are working on.
11.04.19 (Week 2)
I looked at the works of my friends for the website prototype, and they are all so organised. I learned many things from my own and the other groups.
18.04.19 (Week 3)
When I was still confused what topic I should choose, I tried to look at other works to try to get idea or inspiration. They all did different, but interesting topics, like make-ups, beverages, fashions, etc.
25.04.19 (Week 4)
I made some mistakes while working the project 1, so I tried to observe my friends' works more carefully, like how they put the margins, alignments, hierarchies, and more until finally, my work got accepted.
02.05.19 (Week 5) - 09.05.19 (Week 6)
I saw most of my friends' exercises are more colourful and creative than mine, so I wasn't really confident with my work. Even though I wanted it to be simple, maybe it was too simple? The lecturers didn't really comment my work, so I think it was fine.
16.05.19 (Week 7)
Making a website from scratch wasn't easy at all, I needed to be thorough to not make any mistake. Just making the header costs me 3 hours and more, including the sections. My friend, Rachel, taught me how to do the layout exercise until class is over, and I tried to study hard what she was doing.
23.05.19 (Week 8)
I saw at others' works, and I really like some of their layouts. They made it very modern and neatly. I'll try to remember what they have made so far and improve it in my own style.
FINDINGS
04.04.19 (Week 1)
I found out similarities between most of good websites and slight differences when we look at the bad websites; what requirements do we need in making them and other things.
11.04.19 (Week 2)
I found out that making prototype wasn't as easy as I thought. I need to plan how to make it carefully by scouting the areas and sketch the prototype after I'm confident enough with the informations that I had. After the feedbacks, I understand now that in web designs, we also need to put hierarchy, alignment, and other principles of design, especially consistency of style.
18.04.19 (Week 3)
I found out about what we can designs for users based on what we like after seeing my friends' works.
25.04.19 (Week 4)
I found out that making a website needs to be clear and legible. As for my project 1, I picked style 'simple' and the lecturers guided me by telling me what my mistakes are.
02.05.19 (Week 5) - 09.05.19 (Week 6)
I found out so many things to learn in this week, as I was having problems and so I kept asking the lecturers how to do it. I kept track of the lecturers' notes when they explained the process to me, so I wouldn't have to ask them the same questions again.
16.05.19 (Week 7) - 23.05.19 (Week 8)
For this week, I feel like I have improved more than before. Of course, with the help from my friends and lecturers. I still asked so many questions, but I definitely found out and had learned more from this exercise.
FURTHER READINGS
04.04.19 (Week 1) - 11.04.19 (Week 2)
Interactive Design: An Introduction to the Theory and Application of User-Centered Design by Andy Pratt and Jason Nunes
For the first and second weeks, I tried to know more about interactive design, since based on its name, I'm quite confused of how it could be relevant to coding. So I searched for an e-book and read the use of interactive design, what kind of designs included to be called interactive design, and found out how interactive design engaged with its user, etc.
Fig 2.6
Further Reading #1
18.04.19 (Week 3) - 25.04.19 (Week 4)
For my further readings these weeks were from Pinterest where I searched for references and have my own self-observation of how I could implement what I've seen into my website design for project 1.
Fig 2.7
Further Reading #2
02.05.19 (Week 5) - 09.05.19 (Week 6)
Confident Coding: Master the Fundamentals of Code and Supercharge Your Career by Rob Percival
Fig 2.8
Further Reading #3
I focused more on reading the 3rd Part, Chapter 7: Website Development and learned how does website works, what is web hosting, self-coding our site and building a website. There weren't too many pictures so I got bored easily, but when there's a picture, I could understand fully.
16.05.19 (Week 7) - 23.05.19 (Week 8)
For my further readings this week, since Mr. Shamsul showed the whole class the website example that Farzana has done, I looked at her blog and how she did with her work. Self-observing Farzana's work gave me an idea of how I wanted to make my own photoshop web design.
Beside's observing Farzana's work, I also look again for another references in Pinterest about dark theme website and compare my work with my friends so I would know which part I should improve.
Fig 2.9
Further Reading #4
Comments
Post a Comment