Introducción al Diseño Digital

Introducción al diseño digital

Diseño Digital 3°1 y 3°2

Diseño

Es el proceso de crear soluciones visuales, funcionales o estructurales para satisfacer una necesidad o resolver un problema. Implica planificar, organizar y dar forma a elementos para lograr un propósito específico, ya sea en el ámbito gráfico, industrial, arquitectónico, digital, textil, entre otros.

diseño gráfico

Es una rama interdisciplinaria del diseño, es el arte y proceso de combinar texto e imágenes (figuras, fotografías, dibujos…) para comunicar un mensaje de forma efectiva.

Los diseñadores gráficos trabajaron originalmente en la imprenta, sobre todo con libros, periódicos, revistas, folletos y otras imágenes estáticas.

Elementos básicos del diseño

Punto

Forma

Línea

Texto

Conjunto de frases, palabras coherentes y ordenadas.

Es la unidad mínima de comunicación visual, el elemento gráfico fundamental.

Forma que conecta dos o más puntos.

Cualquier área bidimencional con un limite reconocible.

Color

Textura

Imagen

Forma en que se presenta la superficie de una obra artística, principalmente pictórica, lo que produce una sensación táctil o visual.

Figura o representación visual de algo o alguien.

Es la percepción visual del reflejo de la luz que ilumina las superficies y rebota en la retina

6 pRINCIPIOS DEL DISEÑO

Proximidad

Alineación

Contraste

Balance:

Blanco y negro, objeto y fondo. El contraste nos ayudará a diferenciar dos elementos, o bien a separar un elemento del fondo.

Crea relaciones entre dos o más elementos.

Nos ayudará a crear orden, o su opuesto, creando conexiones visuales entre ellos.

Es similar al equilibrio o compensación entre dos elementos

6 pRINCIPIOS DEL DISEÑO

Repetición

Espacio

Es otro principio que refuerza la relación y consistencia entre elementos.

Podemos provocar la sensación de distancia e incluso de velocidad.

diseño digital

Es la creación de contenido visual y experiencias interactivas para medios digitales, como sitios web, aplicaciones, redes sociales, videojuegos y productos tecnológicos. Se centra en la estética, la usabilidad y la funcionalidad para garantizar una experiencia óptima para el usuario.

dos niveles:

Visual

Conceptual

consiste en planificar cómo se articulan los elementos visuales para que ese lenguaje funcione, se incluyen los colores, la tipografía, la composición, la estructura, etc.

la forma de organizar la experiencia que vamos a tener con determinadas interfaces o encuentros delante de esa pantalla.

Gráficos digital

Una imagen digital o gráfico digital es una representación bidimensional de una imagen a partir de una matriz numérica, frecuentemente en binario (unos y ceros). Dependiendo de si la resolución de la imagen es estática o dinámica, puede tratarse de una imagen matricial (o mapa de bits) o de un gráfico vectorial.

VERSUS

GRÁFICOS DE MAPA DE BITS

GRÁFICOS DE VECTORES

Gráficos de mapa de bits

Conocido como bitmap o rasterizada, es un archivo de datos digitales que representan una rejilla rectangular de píxeles demominada raster.Cada píxel contiene la información del color, la cual puede o no contener transparencia, y ésta se consigue combinando el rojo, el verde y el azul.

Gráficos de mapa de bits

Conocido como bitmap o rasterizada, es un archivo de datos digitales que representan una rejilla rectangular de píxeles demominada raster.Cada píxel contiene la información del color, la cual puede o no contener transparencia, y ésta se consigue combinando el rojo, el verde y el azul.

Gráficos de mapa de bits

Conocido como bitmap o rasterizada, es un archivo de datos digitales que representan una rejilla rectangular de píxeles demominada raster.Cada píxel contiene la información del color, la cual puede o no contener transparencia, y ésta se consigue combinando el rojo, el verde y el azul.

características

