EL PROCESO CREATIVO.
Los pasos del proceso creativo:
“La creatividad es algo que se desarrolla”
6 CONCEPTOS BÁSICOS DEL DISEÑO:
Te ayudan tanto en composiciones de ilustraciones, webs, editoriales, etc.
-. Balance: La estructura y estabilidad de una composición en donde la posición de cada elemento está dada por su peso visual. puede ser un balance simétrico o asimétrico.
-. Contraste: lo usamos para señalar un concepto marcando la diferencia, ya sea por tamaño, color, etc. de dos elementos distintos.
-. Alineación: nos permite crear una ruta visual entre diferentes elementos que queremos señalar al usuario.
-. Proximidad: nos permite agrupar diferentes elementos. Puede ser por formas, colores, etc. o físicamente.
-. Repetición: se usa para generar un concepto de marca. Muchas marcas usan siempre los mismos colores, formas, tipos de letras, etc. Ayuda a reforzar un concepto.
-. Espacio: El espacio lo podemos aprovechar colocando elementos de muchas maneras. Podemos poner elementos para reforzar una idea, siempre evitando recargar la composición.
DISEÑO RESPONSIVO.
Es una metodología que nos permite crear diferentes diseños que sean adaptables a diferentes dispositivos.
¿Cómo garantizamos que nuestro diseño sea responsivo?
1º Tenemos que empezar por dispositivos móviles. Esto nos garantiza que partimos desde el contenido básico hasta el contenido más complejo.
2º Separando las capas de contenido con la de funcionalidad. Así aseguramos que todo el contenido este accesible a todos los usuarios.
3º Utilizar sistemas de Grilla y columnas. Las columnas son referencia para dividir el ancho de la página. Así es más fácil el diseño.
DIFERENTES METODOLOGÍAS.
-. Mejora progresiva. (Progressive enhacement) Se parte de una base donde tenemos solo los elementos esenciales del diseño para un movil, e iremos ampliando la complejidad a medida que vamos subiendo hasta el PC.
-. Degradación Agraciada. (Graceful degradation) Empezamos desde una versión completa y vamos reduciendo la complejidad a medida que bajamos de dispositivo.
Este método se usa sobre todo cuando la web ya esta hecha y queremos adaptarla a móviles o tablets.
Estas metodologías afectan tanto al diseño como a la funcionalidad.
En diseño En Código
4º Animaciones 4º JS
3º Diseño Visual 3º CSS
2º Wireframes 2º HTML
1º Contenido 1º Data
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 pueda acceder a la web, no importa la incapacidad que tenga. Esta accesibilidad es obligatoria en todas la 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 en la 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.
• Cómo 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.
DEFINICIÓN DE DISEÑO UX (Diseño de experiencia de usuario)
Debemos diseñar nuestro software para que sea amigable con el usuario. Este diseño se centra en los usuarios y en la usabilidad.
El diseño UX tiene varias etapas:
1-. Investigación. Recopilamos datos de como se comportan los usuarios y como manejan otras aplicaciones ya existentes.
2-. Análisis. Seleccionamos la información, la agrupamos y definimos unos objetivos a nivel de usuario.
3-. Diseño. Creamos unos prototipos, flujos de usuarios, y una serie de cosas que nos permiten saber cuáles son las mejores practicas para los usuarios finales.
4-. Pruebas de usuario. Se realizan diferentes tipos de prueba. Estas pruebas se hacen en papel o con demos, pero no con un producto final. Esto nos permite hacer ajustes a nuestro diseño, antes de pasar a la etapa de desarrollo.
DIAGRAMAS DE FLUJO.
Primer paso de nuestro diseño UX son los diagramas de flujo.
Pasamos los elementos de nuestro BRIEF a elementos tangibles.
El primer diagrama se llama SAIMA Y es un mapa completo de nuestro sitio. Aquí definimos cuales son las secciones principales, las secciones secundarias y las paginas externas a nuestro sitio.
El siguiente es el USER FLOW. Estos nos permiten hacer un diagrama de todos los pasos que hace un usuario para completar una tarea. Con este flujo podemos saber cuántas pantallas o componentes tenemos para realizar una acción de usuario.
No hay un número definido de pantallas o componentes que vamos a diseñar para un trabajo en particular.
WIREFRAMES
¿Qué es un WIREFRAMES? Es el plano de nuestra aplicación. En ellos hacemos nuestros bocetos en papel de todos los componentes y pantallas que nos 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.
DEFINICIÓN DE DISEÑO UI (Diseño de interfaz del usuario)
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:
o Diseño de interacción.
o Prototipado.
o Arquitectura de la información
o Investigación y pruebas de usuario
• UI:
o Diseño visual.
o Colores.
o Layouts.
o 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:
• Utiliza color RGB 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.
PALETA DE COLOR.
Para construir una paleta de color, tenemos que tener claro que tipo de colores existen:
• Colores primarios: Amarillo, azul y rojo.
• Colores secundarios: Son los que resultan de la combinación de los colores primarios.
• Colores terciarios: Son los colores intermedios que hay entre un color primario y un color secundario.
Tipos de paletas:
• Combinación monocromática: Diferentes tonos de un mismo color. (diferente opacidad).
• Combinación análoga: Resulta de combinar un color primario con uno secundario y uno terciario que estén seguidos en el circulo cromático.
• Combinación complementaria: Consiste en combinar un color primario con un color secundario que no estén seguidos en el circulo cromático. Estos colores están opuestos en el circulo.
• Combinación triádica: Se trata de combinar tres colores que estén en el circulo cromático de forma que forman un triángulo dentro del circulo.
• Combinación tétrada: Combinamos 4 colores elegidos al formar un rectángulo dentro del circulo cromático. Se eligen dos primarios y dos secundarios.
TIPOGRAFÍAS.
Otra de las cosas esenciales en una aplicación es el tipo de letra.
Tips para el uso eficiente de tipografías:
• No uses demasiados tipos de letras.
• Usa fuentes estándar.
• Limita la cantidad de texto. No son libros. Mucho texto echa a los usuarios de la página.
• Selecciona tipos de textos legibles en diferentes tamaños.
• Mantén las líneas separadas unas de otras. Los altos de línea que sean adecuados.
• Que tengan suficiente contraste el texto con el fondo.
• Evitar las animaciones intermitentes en los textos.
Reglas de combinación de tipografía:
Las fuentes tienen personalidad.
• Serif: tradicional, sofisticada, confiable, práctica, formal… Se puede combinar con Sans Serif, scripts, display… y se suele usar en logos, textos de párrafos, títulos, impresos.
• Sans Serif: Moderna, limpia, humanista, geométrica, universal. Se combina con serif, script y slab serif. Sus usos son: logos, textos de párrafos, títulos y textos pequeños.
• Script o fuente cursiva: Elegante, clásica, formal, sofisticada y estilizada. Combina con serif y sans serif. Se usa en logos, títulos e invitaciones. También textos cortos que queramos destacar.
LAYOUT Y SISTEMA DE GRILLAS
¿Qué es una grilla? Grilla: Sistema de columnas creado por nosotros de acuerdo a las necesidades para ajustar nuestros elementos y componentes.
La mejor herramienta de CSS para crear una grilla es Grid.
Sass es un pre-procesador de CSS te ayuda a escribir CSS de una manera más rápida y más fácil.
Mixin es una clase que tiene dentro del pre-procesador, que te ayuda a manejar mejor los Breakpoints.
Tenemos que configurar nuestros BreakPoints (Tipos de pantalla).
• $xs: 360px. Para móviles pequeños.
• $s: 440px. Para móviles con la pantalla más grande.
• $m: 768px. Para tablets.
• $l: 1280px. Para Ordenadores pantalla normal.
• $xl: 1440px. Monitores de alta calidad.
Podemos usar un Mixin para manejar los distintos breakpoints más fácilmente.
Después vamos a configurar nuestras variables dependiendo de los breakpoints.
–columns. Es el número de columnas que vamos a poner.
–column-gap es el espacio entre las columnas.
Creamos después una clase Grid para configurar cada uno de los elementos contenedores donde vamos a incluir nuestros componentes.
Finalmente le añadimos un display grid, que nos permite que toda esta configuración surta efecto. Y definimos un grip-column-gap para la distancia entre columnas y un grid-template-column que nos permite tener esta estructura.
Para definir el tamaño de un componente, se pone grid-column: 1/5, donde uno es la columna donde empieza, y 5 es la columna donde termina.
SISTEMAS DE COMPONENTES UI
Una de las metodologías que podemos usar es separar la funcionalidad por componentes.
Un sistema de componentes es un conjunto de componentes que vamos a usar par crear nuestra aplicación. Esos componentes funcionan como una librería.
Puedes usar cualquier tecnología que prefieras. Lo importante es encapsular las funcionalidades en componentes. Cada componente tendrá su propio css y funcionalidad dentro de su propia función.
Así podremos importar esas características a cualquier pantalla de nuestra aplicación, reutilizando el código y haciendo mas eficiente nuestra aplicación.
En la clase de Wireframe creamos unos bocetos de unos componentes, que luego dividimos en unidades de funcionalidad.
La idea es crear a partir del wireframe todos los componentes y funcionalidades, y después le añadimos la capa visual.
THEMES Y CUSTOMIZACIONES
Otra herramienta que podemos hacer uso en nuestra aplicación son los themes.
¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.
Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde un archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.
IMÁGENES WEB
Las imágenes y videos y otros elementos decorativos nos ayudan a reforzar el mensaje que queremos dar en nuestra página.
¿Cómo elegir las imágenes para la web?
Lo primero es tener claro los formatos de imágenes que podemos usar:
• JPG: indicado para imágenes con degradados. Recomendado sobre PNG pues pesa menos.
• PNG: Indicado para imágenes con fondo transparente.
• SVG: Indicado para iconos y animaciones de baja complejidad. Es vectorial y se puede pasar a código, permitiendo editar sus propiedades con CSS.
• GIF: No recomendado para animaciones largas pues pesa mucho.
¿qué imágenes podemos elegir?
• Que aporten algo al contenido.
• Usa imágenes en la que el público objetivo se vea reflejado.
• Elige las imágenes que se adecuen a la paleta de colores que seleccionaste.
• Cuidado con las imágenes con licencia.
Otras consideraciones importantes de rendimiento y accesibilidad:
• No exportes imágenes con texto incrustado. No las puede leer el lector de pantallas.
• Poner imágenes del tamaño del contenedor. Cuando tenemos que modificar una imagen para que se adapte al contenedor, esta normalmente se estropea y no se ve correctamente. Y cuando son imágenes muy grandes, se agranda el tiempo de carga innecesariamente.
• Considera el uso del “lazy loading”. Esta estrategia consiste en que las imágenes se van cargando a medida que hacemos scrool, minimizando el tiempo de carga de nuestro sitio.
• Asegúrate de añadir ALT Text a las imágenes que tengan un fin comunicativo.
GRÁFICOS EN MOVIMIENTO PARA WEB
Formatos de gráficos en movimiento:
• CSS animado: Indicado para animaciones sencillas y transiciones.
• SVG animado: Indicado para animaciones de elementos vectoriales.
• JS (Canvas, WebGL): Indicado para animaciones complejas como animaciones de datos o 3D. Hay librerías en JS que sirven para este tipo de animaciones.
• Videos: Indicado para filmaciones o animaciones de alta complejidad y corta duración. Siempre preguntarnos: ¿realmente necesito este video? Pues son pesados y ralentizan la carga del sitio.
¿Cómo elegir gráficos en movimiento?
• Elegir animaciones que aporten al contenido. No sobrecargar con muchas animaciones.
• Procurar que no se reproduzcan automáticamente y si lo hacen, que no tengan sonido.
• Evita que tus animaciones tengan flashes. Los brillos continuos molestan y pueden ser dañinas.
• Si tus animaciones aportan contenido, añade subtítulos o transcripciones para que las pueda leer el lector de pantalla.
• Evita que las animaciones bloqueen la lectura básica del contenido. Es molesto una animación a la hora de leer, además de que el lector de pantallas no podrá acceder a ese contenido.
• Recuerda que las animaciones y los videos ralentizan la carga de la página. Se aplica nuevamente el menos es más.
Gracias Carlos, te invito a conocer más sobre tipos de brief.