Twitter

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Wednesday, 29 June 2011

User Interface - Principles of Design

Members: Xin (Catherine) Liao & SangKyum Dawn Kim


Principle #1 - Structure
> The interface is organized productively and keeps certain purposes categorized.
> Focus on the UI architecture, keeping it simple and apparent, easily recognizable of its functions.
Technique #1
Word your messages and labels effectively
Users of all levels are able to understand the functionality and purpose of the information given. Wording is simple yet effective enough to understand.
Technique #2
Your design should be intuitable
To accompany trial and error for the better learning curve, users can find out which button serves which purpose, also with the help of certain images and/or symbols.
Technique #3Group things effectively
Grouped items can be in great effect when done correctly. In this case, Microsoft Word allows users know where to find certain functions for different tasks without any trouble.





Microsoft Word and other Microsoft Office applications are reliable and known to be very organized into categories and separate pages. It shows the architecture of how they built the interface well enough so that navigation for users is easily recognizable, and simple.

Principle #2 - Simplicity
> The user interface must not be complicated or clogged up with useless information.
> Simple keyboard & mouse commands to lead to the user’s desired destination or end result should be quick and easy.
> Communication between the user and interface is vital so that the product is usable for anyone.
Technique #1
Follow the contrast rule
Creating colors and objects fit for the user’s eyes at all times is important so that frustration or any type of harm does not affect the user. In this case, the seemingly light grey background can match any other colored background and still create a sense of comfort for anyone.
 Technique #2
Align fields effectively
Clean and efficient methods of organization are important so that the user does not complicate matters and see a jumbled up interface. Especially in this case, while the functions are easily labeled and somewhat categorized, the corresponding labels lead to another set of easily labeled functions.
Technique #3Don’t create busy user interfaces
Creating screens that are difficult to understand make it harder for the user to use. The interface should not crowd the majority of the screen so that it creates a sense of simplicity and organization for the user.

Windows OS does a great job in keeping things simple and very user-friendly so that all levels of users -high or low- can use the interface well enough without running into problems. Communication between the UI and Windows is simple and straight to the point.

Principle #3 - Visibility
> Giving the user too many options to choose from can complicate matters and take up too much time
> UI regarding visibility should exclude unneeded information and aim to give the user only a selected few options.
Technique #1Expect your users to make mistakes
Users of all levels should be able to deal with any sort of mistakes, allowing the interface to be as versatile as possible so that they may go back to the previous page/option and start again. In this case, virtually clicking anywhere will take the user back/to another selection.
Technique #2
Align fields effectively
Organized data is something all users look for on common grounds. By aligning sections from left to right and even creating drop-down tabs, it makes it easy for the user to operate on any grounds.
Technique #3Navigation within a screen is important
As most users tend to start from the top left, navigation designs are created in a manner of top to bottom and left to right. In this case, both apply since there is a lot of content to go through while keeping it simple and understandable.

Amazon does a great job in organizing their website while keeping tabs organized and apparent enough for all users to easily navigate around their website, informing them of any necessary information and/or actions required to not give the user a hard time.

Principle #4 - Feedback
> The users are being notified by the producers in well constructed language and images if needed. Any updates, mistakes, new techniques, changes made are informed to users.
> Two way interaction, users give feedback to the producers, producers improve the techniques and report back to the clients.
Technique #1Word your messages and labels effectively
In order to make users understand the information, the feedback that has been giving out by the producers need to be clear and simple written; in some cases images are helpful can be helpful, too.
 Technique #2
Follow the contrast rule
Another way to deliver the feedback successfully is by using readable color of texts and backgrounds for the updates interface. In this case, the contrast rule, this is known as “Use dark text on light backgrounds and light text on dark backgrounds” could be really efficient.
Technique #3
Group things effectively
Related information and images are needed to be grouped together to create an easy looking interface. This way leads to a better reading situation for the users.

Adobe usually does nice jobs on their feedback part. The information is giving through email. It is easier for users to access because they don’t have to go and check from the official website. The contents are well designed, includes video which helps the clients avoiding boredom. Related information are grouped together to stay away from confusion.


Principle #5 - Tolerance
> The User Interface has to assume that users make mistakes while they access the product.
Actions such as redo, undo, tolerating and interpreting increase the usability and make the product handier.
> These actions and corrections have to be accurate and noticeable; therefore, it can keep clients on track.
Technique #1
Expect your users to make mistakes
This concept is like the definition of the principle, only when this technique is applied, the tolerance can be created and modified. Understanding users make mistake is much more important than actually dealing with it.
Technique #2
Navigation between major user interface items is important
For instance, the connection between a modified word correction and the original spelled word has to be well recognized. Software are designed to meet this requirement by creating reasonable lay outs. Thus, reduces the amount of frustration for users.
Technique #3
Consistency
The tolerance principle has to be consistent. It should apply to all errors and mistakes that users made. This will help the users understand the way this application works faster and more effective.

Microsoft Office software is the most obvious example. They ensure users will make mistakes when they typing a document. They offer automatic spelling corrections and grammar check in variety condition, easy to use and really useful.


