Mostrando entradas con la etiqueta diseño de interface. Mostrar todas las entradas
Mostrando entradas con la etiqueta diseño de interface. Mostrar todas las entradas

martes, 26 de junio de 2018

Herramientas de color III

¡Hola!

Bueno hoy les traigo nuevas y no tan nuevas herramientas de color para que les den una checada. Me gusta mucho coleccionar cosas y creo que lo mismo con estos productos XD. Aquí les traigo lo último que he estado visitando y que me ha encantdo.

1.- Flat UI COLORS
Expandieron las paletas de colores y ahora encontramos una gama mucho  más extendida y atractiva!
Aquí le sdejo en qué las he estado utilizando


2.-Material UI colors



3.-ColorDot



4.-Eggradients

5.-Colourco

6.-Khroma
 
7.-Material Color Tool
Material design nos ofrece esta hermosa herramienta para crear la paleta de colores de la app.

8.- Colo Suply
Una de is favoritas! color suply, Te ofrece herramientas para visualizar diferentes paletas y aplicaciones de color.


Update!

Navegando por la red, me encontré con dos recursos muy interesantes. Aqui les dejo las ligas.


 UI gradients


Gradients Guru

Una herramienta que te permite crear blends y combinacines sobre imágenes. Me encanta!



 Gracias por llegar hasta esta parte de la lista!

Déjame conocer tus opiniones manifestándoete en los comments.

Hasta la próxima!





miércoles, 18 de enero de 2017

5 principios para el diseño de Apps

¡Hola!

Cuando estamos diseñando una aplicación es de vital importancia tomar en cuenta ciertos principios en la toma de las deciciones de nuestra interface. A continuación te presento 5 pricipios que te ayudarán crear mejores experiencias

1.- Integridad


Con integridad, nos referimos a que el diseño de la aplicación deberá estar alineado con la situación para la cuál estamos diseñando. Si se trata de una aplicación que requiere la realización de tareas específicas, los elementos de la interface deberán permitir que el usuario se mantenga enfocado en dichas tareas, por medio de gráficos sutiles, componentes estándar y comportamientos previcibles (con los que ya esté familiarizado). En el caso contrario, cuando se trata de videojuegos y otras aplicaciones de entetenimiento, los gráficos aportan ese detalle interesante y llamativo que atrae a los usuarios y enriquece la experiencia

2.- Manipulación directa


Este principio se asocia con las acciones que el usuario realiza sobre los componentes de la interface, que deben reflejarse como resultados inmediatos en las pantallas de los dispositivos. ¿Has notado que el primer indicador de que algo va mal es cuándo se congela la pantalla de la app? XD

3.- Consistencia


Utilizando un sistema de elementos estándar y bien conocido por los usuarios, la consistencia indica que las interfaces deberán comportarse "como el usuario esperaría que funcionen". Recordemos que hemos sido resultado de años de evolución tecnológica y muchos paradigmas siguen vigentes hasta nuestros días. (Te estoy viendo iconito de guardado)


4.- Feedback!


Uno de mis aspectos favoritos es el feedback. Creo que es una de las características más improtantes de una interface, ya que indica que para cada acción existe una reacción (si, tal cual). La finalidad de proveer de feedback es la de mantener a los usuarios informados sobre lo que ocurre durante la experiencia y hoy en día y dado el avance de los dispositivos, es posible proveer de información al usuario de muchas maneras: Highligths, barras de estado, mensajes bloqueantes, y funciones propias de los dispositivos, como sonidos, animaciones y más.

5.- Metáforas


El propósito de una interface y en general de cualquier GUI, es el de comunicar una máquina con el ser humano. La metáfora, permite abstraer elementos de la vida real en las experiencias tecnológicas, y es por eso que en las interfaces podemos, arrastrar elementos, "tirar elementos", mover objetos, gustar de algo, presionar botones, etc. La finalidad de la metáfora es hacer uso de comportamientos familiares de los usuarios, para crear mejores experiencias.


Bonus: El usuario tiene el control


