Soy diseñador web. En serio, no lo digo por impresionar. Somos una especie exótica. Pasamos las mismas horas que el resto de diseñadores delante del ordenador, nos gustan las cosas bonitas y a veces nos sentimos un poco solos cuando otros diseñadores cercanos no nos comprenden o cuando percibimos su impotencia al pedirles ayuda con una nueva web.
En la selva de los creativos se encontrará usted con dos tipos de especies. No son fáciles de fotografiar porque pasan bastante tiempo escondidos en sus madrigueras, se dice que pueden gruñir un poco cuando ven invadida su actividad cotidiana por visitas repentinas pero son en general gente entrañable y cercana al salir al mundo exterior. Sin más dilación, los presentamos:
- El diseñador analógico, especialista en papel. Con un papel de textura agradable y utilizando algunas tintas especiales puede hacer de unas tarjetas de visita de empresa una experiencia sensorial. Aunque vive conectado a su iPad e iPhone siente que la web no es para él y mira con cierto desdén a los diseñadores web, que son un poco freaks. Montañas de publicaciones bonitas pueblan su mesa de trabajo y las estanterías de su librería. Aunque las compró en un impulso de conexión creativa todavía no ha conseguido encontrar algo de tiempo libre para leerlas, si es que dicen algo interesante.
- El diseñador digital, especialista en pantallas. No disimula su admiración por los trabajos de la especie tradicional, aunque hace tiempo que ya no compra, todo está en Internet. No lo dice, pero se siente desplazado. Piensa aquello de «antes era como vosotros» pero el entorno le llevado a una especialización de la que es difícil salir. Al igual que la evolución de la especie hizo que las jirafas fueran alargando su cuello para llegar a copas más altas de los árboles el ha tenido que digitalizarse porque a ras de suelo hay poca comida y un poco de hostilidad. Vive delante de una pantalla (o varias, a veces a la vez), y no disimula su emoción desbordante ante una web que no sigue las reglas reticulares o que cuenta con algún efecto javascript elegante.
Mundos diferentes pero, sin duda, los unos disfrutan de la compañía de los otros. Se pueden percibir reflejos del comportamiento de miembros de una especie en la otra. Al caer el día es posible toparse con ellos compartiendo música y ambiente en bares de aspecto descuidado pero milimétricamente diseñados.
Los tiempos cambian, y dentro de esa tendencia globalizadora cada vez es más común encontrar diseñadores web analógicos y diseñadores clásicos digitales. Al primer tipo queremos dedicar esta entrada. Es frecuente que cada vez más colegas sientan curiosidad por el diseño web o el diseño de aplicaciones. Y la pregunta que más se hace es:
¿Cómo se diseña una web?
Con un poco de formación y paciencia es posible convertirse en diseñador web auténtico. Es normal experimentar algunos miedos al principio, pero queremos ayudarte a hacerlos desaparecer deshaciendo algunos mitos.
Diseñar una web no es «hacer una web»
Seguro que te suenan algunos conceptos espaciales como HTML, CSS, PHP, Javascript. Algunos posiblemente hayan formado parte de tus pesadillas de estudiante. Pues hay una buena noticia, la inmensa mayoría de los diseñadores no tienen que trabajar programando ni maquetando webs en su vida diaria. Es parte de la rutina del desarrollador (una especie diferente, entrañable y a veces un poco huraña, aunque digna de admiración) y sin duda hará un gran trabajo que te ahorrará tiempo y dinero.
Sin embargo, no pienses que esa formación no sirve para nada. Intuir que una animación o un efecto en el diseño de una web puede ser un javascript o que un line-height te puede ayudar a aumentar el interlineado pueden ser muy útiles a la hora de diseñar. Además el desarrollador con el que trabajes se sentirá un poco más comprendido. Y hay que cuidarle.
Disfruta de la web
Este requisito es indispensable. Sólo se puede trabajar en lo que se disfruta. Y la web, que tiene las cosas buenas del diseño gráfico y de la interacción digital son un entorno estupendo para disfrutar.
Hoy en día se pueden hacer cosas estupendas. Y los diseñadores astronautas pasamos mucho tiempo inspirándonos en nuestra nave espacial en páginas como esta.
Muy pronto podrás hacer trabajos de calidad como esos. No te desanimes.
Retícula, retícula, retícula
Si las retículas se llevan bien con el diseño tradicional, en diseño web las retículas (grid) son todavía más importantes, ya que pueden ser una gran herramienta para simplificar nuestros esfuerzos en diseño y desarrollo. Son algo así como el cuadro de mandos de nuestra nave.
Desde hace años se han popularizado algunos sistemas de retículas de los que el más popular hoy es sin duda Bootstrap. En esencia es un sistema compuesto por una retícula que divide el espacio de diseño en 12 columnas, cada una de ellas con un margen izquierdo y otro derecho, sobre las que se disponen los elementos de nuestro diseño.
Puedes descargar un kit de plantillas en PSD en este enlace:
Diseño responsivo
Con la constante evolución de la tecnología y las conexiones móviles cada vez es más habitual utilizar el teléfono o la tablet como un dispositivo más de navegación. Al principio de los tiempos lo común era planificar una versión de escritorio (para el ordenador) y otra versión móvil. Al acceder a la web un código determinaba desde dónde nos conectábamos y nos remitía automáticamente a una de las dos versiones de la web.
Hoy hablamos menos de versiones y más de diseño responsivo. Response singnifica «respuesta» y precisamente eso es lo que hace la web. Si, por ejemplo, tomas la ventana del navegador y haces más pequeña la ventana de esta web verás como los elementos cambian su disposición para mantener una visualización óptima sin que tengas que perder legibilidad ni contenidos. El diseño responsivo hace disminuir notablemente el porcentaje de gruñidos del usuario de la web y desciende los niveles de tasa de rebote de nuestro sitio. Pero esta es otra historia.
En la teoría el sistema determina el ancho de nuestro navegador, o nuestro dispositivo de conexión, y en función de ello determina que utilicemos una hoja de estilo (CSS) u otra. Como regla general se utilizan 3, con esta distribución.
¿Qué significa esto para nosotros? Simplemente que una vez que hayamos diseñado la primera versión de la web, tendremos que hacer dos diseños más, con dos resoluciones diferentes (¿todavía no has descargado las plantillas?). La parte técnica, como siempre, para nuestro desarrollador.
Programas de diseño web
Durante muchos años el programa más popular de diseño web fue Macromedia Fireworks. Aunque todavía se utiliza en países como España, donde somos así de hypsters, la mayoría de los diseñadores de bien utiliza Adobe Photoshop. Cada nueva versión del programa ofrece más herramientas que facilitan el diseño web desde una aplicación que originalmente se pensó para el retoque fotográfico. El requisito básico de Photoshop es el orden. Si puedes organizar todo en carpetas, no será fácil perderse.
Seguramente tengas acceso a programas como Adobe InDesign o Adobe Illustrator. Son programas muy útiles, pero no están pensados para web. La gestión de los píxeles en Illustrator es pésima y las posibilidades de InDesign son demasiado limitadas para nuestros fines. Cada vez hay más aplicaciones creadas por desarrolladores independientes con mejor pinta. Un ejemplo de ello podría ser Sketch, merece la pena echarle un vistazo.
Si aspiras a trabajar como diseñador por cuenta ajena, la apuesta más clara es Photoshop. Un poco más complicado al principio, y muy útil después.
Si has llegado hasta aquí es que todavía te han quedado ganas de convertirte en diseñador digital. Esperamos haber podido ayudaros. Y si no, cuando necesites a uno, ya sabes dónde estamos 😉