Principle #6 – Reuse
> Resources are supposed to be reusable in both internal and external ways, such as save the file and re-edit it again.
> The software is not only going to be focused on interface designing part but also functional-wised and purpose-wised.
> Create hot keys or short cuts to help users save time, most importantly, easier to operate.
Technique #1
Navigation within a screen is important
Users are able to understand the function of each key within the screen and perhaps extra information that shows the short cuts. The way of showing this has to be simple and it is important to pick a similar one which most users have used before, so when they works with the software, it becomes handy.
Technique #2
Understand the UI widgets
In order to make your software operates the way it supposes to be, one must understand what the right widgets for the right function is. The matches between user interface and widgets needs to be reasonable and understandable, otherwise, it will confuse users.
Technique #3
Don’t create busy user interfaces
Reuse function interface have to be remarkable and cleaned. Incorrect labels and ungrouped options will only make the software hard to use.

Reuse principle applies everywhere on our daily life when deals with a computer, the most common one is the Windows system. Users are able to look at the sign to go back and forward when opens a sub file. Users are able to export and import data from one to another, and reuse ability could be done by doing data transferring.

Thursday, 23 June 2011

Self Portrait

I took this self portrait picture for my DMA204 Photography class.
The concept and view that I wanted to present with this picture was related to my level of self-belief/morals and open-mindedness. Always keeping myself as a student of life.
The hand represents my outer shell - not in focus, I take in what/how ever much of information about anything unto myself - while processing everything through. Even things that I don't require, I keep them "stored".

Past it, everything that I take in makes who I am.


I'm not sure if the explanation was clear but I hope you got the gist of it.
Or you can interpret it in anyway you prefer!

Monday, 20 June 2011

Jon Burgerman insipred art


My artist was Jon Burgerman. His style consists of a lot of colorful and creative yet abstract cartoon-style doodling. His style really stuck onto me as I was doing this assignment, put a new face on drawing perspective. I sketched it out first on paper then re-did it on Illustrator & Photoshop.

Sunday, 19 June 2011

EDIT LATER

Aviva's Grid
Character Illustration
Psychology midterm & research paper
English small hmwrk
Self Portrait
Upload Murloc Adventure pictures

Wednesday, 15 June 2011

Favorite. Battle. Ever.
I find myself watching this at least 5 times per month.
So hype and fun to watch!

Rivers Crew (Left) vs Drifters Crew (Right)
Part 1

Rivers Crew (Left) vs Drifters Crew (Right)
Part 2

Morlock Adventure Quest

On May 30th, few of us gathered for the Morlock Adventure Quest downtown and took photos of several things. The group consisted of: SangKyum (Dawn) Kim, Xin (Catherine) Liao, Jalil Majul Gonzalez, Graham Kartna, Mohsin Kamal, Allan Doe, Norton Wong, and Joseph Cheng.
Here are all the shots required from the adventure.

We are called Team TDot416

Friday, 10 June 2011

Do it up!

Masquerade-themed party tonight! (Friend's private party)
Wooo!
It's going to be LIVE

Thursday, 9 June 2011

Things to do (Week 5+)

Note to self for things to do.
Going to keep this short for now. Gotta go to class soon so I'll keep this quick and edit it when I get home tonight.

DMA155 (Fred_Audio):
Soundscape assignment!
DMA133 (Aviva): Project 2 (Newspaper & Color grid concepts)
DMA179 (Tedford): Artist project → upload to blog
DMA188 (Joseph_Interactivity): Product review assignment!
DMA101 (Joseph_NewMediaTools): Character Illustration assignment
DMA204 (Photography): Self Portrait.  
ICA001/002: In-class test on Friday, June10ᵗʰ (review the lessons!)
----------------> Update: [LoL this test was SO easy.]
EAC150: Read required chapters & Articles + Questions
PSY204: Read required chapters!

Tuesday, 7 June 2011

Determination

Tonights ganna be a long night.
Study study study - then party party party from Friday!
Muahahah

Totally still not minding school though. 

DMA101 - Sports Logo

For our second assignment in DMA101, we were given out a task to trace and reproduce a sports team logo that is fairly challenging yet not too hard. I simply chose the Celtics team because it seemed not too difficult, yet still difficult - if that made any sense. Although I was kind of oblivious to how I would execute this in the beginning (as Joe said, planning is crucial), I took the time to go to one of the DMA tutors. We sat down and within 10 minutes I had already figured it out most of it. The planning / layer part and how I was going to do it while using the pathfinder in some cases, etc.

Final Product
The Process:
I hadn't run into too many problems at all during the making of this logo but there were a few things on my noggin.
There was much confusion on how I should categorize/layer this.
By color? Body parts? In the end I kind of fused both ideas.

Next confusion was which layer to put on top. I think about it now after
on how it's common sense but during the making I was playing around with
which layer was to go on top of which.

Heres the comparison.
Original (On the left) | My product (On the Right)

Here's the finished product with the ruler guidelines.


Sunday, 5 June 2011

Resources

Can you say, best home-made lighting board
EVER?

Haha, I just taped the two papers onto the glass table
and stuck my cell-phone on at the bottom of the table
with the Flashlight App. on.

Saved me so much time lol

Wednesday, 1 June 2011

Things to do. .

Audio: Soundscape Project
Sketching for Communications: Super Downtown Adventure Quest
ICA001: Word online/in-class test Look @ Schedule to see if in-class or online
New Media Tools: Illustrator Quiz on Thurs & Sports Logo!!
Interactivity: Study for test on Wed!! + Product review assignment
Psychology: Quiz next week (Wed)
EAC150: Essay assignment (Plan out!)
Multimedia Design: 16Pos/16Neg Letter composition
Photography: Bring camera to class!

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More