Diseño

Gráfico
para
Web

BIENVENIDOS
 ¿De qué se trata la materia?

UNIDAD 1:
Procesos de diseño para sistemas interactivos de baja y mediana complejidad.

Diseño de funcionalidad y Navegabilidad mobile.

UNIDAD 2:
Diseño de identidad gráfica en el proyecto web.

Diseño de logo + Tipografías y diseño de Pantallas Responsive- mobile.

UNIDAD 3:
Diseño de experiencias en interfaces.

Diseño de pantallas de un e-commerce/ carrito de compras.

 OBJETIVOS

Analizar las leyes de la Interfaz y Comprender las Heurísticas

propias del diseño visual para pantallas.
Diseño de funcionalidad.

Dominar los conceptos, métodos y herramientas del

Diseño Centrado en el Usuario.
Navegabilidad y Arquitectura de la información.

Diseñar visualmente interfaces de aplicaciones.

TODO ESTO SIRVE PARA DISEÑAR NUESTRO PROPIO E-COMMERCE.

 Cronograma de cursada.

La materia se cursa 1 veces por semana,

Turno mañana: Jueves de 09:00 a 11:00hs.
Turno noche: Martes de 21:00 a 23:00hs.
En consecuencia, conmigo van a tener 16 clases.

A lo largo del semestre, NO tenemos feriados que

afecten a la materia.

Esta es una materia de carácter Teórico / Práctico.

 RECUPERATORIOS Y FINAL.

CURSADA:
Desde el 12/08/2019 al 29/11/2019

RECUPERATORIOS:
Desde el 02/12/2019 al 06/12/2019
Todos los recuperatorios son presenciales, uno por cada
parcial a recuperar.

FINALES – 1er. llamado:

Luego de la cursada. Desde el 09/12/2019 al 20/12/2019
Examen domiciliario - Final presencial.
Evaluaciones
 Evaluaciones.

TP 1 – Diseño del ONE PAGE responsive (clase 5)

TP 2 – Diseño del logo, paleta de color y su aplicación para
implementar en el carrito de compras. (clase 10)
TP 3 – Diseño de 5 pantallas de un carrito de compras, más el diseño
del formulario de compra final con datos de tarjeta. (clase 15)
RECUPERATORIOS: Entrega del TP adeudado, en el horario de la
materia, día a confirmar.
FINAL: Diseño de pantallas del carrito de compras + piezas de gráfica
publicitaria (mockup) y papelería comercial + Diseño de landing page.
 Acceso al material

El material es subido al FTP de DaVinci.

Cada clase (con sus apuntes, ejercicios, diapositivas y

consignas de evaluaciones) son subidas dentro de las
48hs siguientes al FTP académico.

También en Drive o Classroom.

 En Contacto.

Enviar un email a florencia.kotlar@davinci.edu.ar con los siguientes datos:

Asunto:
• DW 2A - Apellido, Nombre

Contenido:
• Turno (Mañana o Noche)
• Comisión
• DNI o identificación
• Fecha de nacimiento (DD/MM/AAAA) [opcional]

De esta forma puedo guardar sus datos para ponerme en contacto con
ustedes.

¿A CUÁL MAIL? florencia.kotlar@davinci.edu.ar

EL DISEÑO PERFECTO - experiencia y funcionalidad.

.
Diseño es un término ambiguo y una profesión abstracta.
Con el objetivo de transmitir y dar una solución.

El diseño, muchas veces suele no ser valorado pero resulta ser de elevada
importancia y con una gran presencia en nuestra rutina diaria.
Estamos rodeado de elementos que fueron ideados para cumplir una función.
Etimológicamente deriva del término italiano “disegno”, DIBUJO.
Es una representación gráfica de un pensamiento que pretende solucionar un
problema de forma artística, funcional y creativa.
El resultado final es solo una parte.

Todo lo que no observamos es un trabajo de intenso desarrollo llamado

“prefiguración” que depende del contexto.
 PREFIGURACIÓN
.
Es un proceso de búsqueda resolutiva.

Esta búsqueda implica investigación, presentación de

propuestas y descarte de las mismas.
Siempre hay que estar atentos a la mejor idea, podemos
plasmarla a través de bocetos, esquemas o esbozos en
cualquier tipo de soporte.
Sin todo este procedimiento, con un concepto definido, unas
metáforas justificadas, una forma y funcionalidad específica,
sería incapaz de mantenerse a flote.
Ilustración del diseñador Damien Newman.
Es una propuesta para transmitir EL PROCESO DE DISEÑO a un cliente.
 PROCESO DE DISEÑO
.
Refleja que, en un inicio el recorrido puede presentarse incierto y
enmarañado hasta el resultado final .
PERO!!
Con trabajo y perseverancia al final de este proceso,llegan a un punto
donde radica el DISEÑO FINAL que contiene todo lo que deseamos.

Eso es lo que quiero que busquen. EL PROCESO DE DISEÑO

 PROCESO DE DISEÑO
.
Vemos un esquema.
 PASOS A SEGUIR...
.
Pasos a seguir para alcanzar esa idea brillante:

INVESTIGACIÓN Y BÚSQUEDA BOCETOS Y BORRADORES TÉCNICAS Y MEDIOS

DE INSPIRACIÓN

PRODUCCIÓN
FINAL

BRAINSTORMING CONCEPTO DESARROLLO

Tormenta de ideas
 PROCESO DE DISEÑO
.
El diseño también se entiende como un proceso, que se presenta como
una SOLUCIÓN DE BELLEZA.
PERO EN CAMBIO
El arte es puramente experiencial.

El DISEÑO ES FUNCIONAL: resuelve necesidades en situaciones concretas.

El objetivo del buen diseño debería ser una mezcla de EXPERIENCIA Y

