Fundamentos del Diseño by Juan Uribe https://padlet.com/juancg14/5g5jz9n7wg9nonkk en-us 2023-09-05 00:01:17 UTC 2023-09-05 03:00:22 UTC hello@padlet.com Wucius Wong juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2683895659 Wucius Wong fue un destacado diseñador gráfico y artista visual nacido en Guangdong, China, en 1936, y fallecido en 2010. Si bien es conocido principalmente por sus contribuciones al diseño gráfico, su influencia se extendió a otras áreas del arte y el diseño.

El principal aporte de Wucius Wong al diseño radica en su enfoque en la enseñanza y la teoría del diseño. Durante su carrera, Wong se convirtió en un destacado educador en el campo del diseño, y sus libros y escritos se han utilizado ampliamente como recursos de referencia en la enseñanza de diseño. Uno de sus libros más influyentes es "Fundamentos del diseño", que ha sido una lectura fundamental para estudiantes y profesionales del diseño gráfico y la comunicación visual. 

Su enfoque en la teoría del diseño y la relación entre la forma y la función en el diseño también ha sido una contribución significativa. Wong promovió la idea de que el diseño debe ser tanto estético como funcional, y abogó por un enfoque equilibrado en la toma de decisiones de diseño.

En resumen, Wucius Wong es reconocido por su influencia en la educación y la teoría del diseño, en particular en lo que respecta al uso del color y la relación entre la forma y la función en el diseño gráfico y la comunicación visual. Su trabajo y sus escritos han tenido un impacto duradero en la comunidad del diseño.

Fuente: https://graffica.info/fundamentos-del-diseno-wucius-wong/]]> 2023-09-05 00:11:45 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2683895659 Arte y diseño juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2683938102 Para mi la diferencia entre el diseño y el arte parte de sus propositos y sus funciones, es aqui donde el autor diferencia su composicion creativa de un mundo a otro. El arte la definiria yo como expresion creativa pero personal, donde el autor desborda una serie de emociones plasmadas en la obra. La obra no tiene que tener una función predefinida a no ser que el autor asi lo plantee en su performance; recuerdo un ejemplo que mencionaban mucho en la universidad que era el Juicy Salif el exprimidor de Philippe Starck este generaba un gran debate en cuanto a su forma y función pero a mi modo de ver las cosas, arte busca dar una respuesta subjetiva a la interpretación de cada espectador.
Por otro lado el diseño si debe tener definido un proposito y una función, ya que en contraste al arte, su objetivo practico puede ser transmitir un mensaje claro, resolver un problema o satisfacer una necesidad. Por el contrario al arte, el diseño tiene una serie de normas, restricciones o requisitos los cuales nos definen como una ruta por la cual el proposito y la función del diseño se resolveran de la mejor manera.

Fuente: autoria propia]]> 2023-09-05 00:42:45 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2683938102 Lenguaje Visual juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2683988796 El lenguaje visual es el lenguaje que no utiliza palabra escrita en su proposito de comunicar un mensaje, por el contrario utiliza formas, figuras y elementos visuales que le permitan cumplir con su proposito. Esta compuesto por signos y simbolos. Los signos estan divididos en dos aspectos fundamentales: un significante, el que busca transmitir (elementos visuales como forma, color, etc) y un significado, el mensaje que busca transmitir. Los simbolos de igual manera son de tipo no verbal es decir imagenes y emblemas de interpretacion netamente visual. Un ejemplo claro es los iconos de los baños que son facilmente indentificables sin la necesidad de tener un lenguaje verbal.

Hay 3 tipos de lenguaje verbal: el lenguaje visual objetivo ( comunica un mensaje con el menor margen de amigüedad posible. Ej: señales de transito), el lenguaje visual publicitario (promociona o publicita un producto o evento para generar una necesidad de comprarlo. Ej: flyers) y por ultimo el lenguaje visual artistico (no tiene un proposito especifica mas alla de un valor estético)

Los elemetos basicos del lenguaje visual son: punto, linea, plano y color.

