Diseña páginas web que los desarrolladores web no detesten

Para la mejor precisión visual, cada proyecto de diseño de páginas web requiere bosquejos (mockups) totalmente compuestos para cada sección e interfaz. Con límites técnicos, estos bosquejos deben actuar como documentos de diseño visual para ser discutidos con los desarrolladores web —no es solo que pases tu trabajo a otra persona para se las arregle como pueda.

Las imágenes, las texturas, la tipografía y otras exquisiteces deben ser transferidas de unos simples gráficos a una interfaz viva. Solo porque sabes cómo diseñar buenos bosquejos no significa que comprendas cómo diseñar para desarrolladores web. En este artículo, te daremos consejos para crear bosquejos que se sean fáciles para trabajar durante el proceso de desarrollo web.

Después de todo, si deseas que tu proyecto avance, siempre debes asegurar que tus trabajos o arte digital sean claramente entendidos por lo desarrolladores, quienes piensan en términos de infraestructura y sistemas.

Planifica las limitaciones

El primer paso para una implementación adecuada es predecir las limitaciones UI que puedan (por lo general lo hacen) surgir durante el desarrollo web.

En el mundo de diseño de páginas web, parece que cualquier idea es posible de codificar. Las especificaciones HTML5/CSS3 ciertamente han progresado, pero algunas ideas siguen siendo muy difíciles de plasmar con una compatibilidad completa.

Al colaborar con desarrolladores en la etapa de infraestructura/prototipo, siempre ten en mente las limitaciones de HTML5, CSS3 o tu lenguaje de programación de elección. De ese modo sabrás qué diseñar y cómo diseñar ideas visualmente para que los desarrolladores puedan construir la interfaz.

Ten una lista cerca a tu escritorio (o en Google Docs) con una serie de vallas y obstáculos e ideas de interfaces que debes evitar. Aunque pueda ser posible agregar estas funciones en el futuro, debes concentrarte en priorizar los elementos de interfaz que son más viables. Mientras progresas con tu diseño web, revisa esta lista semanalmente junto con los desarrolladores de tu equipo, de modo que no te pierdas en un diseño de gran fidelidad que, en realidad, es una pesadilla técnica.

Ahora que ya tienes un buen punto de partida para un diseño web viable, examinemos algunos otros métodos que debes considerar.

Expande las interacciones

Cuando se trata de explorar interacciones, la etapa de creación de prototipos es la plataforma más eficiente para discutir la viabilidad, Aparte de codificar tus diseños, los prototipos son mucho más efectivos que simplemente describir o anotar estructuras y bosquejos planas.

Aun los borradores de prototipos de baja fidelidad (también conocidos como estructuras interactivas) pueden mostrar a los desarrolladores la estructura general del contenido y las dependencias entre el contenido mientras los usuarios dan clic a través de su experiencia. Pese a que los detalles no están para nada pulidos, los desarrolladores web pueden brindar retroalimentación sobre la infraestructura del diseño.

Por ejemplo, tal vez eres muy decidido en usar un scroll infinito para el diseño de una página web, pero, tal vez, un patrón UI de tarjetas pueda ser mejor en cuanto a la usabilidad y tiempos de carga. A un nivel más disimulado, los desarrolladores también pueden brindar recomendaciones específicas para dispositivos. Tu encabezados de navegación pueden funcionar de la mejor forma en el prototipo, pero pueden estar completamente ocultos por la barra de dirección en ciertos navegadores y dispositivos móviles. Simplemente no podrás descubrir estos contratiempos (algunos de ellos pueden requerir una completa reforma) a menos que dejes que los desarrolladores jueguen con tu prototipo.

2. Crea planes para navegadores

El campo del diseño de páginas web es muy distinto comparada al del diseño de aplicaciones móviles.

Las aplicaciones de Android y iOS funcionan en un solo sistema operativo con varias resoluciones de pantalla; sin embargo, las páginas web presentar muchas más variables —deben funcionar el diferentes resoluciones de pantalla en diferentes sistemas operativos, en diferentes navegadores y también con diferentes dispositivos.

El proceso de diseñar una interfaz de página web es similar a diseñar una interfaz de aplicación móvil, pero el desarrollo es bastante diferente. Cuando diseñas un bosquejo, debes considerar los inconvenientes y retrasos de cada función.

Esto es especialmente cierto en las más recientes técnicas CSS3 que no son admitidas en todos los navegadores. Aunque Photoshop y la mayoría de programas de diseño te permitan insertar notas junto a tu diseño, no existe un substituto para estas técnicas.

