INTERACTIVE DESIGN EXERCISES

30/08/2018 - 11/10/2018 ( Week 1 - Week 7 )
Chong Siong Loong Ron ( 0334452 )
Interactive Design
Exercises

LECTURE NOTES

30/08/2018 ( Week 1 )

For the 1st class , we were introduced to what this module is all about and what will we be learning and doing throughout the semester. As usual, we went through the module information to have a look on what are we going to do weekly and the projects that we have to accomplish. After going thought the module there was not lecture but we have a task before we mr shamus end the class which the question is about UI ( user interface ) and UX ( user experience), to see if we understand or know the meaning and the difference of the both. where I found out that UI is more on the visual element and the design where on the other hand UX focus on the interaction and usability.

06/09/2018 ( Week 2 )

Before we was assign for our group presentation to evaluate the good and bad websites, Mr shamsul shares with us a set of slides, which gives us an overview of what we will be learning and doing, the expected outcome after the 1st exercise and some question for us to think and discuss about while preparing our group presentation

during the break time Mr Lun told me to go and find for the key words to use and state it out during our presentation, so I did my research and I found a few key words that is useful for our presentation which is

1. Minimal Scroll
2. Good use of colours
3. Readability
4. Simplicity
5. Quality photography
6. Mobile compatibility
7. Fast load time
8. Browser consistency
9. Frustrating user experience
10. Unnecessary complexity
11. Lack of engagement

13/09/2018 ( Week 3 )

In this class, Mr Shamsul gave us a lecture on the difference between UX and UI an d what each of the are briefly about.

UX
- Button should be physically pressed down when clicked
- UX designers focus on the structure as well as layout of the content, navigation and how user interact.
- Site maps, user flow, prototypes, wireframes

UI
- series of button and how they look visually
- Interaction design, visual design, information architecture
- Ensure interface has element that are easy to access
- UI designers focus on anticipating what the user might need

The importance of interface design

- Ease of learning, efficiency of use, memorability, minimise errors, satisfy user.

27/09/2018 ( Week 5 )

For this week we have to learn about web standards, people would access the web through many different ways, hardware and software issues is included where we will have variety of browsers, variety of screen resolution and many operation system. since there is so many way for people to access the web, there will be a high chances that the website is the most important part. When we create a website there is a few things that we have to take in consideration which is the structure of the page, a clear hierarchy of information by using header and sub-headings to differentiate the content. HTML is by having codes that are made up of character within angled brackets. we have to proceed to learn more about it in the slides.

04/10/2018 ( Week 6 )

For this week we got to learn and understand about the initial planning phase when it comes to creating good web design. We should start off with doing some sketches. Having a structure for the website is good for the development process as we would already have an idea on what would are website should look like. There are few steps that we should do while designing the website, 1. Gathering information, 2. Planning - site map and wireframe creation, 3. Design- page layout, 4. Testing, review and launch.

11/20/2018 ( Week 7 )

For this week lecture, we have to learn about CSS boxes model in which could be set with several properties that will effect the visual appearance of the boxes. This can be used to control the dimensions of the boxes and create borders. When it comes to the width and height. of the box dimensions. To specify the size, it is either by pixels or percentage. Same goes to the height, min-height and max-height can be adjusted. As for the overflowing content (overflow), this property tells browser what to do when the content larger than the box itself.

INSTRUCTION

Exercise 1
06/09/2018 ( Week 2 )

For today's class, we have to evaluate and critic websites based on its purpose, design and usability. We were split into 6 groups of 5 for this activity and we was to select 6 good websites and 6 bad websites from https://www.webbyawards.com and https://www.thebestdesigns.com, and present it's pros and cons, target audience and purpose. we were given a template to fill out the information based on each of the 12 chosen websites.

I was in a group of 5 with Sam Munhoe, Jessy, Brian and Chee Kent

1.1 List of Good websites

1.2 List of Bad websites

List Of Good Websites :

1. https://atlantabrewing.com/contact-us/

2. https://armitagestudio.com

3. https://www.konstolymp.gr/

4. http://www.elumdesigns.com
5. http://www.andypatrickdesign.com/index.html
6. https://undividednation.us

