Introducción al Diseño

1

Bienvenidos al Curso de Fundamentos de Diseño

2

¿Qué es el diseño?

3

El objetivo del diseño

Principios del Diseño

4

Comunicación efectiva en el diseño

5

¿Qué es el contraste?

6

¿Qué es el concepto?

7

Diseño universal

8

Qué es diseño atemporal

9

El boceto

10

¿Qué son los elementos visuales?

11

¿Qué es la alineación en diseño?

12

¿Qué es la síntesis gráfica?

Composición

13

La composición y su función

14

Unidad visual y principios de la Gestalt

15

Balance o equilibrio visual

16

Dirección Visual

17

Tipos del balance visual

18

Aplicación de elementos de composición

19

Movimiento

20

Estructuras naturales

21

Patrones de lectura

22

¿Qué es el ritmo?

23

Ejercicios de composición

Jerarquía

24

¿Qué es la Jerarquía?

25

Herramientas de jerarquización

26

Espacio en blanco en el diseño

Formatos

27

¿Qué es el formato?

28

Retículas y guías

Imagen Digital

29

Análogo vs. Digital

30

Pixel y resoluciones

31

Mapas de Bits y Vectores

Color

32

Qué es círculo cromático: usa la rueda de color

33

Sistemas de color

34

Tipos de paletas de colores: ¿qué son y cuál elegir?

35

Color en interfaces

36

Psicología del color

37

3 Errores comunes en el uso del color

Tipografía

38

Tipografía en el diseño

39

Selección tipográfica

40

Manejo y edición de textos

41

Cómo crear composición con texto

42

Identificar problemas en composición de texto

Proyectos de Fundamentos de Diseño

43

Proyecto: Portada de disco

44

Diseño de la portada de disco

45

Conclusiones del proyecto: Portada de disco

46

Proyecto: Poster de película

47

Diseño del poster de película

48

Conclusiones del proyecto: Poster de película

Rutas Profesionales en Diseño

49

Cómo ser un Diseñador de Producto

50

Cómo ser Diseñador de Marca

51

Afina tu composición visual

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
11 Hrs
34 Min
49 Seg

Retículas y guías

28/52
Recursos

¿Qué son las retículas?

Las retículas son líneas verticales y horizontales “invisibles” que forman una estructura dando una organización de espacio sobre los elementos que se plasman dentro del formato, formando una cuadrilla en la que puede variar dependiendo del tipo de proyecto. Se utilizan para la distribución, balance, organización, jerarquización, y equilibrio dentro del diseño.

¿Para qué sirven las retículas?

  • Nos ayudan a hacer una distribución mucho más balanceada.
  • Las retículas están definidas por grillas, que nos ayuda a ser más exactos en el espacio de trabajo que vamos a utilizar.
  • Las grillas nos sirven para hacer una mejor distribución de elementos gráficos.

Ejemplos de retículas:

Contribución creada por: Anggi Pallares y Giuseppe Ramírez

Aportes 227

Preguntas 31

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En el estudio de diagramación de estos tres posters, encontre algo mas interesante, sobre: como es ubicada línea de horizonte del mar (Línea Azul) ; en el caso de los poster: Life of Pi, Jaws; como una elemento en el medio de un sector definido por guias

Vale la pena leer este libro Sistemas de retículas

Las retículas son tan básicas y útiles, son como el esqueleto del diseño
Lo ideal es de que se acomoden antes de vaciar el contenido, incluso desde el boceto
se puede y debe planificar, como lo hace manualmente el profe Emiro en el video.

Saludos



Quiero recomendarles muchísimo este Masterclass Sección áurea y regla de los tercios / logos, isotipos e iconos tanto la parte 1 como la parte 2

En este se conversa un poco al respecto también de retículas, de composición, de proporción áurea. Me parece que está bastante completo y complementaría de manera eficiente esta clase.


Que satisfactorio es aprender y aplicar esto :’)

Guides


¿QUE SON LAS RETÍCULAS?
Las retículas son linea verticales y horizontales “invisible” que forman una estructura dando una organización de espacio sobre los elementos que se plasman dentro del formato, formando una cuadrilla en la que puede variar dependiendo del tipo de proyecto. Se utilizan para la distribución, balance, organización, jerarquización, y equilibrio dentro del diseño.

