Material que necesito antes implementar una Web

La mala organización cuesta dinero. Realizar un sitio web sin disponer del material creará cuellos de botella, frustración, retrasos, largos hilos de correos con recordatorios, y un muchos más etcéteras. Hagamos las cosas bien desde el principio. Definamos un flujo de trabajo que nos permita ser eficientes sin perder tiempo, pelo y energía. El objetivo es simple y difícil a su vez: preparar el material que necesitamos antes de implementar una web. Marcar una línea roja que no se pueda cruzar hasta que todos los checks estén debidamente marcados.

En este artículo te voy a explicar que pido, como mínimo, antes de escribir HTML. No es relevante si el responsable es un diseñador gráfico, UX/UI, copywriter o el propio cliente; el responsable debe proporcionar los ingredientes antes de ponerte a cocinar. ¿Te imaginas que vas a cocinar una tarta de manzana y no tienes manzanas?

1. Definición del negocio

• Requisitos funcionales: describen las funciones que debe cumplir el sistema, es decir, las acciones que debe realizar el software.
• Casos de uso: diagramas que muestran las diferentes acciones y escenarios que ocurren en un app. Ayudan a comprender y comunicar los requisitos funcionales de un sistema de manera clara y concisa. También pueden crearse por medio de historias de usuario, o documentos de requisitos.

2. Diseño

• Guía de estilos: definición visual de colores, tamaños de letras, componentes, tipografías, iconografía, etc.
• Diseño UX/UI: siempre probado por el cliente, tanto versión escritorio como smartphone.
  • Páginas públicas.
  • Páginas privadas.
  • Páginas de error:
    • 500 (error de servidor).
    • 404 (página no existe).
• Iconografía en svg: se utilizará para fabricar una tipografía de iconos.
• Tipografías (en woff2): En caso de estar presentes en Google Fonts, se debe proporcionar el enlace a la fuente. En caso contrario, el archivo woff2.
• Imágenes (webp y/o svg): Todas las imágenes que se vayan a utilizar en la web, tanto en el diseño como en el contenido. Para vectoriales svg y cualquier otro webp.
• Animaciones (en caso de que este previsto).
  • Transiciones: animaciones que se muestran al pasar el ratón por encima de un elemento, por ejemplo.
  • Cargadores (o loaders): animaciones que se muestran mientras se carga la página o algún elemento dinámico.

3. Textos

Se puede construir una página usando texto de relleno, como Lorem Ipsum, pero solo con el texto final se podrán hacer los últimos retoques. Además, el texto es el que va a vender el producto o servicio, por lo que es importante que sea el definitivo y se revise con detenimiento en todas las resoluciones.

• Textos definitivos de todas las páginas: La longitud de las palabras y algunos párrafos puede variar algunas estructuras de la web. El contenido dinámico es el peor archienemigo del diseño web.
• Estructura de las URL amigables: Se debe proporcionar la estructura de las URL para todas las páginas, son muy importantes ya que los usuarios las usarán como referencia para navegar por la web (migas de pan) y los buscadores las usarán para indexar el sitio.
• Títulos: O etiqueta title. Es el texto que aparece en la pestaña y también en los resultados de Google.
• Solo públicas (para páginas abiertas a cualquier usuario).
  • Descripción: texto descriptivo que aparecerá en los resultados de Google.
  • Open Graph: Tanto title (título que usarán las redes sociales cuando se comparta la página) como image (imagen previa que usarán las redes sociales cuando se comparta la página).
• Todos los idiomas: Todos los textos anteriores en cada uno de los idiomas de la web.

4. Servicios

• Hosting: Se debe proporcionar el acceso al hosting donde se va a alojar la web o app.
• Dominio: Contratación o acceso a panel de control del DNSs.
• Certificado SSL: Un certificado SSL. En muchos hostings se puede obtener de forma gratuita.
• Analítica Web: El código de seguimiento de Google Analytics, o la plataforma seleccionada por el cliente.
• Contratación de servicios de terceros que se necesiten utilizar: Como Mailchimp, Calendly, Stripe, HCaptcha, etc.

Conclusión

Ser ordenado y metódico no te asegura la ausencia de problemas, pero ser desordenado te los garantiza. Si no dispones de todo el material, no empieces a implementar un sitio web o app. Si no tienes manzanas, no hagas una tarta de manzana.