Los diseñadores tienen la responsabilidad de mejorar la sociedad

/1 Comentario/en , , /por

Si nos enfocamos bien, podemos apreciar que, detrás de absolutamente todo, hay un diseño. Cada diseño está marcado por un diseñador o grupo de diseñadores y la empresa para la que trabajan. Todos ellos enfocados en brindar una experiencia a las personas a través de sus productos.

Hay diseño en la ropa que nos colocamos, en el equipo que usamos para laborar, en el metro que tomamos para ir al trabajo, en el mismo espacio donde nos dedicamos a hacer nuestras labores, las aplicaciones y juegos que usamos a diario, el buscador, el navegador. Para todo esto ha pasado un diseñador antes, realizando una labor en función del usuario para su comodidad, facilidad, seguridad y cualquier característica que pueda alguien necesitar.

Sí, ya existe alguien pensando en resolver todas esas dificultades que a menudo surgen en la sociedad, como hemos podido apreciar el surgir de aplicaciones de compra y venta en línea, por ejemplo. Es por esto, que los diseñadores y las empresas para las cuales trabajan, tienen el poder de mejorar el funcionamiento de la sociedad, de crear un mejor ambiente en este mundo para todos. Observa a tu alrededor y admira todo lo que los diseñadores han hecho por ti.

Animación de diseño UX por @oliverking en dribbble.com

Diseño de interfaz de usuario (UI) para móviles

/0 Comentarios/en , , , /por

Hoy día cada vez más y más personas están utilizando dispositivos móviles y sobre la mitad de estos son celulares. Muchos negocios se están manejando a través de aplicaciones en dispositivos móviles, lo que lleva a los diseñadores a mantenerse siempre actualizados con los requerimientos del momento. En este artículo hablaremos sobre las aplicaciones que casi todos los dispositivos móviles tienen, así mismo como algunas recomendaciones a la hora de diseñarlas.

Detalle importante de UI en dispositivos móviles

Como sabemos, las pantallas de los dispositivos móviles son reducidas, por lo que el contenido debe ir lo mejor enfocado posible. El contenido que colocas para ser visto en una computadora de escritorio no es el mismo que colocas para verse en un celular. El mismo ha de filtrarse con la información principal.

Pantalla de bienvenida (Splash screen)

Se dice que “la primera impresión es lo que cuenta”, por lo que una buena entrada es necesaria para ser bien recordados por los nuevos usuarios. Esta entrada en el mundo digital es la pantalla de bienvenida o splash screen. El rol que tiene esta pantalla es hacer ver que la aplicación se carga rápido. Suelen ser minimalistas, llevando solo el logo y nombre del producto. La pantalla de bienvenida no debe durar más de 3 y 5 segundos o el usuario pensará que demora demasiado en cargar.

Animación por @phamduyminh en dibbble.com

Pantallas de introducción (Onboarding screens)

Las pantallas de «onboarding» son hechas para introducir el producto a los usuarios que lo utilizan por primera vez, para que estén listos para usarlo de una vez. En algunas ocasiones estas pantallas son utilizadas para que los usuarios se familiaricen con algunas características del producto, otras tratan de educar al usuario en la interacción con la UI–haciendo tutoriales cortos de guía para familiarizarse con las operaciones más comunes. Al elegir una pantalla de introducción recuerda que no debe sentirse como un bloqueo de acceso para los usuarios que por primera vez lo utilizan. Sino más bien debe sentirse natural y debe permitirse saltar la introducción si quieren empezar a usar la aplicación.


Animación por @nashoaib en dribbble.com

Pantalla de inicio (Home screen)

La pantalla de inicio es la pantalla que los usuarios ven cuando han terminado con la introducción. Es el punto de partida para el usuario. Algunos elementos que casi toda pantalla de inicio tiene:

  • Menú. La pantalla de inicio debe ayudar a los usuarios a navegar a través de las distintas partes del producto. Ya hay patrones establecidos en lo que es la navegación dentro de los productos, por lo que se recomienda seguirlos a la hora de diseñar una pantalla de inicio para una mejor experiencia de usuario. La interfaz de usuario generalmente tiene una barra de navegación con pestañas o un menú de hamburguesa (hamburger menu).
  • Campo de entrada de búsqueda. La búsqueda es un elemento típico de las aplicaciones de comercio electrónico. Actúa como un acceso directo y permite a los usuarios buscar un producto en particular.
  • Contenido relevante. Dependiendo de la naturaleza de un producto, la pantalla de inicio puede tener un feed con elementos o cualquier otro tipo de contenido que sea valioso para los usuarios.
