miércoles, 24 de mayo de 2017

Cerramo!

¡cerramos! ha sido una buena experiencia compartir algunas cosas con ustedes por aquí. Lamnetablmente cerramos este blog para pasar a una nueva etapa en medium! conla finalidad de alcanzar más personas. A todos los que en este corto pero importante periodo me siguieron gracias, ya hi moveremos todos los posts! salu2

jueves, 30 de marzo de 2017

Íconos Grátis



¡Hola! Bueno, recientemente no he podido actualizar el contenido de este blog, y mucho menos subir cosas nuevas. He estado pensando en cerrarlo y mudarme a Medium, pero eso es algo que aún estoy por decidir. Hoy les traigo una colección de íconos en la que estoy trabajando actualmente. Espero tener tiempo para hacer más. Todos estan disponibles para descargar aquí


El proyecto en behance aquí




Recuerda comentar y compartir! Es el mejor pago ever! Saludos

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




lunes, 16 de enero de 2017

Mi experiencia con Dribbble

Hola!

New year new posts!

Este es un nuevo tipo de entrada en la que espero compartir algunas de mis experiencias en el mundo del diseño y de la red. En esta ocasión quiero contarles de Dribbble, que muy probablemente ustedes ya conocen.

Denominada como el Twitter de los diseñadores, Dribbble es una red social enfocada en compartir pequeñas instantáneas o "shots" del trabajo que vamos desarrollando.

Un poco de Historia...

Dribbble es una plataforma para creativos de diferentes áreas como UI/UX, Ilustración y diseño en general. Fué fundada en 2009 por Dan Cederholm and Rich Thornett con base en Salem (miedodotorg). y cuenta con un estimado de 460,000 usuarios y 656,232,100,593 pixeles dribbbleados (?) compitiendo directamente con Behance de Adobe.

Es una plataforma que funciona  a base de compartir pequeños avances de trabajo en diferentes formatos y el que a mi gusto es el más interesante es el GIF. Los diseños que ahí se comparten son producto de proyectos personales y para empresas, siendo una de las fuentes principales de consulta para componenetes específicos (Si, buscas un tipo de componente y te salen resultados muy apegados a lo que tenías en mente). 




Cuenta principalmente con dos tipos de cuentas, las de pago y las gratuitas. En la versión gratuita puedes hacer las funciones básicas de publicación, mientras que las versiones de pago extienden la funcionalidad para agregar pantallas adicionales e incluso descarga de recursos. 

El sistema de invitaciones

Para entrar en Dribbble puedes crearte una cuenta gratuita o de pago con la que no podrás compartir nada (Yo intenté pagar esperando compartir). Y deberás conseguir alguna de las invitaciones que ofrecen otros usuarios. Al cabo de unos días recibes la respuesta y ya puedes compartir tu trabajo. Existen algunas criticas a este aspecto de la red social, ya que se le denomina elitista ya que solo depués de ser aprobado por otro diseñador puedes entrar.

Mi experiencia

Ahora bien, les platico de lo que Dribbble a significado para mi. Cuando supe de esta red me emocioné mucho, ya que al fin podría  compartir mis proyectos en esta nueva red social, que había ya visto circulando por internet, especialmente en TUMBLR. Me hice la cuenta y de inmediato me percaté de que no podría compartir nada. Así que me puse a investigar como...

Intenté comprar una cuenta pero en los beneficios de las cuentas pro tampoco se puede compartir, y leyendo en las preguntas frecuentes me enteré de que debía obtener una invitación.  

La dinámica es la siguiente. Buscas una publicación de invitación (si no está ya vencida) y sigues las reglas del anunciador, que son normalemente: Seguirle, Enviar tu mejor shot a su email y esperar cerca de un mes o dos semanas (Combate a muerte XD) y finalmente ver que otro se ha llevado la invitación.

Sin darme por vencido, intenté muchas veces, pero sin obtener resultado alguno. Finalmente decidí buscar en el Dios Google ¿Cómo obtener una invitación a Dribbble? y de entre todos los resultados, el que más me gusto fue Cribbble, una app que te provee de invitaciones al momento. 
Luego de algunas esperas, finalmente mi oportunidad llegó con un usuario de Shangai, el buen King Chen (síganlo) que me proporcionó una invitación luego de haberle enviado un conmovedor e-mail que expresaba mis más profundas ganas de entrar a compartir en Dribbble ;)
Mi anuncio de ganador. Aw, Qué bonito


#Me al recibir my invite
Cuando al fin pude compartir mis shots me sentí un ganador, ya que al ser debutante, en automático entras a modo spootligth, en que tu primer shot es el protagonista. Muchos likes, Muchos coments y la magia se termina. Ahora deberás ser constante y publicar tu mejor shot, para ganar seguidores y hacerte popular. FIN

