Maquetación web

Si quieres aprender a maquetar una página web, no dejes esta guía, explora los
contenidos de abajo para saber todo lo que necesitas.

Los artículos incluyen muchos ejemplos de código para que puedas usarlos en tu
web.

Optimizar páginas web para imprimir

Cuando el contenido ofrecido resulta interesante, el usuario puede querer
imprimirlo. Para ello es necesario que se optimice la página para su impresión.
Conceptos básicos de HTML
No te pierdas nuestra guía sobre los fundamentos de HTML, aprendiendo a utilizar
las etiquetas y elementos de este lenguaje de creación de páginas web.
¿Crear tu página web o contratar a un profesional?
Ahorrar tiempo o dinero, un dilema difícil de contestar de manera rápida. A
continuación, analizamos los distintos factores que nos ayudarán a determinar
cuál de éstas dos opciones es la mejor para nuestro negocio.
Tres herramientas para potenciar tu sitio web con Wix
En esta ocasión os explicamos 3 de las nuevas herramientas de Wix, que te van a
permitir crear contenido dinámico en tu web, mejorar el SEO o incluyo contratar los
servicios de otros profesionales especialistas en Wix.
La influencia de los Navegadores en Internet
Repaso a la historia de navegadores como Internet Explorer, Firefox, Google
Chrome o Safari, desde sus comienzos hasta la situación actual del mercado.
Posición de capas con CSS en la maquetación de páginas
web
Profundizamos en los temas de posicionamiento de capas para que el diseño
adquiera el formato deseado. Para ello se emplean atributos CSS, que permiten
ubicar las capas en el lugar y en la forma deseada.
La propiedad overflow de CSS en la maquetación de
páginas web
De gran utilidad y poco utilizada, la propiedad CSS2 “overflow” puede resultar de
gran utilidad en la maquetación de páginas web.

1
Uso de selectores CSS
Estudiamos el uso correcto de selectores, abarcando desde los selectores de tipo
básico, hasta pseudos electores, operadores y expresiones regulares.
¿Cómo darle un uso apropiado a CSS3?
CSS3 nos ha brindado muchas nuevas herramientas que nos permiten crear
grandes efectos, pero es muy probable que les estemos dando un enfoque
inadecuado, en este artículo tratamos de definir un uso correcto.
La propiedad float de CSS
Explora las múltiples posibilidades que ofrece para el diseño de páginas web el
uso correcto de la propiedad float al momento de aplicarse a los elementos que
forman parte en nuestro layout.
Métodos para centrar verticalmente con CSS
Ofrecemos diversas técnicas y ejemplos para centrar verticalmente el contenido
de una web mediante CSS.
Como estructurar un email con HTML
El correo electrónico es una de las herramientas más utilizadas en Internet, sin
embargo, muchos tienden a construirlos de manera errónea, para evitar eso en
este artículo explicamos cómo se debe estructurar un correo con HTML.
Herramientas de desarrollo de Mozilla Firefox: Firebug y
Web Developer Toolbar
Explicamos como usar las mejores herramientas de desarrollo de Firefox: Firebug
que se encuentra dentro de las herramientas indispensables para el desarrollo
web. Y Web Developer Toolbar, que es una extensión diseñada para brindar
herramienta de apoyo a los desarrolladores.
Como usar pseudo elementos CSS “:before” y “:after”
En este artículo damos a conocer los aspectos generales sobre el uso de los
pseudo elementos “:before” y “:after”, así como su implementación en CSS.
Utilización de la repetición y posición de fondos en la
maquetación de páginas web
Además de servir para dar la apariencia deseada, algunas propiedades de los
fondos pueden ser empleadas para la maquetación de las páginas web.