Animación por @consueloromano en dribbble.com

Aplicaciones de redes sociales

Lo más importante en las redes sociales es la comunicación. La experiencia dentro de ella se basa en llevar la información a los usuarios de manera oportuna a través de feeds, que constantemente están cambiando. Cada elemento del feed debe estar diseñado para el escaneo rápido, ya que los usuarios escanean, no leen. 

Animación por @aureliensalomon en dribbble.com

Importante

Para diseñar es importante considerar todas las pantallas como parte de la experiencia del usuario. Al hacer esto se puede brindar un producto que cumpla con las expectativas del usuario y a facilitarle su navegación a través del mismo.

Para ver el artículo completo, visita: https://xd.adobe.com/ideas/process/ui-design/mobile-user-interface-design/

Animaciones UI a través del tiempo

/0 Comentarios/en , , /por

Las animaciones de interfaz de usuario (UI) son un elemento esencial para todo creador de productos digitales. Las mismas necesitan tener un diseño justo que no invada por completo el look & feel de los distintos productos y aplicaciones. 

Rara vez se les menciona, pero son fundamentales para la creación de sitios web, aplicaciones, juegos HTML5, como los que creamos en Token Studio. 

Principios de las animaciones UI

Las animaciones UI siguen algunos principios que los hacen cumplir con su cometido. Pasan a través del tiempo, plataformas y medios de comunicación. Y tienen una cosa en común, todos han creado un “de aquí en adelante”, marcando épocas que podemos conseguir ver mirando hacia atrás en la evolución de la comunicación tecnológica.

1. Cursor Parpadeante (1967)

La madre de todas las animaciones. Al principio, cuando no había nada… ya existía el cursor terminal parpadeante, esperando una entrada. El cursor parpadeante es todo un arte, el cual ha permanecido en el tiempo.

Presentado por primera vez como patente de Charles A. Kiesling en 1967, todavía lo usamos en nuestros celulares, computadoras, buscadores y hasta cajeros automáticos. Es tan normal que esté, que a veces ni notamos su presencia.

El cursor parpadeante estableció una norma que todavía se usa, que nos permite mantener el enfoque de la pantalla, indicándonos que está lista para su entrada, muy lista en ocasiones, para cualquiera que se dedique a escribir. Pero siempre motivándonos a continuar.

2. La pantalla de descarga de Windows XP (2001)

Antes de que existiera la banda ancha y la navegación con pestañas, descargar un archivo era todo un compromiso. Incluso los documentos más simples tomaban varios minutos en ser descargados y el resto de la experiencia de navegación se alentaba. Se necesitaba de algún visual que indicara que todo marchaba bien y que el archivo estaba en camino.

La barra de estimación de tiempo siempre ha sido algo desesperante, no sabes si avanza o no, pero los papeles flotantes desde el mundo a tu computadora lo calmaban todo como si dijeran suavemente que ya el archivo estaba llegando, de byte en byte, pero estaba llegando a la computadora y ya pronto ibas a poder disfrutar de esa canción que tanto te gustó por MTV.

3. La pelota de playa de Mac (2001)

Hay ciertos procesos dentro de nuestras computadoras que toman su tiempo y que no te permiten seguir trabajando en paralelo. Para esto, Mac usó el reloj de mano en el cursor, mientras que Windows, el reloj de arena. Pero si ya esperar nos produce ansiedad, imagina ver un reloj corriendo frente a ti sin poder hacer más nada.

¡Les presentamos la bola de playa girante! Esperar sigue siendo tedioso y, por lo general, es signo de que algo anda mal en los dispositivos actuales. Pero al menos OSX tiene cierta consideración al esperar colocando algo agradable a la vista. 

Si deseas tener más información acerca de las animaciones UI a través del tiempo, puedes consultar el sitio de Invision App.

5 cosas que aprendí al hacer un dibujo diario por 30 días

/en , /por

El final del año 2017 estaba cerca, normalmente no hago listas de fin de año, pero sí tengo en mente un resumen del año que pasa y unas expectativas del que iniciará.

En navidad, mientras compartía con la familia, me vino a la mente, casi en broma, hacer 31 dibujos de corazones los primeros 31 días del año.
Pienso que esta idea de corazones me llegó por estar pasando un lindo momento familiar.

Decidí hacer el reto y ser fiel a la idea original, a dibujar corazones.

