Skip to content

Las 7 palabras más usadas en Diseño UI

Las 7 Palabras más Usadas en Diseño UI

La piña merece estar en la pizza

Share on facebook
Share on twitter
Share on whatsapp
Share on telegram
Share on pinterest

En un post anterior, hablamos sobre qué era diseño de interfaces y cómo afecta todo lo que ves en internet. En esta oportunidad, veremos las 7 palabras más usadas en el Diseño UI.

 

Interfaz

Tal como explicamos en este post, la interfaz es todo lo que ves en una pantalla de un dispositivo electrónico, sea un celular, una tablet, un reloj inteligente, hasta el menú de un DVD.

En resumen, todo lo que esté dentro en una pantalla y con lo que puedes interactuar se considera una interfaz.

interfaz

Responsive

La palabra ‘responsive’ hace referencia a un diseño que se adapta a varios tamaños de pantalla, con la finalidad de que se vea bien en distintos dispositivos, tales como celulares, tabletas, computadoras y laptops.

Esta práctica es muy vista en el diseño web, ya que es importante que el diseño creado se vea bien en todos lados.

responsive

Wireframe

En el mundo del arte existe el boceto, que es el primer planteamiento de una ilustración y el cual sienta las bases o la estructura de la futura pieza de arte. Este mismo concepto de boceto existe también en diseño UI, y se conoce como wireframe.

También llamado ‘prototipo de baja fidelidad’, el objetivo de un wireframe es plantear la estructura de lo que vayamos a diseñar, el camino que seguirá el usuario dentro de la solución que estamos elaborando, así como la ubicación y el tamaño de los elementos de la interfaz.

Por lo general, un wireframe se trabaja en escala de grises o en blanco y negro, además de no contener ningún dato real o de valor significativo, solo formas básicas y garabatos en lugar de párrafos para dar una idea de qué o cómo se verá el diseño final.

wireframe

Prototipo

Si decimos que el wireframe es como un boceto, el prototipo viene a ser la pieza final de ilustración. 

Se les conoce también como ‘prototipo de alta fidelidad’, y es donde el diseñador UI aplica todos los estilos y componentes que requiera el esbozo planteado, además de crear piezas gráficas en caso lo amerite.

El prototipo busca mostrar el producto digital lo más realista posible, es por eso que se deben usar datos reales y de alto valor para el proyecto, para así reflejar lo que el usuario verá al momento de usar la interfaz.

prototipo

Mock-up

Seguramente has visto que algunos artistas colocan sus ilustraciones y dibujos en objetos o utilería como tazas, almohadas, cases para celulares, etc, con el fin de mostrar el potencial comercial de su arte.

Un mock-up cumple el mismo objetivo: coloca el prototipo dentro de la pantalla de una laptop o celular real, para dar una idea más clara de cómo se vería el diseño en la vida real. Esto se logra a través del renderizado de modelos 3D o la edición de imágenes, aunque hoy en día hay herramientas y plantillas que logran el mismo fin y sin hacer mayor esfuerzo.

mock-up

Sistema de Diseño

El sistema de diseño es un manual que sirve para explicar cómo y cuándo usar cada aspecto de todo lo que contenga el diseño de la web o app que hayas creado: paleta de colores, grosor y tamaño de textos, variedad de botones, grupos de íconos, etc.

Este documento actúa como una guía para el programador al momento de construir el prototipo que has elaborado, y también sirve de referencia para otros diseñadores que deseen utilizar o emular el diseño realizado.

Si tienes dudas de cómo armarlo o no sabes por dónde empezar, puedes orientarte de los sistemas de diseño creados por 2 grandes casas de la tecnología: Material Design de Google y Human Interface Guidelines de Apple.

 

UI Kit

Si comparamos al sistema de diseño con una fruta, el UI Kit vendría a ser el jugo de la misma; listo para ser consumido y solo con lo necesario.

Mientras que el sistema de diseño actúa como una documentación fija, el UI Kit es un archivo editable que se brinda al diseñador UI para que haga uso de los componentes y estilos para crear nuevos elementos a partir de ellos, según le convenga o necesite para su proyecto.

ui kit

Por ejemplo: tomamos un botón, un par de íconos y un campo de texto; con estos elementos se puede crear un bloque que invite al usuario a suscribirse a un boletín informativo.

ejemplo ui kit

 

Éstas son algunas de las palabras que forman parte del día a día de un diseñador de interfaces. ¿Qué tema relacionado al diseño UI te gustaría que habláramos en el próximo post? Coméntanos más abajo, estaremos atentos a tus sugerencias.

También te puede interesar:
¡Califícanos y compártelo con tus amigos!
Share on facebook
Share on twitter
Share on whatsapp
Share on telegram
Share on pinterest
5 1 Votar
Rating
guest
0 Comments
Comentarios en hilo
Ver todos los comentarios
Ilustraideas utiliza cookies para garantizar la mejor experiencia en nuestra web. Si sigues navegando sin modificar esta opción, entenderemos que aceptas nuestra Política de Cookies. Más información.