Clase 01

Diseño y
Programación Web

Materia:
Diseño Gráfico para Web

Docente contenidista: MEIJIDE, Valeria S.

Revisión: Coordinación
Contenido
Diseño de Interfaces para el Medio Hipertextual ............................ 6
Proceso del Diseño ..................................................................... 9
Técnica: Wireframes ................................................................. 13
Características visuales de los wireframes................................... 14
Buenas prácticas para trazar Wireframes ..................................... 16
Ventajas de los Wireframes ....................................................... 17
Bibliografía .............................................................................. 19

2 www.davinci.edu.ar
Clase 1

¡Te damos la bienvenida a la materia

Diseño Gráfico para Web!

3 www.davinci.edu.ar
Diseño y
Funcionalidad
¿Por qué es importante esta materia
en la carrera?
Durante el trayecto de esta cursada vamos a presentar cómo la
planificación y el proceso del diseño centrado en el usuario nos
permite crear un sistema gráfico pensado para la interacción y al
servicio de quien interactúa con ese sistema.

Esto quiere decir que nuestros diseños deberán comunicar

visualmente las acciones, funcionalidades y procesos de un producto
digital, como lo requieren los softwares y diversos sistemas
informáticos para su salida en pantalla.

Cuando diseñamos una representación gráfica de estos productos

(apps, webs, intranets, videojuegos, etc.) lo hacemos para generar
una pieza de comunicación visual durante la ideación del producto
mismo. De esta manera logramos definir, corroborar y validar ciertas
características del producto antes de empezar a desarrollarlo.

Entre las diversas disciplinas en las que nos apoyamos para crear
estos productos digitales, se encuentra UI, del inglés User Interface.
Cuando aparece en mayúsculas la sigla se refiere a la disciplina de
Diseño de Interfaz de Usuario.
Esta disciplina nos presenta principios generales del diseño, teoría de
color, patrones de diseño, lineamientos para el uso de tipografías,
animaciones y el diseño de interacción; con el objetivo de resolver la
ui, (del inglés user interface), se traduce como la interfaz de usuario.

La ui es la “capa externa” del producto que funciona

como intermediario entre quien lo usa (el usuario)
y lo que procese (el sistema), mediante interacciones
(acciones recíprocas).

4 www.davinci.edu.ar
Para los productos con salida en pantalla ese intermediario requiere
una “gráfica interactiva”; para este tipo de productos específicamente
tendremos que diseñar la gui, del inglés graphic user interface, la
interfaz de usuario gráfica.

La interfaz le habla al usuario, tiene que comunicarle qué se puede

hacer y qué está pasando. Como es la que propone la interacción, las
incertidumbres y dudas que pueda tener el usuario frente a la
interfaz, estarán relacionadas mayormente con errores en su diseño.

Hay que considerar que en la mente del usuario un error de diseño

puede ser percibido como un error funcional en la ejecución de ese
sistema, lo que termina generando desconfianza en el producto.

El modelo mental del usuario le impide comprender qué hay detrás

de la interfaz, a diferencia de los desarrolladores/as cuya formación
técnica va generando una idea más clara sobre la arquitectura de las
tecnologías involucradas.

• Imagen mental de la idea de “producto digital”:

Así lo piensan Así los usuarios

desarrolladores/as

En el proceso de diseño de estas interfaces aparecen las heurísticas

de usabilidad y metodologías, como guías para anticiparnos y/o
identificar y corregir estos errores comunes en el diseño que pueden
generarle problemas al usuario como: la poca legibilidad de los
contenidos, ambigüedades en el rotulado, falsos affordance o falta de
retroalimentación.
Durante la cursada iremos conociendo conceptos, buenas prácticas y
técnicas para diseñar mejores interfaces de usuario gráficas:
funcionales y amigables para los usuarios.

5 www.davinci.edu.ar
Diseño de Interfaces para
el Medio Hipertextual
En el Diseño Web, tenemos que pensar la ui para comunicar al
usuario con un contenido de formato hipertextual.
Los usuarios solicitan este contenido a través de un navegador web,
que es un software y tiene su propia ui: algunos de sus elementos
son la barra de dirección, la ventana, barra de estado, menú,
pestañas, etc. Existe además una amplia gama de dispositivos que
cuentan con un navegador web por defecto.

Pero cada sitio o plataforma web a la que accedemos presenta su

contenido enriquecido con interacciones y una “identidad” propia,
está personalizado.

En esta materia nos enfocaremos en los conceptos teóricos y

desarrollo del diseño visual para diseñar la salida en pantalla, lo que
nos muestra el viewport (área visible de la ventana) del navegador.
Además de combinar colores, fuentes tipográficas y resolver el layout
(diagramación de contenidos) apropiados para la web, la interfaz
tiene que darle soporte -como mencionamos anteriormente- a las
interacciones.

Los elementos de la interfaz que le dan soporte a las interacciones se

perciben como “accionables”, son los componentes interactivos:
los hay navegacionales, de entrada de datos, informacionales y
contenedores.

