Contenido del curso
Fundamentos y Principios en el Diseño de Interfaces Digitales
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:
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:
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.
Estudiante
Alejandro Sol Villaseñor
Estudiante
Karen Rincon
Estudiante
Juan Castro
Profesor
Carlos Orozco
Estudiante
Felipe Bernardo González Barranco
Estudiante
Diego Fernando Rojas Quintero
EstudianteFelipe Bernardo González Barranco
Estudiante
Juan Carlos Barbaran Meza
Estudiante
Jennirley Esther Velasquez Prentt
Estudiante
Antonio Alexander Estrella Gómez
Estudiante
Juan Esteban Deossa Pertuz
Estudiante
Héctor Martínez Reséndiz
Estudiante
Victoria Yleana Goicoechea Miguel
EstudiantePedro Mugartegui.
Estudiante
Aarón González
Estudiante
Adriana Villamizar
Estudiante
Daniel Andriy Carrillo Marulanda
EstudianteHéctor Martínez Reséndiz
Estudiante
Gustavo Mejía
EstudianteAlejandro Sol Villaseñor
Estudiante
Luis Palomo
Estudiante
Carolina Gómez
EstudianteHéctor Martínez Reséndiz
Estudiante
Susana TG
Estudiante
Pedro Isaac Aguilar
Estudiante
Jean Michael Courtois
Estudiante
Cristian David Guillermo Reinales Cardenas
EstudianteSusana TG
Estudiante
Efraín Hernández García
EstudianteAlgo 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
Justo, es muy bueno también implementar estos principios de funcionalidades.
gracias por el enlace, me sirvio mucho para la aplicacion que estoy montando
:art: Formas de clasificación para crear nuestras paletas de colores :rainbow::
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/
Gracias!
creo que estos principios en tu trabajo les ayudara bastante a su futuro: https://principles.design/examples/front-end-principles-for-designers
Gracias!
Creo que tengo que volver a diseñar mis interfaces jaja
Jajaj x2
9. Los foundations y principios del diseño de productos digitales
Foundations = anatomía del producto
Colores
Tipografía
Espaciado (grid)
Principios
Apple design human interface
Google material design
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.
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".
Gracias por la información
Para combinar fonts de google fonts esta web es muy útil Fontpair
Para generar esquemas de colores esta es muy útil Coolors
Hola @petemurgategui :D
Muchas gracias, excelente aporte :D
WYSIWYG, acrónimo de What You See Is What You Get
Los foundations y principios del diseño de productos digitales
Foundations = Anatomía
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:
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.
Tira error
Podrías intentar cambiar de servidor. Espero y eso funcione.
Excelente clase y excelente curso. Sigo usando estas clases a pesar de haber terminado el curso hace un tiempo.
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
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.
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
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.
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!
el link esta caido bro
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!
Esto ya es básicamente pensar en arquitectura no?
