WEB DESIGN METHOD

ANDRÉS DAVID BETANCOURT SANTANA

KEVIN IVAN ULLOA NEPAS

PRESENTADO A:
RICARDO ANDRÉS ALMEIDA D.

CONSTRUCCIÓN DE SOFTWARE

UNIVERSIDAD SANTIAGO DE CALI

INGENIERIA DE SISTEMAS – TECNOLOGÍA EN SISTEMAS
SANTIAGO DE CALI
23/09/2019
 CONTENIDO
1. INTRODUCCIÓN
2. OBJETIVO METODOLOGÍA
3. ETAPAS DE LA METODOLOGÍA
4. CARACTERISTICAS
5. VENTAJAS
6. DESVENTAJAS
7. PARTICIPANTES
8. HERRAMIENTAS
9. CONCLUSIONES
 1. INTRODUCCIÓN

¿Qué es el Web Design Method?

Es una metodología que no solo le provee al desarrollador las

herramientas necesarias que le permiten y facilitan la construcción del
contenido web, también le provee una forma sistemática de desarrollar
el producto web.

Este método representa al mismo tiempo una gran oportunidad para

educar al cliente con respecto a lo que el desarrollo de una web
conlleva y también una gran oportunidad para demostrar nuestra
experiencia, credibilidad y autoridad a la hora de proveer una
aplicación web de gran calidad.

Al mismo tiempo esta metodología maneja un excepcional equipo de

trabajo para la construcción del producto web.
 2. OBJETIVO METODOLOGÍA

El objetivo de esta metodología es que el cliente este más involucrado en el

desarrollo del producto web, también tiene como objetivo manejar cierta
estructura en la creación del mismo producto web y recurrir a las buenas
prácticas y por último tener de lado a un equipo de trabajo especializado en
cada etapa que requiere el desarrollo del producto web.
 3. ETAPAS DE LA METODOLOGÍA

ETAPA INICIAL

 DEFINICIÓN DEL PROYECTO

En la primera etapa de esta metodología se debe pensar en el
propósito, antecedentes, el tema, la misión, visión y los usuarios
específicos del sitio web.
- ANTECEDENTES
Descripción general del proyecto, antecedentes de la organización, el
entorno en el que existe la organización, etc.
- MISIÓN
La declaración de una misión establecerá los límites del proceso de
diseño. En el resto del método permitirá decidir que información o
funcionalidad incluir o no, como estructurar la información y
presentarla.
La misión es útil para la validación ¿A qué se refiere?
Verificar si nuestro producto web ha logrado su propósito.
La misión se declara en el lenguaje natural.
- TEMA Y USUARIOS
En este paso se intenta identificar tanto a que perfiles de usuarios va
dirigida nuestra aplicación como cual será el tema de esta en el caso
de que no haya antecedentes.
De aquí nacen preguntas del tipo.
¿Quién es el público objetivo? ¿Quién lo visita?
¿Cuáles son los objetivos de su sitio web? ¿Quiénes son sus
competidores?
¿Cuál es el campo del negocio? ¿Qué diferencia a la empresa u
organización de las demás?
Todo se resumen en las palabras cliente, proyecto, audiencia, marca,
características y con todo esto se puede efectuar una clasificación de
que personas utilizaran nuestro producto web
 ALCANCE DEL PROYECTO
Definir el alcance del proyecto es un paso crítico.
Al crear un plan de alcance del proyecto bien definido que describa
actividades y entregas específicas, junto con plazos específicos, se
podrá establecer de una manera más clara las expectativas de
nuestros clientes.
 WIREFRAMES Y ARQUITECTURA DEL SITIO
La arquitectura del sitio incluye el mapa del sitio, funcionalidad,
usabilidad, navegación y la estructura de las páginas.
La creación del mapa del sitio nos garantiza que se hayan tenido en
cuenta todas las páginas clave del sitio, mostrando su relación entre
sí y definiendo como debe estructurarse la navegación general de los
datos.
El uso de Wireframes, Prototipos o Mock-ups proporciona una vista
detallada del contenido que aparecerá en cada página. Aunque no se
muestre ningún elemento del diseño, los wireframes proporcionan
una guía para definir la jerarquía de contenido en la
página/aplicación.
 CREACIÓN DE CONTENIDO
Cuando ya tenemos una mejor imagen de lo que queremos proyectar
en nuestro proyecto web debemos empezar a crear contenido para
las páginas. Es vital tener contenido para trabajar en la próxima
etapa.
 ETAPA DE DESARROLLO
 DISEÑO VISUAL
Ahora debemos ocuparnos de todo el aspecto visual, ahora estamos
en la etapa de diseño y desarrollo.
En este paso se crea el estilo visual, que estará probablemente
determinado por la marca visual de la organización.
El objetivo es conectar la web con todas las formas de comunicación
de la organización. La marca de la organización desempeña un papel
importante en esta parte del proceso, ya que la idea será transmitir
visualmente ideas perceptivas clave de la marca dentro del diseño.
En este paso podemos utilizar herramientas como moodboards,
collages de elementos que nos pueden ayudar en el proceso.
DESARROLLO
Ya con los diseños realizados podemos proceder a desarrollar por fin
nuestro proyecto web, desarrollar contenido nuevo y refinar
contenido antiguo, crear videos, presentaciones con diapositivas,
podcast y otros medios que aparecerán en el sitio y comenzar a
construir el sitio con HTML y CSS.
También aparte de lo anterior que se conoce como Front-End
debemos pensar en el desarrollo lógico de la página que recibe el
nombre de Back-End.
Esta etapa puede ser la más larga así que siempre hay que estar en
constante contacto con los clientes y mantenerlos informados con
respecto a el estado del proyecto.
 ETAPA FINAL
 PRUEBAS
