Diseño web: Seis consejos para que los diseñadores trabajen mejor con los desarrolladores web

¿Cómo los diseñadores de experiencia de usuario pueden asegurar que su visión se traduzca en una página web que funcione? Aquí tienes algunos consejos.

No siempre es fácil ver bosquejos desde la perspectiva de un desarrollador web, pero siempre es útil.

Tu labor como profesional de diseño web es crear interfaces útiles, pero también explicar cómo estas funcionan a las personas que las construyen. Este artículo explicará cómo diseñar bosquejos colaborativos que lo desarrolladores web puedan entender.

1. Aprende algo de desarrollo web

No necesitas aprender lenguajes de programación que nunca usarás, pero un diseñador web con un conocimiento básico de desarrollo web siempre tendrá una ventaja innata.

Un arquitecto conoce las propiedades relevantes de diferentes tipos de materiales, incluso si nunca han martillado un clavo. Eso es lo que el lenguaje de programación es para un diseñador web: materiales que dan vida a sus diseños.

Los diseñadores web no necesitan saber con exactitud cómo escribir un lenguaje de programación, pero tener el conocimiento básico les permitirá tener el lenguaje en consideración, lo que significa diseños web que puedan ser transcritos en códigos.

Por ejemplo, si un diseñador conoce el modelo de cajas CSS, serán capaces de adaptar bosquejos para que los desarrolladores los comprendan.

El desarrollo web es una práctica dedicada y aprenderlo toma tiempo y esfuerzo. Aprende los principios básicos y, si piensas que son interesantes o útiles, siempre podrás profundizar tus conocimientos en el futuro.

2. Mira tus bosquejos de la forma cómo los desarrolladores lo harían

El objetivo es comprender los bosquejos desde la perspectiva de un desarrollador web.

Cuando colocas un campo de entrada en el bosquejo, deberías ser consciente de que este campo está creado con una etiqueta HTML y estilizado con CSS. No necesitas saber cómo escribir estos códigos, pero vale la pena tener una idea de cómo son creados.

Pregunta a los mismos desarrolladores si tienen alguna consulta acerca de aspectos más complejos. Este es el núcleo de la colaboración: te ayudará a entender otros campos, fortalecer tu relación y crear un mejor producto.

Considera los siguientes principios como requisitos básicos de lo que debes saber, y los puedes usar como puntos de conversación durante tu siguiente discusión con el desarrollador:

• Cómo el CSS se diferencia del HTML
• Cómo el CSS crea efectos (como sombras para marcos)
• Lo que se puede crear usando solo CSS y qué requiere imágenes
• Cómo las etiquetas HTML están alojadas y renderizadas en el navegador

3. Describe tus ideas de forma práctica

Una de las confusiones más grandes entre los diseñadores y desarrolladores web es la diferencia en el proceso de pensamiento, así que necesitas describir tus ideas de una manera práctica, de modo que los desarrolladores puedan entenderte mejor.

El método de Brad Frost acerca del diseño web atómico (dividido en cinco niveles, desde átomos hasta páginas web completas) simplifica cada interfaz en bloques de construcción lógicos. Usando los términos de Frost, puedes explicar cómo los usuarios deben interactuar con cada bloque individual y cómo estas interacciones afecta a otros elementos de la página.

Los ejemplos en vivo también eliminan la ambigüedad y malas interpretaciones. Ver cómo los elementos deben comportarse permite que los desarrolladores vean cómo el producto final debe comportarse. También tienden a dejar una impresión más duradera y actúan como una referencia.

El enlace de vista previa de UXPin, por ejemplo, te permite compartir compartir tu prototipo con los desarrolladores en forma de comentarios. A partir de ahí puedes realizar una pequeña sesión de retroalimentación para aclarar preguntas.

4. Usa guías de estilo

Las guías de estilo son útiles para mejorar la comunicación en cualquier fase de proceso producción, pero en especial para los bosquejos debido a que esta etapa conecta el diseño web con el desarrollo web.

Para los diseñadores web, las guías de estilo muestran cómo crear patrones de interfaz de usuario reusables, incluso componentes atómicos como botones y etiquetas. Para los desarrolladores, ofrecen una lista rápida e, incluso a veces, una fuente de referencia para snippets.

Las ideas específicas pueden ser ampliadas para codificar opciones de diseño. Las mejores guías de estilo no solo muestran un página basada en etiquetas y una basada en desplazamientos (scroll), también explican el contexto para ambos. Por ejemplo, Jawbones usa una página basada en desplazamientos para su narración y una basada en etiquetas para la personalización de productos.

Una empresa puede incluir una sección de doce páginas para su diseño de logo mientras que otra puede tener solo un párrafo (u otra puede preceder la sección por completo).

Aún así, las guías de estilo tienden a seguir tendencias y patrones similares. Aquí tienes algunas de las secciones más comunes encontradas en guías de estilo.

