Fundamentos

de
diseño de una
página web
El alumno conocerá los principales conceptos del
diseño para aplicarlos en su página de internet
Contenido del tema

V.1 Balance V.2 Alineación

V.3 Jerarquía V.4 Énfasis

V.5 Contraste V.6 Ritmo

V.7 Espacio V.8 Extras

 Balance
Se trata de la distribución del peso visual de un objeto,
color, textura o espacio.

“Si el diseño fuera una una balanza, esos elementos

deberían equilibrarla para que un diseño se sienta estable”
 Alineación
La alineación es clave para proveer una estructura
robusta y bien definida a tu trabajo.

Imágenes Texto

Elementos Assets
 Alineación
Si no alineas todos los elementos en tu trabajo, creas
un diseño desordenado y horrible de mirar.

AV

Imágenes Texto

Elementos Assets
Jerarquía
Define
Da importancia a los
elementos en tu diseño.

Ordena
Da estructura a tu
diseño, lo que lo hace
fácil de comprender.

Los estilos de letra también dan importancia al texto. El tamaño tiene más jerarquía que las letras en negritas o cursivas.
Énfasis
Añadir énfasis a un objeto crea un punto focal, el cual llama la atención de la audiencia.
Es a donde quieres que el usuario mire primero, pero no quita el balance al diseño.
Contraste
La diferencia entre dos o más objetos es el contraste. El contraste es comúnmente
asociado con la legibilidad y la accesibilidad. El contraste se encarga de la diferencia
entre dos objetos, mientras que el énfasis se encarga del impacto que provoca un
objeto.
Ritmo
El ritmo es creadod cuando uno o más elementos del diseño son utilizados
repetidamente para crear una sensación de movimiento organizado. Para mantener al
ritmo emocionante y activo, la variedad es esencial.
Espacio
El espacio es el área que una
figura o elemento ocupa. El
espacio se puede definir como
positivo y negativo. La parte
positva de un diseño es el
espacio que está ocupado por
las figuras que hacen al diseño.
El espacio negativo es el fondo.
El espacio negativo en un
diseño es tan importante como
el área positiva.
 Extras
y ejemplos

V.8
Haz un diseño
Crea tu página web, materialízala. Ya sea que la diseñes en Illustrator o en tu cuaderno,
es importante tener una referencia para poder programarla.
Utiliza una paleta de colores
Es importante seleccionar colores que vayan de acuerdo a lo que quieres exponer en tu
página. Selecciona un color y modifícalo en cierto rango para obtener sus tonalidades.
Utiliza dos o tres fuentes
No sobrecargues tu diseño con miles de fuentes diferentes. Elige unas pocas que
tengan el contraste perfecto para títulos y textos. Para elegirlas, recuerda que existen
distintos tipos de fuentes.
Abusa de peso de la letra
Da importancia a tus textos con el peso de la letra. Esto es, pon la letra en negritas y haz
que tus textos sean llamativos y fáciles de leer. También utiliza distintos tamaños y
letras en cursiva.

Utiliza SVG
SVG es un tipo de archivo acrónimo de Scalable Vector Graphics. Es una imagen
vectorizada que no pierde calidad al hacerle zoom. Para logos, íconos y otro tipo de
ilustraciones, lo mejor es insertar SVG en tus diseños.
Utiliza iconmonstr
Es un sitio web de íconos y vectores gratuito. Tiene variaciones de un tipo de diseño y es
útil para encontrar logos e íconos de productos y servicios. iconmonstr.com

Ten creatividad y rompe las reglas

Expónte al diseño gráfico. Lee sobre él. La práctica hace al maestro.
Toidze I. (1959) ВО ИМЯ МИРА (En nombre de Chris Carter para X-Files (1995) I want to Siva Ganesh (2018) New York - The Wonder
la paz). Póster. A3. believe. Póster. 91.5 × 61 cm. City. Póster. 27.94 × 35.56 cm.
El uso de una paleta de colores
bien definida, el énfasis en un
punto del diseño, el balanceo
del espacio, la alineación y la
simetría radial crean un trabajo
homogéneo que dirige la vista
del espectador hacia un lugar
específico del trabajo.

sweet trip (2003) velocity : design : comfort.

Cover de álbum.
 La jerarquía, junto con el
contraste que los colores
y las formas crean, hacen
que la propaganda haga
un llamado efectivo al
pueblo ruso.

Alexander Rodchenko (1925) Books

- In All Fields of Knowledge.
Litografía. 54.3 × 76.8 cm.
J. Howard Miller (1942)
We Can Do It!. Póster.
55.88 × 43.18 cm.

The Beatles (2000) 1.

Póster. 90 × 60 cm.
 Referencias
invision. (2018, 12 octubre). Principles of design.
https://www.invisionapp.com/defined/principles-of-design

Stout, J. (2000). Design: Exploring the Elements & Principles (C. Ouverson, Ed.)
https://www.extension.iastate.edu/4hfiles/statefair/EEHandbook/EEHJPDesign4H634.
pdf

The J. Paul Getty Museum. (2011). Principles of Design.

https://www.getty.edu/education/teachers/building_lessons/principles_design.pdf