Fuente: https://concepto.de/lenguaje-visual/]]> 2023-09-05 01:19:55 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2683988796 Gestalt juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684017803 La idea principal que exponía la psicología de la Gestalt es que cuando percibimos el mundo, a pesar de que existen distintas señales impactándonos al mismo tiempo, para organizarlas, nuestra mente resume el entorno como formas o grupos de elementos. Lo simplifica.

Por tanto, la Teoría de la Gestalt también es aplicable al diseño gráfico e incluso al diseño de interfaces o usabilidad web. Para que un diseño funcione bien se debe considerar siempre, no sólo los elementos visuales por separado, sino también cómo se percibe la totalidad del diseño.

Ideas Clave de la teoria Gestalt

Aparición:
La idea de aparición surge cuando se percibe un objeto y le damos una interpretación a partir de la información previa que ya conocemos. 

Cosificación
Las personas pueden reconocer objetos incluso cuando faltan partes de ellos. Nuestro cerebro hace coincidir lo que vemos con patrones familiares almacenados en nuestra memoria para llenar los vacíos.

Multiestabilidad
La idea de la Multiestabilidad se basa en que la gente a menudo interpreta objetos ambiguos en más de una forma. Nuestros cerebros van de un lado a otro buscando la certeza.

 Invariabilidad
Las personas pueden reconocer objetos simples independientemente de su rotación, de su escala o de traslación. Nuestro cerebro puede percibir objetos desde diferentes perspectivas a pesar de que cuenten con apariencia diferente


La ley más importante y que nos da una mejor idea sobre la lógica por la que se rige la generación de percepciones como un todo es la ley de la buena forma, según la cual lo que percibimos con mayor exactitud y rapidez son aquellas formas más completas pero, al mismo tiempo, más simples o simétricas.

Más leyes y principios de la Gestalt

Otras leyes de la teoría de la Gestalt son:

  • La ley de la figura-fondo: no podemos percibir una misma forma como figura y a la vez como fondo de esa figura. El fondo es todo lo que no se percibe como figura.
  • Ley de la continuidad: si varios elementos parecen estar colocados formando un flujo orientado hacia alguna parte, se percibirán como un todo.
  • Ley de la proximidad: los elementos próximos entre sí tienden a percibirse como si formaran parte de una unidad.
  • Ley de la similitud: los elementos parecidos son percibidos como si tuvieran la misma forma.
  • La ley de cierre: una forma se percibe mejor cuanto más cerrado está su contorno.
  • Ley de la compleción: una forma abierta tiende a percibirse como cerrada.

Fuente: https://www.significados.com/gestalt/
 
Fuente: https://imborrable.com/blog/teoria-de-la-gestalt/
]]> 2023-09-05 01:40:59 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684017803 Diseñador y diseñador web juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684024756 (Asumiendo que como diseñador se refiere a diseñador grafico). Los diseñadores gráficos se centran en la creación de elementos visuales para una variedad de aplicaciones, incluyendo impresos y medios digitales, los diseñadores web se especializan en la creación de sitios web funcionales y atractivos, considerando aspectos de diseño visual, usabilidad. y experiencia del usuario en línea. 
Fuente: autoria propia]]> 2023-09-05 01:46:29 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684024756 Teoria del color juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684039914 Se conoce como Teoría del color a un conjunto de reglas básicas que rigen la mezcla de colores para conseguir efectos deseados, mediante la combinación de colores o pigmentos. Es un principio de gran importancia en el diseño gráfico, la pintura, la fotografía, la imprenta y la televisión, entre otras áreas visuales.

No existe una única Teoría del color, sin embargo, sino un conjunto de aproximaciones al color y a sus dinámicas. Muchas de ellas forman parte de la historia del arte o de la física (óptica), y poseen diferentes autores.

Uno de los principales insumos de toda Teoría del color es el círculo cromático. Se trata de una representación circular de todos los colores del espectro visual, organizados de manera tal que los colores contrarios se enfrenten y los colores complementarios estén próximos el uno al otro.

El círculo cromático permite identificar los colores primarios o puros, y aquellos que se consideran derivados, o sea, fruto de la mezcla de colores.