• Cada uno de los píxeles que conforma el mapa de bits tiene un color definido que presenta un valor.
• Si hacemos zoom sobre la imagen podemos ver claramente cada uno de esos píxeles.
• Cuanto mayor sea el número de píxeles por imagen, mayor será su calidad.
• Son muy pesados
• Se utilizan para fotografías, imágenes con mucho detalle o imágenes escaneadas.
• Formatos más utilizados JPG, PNG, BMP y TIFF

uso

La bitmap se utiliza más para fotografías o imágenes que tienen una buena resolución, pero no resulta tan importante mantener la calidad al hacer zoom.

uso

La bitmap se utiliza más para fotografías o imágenes que tienen una buena resolución, pero no resulta tan importante mantener la calidad al hacer zoom.

RESOLUCIÓN

En mapa de bits se las suele definir por su altura y anchura (en píxeles) y por su profundidad de color (en bits por píxel), que determina el número de colores distintos que se pueden almacenar en cada punto individual, y por lo tanto, en gran medida, la calidad del color de la imagen. De acuerdo a la cantidad de píxeles incluida en el mapa de bits, queda determinada la resolución de la imagen. Es muy común oír valores como 1280 x 720, o 1920 x 1080, y no es más que el número de puntos expresado de forma que definan el ancho por el alto.

fORMATOS

ventajas vs desventajas

A la hora de reducirlas o sobre todo aumentarlas pierden demasiada calidad y se pixelan.Pueden no tener calidad suficiente para ser impresas. Si tienen mucha calidad pueden ocupar excesivo espacio.

Consiguen representar fielmente la realidad.Son la mejor opción para fotografías debido al alto nivel de detalle que pueden tener.

Galería de mapas de bits

Relación entre el pixel art y el mapa de bits

• Cuando comenzaron a desarrollarse los primeros videojuegos, es decir, antes de la aparición del 3D, los videojuegos estaban compuestos por mapas de bits, diseñados píxel a píxel por artistas especializados. Esto es lo que se conoce como Pixel Art, un tipo de arte que ha marcado un hito en la historia de los mapas de bits.

Con este método de pixel art en los videojuegos comenzaron a trascender personajes que, en la actualidad, son íconos de los videojuegos más populares (Mario o Donkey Kong son claros ejemplos).

Gráfico vectorIAL

Se conoce como imagenes orientadas a objetos (object-oriented) consiste en una serie de dibujos lineales badados en una lista de objetos gráficos (líneas, curvas, triángulos, rectángulos,etc)

características

• Están formados por líneas formadas por ecuaciones matemáticas.
• Cada línea esta delimitada por dos puntos llamados nodos. Las líneas curvas son llamadas curvas Bézier y obtienen su forma gracias a unas pequeñas asas adjuntas a los nodos.
• Se basan en coordenadas matemáticas que definen su posición, su forma, su color y otros atributos.
• Se utilizan para logotipos, iconos, ilustraciones, infografías, tipografías o elementos para webs.
• Tienen una resolución infinita. Se pueden ampliar o reducir sin que su calidad se vea afectada.
• Formatos EPS, AI y SVG.

uso

Este tipo de imágenes se utilizan especialmente para logotipos, iconos, ilustraciones, infografías, tipografías o elementos para webs, que necesitan mantener su calidad al máximo en todo momento.

RESOLUCIÓN

Mantienen la nitidez y la definición aunque se amplíen totalmente: no pierden calidad. Precisamente por ello, también son capaces de adaptarse a cualquier forma, por lo que son especialmente utilizadas para la creación de logotipos o iconos.

fORMATOS

ventajas vs desventajas

Pueden escalarse sin perder nada de calidad.No pierden calidad al ser impresas. Gracias a que se basan en fórmulas y no en píxeles, consiguen almacenar información compleja ocupando poco espacio.

Tienen grandes limitaciones para crear imágenes reales. Es muy complicado reproducir una fotografía a partir de vectores.

Galería de vECTORES