Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow

Bocetos: ¡Cómo un simple lápiz y papel pueden transformar tus diseños web!

by
Read Time:15 minsLanguages:
This post is part of a series called Let’s Talk About Creativity.
Don’t Squelch Your Creativity With the Constraints of Possibility
Readers' Poll: How do You Combat Designer's Block?

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Por lo general, pasamos buena parte de nuestro tiempo frente a un monitor y es más probable que tengas más de un monitor, eso claro, sin mencionar iPhones, iPads y todos los otros juguetes ultra modernos que han invadido por completo nuestro escritorio. Todos somos parte de una generación que necesita un mouse para hojear un álbum con las fotos de la familia (adiós a los queridos álbumes con las páginas que quedaban en amarillo), sin mencionar a Facebook para enviar deseos de cumpleaños a un amigo. ¡Incluye 20 ejemplos de estupendos sitios web inspirados en "bocetos"!

Aún en medio de esta era digital, los mejores aliados de un diseñador web son las herramientas comunes que se pueden comprar con el cambio que está debajo de los cojines del sofá. Estoy hablando de hacer de un lapicero, lápiz y papel una parte del proceso creativo que otros diseñadores “no digitales”, han estado usando por años: bocetando.

Con este artículo vamos a tratar un argumento que sin duda muchos de ustedes tienen en el corazón: de hecho, veremos cómo bocetar nos puede ayudar a organizar las ideas, diseñar un plan efectivo y — ¿por qué no?—, darle a nuestros diseños un toque fresco y original.

Bocetar como parte del Proceso de Planeación

Imagine el siguiente escenario: Acabamos de terminar una agotadora reunión con nuestro cliente, y ahora es el momento de reorganizar las ideas. En este punto, conocemos las preferencias y necesidades de nuestro cliente, así que sobre esta base, debemos de ser capaces de definir el plan que tenemos para diseñar. Sin embargo, el problema es la enorme cantidad de información que tenemos que considerar. Definimos, por ejemplo, que en la página de inicio tenemos que poner un deslizador de imágenes y un llamado a la acción visible que invite a contactar al cliente, las páginas del sitio serán siete y, además, debemos incluir las últimas noticias en la página de inicio, etcétera.

En este punto, en particular, te aseguro que abrirás Photoshop con la pretensión de crear un diseño efectivo y será inútil. Es decir, sin un plan para lo que tienes que dibujar en detalles, estarás bloqueado y obligado a diseñar esencialmente sin suficiente prospectiva para tomar decisiones inteligentes. A menudo esto significa más trabajo extra, además de arreglar lo que se suponía, ya había sido hecho bien desde la primera vez con tan solamente un poco de trabajo de bocetar.

“Bocetar ofrece algo completamente único a los diseñadores… nos ayuda a organizar grandes cantidades de información en piezas manejables con las que podemos trabajar en el diseño.”

Por otro lado, si tienes la fortuna de ser capaz de metabolizar conceptos he ideas en un diseño, lo más probable es que olvides algo sumamente importante; tener que poner tus manos nuevamente en el diseño por segunda vez. Y probablemente también sepas que hay diseños que incluso con el más pequeño cambio se alteraran completamente y pierden su comunicación eficaz y estética, lo que sin lugar a dudas es; un resultado verdaderamente frustrante.

Una serie de consejos de; ¿Cómo empezar a bocetar sin perder tu cabeza? Primero, consigue lápiz y papel…

  1. Marca las palabras claves que deben distinguir la compañía y que quieres que estén en frente de tus ojos durante la fase del proyecto, para que no pierdas el enfoque de lo que quieres representar gráficamente. Evita frases y conceptos complicados, se orgánico: cuánto más claro seas, cuánto más tú mente procesará la información rápida y fácilmente..
  2. Siempre, al menos en una manera semántica, posiblemente como una lista, escribe la información útil para la fase de diseño. Lo que tienes que hacer es grabar en el papel solamente la información y conceptos que necesitarás una vez que abras los programas gráficos.
  3. Divida la información en etapas, para que cada frase sea tan sencilla como sea posible. Si todavía tiene que diseñar el plano de la página de inicio, entonces no tome notas de los contenidos que se incluirán en la página de contactos, es decir: evite confusiones y distracciones. Anote la información en diferentes hojas de su cuaderno de notas, para que usted pueda concentrarse en un solo paso a la vez.