De acuerdo a este tipo de estudios del color, a cada uno se le pueden atribuir distintas propiedades, como son:

  • Matiz. También llamado “croma”, alude al color en sí mismo, lo que nos permite distinguir un color de otro diferente.
  • Luminosidad. También llamada “valor”, se refiere a la cantidad de luz presente en el color, o sea, si es más claro o más oscuro, lo que equivale a decir si está más cerca del negro o del blanco.
  • Saturación. Básicamente se refiere a la pureza del color, o sea, la concentración de gris presente en un color en un momento determinado. Mientras más gris posea, menos puro será y menor será su saturación, viéndose como si estuviera sucio, opaco.
Modelos de color:
El modelo de color RGB se llama así debido a sus colores primarios: rojo, verde y azul (Red, Green, Blue, en inglés), a partir de los cuales se compone el resto. Es un sistema de color aditivo, en el que los colores deben sumarse para producir uno nuevo.
El modelo CMYK es distinto al anterior, pero su nombre también es la unión de las iniciales de los colores que toma como referencia: cyan, magenta, amarillo (en inglés: yellow), con el añadido del negro (llamado Key en inglés para evitar la confusión con la B del blue del RGB).

Este modelo comprende el color a partir de la absorción de la luz, de modo que a diferencia del RGB, es de tipo sustractivo, de resta de luz: la mezcla de todos los colores puros (azul, rojo, amarillo) da negro, la ausencia total de luz.

Aparte, los diversos colores secundarios pueden formarse de esta matriz, variando las combinaciones posibles de los tres: cian y magenta construye púrpura, cian y amarillo construye el verde, amarillo y magenta construye el rojo.

Las excepciones son el negro, que se produce en ausencia de luz (y por ende, de color) y el blanco que se produce en presencia de todos los colores, recomponiendo el espectro. Este sistema es el empleado en la mayoría de los televisores, monitores de computador, proyectores de video, etc.


Fuente: https://concepto.de/teoria-del-color/#ixzz8COinjFTJ

]]> 2023-09-05 01:56:52 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684039914 Elementos del Diseño segun Wicius Wong juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684065637 Definimos a los fundamentos del diseño como el conjunto de elementos que ayudan a concebir, organizar, proyectar y realizar una comunicación visual. Estas pueden ser producidas por medios generales o particulares que tienen como objetivo en común compartir un mensaje determinado a grupos específicos, a través de diferentes canales, como impresos, medios digitales, audiovisuales, etc.
Elementos del Diseño:
  • Elementos Conceptuales
    •  Punto: El punto es el inicio del todo, donde empieza cada una de nuestras ideas plasmadas. Este nos indica una posición, no tiene largo ni ancho. Tampoco ocupa una zona del espacio y podemos decir que es el principio y el fin de una línea.
    •  Línea: Tenemos la línea, esta surge del movimiento de un ponto hacia cualquier dirección. Tiene posición y dirección, tiene largo pero no ancho.
    •  Plano: El Plano es el recorrido de una línea en movimiento. Tiene largo y ancho, pero no grosor.
      Esta limitado por líneas y tiene posición y dirección. Define los limites extremos de un volumen.
    • Volumen: El volumen es el recorrido de un plano en movimiento. Tiene una posición en el espacio y esta limitado por planos.
  • Elementos Visuales
    • Forma:Todo lo que puede ser visto posee una forma que aporta la identificación principal en nuestra percepción.
    • Medida:El tamaño es relativo si lo describimos en términos de magnitud y de pequeñez, pero así mismo es físicamente mensurable
    • Color:El color se utiliza en un sentido más amplio, comprendiendo no solo los del espectro solar sino los colores neutros (blanco, negro, los grises intermedios) y así también sus variaciones tonales y cromáticas
    • Textura: Se refiere a las cercanías en la superficie de una forma. Puede ser plana o decorada, suave o rugosa, y puede atraer tanto al sentido del tacto como a la vista, esto quiere decir que puede ser tangible o solo representada visualmente
  • Elementos de Relación
    • Dirección: La dirección depende de cómo esta relacionada con el observador, con el marco que la contiene o con otras formas cercanas.
    • Posición: La posición es juzgada por su relación respecto al cuadro o la estructura del diseño.
    • Espacio: Las formas de cualquier tamaño, ocupan un espacio. Puede estar ocupado o vacío.
    • Gravedad: La representación de la gravedad no es visual sino psicológica. Tenemos tendencia a atribuir pesantez o liviandad, estabilidad o inestabilidad a formas o grupos de formas.
