Diseño web: fases y etapas para su desarrollo

Diseño web: fases y etapas para su desarrollo
, 10 Feb, 2020

Es muy común entre los diseñadores pensar que el proceso de diseño web se enfoque exclusivamente en asuntos técnicos, tales como wireframes, la gestión de contenido y el código.

Y es que el camino para lograr un diseño óptimo no trata sobre la integración de redes sociales, ni siquiera de imágenes visuales. En realidad, un buen diseño se caracteriza por crear una web que se alinee con una estrategia general. Y en esa estrategia general cobraría un papel fundamental una Guía de Google Analytics que nos lleve a la toma de decisiones sobre nuestro sitio web que nos permita obtener del mismo óptimos resultados.

Una página web con un diseño atractivo ofrece mucho más que solo una “cara bonita”. Un diseño eficaz es capaz de atraer nuevos visitantes, así como ayudar al usuario a comprender el producto, marca o compañía que deseas dar a conocer. Esto es posible gracias a una variedad de indicadores, entre los que se incluyen imágenes, texto e interacciones, los cuales enfocan cada elemento de nuestra web hacia un objetivo definido.

Pero… ¿Cómo lograr un diseño web de calidad? Para ello es fundamental mantener una constante basándose en la estructura final de la página, siguiendo paso a paso cada necesidad de la web.

Veamos cuales son estas necesidades, o lo que es lo mismo, los pasos a seguir para un diseño web de calidad:

Contacto Inicial

Lo primero en lo que debemos fijarnos a la hora de fijar la reunión inicial, es en una correcta definición de objetivos a alcanzar, con cuya información podremos realizar un briefing que nos dará una idea del proyecto que tenemos por delante, permitiéndonos definir su alcance. Otro paso importante del contacto inicial es el benchmarking, donde se analizará a la competencia con el fin de obtener ideas que ayuden a nuestro web.

Veamos cada uno de estos pasos con más calma:

Definiendo objetivos

definiendo objetivos par un diseño web

Dicen que si ya has dado el primer paso, ya habrás ganado la mitad de la batalla… y razón no les falta.

Empezar con buen pie en el campo del diseño de páginas web significa sentarse con el cliente en estrecha colaboración, con el fin de establecer un claro objetivo para la web en cuestión.

En esta reunión deben definirse y quedar claros varios puntos de la web:

  • ¿Cuál es el objetivo principal? ¿Se trata de una web informativa, comercial o de entretenimiento? Si es comercial… ¿Son productos o servicios?
  • ¿A quién está dirigida? ¿Enfoca un público específico? ¿Se centra en usuarios de una ciudad, de un sexo específico o en ciudadanos en una franja de edad específica?
  • ¿Qué es lo que buscan con la web? ¿Pretenden dar a conocer una información, entrar en un nuevo sector laboral o iniciarse en el mundillo?
  • ¿Qué quieren exactamente que se haga en la web? ¿Será un portal informativo? ¿Incluirá interacción con el usuario vía ChatBot? ¿Querrá formularios con los que recabar datos de los usuarios?
  • ¿La página web busca transmitir el mensaje de una marca? ¿O por el contrario se trata de una estrategia de marca más amplia que posea su propio enfoque?
  • ¿Tiene competencia en su sector? De ser así… ¿Busca similitudes con los competidores más fuertes o por el contrario prefiere un estilo propio y diferente al resto?

Las respuestas a estas preguntas son las que nos guiarán en nuestro futuro proyecto. Y es que si no se empieza con buen pie, respondiendo de manera clara a cada uno de las preguntas, se corre el riesgo de que todo el proyecto comience en la dirección incorrecta.

Por tanto, con el fin de asegurarnos toda la información posible sobre el futuro proyecto, es importante que tengamos en cuenta cada uno de los siguientes puntos:

  • Reunión y audiencia con cliente (Definiendo objetivos)
  • Resumen de objetivos (Briefing)
  • Análisis de la competencia (Benchmarking)
  • Características de la página (Definición del alcance)

Briefing

Como ya hemos visto, el briefing se compone de un resumen con los datos que hemos ido recopilando a lo largo de la definición de objetivos.

