Consejos a la hora de diseñar una interfaz gráfica para una aplicación web (UI/UX).

Consejos a la hora de diseñar una interfaz gráfica para una aplicación web (UI/UX).

Hoy os traigo algunos consejillos útiles para primerizos en esto del mundillo del diseño de interfaces gráficas (UI/UX). Quizás sean consejos básicos, pero que harán que te lleves mejor con la persona que tendrá la difícil tarea de dar vida al diseño que tú – diseñador gráfico – realices. Esos seres que cohabitan con los diseñadores en las agencias, llamados programadores o developers, son buena gente ;-), y después de todo, son ellos los que se enfrentan al reto de hacer realidad el concepto que tú has creado. El primero de todos, es para mí el más importante.

Que sea posible la implementación de tu diseño

Esto que parece una obviedad es de suma importancia. Hoy día la implementación de la inmensa mayoría de interfaces gráficas para aplicaciones web está realizada en HTML y Javascript (en cualquiera de sus frameworks) y CSS. Se acabaron los tiempos de Flash hace mucho tiempo. Cuando crees una interfaz gráfica para una aplicación web, asegúrate de que los elementos que estás diseñando con tu programa de diseño favorito (Photoshop, Sketch, Fireworks, Illustrator…) sea posible implementarlas mediante éstas tecnologías. Hay muchas posibilidades: degradados, formas, transparencias… pero que lo que hagas sea factible. Los diseños muy bonitos pero imposibles, sólo para la ciencia ficción. Habla con tu programador, él es tu amigo. Consensúa con él qué se puede hacer y qué no; con el tiempo ya no tendrás que preguntarle.

Los diseños muy bonitos pero imposibles, sólo para la ciencia ficción.
Los diseños muy bonitos pero imposibles, sólo para la ciencia ficción.

Crea Guías de Estilo

Normalmente cuando te encargan un trabajo de diseño de UI, te proporcionan un documento de esquemas de pantalla (wireframes o prototipos) a diseñar con la totalidad de las pantallas que tendrá la aplicación. Pero existen muchas pantallas intermedias, paneles de selección de opciones o simplemente agregados posteriores que no aparecen en el documento y que, dados los diversos ajustes de funcionalidad a lo largo del proceso de la progremación, son necesarios crear; y que cuando estén en funcionamiento deberán tener el mismo aspecto en consonancia con el resto de la aplicación.

Pónselo fácil a tu amigo el developer. Crea una pequeña guía de estilo con los elementos de interfaz que más se repitan en los diseños para que él pueda crear código de estilos reutilizable. Te querrá mucho más y el cliente lo notará en el precio y en la velocidad de su apliciación.

Crea Guías de Estilo
Crea Guías de Estilo

No abuses de las Tipografías

Si no lo harías en un diseño para imprenta ¿Porqué lo haces en un diseño de pantalla?. Las tipografías en las interfaces gráficas deben estar integradas en la aplicación. Procura utilizar pocas tipografías en tus diseños, a lo sumo dos tipos diferentes, lo que incidirá en la rapidez de carga y proceso de la aplicación. Las webfonts son también tus amigas: Googlefonts, Cufons, CSSfontstack… son sistemas de incrustación de fuentes online. Tenlas presente mucho antes que usar una tipografía propietaria. Que tengan buena legibilidad en pantalla, y a tamaños pequeños. Recuerda que las tipografías sin serifa y de palo grueso siempre se leerán mucho mejor en una pantalla pequeña que las fuentes con serifa y palo fino. Tampoco abuses de los tramados de fondo que pueden dificultar la lectura.

blank
Google Fonts

Crea Librerías de Iconos

Los iconos son fundamentales en la interfaz gráfica en cualquier aplicación. Son los elementos gráficos más usados, no sólo en nuestra época digital, sino que desde la más remota antigüedad. Crean familiaridad en las herramientas, e identifican procesos con una información visual concreta. Mi consejo es que crees librerías de iconos embebidas en un archivo webfont o iconfont, para que después nuestro amigo developer le pueda dar el aspecto deseado mediante estilos CSS. Muchísimo mejor que darle una carpeta con 40 png o gifs.

La ventaja es que son vectoriales, no se pixelizan al ampliar, y tu colega programador puede hacer que sólo se tenga que cargar una vez, un solo archivo, para tener toda la librería de iconos disponibles en toda la aplicación. Hay páginas especializadas en iconos como FlatIcon donde no solo te puedes descargar la imagen vectorial para usarla en tu prototipo, sino que puedes crear la librería completa de tu colección lista para integrar en cualquier desarrollo.

Otro recurso importante en este sentido es la tipografía FontAwesome. Una fuente que podemos usar para implementar iconos sin necesidad de imágenes y sin técnicas intrusivas ni javascript; que podemos instalar en nuestro ordenador como una tipografía normal y que se puede usar mediante CSS en los desarrollos; además de que contiene una colección de 893  iconos en su versión gratuita y de libre uso.

FontAwesome
FontAwesome

Usa gráficos vectoriales

