VIDEO CLIP PART C

Link Youtube

FINAL FIXED INTERFACE

I got rid of the arrow and flashing ads-liked words on top of the Energy Consumption button. As well, I added Ranking feature so users can compete with friends and the other people.

HERE THE LINK OF THE FINAL FIXED INTERFACE

LINK TO FINAL FIXED INTERFACE

MY THINKING ON CHANGING THE INTERFACE

I've been in the presentation and seen lots the other people's interfaces. Those interfaces are really cool, so I try to think back about my own interface. I think I did prepare pretty much all essential features, but for users to compare or compete with the others. My idea : one more button to access to facebook.com account where users can simple compete with friends by the points (E-nergy points)

EXTRA : COLOURS USING

I refer from adobe.kuler.com to get the idea on applying colours for my interface. (The link is died, so I can't access to it anymore)

PRESENTATION AND FEEDBACK

I got some compliments on the design of the whole appearance, but still there are issues....
SOME EYE-CATCHING SCENES

SOME FEEDBACK I NEED TO CONSIDER
The ADs-liked interface needs to be fixed : the idea to gain attention is good but too flashy and look like a advertisement pop-up.

The main interface on energy consumption information is liked an ad as well. However, my point is using two colours like green and red to distinguish two types of things : should & should not or so... and use the words to encourage users to save money (talk about this later)

FINAL INTERFACE

LINK TO OPEN SWF FILE

My final interface submission (first one)

LOGO - TITLES AND BACK BUTTON

I also design each scene has at least company's logo and the titles (extra the back button) so users will know where they are at and where to go back....

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.