Esta primera fase de bocetar hace referencia a la elaboración de la información en una forma semánticamente sencilla. Probablemente estarás pensando que todo este rigor y disciplina no tiene nada que ver con la creatividad y la imaginación y seguro hasta querrás cambiar de escenario. Está bien, entonces avancemos al siguiente paso.

Bocetar como parte del Proceso Creativo

Dijimos que bocetar es un proceso creativo, pero ¿qué significa esto en la práctica?

Bueno, podríamos considerar la tarea de bocetar como un “medio terrestre” entre la información y nuestro proceso y el diseño que vamos a terminar de planificar. En este territorio, hostil y mágico, encontramos; colores, fuentes, cajas, ideas, inspiración, texturas, imágenes, sensaciones, dudas… y mucho más. Es inútil decir que en medio de todo esto es fácil estar confundido y encontrar la idea correcta, es decir, la idea que funcione y nos haga sentir orgullosos de ser diseñadores.

Creo que no hay nada más irritante que encontrarse uno mismo en frente de una hoja en blanco, esperando por inspiración que se supone vendrá desde quién sabe dónde, y lo que es aún peor, terminar con creaciones, por así decirlo; horrorosas (entonces, si eres tan afortunado como yo, estarás comprometido con un colega que toma la mejor de las situaciones para decirte que tu trabajo está mal hecho sin tomarse la molestia de endulzar la píldora que no hiera tu sensibilidad como creativo).

Uno de mis cuadernos para hacer bocetos… bueno, mejor revisemos esto después.

Personalmente, pase momentos difíciles con algunos clientes: la inspiración no quiso salir y mi propuesta gráfica hizo avergonzarme de mi trabajo. He pasado horas buscando en galerías de sitios, sintiéndome incluso más deprimido porque parece como si todos fueran capaces de crear cosas bellísimas, y que la única persona que no fue capaz de poner dos rectángulos juntos en una forma bonita fui yo. En mi caso, la facilidad de la presión se hace fácil con la ayuda de un lápiz.

Darle su merecido desde el inicio del proceso creativo en el papel, de hecho, libera tu imaginación. Permitiéndote trabajar en una manera más estimulante y espontánea.

Especialmente si el proyecto en el que estás trabajando es enorme y rico en detalles técnicos, considerando todo esto, la primera fase puede ciertamente ser castrante para el flujo creativo, sin mencionar la debilidad que provoca la idea de “fallar”, que afecta a muchos diseñadores; sobre todo aquellos que están atrapados en el deseo de hacerlo rápido y bien, a menudo quedan paralizados en frente del monitor sin organizar las ideas y, sobre todo, cambiarlas en la dirección correcta.

Además, antes de empezar a trabajar en cualquier tipo de programa gráfico, consigue lápiz y papel y… ¡haz un boceto! Un garabato, apunta un par de ideas, es más, empieza trazando algún tipo de diseño abstracto y familiarízate con él y después libera tu intuición. Después, analizarás las ideas, ahora solamente déjate llevar y evita pensar lógicamente y racionalmente, porque ellas no te ayudarán en esta fase.

Describe el diseño, escribe un par de notas, bórralo todo, empieza de nuevo: durante este proceso tu mente trabaja de forma rápida y frenéticamente, así que toma notas de todo antes de que esta fase intuitiva se acabe. Descubrirás que al darte completa libertad de tus ideas es agradable y relajante, además de útil por supuesto.

Comete algunos errores… pero hazlo a propósito

