ENTENDER LOS FUNDAMENTOS DEL DISEÑO

EL PROCESO CREATIVO

Los pasos del proceso creativo:

  1. Preparación: investigar, recopilar.

  2. Incubación: experimentar, sintetizar.

  3. Iluminación: idear, imaginar.

  4. Evaluación: criticar, replantear**.**

  5. Implementación: construir, trabajar.

    1. ****Investigamos y recopilamos toda la información relativa a un problema o algo que queramos solucionar.
    2. ****Buscamos diferentes soluciones. Miramos como alguien ya lo soluciono.
    3. ****Aquí es donde se nos ocurre las ideas. Ideamos e imaginamos soluciones.
    4. ****Evaluamos si estas soluciones son prácticas, son viables. Vemos los fallos y si es necesario, replanteamos las soluciones.
    5. ****Construimos la idea hasta el producto final. “La creatividad es algo que se desarrolla”.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/51ccab6e-002b-4e91-aa24-890b9df408fe/Untitled.png

    CONCEPTOS BÁSICOS DE DISEÑO

    Conceptos básicos:

    1. 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.
    2. Contraste: Lo podemos utilizar para señalar un concepto marcado por la diferencia entre dos elementos distintos. Ejemplo: claro – oscuro, grande – pequeño, etc.
    3. Alineación: Nos permite crear una ruta visual entre los diferentes elementos que queremos señalarle al usuario.
    4. 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.
    5. Repetición: Es muy utilizada para generar un concepto de marca.
    6. 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.

    Metodología: Mejora progresiva

    Pasos:

    1. Data – contenido
    2. HTML – Wireframes (bocetos)
    3. CSS – Diseño visual
    4. JS – Animaciones

    Metodología: degradación agraciada

    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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cd15becb-7b21-4436-ab37-b7548237c301/Untitled.png

    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:

    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:

    1. 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.
    2. Análisis: En esta etapa clasificamos la información, la agrupamos y definimos objetivos a nivel de usuario.
    3. 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.
    4. 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:

    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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e6ef7b6e-24ed-43de-a203-02b2fc04995c/Untitled.png

    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:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/86eb0e7c-5994-431d-9579-df84a89657df/Untitled.png

    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.

    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:

    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.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e5a5e68c-6164-4bea-a462-75ed96abf8a5/Untitled.png

    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.

    Los colores se asocian a ciertos sentimientos.