INTERACTIVE DESIGN - EXERCISES
04.04.2019 (Week 1 - Week X)
Rausha Aminath (0337000)
Interactive Design
Exercises
LECTURES
Lecture 1: Introduction to Module
04.04.2019 (Week 1)
We were given briefs on our projects and exercises for the module and we were shown previous student works.
We were told to find a free or paid hosting service for our works. We are allowed to use templates however it has to modified enough to make it a bit original.
Our first lecture was based on determining good and bad websites.
We were told to find a free or paid hosting service for our works. We are allowed to use templates however it has to modified enough to make it a bit original.
Our first lecture was based on determining good and bad websites.
Lecture 2:
11.04.2019 (Week 2)
This weeks class began with a lecture on UI vs UX.
Lecture 4:
25.04.2019 (Week 4)
Lecture 5:
02.05.2019 (Week 5)
Lecture 6:
08.05.2019 (Week 6)
Lecture 7:
16.05.2019 (Week 7)
INSTRUCTIONS
WORK
Week1
04.04.2019 (Week 1)
The class was divided into 7 groups and we were given to choose 6 examples of what we think are bad websites and 6 of good websites from the website Mr.Shamsul gave us.
Below is our groups selected 6 websites and the reasons behind it.
Good Websites:
1. https://www.smashmallow.com/
2. http://photos.icon8.com
3. https://www.hopewellbrewing.com/
4. https://ester.co/
5. http://napluxuryguesthouse.it/en/the-house
6. https://www.turnefferesort.com/relaxation/
Bad Websites
1. https://www.risd.edu/
2. https://knoed.com/
3. https://merch.gunsberg.in/
4. https://simplicityc.com/company/
5. https://www.boldare.com/
6. http://www.3kvc.com/
Below is our groups selected 6 websites and the reasons behind it.
Good Websites:
1. https://www.smashmallow.com/
2. http://photos.icon8.com
3. https://www.hopewellbrewing.com/
4. https://ester.co/
5. http://napluxuryguesthouse.it/en/the-house
6. https://www.turnefferesort.com/relaxation/
Bad Websites
1. https://www.risd.edu/
2. https://knoed.com/
3. https://merch.gunsberg.in/
4. https://simplicityc.com/company/
5. https://www.boldare.com/
6. http://www.3kvc.com/
Below are the important descriptive words I learned during the critique of the websites:
Not user friendly
Not aesthetically pleasing
Seamless scrolling
Navigation bar
Parallax scrolling
Composition
Complimentary colors
Week 2
11.04.2019 (Week 2)
We were asked to create a sample paper kiosk for Taylors. Class was divided into groups and after we completed our kiosk sample, another group will be testing out our kiosk with a given scenario by our group. Our Scenario was a new student was supposed to get to class on E108, and she had to find her way through the kiosk.
Below is our work:
We were asked to create a sample paper kiosk for Taylors. Class was divided into groups and after we completed our kiosk sample, another group will be testing out our kiosk with a given scenario by our group. Our Scenario was a new student was supposed to get to class on E108, and she had to find her way through the kiosk.
Below is our work:
 |
| Page 1 |
 |
| Page 2 |
 |
| Page 3 |
 |
| Page 4 |
Video Using of our Sample Kiosk
Week 4
25.04.2019 (Week 4)
25.04.2019 (Week 4)
This week we started working on HTML coding.
 |
| Process: Html file (left) and the Website (right) |
 |
| Final Html Code |
 |
| Final Page |
Week 5
02.05.2019 (Week 5)
02.05.2019 (Week 5)
This week we started did our first exercise on Html. I tried CSS as well.
Here is the link to the website: https://rausha-aminath.000webhostapp.com/about_me.html
 |
| CSS Trying Process - Adjusting the Width |
 |
| Html Final Code Page 1 |
 |