• Tipografía: Es difícil mantener un registro de qué fuentes usar en diferentes páginas, así que una sección de tipografía es una de las más comunes. Enumera opciones de fuentes, estilo y tamaños para cada aspecto relevante, como texto de cuerpo o de encabezado. Las fuentes que requieren licencia deben incluir enlaces hacia fundiciones de fuentes (font foundries).
• Esquema: Al igual de la tipografía, el difícil recordar los valores específicos para espaciados y arreglos de esquemas. La mayoría de las guías de estilo cuentan con plantillas de muestra para cuadrillas, márgenes y composiciones.
• Esquemas de colores. Siempre es útil incluir los códigos de colores específicos en RBG, CMYK o Pantone® junto con la ubicación de dónde los colores se usan.
• Códigos reusables. Los códigos no tienen que tener una sección individual; pueden ser adjuntos como snippets en las secciones relevantes. Los desarrolladores aprecian un formato donde puedan copiar y pegar lo que necesitan. Incluye clases e identificadores CSS en las muestras de snippets.
• Gráficos. Los íconos, botones, símbolos, faviconos, fondos de mosaicos y todo el arte deben tener sus propias guías de estilo. Describe los detalles de ejecución, como la alineación, ubicación, cómo colocar texto sobre imágenes, etcétera. También es útil mencionar la ubicación de los archivos PSD/AI en la nube o base de datos del servidor.
• Navegación. Menciona cada regla específica para proyectos, como el uso de marcos de búsqueda, barras laterales, enlaces (si no se habla de ellos en la sección de tipografíai), menús y menús despegables (por ejemplo, cuál es el rango apropiado de ítemes que no deben incluirse).
• Estilos de diseños de logos. Aunque algunas empresas crean guías de estilo de branding separados. Si son pocas reglas, estas pueden ser incluidas en sus propias secciones dentro de la guía general. Deben enumerar tamaño, colores, ubicación, espacio de blanco y ubicación del diseño de logo apropiados, al igual que diseños alternos.
• Filosofía de diseño (opcional). Para empresas con personalidad fuerte, las guías de estilo pueden incluir detalles con respecto del tono y la voz del contenido, la personalidad del diseño web y otros factores detrás del objetivo emocional del diseño web.

Mientras más grande tu equipo de producto, más detallada debe ser tu guía de estilo. Las guías de estilo son un punto de reunión para diseñadores y desarrolladores que no se comunican con frecuencia y pueden no trabajar en la misma ciudad.

5. Sigue estas prácticas

Aquí tienes una pequeña lista de las mejores prácticas que nutren un ambiente colaborativo.

• Organiza recursos individuales en carpetas. Esto permite que los desarrolladores sepan dónde encontrar ítemes como íconos o archivos de fuentes. Aparte de los recursos basados en la web, incluye códigos HEX para los colores/gradientes y, posiblemente, un contenido de demostración con texto real (con Lorem Ipsum).
• Sistema de nombres. Los gráficos, mosaicos, íconos e imágenes deben con nombres apropiados y colocados en la ubicación correcta.
• Describe las interacciones y animaciones. A menos que estés integrando tus archivos PS/Sketch en un formato interactivo, ciertas interacciones y animaciones como el estado flotante no son evidentes. Descríbelas con la mayor claridad posible, ya sea en un reunión o en notas escritas.
• Explica los enlaces. Crea diagramas y/o guiones gráficos para trasmitir el lugar donde iría cada enlace.
• Presta atención a las fuentes. Etiqueta cada familia de fuentes e incluye archivos externos para cualquier fuente web (webfont).

6. Usa estas útiles herramientas

No eres el único que tiene dificultades al comunicarse con desarrolladores, y los diseñadores que los tuvieron antes han dejado algunas herramientas para ayudarnos. Aquí tienes una pequeña guía:

• Trello. Considerado por mucho como la mejor herramienta para gestión de labores. Crea horarios, comparte responsabilidades y gestiona archivos de proyectos, todo dentro del mismo panel de control, y gratis.
• Asana. Similar a Trello, pero con más detalles. Su plataforma se integra con todos los teléfonos inteligentes y admite múltiples equipos con múltiples proyectos.
• Google Drawings. Un plugin que permite la organización simultánea de notas visuales e ideas enlazada con Google Drive. Aunque solo funciona con Google Chrome, también funciona sin acceso a internet.
• UXPin. Crea diseños, estructuras o prototipos de baja o alta fidelidad, en la misma herramienta, con una conversión sencilla entre ellas. Esta herramienta también se integra con Photoshop y Sketch, admite pruebas de usabilidad dentro de la aplicación y mejora la colaboración con elementos y modo de presentación.
• Cage App. Esta aplicación detallada brinda todo para una buena gestión de proyectos. Los equipos pueden compartir archivos y comentarios durante cada etapa del proceso y, al mismo tiempo, estar actualizados con los últimos cambios.
• Slack. Una herramienta de comunicación para equipos grandes. Fue creado en el siglo 21 para mejorar la comunicación entre equipos creativos, todas conversaciones se guardan y pueden buscarse desde la web o su aplicación.

Conclusión

El equipo de proyecto es más que solo un equipo. Todos trabajan juntos para lograr el mismo objetivo, y el nivel de colaboración determina la eficiencia de las diferentes partes.

Los diseñadores y desarrolladores web que comprenden sus bosquejos trabajan mejor juntos y, por lo tanto, producen mejores productos. Con suerte estos consejos te ayudarán a ti y a tu equipo a trabajar mejor con un mismo objetivo, y si buscas una agencia digital para la creación de tu página web, cuenta con Staff Creativa.

Este artículo fue originalmente publicado en Creative Bloq, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!