El buen diseño de una aplicación permite empoderar  a los usuarios, ya que unicamente mediante sugerencias y advertencias puede permitir que los usuarios tomen las deciciones. Actualmente, es posible empoderar al usuario mediante elementos de comportamiento previcible y familiar. Utilizando alertas y confirmaciones para operaciones muy importantes o simplemente cancelándolas una vez que ya las realizamos.

Este es un comportamiento que estará siendo explorado en el futuro, ya que mediante formas de comunicación cada vez más inteligente, las interfaces podrán realizar tareas cada vez más complejas, basadas en nuestros comportamientos personales, anticipándose a nuestras decisiones  (Siri, Kortana, o Samantha de Her XD).

Un futuro muy prometedor




martes, 23 de febrero de 2016

Color para web Parte II



¿Cómo elijo la mejor combinación para mi sitio web?

Anteriormente hablamos sobre el color en sitios web y aplicaciones. Como vimos, se trata de un elemento de suma importancia para un proyecto y se involucra directamente en aspectos de diseño, usabilidad, accesibilidad y experiencia de usuario. Ahora bien, vamos a hablar acerca de cómo elegir los colores para un proyecto Web. Estos son algunos métodos y herramientas a tomar en consideración.


1.- Psicología del color.


Todo proyecto de diseño web debe girar en torno a un objetivo específico. La psicología del color nos ayuda a entender cuáles son las emociones que los usuarios perciben al ver los colores que hemos utilizado en nuestro diseño.

El color es importante, ya que inspira, y ayuda a establecer una relación con el usuario mientras éste interactúa con el sitio o aplicación.

Ahora bien, cada color está asociado con un significado que afecta al resultado final del diseño y de la experiencia de usuario. Por ejemplo, el rojo está asociado a la pasión y amor. El uso de este color es fundamental para la emisión de alertas o peligro. El verde está asociado a naturaleza y dependiendo del tono, puede ser asociado a la milicia o a los bosques. 

El morado es un color místico, excénrico y asociado con la realeza


Entender el significado de los colores, es de vital importancia a la hora de planear el diseño de un sitio web.

2.- Identidad Corporativa


Esta es una forma bastante sencilla de optar por una paleta de colores. Si trabajamos con una organización que tiene el respaldo de una identidad de marca. Lo más acorde, es utilizar los colores especificados en el branding o manejo de la marca, ya que previamente han sido elegidos por su significado, y están alineados con los objetivos, ideales y expectativas de clientes y usuarios.


El website de coca cola utiliza el color rojo característico de la marca

3.- Color a partir de una imagen


Una forma bastante eficiente para determinar el color de un Sitio Web o aplicación, es obtener una paleta de colores a partir de una imagen con una combinación natural de colores.
Para ello, es necesario utilizar Adobe Photoshop o cualquier otro editor de imágenes, que permita aplicar un filtro “Mosaico” sobre la imagen.

De esta forma, obtendremos un rangos de sombras y contrastes, de forma natural.





4.- Herramientas en línea


Partiendo de la teoría del color, existen diferentes herramientas en línea que permiten la creación de esquemas para diseños web. Aquí algunas de las que más me han llamado la atención.



Adobe Color CC


Previamente llamado Kuler, es un servicio de Adobe que permite la creación de paletas de colores mediante la rueda cromática o partir de una imagen. De igual forma permite guardar los colores en forma de temas.

Paletton




Antes conocido como Color Scheme Designer, es una herramienta similar a CC. Permite la creación de paletas mediante diferentes algoritmos matemáticos. Mi parte favorita es el poder apreciar los colores en forma de sitio web, patrón o patrón en movimiento.

Flat UI colors

Con el auge de las tendencias flat, esta herramienta nos proporciona los colores y códigos para utilizar en nuestra interface. Generalmente solo utilizan un valor para sombras y otro para iluminaciones. Permite exportar en el portapapeles, y ver en codigo RGB, o Hexadecimal.




ColourLovers

ColourLovers, es una comunidad creada para la creación de paletas de color, y compartiralas con otros aficionados al color. Puedes buscar paletas relacionadas con palabras clave o bien mediante código. Es una muy buena fuente de inspiración



Coolors

Creada por Fabrizio Bianchi, es una aplicación que permite crear paletas de color mediante iteraciones. Es una forma realmente sencilla de hacer combinaciones



