Papel para bocetos web

Volvemos al boceteando que es gerundio, como nos gusta esta frase, como nos gusta bocetear.

Os traemos dos archivos en sendos PDFs uno con disposición vertical y otro horizontal, en ellos encontrarás una hoja perfectamente imprimible y cuadriculada donde podrás desarrollar tus bocetos para páginas y aplicaciones web para que quedes como un artistilla al presentar tus presupuestos. La página cuenta con alguna pega, la palabra TITLE que figura en inglés, pero bueno mal menor.

Estos bocetos están creados por raincreativelab.com, no son nada del otro jueves pero hoy estamos a viernes y algo es algo.

Los archivos aquí: Horizontal: Papel para boceto web horizontal (663) Vertical: Papel para boceto web vertical (631)

Generador de plantilla de columnas para web

The 1Kb CSS Grid es una aplicación online que permite generar frameworks o estructuras de ficheros con el encolumnado ya creado bajo HTML y CSS. Ideal para realizar bocetos, mockups y todo tipo de pruebas.

Para configurar tu parrilla dispones de tres deslizadores desde donde debes configurar una parrilla imaginaria de columnas para dar forma a las capas de tu web.

El resultado te lo descargas en un fichero zipeado: Si abres el html te encontrás una plantilla como la siguiente:

El código que te genera es muy limpio. Únicamente dos archivos, un HTML y un CSS.

En nuestras pruebas hemos obtenido el siguiente código HTML

	



The 1Kb Grid Demo – 9 columns, 80 pixels each, with 20 pixel gutter




9

6

3

3

3

y el siguiente CSS

.grid_1 { width:80px; }
.grid_2 { width:180px; }
.grid_3 { width:280px; }
.grid_4 { width:380px; }
.grid_5 { width:480px; }
.grid_6 { width:580px; }
.grid_7 { width:680px; }
.grid_8 { width:780px; }
.grid_9 { width:880px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 900px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

Enlace: http://www.1kbgrid.com

Boceteando que es gerundio

Aplicacion para crear bocetos
Aplicacion para crear bocetos

Os presentamos una útil herramienta online para realizar bocetos, no obstante ya os avisamos que es una herramienta de pago pero bien puedes utilizarla para inspirarte.

Esta aplicación permite bocetear proyectos, crear de forma ultrarápida capturas pantallas con la estructura y funcionalidad de un site o aplicación web, de esta forma le puedes mostrar a tus clientes de una forma muy graciosa, debido a que la gráfica obtenida es muy casual, cómo puede quedar estructuralmente la idea del diseño del site.

Existe una versión de escritorio, descargable e instalable por 79 dólares y otra en capa web, es decir una aplicación web.

Enlace: http://www.balsamiq.com/demos/mockups/Mockups.html