Fundamentos y Principios en el Diseño de Interfaces Digitales

Clase 9 de 39 • Curso de Diseño de Interfaces Únicas

Resumen

Los Foundations definen el estilo de nuestra aplicación, son los puntos fundamentales de los elementos que comprenderán todas nuestras interfaces, desde la que tenemos en mente hasta las que puedan salir a futuro.
Algunos foundations son:

Colores: Definir la clasificación de los colores, entender muy bien las paletas de colores de nuestra aplicación. Una manera muy sencilla es utilizar colores de material design.
Tipografía: Define la personalidad de la aplicación, es importante que nuestras fuentes sean funcionales para la programación y que sean legibles y muestren el carácter de nuestra aplicación.
Espaciado: El espaciado hace que todo tenga un orden y un ritmo entre elementos y ayuda a que se vea tal cual el diseño y la programación.

Es muy útil antes de diseñar cualquier cosa definir los principios que sirvan para tomar decisiones más rápido, pudiendo calificar con base a los principios nuestros diseños y decisiones.
Ejemplos de principios:

Forgiveness: Que pueda deshacer sus acciones cuando se equivoca.
Direct Manipulation: Que el usuario sienta que tiene el control.
WYSIWYG: Mostrar de manera específica lo que tiene el sistema, sin trabas.
Feedback and Dialog: Comunicar al usuario lo que está sucediendo.

Conforme vayas sistematizando todo te darás cuenta de que lo importante no es cómo, sino que sistematices los procesos y tu diseño.

Pedro Mugartegui.

student•

Algo muy útil del anterior curso de diseño de interfaces con Juani fue el método MoScOw para depurar las funcionalidades principales de la aplicación. https://www.interaction-design.org/literature/article/making-your-ux-life-easier-with-the-moscow

Alejandro Sol Villaseñor

student•

Justo, es muy bueno también implementar estos principios de funcionalidades.

Karen Rincon

student•

gracias por el enlace, me sirvio mucho para la aplicacion que estoy montando

Juan Castro

teacher•

:art: Formas de clasificación para crear nuestras paletas de colores :rainbow::

Airbnb: Definir 4 colores base y construir variaciones (de opacidad, por ejemplo) a partir de ellos :grimacing:.
Material Design: Distribuir colores primarios y secundarios a partir de una cuenta matemática (números del 100 o 50 hasta el 900) :hamburger:

Carlos Orozco

student•

Encontré esta pagina que habla de los principios de apple, pueden ser a los que se refería el maestro https://developer.apple.com/design/human-interface-guidelines/

Felipe Bernardo González Barranco

student•

Gracias!

Diego Fernando Rojas Quintero

student•

creo que estos principios en tu trabajo les ayudara bastante a su futuro: https://principles.design/examples/front-end-principles-for-designers

Felipe Bernardo González Barranco

student•

Gracias!

Juan Carlos Barbaran Meza

student•

Creo que tengo que volver a diseñar mis interfaces jaja

Jennirley Esther Velasquez Prentt

student•

Jajaj x2

Antonio Alexander Estrella Gómez

student•

9. Los foundations y principios del diseño de productos digitales

Foundations = anatomía del producto
- Colores
- Tipografía
- Grid
- Branding
- Los fundamentales que construyen la interfaz del producto
Colores
- Entender bien la construcción de los colores porque se utilizan en el desarrollo
- Material Design
  - Colores primarios
  - Colores secundarios
  - Graduación de colores
    - 900 - 50
  - Esquematización profunda
Tipografía
- Funcional o no en programación
- Funcional para web
  - Google fonts
- Esquematizar tamaños de tipografía
  - Usos en el sistema
- Tipografía por sistema operativo
Espaciado (grid)
- Ritmo entre elementos
- Sistema de espacios entre elementos
  - Tiny
  - Small
  - Base
  - Large
  - Extralarge
  - Por pixeles
Principios
- Columna de las aplicaciones
- Apple design human interface
  - https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/
- Google material design
  - https://m3.material.io/
- Los principios te ayudan a no discutir las desiciones
- Pricípio de perdono al usuario
  - Deshacer lo que borras
- Principio Manipulación directa
  - Usuario tenga la sensación de que está manipulando directamente y toda la aplicación (Que no haya procesos escondidos)
- Principio de lo que ves es lo que tienes (WYSIWYG)
  - Mostrar muy específicamente al usuario lo que tiene
- Feedback y dialogo
  - Comunicación clara de todo lo que pasa

Juan Esteban Deossa Pertuz

student•