La primera idea raramente será la correcta, así que prepárate para aceptarlo. Hacer bocetos te ayudará a desbloquearte y aprovecharás las diferentes oportunidades gráficas que pueden ser las correctas para ti inmediatamente y ligeramente, pero esto no significa que no cometerás errores en esta fase. Lo positivo de todo esto, es que incluso si cometes errores en esta fase siempre puedes romper la hoja, afilar el lápiz y empezar nuevamente en otra hoja. Botar un diseño elaborado con Photoshop, solamente porque te diste cuenta que no era la mejor solución para tu caso es sin dudas desmotivación.

Bocetar, NO estructurar.

En dicho asunto, te aconsejo no confundirte en bocetar con la creación de una estructura compleja. En ese caso, estamos hablando de dos cosas completamente diferentes, incluso, hasta me doy cuenta que hay algo de confusión en el argumento. Hace algunos días un diseñador web me dijo, citando sus palabras exactas: “Ah, ¿usted usa papel y lápiz? Yo todo lo hago en línea”, mencionando un sitio que te permite crear bocetos con una precisión matemática, con un completo control en colores y tipografía.

Bueno, esto no es bocetar, esto es otra cosa completamente distinta. Hacer click con el mouse sobre algunos botones para hacer aparecer algunos rectángulos no te permite darte una forma de tus ideas y, mucho menos, liberar el flujo de tu creatividad, intenta creer. Con esta forma, no dudo de la utilidad de una buena estructura, solamente quiero subrayar las diferencias entre estos dos enfoques.

¡Aprovecha el Caos!

¡Guarde su deseo de precisión, además de reglas y compas! En esta fase, no hay espacio para el orden y el rigor, así que no limite el flujo de la creatividad, bloqueándote a ti mismo con márgenes y espacios en blancos, porque puedes pensar en ellos más tarde. En la misma forma, no te preocupes si no eres particularmente dotado artísticamente y tus habilidades manuales difícilmente te permiten apoyar el lápiz: bocetar se usa para reordenar las ideas no para la formación de artistas talentosos.

En este sentido debemos agregar, incluso, que el proceso de bocetar nació como un libre significado de expresión de imaginación y creatividad aparte de sus habilidades gráficas. Esto no significa que el boceto no tiene, en cierta manera, un valor artístico. Nada más veamos de lo que estoy hablando.

Bocetar como parte del Proceso de Diseño

La tendencia de muchos diseñadores web para bocetar ha empezado a darle su merecido desde el inicio a un verdadero estilo gráfico que recuerda de alguna manera los aspectos estéticos del esbozo: tenemos cepillos que pantomima su espontaneidad y su belleza, sin mencionar cientos de fuentes en estilo a mano alzada que se pueden encontrar muy fácil en la web. Gracias a tales recursos creativos, hoy en día hacer el plano en un estilo de boceto es bastante fácil, pero además, este estilo gráfico que usa este diseño, por lo general, tiene un toque de originalidad que los hacen atractivos y fuera de lo común.

El estilo de dibujo, simplemente porque está asociado a una actividad común a muchos creativos, es a menudo utilizado en sitios de diseñadores independientes y agencias de comunicación y diseño que quieren transmitir este concepto gráficamente. De cualquier manera, incluso la combinación de algunos elementos de dibujo a un gráfico más tradicional puede darte una perspectiva a los diseños de otra manera ordinaria.

Veamos cómo algunos sitios han usado este estilo en una manera efectiva y original y, más importante aún, como ha influido esto en la estética y la eficacia de sus propios diseños.

Kunal Chhajer

http://www.kunalchhajer.com/

El sitio del diseñador web Kunal Chhajel refleja exactamente el concepto del estilo de dibujo. Es decir, el gráfico es ligero y agradable, además esta enriquecido en una forma original por algunos diseños que hacen el diseño único. El estilo también recuerda el uso de las fuentes a mano alzada en el menú de navegación. Todos estos detalles dan al diseño la creatividad que un diseñador quiere para expresar en su propio sitio.

Creativo con una K

http://www.creativewithak.com/

En el sitio web Creative with a K, encontrarás un uso enorme de dibujos y garabatos, solamente para presentar de forma clara la “naturaleza creativa” del sitio web. En este caso incluso la peculiaridad del diseño, tan atípico, lo hacen tan especial e inusual, aunque sea difícil de consultar.