Fuente: https://adriancovarrubias.com/diseno/fundamentos-del-diseno/
]]> 2023-09-05 02:14:31 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684065637 Diseño web responsivo juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684089700 Un diseño web responsive es el que es capaz de adaptarse a pantallas de diferentes tamaños con un solo sitio web. El sistema detecta automáticamente el ancho de la pantalla y a partir de ahí adapta todos los elementos de la página, desde el tamaño de letra hasta las imágenes y los menús, para ofrecer al usuario la mejor experiencia posible. ¡Parece magia!

En ocasiones, se confunde el responsive con las webs para móviles, pero no se trata de lo mismo. En el caso del diseño responsive, tenemos un solo sitio web que puede adaptarse para dispositivos de todo tipo, desde ordenadores de escritorio con grandes monitores hasta móviles, pasando por tablets y otros. En cambio, crear un sitio móvil implica diseñar desde cero una web independiente, cuyos contenidos y formato están especialmente adaptados para funcionar mejor en dispositivos móviles.
 
Fuente: https://www.cyberclick.es/que-es/diseno-web-responsive
]]> 2023-09-05 02:29:50 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684089700 Meta tag Viewport juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684101089
Viewport es el área visible del usuario de un sitio web. La etiqueta meta viewport controla el ancho de la página dependiendo del dispositivo en el que se encuentre el usuario.

Si esta etiqueta no está configurada en tu sitio web, probablemente tus visitantes no siempre tendrán una experiencia positiva de navegación en sus dispositivos móviles.

Cuando no creas una metaetiqueta viewport para los dispositivos móviles, esos dispositivos presentarán un sitio web con el ancho de una pantalla de computadora de escritorio y lo escalará para que se ajuste a la pantalla, por lo que el texto y los gráficos serán muy pequeños. A esto se le llama ancho de reserva y varía de los 800 a los 1024 pixeles.