Para que sirven

  • Nos ayudan a hacer una distribución mucho más balanceada.

  • Las retículas están definidas por grillas, que nos ayuda a ser más exactos en el espacio de trabajo que vamos a utilizar.

  • Las grillas nos sirven para hacer una mejor distribución de elementos gráficos.


estas retículas son guías que nos ayudara con la distribución de los elementos, determinando las divisiones dentro del formato.
MÓVIL–> la podemos utilizar para ver la distribución de elementos, texto, iconos, y de lectura

Páginas–>las retículas empiezan a definir donde van las imágenes, texto en el cual mantiene un orden, tamaño y ritmo de lectura

Editoriales

Isotipos–> las retículas también nos sirven para hacer distribución de elemento a nivel gráfico, no es solo para texto

Tipografía–>distribución y balance y armonía visual, así se determina que tenga el mismo:

  • Espaciado de letra

  • Espaciado entre elementos

  • El mismo grosor

    GUÍAS.
    Nos ayuda en la alineación dentro de nuestro formato y garantizamos que algo no salga de un determinado lugar.

    Las guías nos limita hasta donde va llegar el texto y nos determina donde va la parte visual.

    Guía sin los componentes anteriores.

Para hacer una guía básica en Photoshop en el menú superior --> Vista --> Guía nueva --> Yo elegí una composición de tercios (3 columnas x 3 filas) y añadí después tres guías más en la parte inferior.

Mi ejemplo jaja

Márgenes espacios vacíos entre el borde del papel y el contenido. En una página reticulada los
márgenes deben ser definidos por la propia la retícula y deben tener unas dimensiones relacionadas
con el resto de componentes.
Columnas verticales que pueden ser del mismo o diferente ancho.
Módulo que son unidades individuales de espacio separados por medianiles y que forman filas.
Líneas de flujo horizontales que alteran la monotonía de las columnas.
Marcadores que indican la posición en el documento mediante el folio, el encabezamiento, los títulos
de sección y otra información similar.
Zonas espaciales, módulo o conjuntos de módulos que forman campos identificables y que pueden tener una función definida: verticales, formados por dos módulos, para imágenes; cuadrados, por cuatro, para gráficos.


pasos para tener en cuenta a la hora de la maquetación de retículas


paso #1–> Definir el Documento:
En este paso se define el formato en el que se va trabajar, su orientación ya sea horizontal o vertical.
paso #2 --> definir el tipo de retícula:
se crea la retícula dependiendo del diseño o información que se desea comunicar

TIPOS DE RETÍCULA

DE MANUSCRITO

_MODULAR

fuente: http://umh2127.edu.umh.es/wp-content/uploads/sites/906/2016/10/Retículas-Composición-Formatos.pdf

Aquí unas guias increibles y muy útiles para UI
https://yellowimages.com/stock/soil-mobile-flowcharts-50150

Aquí les presento las retículas que hice de la página web que estoy diseñando

Retículas y guías:

Pueden fijarse en una revista o imprimir una página web y observar cómo se acomoda el contenido y ver que tipo de guías usan para delimitar su contenido !

Es una buena práctica.

Retícula y guías aplicadas en el cine.
Referente: El gran hotel Budapest.

Buenas a todos, dejo mi aporte, lo hice en un PPT para intentar sacar las posibles grillas que hayan usado los autores de dichos posters de películas.
Hacer este proceso a la inversa (porque en práctica se debe hacer al inicio) también sirve para saber más o menos como lo pensaron y qué espacios consideraron importante para cada caso.

Les comparto un enlace de las retículas que se emplean para la construcción de marcas, compartida por Marco Creativo:
https://marcocreativo.es/recursos/
Es un recurso bastante útil, lo encuentran bajo el título:
Técnicas de construcción para crear Logotipos, Isotipos o Iconos.

Yo los quitó en los programas de edición, pero ahora ya se la importancia que tienen.

Nota: No soy diseñador, pero me gusta el crear diseños.








Estas clases las estoy aplicando en la universidad para los programas que hacemos :p

Palabras Claves
Distribución balanceada
Grillas
Exactitud
Compartimentos
Armonía visual

Las guías y retículas son indispensables dentro de un pre diseño.
Aplicarlas, nos darán un notable cambio.

El framework de diseño web “Bootstrap” hace uso de retículas 😄

Las guías y reticulas son importantes para elaborar un buen diseño
Aquí mis trabajos, después de aplicar lo aprendido en esta escuela