Abajo encontrarás algunos scripts de recursos gratis para ayudarte con la compatibilidad de navegadores. Estos recursos tal vez no puedan ayudarte directamente al momento de diseñar, pero son un punto importante de conversación cuando colabores con desarrolladores web.

• Modernizr. En el mundo de la web, Modernizr es un buen recurso para cualquier proyecto. Es una biblioteca personalizable para compatibilidad HTML5/CSS3 con navegadores cruzados. Usa la página de descarga para personalizar tus propias funciones o solo obtén toda la biblioteca desde GitHub.
• Fallback.js. Esta pequeña biblioteca JavaScript fue diseñada para controlar cada método de último recurso y biblioteca. Al centralizar todos tus scripts, es más fácil revisar qué archivos no están funcionando y brindar soluciones alternas.
• Selectivizr. Selectivizr es similar a Modernizr, pero se concentra más en selectores CSS. Esta biblioteca JavaScript imita las pseudoclases CSS y sus selectores de atributos para mejorar la compatibilidad para versiones anteriores de Internet Explorer.
• Video.js. El video HTML5 está en el centro de atención, pero video en Flash sigue teniendo audiencia. Video.js hace que sea fácil integrar cualquier formato de video en un reproductor HTML5 con un plan B (Flash) para versiones antiguas de navegador.
• IE7.js. Las versiones antiguas de Internet Explorer dieron una buena lucha contra los estándares web comunes. IE7.js fuerza a los navegadores antiguos como IE6-IE8 a admitir métodos de generación comunes como colores PNGs transparentes y RGBa().
• Detect Mobile Browsers. Esto es tanto una biblioteca como un generador de códigos para la detección de dispositivos móviles. Encontrarás snippets en todos los lenguajes, desde ASP hasta jQuery para detectar un navegador móvil. Los desarrolladores pueden escoger ejecutar (o no) códigos para usuarios móviles basados en estos resultados.

Aun si no comprendes cómo funcionan estos scripts, debes mencionarlos a tus desarrolladores. En nuestra experiencia, los desarrolladores aprecian el gesto proactivo y no les importa invertir un poco de tiempo explicando los problemas de compatibilidad.

Lidiando con páginas y recursos alternos

Pese a que el diseño de página de inicio puede requerir el esfuerzo más grande porque es el portal hacia toda la página web, también necesitas aplicar la misma precisión a las páginas interiores.

En algunas empresas grandes, los jefes de proyectos solicitan bosquejos completos para cada sección de página debido a los estrictos procesos internos. En otras empresas, algunos desarrolladores pueden tener experiencia en diseño web, lo que les permite construir varias páginas similares desde un solo bosquejo (dándote más tiempo para trabajar en páginas únicas). Adapta el nivel de detalles de bosquejos dependiendo del protocolo de la empresa.

Ahora examinemos algunas de las consideraciones de desarrollo para los elementos de tu bosquejos,

Gráficos de páginas internas

Se requiere un agudo sentido diseño gráfico para diseñar buenos bosquejos.

Por ejemplo, incluso si dos páginas se distinguen solo por diferencias en sus íconos, la opción más segura es crear dos bosquejos separados para evitar cualquier confusión. La mayoría del tiempo verás que es más fácil crear páginas internas y luego exportar los íconos por separado. De este modo, los desarrolladores pueden acceder a las imágenes de los íconos por separado y a los diseños de páginas como material de referencia.

Antes de terminar tu diseño de bosquejo, aquí tienes una lista de lo que debes revisar:

• Los gráficos deben tener el tamaño exacto a cómo aparecerán.
• Estados de interacción Javascrip diferentes e ilustrados (ex: abrir menú despegable + estados cerrados). Incluso si se muestra en el prototipo, nunca es malo dejar un rastro de documentos.
• Estados de conectado y no conectado.
• Etiquetas de campos, botones e ingresos.
• Mensajes de error/éxito
• Incluye gráficos separados para todas las imágenes, incluyendo el ícono de favoritos (favicon), cargadores animados, fotos de página 404, etcétera.

En proyectos más grandes, recomendamos incluir un documento corto para notas del desarrollador. Solo asegúrate aclarar el bosquejo de referencia (y secciones de página) a las que pertenecen las notas.

2. Bosquejos responsive separados

