Diseño Programación Web

Escuela de Comunicaciones
Briefing del Proyecto de Diseño Web
Conoce los fundamentos del diseño web y el lenguaje HTML

Indicador de Logro Contenidos

• Conoce los fundamentos del diseño  Entendiendo los aspectos estéticos
web y el lenguaje HTML, teniendo en del diseño web
cuenta las tendencias y necesidades - Composición.
actuales
- Tipografía.
- Color.
 Pautas para la elaboración del
briefing del proyecto de diseño web.
Aspectos estéticos del diseño web

• Cuando un objeto o figura de un color dado se encuentra en contacto con otro objeto de color
diferente, se produce lo que llamamos combinación de colores.

• En el diseño web, el contraste entre los diferentes colores empleados para decorar y los
colores propios de las imágenes, resulta determinante a la hora de definir la estética de la
página.
 Aspectos estéticos del diseño web

• Las propiedades de los colores

(luminosidad, valor, temperatura y saturación), hace
que haya muchas variedades de colores y, por ende,
muchas posibilidades de combinaciones y contrastes.
• El contraste por luminosidad es uno de los más
empleados en el diseño de páginas web,
fundamentalmente en el destaque de los textos sobre el
fondo sobre el que se colocan. En la siguiente figura,
podremos apreciar combinación de colores cuya
diferencia radica en la luminosidad.
Tipos de forma y su utilización en el diseño web

• Las formas pueden dividirse en tres tipos básicos:

las formas geométricas, las formas naturales y
las formas abstractas.
• Las formas geométricas es en lo primero que pensamos
cuando se habla de formas.
• El empleo de la forma geométrica en todo tipo de diseño
es muy frecuente, dado que generalmente se trata de
objetos simétricos y regulares, lo que brinda a quien lo
contempla, sensación de seguridad y orden.
• Las formas geométricas más usuales en el diseño web son
el cuadrado, el rectángulo, el triángulo y el círculo.
 Tipos de forma y su utilización en el diseño web

• Las formas naturales también tienen un empleo

frecuente, ya que permite una rápida asociación con
un mensaje. La mayoría de las formas naturales
empleadas en el diseño web son extraídas de
imágenes. La siguiente página web nos muestra un
ejemplo de ello:
Tipos de forma y su utilización en el diseño web

• Las formas abstractas constituyen el terreno

menos explorado, aunque en los últimos años se
ha producido un incremento en su empleo,
gracias a la aparición de nuevas tendencias en el
diseño, asociadas a tendencias artísticas como el
arte abstracto o el pop art.
 Brief del proyecto de diseño web

• Cuando nos planteamos abordar un nuevo proyecto

web o una reestructuración completa de nuestro sitio
web es importante elaborar un brief donde se recojan
todas las ideas e información necesaria para su
desarrollo, organización y estructura.

• Con un brief se dispone de una toma de anotaciones

básicas de lo que la web necesita y requiere, y que
sirve de guía a la agencia para poder cumplir con las
distintas fases del diseño web.
Brief del proyecto de diseño web

• Un briefing es la redacción de un documento donde se

plasma por escrito un resumen sobre un proyecto web
donde se incluye toda la información necesaria para que
pueda ser abordado según unos parámetros o referencias.
Comunicar las ideas sobre un proyecto web no es tan
sencillo como pueda parecer a simple vista, por lo que
recurrir a la elaboración de un brief que sirva de guía se
hace sumamente necesario.
Brief del proyecto de diseño web

• Información de la empresa
El briefing debe comenzarse con una introducción donde se
presenta a la persona o empresa que va a respaldar el
proyecto web. Es importante incluir los datos de contacto
del responsable del proyecto con quién se pueda consultar
cualquier duda o tema relacionado con el desarrollo web
(número de teléfono y correo electrónico).
Brief del proyecto de diseño web

• Presentación general del proyecto

El siguiente apartado será aportar un resumen general sobre el
proyecto, en qué consiste y qué idea se persigue con su
desarrollo. Se trata de presentar un panorama global (the big
picture) del proyecto web con el objetivo de que el lector del
briefing pueda disponer de una idea general antes de
profundizar en detalles y pormenores.
Brief del proyecto de diseño web

• Definir el público objetivo

Para poder desarrollar una página web, hoy en día es
necesario poner el foco en los usuarios y así poder ofrecer una
experiencia satisfactoria en su interacción y uso del sitio web.
Brief del proyecto de diseño web

• Qué se ofrece y cuál es el objetivo

Hay que dejar bien claro qué es lo que ofrece la web a los visitantes,
que los usuarios no duden, una vez aterrizados en cualquiera de las
páginas, de qué producto o servicio se trata y si tiene mucho o poco
que ver con lo que el propio usuario estaba buscando. En esta fase hay
que aportar el elemento diferenciador del sitio web respecto a la
competencia para que pueda quedar plasmado durante las fases de
diseño y desarrollo del proyecto.
Brief del proyecto de diseño web

• Benchmark o sitios webs de referencia

Es muy importante incluir referencias a otros proyectos web
de la competencia o de sitios con diseño o funcionalidades
que gustan y quieren implementarse en el proyecto. De
esta forma se facilita mucho el proceso de desarrollo y se
consiguen resultados más cercanos a lo que se desea.
Brief del proyecto de diseño web

• Estructura y funcionalidades del sitio web

En este apartado hay que incluir información sobre la estructura y
funcionalidades que se quieren incluir en el sitio web. Se pueden
aportar elementos que se quieran incluir, aunque se desconozca la
dificultad o posibilidad de implementarlos.

Ejemplos de funcionalidades:
• El usuario podrá comprar productos desde la tienda virtual y pagar
con tarjeta de crédito y Paypal.
• El usuario podrá registrarse y agregar a envira mensajes a otros
contactos.
• El usuario podrá crear un perfil social dentro de la página web.
• El usuario podrá ver el estado actual de sus pedidos online.
Brief del proyecto de diseño web

• Imagen corporativa
En este apartado se incluye toda la información sobre la imagen
corporativa y su aplicación en el desarrollo de la web. Se deben incluir
colores, tipografías, logotipo y cualquier otro elemento audiovisual para
utilizar o servir de referencia en el diseño de la web.
Brief del proyecto de diseño web

• Presupuesto y calendario
Un aspecto muy importante del brief es la inclusión del presupuesto que
se dispone para afrontar el proyecto. Con esta cifra se puede evaluar si
todos los elementos y condiciones expuestos para el proyecto se pueden
afrontar con ese importe, o si es necesario elevar el presupuesto o reducir
los elementos a incluir en el proyecto.
Actividad

• Formar grupos de trabajo para el proyecto final del curso de hasta 4 integrantes.
• Seleccionar un negocio que necesite el diseño de su página web, puede ser un negocio en
crecimiento o un emprendimiento.
• Analizar el sitio web actual (si lo tiene) y propón mejoras en el aspecto visual y funcional que
mejore la experiencia de usuario.
• Explicación de la Evaluación Continua I
Actividad

EC I
Seleccionar un negocio o emprendimiento que requiera un rediseño web, posteriormente, elaborar el brief del proyecto web a desarrollar, teniendo en
cuenta los siguientes elementos claves:
 Información de la empresa
 Público objetivo
 Status actual del sitio web
 Objetivos del sitio web
 Benchmark o sitios de la competencia
 Estructura y funcionalidades del sitio web
 Imagen corporativa
 Wireframes
¡Gracias!