Preparación: investigar, recopilar.
Incubación: experimentar, sintetizar.
Iluminación: idear, imaginar.
Evaluación: criticar, replantear**.**
Implementación: construir, trabajar.
- ****Investigamos y recopilamos toda la información relativa a un problema o algo que queramos solucionar.
- ****Buscamos diferentes soluciones. Miramos como alguien ya lo soluciono.
- ****Aquí es donde se nos ocurre las ideas. Ideamos e imaginamos soluciones.
- ****Evaluamos si estas soluciones son prácticas, son viables. Vemos los fallos y si es necesario, replanteamos las soluciones.
- ****Construimos la idea hasta el producto final. “La creatividad es algo que se desarrolla”.
CONCEPTOS BÁSICOS DE DISEÑO
Conceptos básicos:
- Balance: Hace referencia a la estructura y a la estabilidad de la composición de la misma, en donde la posición de cada elemento está dada por su peso visual. Podemos tener un balance simétrico o asimétrico.
- Contraste: Lo podemos utilizar para señalar un concepto marcado por la diferencia entre dos elementos distintos. Ejemplo: claro – oscuro, grande – pequeño, etc.
- Alineación: Nos permite crear una ruta visual entre los diferentes elementos que queremos señalarle al usuario.
- Proximidad: Nos permite agrupar diferentes elementos, no necesariamente tiene que ser física, sino que podemos agrupar elementos utilizando colores, iconos u otro tipo de elementos.
- Repetición: Es muy utilizada para generar un concepto de marca.
- Espacio: Es el espacio es aprovechado de muchas maneras.
DISEÑO RESPONSIVO
Metodología para crear diferentes diseños que sean adaptables al tamaño de la pantalla.
- Empezar con móviles (básico)
- Separar capas de contenido y funcionalidad
- Sistema Grid y columnas
Metodología: Mejora progresiva
- Parte de una base solida
- Se van agregando mejoras dependiendo del tamaño o SO.
Pasos:
- Data – contenido
- HTML – Wireframes (bocetos)
- CSS – Diseño visual
- JS – Animaciones
Metodología: degradación agraciada
- Partimos de una versión completa
- Quitamos capas de complejidad dependiendo del tamaño y SO.
ACCESIBILIDAD Y DISEÑO
TIPS PARA LA ACCESIBILIDAD Y DISEÑO
Una parte importante del diseño es la accesibilidad. La accesibilidad es la posibilidad de que cualquier persona puede acceder a la web, no importa la incapacidad que tenga. Esta accesibilidad es obligatoria en todas las Webs.
- Usar los encabezados correctos en cada lugar.
- Usar fuentes legibles y visibles fácilmente.
- Usar el contraste de colores adecuadamente.
- Garantizar que los colores no sean el único código para relacionar el contenido.
- Diseña teniendo en cuenta los eventos de la página. No quitar el focus o el active, y que estos sean diferentes.
- Añade títulos descriptivos a los campos de un formulario.
- Los ALT y descripciones de las fotos y videos es vital.
- Evitar que las animaciones bloqueen el contenido.
BRIEF Y REQUERIMIENTOS TÉCNICOS
El primer elemento que debemos tener claro para construir una aplicación es el BRIEF.
¿Qué es el BRIEF? Es la hoja de ruta para empezar a diseñar. Es lo que se habló en los pasos del proceso creativo: investigar y recopilar toda la información relativa con el proyecto, con el problema a solucionar. Es donde apuntamos esos datos que hemos recopilado.
Las secciones más comunes son:
- Descripción del cliente o producto.
- Objetivos o retos.
- El target o audiencia al que va destinado ese producto o servicio.
- La competencia que puede haber.
- Como será la distribución.
Es importante que este documento sea bonito, este organizado y podamos ver bien la jerarquía de contenidos.
Es importante que cualquier persona que lea el BRIEF sepa que está leyendo.
Los objetivos es la parte más importante, porque de ahí vamos a partir para crear nuestro producto. También es bueno tener un cronograma donde vamos a poner las fechas de las entregas.
APRENDER SOBRE DISEÑO EXPERIENCIA DE USUARIO
DEFINICIÓN DE DISEÑO UX
Etapas de diseño:
- Investigación: Es la etapa donde recopilamos todo tipo de información que nos resulte útil, ya sea el comportamiento de los usuarios o como ellos manejan otras aplicaciones ya existentes.
- Análisis: En esta etapa clasificamos la información, la agrupamos y definimos objetivos a nivel de usuario.
- Diseño: En esta etapa es donde creamos los prototipos, flujos de usuario y cosas que nos permitirán saber cuáles son las mejores prácticas para nuestro usuario final.
- Pruebas de usuario: Es donde se realizan distintos tipos de pruebas, por lo general se hacen prototipos en papel o interactivos, pero no con un producto final. Esto nos permite hacer ajustes a nuestro diseño antes de mandarlo a producción.
DIAGRAMAS DE FLUJO
El primer paso del diseño UX son diagramas de flujos.
Requerimientos:
- Objetivos:
- Dar a conocer sus productos.
- Aumentar la presencia en línea.
- Hacer pedidos online.
- Dar a conocer su marca.
- Requerimiento:
- Menú y promociones.
- Redes sociales.
- Contacto y sucursales.
Un diagrama de flujo básico, muy sencillo, es el Site Map que nos permite ver un mapa de todas las secciones del sitio que nombramos anteriormente.
Este tipo de diagrama nos permite ver cuáles son las secciones principales, cuáles son las secundarias y cuáles son las externas, las que solamente serán un link desde nuestra página.
Otro tipo de diagrama, más complejo, son los User Flow:
Este nos permite ver el flujo general que debe completar un usuario para hacer su pedido.
WIREFRAMES Y COMPONENTES
¿Qué es un WireFrame? Es el plano de nuestra aplicación. En ellos hacemos nuestros bocetos en papel de todos los componentes y pantallas que no salieron en los flujos que hemos creado antes.
Los WireFrames dibujados a mano se consideran de baja calidad, pero con ellos podemos empezar a hacer pruebas de usuarios.
Podemos hacer estas pruebas de muchas formas. Lo importante es ver la usabilidad de los componentes y pantallas, si son muy complejos para los usuarios finales.
- Los WireFrames de alta fidelidad son los creados con programas de diseño.
Esta parte es importante en diseño y también en desarrollo, porque en esta etapa los desarrolladores van a ver el tamaño de la aplicación final, y poder hacer estimaciones, además de decidir con que herramientas lo va a programar.
También es importante que lo vea el cliente para que se haga una idea de que secciones va a tener su producto.
En esta etapa no se usan las paletas de colores. Solo es un boceto en blanco y negro o grises.
APRENDER SOBRE DISEÑO DE INTERFAZ DE USUARIO
DEFINICIÓN DE DISEÑO UI
Es el momento de ponerle color a los bocetos.
El diseño UI es el diseño que se enfoca en la capa de estilos visuales que va por encima de la estructura de contenido.
Se diferencia del UX en que este último se enfoca en la investigación, prototipado y arquitectura de la información.
De que se encarga cada diseño:
- UX:
- Diseño de interacción.
- Arquitectura de la información.
- Investigación y pruebas de usuario.
- UI:
- Diseño visual.
- Tipografías.
Cuando trabajamos con los dos diseños al mismo tiempo garantizamos que nuestra aplicación va a ser bonita, agradable y va a ser funcional para todos los usuarios. No debemos quitarle importancia a ninguno de los dos.
MOODBOARD Y LÍNEA GRÁFICA
¿Qué es un MOODBOARD? Es un documento o tablero donde pondremos referencias visuales que se usan como inspiración para un diseño. No hay ninguna regla para crearlo.
TEORÍA DEL COLOR
Para saber que colores son los adecuados a un diseño aplicamos la teoría del color.
- Psicología del color. Es un área de estudio que investiga la forma en la que el cerebro percibe los colores y los asocia a conceptos y sentimientos.
Los colores se asocian a ciertos sentimientos.
- Rojo: pasión, deportes, comida, entretenimiento.
- Naranja: diversión, arte, comida, eventos.
- Amarillo: felicidad, comida, compras, ocio.
- Verde claro: armonía, ambiente, comida, educación.
- Verde oscuro: seguridad, agro, bancos, inmobiliarias.
- Azul claro (celeste): sabiduría, productos de niños, salud, tecnología.
- Azul oscuro: confianza, finanzas, salud, seguros.
- Malva: misterio, religión, productos alternativos.
- Rosa: amor, belleza, moda, productos niños.
- Marrón (café): estabilidad, agro, legal, construcción.
- Gris: neutral, todas las industrias.
- Negro: elegancia, todas las industrias.
La idea es que uses la teoría del color para elegir los colores de tu aplicación según el problema que resuelve.
Otros tips para seleccionar los colores:
- Utilizar color RBG y hexadecimales.
- Crea un código de color consistente. Que todos los componentes de la misma categoría tengan el mismo color.
- Menos es más. No satures de colores el sitio.
- Asegura que el color elegido es accesible.
- Define una paleta de color. Esto es un grupo de colores que vamos a usar en toda nuestra aplicación.
PALETAS DE COLOR
Paleta de colores:
- Primarios: Amarillo, rojo y azul.
- Secundarios: Combinación de los primarios.
Terciarios:
Transición de primario a secundario.