Antes de lanzar el sitio, se colocará en un servidor de producción
donde solo el público interno y cualquier persona con la que se
comparta el enlace podrán verlo.
La prueba del proyecto es crítica, ya que inevitablemente habrá
problemas que deben abordarse antes de que el sitio entre en
funcionamiento.
Los errores más comunes que ocurren en esta etapa son:
- Errores Ortográficos
- Elementos de diseño roto
- Enlaces rotos
Se deberá revisar el proyecto en distintos navegadores y dispositivos.
 LANZAMIENTO
Finalmente es tiempo de lanzar el producto web.
Los interesados en el proyecto lo han revisado y aprobado, y está
listo para su lanzamiento.
Pero esto simplemente acaba de comenzar.
La web es un medio fluido que cambia diariamente, el cambio es
inevitable y hay que estar atentos a esto.
 MANTENIMIENTO
Un proyecto web requiere mantenimiento constante.
Actualizar el contenido, realizar cambios en el backend, corregir
enlaces rotos, son tareas cotidianas.
Todas estas fases son críticas para el proceso de diseño web y es
muy importante al largo plazo para la salud y éxito del sitio web.
Es un gran momento para educar a potenciales clientes sobre las
responsabilidades a largo plazo sobre poseer un sitio web.
 4. CARACTERISTICAS
Las características de esta metodología son:
- La inclusión del cliente en el proceso del desarrollo de una
página web.
- La construcción de un producto web de siguiendo una
manera sistemática y estructurada.
- Utilizar las mejores prácticas a la hora de desarrollar el
producto web tales como el SEO, Responsive Design, entre
otras.
- Se cuenta con un equipo de trabajo que esta especializado
en cada una de las etapas y tareas que presenta el desarrollo
de un producto web.
Aunque pensándolo un poco mejor las propias características son las
ventajas y desventajas
5. VENTAJAS
- Ya mencionamos anteriormente sobre la inclusión del cliente
en el proceso de desarrollo y es algo muy importante ya que
mejora de manera exponencial la comunicación que hay
entre el cliente y el desarrollador para así lograr un mayor
éxito en el proyecto planteado.
- Al construir un producto web siguiendo una serie de pasos
mejora la calidad de este ya que se toma en cuenta todo
posible aspecto relevante para la producción y desarrollo del
mismo.
- Se Utilizan las mejores prácticas en el proceso para optimizar
el posicionamiento del producto a lo largo de los motores de
búsqueda.
- Se tiene un equipo de trabajo especializado en cada área del
desarrollo del proyecto.
6. DESVENTAJAS
- Hay muy pocas desventajas y casi todas tienen que ver con
que no el producto web no alcance el éxito esperado.
- Eso se puede deber a una mala implementación de la
metodología o no cerciorarse de contar con el equipo de
trabajo para la utilización de esta metodología.
- También si no se cuenta con el apoyo del cliente de manera
constante es muy probable a que se retrase o fracase del
todo aunque es muy poco probable.
 7. PARTICIPANTES

 Cliente: Es la persona que especifica los requisitos del producto web, y

básicamente a quien el proyecto gira en torno.
 Project Manager: Es la figura que ejerce como coordinadora en todo este
proceso y que, por tanto, se responsabiliza de que el proyecto web se
resuelva satisfactoriamente.
 Diseñador gráfico: Es el arquitecto de la web. Se encarga de definir la
imagen de la página web, y es capaz de transmitir mensajes visuales
optimizados para cada cliente.

 Programador web: Crea la estructura de la web, y consigue que todo

funcione. Es el encargado de toda la parte técnica, programando todas las
acciones, como los registros, las opciones de búsqueda, los filtros o la
creación de bases de datos.

 Desarrollador de apps: Este perfil consigue llevar tu marca a cualquier

sitio. Con el desarrollo de aplicaciones móviles conseguirás que tu producto
esté al alcance de todo el mundo, a cualquier hora y en cualquier
dispositivo.

 Social Media Manager: Es el que busca desarrollar y transmitir una

correcta estrategia empresarial.

 Community Manager: Es el responsable de las redes sociales y de los

ecosistemas digitales.

 Consultor de Estrategia Digital: Se encargan de definir la estrategia

adecuada para cada acción que desarrollemos en nuestra empresa; desde
la creación del concepto hasta la implementación del mismo.

 Copywriter o creador de contenido: Es el profesional encargado de

redactar los textos que aparecerán en la web.
 8. HERRAMIENTAS

 Audiencia
 Resumen creativo
 El análisis de la competencia en marketing y gestión estratégica
 Lápiz/Papel
 Wireframes y Prototipos experiencia usuario (Adobe Xd, Balsamiq, Mock-
Ups)
 Herramientas de Diseño (Sketch, Photoshop, Corel Draw)
 Herramientas para crear el Mapa del Sitio (WriteMaps, Mindnode)
 Moodboards y collages de elementos
 HTML
 CSS
 Frameworks (Bootstrap, Laravel, Spring, Django, Ruby on Rails)
 Librerías (React, JQuery, Redux)
 9. CONCLUSIONES

Podemos concluir que gracias a esta metodología es más viable

la creación de un producto web porque está estructurada de tal
forma que esta asegure que el producto sea un éxito.
 BIBLIOGRAFÍA
Brusilovsky, P., 1996, Methods and techniques of adaptive
hipermedia.

Olga Trover, 2008, Web Engineering: Modelling and Implementing

Web Applications

Sven Casteleyn, 2011, Web Semantics Design Method.

Peter Plessers, 2007, A new method of Web Design

Casteleyn, S., 2005, sitios web de autoorganización específicos
del diseñador, tesis doctorales, Vrije Universiteit, Bruselas.