Ahora que hemos hecho una lista de las ventajas de diseñar en el navegador, es el momento de repasar las herramientas que tenemos a nuestra disposición para poder trabajar de ésta manera.

Nota: Los pasos y las herramientas de las que hablaré a continuación son los que uso yo personalmente. Igual que esta práctica dependerá mucho del tipo de proyecto en el que se esté trabajando, las herramientas también variarán dependiendo de las necesidades en cada momento. Lo interesante es saber lo que tenemos a nuestra disposición y probar a usarlo en nuestro flujo de trabajo.

1. Editor de texto

Un editor de texto para ir escribiendo nuestro código. Hay muchísimos a nuestra disposición pero yo hablaré de tres.

Sublime Text

Sublime es ligero pero potente y además permite un gran nivel de personalización. Puedes vitaminarlo con infinidad de plugins, como Emmet, que agiliza muchísimo el proceso de escritura, o ColorHighlighter, que ofrece varias opciones para previsualizar los colores que vamos declarando en nuestros estilos.

Emmet facilita mucho la escritura en nuestros proyectos.

Atom

Atom es relativamente nuevo pero ya se ha hecho un hueco importante en el ecosistema de editores de texto. Es totalmente customizable y la comunidad que se ha creado a su alrededor se ha implicado desde el principio en desarrollar numerosos plugins y temas que extienden sus funcionalidades. Como plus, su video de presentación es muy top.

Brackets

Aunque no ha llegado a revolucionar el campo, Brackets puede ser un programa interesante si os sentís intimidados por el nivel de configuración que requieren Sublime o Atom. Tiene una interfaz muy amigable y detalles interesantes como la posibilidad de ver los cambios que vas aplicando en tiempo real o poder acceder a los estilos de un elemento seleccionándolo en el HTML, sin tener que cambiar a la hoja de estilos.

Brackets permite editar estilos “inline” directamente desde HTML.

2. Sistema de retículas

Además de un buen esqueleto construido con un HTML que sea semántico y accesible, nuestro diseño tiene que tener una estructura sólida sobre la que iremos disponiendo todos los elementos. Para esto usaremos retículas o grids.
Personalmente, para los proyectos que yo he ido haciendo con este sistema de trabajo, he preferido crearme directamente la retícula desde cero ajustándola a mis necesidades, pero para los que no tienen tiempo o ganas de hacérsela ellos mismos, he aquí varias opciones.

Gridset

Gridset permite crear nuestro propio sistema de retículas a nuestro gusto de una manera muy similar a cómo se haría en programas como Photoshop o Sketch, para después convertir esa retícula en un framework totalmente documentado y listo para usar en nuestro código. Una opción muy interesante si queréis tener un control total sobre vuestra retícula.

Frameworks

Si no os llama lo de crearos vuestra propia retícula base desde cero, siempre existen los frameworks que vienen ya empaquetados y preparados para trabajar con ellos. Los más conocidos son Bootstrap o Foundation, de los que no hablaré aquí porque creo que son ampliamente conocidos por todos. Sin embargo, si me gustaría señalar uno que recomiendo más para la tarea que nos ocupa.

Skeleton

Skeleton quizá se conoce menos por no tener tantas características, pero precisamente por eso lo veo mejor opción para prototipar en el navegador, ya que lo que buscamos es algo ligero y sencillo de usar, que nos permita ponernos a trabajar muy rápido, sin tener que perder el tiempo aprendiendo a usar frameworks con muchas funcionalidades que probablemente después ni siquiera lleguemos a utilizar. Skeleton viene con lo básico; una retícula, una escala tipográfica, botones, formularios, listas, tablas y unos cuantos media queries ya declarados, lo justo y necesario para empezar a estructurar nuestros contenidos y hacer cambios y ajustes rápidos.

3. Tipografías