Lega-Lega

http://www.lega-lega.com/

El sitio web Lega-Lega, es una tienda en línea de camisetas con impresiones un poco fuera de lo común y que está dirigido definitivamente a un mercado juvenil. La incorporación de algunos dibujos detallados le da un toque atractivo y limpio al sitio.

Beavory

http://beavory.com/

Beavory es el blog de Karen Mack, una ilustradora israelí. El estilo de su sitio esta deliberadamente basado en un estilo que recuerda su naturaleza creativa en una manera pronunciada y original. Cada detalle, desde la estructura del diseño basado en líneas irregulares —como si fueron dibujados con un rotulador—, hasta los iconos de las redes sociales trazan completamente un estilo de dibujo efectivo.

Bowtie

http://bowtieperiod.com/

Bowtie es un estudio digital que decide representar a sí mismo, verdaderamente en una forma creativa en la web. Las animaciones del sitio, junto con los encantadores dibujos no comunes, hacen el diseño atractivo y fuertemente extravagante. Por eso, ellos se llaman a sí mismos “creativos” y, para probarlo, ellos usan elementos en estilo de dibujo.

MakoMako

http://www.makomako.cz/home/

El diseño de la banda MakoMako es completamente en estilo de dibujo, por lo que la misma estructura de la página está basada en una estructura de una hoja de papel con líneas irregulares y, además, en la página de inicio como parte del diseño también encontramos detalles gráficos usuales basados en dibujos y fuentes a mano alzada y un lápiz. Un aspecto muy curioso he inusual para una banda.

Stan El Hombre de Nieve

http://stanthesnowman.com/

Ahora que ya casi es verano y gran parte de su encanto se desvanece, pero la eficacia de los gráficos del sitio Stan The Snowman, sin embargo, esta fuera de toda discusión. En este caso la incorporación de imágenes estilizadas y de una fuente estilo caligrafía da un estilo espontaneo al diseño, juguetón e informal. Y esto traza el concepto de actividad, basado en la escritura de tarjetas de felicitación.

Greenaway Pro

http://www.greenawaypro.co.uk/

El sitio del festival Greenaway Pro 2011 combina en una manera particular y atractiva el estilo de dibujo y el estilo grunge, ofreciéndole a su diseño una huella muy original. También en este caso la elección de este estilo gráfico en particular tiende a expresar un aspecto informal, espontaneo y excéntrico. Perfecto para un festival que trata con músicos y surfistas, ¿es correcto?

Julian Laval

http://www.julianlaval.com/

Julian es otro diseñador web independiente que quiere resaltar sus habilidades gráficas, explotando el poder de la comunicación del dibujo en una original forma creativa. Por supuesto, no es solamente esto lo que hace su sitio tan especial, pero, incluso lo curioso y deliberadamente poca naturaleza común de sus dibujos. Como muchos otros sitios en este estilo, los colores han sido limitados a escala de gris, para hacer las ilustraciones más realísticas.

Little Creatures

https://www.littlecreatures.com.au/

El sitio web Little Creatures está completamente diseñado en estilo de dibujo y gracias a la peculiaridad de sus dibujos, tan pocos reacabados, la página es tan atractiva.

Le Carnet Ordinaire

http://carnetordinaire.com/

Carnet Ordinaire es un sitio web que es más como un diario, con notas de viajes, anotaciones y consideraciones personales. Considerando la naturaleza excéntrica he íntima del sitio, el estilo de dibujo es el más apropiado para él: el diseño está basado en la imagen de un diario abierto, reforzada por bocetos y dibujos estilizados. Incluso el fondo está hecho más originalmente con algunos dibujos insertados en opacidad y por la presencia de un lápiz, casualmente a la izquierda, cerca de la agenda.

Wing Cheng

http://www.wingcheng.com/