2
Tamaño, margen, relleno y bordes de capas con CSS y
HTML
Los conceptos de márgenes, relleno y bordes, sencillos en su naturaleza, son un
verdadero rompecabezas para los que se inician en la maquetación. En este
artículo damos una detallada explicación.
Compatibilidad de tu web con distintos navegadores
Podremos estar satisfechos si conseguimos que se vea igual de bien en los más
importantes, como Explorer, Firefox, Opera, Safari y Mozilla.
Cómo mejorar la velocidad de carga de una web
Explicamos algunas de las técnicas más utilizadas para optimizar el rendimiento
de un sitio web
Como crear listas con HTML y CSS
Las listas HTML representan uno de los principales medios para presentar
contenido en una página web, en este artículo estudiamos como agregarlas a
nuestro código y darles un estilo adecuado, además de dar muchos ejemplos
prácticos de su uso.
Como hacer layouts con HTML y CSS
Conoce los conceptos fundamentales de un buen layout: como “padding”, “border”
y “margin”, así como los distintos tipos de posicionamiento y estructuramos un
layout sencillo.
Guía de CSS para principiantes
Vemos conceptos básicos para maquetar páginas web con CSS. Guías que nos
ayudarán a crear hojas de estilo limpias y optimizadas.
Optimización de los archivos CSS
Cómo optimizar los archivos CSS para que pesen menos y no retarden la carga de
la página.
CSS avanzado: todo sobre la propiedad display
Os enseñamos todo el potencial de la propiedad display para maquetar tus
páginas web y formar las estructuras que necesites.
Cómo dar estilo a textos con CSS y HTML
Estudiamos las etiquetas HTML más importantes para dar formato a los textos de
una web, así como darles estilo a través de CSS. También las recomendaciones
generales para diseñar y estructurar buenos textos.

3
Optimizar y editar imágenes para páginas web
Edición y uso de los distintos tipos de imágenes en la web, así como su
optimización para que ocupen lo menos posible.
Crear formularios con XHTML y CSS
Guía completa sobre los formularios HTML y CSS. Aprende a crear este elemento
fundamental para la interacción con el usuario en nuestros sitios web.
CSS Media queries
En este artículo explicamos como adaptar nuestros sitios al tamaño de la ventana
del navegador y de los dispositivos mediante los “media queries” de CSS.
Estilo y estructura de enlaces con XHTML y CSS
En este artículo nos enfocamos en el estudio del Hipertexto (enlaces de texto),
definiendo como estructurarlos y darles un diseño estético.
CSS avanzado: las propiedades counter-reset y counter-
increment
Estas propiedades son de las de mayor complejidad en CSS, pero que pueden
resultar muy útiles para algunos tipos de trabajos, sobre todo en maquetación de
textos.
CSS avanzado: la propiedad “content”
Una de las propiedades menos conocidas de CSS 2.1, pero que tiene un potencial
enorme. En un futuro no muy lejano, cuando la mayoría de los navegadores
respeten los estándares, su uso seguramente se incrementará.
CSS avanzado: la propiedad “white-space”
Una propiedad poco utilizada, que permite al diseñador manejar los espacios en
blanco y los saltos de línea de los textos incluidos en el código HTML.
HTML – XHTML Doctype o versión del documento de una
página web
Antes de comenzar a hacer la página web en sí, tenemos que decirle al navegador
qué versión de HTML vamos a utilizar para que sepa interpretarlo correctamente.
Manejo de JavaScript con XHTML
El manejo de scripts es una parte fundamental para lograr un balance adecuado
en el frontend de nuestros sitios, en este artículo vemos como conjuntar XHTML y
Javascript.

4
Depuración de errores en códigos CSS
Encontrar los errores que se producen en los códigos CSS, es una de las tareas
más arduas que tienen los diseñadores. Aquí damos algunos consejos sobre
como hacerlo más sencillo.
En la actualidad CSS es un estándar, por lo que se encuentra totalmente aceptado
por todos los navegadores y la comunidad de diseñadores.

Gracias a eso ahora podemos manipular la posición de cada elemento HTML

mediante el uso de estilos.

Esto no sólo reduce dramáticamente el tamaño y peso de los sitios, si no que

representa un código más flexible, manejable y sobre todo entendible y fácil de
editar.

Historia de CSS y HTML

La aparición de las hojas de estilo en cascada significó un cambio radical en
la maquetación de páginas web. La aparición de los div (abreviatura de
divisiones) sustituyó y mejoró la maquetación hecha con tablas.

Las capas, reemplazaron a las tablas dotando a los diseñadores de páginas web
de una herramienta de mucha mayor flexibilidad que permite una mayor eficiencia
en el trabajo.

Mientras que, para realizar cambios en una serie de páginas, un diseñador debía
cambiar el código de todas ellas, con el empleo de las hojas de estilo solo debe
cambiar unas pocas líneas, sobre todo si ésta se encuentra en un archivo
separado del código HTML. 

¿Qué se necesita para maquetar un sitio web?

