Diseño web con retícula: mi flujo de trabajo

Enero 21st, 2009

Diseño web con retícula

Paso 1: Pensar
Siempre parto de un prototipo (a veces un Visio, otras un boceto en papel) en el cual defino cual va a ser la estructura de la web. Pienso que tipo de retícula se puede adaptar mejor a dicha estructura.

Paso 2: Definir la retícula
He probado otros sistemas, pero Grid Calculator es el que más me gusta. Me resulta muy cómodo variar el ancho y el medianil hasta encontrar las medidas idóneas. Aunque no permite una visualización completa de cómo quedarán las columnas, para mí es suficiente. Cuando la tengo definida, hago un “Imprimir pantalla”.

Paso 3: Preparar el archivo de trabajo
Abro mi “plantilla-base.psd”. Es un lienzo de 1000 px de ancho por 800 px de alto. Aproximadamente, es la zona visible sin hacer scroll en monitor configurado a 1280 x 1024 (evidentemente, faltarían los márgenes laterales). Tengo colocada una guía horizontal en 530 px para comprobar el corte en un monitor a 1024×768.

Paso 4: Construir la retícula
Pego la captura de pantalla del Grid Calculator. Selecciono la zona de la retícula y la estiro verticalmente para que ocupe todo el lienzo. Empleo el nombre de la capa para apuntar las características (medida, columnas…).
A continuación, la duplico y la giro 90º para tener una rejilla cuadriculada que me sirva como referencia.
Coloco las dos capas en una carpeta y su opacidad al 50%. Este sistema me permite visualizar rápidamente las dos capas (activándolas), una (desactivando la que no necesito) o ninguna (desactivando la carpeta).

Paso 5: Poner guías verticales
Antes marcaba con guías todas las columnas, pero era bastante caótico. Prefiero poner sólo las que formarán las columnas principales. Las activo y desactivo rápidamente con el atajo de teclado.

Paso 6: Diseñar
Ya tengo la retícula lista y sólo queda ponerse con el diseño de la web.

Bola Extra
A la hora de maquetar con CSS, la extensión Grid Fox me echa una mano.

Si os interesa, podéis descargar esta plantilla (PSD) con una retícula de 940 px de ancho y 8 columnas.

Post Relacionados

Citas, Diseño web | Comments | Trackback

6 Responses to “Diseño web con retícula: mi flujo de trabajo”

  1. 1lumbreras
    Marzo 2nd, 2010 @ 23:42

    Pues gracias por tus consejos, baje la plantilla, gracias, estoy aprendiendo sobre diseño web, y que mejor que hacer las cosas bien desde un principio, saludos!

  2. 2scuain
    Marzo 3rd, 2010 @ 23:56

    Me alegro de que te sirvan :-)

  3. 3Aesthetic Therapie
    Agosto 26th, 2010 @ 13:18

    Felicidades por el blog, tiene mucha información útil para empezar con el diseño web, a mi me está tocando ultimamante y me parece que voy a volver por aquí más a menudo.. saludos!

  4. 4isabel
    Junio 29th, 2011 @ 10:53

    para empezar el diseño web me parece muy buena informacion, buen aporte, me voy a mirar las plantillas que seguro que tambien son buenas, gracias.

  5. 5Ecarte Spielregeln
    Septiembre 23rd, 2011 @ 2:17

    tolle posein mit eiger und benfrein zwein, sehr aguntier und usassebu. pflirmt schon spetion hat schmung, ausgetige und nderieg mit komen.

  6. 6Mary
    Septiembre 25th, 2011 @ 21:02

    Such an excellent text! No idea how you came up with this report..it’d take me weeks. Well worth it though, I’d suspect. Have you considered selling ads on your website?

Leave a Reply

  1.  
  2.  
  3.  
  4. XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can keep track of new comments to this post with the comments feed.

Buscador

En Twitter he dicho...

Subscríbete al blog

Más información

Categorías

Archivos

Post recientes

Post más populares