Al momento de crear nuestro propio sistema de interfaz debemos tenemos que comenzar a crear los foundations y los principios. Los foundations son todos aquellos elementos principales que serán parte de todo el sistema de interfaz que crearemos, los colores, los títulos, los espaciados, los botones, todos los puntos fudnamentales para que nuestros desarrollos funcionen correctamente. La segunda parte son los principios, al igual que una marca nuestros desarrollos también pueden tener principios, valores, debemos especificar cual serán los valores de nuestro sistema de interfaz, esto nos ayudara a identificar varias funcionalidades que irán en nuestros desarrollos.

Héctor Martínez Reséndiz

student•

WYSIWYG:

Don't hide features in your applicaction by using abstract commands. People should be able to see what they need when they need it. For example, menus present lists of commands so that people can see their choices instead of having to remember and type command names. People should be able to find all the available features in your application. If you find a need to initially "hide" features, do it in a way that gives people information about where they can find more choices. A stepped interface, by revealing relevant information to user in steps, shows the choice most users want most of the time while providing a way for the user to get more choices. For information on stepped interfaces, see the guidelines in the section "Using Progressive Disclosure" on page 35 in Chapter 3, "Human Interface Design and the Development Process".

No oculte características en su aplicación usando comandos abstractos. Las personas deben poder ver lo que necesitan cuando lo necesitan. Por ejemplo, los menús presentan listas de comandos para que las personas puedan ver sus opciones en lugar de tener que recordar y escribir los nombres de los comandos. Las personas deben poder encontrar todas las funciones disponibles en su aplicación. Si encuentra la necesidad de "ocultar" inicialmente las funciones, hágalo de una manera que le brinde a las personas información sobre dónde pueden encontrar más opciones. Una interfaz escalonada, al revelar información relevante al usuario en pasos, muestra la elección que la mayoría de los usuarios desea la mayor parte del tiempo y proporciona una manera para que el usuario tenga más opciones. Para obtener información sobre las interfaces escalonadas, consulte las pautas en la sección "Uso de la divulgación progresiva" en la página 35 en el Capítulo 3, "Diseño de la interfaz humana y el proceso de desarrollo".

Victoria Yleana Goicoechea Miguel

student•

Gracias por la información

Pedro Mugartegui.

student•

Para combinar fonts de google fonts esta web es muy útil Fontpair

Para generar esquemas de colores esta es muy útil Coolors

Aarón González

student•

Hola @petemurgategui :D

Muchas gracias, excelente aporte :D

Adriana Villamizar

student•

WYSIWYG, acrónimo de What You See Is What You Get

Daniel Andriy Carrillo Marulanda

student•

Los foundations y principios del diseño de productos digitales

Foundations = Anatomía

Colores
Tipografías
Espaciado - grids
Branding

Tipografía

Parte fundamental de la perzonalidad de la app

Espaciado

Algo que se suele iniciar al comenzar en diseño, pero le hace más facil al diseñado diseñar, sino que le da comodidad al usuario, ayuda al programador y evita antirregularidades

Principios

el tronco/raiz/base de tu aplicación

Ejemplos de principios:

Forgiveness: Que pueda deshacer sus acciones cuando se equivoca.
Direct Manipulation: Que el usuario sienta que tiene el control.
WYSIWYG: Mostrar de manera específica lo que tiene el sistema, sin trabas.
Feedback and Dialog: Comunicar al usuario lo que está sucediendo.

Héctor Martínez Reséndiz

student•

Direct Manipulation:

Direct manipulation allows people to feel that they are directly controlling the objects represented by the computer. According to the principle of direct manipulation, an object on the screen remains visible while a user performs physical actions on the object. When the user performs operations on the object, the impact of those operations on the object is immediately visible. For example, a user can move a file by dragging an icon that represents it from one location to another or can position a cursos in a text field by directly clicking the location where the cursor should be placed.

La manipulación directa permite a las personas sentir que están controlando directamente los objetos representados por la computadora. De acuerdo con el principio de manipulación directa, un objeto en la pantalla permanece visible mientras un usuario realiza acciones físicas en el objeto. Cuando el usuario realiza operaciones en el objeto, el impacto de esas operaciones en el objeto es inmediatamente visible. Por ejemplo, un usuario puede mover un archivo arrastrando un icono que lo represente de una ubicación a otra o puede colocar cursos en un campo de texto haciendo clic directamente en la ubicación donde se debe colocar el cursor.

Juan Diego Villamizar

student•

Foundations Anatomina de la App mobile y en otras apartir de esta.

Colores tipografia espaciado

Colores AIRBNB 5 COLORES graduales

Material Design 900-50 Formas de clasificacion

Tipografia Google Fonts - Web

Gustavo Mejía

student•

Tira error

Alejandro Sol Villaseñor

student•

Podrías intentar cambiar de servidor. Espero y eso funcione.

Luis Palomo

student•

Excelente clase y excelente curso. Sigo usando estas clases a pesar de haber terminado el curso hace un tiempo.

Carolina Gómez

student•

