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


miércoles, 2 de diciembre de 2015

Tutorial: Crea íconos estilo flat en Illustrator



Hola!

En esta ocasión, quiero compartir con ustedes un sencillo tutorial de adobe illustrator, para dar un aspecto flat a los íconos en nuestras interfaces.

Antes de empezar, quiero comentar algunos aspectos del diseño Flat. Actualmente es la tendencia más notable tanto en diseño de aplicaciones, interfaces de sitios web, sistemas operativos y cada vez se va integrando más al entorno de los seres humanos. Si bien, el Flat design, es el resultado de aplicar el paradigma del minimalismo en el diseño, ya que reduce al mínimo los elementos para la creación de los objetos en una interface. Al mismo tiempo, se puede decir que los íconos estilo flat, son una variante de los íconos de perspectiva de un punto, ya que como su nombre indica, solo existe un punto de fuga en el diseño. De los tipos de íconos según los puntos de fuga(perspectiva), hablaré en próximas entradas.



Ahora bien, comencemos con el ejercicio.


Paso 1


Creamos un nuevo documento en Illustrator de 500px x 500px. Trabajar con illustrator permite un mejor manejo de la escalabilidad de íconos (los formatos SVG tienen gran soporte hoy en día).



Paso 2:


Creamos un nuevo rectángulo redondeado con los valores de la imagen.

Paso 3:


Para los colores de los íconos he utilizado la herramienta Flat UI Colors dónde se nos presenta una gama de colores en brillo y contraste bastante simple. Rellenamos el cuadro con el color #3498db.

Paso 4:

A continuación colocamos el ícono que vamos a utilizar, en este caso, he creado un ícono de usuario, que he formato utilizando dos círculos y buscatrazos.

Paso 5:

A continuación duplicamos el icono y le damos un color negro para diferenciar la sombra principal.

Paso 6:

El siguiente paso es duplicar nuevamente nuestra ícono y moverlo unos cuantos pixeles hacia abajo, dependiendo de la dirección y el tamaño que vamos a querer de la sombra.

Paso 7:

En el panel de herramientas, nos dirigimos a la herramienta fusión (W) y hacemos click en el objeto superior y luego en el inferior de la sombra. Por defecto, nos creará la fusión con los valores predeterminados.

Paso 8:

Seleccionamos nuestra fusión y hacemos doble click en la herramienta fusión, hasta que aparezca el cuadro de diálogo que vemos en la imagen. Para este tutorial he usado un valor de 100 en la casilla de espacios especificados.

Paso 9:

Ahora bien, seleccionamos la primera forma de la fusión y le aplicamos un color de relleno de #2980b9.

Paso 10:

Para la forma inferior de la fusión, utilizamos un color de relleno igual al color base del cuadro del ícono, creando el efecto difuminado.

Paso 11:

Ahora enviamos la sombra detrás de el ícono original y con ello terminamos.

Consejos

Cuando se crea un set de íconos, lo principal es la consistencia, de manera que es preferible utilizar la misma paleta de colores, ángulos y tamaños para la sombras.


Espero les sirva.



Tus comentarios son el mejor aporte. :)