| Html Final Code Page 2 |
Final Outcome for Basic Html Document Development
Here is the link to the website: https://rausha-aminath.000webhostapp.com/about_me.html
Week 6
08.05.2019 (Week 6)
This week we started using CSS in our html files. I also switched from TextEdit to Dreamweaver.
Here is the link to the website.
Week 7
16.05.2019 (Week 7)
This week we worked on layout styling from CSS by linking an external CSS file to the Html code.
Week 8
23.05.2019 (Week 8)
This week we worked on our exercise for layout.
Here is the link to the website: https://competent-wescoff-c2cb54.netlify.com/
08.05.2019 (Week 6)
This week we started using CSS in our html files. I also switched from TextEdit to Dreamweaver.
 |
| Html Code |
 |
| Using CSS Code |
 |
| Preview of my Webpage after trying CSS |
Week 7
16.05.2019 (Week 7)
This week we worked on layout styling from CSS by linking an external CSS file to the Html code.
 |
| Html Code |
 |
| CSS Code |
 |
| Trying out Layout in Class |
23.05.2019 (Week 8)
This week we worked on our exercise for layout.
 |
| Html Code for the Layout Exercise |
 |
| Final Layout #1 |
 |
| Final Layout #2 |
 |
| Final Layout #3 |
 |
