WHAT DID I IMPROVE MY LOGIN FRAME?

From these .... to

 

The simplicity and clearance kind of decide all for interface-designing. I reckon this looks much more clearer and still there are lots more features than the older scenes I've had above

CHANGES

My whole design intention is changed a lot since I've put a lot of efforts into researching. My design point is still the simplicity yet a little bit elegant and glossy looks in it. At the very first, I wanted to keep every just really simple as lots of white in, but then reconsidered almost the Apple's products users care about the appearance. There I go, some circles, some 3D, lighting effects made my design. Another very important factor out of simplicity/clearance is the design trend needs to be integrated. I don't have many sketches for the interface, but I will try my best to bring them all up.

Sketch for the login frame, very rough though but I did manage to have my whole design trend (quite lots of curve) I love this!











Some sketches on computer I've finished yet

LAST RESEARCH - 7 PRINCIPLES OF EFFECTIVE ICON DESIGN

I would say this is really useful for me. Like I mentioned in my prototype, the interface needed icons for sure, then after reading this, I changed my mind that how my icons should look like.... I will put some selective summary here
Link : http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/

1. Approach Icon Design Holistically

An icon is one of many graphic elements that need to work together harmoniously. Icons can be appreciated for their aesthetic solutions individually, but they don’t function alone. Evaluate your icon designs relative to the graphic system you’re using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.

Excellent example for a good icon design set

 2. Consider Your Audience

 When creating icons, cultural considerations are important. Symbols may differ for common elements you may use for your designs.

Apple mailbox icon. Apple considers to US users only (this eagle is USA's symbol)

 3. Design for the Size the Icon will be Used At

 If you go vector and make your icon in Illustrator, there is an inherent temptation to scale the design, and try to use it at any size. This doesn’t work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design.

Icons should have a base design that is used as a starting point

 4. Keep Icons Simple and Iconic

Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much into an icon design.

RSS feeds, look elegant in big, but won't work out at much smaller size

 5. Cast Consistent Lighting, Reflections, and Shadows

It’s important that the realism you add to your designs all function coherently. If you use a light source coming from one direction then stick with it. Or you risk losing the integrated design of your icons. Also consider the light source of the design your icons will be placed in. If the light source of the icons is at odds with the Web site or application design you’re using them in, then the design will appear amateurish.

Be careful of risking losing the integrated design of icons

6. Utilize a Limited Perspective

The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.

the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).

 7. Create Consistent Icon Set Styles

Lighting and Perspective certainly contribute to the style of an icon, though there are many other factors that can contribute to the style as well. If you’re trying to fit your icon into a grunge-style Web site design, you’ll likely be adding texture to the style of the icon’s design.

RESEARCH ON PRINCIPLES IN USER-INTERFACE DESIGN

Source : http://www.sylvantech.com/~talin/projects/ui_design.html
This was a really big reading I have had there. Tons of principles with explanations and so on. I will write here the summary of all. There are 14 principles the writer mentions about :
1) The principle of user profiling - know who your user is
2) The principle of metaphor - Borrow behaviours from systems familiar to your users
3) The principle of feature exposure - Let the user see clearly what functions are available
4) The principle of coherence - The behaviour of the program should be internally and externally consistent
5) The principle of state visualization - Changes in behaviour should be reflected in the appearance of the program
6) The principle of shortcuts - Provide both concrete and abstract ways of getting a task done
7) The principle of focus - Some aspects of the UI attract attention more than others do
8) The principle of grammar - A user interface is a kind of language - know what the rules are
9) The principle of help - Understand the different kinds of help a users needs
    1. Goal-oriented: "What kinds of things can I do with this program?"
    2. Descriptive: "What is this? What does this do?"
    3. Procedural: "How do I do this?"
    4. Interpretive: "Why did this happen?"
    5. Navigational: "Where am I?"
10) The principle of safety - Let the user develop confidence by providing a safety net
11) The principle of context - Limit user activity to one well-defined context unless there's a good reason not to
12) The principle of aesthetics - Create a program of beauty
13) The principle of user testing - Recruit help in spotting the inevitable defects in your design
14) The principle of humiility - Listen to what ordinary people have to say

RESEARCH ON INFORMATION HIERACHY

I now would like to know how experienced people present information in very effective ways. Then I found some examples just for me to visualize what is a good information hierarchy and what is bad. Soure : http://flywebmaster.com/webdesign/tips/hierarchy.php

Bad Hierarchy Design