List Of Bad Websites :1. http://darrinhiggins.com
2. www.clementsimon.fr
3. http://www.tamcai.com/work/
4. https://www.hugeinc.com
5. http://www.tomswholesomefood.com.au/index.html
6. http://www.newcastlenow.org.au/

Exercise 2
13/09/2018 ( Week 3 )

For todays activity, we are going to have group work again, but this time we have to be UI designer and we were assign to design Taylors kiosk based on a specific scenario. its important for us UI designer to consider some of the interface elements as it could help organise and make things easier for people to access information.

In my group we have Chee Kent, Sam, Jessy, Brian and me and we decide on the scenario of parents or new parents wanting to explore the campus and about Taylor. Using a4 paper we came out with some ideas and sketches to have a overall outlook of our kiosk. we tried to design easy to understand and easy to use as this is targeted towards parents who may want to get their information right away rather than using a gadget which is cluttered.

1.3 Sketches of ideas

We started the designing process on Adobe Illustrator once the layout was done, Chee Kent helped with this part of the process others are to give comment because what we draw out in paper and after we transfer in to computer is different so we had some changes in AI.

1.4 Screenshot of the process in adobe Illustrator

1.5 Final outcome of exercise 2

After all the group is done with their interface design. Each group got to test out other groups interface design and have another group test ours in return. Then, we were given a test report format to fill in, regarding the group's design we tested out.

1.6 PDF of test report

27/09/2018 ( Week 5 )

We were introduced to HTML by Mr Shamsul told us to use notepad/text edit and give HTML a try, to have a feel of what coding is like. Mr Shamsul teach us on how to use the basic element such as title, heading, paragraph and list. Its important for us to know because for the next exercise we have to create something using codes.

1.7 Attempt writing code at text edit

1.8 Outcome of the coding in safari

We was assign that well be creating a simple resume about ourself. In google classroom Mr Shamsul gave us instruction and tats is to prepare our resume include our personal information, education information, working experience is any and our skills and interest.

PDF Resume

04/10/2018 ( Week 6 )

For this week a new application is introduced to us which is adobe Dreamweaver, as we was assign to create a simple html file for our resume prepared last week.

1.9 Process of coding in Dreamweaver

2.0 Process of coding in Dreamweaver

2.1 HTML file display in Safari

11/10/2018 ( Week 7 )

For this week we have to continue where we left out in the previous week where we have to try out CSS to understand how it works.

2.2 Process of coding in a Adobe Dreamweaver

2.3 Process of coding in a Adobe Dreamweaver

2.4 Process of coding in a Adobe Dreamweaver

2.5 Outcome of HTML file on browser

2.6 Outcome of HTML file on browser

After that exercise is done we have to try out how CSS works by creating a external CSS file and link it to the HTML file.

2.7 CSS codes

2.8 Spilt view off CSS exercise

2.9 Outcome of exercise in browser

3.0 Outcome of exercise in browser

18/10/2018 ( Week 8 )

This week, we were given an exercise to do which requires HTML and CSS. Mr Shamsul upload a file which includes the content that are required to put in to our exercise.

We are required to do our wireframe sketches to have a better idea of what type of layout that we want to create.

3.1 Wireframe Sketches

I started off by putting in the info 1st than after everything is put in I than start to create the layout design and putting codes to create the website.

3.2 Process of coding exercise

3.3 Process of coding exercise

3.4 Process of coding exercise

3.5 Process of coding exercise

3.6 Process of coding exercise

3.7 Outcome of coding exercise in browser

3.8 Outcome of coding exercise in browser

3.9 Outcome of coding exercise in browser

4.0 Outcome of coding exercise in browser

FEEDBACK

08/09/18 (Week 2)

General feedback: During the presentations on evaluating websites, Mr Shamsul mentioned that we should be more specific when talking about the good and bad parts of a website as well as the target audience. We should also use proper terms, such as content formatting, parallax scrolling, hamburger menu and others.

13/09/18 (Week 3)

General feedback: For the exercise on designing a user interface for Taylor’s University Interactive Information Kiosk, Mr Shamsul mentioned that images should have labels stated and placed clearly so users will know what it is about. If icons are used, it is ideal to use the ones that are globally recognised. Target audience is also really important as we need to know what are their needs.