Los bosquejos de aplicaciones para dispositivos móviles deben considerar las vistas panorámicas y vertical, pero las páginas web deben considerar cualquier vista en cualquier dimensión, desde smartphones hasta monitores de pantalla ancha.

Si tu diseño web debe ser responsive, entonces te recomendamos crear diferentes bosquejos para cada punto de ruptura y mostrar a los desarrolladores cómo se adapta el diseño.

Considera algunos de los siguientes cambios:

• ¿Los diseños de logos, gráficos y/o íconos cambian de tamaño o posición?
• ¿El tamaño de la fuente debe aumentar o disminuir para adaptarse a pantallas más pequeñas?
• ¿Las columnas de barra laterales descienden debajo del contenido principal o, tal vez, desaparecen por completo? ¿Qué sucede con el contenido del pie de página?

No existe respuesta correcta o incorrecta porque cada proyecto necesita ser visto de manera individual.

Cuando tengas dudas, el enfoque mobile first (primero los móviles) impulsado por Luke Wroblewski siempre es un buen punto de partida (una vez que hayas completado la investigación inicial de usuario). Diseña alrededor del contenido para el tamaño de pantalla más pequeño, luego sube la escala. Al diseñar con base en lo esencial, aseguras una experiencia de usuario más agradable.

Para preparar la transición del documento para el desarrollo, asegúrate de etiquetar tus bosquejos responsive apropiadamente. Los nombres de los archivos deben incluir el punto de ruptura responsive en píxeles junto con cualquier otro detalle importante (fecha de revisión, número de borrador, pantalla de retina, etcétera).

Tu objetivo debe ser diseñar para cada situación posible, de modo que el desarrollador no tenga que pensar.

Como siempre, si no estás seguro de cómo presentar algo, solo pregunta a los desarrolladores sobre el formato que prefieren. Mantén abiertas las líneas de comunicación para reducir los problemas y evitar la confusión.

Consejos de diseño para facilitar el desarrollo

Los programas de diseño digitales pueden venir en varios formas, desde Adobe Photoshop hasta Fireworks y el nuevo y popular SketchApp. A pesar de las diferencias en su capacidades, el diseño de bosquejo general sigue siendo relativamente uniforme en todas estas diferentes aplicaciones.

Los siguientes consejos están dirigidos para diseñadores que crean recursos de bosquejos para desarrolladores. Algunas de estas ideas son fáciles de pasar por alto en la superficie, pero hacen toda la diferencia cuando llega la hora de programar.

Mejores práctica de diseño de bosquejos

Dominar cualquier programa de diseño web toma tiempo, y cambiar tu flujo de trabajo puede ser abrumador, pero una vez que pongas en práctica estos consejos, se sentirán como una segunda naturaleza. Cuando diseñes páginas web considerando a los desarrolladores web, estos consejos facilitarán el trabajo de todos.

Aquí tienes algunas de las mejores prácticas que hemos aprendido con los años:

• Organizar y etiqueta tus capas. Los desarrolladores web no siempre sienten la necesidad de abrir tus archivos PSD/Sketch, pero los contenidos siempre deben estar organizados. Usa grupos de capas para clasificar capas similares juntas. Además, asigna un nombre reconocible a cada capa ya que los bosquejos son muy detallados y, usualmente, requieren mucha meticulosidad para encontrar exactamente lo que debe ser cambiado o extraído.
• Prepara un buen paquete de recursos. Recuerda que la preparación de recursos ahorra a todos mucho tiempo y estrés. Una vez que los bosquejos estén listos, exporta los gráficos, íconos, fotos y otros recursos en archivos separados. Los desarrolladores pueden no sentirse cómodos exportando archivos PNG/JPEG/SVG y es mucho más fácil si transfieres un trabajo ordenado.
• Usa herramientas de exportación dentro de la aplicación. En Photoshop, puedes exportar gráficos usando la herramienta sector o, manualmente, creando nuevos documentos. Sketch incluye sus propias opciones de exportación diseñadas especialmente para gráficos de interfaz. Organizar tus archivos de diseño no toma mucho trabajo y los desarrolladores lo apreciarán.
• Una imagen vale más que mil palabras. Si los elementos interactivos requieren visualización, intenta convertir tus archivos PSD/Sketch en prototipos con capas. Al hacer eso podrás ser capaz de mostrar animaciones e interacciones complicadas, dejando nada al riesgo de la imaginación.

2. Control de versiones para diseñadores