Examples for bad information hierarchy (blurry but it doesn't matter)

1. There is no apparent area of focus in the design. The entire page looks more or less the same and it is very difficult to find specific information without reading the entire page. As you can see, there is no variety in weight and point size of the type making it impossible to tell apart headlines from body text. Overall, this design is very poor. It basically dumps a load of... information on the viewer. 

Good Hierarchy Design

The text has now been segmented into horizontal pieces separated by white space. Headlines conveniently explain what each of these parts is dealing with. The type is no longer the same on the entire page. Body text looks different compared to the abstract, which is italicized. The headlines have weight and a very heavy title tells us what this page is about at first glance. 

Whitespace and font size alterations are the primary tools used for developing a clear hierarchy on your page. Playing with a variety of typefaces, colors and font properties (like the italicization of the abstract) can also help but it must be used cautiously. Having too many elements on one page can overload and ruin your hierarchy.



Example for good information hierarchy

 

DEEPER RESEARCH - COGNITIVE OVERLOAD

I never had this high-hyped feeling on researching ever before ^^! I "digged" more deeper into the interface designing which I've found out later that I should have done this much earlier. The source : http://www.slideshare.net/nazzal/effective-interface-design-by-avoiding-cognitive-overload-nazzal-th-alenezi-edge903-t4-presentation
A deeply-gone-through slideshow about the interface and how an effective interface should be. It has lots of useful information. However, the only thing I cared about there was : "Cognitive overload" - simply say that the information is provided unnecessarily and ineffectively. I read through 3 types of cognitive load ... blah blah blah and these were main points ==> HOW TO REDUCE COGNITIVE OVERLOAD?
     - Eliminate the unnecessary loads
     - Reduce the size of the cognitive load by dividing the interface to smaller pieces
     - Make instructions to help the interface users to understand what they need to do and how the interface will help them.
     - Do not confuse the users by less ordering the interface content
     - Allow the users to use the interface based on their needs and able to control its features based on their readiness.

------------
Another useful tip I found in the slideshow was "Misaligned between the text and the picture increased the cognitive load and make bad effect on the memory process"

WHAT MAKES AN EFFECTIVE INTERFACE?

I reckon I have a quite good question here; it helps me a lot. I found a word-press user page who provided lots of information how we designers should build the interfaces for a specific user-group.
Link : http://iface.wordpress.com/2006/02/09/what-makes-an-effective-interface/

Here are his useful tips in summary.

Conclusively, we can say that an interface should

• Talk the client’s language
• Specify the information expected from the client
• Provide information about the service (only the information that is relevant to the client) that the client can expect.

 -----------------
Yes, one more time, I think about it and decide to change my user-group; it will need to be more specific and clearer in order to be easier for me to design my interface

RESEARCH ON 3-CLICK RULE

Back to the Week 9's lecture, the interface is required applying 3-click rule. I was like "what is this rule about? I've never heard of this before"... Therefore, I take myself into and "dig" it...
Here is the information I found on wikipedia.com
The three-click rule or three click rule is an unofficial web design rule concerning the design of website navigation. It suggests that a user of a website should be able to find any information with no more than three mouse clicks. It is based on the belief that users of a site will become frustrated and often leave if they cannot find the information within the three clicks. Although there is little analytical evidence that this is the case, it is a commonly held belief amongst designers that the three click rule is part of a good system of navigation. Critics of the rule suggest that the number of clicks is not as important as the success of the clicks.

------------------------
I think about my inital concept and realize that "people they really want to see desired information just in three maximum clicks, I shouldn't make my interface this way"... just so you know, I will change my whole interface and promised that the interface will be so much different.

SOME INSPIRATIONS FOR THE INTERFACE

I am still researching more and more. Surfed around, and found some simple, clear interface from different websites; I found them are really useful as ideas for my own interface

The buttons are well-designed, just so clear

From an apple website, the design is so simple but looks really elegant

Simple but eye-catching

I really this colours combination, and the interface is so clear and easy to use

Black and simple, perfectly fit for advertising wine and so...

SOME INSPIRATIONS FOR THE INTERFACE

I would say I am stuck at building up a useful, effective and clear interface because I still lack of skills and experiences. Here are just some inspirations for log-in page forms, the artists has done good jobs there. The log-in forms are just clear, easy to understand and good-looking.
Link : http://dzineblog.com/2009/03/interface-design-inspiration-36-beautiful-login-pageform-designs.html
Here some which I really like