UX design por sus siglas en inglés (User Experience) o en español Experiencia de Usuario, es aquello que una persona percibe al interactuar con un producto o servicio. Logramos una buena UX al enfocarnos en diseñar productos útiles, usables y deseables, lo cual influye en que el usuario se sienta satisfecho, feliz y encantado.
UI design por sus siglas en inglés (User Interface) o en español Interfaz del Usuario, es la vista que permite a un usuario interactuar de manera efectiva con un sistema. Es la suma de una arquitectura de información, elementos visuales y patrones de interacción. El UI da el ‘look & feel’ al producto con la estructura e interacción de los elementos de la interfaz.
Visita mssroboto para mas informacion.
El brief o briefing es un documento informativo que contiene la información imprescindible para poder empezar a planificar o ejecutar un proyecto. Se trata de un documento muy habitual en el mundo de la publicidad y la comunicación, aunque también se ve en otro tipo de sectores, en el que el cliente, a través de este documento, describe sus necesidades y deseos para la realización de un proyecto a una agencia o proveedor.
Un brief debe ser preciso, completo y especifico.
- Descripcion.
- Objetivos.
- Publico Objetivo.
- Competencia
- Distribucion.
- Cronograma.
Para crear un logo tenemos que tener varios factores importantes, ya que solo comunica un unico concepto.
Luego de tener el brief resaltar las palabras claves, las que se repiten y las mas relevantes. Teniendo eso escogemos la palabra mas importante con la que vamos a trabajar (concepto) y ver su significado.
Al tener todo el brief hecho, hacer el moodboard y la lluvia de idea.
Antes de hacer un logo tenemos que ver si funciona bien el logotipo.
- Un logo no es bonito.
- Un logo no dice mucho de mi.
- Un logo no es amor a primera vista.
- Un logo no es igual a la competencia.
¿Que piensas sobre tu logo?
Percepcion general.
¿Cual sera el publico de este logo?
Quienes se relacionaran con el.
¿Cual es la personalidad de la marca?
Formal, informal, sobria, natural, etc.
¿Si el logo fuera un unico concepto?
En que debemos enfocarnos.
¿Es el color algo relevante?
Hay alguna fijacion particular.
¿Que hay que evitar?
Cosas no deseadas.
¿Cual es la meta?
¿Cual es el problema de diseño?
¿Cuantas versiones habra?
¿Quien es el responsable?
¿Con cuanto tiempo contamos?
User Flow es la ruta que sigue un usuario en un sitio web o aplicación para completar una tarea. El flujo de usuario comprende desde el punto de su entrada sumando el conjunto de pasos que ejecuta hasta que completa la tarea con un resultado exitoso.
Un wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.
El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc. Además, te permite como interactuarán estos elementos entre sí.
Columnas
| Dispositivo | Columnas | Margen | Gutter |
|---|---|---|---|
| Movil | 4 | 24 | 16 |
| Table | 8 | 32 | 16 |
| Escritorio | 12 | 80-160 | 16 |
Filas
| Dispositivo | Filas | Margen | Gutter |
|---|---|---|---|
| Todos | 1000 | 0 | 0 |
La proporción áurea o en ingles (golden ratio) es un número especial
aproximadamente igual a 1,618. Tambien existe una relación especial
entre la proporción áurea y la secuencia de fibonacci ya que al
dividir el termino anterior y el termino siguiente de la secuencia de
fibonacci este se va acercando mas a el numero que equivale la
proporción aurea.
La secuencia de fibonacci empieza desde los numeros 0 y 1 y es la
sucesion de la suma de los dos numeros anteriores:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34...
Visita uxdesign para mas informacion.
La proporción áurea puede ayudarlo a determinar qué tamaño de fuente debe usar para los encabezados y el cuerpo de un sitio web, página de destino, publicación de blog o incluso campaña impresa.
Supongamos que su cuerpo de texto es de 12px. Si multiplica 12 por 1.618, obtendrá 19.416, lo que significa que un tamaño de texto de encabezado es de 19px o 20px seguiría la Proporción áurea y equilibraría el tamaño de fuente del cuerpo de 12px.
Si desea averiguar qué tan grande debe ser el tamaño del texto del cuerpo, puede hacer lo contrario. Si el texto de su encabezado es de 25 px, puede dividirlo por 1.618 para encontrar el texto del cuerpo que seria de 15px o 16px.
| Dispositivo | Escala | Valor |
|---|---|---|
| Movil | Major Second | 1.125 |
| Movil | Minor Third | 1.200 |
| Escritorio | Perfect Fourth | 1.333 |
| Escritorio | Golden Ratio | 1.618 |
El punto de partida para la tipografia web puede ser entre 14px y 25px, pero por defecto es 16px que es el adecuado. El espaciado entre líneas debe ser entre 140% - 160% del tamaño del texto y el parrafo de texto debe contener maximo 70 caracteres por linea en escritorio y 40 caracteres por linea en móvil.
Un logotipo bien concebido es vital para su marca, de modo que las personas puedan comprender su mensaje central casi de un vistazo. Por eso es una gran idea considerar la proporción áurea al diseñar un logotipo para atraer instantáneamente a las personas y ayudarlas a conectarse. De hecho, muchas de las marcas más importantes del mundo utilizan la proporción áurea para formar sus logotipos: Pepsi, Apple y Twitter, por nombrar solo algunas.
Al diseñar un logotipo, incluso puede imaginar la secuencia de Fibonacci como una serie de círculos, luego reorganizarlos para formar una cuadrícula como base para el diseño de su logotipo. Esta es la base de muchos logotipos, incluido el pájaro de Twitter.
Aprovechar la proporción áurea puede ayudarlo a diseñar una interfaz de usuario visualmente atractiva que llame la atención del usuario sobre lo que más importa. Por ejemplo, una página que destaca un bloque amplio de contenido a la izquierda con una columna más estrecha a la derecha puede seguir las proporciones de la Proporción Áurea y ayudarlo a decidir dónde colocar el contenido más importante.
Negro: autoridad, poder, misterio y fuerza.
Gris: equilibrio y sofisticacion.
Blanco: sencillez, luz y limpieza.
Rojo: energico, intenso, agresivo, amor y pasion.
Rosa: cariño, femenino, tierno y sensible.
Amarillo: luz, alegre, informal y dominante.
Naranja: calido, creativo, apetitoso y joven.
Verde: calmado, natural, libre, joven, saludable, riqueza y seguridad.
Azul: paz, frescura, lealtad, confianza, estable, profundo y seguridad.
Violeta: lujo, sofisticado y romantico.
Marron: Autenticidad, solidez y seguridad.
San Serif: neutral y amable.
Serif: tradicion y firmeza.
Script: personalidad y estilo.
Diseño: Figma.
Tipografia: Google Fonts y Type Scale.
Color: Adobe Color, Coolors y Color Hunt.
Imagenes: Unsplash.
Website: Land Book, Awwwards y One Page Love.
Branding: Shopify.