Iniciarse en la maquetación web implica necesariamente un proceso de
aprendizaje.

Todo diseñador web debe conocer al menos dos lenguajes de programación

web: HTML y CSS, que son indispensables y complementarios.
1. La primera tarea que se debe emprender, es aprender el lenguaje HTML,
para lo que recomendamos leer la guía que puedes encontrar en el
siguiente enlace: conceptos básicos de HTML.
2. Una vez que se han obtenido los conocimientos fundamentales de HTML, el
siguiente paso es aprender a utilizar CSS (Cascading Style
Sheets – Hojas de Estilo en Cascada).

5
CSS es un lenguaje que permite al diseñador web dar la apariencia visual desea a
sus páginas.

Con un correcto marcado HTML, puedes crear páginas muy diferentes usando tan
solo CSS.
Además, CSS permite mantener separados los contenidos de la presentación,
emplear el mismo código en varias páginas, modificar la presentación de la página
sin afectar a los contenidos y viceversa y da un mayor control al diseñador sobre
los estilos y formatos de sus páginas.

El lenguaje CSS es algo más difícil que HTML, pero a la vez es más divertido.
Llegar a tener un conocimiento avanzado sobre CSS requiere mucha experiencia
y tiempo, uno se da cuenta conforme va aprendiendo que en realidad le queda
mucho por entender y a veces el límite sólo lo pone la imaginación. Se pueden
hacer cosas increíbles sólo con CSS.

El aprendizaje del lenguaje CSS tiene una utilidad adicional, y es que puede

considerarse un paso intermedio antes de comenzar a estudiar otros lenguajes
más avanzados.

¿Qué es HTML?
El lenguaje HTML consta de una serie de comandos u órdenes que los
navegadores pueden interpretar, por lo que puede decirse que una página web es
un documento donde se escriben contenidos y una serie de instrucciones para
indicarle al navegador como debe mostrarlos.

A través del lenguaje HTML podemos comenzar los primeros pasos en la

maquetación web.

Tal como se describe en conceptos básicos sobre HTML, para comenzar a

realizar nuestras primeras prácticas solo es necesario emplear un editor de texto y
un navegador.

El lenguaje HTML está compuesto por etiquetas que no son más que

instrucciones que le indican al navegador qué hacer.
Algunas de estas etiquetas son instrucciones puntuales, por lo que se componen
de una sola instrucción o etiqueta, mientras que otras pueden tener una extensión
ilimitada, por lo que es necesario introducir una etiqueta de apertura y otra de
cierre, limitando la extensión de la instrucción.

Es aconsejable tener a mano (impreso o en el propio ordenador, como les resulte

más cómodo) un listado de las etiquetas HTML para realizar cuantas consultas
necesitemos.

6
¿Qué es CSS?
Al igual que el lenguaje HTML, el lenguaje CSS solo requiere el empleo de un
editor de texto simple y un navegador, si bien es cierto que resultan de mucha
utilidad algunos programas que están creados exclusivamente para crear hojas de
estilo.

HTML y CSS son lenguajes complementarios, ya que, a pesar de que pueden

realizarse páginas web sólo con HTML, esto no es lo más conveniente ni lo más
aconsejable, la presentación visual del sitio dejará mucho que desear.

El lenguaje CSS se emplea exclusivamente para definir como se va a presentar el

contenido de la página. Esto puede llevarse a cabo dentro del documento HTML,
dentro de cada etiqueta de ese documento o bien como parte de un archivo anexo
a la página web.

Mediante el empleo de CSS, se puede organizar la página disponiendo el lugar y

la extensión que ocupará cada elemento y el formato de los mismos e incluir
imágenes, videos.  y definir como se mostrarán cada uno de ellos.

La base de una web es HTML y CSS

CSS, junto con HTML, es la herramienta básica para la maquetación de páginas
web.

Sus capacidades para manejar los elementos artísticos y de formato permiten

hacer mejores diseño web de una manera simple y eficiente.

Y con la llegada de CSS3 el campo de posibilidades se ampliaron aún más,

haciendo la maquetación más flexible y optimizada, puesto que muchas veces nos
ahorramos el uso de imágenes para efectos como degradados, sombras o bordes
redondeados.