6 www.davinci.edu.ar
7 www.davinci.edu.ar
Todo en la pantalla compite por la atención del usuario, y la misma
pantalla es lo guía para que entienda qué tiene que hacer.
Un buen diseño de la interfaz le da al usuario la sensación de control
de lo que hace, mientras cumple sus objetivos y expectativas.

Por ejemplo, en un sitio web la ui debe permitirle a los

usuarios:
● Acceder a los
contenidos
● Realizar tareas
● Comprender las
funcionalidades
● Navegar por las
diferentes secciones

El servicio de Diseño puede resultar una “profesión abstracta”, pero

su proceso conlleva el objetivo de transmitir y dar una solución.
Poder diseñar una ui apropiada para un canal de comunicación como
lo es la red de internet involucra: dar un acceso cómodo a los
usuarios a ese contenido interactivo, comprendiendo el contexto de
interacción. Esto quiere decir que hay que considerar la diversidad de
dispositivos que se pueden conectar hoy a la red.

Para resolverlo el diseño responsivo, es un enfoque que nos

propone contenidos, layouts fluidos y componentes adaptables.
Adoptando entre otras buenas prácticas, recomendaciones y patrones
de diseño (soluciones ya probadas) que se van documentando a
medida que la web evoluciona.

La naturaleza colaborativa alrededor de las tecnologías web genera

una gran cantidad de recursos y espacios de discusión que permiten
que no se discontinúe la tecnología, va co-evolucionando con los
usuarios. Ante estas variables es conveniente apoyarse en un proceso
de diseño que nos permita el desarrollo de esa solución de diseño.

8 www.davinci.edu.ar
Proceso del Diseño
El proceso de diseño requiere la revisión de una serie de ideas y
tomar decisiones en base a objetivos claros. Muchas veces llevamos a
papel o un lienzo digital los diagramas, esquemas y bocetos como
una representación gráfica de la solución que estamos pensando.

“Bajar” la idea de nuestra mente para analizarla es un trabajo

intenso de desarrollo se llama prefiguración.

De esta manera el dibujo (etimológicamente deriva del término

italiano disegno) nos soluciona un problema de forma artística
funcional y creativa. Es una técnica, y parte del proceso de búsqueda
resolutiva que vamos a encarar también recopilando toda la
información pertinente al desarrollo de la idea.

¡Pero ojo! El resultado estético del diseño puede tener poco impacto
si no comunica lo que se esperaba o no es funcional a los objetivos
definidos por los interesados en el producto (en este caso el sitio
web).

Para no perder este enfoque durante la búsqueda de las “soluciones”

de diseño, es bueno llevar por delante un proceso.

A continuación, te presentamos los siguientes pasos para

resolver un diseño web efectivo:

9 www.davinci.edu.ar
1. DEFINIR PRIMERO LOS OBJETIVOS:
● Iniciar
● Iniciá 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.

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/otro). 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.

3. DISEÑAR PARA LAS EMOCIONES:

● Hay que entender las emociones que la marca o el cliente
quiere transmitir. Preguntar a tu cliente si le “gusta” un diseño
no es conveniente.
● Cuando muestres un diseño formulá 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”. “Cuál crees que es la
“emoción” más importante para representar a tu público
objetivo?”

10 www.davinci.edu.ar
4. SEGUIR LAS REGLAS DEL DISEÑO VISUAL
Existen 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
romper 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: Crear 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.

5. CONSTRUIR UNA CLARA JERARQUÍA VISUAL:

● Los usuarios web no leen, escanean. Deben ser capaces de ver
la página y entenderla en segundos.
● 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

6. SER CONSISTENTE:
● No confundas a los usuarios. Las inconsistencias distraerán al
usuario y opacarán tu mensaje.
● Los enlaces deben ser consistentes y perceptibles.
● Si usas iconos, imágenes e ilustraciones, asegúrate que sean de
un mismo lenguaje visual o misma estética.
● No utilices 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.

11 www.davinci.edu.ar
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 generales.
● Sin marear al usuario. (Ya veremos la usabilidad del diseño
necesarios para la web)

8. NO ABUSAR DE LOS TRUCOS:

● Hacé un diseño divertido, pero asegurate de que esos
elementos apoyen lo que tratás 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 omiten elementos importantes para el diseño puede
transmitir al usuario confusión y descuido.

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.
● 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.

12 www.davinci.edu.ar
Técnica: Wireframes
El Wireframe es un boceto de la ui que hacemos para resolver el
diseño estructural a nivel vista/pantalla.
Se trata de un esquema simple y neutro, dependiendo el grado de
detalle de los elementos de la ui representados (contenidos,
componentes, etc), podemos diferenciar los wireframes de baja y los
de alta fidelidad. Estos últimos son los que tienen mayor definición y
hasta incluyen contenido final.

El Wireframe sirve para trazar la diagramación a nivel

vista/pantalla de los elementos de la ui

Ejemplo Wireframes de alta y baja

