Toolkit for Innovative Designers – Part I

I have seen at times, we as designers spend most of our time trying to get the ‘just right‘ device shape for mobiles and tablets, getting the perfect glare angle and how the external product looks, since presentation does make a difference!

But are you spending more time on it than required?  Won’t it be an enormous step forward for all the designers to centralize their thoughts for some innovative thinking, rather than getting the device shape right, especially during the initial phase.

In this post I have tried to consolidate some of the templates available across the globe.

Santa Claus bag of goodies for designers
http://www.hongkiat.com/blog/mobile-devices-gui-prototyping-templates/

Have always been a great follower of Teehanlax guys
http://www.teehanlax.com/tools/

Library for user experience, designers and developers supported with Stencil Kit.
http://developer.yahoo.com/ypatterns/about/stencils/

https://www.graffletopia.com/stencils/tags/mobile

A gift must to have  http://www.uistencils.com the collection spreads across iPhone, Android, Windows and many more. See a sample here http://www.uistencils.com/collections/frontpage/products/iphone-sketch-pad :-D

This will tremendously help to design a great idea and a product. Elevate yourself towards an innovate designer and not just a visual designer!

HTML Best Pratices and Tips

Stumbled across 30 HTML Best Practices post by Jeffrey Way (editor with Nettuts) and found it worth sharing.
Though the article title suggests it’s for beginners but I would say its useful for experts too. You may find lot of such articles via google search but I like the way Jeffrey has written.

I had created 3R theory for myself sometime back, you can try and see if it adds value for you.

• Read
• Remember
• Render in your style (not replicate)

happy working!

CSS3 Possibilities (Part – 1)

Create shadow effects with CSS

Gives flexibility to designers to play freely with the shadow effects. So next you want to play with your creativity, don’t hesitate with the shear thought of execution or UI developer standing with a ‘Not Possible’ board. Simply direct him to this link

Create progressive background image with CSS

Best feature – Scales images proportionality, without

War between YouTube and Vimeo?

Copyright gettyimages.com

According to Nielsen analysis of consumer behavior suggests 70% of worldwide internet users watch videos online. And I agreed with them as I also most of the time while searching for a product demo, song, tutorial video, national/international advertisements just move towards youtube.com and when I’m looking for talks related to specific topics Vimeo is the way to go.

Younger the faster or Older the wiser?

Though Youtube is a year younger than Vimeo and surprisingly Youtube spread its wings more faster into this space. YT was the product created by 3 ex-employees of Paypal, who later sold it to Google. Now its one of the popular online video site. Youtube moved towards social networking mode allowing users

Our World of Colors

“..Picture the world, Without any color
You couldn’t tell, One face from the other…”

- Color me blind by Extreme

The way design community is growing now days it’s not surprising as the web & mobile world now understands the importance of designers. It’s no more just about adding colors but a lot more goes into applying right color combination at the right place. Bunch of tools are available on the web to help designers do their tasks more efficiently. I have selected 3 best sites to avoid any cross-weaving of thoughts, which I feel are helpful in creating a wide range of color palettes apart from our dear old favorite ones (I believe each designer has at least one special magical color palette of their own, which saves us during a rainy day)

A must for beginners – ColorBlender

Simple easy to use color blender scale. Allows to quickly Create, Save and

Ready to use templates for iPhone, iPad and Android

As in my earlier posts, I have mentioned how important it is to have the right data at the right time. Moving further with the same thought and to make sure the designers creativity doesn’t come to a halt, I had started the ‘Quick Tips’ category. Through this post I researched and created a repository for UX and Graphic designers, a compilation of Wire-frame stencils and Photoshop source files for base devices.

iPhone

• Mock-up Stencil for Balsamiq users http://mockupstogo.net/iphone-in-app-social-networking
  This stencil has additional Twitter and Facebook screens.
• You can also upgrade your version for iPhone mock-ups from http://balsamiq.com/blog/2009/03/01/iphone-controls-new-icons-and-much-more/
• Photoshop file for visual designers http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

iPad

• Mock-up Stencil for

Remove background from an image – Photoshop Techniques

There are times when as designers we need to quickly churn out few designs and we keep looking for the right images.

Frantically searching multiple photo-stock sites in different tabs and the ticking minutes just add to the aggravation. Still we are just not able to get the right shot with the right background. Looking at the heavily designed backgrounds in an image with the thought of extracting an object from it gives goose pimples to some of the designers.

I found a very helpful tutorial which provides different techniques for

Game of 3Ps: Points to Pixels OR Pixels to Points in Photoshop

At times I see designers struggling on “how to do” though they know “what to do”. Being a designer myself this minute of struggle not only sucks but leads into ineffective designing. My whole creativity goes for toss since I’m busy searching for the right tool with the ticking time lines.

I am sure there are many among us who are absolutely creative, and are full of ideas. However, the creativity falls short if it is not expressed the way its envisioned. And here’s where the tools that we use and our knowledge about them holds prime importance. It’s the tools that help bring our creativity to life. This very thought gave me a new direction to add in my blog – Quick Tips Category

Following is a quick tip of using the tools more efficiently.
Changing fonts/measurements from points to pixels (or) reverse in Photoshop

There are 2 ways of changing the Units:

Match the colors of Mac Photoshop with Windows

In most of the design communities that I subscribe to, I find designers facing difficulty related to colors displayed on a Windows machine for the creatives designed on a MacBook. Though the software used to access the design is same (Adobe Photoshop) but the moment file is accessed on Windows Photoshop, the result is devastating. Colors look washed out and whole creativity seems dead.

We all know that Mac OSX have an excellent reproduction of colors and high quality display. Henceforth we might not be able to meet the colors display 100% but at least 85% can be captured in Windows Photoshop

This was a problem I had also faced and below is what I found as a resolution:-)