Tu habilidad para manejar con propiedad CSS y HTML crear la gran diferencia
entre un sitio normal y uno con el toque experto de creatividad que atrae al
visitante. Y además bien construido para brindar la mejor experiencia.
Desde que se creó CSS como la herramienta que iba a facilitar la tarea al
diseñador, se sospechaba que su crecimiento no iba a tener límites.

Es así que CSS3 está vigente desde hace mucho y ha se está trabajando en el
borrador de CSS4, con novedades que hacen todavía más accesible la
presentación elegante y profesional de tus páginas. Prácticamente, no hay
excusas. Todo depende de tu imaginación.

7
Otros lenguajes
En la medida que las exigencias del diseño van avanzando, se hará necesaria la
inclusión de otros lenguajes, como javascript, php, y otros, ya que con HTML y
CSS se consiguen páginas estáticas, donde el usuario se encuentra limitado a ver
o escuchar el contenido.

Algunas páginas web requieren que los usuarios interactúen, envíen datos, llenen
formularios, etc., lo que solo es posible incluyendo otros lenguajes como PHP.
Si bien es cierto que hoy en día la mayoría de páginas web funcionan gracias a
gestores de contenido (CMS), que son aplicaciones prefabricadas en las que la
parte de programación y diseño está ya creada por defecto, y normalmente se
personalizan/modifican para usarse.

Por ejemplo, este portal está creado bajo WordPress, que es la plataforma de

blogs más conocido actualmente.

El diseño es propio y gran parte de la programación que trae la aplicación está

modificada, pero el dinamismo del sitio y su complejidad no serían posibles sin el
uso de WordPress, y WordPress funciona con PHP y MySQL.

En este punto el maquetador puede plantearse dar el salto al desarrollo web, y

aprender estos lenguajes de programación, o bien puede comenzar a trabajar
mano a mano con programadores que tendrán muchos más conocimientos que él
en estos lenguajes, y dedicar todo ese valioso tiempo que emplearía en aprender
a programar a impulsar su negocio

8
 El Rol de bocetar en el proceso de diseño

Ya sea como una herramienta o habilidad, bocetar tiene su propio rol en

el proceso de diseño. Ese rol, por supuesto, variará dependiendo del
producto final que está siendo creado, del tamaño y el alcance del
proyecto, los estilos individuales de los diseñadores, la experiencia y el
flujo de trabajo, sin dejar de mencionar; las expectativas de los clientes.
Saber más acerca de cómo bocetar es útil en el proceso de diseño dentro
de las múltiples disciplinas de diseño.

El rol de bosquejar en las artes digitales variará dependiendo de si estás

creando sitios web, identidades, ilustraciones, conceptos de productos, u
otros diseños.  Una ilustración o un logo, por ejemplo, es probable que
necesite más bocetos que un sitio web.

Un enorme proyecto con un presupuesto del cliente muy significativo,

beneficiará dibujar a través de todo el proceso de diseño. Esto asegurará
que antes de la enorme cantidad de tiempo invertido en refinar una
solución, una dirección, esta se acordó con el cliente. Bocetar, se puede
empezar ligeramente, empezando con conceptos básicos. Luego, trabajar
en composiciones y diseños.  Después, se eligen esas direcciones, los
conceptos pueden adicionalmente ser refinados con bocetos detallados.

5 usos para bocetar en diseño

Hay múltiples usos para bocetar en el proceso de diseño.  A continuación,
esta una reseña de 5 categorías para su uso con ejemplos y enlaces.

1. Rápidos conceptos de desarrollo.

Bocetar, es una excelente manera de explorar conceptos.  Puedes

bocetar por una o, incluso, dos horas y trabajar en múltiples posibles

9
soluciones para el problema de diseño a mano. Esto es un paso esencial
en el proceso

de diseño.  Te ahorrará tiempo para trabajar a través de conceptos en

papel antes de ir a la computadora.  Si bien es posible construir bocetos
en el ordenador, no es tan rápido como bocetar múltiples conceptos en
papel.

En el artículo; Diseño de Bocetos de logotipos para bioTrekker, la

diseñadora Karley Barret, nos muestra su extenso uso de bocetos sin
refinar para desarrollar el diseño de un logotipo.  Ella explora más de 60
posibles soluciones antes de reducir los conceptos hasta apenas un
puñado de buenas ideas.  Es interesante ver como ella explora imagen de
iconos, tipografía, y diseño.