https://uxdesign.cc/why-low-fidelity-wireframe-curious-in-product-
design-c7bea87bc23d

13 www.davinci.edu.ar
Características visuales
de los wireframes
● Son estructuras simples, se usan líneas y cajas
● Se diseñan en escala de grises
● Todos los elementos gráficos (como imágenes e iconos) y los de
sistema (como checkbox o radio buttons), están representados
esquemáticamente
● Suele utilizarse una única familia tipográfica
● De preferencia los contenidos deben ser reales

El wireframe se puede trazar en papel, o desde herramientas

digitales, incluso disponibles online y gratuitas.
Es un ejercicio rápido, el esquema debería permitirnos plasmar una
idea de manera espontánea. Luego se revisa, corrige, se va
“puliendo” y dando mayor definición, hasta lograr una propuesta para
la ui a diseñar.

Ejemplo progreso de izq a der. de boceto en papel a wireframes de

bajo nivel, alto nivel, hasta la representación final de la ui
https://careerfoundry.com/en/blog/ux-design/website-app-
wireframe-examples/

14 www.davinci.edu.ar
Los wireframes son útiles para la creación de cualquier tipo de
interfaz digital como web, apps, intranets, etc.
Nos permite revisar la propuesta acorde al contexto de esa ui.
Por ejemplo, para diseñar una web responsiva, debemos decidir
cómo se va adecuar esa estructura de la vista/pantalla al viewport del
dispositivo que navegue el sitio.
Se suelen tomar de referencia 3 dispositivos estándar (móvil, tablet y
escritorio) que se puedan conectar a la red y se presenta el diseño
para la pantalla de cada uno.

Ejemplo Wireframes web responsive

https://balsamiq.com/learn/articles/wireframing-responsive-design/

15 www.davinci.edu.ar
Buenas prácticas para trazar
Wireframes
● De ser posible usar la mayor cantidad de contenido real
● Siempre trabajar en escala de grises
● No incluir elementos gráficos como imágenes logos e
iconografía
● Planificar y organizar el contenido de tu proyecto antes de
trazar el wireframe
● Agrega notas para explicar zonas e interacciones
● Podés probar varios bocetos e ideas y corregir problemas de
manera rápida si mantenés una estructura simple
● Usalo como elemento de referencia para discutir con los
colaboradores de tu proyecto

Esta técnica de esquematización está relacionada con la disciplina

Arquitectura de la Información que se encarga de jerarquizar,
organizar y rotular contenidos.
Con los wireframes mostramos la jerarquización de los contenidos
distribuída visualmente.

La próxima clase profundizaremos sobre esta

disciplina y el enfoque de diseño para el “Contenido
Primero”. Pero te adelantamos: tener el contenido
bien organizado impacta en la usabilidad.

Estos esquemas de la vista/pantalla pueden usarse para confeccionar

prototipos de bajo nivel, que terminan siendo artefactos enfocados
a identificar problemas en la interacción del diseño de la interfaz
digital.

16 www.davinci.edu.ar
Un prototipo de bajo nivel sirve para revisar rápido y de manera
“económica” el flujo de interacción, esto sería la secuencia de
vistas/pantallas que va a transitar el usuario durante la interacción.
Para esto, hay herramientas digitales que permiten crear wireframes
interactivos o incluso se realizan hasta en papel:
Mirá un ejemplo en el siguiente enlace:

Mobile Application Design: Paper

Prototype Video

Ventajas de los Wireframes

● Sirven como pieza de comunicación, definiendo qué quiere el
cliente y cuáles son sus objetivos
● Las correcciones son objetivas, basadas en contenidos y
funcionalidades evitando discusiones sobre elementos gráficos
● Son económicos, permiten visualizar el diseño de estructura de
la pantalla, interacciones, flujos e identificar problemas.
● Al plantear una estructura simple y enfocada en los contenidos,
permite al diseñador/a tener mayor libertad al momento de
resolver el diseño visual de la interfaz
● Al desarrollador/a front-end le permite entender y
conceptualizar el diseño de la interfaz, como referencia visual
de un mapa de cajas que luego “traduce” al código necesario
para desarrollar el producto digital (el software: la web, app,
intranet, etc)

17 www.davinci.edu.ar
 Hemos llegado así al final de esta
clase en la que vimos:

• Diseño y Funcionalidad.
• Diseño de Interfaces para el Medio Hipertextual.
• Proceso del Diseño: Pasos para un Diseño Web efectivo.
• Técnica: Wireframes. Bocetos de la ui para el diseño estructural
de la vista/pantalla.

Te esperamos en la clase en vivo de esta semana.

No olvides realizar el desafío semanal.
¡Hasta la próxima clase!

18 www.davinci.edu.ar
Bibliografía
Generador online gratuito de wireframes:
https://wireframe.cc/

Artículo recomendado para comprender los inicios de la web

responsive, “Multi-Device Layout Pattrns”:
https://www.lukew.com/ff/entry.asp?1514

19 www.davinci.edu.ar