El portafolio de Wing Cheng es un ejemplo perfecto de la clara perspectiva que el estilo de dibujo puede dar a un diseño. La estructura de la página está basado en un cuaderno de dibujos ajar, desde el cual las páginas caen hacia abajo. El efecto está hecho más dramático gracias a las sombras que enmarcan al diseño y el uso de la fuente de caligrafía para cada contenido del diseño, desde los títulos de los proyectos para su descripción. Pero la verdadera peculiaridad de este sitio se refiere a la exposición de los proyectos, también dibujados con lápiz en una manera originalmente creativa.

Kuztown University

http://www.kutztown.edu/acad/commdes/faculty/

La universidad de comunicaciones y diseño de Kutztown no pudo encontrar una mejor manera de abordar a los creativos o los que los inspiran. El diseño es ciertamente inusual para una realidad académica: el estilo de color de fondo en marca de agua, la página basado en la página de un libro, las ilustraciones en marca de agua, la fuente en particular del menú de la navegación … todos los detalles son originales y ciertamente expresivos.

Dan Whittaker

http://www.dannwhittakercreative.com/

Dann Whittaker en su sitio muestra un estilo gráfico común a muchos diseñadores web. Un aspecto casual y espontaneo, basado en la página de un libro además de un uso consistente de detalles en estilo de boceto. En lo complejo, el diseño es muy efectivo y estéticamente placentero.

Chernobyl Heart

http://www.chernobylheart.org.uk/

En el caso del sitio web Chernobyl Heart, el estilo de dibujo es usado para resaltar gráficamente el concepto de la niñez: aquí estamos hablando sobre niños y los vemos a través de algunos dibujos pequeños estilizados que copian su particular manera de dibujo. Efectivo y placentero.

Demain j’arrete

http://demainjarrete.stpo.fr

El estilo de dibujo es perfecto para presentar en la web comics e ilustraciones, así que el diseño representa visual y creativamente la naturaleza del sitio. En el caso de Demain J´arrete, el sitio entero tiene un estil gráfico de “dibujo al carbón”, empezando desde el degradado del fondo hasta las línea irregulares que contienen el diseño y el menú de navegación.

Nature Shop

http://www.natureshop.co.nz/

Agregando un par de bocetos detallados en una forma aparentemente casual, puede dar ese toque especial creativo a un sitio mínimamente esencial. El resultado, visible por ejemplo en el sitio Nature Shop, es extremadamente agradable.

Ready to Market

http://www.readytomarket.net/

El diseño de Ready to Market es un ejemplo de cómo mezclar un estilo moderno con algunos detalles de comics pueden dar un nuevo y estimulante resultado.

Cou Cou Shop

http://www.coucoushop.ch/

Cou Cou Shop es un sitio muy agradable para ver. Uno de los elementos más particulares del diseño que lo hacen resaltar es sin duda el pie del sitio, que muestra un paisaje de Suiza. Incluso el dibujo de la bolsa de diferentes ángulos es un detalle muy original..

Upside Down-Town

http://upsidedowntown.me/

Colorido, inusual y caprichoso: el sitio del centro de aprendizaje Upside-Down, invierte mucha originalidad en el estilo de dibujo. Cada elemento del diseño, especialmente en los títulos, puntos para la eficacia visual de dibujos, bocetos y colores que resaltan gráficamente y en forma agradable el mundo de los niños.

Conclusión

Vemos como el proceso de dibujo puede ayudarnos a procesar ideas en una forma creativa y a la misma vez, como algunos dibujos pueden ofrecernos diferentes y originales perspectivas de nuestros diseños. Hacer del dibujo un hábito cuando empiezas a trabajar en un nuevo proyecto de diseño puede venir a ser muy útil también en otros campos como en la redacción. Y al mismo tiempo desarrollas una flexibilidad de la mente que se vuelve útil en tu trabajo. Por lo tanto, para concluir: ¡apaga la computadora y consigue un lápiz y un papel!

Yo termino compartiendo contigo dos de mis bocetos personales: un boceto de mi portafolio actual y las primeras ideas que puse para este artículo durante un viaje en tren verdaderamente aburrido.

¡Ahora es tu turno, quiero ver tus bocetos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.