Procesos de un Proyecto Web (2013)

Matías Raby Coddou @matiasraby
Desarrollo de proyectos web

1. Procesos de un proyecto web
1. Brief
2. Benchmark
3. Casos de uso
4. Wireframe (esquema)
5. Mockups (propuesta gráfica)
6. Prototipo HTML
7. Modelado Base de Datos

8. Desarrollo front-end
9. Desarrollo back-end
10. Generar contenido
11. QA
12. Beta test
13. Lanzamiento
14. Evaluación

1. Brief
Documentos entregado por el cliente al iniciar el
proyecto. Este puede ser guiado y modificado en
conjunto con la agencia.
Puede incluir:
1. Descripción del proyecto.
2. Objetivos (generales/específicos).
3. Público objetivo.
4. Mapa del sitio
5. Metas.
6. Consideraciones técnicas.
7. Competencia.
8. Referentes.
9. Etc.

1. Brief
1. Descripción del proyecto.
Resumen con la presentación del proyecto.

1. Brief
2. Objetivos (generales/específicos).
Los objetivos de tu cliente al desarrollar este
proyecto:
- Vender en línea.
- Vender de forma física.
- Potenciar la marca.
- Conseguir seguidores.
- Etc.

1. Brief
3. Público objetivo.
¿Quién es?
¿Qué quiere?

1. Brief
http://xkcd.com/773/

1. Brief
4. Mapa del sitio
Presentación ordenada y jerárquica de la estructura
de un sitio. Donde se pueden ver todas las páginas
de un sitio y la relación entre estas.

1. Brief
5. Metas  Conversiones
Qué le interesa al cliente que el usuario haga en el
sitio. Qué pasos le interesa que siga.
- Finalice la compra de un producto.
- Lea una serie de pasos en orden.
- Revise un producto y se ponga en contacto con la
empresa.
- Etc.

1. Brief
6. Consideraciones técnicas.
Cuales consideraciones se debe tener a nivel de
lenguaje de programación, servidores o cualquier
otra variable técnica que afecte al proyecto.

1. Brief
7. Competencia.
Sitios de la competencia directa e indirecta. Pueden
ser en el mismo país o en el mundo.

1. Brief
8. Referentes.
Sitios que gustan al cliente. Pueden no tener relación
alguna con la marca, producto o servicio.
Importante definir cuales son los factores que al
cliente le interesa de estos sitios.

2. Benchmark
Comparativa de atributos. Puede ser del mismo
proyecto en comparación con otros, o solamente de
otros.
Puede medir: secciones, contenido, diseño,
codificación, etc. Sólo algunos temas privados no
podrán ser medidos.
Se puede hacer de la competencia directa, indirecta
y de referentes nacionales y/o internacionales.

2. Benchmark

3. Casos de uso
Presentación gráfica de los pasos a realizar para
llevar a cabo un proceso. Desde los más generales
o los más específicos.
Sirven para evaluar y aclarar cada proceso del sitio.
De forma que tanto el cliente como el equipo
desarrollador comprenden estos procesos, y los
pueden considerar al momento de hacer sus
respectivas tareas.

3. Casos de uso
mr. usuario

4. Wireframe
Es un esquema, que funciona como guía visual de
los elementos de nuestro proyecto.
Sirve para definir la interfaz y sistema de
navegación.
Dentro de la interfaz, incluimos: ubicación botones,
navegación, vínculos, imágenes, textos, videos, etc.
Pueden hacerse a mano, vectoriales y con distintos
softwares:
http://www.youtube.com/watch?v=XknC4FbAEC0

5. Mockups
Es una propuesta gráfica, de mediana a alta
calidad.
Puede ser la propuesta final y definitiva del proyecto
o una maqueta avanzada.
Ya incluyen color, tipografías, imágenes, etc.

6. Prototipo
Es una demostración de cómo el proyecto
funcionará. Tomando uno de los procesos y
permitiendo a un usuario simular su funcionamiento
Por lo general está armada en HTML y los procesos
de programación son simulados.

7. Modelado Base de Datos
Se determina la estructura lógica de la base de
datos. Como interactúan las tablas y como se
almacenarán, organizara y manipularán los datos.

8. Desarrollo front-end
Por front-end se entiende la parte del desarrollo que
es visible por el usuario y donde este interactúa.
El diseñador o desarrollador front-end es el
encargado de armar el HTML, CSS y Javascript
(jQuery) de los sitios web.

9. Desarrollo back-end
Por back-end se entiende la parte del desarrollo
encargada del administrador del sitio.
Se divide en tres partes: el servidor, la aplicación y
la base de datos.
Por lo general se trabaja con lenguaje PHP, Ruby o
Python, y se pueden usar frameworks como Ruby
on Rails, Cake PHP y Code Igniter.

Una de las partes cruciales del sitio. Esto incluye
tanto el contenido fijo inicial, como el que se va
cargando en el tiempo.
- Secciones del sitio.
- Carga de productos.
- Noticias.
- Disclaimers.
- Etc.
El contenido debe ser pensado para la lectura en
web.

11. QA
Quality Assurance. Pruebas realizadas al proyecto
una vez terminado y antes de ser lanzado.
En esta se revisa que el sitio cumpla con todos los
requerimientos y no contenga errores. Tanto en
diseño como en programación.

12. Beta test
Prueba del sitio con un grupo limitado de usuarios.
A estos se les suelen pedir metas especiales y se
evalúa si las pueden realizar según al lógica
pensada para el sitio.
También se les puede pedir que revisen el sitio a su
libre albedrío y den sus comentarios generales
sobre el funcionamiento de este.

13. Lanzamiento
Lanzamiento de forma pública en los servidores
finales. Para esto el sitio se debe considerar
terminado y probado.
En una primera etapa es importante monitorear el
funcionamiento de este, ya que por primera vez
será puesto a prueba de forma masiva.

14. Evaluaciones posteriores
Evaluar el funcionamiento del sitio. Llevar el pulso
de cómo va funcionando. Evaluar mejoras.
• Análisis de tráfico: Visitas, páginas más
vistas, fuentes de tráfico, conversiones.
• Mapas de Calor
• Tests a usuarios
• Eye tracking
• Feedback

Analytics
Imagen eliminada

Mapa de calor.
Imagen eliminada

Procesos de un Proyecto Web (2013)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Procesos de un Proyecto Web (2013)

Similar a Procesos de un Proyecto Web (2013) (20)

Último

Último (20)

Procesos de un Proyecto Web (2013)