Cómo crear un boceto web, mockup o wireframe | Ayudas extras

La creación de un boceto web, mockup o wireframe puede ser realizada en un simple papel, con cualquier herramienta de edición gráfica o con alguna aplicación profesional de diseño web.

Opciones más habituales:

  • Generalmente el consejo serí­a usar Fireworks, la aplicación de Adobe especí­fica para diseño web.
  • Pero seguramente habrá muchos más diseñadores que se manejan mejor con Photoshop, buena para todo lo relacionado con la imagen.
  • Opciones de código abierto: Inkscape y GIMP.
  • Menos común pero posible son los bocetos que nos llegan en servilletas ““ papel ““ word o por ejemplo InDesign.

En resumen lo que necesitamos es una simple imagen, que incluya más o menos detalles dependerá de nosotros mismos y de los que no pida el cliente.

image

Estableceremos unos requisitos previos, un listado de enlaces a 12 ayudas para la creación del boceto y al final dos aplicaciones, una de ellas gratuita para la generación de bocetos web.

Requisitos previos de un proyecto web

El cómo vamos a abordar nuestro proyecto es otro elemento importante. Lo primero y principal es tener un briefing, debemos saber cuál es el objetivo de la web y tenerlo siempre presente.  A partir de ahí­ podemos preguntarnos:

Una vez despejadas estas incógnitas empezamos con el papel, la página o el lienzo en blanco. Al menos ya sabemos las dimensiones con las que vamos a trabajar, normalmente empezamos con un ancho no superior a 960 px y dependerá del proyecto ceñiremos o no también la altura.

Layout

Lo básico para generar un boceto es crear el layout, nos será muy útil empezar configurando la cuadrí­cula y/o guí­as de nuestra aplicación, luego será cuestión de añadir rectángulos contenedores que seguramente sean los divs de nuestro HTML. No olvides los blancos

image

Colores

Una vez creada la estructura básica podemos crear nuestra paleta de colores nosotros mismos o o con la ayuda de Kuler, Colour Lovers o cualquiera de estas 25.

Imágenes de fondo

Sabemos que colores planos los podemos reemplazar por CSS y que para los degradados con tener una imagen de 1px nos basta.

Para el resto de imágenes podemos crear un sprite CSS.

Fotografí­a

Piensa en la importancia de la imagen, si es de tu propiedad trátala y optimí­zala para web, hay una tendencia de diseño web a utilizar imágenes grandes de fondo. ¿Tus usuarios valorarán esto? ¿Puede resultar cansina? Piénsalo antes.

Sobre todo aquí­ recuerda respetar los derechos de autor, por mucho que trates una fotografí­a sigue teniendo autorí­a.

Texto

Aunque podemos utilizar texto falso para el boceto cualquier contenido que ya tengamos o intuyamos es recomendable ponerlo. No es lo mismo poner “Titular” que “La conferencia de la Confederación fue respaldada por todos los asistentes”. Te ayudará a corregir espacios. No todos los clientes van a tener redactores web.

12 Ayudas extras

Aunque el diseñador más versado sea capaz de crear todos los elementos necesarios no está de más tener a mano algunas ayuditas que mejorarán el flujo de trabajo y nos ahorrarán tiempo.

Elementos web, iconos, fondos y otros

Los elementos web como los botones, los elementos de formularios, son comunes a casi cualquier proyecto. No está mal tener una biblioteca con estos elementos.

  1. Web Browser Elements
  2. Free Photoshop form element templates 
  3. Yahoo”™s Design Stencil Kit

    image 

  4. Web Form Elements
  5. Banners, descarga imágenes con los tamaños estándar.

    image 

  6. Puedes utilizar esta app web para recrearlos en Flash. BannerSnack (ví­a AppSheriff)

    image

  7. Generador de Lorem Ipsum en distintos formatos, como párrafo, lista
    image
  8. Browser Form Elements PSD

    image
  9. Quommunication Starter Kit 
  10. Por uno o pocos dólares puedes adquirir estos diseños para integrarlos en Photoshop. 30 Photoshop Web Elements, Backgrounds and Icon Sets (via GraphicRiver)

    image

  11. Favicon.CC: app web para generar el favicon
  12. Si vas a utilizar un framework deberí­as empezar con una plantilla para él y entender cómo funciona. Por ejemplo para el framework 960 Grid System te vendrá bien comenzar con una plantilla y este tutorial:

 

Tutoriales

Hay muchos en inglés, en español os recomiendo de nuevo el de Miguel íngel ílvarez con videotutorial incluido

 

2 Aplicaciones generadoras de bocetos web

Balsamiq Mockups (AIR) ““ La versión gratuita carece de algunas funciones. Librerí­a de elementos, muy fácil y rápida de utilizar. pronto tendrán versión online pero lo que sí­ tienen ya es Napkee, el complemento para exportar el wireframe a HTML, CSS y JS o sólo a Flex o 79 dólares para ambas opciones. (Visto en MAPAWE)

Ejemplo de YouTube.

image

 

Mockflow: una app web totalmente gratuita. Seguimos con el mismo ejemplo: YouTube. Recomendable

 image

Dicotomí­as relacionadas en pqpq.es 

Resumen

La creación del boceto es el primer paso, el concepto visual es fundamental para que la codificación sea fluida. Aunque la mayorí­a de las aplicaciones tienen la opción de exportar para web no son ni mucho menos recomendables.

Es importante que si no dominas HTML, CSS consultes antes de crear algún boceto, no todos los diseñadores saben programar ni todos los programadores diseñar, claro que ya no hay programadores/diseñadores hay diserrolladores web.

Seminario web

Este miércoles dí­a 11 reanudaremos las conferencias ““ ví­deotutorial sobre cómo crear un theme para WordPress donde intentaremos poner en práctica un proyecto real.

Cursos de diseño web en cursos v2b

Para aprender a tu ritmo y desde tu equipo. Todos estos cursos son en formato videotutorial y tienen la garantí­a de video2brain.

Puedes ver en esta demo más de 12 horas de ví­deotutoriales completamente gratis.

La diferencia respecto a la web oficial de video2brain es que en ceslava ofrecemos los mismos cursos con un 15% de descuento, y de que gestionamos las subvenciones de la Fundación Tripartita para que estos cursos resulten gratuitos para trabajadores residentes en España. Puedes verlos online o descargarlos cómodamente a tu equipo.

Si estás interesado en más de uno lo mejor es que adquieras una suscripción, acceso a TODOS los cursos de video2brain durante 1 año. Ofertas de suscripción anual:

Cualquier duda ponte en contacto, estaremos encantados de atenderte.

Autor: Cristian Eslava

Trabajo como autónomo desde comienzos de siglo. Soy blogger, diseñador y formador, no necesariamente en ese orden. Si necesitas servicios de diseño, formación o publicidad contáctame, estaré encantado de colaborar.

Más sobre mi en "Mis confesiones"

Cristian Eslava