Figma es un software de diseño de interfaz de usuario (UI) basado en la nube que facilita la colaboración en proyectos visuales como nunca antes. Al estar en la nube, permite al usuario continuar su trabajo desde cualquier dispositivo con conexión a Internet, estés donde estés en el mundo.
Además, los propietarios de proyectos pueden proporcionar a los compañeros de equipo diferentes niveles de acceso para que puedan revisar los diseños, realizar cambios y dejar comentarios en tiempo real. La herramienta es intuitiva de usar, lo que facilita la incorporación de nuevos colaboradores sin complicaciones.
Gracias a estos y otros muchos recursos, en los últimos años, Figma ha sustituido rápidamente a Adobe XD y Sketch en el corazón de muchos diseñadores.
Entonces, ¿Cómo se utiliza Figma para el diseño web?
En este artículo, proporcionamos un flujo de trabajo útil desarrollado por nuestros propios diseñadores de interfaz de usuario aquí en MKTWebSite. Ha sido probado a lo largo del tiempo y es eficiente y fácil de seguir.
1. Tipos de Sitios Web
Antes de adentrarnos en los detalles sobre cómo utilizar Figma para el diseño de sitios web, echemos un vistazo a los tipos más comunes de sitios web y lo que los define:
- Negocios: Los sitios web corporativos suelen constar de menos páginas, e incluso pueden desarrollarse en forma de un sitio de una sola página. Si estás interesado en la opción de una sola página, puedes encontrar inspiración y recursos en la comunidad de Onepagelove.
- Productos: Estos son similares a los sitios web de negocios, pero con propósitos adicionales de marketing y ventas. Es por eso que la creatividad en el diseño y los gráficos es bienvenida al diseñar un sitio web de este tipo. Los sitios web de productos pueden estar conectados a una tienda de comercio electrónico con múltiples productos o ser independientes. Un buen ejemplo de este tipo de sitio web es el de Apple.
- Noticias y Blogs: Este tipo de sitios web son visitados por un grupo diverso de personas a diario, por lo que las reglas de diseño deben aplicarse con diligencia. Además, los portales web, como Wired y Yahoo, también entran en esta categoría y requieren un enfoque específico, ya que a menudo permiten a los usuarios configurar el contenido según sus preferencias.
- Aplicaciones Web y SaaS: Los sitios web para este tipo de productos suelen incluir un amplio ecosistema de funcionalidades y aplicaciones. Al tener un sistema de diseño bien organizado que siga los principios de diseño atómico, puedes reducir significativamente el tiempo de desarrollo. Además, el uso de componentes reutilizables y bibliotecas, así como el diseño de una estructura bien pensada, son esenciales para la rapidez y calidad del proceso de desarrollo. Estos sitios web ofrecen una mayor productividad y colaboración, por lo que es realmente importante que estén diseñados y construidos para funcionar sin problemas. Buenos ejemplos en esta categoría son Facebook, Asana, Discord, Slack y el propio Figma.
- Tiendas en Línea: Los sitios web de comercio electrónico son uno de los tipos más antiguos de contenido web. Al igual que los dos tipos anteriores, estos sitios están poblados con grandes cantidades de información. Sin embargo, también tienen cientos de miles de páginas de productos que son (casi) exactamente iguales. Lo que es realmente importante aquí no es tanto el diseño y la apariencia, sino el código backend fuerte y limpio que sostiene todo el sistema y lo mantiene en funcionamiento. Ejemplos de plataformas de comercio electrónico populares son Amazon, Etsy, Aliexpress, etc.
2. ¿Cuáles son los Pasos para Diseñar un Sitio Web en Figma?
Independientemente de si estás utilizando Figma u otra herramienta, al diseñar un sitio web, tu tarea es tomar un breve simple, ya sea unas pocas líneas o un documento completo de investigación, y darle vida visualmente. El proceso comienza con una idea, que luego se convierte en un plan estructural y una arquitectura de la información.
Piensa en ello como la base y columnas de concreto de un edificio; sin la estructura o el “esqueleto”, todo se derrumbará. Después de definir qué serán las páginas individuales y cómo se verá el contenido en general, puedes dibujar algunos bocetos sin detalle o fidelidad. Estos se llaman wireframes.
En Figma, puedes diseñar tus wireframes desde cero o basarte en plantillas que coincidan con tu diseño. De cualquier manera, estos te ayudarán a visualizar el panorama completo antes de ponerte manos a la obra en la creación de tu impresionante diseño nuevo.
Después de acordar el diseño con tu jefe de proyecto y/o cliente, puedes comenzar a detallar estas ideas preliminares transfiriéndolas a un prototipo de resolución intermedia. Si tienes varios diseños repetidos, solo necesitas diseñarlos una vez y luego multiplicarlos y modificarlos según sea necesario.
Sin embargo, ten en cuenta que aún no estamos en la fase con el contenido real y las imágenes llamativas. El diseño de un sitio web debe estar bien definido antes de invertir tiempo en una variante final perfecta en píxeles. Además, es importante no hacer perder el tiempo a los desarrolladores haciéndoles trabajar en algo que no es definitivo.
Para asegurarte de que los resultados cumplan con los requisitos, siempre busca comentarios y revisiones de tu equipo en cada paso.
3. Rejilla y Diseño
Figma cuenta con una función de “ajuste a la rejilla”, lo cual es muy útil cuando se trata de rejilla y diseño.
La mejor y más comúnmente utilizada guía para el diseño web es el sistema de rejilla de columnas verticales. Te permite organizar los elementos del diseño de manera consistente y mantener el diseño más accesible visualmente para los colaboradores que revisan el contenido.
La mejor práctica es utilizar 12 columnas con un ancho entre 50 y 100px. El espacio entre ellas puede variar. Además, una buena regla general es dividir todo entre 8 o 10.
Siempre sigue los límites de la cuadrícula y el espacio entre elementos, dejando suficiente espacio en blanco para que el contenido sea fácilmente distinguible.
4. Componentes de un Sitio Web
El siguiente paso en el diseño de un sitio web en Figma es enfocarse en los componentes individuales.
Área de Encabezado o Barra de Navegación
El área de encabezado y la barra de navegación deben ser simples y legibles, manteniendo siempre el mismo tamaño en todas las páginas. Incluye el logotipo, los botones de navegación, a veces una dirección, iconos de redes sociales, etc.
Dado que las personas tienden a leer de izquierda a derecha, el orden más común es agregar primero el logotipo y luego el resto de los elementos. Esto puede variar según el tipo de negocio o los deseos del cliente.
Sección “Home”
¡La sección “home” es el espacio más valioso de cualquier sitio web bien diseñado! Aquí es donde causas la primera impresión. Por lo general, puede ser una ilustración de ancho completo o una foto con una breve y llamativa descripción del negocio.
Recuerda mantener todos los elementos importantes en la imagen del “héroe” arriba del “pliegue” (la línea imaginaria en la parte inferior de la pantalla). 800-900px deberían ser suficientes. Considera diferentes tamaños para la imagen y prueba cómo se recortará o ajustará en pantallas más pequeñas o más grandes.
La tendencia actual va hacia el uso de imágenes en 3D y elementos gráficos mínimos e interactivos que reaccionan al pasar el ratón. Sin embargo, sea cual sea la imagen que elijas para esta sección, trata de evitar las fotos de archivo y las ilustraciones estáticas.
Texto, Fuentes y Tamaños
Uno de los elementos más importantes de la web es el contenido escrito real.
Es esencial que toda la tipografía sea legible. Los títulos de sección pueden variar desde 40px hasta 60px para diferentes fuentes, mientras que el texto principal puede oscilar entre 16px y 18px.
Sin embargo, siempre ten en cuenta los estándares. Google lanzó recientemente su Base de Conocimientos de Fuentes, lo cual puede ser útil para expandir tus habilidades.
Formularios y Campos de Entrada
Los formularios y campos de entrada están diseñados para cumplir un propósito en el que se requiere que el visitante escriba algo e interactúe con el texto en el sitio.
Asegúrate siempre de alinear estos elementos a la izquierda y utiliza un máximo de dos columnas (intenta quedarte con una).
Para una mejor experiencia de usuario, organiza tus campos de “más fácil” a “más difícil” y diseña notificaciones de resumen y cuadros de ayuda para guiar al usuario. También puedes considerar agregar barras de progreso a formularios más extensos con múltiples campos, de esta manera el usuario sabrá en qué punto se encuentra y cuántos pasos más esperar.
Botones y Controles
Un botón puede llevar a un usuario a una nueva página o abrir otra ventana emergente. La aplicación de botones puede ser diversa, pero lo que los define es que siempre deben ser llamativos.
El botón más importante en el que debes centrarte es el llamado “llamado a la acción” (CTA). Cuando se trata de páginas de destino, este botón es de lo que trata toda la página. Debe ser consistente con el resto del contenido y motivar al usuario a hacer clic en él.
Tablas
Las tablas a menudo se perciben como un gran desafío en el diseño web, especialmente en diseños para dispositivos móviles. Muestran datos con mucho texto y, la mayoría de las veces, su propósito es permitir al usuario comparar información lado a lado.
En Figma, crear tablas es fácil. Puedes utilizar el plugin de creador de tablas para diseñar y visualizar la información más rápido.
Para una mejor experiencia de usuario, considera usar un relleno de fondo ligeramente diferente para cada línea, y evita los bordes, ya que estos añaden un desorden innecesario a tu tabla.
Diálogos Emergentes
Los modales y diálogos emergentes son ventanas que flotan sobre la ventana principal del sitio web. Estos van desde avisos de cookies, mensajes de error, promociones especiales, etc.
Al considerar el diseño, debes tratarlos como una tarjeta flotante con un CTA súper importante. Sin embargo, asegúrate de proporcionar un botón claramente visible que permita al usuario cerrar la ventana emergente y continuar con el contenido principal. De lo contrario, esto crea una experiencia de usuario muy desagradable.
5. Consejos para el Uso Efectivo de Figma
Aquí hay algunos consejos prácticos adicionales sobre cómo utilizar Figma para el diseño de sitios web:
- Utiliza el Auto-Layout. Esfuérzate por utilizar el auto-layout tanto como sea posible y mantén tus marcos en un buen estado de funcionamiento y jerarquía. De esta manera, tu trabajo de diseño puede ser fácilmente accesible para tus compañeros de equipo, desarrolladores y cualquier otro colaborador. Además, nombra tus marcos y capas de manera correspondiente y de forma reconocible para que cada miembro del equipo pueda entender dónde ir o qué hacer a continuación.
- Comprime tus Imágenes. Ten en cuenta que al importar imágenes rasterizadas, Figma realiza una compresión general. Evita sobrecargar tu página con capturas de pantalla de alta resolución y archivos JPG. Un moodboard y una foto de un boceto en papel pueden ser útiles, pero también piensa en las personas con PCs más lentos y tarjetas GPU más débiles.
- Utiliza la Función de Comentarios. Los comentarios en Figma facilitan la colaboración con los compañeros de equipo en tiempo real. Puedes dejarles mensajes para solicitar sus opiniones y discutir asuntos urgentes, revisar sus comentarios sobre los diseños y dar seguimiento a cualquier pregunta que pueda surgir.
- Evita el Texto de Relleno. El texto de relleno, también conocido como LOREM IPSUM, se utiliza comúnmente en diseño, especialmente al usar plantillas y gráficos de stock. Sin embargo, dejar restos de él en el diseño final puede llevar a una experiencia de usuario realmente desagradable. En su lugar, puedes utilizar textos de Wikipedia relacionados con el tema/contexto. Si tienes poco tiempo, hay un plugin de Figma que te permite llenar rápidamente tus páginas.
Conclusión
Figma es una de las soluciones de diseño de interfaz de usuario más intuitivas y flexibles disponibles en la actualidad. Permite a los equipos tanto estacionarios como remotos colaborar de manera más eficiente y contribuye a una mayor productividad en los procesos de desarrollo web.