Noticias

10 pasos para completar el diseño y el desarrollo de un proyecto web

      
  1. Recaba toda la información.  De aquí parte todo, y por eso este es uno de los pasos más importantes de nuestro proyecto. La tarea principal es identificar qué queremos hacer o qué se espera de nosotros; conocer los objetivos del proyecto y el público al que va dirigido. Tenemos que comprender sus aspectos clave,  tener claro a qué dispositivos va dirigido y sus funcionalidades… Porque no es lo mismo una web que quiere informar que otra que busca entretener; ni diseñar para adolescentes que para millenials. Por eso tenemos que describir y detallar todos los musts, y desechar lo que no formará parte del proyecto para evitar desgastes innecesarios.
  2. Prepara un diseño web estratégico. ¿Qué queremos? Pues que el proyecto sea atractivo y tenga mucho tráfico… pero también que sea funcional y responda a las necesidades de su público potencial. ¿Y eso cómo se consigue? Solo hay una forma: conseguir que los visitantes se mantengan dentro del sitio. El objetivo de todo programador es maximizar la interacción del usuario con el contenido de la web, le encuentre una utilidad clara y, si es el caso, llegue a la conversión. Y la mejor forma de hacerlo es a través de la empatía, tal y como establece el método Design Thinking. Si queremos procurar una buena Experiencia de Usuario, tenemos que comprender las necesidades que éste tiene y ponernos en su lugar para encontrar las soluciones que busca. Por cierto, en el bootcamp de UX/UI Design de Ironhack encontrarás todo el contenido didáctico que necesitas para conseguirlo.
  3. Determina el planteamiento técnico adecuado. Llega el momento de remangarse y empezar a tomar las decisiones críticas, las que harán que el proyecto funcione. Tenemos que decidir si queremos una arquitectura web horizontal para que el usuario llegue a su destino en un par de clics, o más vertical; debemos elegir el lenguaje de programación más adecuado y escoger entre PHP, JavaScript, Python…, y establecer una división en módulos lo más funcional posible para facilitar la organización y la comprensión del proyecto… Todas estas decisiones te permitirán ahorrar tiempo y redundarán en la eficiencia de tu trabajo. Como dijo Ortega y Gasset, “la técnica es el esfuerzo que hacemos para ahorrar esfuerzo”.
  4. Define el mapa de tu sitio web. El Sitemap es una de las claves del desarrollo si queremos los motores de búsqueda encuentren nuestros contenidos. La definición del Sitemap es especialmente importante cuando hablamos de webs grandes, en las que existe más riesgo de que los rastreadores se pierdan por el camino, pero también nos ayudará a hacer una criba, seleccionar lo que es realmente importante en nuestro proyecto, y definir lo que aporta valor. Ha llegado la hora de la Definición del proyecto. A partir de ahora todo será más tangible: vamos a empezar a ver la criatura.
  5. Borrador de las páginas. Por fin empiezan a asomar las primeras maquetas y los esbozos del que será tu proyecto definitivo. Esta etapa, que algunos llaman de prototipado, es un anticipo del diseño definitivo. Se trata de nuestro particular storyboard-web, los wireframes, que son vitales porque nos ayudan a trabajar con más organización y precisión, y nos evitan tener que imaginar continuamente el producto. Y con los mockups ya podemos empezar a enseñar al cliente lo más parecido al resultado final.
  6. Redactar contenido. Es la hora de cuidar al rey, es hora de trabajar el contenido. Podemos crear la web más genial, funcional y atractiva, que si no la cargamos con contenidos de calidad jamás tendrá éxito (con permiso de las imágenes, las animaciones, los vídeos…). El contenido es una de las claves del branding, y por eso hay que conseguir que redactor y diseñador mantengan una excelente relación durante las fases de diseño y mantenimiento de la web.
  7. Desarrollo: Fase de código. Toca escribir código, lo que los más puristas de la programación equiparan con el arte. Se trata de crear a partir de una pantalla en negro, y de hacerlo con criterio. Se acabaron las abreviaturas y las expresiones que solo nosotros conocemos: tenemos que intentar usar nombres que describan la funcionalidad de nuestro código y que no escatimen palabras ni caracteres para desarrollar un producto funcional.
  8. Integraciones entre herramientas (front y back). Hoy en día los desarrolladores front-end y back-end trabajan sobre los mismos problemas, y muchas veces estos problemas se resuelven con herramientas similares. Por eso es importante trabajar con una mentalidad Full-Stack, desenvolverse en todo el territorio end-to-end, y programar tanto en el lado servidor como cliente. Y en este trabajo hay que ser capaz de dominar e integrar herramientas front como HTML, CSS y JavaScript, y back como MongoDb, Ruby, Python, SQL y PHP.
  9. Testing. Llega la hora de la verdad, el test: hay que comprobar que las horas de programación, las discusiones con el copy, la arquitectura web… sirven al propósito que hemos pensado. Y para eso hay que repasarlo todo: no puede aparecer el mensaje Error HTTP 404 Not Found porque eso nos arruinaría el proyecto y dejaría la UX en el fondo de una sima. 
  10. Lanzamiento. Por fin: es el momento de entregar el producto, pero también de cubrir algunos detalles como las necesidades de formación del cliente (que tiene que aprender a utilizar el software que hemos desarrollado para él) y la inserción de las herramientas de analítica web que necesite. Una website es más un servicio que un producto y no basta con completar la entrega. Tenemos que asegurarnos de que todo funciona bien y que se pueden implementar cambios cuando sea necesario. Para eso necesitamos un feedback que detecte posibles problemas y podamos resolverlos asap. Y ya puestos, un CMS nos ayudará a mantener actualizada y al día nuestro website, a prevenir posibles bugs y a reducir los riesgos de seguridad.

Ahora solo queda ver la criatura en funcionamiento y disfrutarla. ¿Te ha seducido este sencillo guion de diseño y programación?  Pues acuérdate de aplicarlo cuando adquieras las competencias de un curtido programador en los Bootcamps de Ironhack.

Tags:

Aviso de cookies: Usamos cookies propias y de terceros para mejorar nuestros servicios, para análisis estadístico y para mostrarle publicidad. Si continúa navegando consideramos que acepta su uso en los términos establecidos en la Política de cookies.