| Final Layout #4 |
FEEDBACKS
Week 1:
Mr.Shamsul said that our chosen blogs were good and the explanations were good.
Week 2:
Mr.Shamsul liked our Kiosk. Said that is was simple and only few stops helped her get where she needs to go.
Mr.Shamsul liked our Kiosk. Said that is was simple and only few stops helped her get where she needs to go.
Week 4:
No feedback
Week 5:
No feedback
Week 6:
No feedback
Week 7:
No feedback
Week 8:
Mr.Shamsul said that my design looks nice and the main page looks great but I need to restart my html file as it was a bit messy and I had used another format and that makes it tricky to edit the other pages.
Upon completing the Website, Online Feedback: That looks much better Rausha, good job.
REFLECTIONS
EXPERIENCE
Week 1:
The class was quite interesting. I was excited for the upcoming weeks, the first work we had to do was not that fun but Mr.Shamsul explained other works we will be doing and it sounded very interesting. I was mostly looking forward to learning coding.
Week 2:
I had a very fun class today as we got to work in a group to create a kiosk. Although the planning part was a bit messy, executing the plan was pretty successful and its was enjoyable to see the final outcome presented by everyone in the group.
Week 4:
The class was very interesting as we started coding, which I have been looking forward to learning from day one. I had difficulty with it as I needed time to get used to the codes.
Week 5:
Week 1:
I observed that this module requires a lot of research and taking sample and really thinking about the outcome. I also noticed that while some people find a website bad others might find it good, so it is a tough business.
Week 2:
I observed that most of our group members were very helpful and some were too quiet and did not contribute much. Working in groups are tricky as there are so many different kinds of personalities.
Week 4:
I found out that I had to be very careful with closing, which was causing the most problems for me. It was a bit frustrating not seeing whats wrong easily. It takes a bit of time to see the incorrect codes.
Week 5:
Week 1:
I realized that when it comes to determining good and bad websites, we have to use certain terms to describe it and these words are very important in the future for this module. I also realized that this module is something I find very interesting.
Week 2:
I realized that with so many members in a group, I have to be very patient and have to adjust to different personalities and it was not easy to deal with everyone's comments and opinions and while some are good at compromising and understanding of other group members thinking, others simply are a bit difficult to deal with.
Week 4:
Coding is not easy, it is difficult but I felt like once you start to get the hang of it working on it gets very exciting. Research is very important for this module. Research helped me a lot in getting through this class today.
Week 5:
Week 6:
FURTHER READINGS
Week 1
Top 10 Guidelines for Homepage Usability
by Jakob Nielson
The homepage is the most important page on most websites, the page that gets more views than any other page. It is your company's face to the world. Most customers look at your website before doing business with you. Therefor, it is important to have a homepage design following strong usability guidelines. Following are ten things you can do to increase your homepage visibility and enhance the business value.
Make the sites purpose clear: Explain who you are and what you do.
1. Start the page with a tagline that summarizes what the site or company does.
2. Begin the title with company name, followed by a brief description
3. An about section to group all corporate information in one distinct area
Help users find what they need
4. Homepage should offer clear tasks
5. Include a search or input box
Reveal Site Content
6. Show some of your best and most recent content
7. Start each link with a relevant word
8. Keep a short list of recent features on the homepage with links
Use visual Design to enhance Design
9. Users often dismiss graphics as ads, therefore do not over format critical content
10. Show photos of real people actually connected to the topic, use meaningful graphics
Week 2
The 12 Do's and Don'ts of Web Design
Adobe Blog
Do's of Web Design
When designing websites, making your design useful and enjoyable is your top priority, which could be overwhelming for a new beginner. There are Do's and Don'ts for web designing.
Do's include keeping your interface consistent. The overall look and feel your website should be consistent across all your site pages. There must be consistency in, color, typefaces and style of writing.
Another do is, designing easy to use navigation. Keep top level navigation for essential navigation options. Limit it to top-level navigations. Keep it max of 7 options. Remember the three click rule.
Change the color of visited links to make it easier for users to see past and present locations. Also make it easy to scan your pages. Users are more likely to scan the page rather than reading, so a designers job is to create visual hierarchy to the arrangements of elements in a way that implies importance.
Avoid walls of text. Put more visual weight on important elements, such as call to action button or login forms. Well designed websites typically lay out their content in a 'F" reading shape or "Z" reading shape. Stick to a grid layout.
Make sure the text on the website in relevant.
Check your websites for errors. Watch out for dead links and check your websites for typos.
Minimize the number of choices. The more choices they have the less action they take.
Engage the users to scroll. Scrolling sends users deep into the page and makes them invest more time. However, what appears at the top sets the impression and expectation to scroll further.
No feedback
Week 5:
No feedback
Week 6:
No feedback
Week 7:
No feedback
Week 8:
Mr.Shamsul said that my design looks nice and the main page looks great but I need to restart my html file as it was a bit messy and I had used another format and that makes it tricky to edit the other pages.
Upon completing the Website, Online Feedback: That looks much better Rausha, good job.
REFLECTIONS
EXPERIENCE
Week 1:
The class was quite interesting. I was excited for the upcoming weeks, the first work we had to do was not that fun but Mr.Shamsul explained other works we will be doing and it sounded very interesting. I was mostly looking forward to learning coding.
Week 2:
I had a very fun class today as we got to work in a group to create a kiosk. Although the planning part was a bit messy, executing the plan was pretty successful and its was enjoyable to see the final outcome presented by everyone in the group.
Week 4:
The class was very interesting as we started coding, which I have been looking forward to learning from day one. I had difficulty with it as I needed time to get used to the codes.
Week 5:
I feet a bit better about my work and I wanted to explore more and make it more customized. It is not easy but I am determined to make this better. Creating a website about myself felt a bit boring but I wanted it to look best.
Week 6:
OBSERVATIONS
Day by day it's getting easier to remember the basics and I am excited to see what else I can do with html coding and CSS.
Week 7:
Week 8:
Week 7:
layout was a bit more tricky to understand and I need more time to study the codes and see why it works the way it does or I know I am going to have a really hard time figuring out how to start my html file and organize it well.
Week 8:
Understanding how Html and CSS works together and understanding the main basics of why, when and how the codes are used is very important and I am having a really hard time as I have no idea what is going on.
Week 1:
I observed that this module requires a lot of research and taking sample and really thinking about the outcome. I also noticed that while some people find a website bad others might find it good, so it is a tough business.
Week 2:
I observed that most of our group members were very helpful and some were too quiet and did not contribute much. Working in groups are tricky as there are so many different kinds of personalities.
Week 4:
I found out that I had to be very careful with closing, which was causing the most problems for me. It was a bit frustrating not seeing whats wrong easily. It takes a bit of time to see the incorrect codes.
Week 5:
I realized that learning the codes before hand made me work better in the class. I was having a tough time keeping up in class as the lecture starts so early and I get distracted or feel sleepy and it gets difficult to keep my focus.
Week 6:
Html coding is fun and putting in CSS its more exciting. Having to see the changes in color and layouts makes me excited for whats next.
Week 7:
Week 8:
FINDINGSWeek 7:
Coding
Week 8:
I dont really understand most of whats happening and having a hard time as I feel like I am not in control and I dont know how to get control of the situation. Coding is very frustrating when you have no idea what is wrong and you have no idea what is going on.
Week 1:
I realized that when it comes to determining good and bad websites, we have to use certain terms to describe it and these words are very important in the future for this module. I also realized that this module is something I find very interesting.
Week 2:
I realized that with so many members in a group, I have to be very patient and have to adjust to different personalities and it was not easy to deal with everyone's comments and opinions and while some are good at compromising and understanding of other group members thinking, others simply are a bit difficult to deal with.
Week 4:
Coding is not easy, it is difficult but I felt like once you start to get the hang of it working on it gets very exciting. Research is very important for this module. Research helped me a lot in getting through this class today.
Week 5:
Making a page about myself is not fun though. Thankfully I found a way to post pictures that does not necessarily have me in it. I found myself working on CSS as i wanted to make it more personalized.
Week 6:
I realized that when designing a website, choosing colors and fonts are not easy. The choosing of photos are also difficult as the background color has to be chosen accordingly. Choosing png while taking logo is important.
Week 7:
Week 8:
Week 7:
Coding
Week 8:
Coding is a tricky process so its is very important for me start paying attention into class lectures. Not easy to listen to lectures. I should start watching more youtube videos and actually learn the basics and try to remember everything by practicing it more.
FURTHER READINGS
Week 1
Top 10 Guidelines for Homepage Usability
by Jakob Nielson
The homepage is the most important page on most websites, the page that gets more views than any other page. It is your company's face to the world. Most customers look at your website before doing business with you. Therefor, it is important to have a homepage design following strong usability guidelines. Following are ten things you can do to increase your homepage visibility and enhance the business value.
Make the sites purpose clear: Explain who you are and what you do.
1. Start the page with a tagline that summarizes what the site or company does.
2. Begin the title with company name, followed by a brief description
3. An about section to group all corporate information in one distinct area
Help users find what they need
4. Homepage should offer clear tasks
5. Include a search or input box
Reveal Site Content
6. Show some of your best and most recent content
7. Start each link with a relevant word
8. Keep a short list of recent features on the homepage with links
Use visual Design to enhance Design
9. Users often dismiss graphics as ads, therefore do not over format critical content
10. Show photos of real people actually connected to the topic, use meaningful graphics
Week 2
The 12 Do's and Don'ts of Web Design
Adobe Blog
Do's of Web Design
When designing websites, making your design useful and enjoyable is your top priority, which could be overwhelming for a new beginner. There are Do's and Don'ts for web designing.
Do's include keeping your interface consistent. The overall look and feel your website should be consistent across all your site pages. There must be consistency in, color, typefaces and style of writing.
Another do is, designing easy to use navigation. Keep top level navigation for essential navigation options. Limit it to top-level navigations. Keep it max of 7 options. Remember the three click rule.
Change the color of visited links to make it easier for users to see past and present locations. Also make it easy to scan your pages. Users are more likely to scan the page rather than reading, so a designers job is to create visual hierarchy to the arrangements of elements in a way that implies importance.
Avoid walls of text. Put more visual weight on important elements, such as call to action button or login forms. Well designed websites typically lay out their content in a 'F" reading shape or "Z" reading shape. Stick to a grid layout.
Make sure the text on the website in relevant.
Check your websites for errors. Watch out for dead links and check your websites for typos.
Minimize the number of choices. The more choices they have the less action they take.
Engage the users to scroll. Scrolling sends users deep into the page and makes them invest more time. However, what appears at the top sets the impression and expectation to scroll further.
Label buttons according to what they do.
Make your site responsive to all types of screen sizes.
Make your site responsive to all types of screen sizes.
Comments
Post a Comment