Unidad I Unidad II Unidad III

DISEÑO WEB

Diseño gráfico para web

SESIÓN

02
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
www.usat.edu.pe
www.usat.edu.pe
 Propósito de la sesión
Objetivo de la sesión:
● Comprender conceptos de diseño.
● Utilizar herramientas gráficas para la creación de ilustraciones vectoriales.

Contribuye al logro

Resultado de Aprendizaje de la Unidad 01:

R1: Diseña páginas web con herramientas de diseño gráfico y maquetado web básico.

Contribuye al logro

Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s)
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
2 www.usat.edu.pe
 Contenidos
El diseño

Conceptos básicos del diseño

Wireframe

Elementos visuales

Diseño vectorial con Inkscape

3 www.usat.edu.pe
 ¿Qué es el diseño?

• El diseño es un puente entre la

funcionalidad y estética.
• El diseño es la solución a un
problema específico,
representada de una manera
gráfica.

4 www.usat.edu.pe
 El concepto

• Es la narrativa que estamos contando

dentro del diseño
• El concepto es la representación tangible
de una idea.
• Sin concepto, el diseño no puede cumplir
su misión de comunicar.
• Para crear la narrativa del diseño:
– Conocer e investigar el tema
– Tomar los puntos más importantes
– Definir la comunicación visual
5 www.usat.edu.pe
 https://www.couroazul.com/
El concepto (II)

6 www.usat.edu.pe
 Diseño universal
• El diseño universal debe
comunicarnos algo sin necesidad de
tener un sesgo cultural, geográfico o
social.
• La señalética fue creada para
comunicar necesidades muy
específicas, por eso es funcional en
cualquier parte del mundo y no está
limitada culturalmente.
• El diseño universal es muy
importante, le da el sentido de
pertenencia a la gente.
7 www.usat.edu.pe
 Diseño atemporal
• ¿Cuánto tiempo de vida va a tener el diseño?
• El diseño atemporal tenemos que tenerlo en cuenta a la hora de
conceptualizar.
• Buscar un diseño preciso para no sentir que el diseño va a morir
pronto. Además de que el diseño atemporal nos sirve para
comunicar algo que puede ser distinto a nivel cultural, geográfico
o social.

1912
8 www.usat.edu.pe
 El boceto
• Es la aproximación más real al
diseño final, pues con él podemos
probar distintas formas en las cuales
podemos comunicar una idea.
• El diseño no debe tener
improvisación, de ahí la necesidad
de los bocetos.
• El boceto está presente también en
el diseño de interfaces, esto es para
poder prototipar la funcionalidad de
las aplicaciones antes de llevar el
diseño a digital.
9 www.usat.edu.pe
 WireFrame – el
boceto para página
web

10 www.usat.edu.pe
 Proyecto de Aplicación
En sus grupos de trabajo, realizar el Wireframe de su proyecto de
curso.
Fecha de presentación: Establecida en el sílabo

Lectura Recomendada
• Diferencias entre sketch, wireframe, mockup y prototipo
https://juanca.e-lexia.com/2014/05/diferencias-entre-sketch-wireframe-mockup-y-prototipo/

11 www.usat.edu.pe
 Elementos visuales

Son las herramientas gráficas que

vamos a usar para hacer la
representación visual de una idea.
Pueden ser:
• Fotografía
• Ilustración
• Tipografía
• Color
• Líneas y puntos
• Figuras geométricas
12 www.usat.edu.pe
 Alineación
• La alineación crea un balance
por peso natural, nos da la
sensación de que hay equilibrio
en el diseño.
• La alineación es para tener una
mejor lectura y una mejor
disposición en el espacio.

13 www.usat.edu.pe
 Alineación
• La alineación crea un balance
por peso natural, nos da la
sensación de que hay equilibrio
en el diseño.
• La alineación es para tener una
mejor lectura y una mejor
disposición en el espacio.

14 www.usat.edu.pe
 Contraste
• El contraste es la diferenciación visual de
uno o varios elementos. Una diferenciación
muy marcada.

15 www.usat.edu.pe
 Inkscape

• Inkscape es un software de vectores gráficos

de calidad profesional para Windows, Mac
OS X y GNU/Linux. Es usado para crear una
gran variedad de gráficos como ilustraciones,
iconos, logos, diagramas, mapas y diseños
web.
• Inkscape es un software libre y de código
abierto, que utiliza SVG (Scalable Vector https://inkscape.org/
Graphic), el estándar abierto de W3C, como
formato nativo. [1]

16 www.usat.edu.pe
 Inkscape

• Descarga e instalación
– https://inkscape.org/release/1.0.2/windows/

• Dependiendo de la arquitectura
de su computadora descargar
para 32 o 64 bits

• Seguir los pasos de instalación

17 www.usat.edu.pe
 Demostración de uso del programa

• Manejo del entorno

• Ejercicios básicos

18 www.usat.edu.pe
 Revisar Manuales

• Curso de Inkscape en video (ver)

• Tutorial Oficial Ingles (ver)
• Manual Inkscape –Español (ver)

19 www.usat.edu.pe
 Conclusiones

• Realizar un buen producto de diseño

gráfico implica conocer varios aspectos
del diseño y mucha creatividad
• Existen herramientas de software libre
muy potentes que permitirán realizar
productos de diseño gráfico igual que
herramientas de pago .

20 www.usat.edu.pe
 Próxima sesión

• Teoría: Fundamentos del Diseño gráfico

(parte II)
• Práctica: Edición de imágenes

21 www.usat.edu.pe
 Referencias
• [1] Inkscape, «Acerca de Inkscape,» [En línea]. Disponible:
https://inkscape.org/es/acerca-de/. [Último acceso: 31 marzo 2020].
• [2] C. Jiménez y E. Arrieta, «Curso de Introducción al Diseño,» Platzi, [En línea].
Disponible : https://platzi.com/cursos/fundamentos-diseno/. [Último acceso: Abril
2019].
• [3] Video Tutoriales 2.0, «Curso Inkscape,» mayo 2019. [En línea]. Disponible :
https://www.youtube.com/watch?v=Qs57dO47Enc&list=PLIwpWZxbAMGe1zgu4IpR
TuiWoyiUPr1os. [Último acceso: 31 marzo 2020].
• [4] Inkscape, «Inkscape Tutorials,» [En línea]. Disponible :
https://inkscape.org/learn/tutorials/. [Último acceso: 31 marzo 2020].

22 www.usat.edu.pe
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe

http://www.facebook.com/usat.peru

https://twitter.com/usatenlinea

https://www.youtube.com/user/tvusat

https://plus.google.com/+usateduperu

www.usat.edu.pe