Cuando creas una metaetiqueta viewport para los dispositivos móviles, el ancho del sitio web se ajusta de manera automática al dispositivo móvil del usuario, dando una mejor experiencia.



]]> 2023-09-05 02:37:34 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684101089 Herramientas de simulación juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684115469
  • Screenfly (BlueTree)
    • Tiene un panel muy completo e intuitivo, además un montón de funcionalidades que te serán útiles si estás trabajando en la versión responsive de tu sitio:

    • Simular tu web en movil, tablet o desktop.
    • Elegir marca y modelo del dispositivo.
    • Añadir una pantalla personalizada.
    • Opción de rotación.
    • Compartir los resultados con el resto de tu equipo.

    • Resposive Test Tool
    Otro simulador de dispositivos móviles que me gusta mucho es Responsive Test Tool.

    Esta herramienta te permite ver tu web en distintos dispositivos móviles. Tienes más de 50 marcas y modelos disponibles, así como diferentes tamaños de pantalla para tablet, ordenador e incluso TV.

    Si el dispositivo que quieres probar no está en la lista, también tienes la posibilidad de añadir tamaños de pantalla personalizados.

    • Demostrating Responsive Design
    El funcionamiento es muy similar a las herramientas que acabamos de ver. Primero abre Demostrating Responsive Design, introduce la URL de tu web, selecciona los píxels de ancho y alto de la pantalla y pulsa en Open para ver los resultados del simulador.

    Una vez abierta la URL de tu web, puedes ir cambiando el tamaño y ver cómo se comporta tu sitio en diferentes pantallas.

    • Responsinator
    Una alternativa muy buena es Responsinator. Simplemente introduce la URL de tu página web y pulsa en Go. Automáticamente la herramienta te enseña cómo se ve tu web en diferentes marcas y modelos de dispositivos móviles.

    • Am I responsive?
    Otra herramienta para probar tu web en dispositivos móviles es Am I responsive?. Algo más simple que las que acabamos de ver, pero te sirve para realizar un test rápido y comprobar si tu web se ve bien o no en dispositivos móviles.

    • Demonstrating Responsive Design
    Muy similar a la que acabamos de ver. Demonstrating Responsive Design es un simulador muy sencillo, pero útil y rápido para saber si una página web es responsive o no. Ofrece únicamente tres tamaños de pantalla con el dispositivo vertical y horizontal.

    • Extensiones para Chrome y Firefox
    Aunque no son herramientas en sí, existen diferentes extensiones para tu navegador que permiten simular diferentes tamaños de pantalla y comprobar cómo se ve tu web en cada uno de ellos.

    Fuente: https://www.lucushost.com/blog/7-herramientas-probar-web-dispositivos-moviles/







    ]]>     2023-09-05 02:47:37 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684115469     Tecnicas diseño web responsivo juancg14 https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684121381
  • Planificación y Estrategia: Antes de comenzar un diseño, define claramente tus objetivos y público objetivo. Comprende cómo y por qué los usuarios accederán a tu sitio desde dispositivos móviles y tabletas. Esto te ayudará a tomar decisiones de diseño más informadas.
  • Diseño Mobile-First: En lugar de diseñar primero para pantallas de escritorio y luego adaptar a dispositivos móviles, considere un enfoque "mobile-first". Comienza diseñando para pantallas pequeñas y luego amplía el diseño para pantallas más grandes. Esto garantiza que la experiencia en dispositivos móviles sea prioritaria.
  • Contenido Priorizado: Identifica el contenido más importante y colócalo en la parte superior de la página o sección. Los usuarios móviles tienden a desplazarse más, por lo que es esencial que encuentren rápidamente la información clave.
  • Diseño Simple y Limpio: Minimiza la cantidad de elementos en la pantalla y mantén el diseño limpio y ordenado. Evite la sobrecarga de información y utilice espacios en blanco para mejorar la legibilidad y la usabilidad.
  • Botones y elementos interactivos: Asegúrese de que los botones y elementos interactivos sean lo suficientemente grandes y espaciados para que los usuarios puedan tocarlos fácilmente con los dedos en dispositivos táctiles.
  • Imágenes Optimizadas: Utiliza imágenes optimizadas para la web para reducir el tiempo de carga en dispositivos móviles. Evite el uso excesivo de imágenes de alta resolución.
  • Prueba en Diferentes Dispositivos: Realiza pruebas en una variedad de dispositivos móviles y tabletas para asegurarte de que tu diseño se vea bien y funcione correctamente en diferentes tamaños y resoluciones de pantalla.
  • Fluid Grids y Diseño Proporcional: Utiliza sistemas de cuadrícula fluida y dimensiones proporcionales en lugar de medidas fijas para que los elementos se ajusten automáticamente al tamaño de la pantalla.
  • Navegación Simplificada: Simplifica la navegación y utiliza menús desplegables o hamburguesas en dispositivos móviles para ahorrar espacio en pantalla.
  • Feedback Visual: Proporciona feedback visual claro cuando los usuarios interactúan con elementos, como botones presionados o formularios enviados.
  • Test de Usabilidad: Realiza pruebas de usabilidad con usuarios reales en dispositivos móviles y tabletas para obtener comentarios y realizar ajustes en el diseño según sea necesario.
  • Accesibilidad: Asegúrate de que tu diseño sea accesible para todos los usuarios, incluyendo aquellos con discapacidades. Utiliza etiquetas alt en imágenes, proporciona descripciones textuales y sigue las mejores prácticas de accesibilidad.




    • Nota personal
    OJO CUANDO ENTRE A UTILIZAR CODIGO
    Fuente:  https://www.freecodecamp.org/espanol/news/diseno-web-responsive-como-hacer-que-un-sitio-web-se-vea-bien-en-telefonos-y-tabletas/

    ]]>     2023-09-05 02:51:33 UTC https://padlet.com/juancg14/5g5jz9n7wg9nonkk/wish/2684121381