Una de las cosas que a priori puede parecer más complicado a la hora de dejar los software de diseño a un lado, es cómo elegir las tipografías que querremos usar en nuestro proyecto. Como bien sabemos, el diseño web es 95% tipografía así que este es un tema de vital importancia para nuestro diseño. Será una vez que hayamos elegido la tipo adecuada cuando tengamos una mejor visión del tamaño que ésta debe tener, lo que nos llevará a decidir el ancho de nuestro body text y, seguidamente, el interlineado. Todos son conceptos relacionados entre sí que tendremos que tener en cuenta y no podemos dejar al azar, así que precisamos de una buena herramienta que nos permita previsualizar y hacer pruebas sin tener que empezar a descargarnos fuentes, instalarlas, meterlas en Photoshop e ir probándolas.

Typecast

Para todo lo anterior, a día de hoy no conozco mejor herramienta que Typecast. Typecast te permite probar fuentes de plataformas como Google Fonts, Typekit, MyFonts o FontDeck directamente en el navegador, dimensionarlas en px, ems o porcentajes o elegir el interlineado y el ancho de tu diseño. Además, te permite realizar pequeños cambios en la estructura del diseño para tener una mejor idea de cómo se comportaría la fuente elegida en diferentes escenarios; flotar elementos, añadir efectos de texto, etc. Una vez terminado, puedes compartir el link y descargarte los archivos HTML y CSS. En conclusión, una joya.

4. Vitaminar nuestro CSS

Si queremos trabajar de manera rápida, eficaz y feliz, es muy recomendable darle superpoderes a nuestro CSS con pre y postprocesadores

Preprocesadores: SASS y Less

Los preprocesadores como Sass y Less nos permitirán tener un código CSS mucho más sencillo de escribir, editar y mantener, aportándole características extras que lo hacen mucho más poderoso de lo que es. Esto nos ayudará a trabajar mucho más rápido y, si lo usamos con responsabilidad, a tener un mayor control sobre nuestro código.

Postprocesadores: PostCSS

Los postprocesadores como PostCSS terminarán dándole una capa de procesado final a nuestro CSS, por ejemplo añadiendo automáticamente prefijos vendor para que no tengamos que hacerlo nosotros, convirtiendo automáticamente dimensiones de píxeles a rem o minificando nuestra hoja de estilos para que sea mucho más ligera, mejorando así la carga de la página. PostCSS nos permite elegir diferentes módulos que automatizarán y facilitarán nuestra tarea, permitiéndonos centrarnos exclusivamente en diseñar y olvidarnos de todo lo demás.

Con nuestro entorno de trabajo ya preparado, nuestro programa de diseño de cabecera cerrado y el navegador abierto, es hora de ponernos a trabajar, empezar a escribir y a aplicar estilos a nuestro contenido.

Como nuestro canvas se ha traslado al navegador, su medio natural, será directamente ahí dónde haremos los primeros testeos y ajustes. Esto lo haremos gracias a las herramientas para desarrolladores que incorporan los navegadores más comunes como Chrome o Firefox. Ambas nos permiten inspeccionar elementos y cambiar sus propiedades mientras vemos estos cambios en tiempo real. Podremos cambiar aspectos del diseño puramente visual como colores o tamaños de fuentes pero también elementos más conflictivos como márgenes, dimensiones o posicionamientos. Será básicamente nuestro terreno de juego, dónde podremos probar sin miedo a romper nada (los cambios que hagamos desaparecerán en cuanto refresquemos la página) para que, una vez satisfechos, llevemos esos ajustes a nuestras hojas de estilo.

Conclusión

Si bien es cierto que tiene que pasar tiempo para que podamos hablar de diseñar enteramente en el navegador, también es verdad que es una forma de trabajar que, en determinadas situaciones, resulta mucho más eficaz y orgánica que diseñar en Sketch, Photoshop o Illustrator. Ahora mismo tenemos las herramientas a nuestra disposición para ponerla en práctica y, aunque a lo mejor es algo complicado de implementar en proyectos muy grandes y ya empezados, recomiendo empezar a probarla con proyectos personales o pequeños flujos de interacción porque en esos casos nos ayudará a eliminar fricciones innecesarias y veréis que es un proceso muy satisfactorio