Color hunter

 Una herramienta creada para diseñar paletas de color a partir de imágenes. De igual forma, puedes encontrar paletas de color mediante palabras clave.


Shutterstock Spectrum

 Muchas veces, la mejor forma de observar si una paleta de colores funciona, es por medio de imágenes de stock. Shutterstock ofrece una herramienta para encontrar fotografias mediante palabras clave o bien mediante tono y saturación.



viernes, 31 de julio de 2015

Roles en proyectos de Desarrollo Web





Parte fundamental de cualquier proyecto de desarrollo web, es la definición de los roles de trabajo que van a intervenir en el mismo. Comúnmente, se suele creer que una sola persona debería ser capaz de llevar a cabo todas las tareas que son requeridas. No obstante y eso si, dependiendo de la magnitud del proyecto existen diferentes personajes que deben realizar tareas especificas, a fin de cumplir con los objetivos. En el articulo de en turno, vamos a exponer los roles principales, presentes en el desarrollo web y experiencia de usuario.



Diseñador de Interacción.



El diseñador de interacción, es el encargado de realizar wireframes, y de la organización de flujos en los procesos del sitio web. Principalmente. Se trata de la creación de interfaces, basadas en comportamientos de los usuarios. Es un enfoque basado en encontrar problemas a tiempo, o bien, de encontrar nuevas formas de hacer interactuar a los usuarios y la tecnología.

algunas de las metodologías empleadas en el diseño de interacción son :  diseño orientado en los objetivos, personas, dimensiones cognitivas, diseño de interacción afectivo.

Un ejemplo de diseño de interacción centrado en personas, radica en la tarea de investigar a profundidad a los usuarios meta del sitio web o aplicación, y a partir de ahí, crear escenarios hipotéticos para dar cara y ojos a las personas para quienes vamos a diseñar.

Otro ejemplo, es la creación de esquemas o flujos de integración entre las diferentes pantallas de la aplicación, creación de momentos interesantes.







Arquitecto de información


Es el encargado de diseñar la navegación para el sitio web. Así mismo, tiene la tarea de llevar a cabo la organización jerárquica. 

el término de los tiempos en los que recién era inventado el hipertexto (origen de la WEB). Se trata de la organización estructural de información compartida (como los sistemas de hipertexto, intranets o la misma web), aunque es un término aplicable a muchos otros aspectos.

el objetivo principal de los arquitectos de información, es el de ayudar a los usuarios a encontrar información en sistemas complejos y a completar tareas. Para ello , se busca la forma en la que cada pieza individual, encaja en el sistema completo , y de la relación y semántica entre los contenidos.

Algunas tareas asociadas con arquitectura de información son: card sorting, diagramas de navegación e inventarios de contenido.





Diseñador de interface o UI designer


Es el diseñador gráfico del proyecto. Es el encargado de elaborar el diseño visual alineado con los objetivos del sitio web. Es el que decide paletas de colores, tipografías e imágenes que van a ser utilizadas, a fin de preservar los estándares de usabilidad que son requeridos.

Es el encargado de crear los diseño en programas de diseño, tales como Adobe Photoshop, Adobe Illustrator u otros editores gráficos, partiendo de moodboards y de kits de interfaces.





Front-end developer


Es el encargado de codificar los diseños generados por el diseñador de interface. Conoce lenguajes para crear el layout del sitio web en HTML(esqueleto) y también estilo (CSS). Así mismo debe tener conocimientos en lenguajes y librerías para manipulación del DOM (document object model).




Back-end Developer. 


Es el encragado de progrmar las reglas del negocio para el funcionamiento de una aplicación, y de las partes que así lo requieran en sitio web (Accesos por ejemplo). Tiene conocimiento en bases de datos y lenguajes de programación.


Conclusión


Si bien, aunque estas son descripciones de cada uno de los roles de forma individual, las personas pueden tomar diferentes papeles, dependiendo del tamaño del equipo y del proyecto. Así encontramos  diseñadores de UI, que pueden ser Front en developers o bien diseñadores de interacción en tareas de arquitectura de información.