Me ha gustado mucho Dribbble, ver lo que ahí se publica es definitivamente estimulante y puedes ser muy creativo en lo que vas a compartir. Es una gran experiencia y espero ser más constante ahí. 

Siganme aquí https://dribbble.com/davisai_gomez 

¡Hasta la próxima!

lunes, 28 de noviembre de 2016

Principios de diseño

design cube


¡Hola!, recientemente estuve buscando en internet unos recursos relacionados con experiencia de usuario: las notas mentales. Sin embargo no pude encontrar el deck ya que había quedado en desuso. Para mi gran fortuna, pude encontrar otro recurso igual de interesante llamado "Mental notes behaviour cube", un resumen de las notas mentales en una peculiar presentación. Con esto en mente quise hacer algo similar, y el día de hoy les comprato el "UI/UX design principles design cube", dónde hago un resumen de los principios básicos de diseño.


Semejanza

Según este principio, los objetos se pueden agrupar de acuerdo a forma y color. Esto con la finalidad de diferenciar los elementos y dar una sensación de claridad.

Por ejemplo, en una interfaz, podemos identificar qué elementos son clickeables de acuerdo al color. Otros pueden ser identificados como botones, ya que tienen las características de uno.




Forma y fondo

Esté es uno de los principios del diseño gráfico más interesantes. He visto composiciones que juegan con la forma en que nuestra mente interpreta los objetos en una imagen. Es muy comun observar la aplicación de este concepto en diseño de logotipos y carteles. En cuanto a UI, no he podido conseguir una aplicación tal cúal, más que en los logotipo que se usan en las apicaciones o páginas. No obstante, de acuerdo con algunos diseñadores. este pricipio se aplica al momento de crear elementos que se superponen sobre otros, por ejemplo tooltips y layers que deben ofrecer una apariencia "por encima" de los demás. Material design ofrece un concepto del significado de la elevación en el diseño que a mi parecer no había sido explotado con anterioridad. Un ejemplo aún más explicito del uso del principio es el layout de cualquier app o website, ya que el usuario, por naturaleza, busca identificar qué elementos conforman la interface (interactivos / Figura) del espacio donde se encuentran ubicados (fondo)



 Destino común

Si los elementos se mueven en la misma dirección, serán percibidos como un grupo. En cuanto a UI, los elementos que realicen el mismo comportamiento en cierto punto de la interacción, reaccionarán de la misma forma. Por ejemplo, al arrastrar elementos a la papelera de reciclaje, a una lista o a una carpeta. Dichos Items deberán demostrar el mismo funcionamiento.




Simetría

De aquí se deriva uno de los principios visuales más importantes relcionados a layout.  La simetría propone una organización de las formas de tal forma que el usuario pueda identificar con mayor claridad y órden los eleemntos que componen la interface.
 El órden y la sencación de equilibrio dan base a una buena experiencia de usuario.



Proximidad

El usuario percibirá los objetos localizados en una una mima área como un grupo. Es el pricipio básico para ordenar layouts, grupos de funciones, menús, etc.




Éstos son tan sólo unos principios que permiten la creació de buenas interfaces.


Aquí está el archivo para descargar.

¡Qué se diviertan!

viernes, 25 de noviembre de 2016

Free Movie Blog template

¡Hola! 


Les traigo un nuevo aporte. Hace poco tuve que hacer una prueba de diseño para una vacante en una empresa. La verdad, tomé el desafío mas que nada por la experiencia, y porque tenía aabndonada la parte de código un poco. Sin embargo, la prueba fue un desastre y no quedaron conformes con lo que había presentado, así que decidí arreglar todos los detalles y enviarla de nuevo. La verdad es que el resultado de la vacante no me interesaba mucho, pero quería saber que podía con el reto. Sin embargo me quedé sin respuesta, pero aprendi cosas nuevas y decidí elaborar un nuevo freebie para ustedes. Se trata de un blog en foundation, con layout básico, tánto en código como en diseño en sketch (de mi experiencia con sketch les platico luego) y aquí lo tienen. espero les sirva





Formato: Sketch
Resolución: 72px.
Se abre con : Skecth App


lunes, 14 de marzo de 2016

Free Email Template

Descripción y detalles

¡¡Primer freebie del año!!. Se trata de un atractivo Email Newsletter en diseño PSD, enfocado en viajes y turismo. Consta de tres partes principales. Encabezado, promociones y artículos. Espero les sirva de algo. Espero tener una versión en código próximamente.




Formato: PSD en capas
Objetos inteligentes: Si
Resolución: 72px.
Minimum Photoshop Version: CS6
CSS+HTML: No



GET YOUR FREE FORMS HERE


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.



martes, 9 de febrero de 2016

Color para sitios Web