Specific feedback: For my group design, because ours are a little different than the other groups where we are designing a kiosk where we can bring new parents, new student etc to have a simple , clear and functional kiosk where they get their information in a few simple slides overall Mr Shamsul said that it was good but we should have do a ending page for our group work than it will be perfect.

04/10/2018 (Week 6)

General feedback: Before starting on the coding exercise , we were told to include sufficient information for our resume. While using Adobe Dreamweaver, Mr Shamsul asked us to create a folder and all the files relate should be placed in that folder. The html file should always save as index.html and only in lowercase. We cant leave spaces for naming file but only underscore when saving the files.

Specific Feedback: After looking at my resume, Mr Shamsul told me to add more information so that it will looks better when convert it to html.

18/10/18 (Week8)
Specific Feedback: The layout I did is clear and simple, well planned in my layout wireframe sketch and it does have consistency in the website.

REFLECTION

EXPERIENCE

30/08/2018 ( Week 1 )
Besides learning about UI & UX as well as there invention of the web, we have to look of a websites and all the codes that make up the websites.

08/09/2018 ( Week 2 )
For this week we have to group up of 5 to present and learn how to evaluate and critic websites based on it design, purpose and usability.

13/09/2108 ( Week 3 )
This week, we have to learn more about UI & UX and group up of 5 again for this exercise. we have to learn what is like to design a user interface.

27/09/2018 ( Week 5 )
I had the experience of trying out simple codes which was interesting as I got to look at how codes translate into the web. I also have to prepare my resume.

04/10/2018 ( Week 6 )
I had a new experience on trying out Adobe Dreamweaver to create ah HTML file, which is something new to me.

11/10/2018 ( Week 7 )
I had a new experience where we create a external CSS file and link it together to the HTML file where we can express our design and creativity in out work.

18/10/2018 ( Week 8 )
For this class we have to Create a file based on the content even by Mr Shamsul in google class room.

OBSERVATION

30/08/2018 ( Week 1 )
The thing that I observed is that there are many various codes for various thing, which I currently I still dont understand.

08/09/2018 ( Week 2 )
I observed that every websites has its own different traits, some is good and some is not so good , its a very useful exercise for us to know how to identify what is important to have to the importance of the websites.

13/09/2108 ( Week 3 )
I observed that this exercise that while there are many information that can be put into the information kiosk, but we have to be clear and most remember a key word is user friendly so we have to categorise it clearly.

27/09/2018 ( Week 5 )
While I am trying out the HTML codes, is not just typing out and it will appear in websites, we have to type out certain code to make it as what we want like title or u want line or u want it to be bold.

04/10/2018 ( Week 6 )
I observed that Creating a HTML in Dreamweaver is much more easier compared doing it in textedit.

11/10/2018 ( Week 7 )
I observed that creating a website or file in dreamweaver is much much more harder compared in Illustrator / Photoshop where we just drag and drop what item or placement we want in the layout and this does not work for dreamweaver, we have to type in codes move or place and item in the file.

18/10/2018 ( Week 8 )
I became more familiar with coding but there is still little confused with some codes, which I still have to slowly understand the file before I do anything because it may cause a disaster to the layout.

FINDINGS

30/08/2018 ( Week 1 )
I found out that the designing a website is not as easy as it looks where u only see words and picture , but behind it u have thousands of codes to just create a websites.

08/09/2018 ( Week 2 )
Design is not the only main factor to create a website it must also be visually pleasing, user friendly and its navigation for the websites must be clear for the user to use.

13/09/2108 ( Week 3 )
For me exercise navigation is the main factor because it will be easy for the users to access. we have to also make sure that after using out kiosk our audience must leave with something and remember how to use the kiosk.

27/09/2018 ( Week 5 )
Trying out the simple HTML codes, I found that out is essential to make sure we add the closing element </> for the codes to work

04/10/2018 ( Week 6 )
I found out and learned a new thing that HTML and CSS both have connections, as HTML is used for the content of the website while CSS can be used to change the style of HTML.

11/10/2018 ( Week 7 )
Its a little confusing where we have to link the CSS file to HTML file and we have to control both of the file and we must understand which file is to for what.

18/10/2018 ( Week 8 )
after a few weeks of working on codes, where I feel that I became much more familiar with codes and all the different code u have to type in for every single thing u want to do for the website.

Search This Blog

RON.C DESIGN JOURNAL