Cuando diseñamos para redes sociales hay que tener en cuenta los elementos de la misma app, como el botón de like por ejemplo. sino perdemos parte de la información que ocultan estos elementos. Particularmente lo que hice fue unas grillas o líneas guías para recordar tener siempre en cuenta esto a la hora de diseñar.!

Disculpe la molestia profesor Emiro Arrieta, no podría subir el material en pdf al igual que lo hace su compañero Carlos Jiménez?

📌| En resumen:


Las retículas son una estructura conformada por líneas verticales y horizontales, estas tienen el objetivo de ordenar coherentemente los elementos de un diseño. Las retículas nos ayudan a hacer una distribución mucho más balanceada, están definidas por guías, que nos ayudan a ser más exactos en el espacio de trabajo que vamos a utilizar.

Pienso que les puede servir tanto a diseñadores como a desarrolladores algunas extensiones de Chrome como:

  • Toogle Pesticide: te ayuda a detectar las fallas de CSS como los margenes o espacios entre elementos, su alineación, etc. Toda la parte visual, ya que delinea cada elemento haciendo visible esas fallitas que se pueden mejorar.

  • Page Ruler Redux: te ayuda a obtener las medidas de los elementos como el alto, ancho y el posicionamiento del elemento visual seleccionado.

Hay otras más. Lo importante es que con éstas puedes visualizar los diseños terminados e ir comparando y haciendo ajustes de ser necesario, dándote una idea más clara de dónde exactamente hay que ajustar.
Saludos!

