Herramientas actuales para diseño web

por Natalia Ventre el 29/05/2013 ・ podés leerlo en 5 minutos ・

Photoshop nunca fue una herramienta idónea para diseñar sitios web y mucho menos ahora, para diseño web adaptable, entonces ¿diseñar en el navegador es la única opción? Si el código es una barrera a tu creatividad podés usar las siguientes herramientas de Adobe y otros desarrolladores para diseñar sitios web en un entorno visual.

Adobe are doing amazing stuff in HTML5 right now but lot of people don't give them credit for it because it's Adobe, those are the guys that gave us Flash. Christian Heilmann – Firefox OS and the open Mobile Web en Hanselminutes Podcast

(Adobe está haciendo cosas geniales en HTML5, pero nadie les da crédito porque son la gente que nos dió Flash.)

Adobe Edge Animate CC

Edge Animate sirve para animar texto y gráficos o agregar movimiento e interactividad a páginas web existentes.

Captura de pantalla de Adobe Edge Animate CC

Beneficio

Podés crear animaciones basadas en HTML, CSS y JavaScript1 para Chrome, Firefox, Internet Explorer 9+, Safari, Android, iOS y Apple iBooks en un entorno visual y además podés ver y editar el código generado dentro de la aplicación o con cualquier editor de código. Incluye una librería de snippets para acciones comunes.

Uso

Es una aplicación intuitiva, al estilo de Flash o After Effects, que permite trabajar con símbolos y definir keyframes en una línea de tiempo. Tiene unos tutoriales en español dentro de la propia aplicación que te ayudan a familiarizarte con la interfaz y aprender su uso básico.

Adobe Edge Reflow CC

Edge Reflow sirve para diseñar sitios web adaptables. Podés previsualizar el diseño en Chrome o en un dispositivo móvil conectado a través de Adobe Edge Inspect.

Captura de pantalla de Adobe Edge Reflow CC

Beneficio

Reflow es una herramienta interesante para quienes recién empiezan con RWD (diseño web adaptable)2 y para las agencias que dividen el trabajo en diseño y desarrollo front-end porque el diseñador puede hacer todos los ajustes que considere necesarios y comunicárselos claramente al desarrollador en una comp responsive.

Uso

Podés diseñar mobile o desktop first insertando cajas (divs), texto e imágenes y dándoles estilo con el editor visual de CSS de la barra lateral. Las propiedades están convenientemente organizadas en maquetación (por ej. tamaño, márgenes, posición, etc.) y estilo visual (por ej. fondo, borde, sombra, etc.). Podés cambiar el tamaño del área de trabajo y definir breakpoints donde tu diseño lo necesite. No tiene breakpoints por defecto. Reflow representa visualmente los breakpoints con colores sobre la regla horizontal. Podés definir si son para máximo o mínimo y agregar una etiqueta de texto para identificarlos.

Divshot

Divshot es una aplicación web para crear visualmente interfaces para aplicaciones basadas en el framework Bootstrap, Foundation o Ratchet. Te permite editar el código HTML, CSS y JavaScript o exportarlo.

Captura de pantalla de Divshot

Beneficio

Para Bootstrap podés elegir entre algunos temas para cambiar la fuente, los colores, etc. pero a través del editor visual no podés modificar directamente las variables. Lo que podés hacer es muy limitado, así que el código es impecable.

Uso

Seleccionás el framework y de la lista de componentes arrastrás y soltás a la página. Haciendo click en cada elemento podés asignarle distintas clases del framework (por ej. los tipos de botones disponibles). En el menú superior podés cambiar entre la vista fluida y los dispositivos (celular, tableta, escritorio, HD).

Typecast

Typecast es la herramienta más específica de la lista. Sirve para elegir, comparar y setear tipografía.

Captura de pantalla de Typecast

Beneficio

Para tu contenido podés probar fuentes de Fontdeck, Google web fonts, Fonts.com, Typekit y Webtype. Las estás viendo directamente en el navegador, así que no te vas a llevar sorpresas. Una vez que terminás el diseño, Typecast te genera una guía de estilo con las fuentes usadas (y en qué servicio están disponibles), el código CSS asociado(por ej. font-size, font-weight) y los colores usados.

Uso

Podés empezar con una plantilla o un documento en blanco. Elegís la fuente, seleccionás el tamaño del texto, interlineado (line-height) márgenes, padding, colores, etc. apropiados para tu contenido y podés comparar varias opciones lado a lado hasta encontrar la combinación indicada. Es fácil de usar y en el escritorio hay video-tutoriales.

Conclusión

Edge Animate, Edge Reflow, Divshot y Typecast son 4 herramientas actuales para diseño web. Son muy específicas y lo poco que hacen, lo hacen bien. Se adaptan al proceso creativo del diseñador porque le permiten experimentar libremente y en el trabajo en equipo le ahorran tiempo al maquetador HTML/CSS, porque puede obtener rápidamente los valores exactos para las media queries, tipografía, etc. sin necesidad de andar buscándolos en capas de Photoshop.


  1. Edge Animate no soporta la creación de canvas, video ni audio, pero puede trabajar con archivos HTML que tengan esas etiquetas.

  2. En Mayo del 2010 Ethan Marcotte publicó Responsive Web Design en A List Apart. Adobe presentó Reflow en Febrero del 2013. Para los que estuvieron haciendo diseño web responsive en esos 3 años, no sé si en su versión actual Reflow les va a aportar algo.