El color es quizá el primer elemento que los usuarios perciben cuando visitan un sitio Web. Los colores trasmiten ciertas sensaciones y ello aportan un significado en composiciones gráficas. Es así, que los diseñadores debemos realizar las combinaciones de colores y crear paletas de color con la finalidad de complementar el mensaje que el sitio Web desea comunicar y reforzar la identidad de la empresa u organización detras del website.

Antes de empezar, debemos tener un concepto claro del color. El cerebro humano tiene la capacidad de recibir señales de luz provenientes de nuestro entorno. Al mismo tiempo, los materiales pueden reflejar o absorber las ondas de luz, que conforman los colores. Estos reflejos, son capaces de estimular las terminales nerviosas del cerebro, que es al fin de cuentas lo que interpretamos como color. El ojo humano percibe estas longitudes cuando la iluminación es abundante (por ejemplo, en el día) y el cerebro identifica cada color que conocemos, dependiendo de la longitud de onda que pueda percibir.



El color se puede clasificar de dos formas: orgánico y digital. La primera clasificación, es aquella que se refiere a los colores que se perciben en la naturaleza y la segunda, es exclusiva del color que se produce en medios electrónicos, por ejemplo en pantallas de led. Cuando la cantidad de luz es limitada, los colores se perciben en blanco y negro. Adicionalmente y con base en lo anterior, se identifican dos tipos de síntesis para la creación de colores: la síntesis aditiva(a partir de luz) y la sustractiva (pigmentos de color). En el primer caso, el color blanco resulta de la unión de todos los colores, mientras que el color negro resulta de la ausencia de los mismos. En la síntesis sustractiva, el color blanco representa la ausencia de color y el negro resulta de la combinación de todos los pigmentos. 

De igual forma, los colores también pueden ser clasificados de acuerdo con su posición en el círculo cromático recibiendo los nombres de primarios, secundarios y terciarios. 



  • Los primarios son aquellos que no pueden obtenerse mezclando otros colores.
  • Los secundarios son el resultado de la combinación de dos colores primarios.
  • Finalmente los colores terciarios resultan de la combinación de un color primario y un color secundario.

Por consiguiente, existen otros esquemas para determinar las relaciones entre los colores, permitiendo así la existencia de colores complementarios, colores complementarios dividíos, triadas de color y análogos. 


La elección de la combinación adecuada.


Por el lado de la organización, la elección adecuada de los colores en los sitios Web, enfatiza en la elección de una paleta representativa de la organización (por ejemplo colores corporativos) o bien, una paleta compuesta de colores relacionados con los objetivos del sitio. 
En el aspecto de los sitios Web, lo más importante es reconocer los tres principales factores que intervienen para la elección de una combinación de colores adecuada. Como se ha mencionado desde el principio de este apartado, esos elementos son el usuario, la organización y la tecnología. Pensar en el usuario, significa que los colores permitirán la correcta visualización de los elementos mediante el empleo de contrastes, luminosidad, brillo y legibilidad adecuados. El error más común, radica en la selección de colores que dificulten la lectura de la información y consumo de los contenidos o bien, que hagan a los usuarios realizar mayores esfuerzos con la vista, a tal punto que decidan abandonar el sitio. 

Por el lado de la organización, la elección adecuada de los colores en los sitios Web, enfatiza en la elección de una paleta representativa de la organización (por ejemplo colores corporativos) o bien, una paleta compuesta de colores relacionados con los objetivos del sitio. 

En el aspecto tecnológico, lo más importante que hay que destacar, es el uso adecuado de los esquemas de color. La Web principalmente utiliza el tipo de color aditivo, creado a partir de luz. La combinación de los tres colores primarios, e n este caso Rojo(R), Verde (G) y Azul (B) es la que posibilita visualizar cualquier color en las páginas Web. El RGB, es un modelo de colores y se utiliza principalmente para agrupar y controlar los colores en pantallas. Adicionalmente existen otros modelos, como CYMK y Websafe. El primero de ellos correspondiente a modelos de impresión y el segundo, un conjunto de colores seguros en las pantallas. Actualmente las hojas de CSS son capaces de utilizar ambos los modelos RGB y Websafe, para la definición de colores. Utilizar un modelo de color inapropiado, constituye un serio problema con la visualización del contenido de forma correcta (el modelo CYMK no es soportado por la Web). 



sábado, 26 de diciembre de 2015

Great Looking Free Login Forms PSD


Descripción y detalles

Feliz navidad. En esta ocasión, les traigo un nuevo aporte. Basándome en algunos aspectos de material design, he creado un kit sencillo de formularios básicos para web: registro, login, suscripción y recuperación de contraseña. Espero les sea de utilidad para desarrollar sus propias interfaces, utilizando los estilos que ahi he colocado.



Formato: PSD en capas
Objetos inteligentes: Si
Resolución: 72px.
Minimum Photoshop Version: CS6