Diseño y Desarrollo Web con Drupal

En DrupalSoul trabajamos hace más de 10 años con Drupal, brindando servicios de Diseño y Desarrollo Web a empresas, organizaciones, agencias y consultores.

Como ya vimos en otros posteos Drupal es un CMS muy flexible y potente que permite construir sitios web desde cero, permitiendo la fácil administración de contenidos, incorporación de nuevas funcionalidades y la escalabilidad sostenida en el tiempo. Es decir que si el proyecto lo requiere, se puede construir con Drupal sitios web grandes, robustos y seguros.

¿Cuáles son las etapas involucradas en el diseño y desarrollo de un sitio web desde cero?

Dependiendo del proyecto podemos pensar en cinco o seis etapas:

  1. Definición de los objetivos del sitio web y por ende de la funcionalidad
  2. Arquitectura de la información (tipos de contenido, campos, menús, bloques, vistas)
  3. Wireframes (presentación visual básica para mostrar el layout de las páginas principales del sitio)
  4. Diseño de mockups (presentación gráfica avanzada y entregables en formato PDF o JPG)
  5. Implementación en Drupal - Diseño y Desarrollo 
  6. Testing - Ajustes

Vamos a pasar ahora a ampliar un poco más cada etapa:


Etapa 1: Definición de los objetivos del sitio web

Junto al cliente se definen y se repasan los objetivos. No es lo mismo un sitio web institucional con solamente información de la empresa, que un sitio web e-commerce con venta de productos o un sitio para inscripción en cursos. Ni hablar si se trata de un medio digital estilo diario, revista o blog. Hay que tener en cuenta la finalidad del sitio, el público y los objetivos  generales para tener un horizonte del tipo de desarrollo a realizar y cuál es la mejor manera de encararlo.

Etapa 2: Arquitectura de la información

Consiste en el armado de un documento donde se lista los items del menú principal, los tipos de contenido que va a tener el sitio, cuáles van a ser los campos de esos tipos de contenido (imágenes, archivos, videos, etc). El objetivo de esta etapa es contar con un “mapa” de la información del sitio y contar con una buena base para pasar a la siguiente etapa.

Etapa 3: Wireframes

Consiste en el armado del layout de las pantallas principales. Donde va el logo, el menú, los bloques de información, etc. En esta instancia no se analiza apariencia visual ni estética. Pero si estructura. Ya que se arma la disposición de los elementos en la home y en las páginas que sean más importantes del sitio. Como el resultado de los wireframes, se tendrá una buena base para pasar al diseño. Sabremos si el sitio tiene una columna, dos columnas, tres columnas, etc. Como estarán dispuestos los bloques, etc.

Etapa 4: Mockups

La etapa de mockups consiste en definir el diseño gráfico del sitio web. Utilizando los wireframes como referencia, se procede a diseñar los elementos visuales del sitio.

La cantidad de pantallas a diseñar dependerá de cada proyecto.

Según el trabajo, el diseño del sitio puede ser a medida (donde se desarrollan los mockups con el diseño que va solicitando el cliente y cada página quizás está más customizada), o bien puede ser a partir de un template existente (ya sea en Drupal.org o un Template premium). La ventaja de la segunda opción es ahorrar tiempos y costos de desarrollo. Y en el caso de comprar un template, la etapa de mockups se saltaría.

El resultado de esta fase consistirá en una o varias entregas con archivos JPG o PDF donde se verá el diseño del sitio a todo color, tipografías empleadas, íconos y otros elementos visuales.

Etapa 5: Implementación en Drupal

Tanto de desarrollo como de diseño. Se trabaja en todo el armado del sitio en Drupal, configuración inicial de los entornos de desarrollo, armado de tipos de contenido, campos, vistas, bloques, permisos de usuario, instalación de módulos y configuración de los mismos.

Al mismo tiempo se avanzar con la implementación del diseño (lo que se diseño en los mockups) ahora tiene que verse reflejado en el sitio web desarrollado. Esto se conoce como Theming y consisten en la estilización mediante CSS para lograr la apariencia visual deseada.

Etapa 6: Testing - Ajustes

Luego de implementarse todo el sitio, viene la etapa de testing para ver que todo esté configurado correctamente, que se visualice adecuadamente el sitio en los navegadores, en los dispositivos móviles, etc. Durante esta etapa se realizan también los ajustes finales del proyecto.

Las etapas mencionadas anteriormente son una guía general que permite brindar resultados predecibles mediante un proceso de trabajo ordenado tanto para nosotros como para los clientes.

En Drupal Soul, ofrecemos el servicio de diseño y desarrollo web con Drupal. Pero también brindamos otros servicios como mantenimiento, migración, soporte o consultoría.

Si necesitás realizar un proyecto con Drupal, podés contactarnos a través del formulario de contacto y te estaremos respondiendo a la brevedad.