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.
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:
- ¿Qué libertad creativa tenemos? ¿Existe manual de identidad?
- ¿Tenemos ya dominio? ¿Cuál?
- ¿Varios idiomas? ¿Mismo contenido? ¿Se detectará el lenguaje de la máquina o con botones?
- ¿Incluirá publicidad? Si la publicidad es gráfica y contextual, por ejemplo de Adsense tiene formatos específicos y su diseño estará fuera de nuestro alcance.
- ¿El proyecto web es para un CMS? ¿Cuál?
- ¿Utilizaremos algún framework CSS? Elige el que mejor se adapte a tus necesidades: Comparativa de Frameworks CSS
- ¿Efectos AJAX con alguna librería javascript?
- ¿Diseño líquido o estático? ¿Versión para smartphones?
- Optimización de carga, ¿economía de carga gráfica?
- ¿Fuentes de sistema o alguna tecnología para personalizarla?
- ¿Vamos a respetar los estándares web? ¿HTML y CSS válido?
- ¿Vas a ignorar a los usuarios de IE6 o vas a intentar que también puedan navegar por tu web?
- ¿Queremos que nuestra web cumpla con los criterios básicos de accesibilidad?
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
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.
- Web Browser Elements
- Free Photoshop form element templates
- Yahoo»™s Design Stencil Kit
- Web Form Elements
- Banners, descarga imágenes con los tamaños estándar.
- Puedes utilizar esta app web para recrearlos en Flash. BannerSnack (vía AppSheriff)
- Generador de Lorem Ipsum en distintos formatos, como párrafo, lista
- Browser Form Elements PSD
- Quommunication Starter Kit
- 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)
- Favicon.CC: app web para generar el favicon
- 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.
Mockflow: una app web totalmente gratuita. Seguimos con el mismo ejemplo: YouTube. Recomendable
Dicotomías relacionadas en pqpq.es
- Gráficos para web | Photoshop vs. Fireworks
- Software comercial vs. Software de Código Abierto
- Software legal vs. Software pirata
- Aplicaciones web vs. Aplicaciones de escritorio
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:
- Suscripción Anual Online: sólo 189€
- Suscripción TOTAL Online: por 289€ te podrás descargas todos los cursos a tu equipo.
Cualquier duda ponte en contacto, estaremos encantados de atenderte.
Deja una respuesta