Interactive Design Project 1

Interactive Design Project 1

10.09.19-17.09.19 (Week 3 - 4)
Yap Wei Xuan
Interactive Design
Project 1

---

LECTURE NOTES

Week 3:

For today class, Mr Shamsul give us a lecture about the web, and also some basic knowledge for HTML.




Week 4:
No lecture today, Mr Shamsul and Mr Lun taught us about HTML.

---

INTRODUCTION

---

PROJECT 1

For our project 1, we have to design our own landing page and the topic can be anything we like, we can create our own or something there are already exist.

I chose my favorite cartoon which is Peppa Pig. As Peppa Pig doesn't have a proper website for the merchandise so i decide to create it

I start off with some skectches

Fig 1.1 sketches 

Then, i trace out what i want to use in my design such as background, frames and so on. It is because that are no proper images that i can directly take from internet.

Fig 1.2 Tracing background

Fig 1.3 Tracing others needed elements

Here is the outcome of my design

Fig 1.4 1st Attempt

FEEDBACK: Need to add Title for each section, because the purpose for each section is not clear. The logo for each apps at the last pages is not consistent for the whole layout and theme need to change it.Next, fix the menu bar at the 1st page because the text cannot be seen.

After getting feedback from Mr Shamsul, i try it again. First, i change the layout of the 1st page.

Fig 1.5 2nd attempt 

I ask my friend JO for some comment, he said that it is difficult to eyes of users, and the hierarchy is not good enough. so i try another one. I add title for each section and also change the last page as i don't like the previous one.It seems good.This is the final outcome for my landing page

Fig 1.5 Final outcome

---

FURTHER READING

10 rules of good UI Design to follow on every web design project by B.J.Keeton

Fig 2.0 10 rules of good UI

This article helps the beginner like us to understand what is a good UI web design, here is some main points and important information that we need to mark up

1. Make Everything the User Needs Readily Accessible:

All the tools you need are right there in the builder, separated by category. Toolbars are similarly accessible

2. Be Consistent:

• Don’t rearrange menu items every time it loads. Make sure that your users know where things are on your site.
• Consistency also includes your fonts and design should work from page to page to page. Don’t go swapping header/body fonts from page to page.

3. Be Clear:
Clarity is the reason minimalist

4. Give Feedback:

Just a small acknowledgment can be the difference in a good experience and a lackluster one.

5. Use Recognition, Not Recall:

People recognize certain icons for certain things.

6. Choose How People Will Interact First:
They chose how they wanted their users to interact with their product and designed their UI to accommodate that. Not the other way around.

7. Follow Design Standards:

There’s nothing wrong with thinking outside the box and going for a new and innovative design, but that shouldn’t mean the design is hard to use.

8. Elemental Hierarchy Matters:

• We mean that the elements on your page need to have a clear hierarchy for both utility and the way the user sees the page
• Make sure that the most important functions are at the top of their respective pages
• This kind of hierarchy can lead the user down the page organically, leading the user through your service

9. Keep Things Simple:

Make things as frictionless for the user as possible

10. Keep Your Users Free & In Control:

 Your UI should allow them to perform the actions they want.

• Context
• Permission