Cada desarrollador debe, al menos, saber acerca de los sistemas de control de versiones que son como archivos digitales que almacenan versiones previas de un script, base de datos o una página web completa. Aparte de organizar archivos, la versión de control es útil para restaurar cambios o comparar diferencias entre dos o más archivos.

Aunque el control de versión es usado más en programación, ha encontrado un espacio en la comunidad de diseño de páginas web. El control de versiones sigue siendo nuevo, pero existen algunos buenos recursos disponibles. Pixelapse es una aplicación de almacenamiento en línea para gestionar documentos de diseño en la nube. Y aunque Github es principalmente una plataforma de almacenamiento de códigos, desde hace poco admiten archivos PSD.

Ahora es posible que los diseñadores usen GitHub como su propio sistema de control de versiones para archivos PSD. La página es de código abierto y puede no ser una gran opción para proyectos privados, pero es una buena forma de practicar y aprender acerca del control de versiones.

Aquí tienes algunas alternativas para un control de versiones centrado en el diseño:

• Cornerstone. La aplicación Cornerstone es un cliente de subversión (Subversion) para Mac. Requiere de un ajuste inicial, pero puede ser bueno para trabajos localizados.
• PixelNovel. Adobe ha lanzado su propia plataforma de control de versiones llamada PixelNovel. También funciona en Subversion, pero es mucho menos técnico en su configuración. Tiene un plugin para Photoshop y permite compartir archivos entre varios usuarios.
• GitHub para archivos PDS. Como se menciona líneas arriba, GitHub admite diferentes PDS. Aunque estte puede ser un gran método para aprender GIT, la mayoría de repositorios de GitHub son gratis y abiertos para todos. Así que es genial para practicar, pero no para proyectos de empresas grandes.
• Kaleidoscope. Esta aplicación para este sistema operativo Mac OS X no ofrece un control de versiones tradicional, pero puede ser usado para comparar archivos. Kaleidoscope es excelente si no necesitas un archivo cronológico y solo necesitas comparar las diferencias entre archivos y/o carpetas.
• Pixelapse. La bastante popular plataforma de control de versiones Pixelapse es genial para cualquier diseñador. Tiene cuentas de recursos abiertos gratuitas y de paga que admiten a profesionales del diseño web autónomos y equipos grandes. Pixelapse funciona en todos los sistemas operativos e incluye un panel de información de proyecto para la colaboración de equipos.

Plugins de ayuda

Photoshop y Sketch admiten una gran cantidad de plugins para automatizar tareas y mejorar flujos de trabajo típicos. Pese a que Sketch fue creado desde cero para el diseño de páginas web, Photoshop tiene una selección más grandes de plugins simplemente porque es más antiguo y se concentra en un espectro más grande de tareas (edición de imágenes, trabajo impreso, diseño UI, etcétera).

Escogimos los siguientes plugins específicamente para diseñadores UI que crean interfaces desde cero. Estos plugins te ayudarán a lograr bosquejos perfectos con menos tiempo.

Plugins para Photoshop

• GuideGuide. Guías de configuración y cuadros basados en columnas y valores de píxeles.
• Cut&Slice Me. Corta y exporta gráficos a diferentes dispositivos como smartphones, tablets y computadoras.
• PNG Hat. Una forma más rápida de cortar y exportar bosquejos de Photoshop.
• CSS Hat. Exporta cualquier capa de Photoshop en código CSS.
• Renamy. Obtén las dimensiones y coordenadas exactas de cualquier gráfico en tus bosquejos.

Conclusión

La creación de bosquejos y prototipos son las últimas labores más importantes para el equipo de diseño antes de que los desarrolles web entren a tallar. Para mantener tu diseño web en buen camino durante la transición, ofrece todos los recursos posibles y clarifica todo.

Al diseñar bosquejos pensando en los desarrolladores web, te estarás dando una revisión constante. Definitivamente puede ser frustrante salir de tu propia rutina para pasar a un proceso más amigable con los desarrolladores web, pero cuando estás trabajando en proyectos de diseño web como parte de un equipo grande, es mejor comprometer tu proceso que tu diseño.

En Staff Creativa somos expertos en diseño de páginas web, y hemos sido la elección ideal para un gran número de empresas locales (revisa nuestro portafolio web). Si tienes en mente un proyecto web y buscas a una empresa que una a los profesionales necesarios para hacerlo realidad, no dudes en contactarnos!

Traducido y adaptado de The Next Web. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.