{Carrer web log}

Distributed Color Palette – Photoshop Tool

Monday, June 28, 2010 { 2 Comments }

There are many color palette tools that can help you choose colors for your web site or project.

Usually all color tools generate or combine colors in equal quantity proportions, but in one web site, magazine or anywhere else the color is not distributed in equal proportion.

I wanted to make a color tool who can do better job in simulation of color quantity distribution.

I used photoshop shapes and layers to build circle based color system. You can easily customize it by duplicating and adding extra layers and colors.



Here is demo example for vimeo.com

>> Download the photoshop tool

iPhone Grid System

Tuesday, June 01, 2010 { 11 Comments }

Like a many developers and designers I was tempted to start building application for iPhone and for mobile devices in general. Beside the problem of choosing the programming language native Objective-C or Javascript + HTML5 was the problem of creating design environment for more easily pre application development and prototyping.

I’m a fan of the grid design. Grids can help you understand the design space better, and they usually bring order and the balance to the design process and there are great help in the prototyping stage.

I was inspired with the Massimo Vignelli’s Unigrid System and I wanted to the similar thing with the iPhone.

So the problem was how to organize the 480px X 320px iPhone working space.
I decided to build 12:8 (480:320) Modular Grid System with the unit of 40px and the gutter of 5px.

I think that 12:8 grid system is a right balance for the iPhone, 24:16 will be probably too much and 6:4 too little.

For the calculating the gutter I first divided 320/8 = 40 and than 40/8 = 5px. For the gutter there is no right and wrong size it all depends what the grid will hold and what you want to achieve with the grid. So please feel free to change the gutter size or not to use it.

I made three version of the grid the first the grid only the second the grid and the iPhone frame and the last version The Grid + iPhone Frame + Notes with bought .PNG and photoshop .PSD files.

The iPhone Grid



iPhone Grid + Frame



iPhone Grid + Frame + Notes




Download - all files Photoshop Template .PSD and .PNG

.PSD iPhone Template can be easily personalized, feel free to change anything.
I hope that this grid system can help you in your next iPhone application or site development. If you want to learn more about the Grid Design this site is great place to start The Grid System

Any comments?

P.S If you are fan of paper prototyping you one of my previous post useful Sketchbook for web designers