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

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.

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.

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.

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/

Compartir esta entrada

Facebook
Twitter
LinkedIn
Email

ACERCA DE...

Fco. Moreno - Diseñador de producto digital UI/UX

Soy Paco Moreno, Diseñador de Producto Digital (UI/UX) y diseñador gráfico, residente a caballo entre Albacete y Begur (Girona). Colegiado Nº 606 del Col·legi Oficial de Disseny Gràfic de Catalunya. Friki, geek y un 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. Miembro de la comunidad Subflash, colaboro en la organización de sus Talleres de Verano.

Comentarios en la Entrada

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

  1. Genial el post! Yo tengo un ejercicio práctico de una aplicación web usando solo html, css y Javascript y estoy pelando cables! A ver si alguno de tus recursos me ayudan un poco!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Otras entradas que te pueden interesar

Oncotrail 2024
Activismo

Un año más colaboramos en la Oncotrail 2024 para la investigacón de la lucha contra el cancer

Ayer sábado tuvo lugar la Oncotrail 2024, una carrera por equipos de 100 km organizada por la Fundación Oncolliga Girona conjuntamente con la Agrupación Excursionista Palafrugell y el Club Atlético Palafrugell y que tiene como objetivo recaudar fondos para mejorar la calidad de vida de los enfermos de cáncer. Un año más colaboré en el diseñod e la equipación del Gavarres Trail Team.

Leer más »
Hoy ha dado comienzo la 12ª Edición del congreso de ciberseguridad Navaja Negra Conference en Albacete, un evento que se han convertido en uno de los eventos sobre ciberseguridad y hacking mas importantes del mundo. Este evento está dirigido a profesionales del mundo de la ciberseguridad, donde poder disfrutar de ponencias, talleres y actividades relacionadas con el mundo de la seguridad y la tecnología. Un orgullo para nuestra ciudad.
Activismo

Hoy da comienzo la 12ª Edición del Navaja Negra Conference en Albacete

Hoy ha dado comienzo la 12ª Edición del congreso de ciberseguridad Navaja Negra Conference en Albacete, un evento que se ha convertido en una de las citas sobre ciberseguridad y hacking mas importantes del mundo. Este evento está dirigido a profesionales del mundo de la ciberseguridad, donde poder disfrutar de ponencias, talleres y actividades relacionadas con el mundo de la seguridad y la tecnología. Un orgullo para nuestra ciudad.

Leer más »
Buenas Prácticas para el Diseño de Interfaces de Usuario: Mejorando la Experiencia
Diseño Web

Buenas Prácticas para el Diseño de Interfaces de Usuario: Mejorando la Experiencia

El diseño de interfaces de usuario (UI) no tiene solo un evidente carácter estético; es un componente crítico que impacta directamente en la experiencia que nuestro usuario – que es el destinatario del uso de cualquier aplicación de software o página web – tiene de nuestro producto. Se hace evidente indicar que un diseño de UI eficiente debe guiar al usuario de manera intuitiva, en definitiva, ponérselo lo más fácil posible; y para conseguirlo hay una serie de buenas prácticas que tenemos que tener en cuenta.

Leer más »
Talleres de verano de Subflash 2024, Jaca
blog

Talleres de verano de Subflash 2024, Jaca

Tras un parón de cinco años y una pandemia de por medio, este año se retoman los Talleres de Verano de Subflash, posiblemente, el evento más decano de la comunidad de desarrollo web hispana. Desde 2003 hasta 2019 se han ido celebrando anualmente de forma itinerante, recorriendo casi todas las comunidades autónomas. Este año se reinician con una celebración por todo lo alto en Jaca (Huesca).

Leer más »
El Problema de los tres cuerpos
blog

Reseña de la serie de Netflix «El Problema de los Tres cuerpos»

Hacía tiempo que no os traía un post sobre ciencia ficción en este blog, que la verdad sea dicha, tengo un poco desatendido. Pero de vez en cuando me surge la necesidad de comentar alguna obra de ciencia ficción que merece la pena reseñar. En este caso, la serie de Netflix «El Problema de los tres cuerpos» homónima de la trilogía de novelas del reputado autor chino Liu Cixin.

Leer más »

Francisco Moreno Sánchez-Aguililla - Diseñador Gráfico, Web (UI/UX) y Multimedia
www.fcomoreno.net - 2004-2024 ¡20 años online!

Ir al contenido