Así, llegó el 1 de enero e inicié sin pensarlo demasiado, sin ninguna finalidad en particular, pero poco a poco me daba cuenta de varios beneficios que estaba teniendo hacer este reto, así que decidí compartir la experiencia:

5 cosas que aprendí:

1. Es un buen ejercicio mental
Un proyecto diario como este, es un excelente ejercicio para la mente.
Uno se mantiene atento viendo las cosas de manera diferente y recolectando información para usarla después.

2. Crea un sentido de logro y motivación
La mayoría de los días traté de hacer los dibujos en la mañana como la primera actividad del día. Resulta que lograr esa pequeña victoria, agrega motivación para encarar el resto del día.

3. La creatividad es un proceso que debe ejercitarse
Las ideas no llegan solas, uno debe investigar sobre lo que se desea generar. En este caso no investigué, pero si estaba muy atento a mi entorno, viendo situaciones y capturando ideas. Una libreta de dibujo a mano, ayuda a que la idea no se vaya volando.

4. Sirve para distraerse
Muchas veces uno inicia el día teniendo en mente una lista de tantas tareas, que uno puede quedar atrapado en ese patrón. Hacer un espacio para realizar un reto como este ayuda mucho a distraerse y relajarse.

5. No hay que obligarse a generar una idea
Algunos días me llevaron al extremo, días sin ideas. La primera vez que sucedió, no sabía que hacer, comencé a dibujar a la fuerza, al final salió algo y más que un logro fue un alivio. La segunda vez que me quedé en blanco, lo dejé y me fui a hacer otras cosas, una idea llegó un rato después. Es importante no forzarse a generar una idea, mejor es darse una vuelta y cambiar de escenario.

Nunca había hecho un reto como este, puedo decir que fué interesante y divertido.

Ahora quedo con un montón de dibujos e ideas y con la seguridad que más que un reto, fué un aprendizaje.

Razones para usar Ilustraciones en su marca

/en , , /por

Las ilustraciones pueden ser una forma de diferenciarse de sus competidores, generar una intriga en torno a su marca y relacionarse con su audiencia de una manera completamente diferente.

Las fotos de stock se han convertido rápidamente en una forma favorita para que las empresas usen en sus sitios web de forma rápida y económica con imágenes de aspecto profesional.

Una foto de alta calidad de una reunión o quizás una taza de café perfectamente posicionada puede parecer más atractiva que una página llena de texto. Pero, con un volumen cada vez mayor de empresas que utilizan los mismos recursos para imágenes de stock, cada vez es más difícil diferenciar los distintos sitios web.

Mientras tanto, las ilustraciones pueden ser una forma de diferenciarse de sus competidores, generar una intriga en torno a su marca y relacionarse con su audiencia de una manera completamente diferente.

Hemos reunido una lista de razones por las que debería considerar el uso de ilustración en su marca.

1. A la medida de tu marca.
2. Destacar en su industria.
3. Involúcrese con su audiencia.
4. Cuente su historia.
5. Enfocada a su negocio.

Este es un extracto traducido de el artículo originalmente publicado en Mattix

Dropbox siempre ha hecho uso de imágenes dibujadas a mano.
Headspace utiliza ilustraciones con los colores de su marca.

Las claves para un gran cambio de marca

/en /por

Consejos del dúo que renovó Chobani y Spotify

Hay una cierta duda y ansiedad envueltas en la frase «cambio de marca» y es fácil ver por qué. Incluso las empresas con mucho dinero y acceso a los mejores talentos luchan para lograr un cambio de marca exitoso, ya que los riesgos de alterar la identidad de la marca (todo lo que sus clientes saben por usted) son inherentemente altos.Pero los cambios de marca no deben ser una receta para el desastre.

En una conversación reciente con 99U, Brian Collins, director creativo y cofundador de la compañía de marca COLLINS, y Leland Maschmeyer, director creativo del fabricante de yogurt Chobani y cofundador de COLLINS, compartieron algunos de sus mejores consejos para ejecutar un exitoso rediseño de marca.

Éstos son algunos de sus pilares clave para el éxito.

1. Sea claro por qué necesita un cambio de marca.
2. Profundice en su historia.
3. Estar dispuesto a cambiar su historia.
4. Conecte lo que está haciendo con una idea futurista y deje espacio para que otros se unan.
5. Conoce a tus clientes donde están.
6. Haga que sus partes interesadas clave se comprometan profundamente.

Este es un extracto traducido de el artículo originalmente publicado en Adobe 99u

Materiales de la marca Chobani – Foto cortesía de COLLINS
Materiales de la marca Spotify – Foto cortesía de COLLINS