FOUNDATIONS Y PRINCIPIOS Fonundation: Anatomía de nuestra aplicación, no sólo MOBILE si no también otras aplicaciones que puedan salir de este desarrollo. los colores, tipografía, branding, espaciado, stiling y demás cosas que califican el estilo de mi aplicación. Ir decidiendo cada uno de estos es bueno tener en cuenta la clasificación, dentro de mi app que tema en que color. Ejemplo AIBandB, cada clasificacio on tiene un color.

Material Design: Distribuir los colores bades como primarios y secundarios. 900 hasta 50, esto son forma de clasificar, en este caso se hace una clasificación sencilla y sistematizada, esto es muy importante cuando se empieze a desarrollar.

Tipografía: Personalidad de la APP, es importante tener en cuenta si funciona para la parte de PROGRAMACIÓN, algunas no vienen en formato web, es recomendado mirar en https://fonts.google.com/ para saber si viene adaptada a web. MONOSPACED: CLASIFICACIONES.

Si mi producto se requiere agrupar en diferentes clasificaciones se puede agrupar sencillo, de lo contrario hay que sistematizar, Vamos aprendiendo que estas clasificaciones tienen pros y contras. ESPACIADO: fundamentales. Diseñando interfaces nos da un orden y ritmo entre los elementos, y le hace no sólo mas fácil al diseñador, si no tambien al programador, al cual le permite generar un sistema de espaciado entre los elementos, que así como hacemos nosotros las pantallas, así queden en la programación, pero is no tenemos en específico como hacer en el espaciado entonces se generan irregularidades: Diferentes números de espaciado, y esto hace que no haya un espaciado qie rija nuestros elementos. Comparación de dos: Se ve que el espaciado ayuda a el orden y coherencia del proyecto, si el espaciado es general y definido ayuda a los demás en el proyecto

PRINCIPIOS: AYUDAN A NO TENER DISCUSIONES LARGAS. Definen la columna vertebral de nuestra aplicación. El profe por 1 vez los encontró en los manuales de apple: THE HUMAN DESIGN INTERFACE (6 vol). Antes de empezar a diseñar se definen principios. Ejemplo de principio: Forgiveness (Usuario tiene la oportunidad de borrar cosas, osea la app lo perdonó). Con los PRINCIPIOS se tienen desde el principio DEFINIDAS LAS FUNCIONALIDADES Y PRODUCTO.

DIRECT MANIPULATION: Usuario tiene la sensación de manipulación directa de el software, que no haya procesos atrás que no pueda controlar.

WYSIWYG (What you see is what you get): Darle al usuario literal lo que ve, incluida la interacción.

Feedback and Dialog: Comunicación clara hacia el usuario

Héctor Martínez Reséndiz

student•

Feedback and Dialog:

Keep users informed about what's happening with your product. Provide feedback as they do task and make that feedback as immediate as possible. When a user initiates an action, provide some indicator, visual or auditory (or both), that your application has received the user's input and is operations take. When your application can't respond to user input because it's processing a different task, inform the user of what to expect and describe any delay, why they occur, and how long they'll take. Also, tell the user how to get out of the current situation whenever possible.

Mantenga a los usuarios informados sobre lo que está sucediendo con su producto. Brinde retroalimentación mientras hacen la tarea y haga esa retroalimentación lo más inmediata posible. Cuando un usuario inicia una acción, proporcione algún indicador, visual o auditivo (o ambos), de que su aplicación ha recibido la entrada del usuario y se realiza la operación. Cuando su aplicación no pueda responder a la entrada del usuario porque está procesando una tarea diferente, informe al usuario qué puede esperar y describa cualquier retraso, por qué ocurre y cuánto tiempo tomará. Además, dígale al usuario cómo salir de la situación actual siempre que sea posible.

Susana TG

student•

Los principios de diseño: https://www.interaction-design.org/literature/topics/design-principles

Sistema de color de Material Design: https://material.io/design/color/the-color-system.html

Pedro Isaac Aguilar

student•

WYSIWYG (What You See Is What You Get), es un principio de diseño de interfaces en el que muestras de manera clara y objetiva al usuario lo que contiene el sistema o interfaz donde está interactuando, sin trabas ni cosas ocultas. De esta manera, le aseguras al usuario las acciones o cosas que puede hacer o no hacer en tu interfaz / producto digital.

Jean Michael Courtois

student•

Human Interface Guidelines de Apple. La verdad es que de no haber visto este curso ni me habría enterado de su existencia. Muy interesante. Esta información es crema!

https://developer.apple.com/design/human-interface-guidelines/

Cristian David Guillermo Reinales Cardenas

student•

el link esta caido bro

Susana TG

student•

al hacer clic en el link no envía a ninguna parte, pero, si copias el link y lo pegas en tu navegador si lo abre!