FUNCIONALIDAD.

Les recomiendo la serie de Netflix Abstract: The art of design

Principios para un buen Diseño Web. [1/9]
.
Un DISEÑO WEB EFECTIVO hace que las personas se sientan
de cierta manera y realicen una determinada acción.

Vamos a ver algunos principios de diseño:

1. DEFINIR PRIMERO LOS OBJETIVOS:

Iniciar cada proyecto de diseño web con una sesión de lluvia de ideas
que resuma objetivos claros y realistas de la página web.

Sirve para fortalecer los objetivos.

 Diseño Web. [2/9]
.
2. ENFOCARSE EN LOS USUARIOS:
 Teniendo los objetivos claramente establecidos.
 Definir y priorizar a los usuarios.
 Ser lo más específico posible.

¿A qué tipo de usuario apunta mi proyecto?

 Analizar el género al que apunta tu proyecto. (mujer / hombre)
 Nivel de educación
 Ubicación en la ciudad
 Pasatiempos relacionados
 Nivel de ingreso

El punto clave es que los diseñadores estén pendientes de los usuarios y diseñen
pensando en los PASOS que el usuario debe seguir en cada pantalla.
 Diseño Web. [3/9]
.
3. DISEÑAR PARA LAS EMOCIONES:
 Hay que entender las emociones que la marca o el cliente quiere transmitir.

Lluvias de ideas / preguntas.

 Enfócate en las emociones de tus clientes.
 Preguntar a tu cliente si le “gusta” un diseño no es conveniente.
 Cuando muestres un diseño debes formular preguntas como por ejemplo;

 “¿Cuál de ellos te hace sentir más profesional?”

 “Cuando comparamos estos dos diseños, uno es más moderno,

mientras que el otro es más clásico”.

Ahora que las vemos de forma visual:

 ¿Cuál crees que es la “emoción” más importante para representar a tu
público objetivo?”
 Tenemos que Pensar…
.

¿Cuál es la “emoción” más

importante para representar
a tu público objetivo?”
 Diseño Web. [4/9]
.
4. SEGUIR LAS REGLAS DEL DISEÑO VISUAL
Existe elementos visuales que los usuarios web “usan” consciente e
inconscientemente para decidir si van a “confiar” en una página web.
Las más importantes son:
 Recortar: Subir a la web las fotos al tamaño adecuado (recortadas) es lo que hace
una buena estructura o puede rompe la composición de una página.
 Espacio negativo: mucha atención a los márgenes, espacios y la altura de líneas.
 Fuentes: usamos entre 1 a 2 fuentes en una página web (sin contar el logo que
por lo general tiene su propia fuente).
 Colores: Usar efectivamente los colores es para los diseñadores una de las cosas
más complicadas. Pueden usar generadores, o diseñar tu propia paleta de colores.
 Estructura: Creamos una “fluida” página web. Para que la mirada de los usuarios
se dirija a donde queremos, sin que otros elementos llamen su atención.
 Diseño Web. [5/9]
.
5. CONSTRUIR UNA CLARA JERARQUÍA VISUAL

 Los usuarios web no leen, escanean.

 Tu trabajo es llamar su atención y llevarlos hacia
la información más importante mediante una
jerarquía visual claramente definida.
 Un diseño bien pensado guía al usuario a través
de la página de la forma que quiere el diseñador.
sitio > página > sección
 Los usuarios deben ser capaces de ver la página
y entenderla en segundos.
 Diseño Web. [6/9]
.
6. SER CONSISTENTE

No confundas a los usuarios.

Los enlaces debe ser consistentes y perceptibles.
Si usas iconos, imágenes e ilustraciones, asegúrate que sean de un
mismo lenguaje visual o misma estética.
Las inconsistencias distraerán al usuario y opacarán tu mensaje.
No utilicen más de 3 fuentes, es mejor si todas pertenecen a la
misma familia con distintas variantes.
Nos limitamos a 5 o 6 colores de la paleta.
El logo puede tener una fuente diferente o ser un png.
 Diseño Web. [7/9]
.
7. ROMPÉ LAS REGLAS (SI ES NECESARIO)

Si hay algo que es particularmente único e importante que

necesites resaltar, puede que tengas / puedas / necesites
“romper las reglas”.
Podés usar uno o dos contrastes de colores para ayudar a los
elementos a que se destaquen.
Innovar en la estructura en cuanto al diseño, pero sin salir de los
lineamientos y estándares generales.

Sin marear al usuario. ( Ya veremos la usabilidad del diseño

necesarios para la web)
 Diseño Web. [8/9]
.
8. NO ABUSAR DE LOS TRUCOS.

Hacé un diseño divertido, pero asegúrate de que esos elementos

apoyen lo que tratas de conseguir en el sitio.
Puede que el diseño de tu página web tenga un hermoso aspecto y
luzca bien en móviles, PERO !!
Si se hace un mal uso o se omite elementos importantes para el
diseño puede trasmitir al usuario confusión y descuido.
 Diseño Web. [9/9]
.
9. HACER PRUEBAS, MEDICIONES Y MEJORAS

Las páginas web evolucionan.

Hacé diseños flexibles, adaptables y dinámicos.
Recopilá y analizá pruebas continuas de datos que impulsarán la
mejora constante en tu sitio.
Creá un diseño que cumpla tus objetivos.

Nota: un diseño web efectivo necesita conectar emocionalmente

al usuario con la marca, mientras que al mismo tiempo los lleva
a hacer una acción determinada.
 APAGUEN PCs,
MONITORES Y
REVISEN QUE
NO SE OLVIDAN
SU PENDRIVE
¡¡MUCHAS ENCHUFADO.
GRACIAS!!