Como se puede apreciar, ella trabajo a través de múltiples ideas y buscó

la mejor presentación de esas ideas.  Debido a que ella hizo pequeños
bocetos, es capaz de trabajar rápidamente y generar una multitud de
ideas en un período de tiempo relativamente corto.

10
Por otra parte, los diseñadores de productos invierten muchísimo tiempo
elaborando bocetos. Si, por alguna razón, vas a diseñar el próximo etilo
de zapatillas deportivas, un mueble, bicicleta, etc., el hecho es que… la
idea no empieza en la computadora, ¡empieza sobre el papel!

11
James, escribió en el blog sobre Diseño de Bicicletas, que tenía que decir
lo siguiente respecto de la disciplina de bosquejar: “Poner las
ideas rápidamente sobre el papel, es la única manera de evaluarlas
paraver si vale la pena explorar más a fondo.  Los programas de
computadoras para renderizar y hacer paquetes de modelado 3D son
fabulosos, pero cuando se piensa sobre el papel con un buen lápiz
anticuado es siempre el lugar para empezar”. 2. Composición básica o
planos

Los bocetos, son, por excelencia, una manera rápida para crear la
composición básica de su ilustración. También son utilizados en el
diseño de los sitios web y en diseño gráfico para evaluar rápidamente.
Puedes hacer una serie de bocetos en miniatura, o puedes hacerlas en
grande. Siempre y cuando tus bocetos sean lo suficientemente buenos
que capturen los elementos necesarios, la habilidad para dibujar es
innecesario.

12
En el tutorial, Creando un buen collage de diseño estilo Vintage en
Photoshop, Fabio, describe cuán rápido hacer algunos bocetos antes de
ir a la computadora.  Como podrás ver abajo, captura la composición
básica como se muestra en la imagen que aparece a la izquierda en el
boceto. Ahora, compare el boceto a la imagen final en Photoshop a la
derecha.  Puedes ver que la composición básica funciono en el papel.  La
imagen de la mujer está representada por una figura de palillos en el
dibujo.  No requirió algo asombroso o, incluso, bueno. Sin embargo, las
habilidades de dibujo funcionaron en la composición antes de abrir
Photoshop. 

Creando un buen collage de diseño estilo Vintage en Photoshop

Diseño web desde cero, es un sitio web bien conocido que ofrece
consejos prácticos acerca de la construcción de sitios web.  En el
artículo, La guía completa de lo NO absurdo para Diseñar Sitios Web , el
autor tiene esto que decir sobre las composiciones de bocetos hechas a
mano: “El boceto elaborado rápidamente con un lápiz, sencillamente me
ayuda a grabar la imagen de lo que visualice en mi cabeza.  Luego, no la
olvido y puedo hacerlo rápidamente en Photoshop.  Encuentro que esta
manera de trabajar es mucho más eficiente y eficaz que empezar por
iniciar Photoshop”.  Como puedes ver en la imagen abajo, las habilidades

13
para dibujar no son necesarias para capturar, ya sea; la composición o el
diseño.  Al lado izquierdo está el boceto y a la derecha está el diseño
final.

La guía completa de lo NO absurdo para Diseñar Sitios Web

3. Comunicación de los Clientes y la Aprobación

Presentar miniaturas de bocetos o composiciones a los clientes,

potencialmente te garantizará ahorrarte una enorme cantidad de tiempo. 
Cuanto más detallado sea el proyecto, cuanto más cerca estarás de
conseguir la aprobación de tu cliente. Si vas a gastar horas en una
ilustración, antes que nada, deberás asegurarte de que el cliente está de
acuerdo con tu selección de diseño antes de proceder.  Obtener la
aprobación de las miniaturas de parte de los clientes es una parte en
común del proceso de ilustración.  Como también es un largo proyecto de
diseño de logo, así como otros proyectos de diseño.

La empresa SOS Factory, diseña, entre otras cosas, logos de mascotas. 

Su flujo de trabajo sigue una metodología similar a un libro de un estudio
de diseño de comics.  La persona que realiza el boceto, a menudo no es
la misma persona que hace el trabajo de línea. El diseñador, colorista y el

14
director de arte, se encargan de diferentes asignaciones.  Separan cada
rol en especialidades.

