Sketching & Wireframing

Para el proyecto más importante que tengo actualmente entre manos decidimos hacer unos mockups para el diseño inicial del layout de la página. Nos surgió la idea viendo los mockups que había en el tutorial Jobeet de Symfony y empecé a buscar herramientas para crear los mockups.

Encontré varios (Balsamiq por ejemplo) pero todos eran de pago y no encontré ninguno libre de escritorio. Si que encontré alguno online (MockingBird, MockFlow) pero la verdad es que no me convencieron mucho, aunque para salir del paso no están mal.

Hoy he encontrado un post que proporciona archivos en formato vectorial (.ai, .eps, .svg) en el que están casi la totalidad de elementos que puedes tener en una página: inputs, checkbox, listbox, tabs. Así por lo menos me los podré montar con Illustrator.

Al final va a ser que el blog de Janko va a ser uno de los fijos en mi reader…

960 Grid System

A la hora de diseñar las páginas web en Photoshop, siempre me baso en hacer la página para 1024×768 px, con lo que lo que hago es un documento de 1200 px de ancho y luego pongo un par de guías, una en 100px y otra en 1100px.

Estos serán mis límites a la hora de crear la página.

Buscando ayer cosas sobre Symfony, no se como, dí con esta web que proporciona templates en Photoshop para la creación de páginas web siguiendo unas guías y utilizando un tamaño de página de 960 px exactamente. También divide el documento en columnas de igual tamaño de manera que se pueda diseñar la web sin superponer elementos y haciendo que el diseño sea sencillo y fluido.

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

Para entender mejor de que va el tema mejor un par de imágenes:

+info: 960 Grid System