Se trata de un elemento clave a la hora de desarrollar cualquier proyecto, más aún si es digital, dado que ayuda de manera significativa a identificar lo que el cliente quiere.

¿Te imaginas la construcción de un edificio sin ningún tipo de plano en el cual el constructor va tirando paredes y haciendo agujeros según le parece? Lo más probable es que esa casa se fuera abajo a la primera de cambio, ¿verdad?.

Pues lo mismo ocurre cuando lanzas un proyecto digital sin tener ningún tipo de briefing. Y es que un briefing de calidad hace que la agencia digital pueda valorar mejor sus ofertas al tener claras las necesidades del cliente.

    Suscríbete
    a nuestro blog

    y mantente actualizado

    Básicamente, para realizar un briefing tan solo necesitas recopilar toda la información posible alrededor de estas preguntas:

    • ¿Qué quieres hacer?
    • ¿Para qué?
    • ¿Cuándo lo quieres?
    • ¿De qué medios dispongo para llevarlo a cabo?

    En función a sus necesidades específicas nos podemos encontrar con diferentes tipos de briefing:

    • Briefing de Negocio: Posee la misma estructura que un briefing de marketing, con la salvedad de que tiene un enfoque más dirigido al propio negocio.
    • Briefing de Marketing: En este briefing se resumen los detalles principales de la campaña de marketing que deseamos poner en marcha. Se trata de un documento de extrema necesidad tanto para los desarrolladores, como para la dirección, dado que sirve como punto de partida para definir los briefings tanto creativos como publicitarios.
    • Briefing Publicitario: Es usado para definir campañas de publicidad, enfocándose en aspectos como los objetivos a alcanzar, el público objetivo, el presupuesto de la campaña, etc.
    • Briefing Creativo: Se trata de un documento de uso interno donde se detalla la información del proyecto a nivel gráfico y de diseño, dando lugar a la guía con la que los equipos creativos desarrollarán sus proyectos.

    Veamos ahora un supuesto ejemplo sobre cómo desarrollar los diferentes briefings en un proyecto nuevo:

    Se empezaría por un briefing de negocio donde recabar los siguientes datos:

    1. Empresa:

    • Breve descripción del objeto de negocio.
    • Productos y/o servicios.
    • Información sobre el mercado.

    2. Características del sector:

    • Líderes de la competencia.
    • Competencia directa.
    • Ventajas competitivas.

    3. Análisis del consumidor:

    • Análisis del proceso de compra.
    • Tendencias del mercado.

    A continuación vendría el briefing de marketing:

    • ¿Qué productos o servicios otorga la empresa y dónde?
    • ¿Cuál sería tu cliente ideal?
    • ¿Pertenecen a algún nicho de mercado en concreto?
    • ¿Cuales son nuestros objetivos de venta?
    • ¿De qué presupuesto disponemos?
    • ¿Por qué compran a nuestra competencia?

    Una vez tenemos todos los datos tanto de negocio como de marketing, es la hora del briefing publicitario:

    • ¿Canales publicitarios que van a usarse?
    • ¿Cuál es nuestro target en cada uno de los canales usados?
    • ¿Tono del mensaje?
    • ¿Fechas de lanzamiento para las campañas en cada canal?
    • ¿Presupuesto?
    • ¿Objetivos por campaña?
    • ¿USP? ¿Tienes algo que destaque por encima de tu competencia?

    Finalmente abordaríamos el briefing creativo:

    • ¿Qué diseño gusta más para nuestros anuncios?
    • ¿Cuál es el mensaje que desea hacer llegar a los clientes?

    Definición del alcance

    A la hora de afrontar un proyecto de diseño web, uno de los problemas más comunes y difíciles de solventar es el arrastre de alcance.

    Esto se da cuando el objetivo previamente establecido se expande o cambia gradualmente durante el proceso de diseño, dando lugar a más trabajo del inicialmente acordado.

    Un ejemplo muy común es el cliente que contrata servicios para el diseño y creación de una web, pero que con el tiempo ve que también quiere otros servicios adicionales tales como la creación de una aplicación web, correos electrónicos o inclusión de un chatbot.

    Cuando esto ocurre no debe considerarse como un  problema, sino como una oportunidad de ampliar el contrato. Obviamente, si el aumento de expectativas no se corresponde con un aumento en el presupuesto, corremos el riesgo de que el proyecto se vuelva inviable.

    Definición del alcance proyecto de diseño web

    Encima podremos ver un diagrama de Gantt, el cual se usa para detallar un avance cronológico realista para el proyecto. Esto nos ayudará a establecer unos límites y plazos viables con los que trabajar en el proyecto, proporcionando una referencia de peso tanto para los diseñadores como para los propios clientes.

    Benchmarking

    Cuando hablamos de benchmarking debemos tener en cuenta que se trata de un proceso continuo por el cual se toma como referencia a los productos y servicios de las empresas líder del sector, con el fin de crear una comparativa con los de tu propia empresa, y así visualizar posibles mejoras para tu negocio.

    Pero cuidado, no es simplemente copiar lo que está haciendo tu competencia… su principal función es la de adquirir técnicas eficaces de la competencia para posteriormente adaptarlas a tu negocio y, si es posible, mejorar el sistema de la competencia al añadirlo al tuyo.

    Si nuestro objetivo es alcanzar un nivel de competitividad alto, el mejor camino para lograrlo es un estudio de la competencia profundo donde analicemos sus métodos y técnicas, para a continuación perfeccionarlas y adaptarlas a nuestra empresa.

    Hoy día existen tres tipos bien diferenciados de benchmarking:

    1. Competitivo: Se basa en la medición de los servicios y productos de la competencia, con el fin de crear una comparativa con nuestra empresa y así mejorar nuestra experiencia de usuario.
    2. Interno: Se trata de un benchmarking llevado a cabo en nuestra propia empresa. Es una práctica común en las grandes empresas que desean comparar diferentes departamentos, o incluso en grupos empresariales donde se busca un rendimiento común entre todos los socios.

    Funcional: En el benchmarking funcional lo que se busca es la mejora de los métodos de la web. Por ello no es necesario que la empresa a analizar sea competencia directa, sino que lo que se busca son objetivos muy productivos y con gran acogida, de los que podamos adquirir técnicas que nos ayuden a incrementar nuestra eficacia.

    Qué es y cómo aplicar el benchmarking

    De igual modo, a la hora de crear un benchmarking, es muy importante que nos basemos en unos pasos preestablecidos que nos ayuden en nuestra tarea:

    1. Planificación y estrategia: Lo primero será planificar la investigación que llevaremos a cabo. Nos basaremos en las siguientes preguntas:

      1. ¿Qué quiero conseguir?
      2. ¿A quién voy a analizar?
      3. ¿Cómo lo voy a hacer?

    2.Recopilación de ideas: Es el paso más importante del benchmarking y del que dependerá todo nuestro proceso. Las posibles mejoras pueden ser obtenidas de diferentes fuentes, o salir del propio equipo.

    3.Análisis de ideas: Cuando ya por fin disponemos de toda la información que precisamos, toca pararse a analizar las diferencias entre las empresas que estamos investigando y la nuestra propia, y así identificar las oportunidades de mejora que nos aportan.

    4.Adaptación a la web: Una vez que ya sabemos lo que queremos incluir en nuestra web, es hora de implementar las mejoras. Insisto en la importancia de no sólo copiar a la competencia, sino que además debemos mejorarla.

    5.Mejoras y seguimiento: Finalmente se realiza un informe en el que englobar toda la información destacada analizada durante el proceso, lo que facilitará enormemente retomar el trabajo en futuros proyectos.

    Planificación: Sitemap, Wireframes Y UX

    Que es y para que sirve un sitemap

    El sitemap o mapa del sitio es una herramienta de los webmasters la cual les permite obtener mejores búsquedas y posicionamientos en los buscadores.

    Gracias al sitemap, los motores de búsqueda son capaces de rastrear fácilmente los contenidos de nuestra web, además de proporcionar estadísticas de acceso, así como posibles errores de indexación. 

    Se trata de un archivo en el cual se incluye un listado de las páginas con toda la información sobre el contenido de la web, sus actualizaciones, etc. Este puede venir en diferentes formatos, siendo el más común de ellos el .XML, ya que nos aportará información adicional sobre las páginas. Otro protocolos igualmente aceptados son los feeds RSS, los OAI-PMH o como simples ficheros de texto.

    Un sitemap nos proporciona la base necesario para todo sitio web que se precie. Gracias a él, los diseñadores web obtendrán una idea clara de la arquitectura informativa de la página web, así como explicar las relaciones entre las diferentes páginas y los elementos de contenido.

    En realidad construir una web sin un sitemap, viene a ser como cazar moscas a cañonazos, algo que rara vez resulta práctico.

    Una vez tenemos el sitemap creado, nuestro siguiente paso es la construcción de una maqueta o plantilla de la estructura ósea de la web. A esto se le conoce como Wireframes.

    Que es un wireframe para un sitio web

    Los wireframes nos proporcionan el marco en el que almacenar tanto el diseño visual, como los elementos del contenido, lo cual ayuda drásticamente a identificar posibles errores o  lagunas en nuestro sitemap.

    A pesar de que los wireframes no contienen elementos del diseño final al tratarse de una simple plantilla, este sí que actúa como orientación del aspecto final que tendrá la web. Igualmente puede ser útil para concretar algún aspecto nuevo del que os hayáis dado cuenta al crear el wireframe.

    Además en este punto también tendremos que tener en cuenta el factor de la experiencia de usuario o UX.

    La evolución del proceso de la experiencia de usuario

    Cuando hablamos de experiencia de usuario UX y UI nos referimos al conjunto de factores y elementos que definen la posible percepción positiva o negativa de un producto o servicio. Esta depende en gran medida de diferentes factores de diseño web, tales como el hardware, el software, la accesibilidad y mucho más… pero también depende de otros aspectos más relativos a las emociones, como la confianza en la marca.

    Concepto: Creación de contenido

    Las 6 ws de la creación de contenidos

    Una vez que tenemos completado el sitemap y tenemos la estructura clara, es hora de empezar con el aspecto más importante de la web, el contenido escrito y todo lo relacionado con el marketing de contenidos.

    Este posee dos características esenciales que le distinguen del resto de elementos de la web:

    Difusión

    El contenido atrae a lectores e impulsa el compromiso y la acción por su parte. Aunque obviamente depende de la calidad del mismo, este no es el único factor que influye en su éxito. Una página puede ser o no atractiva dependiendo de factores tan diversos como el interés que despierta el contenido en sí, como por la forma en que se presenta, ya sea la tipografía, los elementos estructurales, etc.
    Una prosa sin vida y demasiado larga rara vez es capaz de mantener la concentración del lector durante mucho tiempo. Por el contrario, un contenido breve, rápido y diáfano es capaz de atrapar al lector, el cual no dudará en visitar otras páginas de tu web buscando lo mismo que le aportó la anterior.
    Esto no quiere decir que los contenidos tengan todos que ser poco extensos. A menudo se tratan temas que, por lo enorme de su temática, precisan de contenido más extensos. En estos casos es importante fragmentar adecuadamente el contenido con párrafos no demasiado extensos, así como imágenes e infografías que hagan la lectura más llevadera.

    SEO

    La segunda función del contenido para nuestra web es la de aumentar su visibilidad en los motores de búsqueda. Este proceso, el cual se basa en optimizar el contenido con el fin de mejorar nuestro posicionamiento en los buscadores, es conocido como optimización del motor de búsqueda o SEO (Search Engine Optimization).

    El mundo del SEO es muy extenso y ya lo hemos tratado con anterioridad en el blog. Por ello, si te interesa el posicionamiento orgánico, no dudes en visitar “Posicionamiento SEO, Guía en el 2020 para dummies” para más información. Sin embargo, en este artículo nos centraremos exclusivamente en los aspectos del SEO que afectan directamente al diseño de páginas web, tales como la elección de palabras clave o keywords.

    Y es que una correcta elección de las palabras clave es esencial para el éxito de cualquier página web.

    Por ello todo proceso de diseño web se centra en torno al SEO, donde las keywords que deseamos posicionar deben ser colocadas en las etiquetas de títulos, de hecho, cuando más al principio mejor, básicamente. Estas keywords también pueden aparecer en meta descripciones, etiquetas H1 y en el propio cuerpo del contenido.

    Como es lógico, aquel contenido que está bien redactado, que es informativo y rico en palabras clave, es mucho más fácil de indexar y analizar por parte de los motores de búsqueda, que aquel que no está optimizado para ello.

    Normalmente es el cliente el que aporta la mayor parte de este contenido, por lo que es muy importante hacerles saber que ese contenido luego podrá ser adaptado con el fin de obtener una mejor optimización para los motores de búsqueda.

    Diseño: Elementos visuales y Mockups

    diseño elementos visuales y mockups

    Para finalizar la creación de la web, pasaremos a la elaboración de su estilo visual. Se trata de una parte del proceso de diseño que por lo general viene siempre condicionada por los elementos previamente existentes en la marca, tales como las opciones de color o los logotipos, los cuales vendrán estipulados por el cliente. Pero ojo, no pensar que todo viene cerrado sin dejar lugar a la imaginación del diseñador. De hecho, si un diseñador web quiere lucirse, este es su momento.

    Y es que los artes o imágenes llevan un tiempo más fuertes que nunca, adquiriendo papeles más y más importantes a medida que pasa el tiempo.

    Una imagen de calidad, que atraiga e informe al usuario, no solo dará a tu web un aspecto profesional, sino que además servirá de trampolín a la hora de darte a conocer.

    Por ello, cuando ya se tienen todos los contenidos, tanto visuales como escritos, se procede a crear una plantilla con el resultado final de la web. En esta plantilla se incluye todo lo que será la web, desde sus páginas, hasta su contenido escrito y visual.

    A esta plantilla se la conoce como Mockup, y sirve tanto para presentar un resultado final al cliente, como para localizar fallas o errores en la web antes de ser publicada definitivamente.

    Los Mockups son fotomontajes que permiten a los diseñadores web mostrar al cliente cómo quedará su diseño, permitiendo rectificaciones en caso de ser necesarias, las cuales serán mucho más sencillas de realizar antes de la publicación de la web.

    Volviendo al contenido visual, es bien sabido que afecta directamente a la cantidad de clics y al compromiso de los usuarios. Y es que no solo logran que la web se vea mucho más agradable y fácil de digerir, sino que además son capaces de mejorar el contenido de texto que lo acompaña transmitiendo información adicional.

    Sin embargo, también es importante tener en cuenta que una imagen demasiado pesado puede lastrar nuestra web. Por ello es importante saber comprimir al máximo nuestras imágenes, ahorrandonos tiempo de carga y sin perder calidad.

    Un buen diseño visual agilizará tus comunicaciones y atraerá a usuarios nuevos a tu web, no subestimes nunca su poder.

    Desarrollo

    Mockups para mejorar el trabajo de diseño web

    El desarrollo se podría definir como el punto en el que los desarrolladores maquetan el mockup en versión web. Se trata del paso en el que nos encargamos de las características y funciones internas de la página, o lo que es lo mismo, crea la parte interna de la web, como son los sistemas de funcionamiento, contenidos, base de datos, etc…

    En este punto se deberá seleccionar el sistema de gestión de contenidos (CMS) eligiendo el más apropiado para nuestro proyecto.

    Los lenguajes de programación más usados son ASP, JavaScript, XML y SQL, aunque con los nuevos requerimientos de programación se están empezando a desarrollar nuevas herramientas de programación. Sobre esto, también debe aclararse que algunas herramientas de superposición son usadas tanto como por los diseñadores como los desarrolladores en formatos HTML y CSS.

    Entre los sistemas de gestión de base de datos, destaca sin duda MySQL, seguida de cerca por Oracle, SQL Server y PostgreSQL. Otras opciones válidas son Firebird o HSQL.

    Pruebas

    test de diseño web

    Con ya todo el contenido montado y las imágenes ajustadas, es hora de lanzarnos con las pruebas en la web.

    Es importante que se pruebe a fondo cada una de las páginas que daremos de alta, asegurándonos de que todos los enlaces funcionen correctamente, así como corroborar que la carga de la web se ejecuta correctamente en todos los diferentes dispositivos y navegadores que existen.

    Es muy común localizar errores en esta fase. De hecho, lo preocupante es cuando no se encuentra ninguno, pues suele ser un síntoma de que algo se ha pasado por alto. Estos errores normalmente son resultado de pequeños errores de codificación, los cuales son complicados de localizar y corregir, pero mejor hacerlo ahora que presentar una web defectuosa al público…

    Para esta función existen algunas herramientas que nos pueden facilitar el proceso de testeo, tales como SEO Spider de Screaming Frog, la cual se usa para revisar e identificar las fallas que perjudican su desempeño en los motores de búsqueda. Esto puede ahorrar mucho tiempo dado que la revisión manual página a página puede hacerse muy tedioso.

    No olvides revisar muy bien todos los metatítulos y descripciones de cada página, y recuerda que incluso el mismo orden de las palabras tiene su importancia, pudiendo afectar al rendimiento de nuestra web en los motores de búsqueda.

    Otras herramientas que pueden ser de utilidad a la hora de analizar nuestra web son SEMRush y SiteAnalyzer, ambos con sus propias características pero ambos útiles a la hora de ahorrarnos tiempo en el análisis de la web.

    Lanzamiento 

    Cuando por fin lo tenemos todo preparado y presentable, y nos hemos asegurado de que toda página funciona como es debido, toca pasar al punto que todo diseñador web prefiere, el lanzamiento.

    Un error común es caer en la desesperación cuando se ha lanzado la web y se localiza algún error que se haya logrado colar sin ser visto durante la etapa de testeo. No debes esperar la perfección, al menos no de primeras, pues es bastante habitual encontrarse con elementos que necesiten ser reparado.

    Y es que el diseño de una página web es un proceso continuo y fluido que requiere de un mantenimiento constante para funcionar de manera óptima.

    El diseño web, así como cualquier diseño de cualquier tipo, debe tratar de encontrar siempre un cierto equilibrio entre la función que desempeña y la forma en la que transmite su mensaje.

    ¿Qué significa esto? Pues que a la hora de diseñar una web debe tenerse en cuenta la utilización de formatos diferentes tales como las fuentes o los colores de fondo, pero sin olvidar que la experiencia de usuario de la gente que navega y experimenta en tu web es igual de importante.

    Todo diseñador que se precie siempre tendrá en cuenta estos puntos, siendo capaz de crear una web que mantenga el equilibrio entre ambos.

    Para terminar, algo que debemos tener muy presente es que, aunque la web ya esté dada de alta, el trabajo de un diseñador no acaba ahí ni de lejos…

    ¡Lo bonito de esta profesión es precisamente que nunca está terminada!

    Siempre podremos ejecutar nuevas pruebas a usuarios en contenidos nuevos, así como monitorear nuestros análisis y refinar el mensaje que estamos mandando al usuario.

    Conclusión y despedida

    Hasta aquí nuestra guía paso a paso con todos los elementos del diseño de una página web.

    Si has llegado hasta aquí, estarás de acuerdo conmigo en que se trata de un proceso complejo que en algunos momentos puede parecer que nos supera. Pero nada más lejos de la realidad, pues lo cierto es que precisamente gracias a la categorización de cada paso a realizar podremos disfrutar de un producto final de muchísima más calidad que los proyectos lanzados de manera anárquica, sin un claro proceso de realización.

    Esperamos que esta guía te haya sido de utilidad y recuerda, en el blog de Marketeros Agencia podrás encontrar toda la información relevante tanto al mundillo del diseño web, como en el Posicionamiento SEO o el Inbound Marketing.

    No dudes en dejarnos tus dudas, será un placer atenderlas.

    Diseño web: fases y etapas para su desarrollo
    Leader Developer & Design
    david-diaz-ospina[email protected]