En este estudio, el que elabora los bocetos trabaja en los conceptos y las
correcciones del cliente con el director de arte y el diseñador. 
Posteriormente, el cliente aprueba el arte antes de avanzar a las
siguientes etapas de pintado y coloreado. Esto ahorra tiempo y le agrega
estabilidad a una idea antes de pasar hacia otras etapas más avanzadas
en los procesos de diseño.  El ejemplo abajo es un concepto que se trazó
basado en la comunicación inicial con el cliente.  Luego, este boceto se
envió al cliente para su aprobación o para solicitudes de cambios.  Una
vez que el boceto está terminado, el diseño pasa hacia la siguiente etapa
de pintar los trazos y entonces colorear el personaje.

Diseñando para los clientes.

En el artículo titulado; “Desde el boceto hasta la ilustración en vector”,

Bill de GoMedia, explica cómo desde el principio en el proceso consiguen
la aprobación del cliente.  Ellos envían una serie composiciones de

15
bocetos en bruto hacia el cliente antes de dibujar un boceto con más
detalles. Abajo a la izquierda puedes ver la que seleccionó el cliente. 

La que está a la derecha un poco más detallada está hecha antes de

hacerse en la computadora.

Desde el boceto hasta la ilustración en vector

4.  Exploración visual

Bosquejar, puede usarse como una actividad diaria para registrar y

explorar tus intereses.  También puede ser usada para explorar múltiples
opciones que pudieras tomar en un diseño en particular.

Sherrie Thai, por ejemplo, tiene un portafolio sobre el Coroflot.  Ella tiene
ahí una sección dedicada a Bocetos. Estos bocetos en particular, le
muestran exploraciones visuales en múltiples campos de diseño.  En el
área de bocetos de su portafolio, ella visualmente explora temas tales
como; patrones, identidades, y estilos de tatuajes.
16
Cuaderno de bocetos de Sherrie Thai

El libro de diseño de productos; Diseñando Bocetos, explica el proceso

completo de elaborar bocetos para diseño de productos.  Este ofrece
tutoriales y ejemplos. La imagen debajo de este párrafo, es un ejemplo
que muestra como un diseñador podría investigar un problema y luego
explorar soluciones potenciales.

17
 Capítulo dos: Investigando y explorando bocetos desde el libro Diseñando
Bocetos

5. Refinando las soluciones visuales

El proceso de crear un diseño o ilustración después en la etapa final

implica refinamiento. El concepto general y dirección de la pieza puede
funcionar de manera fabulosa, pero un elemento no.  A menudo, esto
puede se puede volver una situación difícil y se puede corregir en rondas
posteriores de bosquejar. Por supuesto, en algún punto un artista digital
se dirigirá hacia la computadora. . El proceso de dibujo, entonces avanza
hacia los borradores digitales.

En el artículo titulado, Un proyecto con un Ángel, inmediatamente

obtienes una idea de lo importante que fue bosquejar para este proyecto,
pero también como la perfección del artista se traslada a Photoshop.  En
algunos casos, el artista prefiere soluciones digitales como también,
nuevas correcciones del cliente son solicitadas.  Entonces el artista
decidirá cual medio conseguirá hacer el trabajo más rápido con respecto
a la fecha límite.

18
 Un proyecto con un Ángel

Desde el boceto hasta la ilustración en vector.

Conclusión

19
Quizá sientas el deseo de saltarte el proceso de bocetar e ir directo a
trabajar desde la computadora a través de la elaboración de bocetos
digitales. Y, no existe nada de malo en eso, especialmente para tu propio
trabajo experimental.  No hay ningún método rápido para explorar
múltiples soluciones visuales que bosquejar.  Así que trata de examinar
las ventajas de bosquejar en lo que respecta al proyecto en cuestión.

Dibujar a mano bocetos juega un importante papel en las artes digitales. 

Cuanto más grande es el proyecto, y más conceptos necesiten ver un
cliente, cuanto más bosquejar demostrará lo valioso que es en el proceso
de diseño. Considere usar bocetos para composiciones u opciones de
diseños en su próximo proyecto.  O anímese a hacer miniaturas a mano
alzada de bocetos antes de iniciar Photoshop

Bocetos: ¡Cómo un simple lápiz y papel pueden

transformar tus diseños web!
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

20
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? —, darles a nuestros diseños un toque fresco y original.

Bocetar como parte del Proceso de Planeación

21
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.

22
 “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.
23
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).

24
 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

25
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.

26
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.

27