Los gráficos vectoriales son muy útiles frente a las imágenes de mapa de bits, ya que tienen un tamaño de archivo pequeño y no se pixelan cuando amplías a un gran tamaño. Están definidos mediante algoritmos: un archivo de imagen vectorial contiene definiciones de formas y rutas que especifican cómo debe verse la imagen cuando se renderiza en pantalla. Desde que existe el formato SVG (un formato basado en XML para describir imágenes vectoriales) y que es interpretado directamente por el navegador, la integración de gráficos vectoriales en las aplicaciones es muy sencilla.

En sus últimas definiciones el formato SVG soporta animaciones mediante atributos CSS. El editor online SVGator te permite crear animaciones en este formato sin tener que picar ni una sola línea de código, mediante un timeline sencillo. Hay otros proyectos como vivus.js, una librería sin dependencias de javascript que permite a tu amigo el programador animar SVGs con muchas posibilidades.

blank
blank

Especifica las interacciones mediante un documento

Ayuda al programador a entender y poner en marcha tu diseño, explicándole que efectos quieres que se lleven a cabo a la hora de interactuar con los elementos de interacción que tú has diseñado. Porque lo importante de una interfaz gráfica no solo es que muestre los datos que debe mostrar, sino también el cómo debe hacerlo; que la forma en que se comnican los datos en pantalla proporcione una respuesta creíble, y lógica a las acciones del usuario. Para ello las microinteracciones son muy importantes. Estas microinteracciones son, por ejemplo, las transiciones entre acciones del usuario, comprobaciones en formularios, tiempos de espera, pantallas de estado, botones de interfaz animados, cargas progresivas de gráficas o avisos y notificaciones.

Te aconsejo que una vez hayas creado tu impoluta interfaz gráfica, crees un documento de texto explicándole al colega developer qué respuesta quieres en cada interacción del usuario. Es un poco tedioso, pero le ayudará a «humanizar» una interfaz. Y volviendo al primer consejo, procura que sean posibles. Está bien que seas creativo, pero hazlo con los pies en el suelo.

blank
Ejemplo extraído de: https://www.completewebresources.com/a-macroscopic-look-at-micro-interactions/

Y por último, no reinventes la rueda

Desde el primer momento en que te pones a diseñar los controles de una aplicación te das cuenta de que está todo inventado, no es necesario que inventes un elemento de interacción nuevo para crear una iterfaz innovadora. Hay muchos recursos que ya funcionan y probados con éxito desde hace mucho tiempo: Utiliza patrones de diseño, librerías gráficas, UI Kits, plantillas… Todo es válido y útil siempre que el uso que hagas de ello sea correcto y adecuado. Y si eres un creador nato, una vez hayas experimentado todos estos recursos, es cuando ya puedes ponerte  a crear nuevas tendencias.

freepsdsuikit
https://freebiesbug.com/psd-freebies/ui-kits/

¿Quieres comentar algo?

ACERCA DE...

blank

Soy Francisco Moreno, Diseñador Gráfico, Web (UI/UX) y Multimedia, residente a caballo entre Albacete y Begur (Girona). Colegiado Nº 606 del Col·legi Oficial de Disseny Gràfic de Catalunya. Friki, geek y metalero en decadencia. Actualmente desarrollo mi labor profesional en BUDA Business Data Software, en Sant Cugat del Vallés, Barcelona. También colaboro con Marpadal Interactive Media y con iPow e-commerce.

Compartir esta entrada

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

OTROS POST QUE TE PUEDEN INTERESAR

Un ping en tiempos revueltos

Un ping en tiempos revueltos

Hola familia. Hacía tiempo que no escribía en el blog, la verdad es que no me da la vida para ello. Hace ya mucho tiempo que vengo espaciando los post en este blog y no lo he cerrado por lástima, por no perder la documentación que he ido almacenando en él. El caso es, nunca encuentro un momento en el que escribir un post, esté por encima de todo lo demás en mi cola de prioridades.

Leer Más >>
¿En qué ando metido? Resumen del año

¿En qué ando metido? Resumen del año

Bueno, que solo hayan pasado 8 meses de mi anterior post dice mucho del tiempo libre que tengo para dedicarme a escribir en el blog. Como os contaba en mi último post, en abril me hice cargo de la dirección creativa de BUDA Business Data Software; y la verdad, desde entonces, he tenido muchas cosas que hacer y no me he aburrido ni un solo minuto.

Leer Más >>
Tiempo de cambios y nuevos proyectos

Tiempo de cambios y nuevos proyectos

Ha pasado el mes de marzo y no he tenido ni un momento para escribir unas líneas en el blog. Lo cierto es que en este mes mi vida se ha precipitado mucho y he tenido que tomar decisiones que han devenido en importantes cambios y nuevos proyectos en materia laboral y personal.

Leer Más >>
crossoverposting-febrero2019

Crossoverposting febrero 2019

Nunca os he contado el porqué de mi interés por el diseño gráfico, en especial por el diseño de interacción. Durante mis estudios de informática en la UCLM, cursé la asignatura de Interfaces y Periféricos, en la que realicé un proyecto que necesitó de una interfaz de usuario.

Leer Más >>
  • Principal
  • ¿Quién soy?
  • Blog
  • Portfolio
  • Contacto
  • Aviso Legal, Privacidad y Política de Cookies

fmkr 2.0 - Francisco Moreno Sánchez-Aguililla
Diseñador Gráfico, Web (UI/UX) y Multimedia - 2004-2020

Volver a arriba