![](

Nos sirven para organizar el espacio con un criterio y objetivo claro.

Comparto este documento sobre el tema.

El uso de las retículas y guías es algo muy útil al momento de diseñar interfaces ya que facilita la distribución de elementos y “prepara” el diseño para ser reorganizado al momento de adaptarse a otras medidas de pantalla.

Sin embargo resulta complejo llevar la perfección del diseño organizado al entorno de desarrollo cuando el equipo que va a reproducir esto a nivel web (o sea “maquetar” la web) no respeta estos conceptos.

Me ha pasado y es triste 😕

El uso de retículas y guías debe estar presente desde que se empieza a realizar la fase de bocetación y selección del formato, para tener claridad del limite del espacio donde se va a realizar el proyecto. Esto nos permite tener una mayor aproximación de la distribución de los diferentes elementos.

¡Con razón nunca me gustaba cómo quedaban mis proyectos!
Jamás se lo hubiera atribuido a la falta de retículas y guías.

Lo malo de algunos diseñadores, no utilizan estas guías para adecuar y constuir su isotipo.

Me encantan estos tipos de ejercicios, por que empece a pensar como esta diseñado de esta manera. El diseño de productos, de videos, de fotografías donde cada una se equilibra y es placentera de manera visual, sin la necesidad de procesar con más tiempo cada imagen.

Aplique las retículas a un diseño que ya había realizado, acepto sugerencias de cual les parece mejor teniendo en cuenta lo que se enseña en esta clase.

Antes:

Despues:

las guias dan simetria

Retículas y guías

Las retículas y guías nos ayudan a hacer una distribución más balanceada y exacta en el diseño dentro del formato, este es definidas por líneas, grillas o cuadrículas, se pueden establecer distintos tipos de distribución de guías. Este elemento nos ayuda distribuir y jerarquizar eficientemente para darle más sentido y armonización a nuestro diseño.
Nos sirven para todo tipo de formatos como diseño editorial, logos, web, fotos, videos, etc. Las guías establecen los límites de los elementos y del formato. Algunos ejemplos de cómo estas retículas nos pueden ayudar son:

  • Diseño móvil

  • Diseño web

  • Creación de logos

  • Creación de posters

Esta es la guia para mi poster

**Las retículas son compartimientos o bloques para poder distribuir elementos dentro del formato. **
Las retículas parecen redes donde será colocada la información. Por lo tanto, red y retícula son una buena forma de acordarse del funcionamiento de estos compartimientos.

Las versiones de la retícula pueden variar dependiendo del tipo de proyecto y la información que haya de mostrar.

También se pueden encontrar las retículas en los prototipos de baja fidelidad para indicar dónde van los títulos, bloques de texto, y las imágenes.

Las grillas también se conocen como retículas. Estas nos sirven para diagramar exactamente las dimensiones de un isotipo, ej: isotipo de Shell. Todo está pensado para que se distribuya dentro de un espacio. Estos espacios son harmoniosos y proporcionales dadas las medidas exactas entre los diferentes elementos gráficos.

Las grillas garantizan el mismo espaciado y el mismo grosor. Con la grilla garantizamos que todo tenga un balance.

Las guías son los bordes dentro de las grillas. Estas determinan los límites o bordes de hasta dónde va a llegar un texto o un gráfico dentro del formato.
Ej: El título no puede estar más arriba de una imagen grande, y entre esta imagen grande y el título hay un espacio o pueden intersectarse.

Las líneas guías también nos sirven para delimitar hasta dónde llega o debería llegar un bloque de texto.

Sin embargo, las guías y las grillas no son elementos que hay que seguirlos a la letra siempre. Dependiendo del proyecto y del concepto con el cual trabajemos, podremos romper y salirnos de las reglas siempre y cuando conozcamos cómo estas funcionan. Si conocemos las reglas podremos saber cómo y cúando romperlas.

Esto de las guias cuando uno como diseñador las implementa y se acostumbra a usarlas, se le facilita bastante la vida, ya que hay diseñadores que solo lo hacen al ojo y a veces las cosas no quedan tan bien, se ve desordenado.

Las retículas son compartimientos que se utiliza para distribuir los elementos. Las guías son los límites de estos espacios. Son una serie de líneas sobrepuestas que crean compartimientos donde distribuiremos de forma balanceada los elementos que forman parte de nuestro diseño


Espero su retroalimentación compañeros

El sangrado es cuando una imagen se corta en el borde y nuestro ojo la percibe como un error.
Las retículas son compartimientos que se utilizar para distribuir los elementos.
Las guías son los limites de estos espacios.

Les dejo un documento de descarga de Marco Creativo con algunas retículas útiles a la hora de hacer un logo:

Son una serie de líneas sobrepuestas que crean compartimientos donde distribuiremos de forma balanceada los elementos que forman parte de nuestro diseño.


¿Cuándo usar un diseño de retícula?
Es una buena decisión utilizar una retícula porque ayuda a equilibrar, a establecer jerarquías, la alineación y a mantener la consistencia.
Una retícula puede crear una estructura básica, un esqueleto para el diseño. Consiste en líneas “invisibles” sobre las que ubicar los elementos del diseño, haciéndolo así se consigue vincularlos a un “sistema” global y reforzar la composición—de forma racional
Es lo más efectivo para entrelazar varias formas de contenido. Crea un eje sólido que los usuarios pueden seguir para orientarse y para guiar sus ojos y acciones a modo de anclas visuales.

Nos da una aproximación a lo que seria una base real de nuestro proyecto.

Creo que este es el boceto de mi proyecto final del curso.

Que genial cuando hace el ejemplo en lápiz y papel, es decir, que podemos hacer un prototipo en primera versión, jeje 😃

Retículas y guías
.
Nos ayudan a tener una distribución mucho más balanceada y exacta dentro del formato. Casi siempre están definidas por grillas o cuadrículas.
.
Estas distribuciones pueden ser tan variadas como los tipos de proyecto. Todo depende de la información que se va a distribuir.
.
A pesar de que a simple vista no logramos determinar este tipo de grillas o medidas en el diseño final nuestro ojo sabe identificar cuando un diseño está balanceado.

Distribución de textos, elementos, iconos, etc.

Retículas división(límite) del espacio de trabajo - distribución de elementos

ritmo y guía de lectura (diseño, ilustración y texto)

A mi punto de vista este es el primer paso en la realización de un trabajo. que busca como se va a componer, cuales son las lineas de focalización que necesitamos y que es lo que va a componer nuestra imagen, por ejemplo un póster. de ahí se puede partir a la fotografía o a la idea de la ilustración

Las guías y las reticulas me han facilitado mi proyecto !!

Me va a servir mucho! No acostumbraba a usar guías y retículas.

que programa me recomiendan para empezar hacer esta series de ejercicios?

No sabia la importancia de las reticulas y guias, me parece excelente la explicacion

Retículas y guías

  • Las retículas son lineas (elementos visuales) que me perimiten reconocer los límites para realizar un diseño.

INTERESANTE

La foto coji del internet, hice sólo el grid en AI

Las reticulas dan armonia al diseño.

Hola, mi ejercicio de retículas y guías

Ejercicio Líneas guías y retículas


Mi poster