Proceso de desarrollo web en diez pasos de webminutos
Bienvenida a nuestro proceso de diseño web.
El propósito de esta publicacion es dar a conocer nuestro proceso de desarrollo de una pagina basica e que educa. Hemos construido cientos de paginas web a lo largo de los años, hemos aprendido mucho en el proceso y nos gustaría dar a conocer algo de esta información con ustedes. Debido a que somos desarrolladores, este artículo ha sido escrita principalmente desde la perspectiva del desarrollador. Sin embargo, toda persona debería ser capaz de seguirlo y con toda seguridad podría aprender de diseño, ¡si no mucho más!
Los desarrolladores es necesario aplicar las instrucciones cuando elaboran una pagina.
Recuerdas la historia de la biblia de la torre de babel? Esto es lo que sucede cuando el tamaño, el alcance y las expectativas no se definen o se siguen. Tenemos un dicho en el nicho de la informática: "Por cada hora de planificación adecuada, se ahorrarán seis horas de tiempo de desarrollo". Esto es muy cierto y es un factor de gran importancia en la rentabilidad (o no) de una web de desarrollo.
Ahora que hemos dejado de lado las cosas filosóficas, ahora viene lo divertido
Paso 1: Reunir los requisitos
En muchos casos, sobre todo para los que tienen poca años comercial, éste es el paso más de mayor importancia del proceso. El entendimiento de lo que se pretende, el alcance y los recursos que se necesitan puede alinear adecuadamente tanto al cliente como al desarrollador para el éxito de mañana. Esto es necesario porque cualquier tipo de transacción comercial se puede hacer sólo en una situación de "ganar-ganar" para todos.
Paso 2: Propuesta
Cuando necesites formalizar algo, escríbelo. Puedes llamarlo presupuesto; la idea es realizar un documento que tanto el desarrollador como el cliente entiendan lo que se está dando, junto con las expectativas, el tiempo y el costo. Una propuesta también ayuda a controlar hasta donde llega el proyecto o a poner un limite alrededor de lo que se está solicitando para que haya pocas o ninguna idea equivocada sobre el trabajo que se está haciendo.
La propuesta debe tener, como mínimo, estas secciones: Bienvenida, expectativas, resumen de navegación y funciones, tiempo de desarrollo con fechas y costos. Un ejemplo de la propuesta. Además, la propuesta debe ser una plantilla predefinida que se rellena con los requisitos del usuario.
Paso 3: Navegación
Hay muchos nombres para incluir en esto, pero no se limitan a: Mapa del sitio, arquitectura del sitio, arbol de navegacion, enlaces, organigrama del sitio, etc... a menudo, aqui es tiempo de organizar las secciones principales de la pagina y las subpáginas asociadas y también describir técnicamente cómo aparecerán. Por ejemplo, hay menús desplegables, fly outs, hover overs, mega menús, web en merida navegación superior, navegación lateral... Este es el momento de explicar "cómo" se llevará acabo.
Paso 4: Wireframes
Los wireframes son planos en blanco y negro no a escala para mostrar cada página del sitio web.
No puedo exagerar lo importante que son los wireframes para la creación de un gran sitio web. Nadie construye una casa sin planos, pero muchos desarrolladores aficionados omiten este paso tan importante y pasan a la fase de diseño de la maqueta. Lo hacen porque creen que los wireframos son una pérdida de tiempo. En realidad son un gran ahorro de tiempo.
Los wireframes coinciden con las expectativas de los clientes y los programadores de lo que se está construyendo. Además, cuando el usuario toma parte en el proceso de construccion de los planos, se da cuenta de la experiencia del diseñador y la atención a los detalles del proyecto. Enfocate que los wireframes sean buenos Qué crees? Más adelante en el proyecto, el usuario suele a tener ya una visión excelente de su web ya que ha estado involucrado desde el principio.
Paso 5: Recolección de contenido
Típicamente, esto suele representar algún lugar cercano al punto medio de una pagina. Más importante aún, esto es típicamente donde más del sesenta porciento de los proyectos se paralizan. ¿Por qué? La recolección de contenido es una laboral que depende mucho del cliente, ya que es necesario reunir copias, videos, reviews, imagenes, biografías y otros tipos de contenido. Una de las formas de evitar este problema es explicar este escenario al cliente por adelantado (sin asustarlo) y asegurarse de que se comprenda y entienda la importancia de obtener toda información.
Esta es la segunda parte del proceso de diseño web que hemos estado enseñando.
Paso 6. Cronología
En este etapa de la pagina web, la mayor parte de lo más dificil ya se ha hecho. También es la primera vez que el desarrollador tiene realmente algún nivel de control sobre el tiempo que falta que queda en la pagina web. Y aquí es donde se construye la línea de tiempo de la pagina web. Recomiendo crear esto con tus compañeros primero y despues enviarlo a tu cliente. Ya que los clientes ya han estado involucrados demasiado en el proyecto, ahora es un excelente para hacerles conocer que las cosas están a punto de apurarse y el resto de su pagina debería ser un esfuerzo cuesta abajo. Esto es excelente para que el cliente lo escuche, especialmente después de haber pasado muchas horas revisando la copia y recogiendo fotos y testimonios de sus clientes.
Paso 7. Diseño de la maqueta
Cuestionario de diseño de la maqueta.
En este paso deberías estar muy familiarizado con el desarrollo del sitio y lo que se desea transmitir. Crea un documento por lo minimo de una cuartilla haciendo preguntas que tengan que ver con el diseño como, por ejemplo: ¿Cuáles son los colores de su empresa? A continuacion, explica 2-3 paginas web que admiras y detalla con detenimiento qué especificaciones relacionadas con la forma que te agradan. ¿Tiene algún recurso de marketing reciente para que lo veamos? principalmente, el cuestionario tiene que ser pequeñas y al grano. Estudie la retroalimentación que el cliente brinda y usted debería estar en camino de desarrollar un buen diseño.
Concepto de maqueta. Con un sitio informativo, sólo tienes que crear un sitio web de Inicio, Interior (una oferta de servicio principal) y Contacto. Es extremadamente importante utilizar también el contenido que ya has recopilado porque influirá en la "simpatía" a los ojos del cliente. Después de todo, ya has hecho todo este trabajo hasta ahora, usa tu contenido en tu beneficio. Por otro lado, usar texto latino (lorem ipsum) como contenido de relleno normalmente obtendrá una respuesta opuesta.
Paso 8. Desarrollo
A medida que avanzamos en el desarrollo de diseño de la web, este paso aparentemente difícil puede ser uno de los más rapidos. Después de todo, el desarrollo es más una forma de ensamblaje que otra cosa. Y típicamente la pagina web puede comenzar a acelerarse rápidamente hacia el objetivo final del lanzamiento del pagina web. La forma más acelerada de lograr esto es asignar múltiples diseñadores al proyecto. Estos técnicos pueden trabajar en diferentes áreas del proyecto simultáneamente.
Paso 9. Prototipo
Una vez que se haya terminado el paso de desarrollo (con pruebas internas), debe enviar al cliente un link del prototipo para que pueda iniciar a probar y revisar el sitio web desde su lado. En el mismo email, es extremadamente necesario tener una lista de instrucciones para que ellos puedan, tales como, pero no limitadas a: "Durante este tiempo el cliente necesita probar vigorosamente su sitio web para cualquier enlace roto, imágenes que no funcionan, errores de texto, páginas que no funcionan, etc." Básicamente, que sólo busquen errores páginas, web y cosas que se puedan reparar o no funcionen adecuadamente.
Consejo importante: En un segundo párrafo de apoyo, es necsario indicar claramente: "Durante este tiempo, el cliente NO estará agregando nuevas páginas, imágenes, cambiando el escrito, modificando la programación, etc... esto constituye un TRABAJO NUEVO y será citado como un nuevo proyecto después de que el sitio web entre en funcionamiento. Hay que tener cuidado con este escenario ya que sucede todo el tiempo. Por alguna razón(es), a los clientes les gusta tratar de intercambiar copias, imágenes, añadir páginas... ¡sólo tened cuidado! La mejor forma de mitigar el problema es educar al cliente de antemano sobre lo que está dentro y fuera del alcance.
También, recomendar al usuario que sólo una persona pruebe su sitio, y no un grupo de personas. ¿Por qué? Diferentes personas ven las cosas de manera diferente... y no quieres demasiados chefs en la cocina... ya sabes cómo resulta eso y siempre es malo. En el caso de que el cliente no se sienta bien con su capacidad personal para hacer pruebas, siempre puedes mostrarle tu documento interno de pruebas y normalmente eso obtendrá la aprobación que necesitas para seguir adelante.
Paso 10. Lanzamiento
Después de que el cliente apruebe el prototipo, debe comenzar la secuencia de lanzamiento. Algunos lo llaman salir al aire, etc., estos términos son esencialmente la misma cosa. Debido a que este paso es de naturaleza técnica, a continuación se presentan algunas cosas principales que hay que hacer.