Cómo creamos sitios web en Articulate Marketing

En primer lugar, construimos sitios web HubSpot CMS. Si no sabes qué es HubSpot, no te preocupes. Dirígete aquí para una introducción fácil. Para aquellos de ustedes que todavía están con nosotros, hoy estamos describiendo el proceso para crear sitios web para nuestros clientes.

Este artículo se basa en uno de nuestros seminarios web, organizado por mí misma, Ioana Negulescu, jefa de estudio en Articulate Marketing. Puedes ver el video y descargar las diapositivas a continuación:

Desafíos de creación de sitios web

A menudo hay un paso inicial cuando se trata de crear un nuevo sitio web (o migrar un sitio existente). Necesitamos aliviar algunos miedos. No es raro tener clientes que han sido quemados antes por experiencias con agencias anteriores.

Cuando escuchamos...

'Nos preocupa tener un nuevo sitio web porque el último fue un fastidio'.

Nosotros hacemos esto...

Hemos escuchado esto muchas veces. Por lo tanto, nos esforzamos por hacerlo mejor.

Por ejemplo, en lugar de usar diagramas de Gantt, nos gusta usar hitos . Una de las cosas en las que nos enfocamos es tener un proceso transparente con actualizaciones continuas sobre el progreso. Esto le da a nuestros clientes una sensación de seguridad.

Una cosa que es muy, muy importante para nosotros durante el proceso de diseño web es esto: videollamadas a través de correos electrónicos. Es importante porque podemos medir las reacciones de nuestros clientes. Si están un poco callados, si están muy emocionados, etc. De esa manera, podemos hacer recomendaciones que estén en línea con sus expectativas. Y, por supuesto, también responder a las dudas que puedan tener.

Cuando escuchamos...

"Hemos tratado de perseguir al desarrollador tantas veces, simplemente no se comunican con nosotros".

Nosotros hacemos esto...

Para marcar el progreso, utilizamos llamadas regulares de gestión de proyectos y las tenemos en el calendario desde el primer día. Durante esas llamadas de gestión de proyectos, presentamos nuevos trabajos e identificamos obstáculos.

Los diseñadores y desarrolladores necesitan tiempo para realizar el trabajo, por lo que no siempre tiene sentido que asistan a cada una de esas llamadas. Los traemos cuando es relevante.

Cuando escuchamos...

'¿Qué pasa si el nuevo sitio web no cumple con nuestras expectativas?'

Nosotros hacemos esto...

Antes de comenzar cualquier proyecto de diseño de sitio web, repasamos los fundamentos de su estrategia de marketing. Esto es muy importante porque en esta etapa aprendemos sobre los clientes de un cliente, el recorrido del comprador y los objetivos de marketing de la empresa. Esto informará muchas decisiones estratégicas que tomemos sobre el sitio web, estableciendo las expectativas desde el principio.

Luego, pasamos a la arquitectura de marca. Aquí, presentamos los fundamentos del sitio web. Los colores, las imágenes o ilustraciones, los elementos UX/UI, las fuentes: la estética general del sitio web. Este es un proceso extremadamente colaborativo. Nuestros clientes están involucrados en cada paso , por lo que sus aportes y requisitos se integran en el producto final.

Un ejemplo: HTG

Creamos un sitio web galardonado para HTG, por lo que lo usaremos como ejemplo en todo momento.

Expresaron estos temores y describieron sus desafíos cuando les hablamos por primera vez. Estos son problemas bastante comunes entre las empresas de tecnología B2B:

• Ambiciosos objetivos de crecimiento empresarial.
• Sitio web obsoleto (y marca)
• Pocas oportunidades de captura de prospectos
• Navegación torpe
• Mala experiencia de usuario
• Bajo rendimiento del sitio

Si esto suena como usted, vaya aquí para puntuar su sitio web.

El proceso Articulado

Este es nuestro proceso, en pocas palabras. Haga clic en esta imagen para verla con más detalle:

Volvamos al ejemplo de HTG. Con ellos, seguimos nuestro proceso habitual de siete etapas:

1. Saque inicial

El inicio es la primera interacción para el proyecto del sitio web. Durante esa llamada, tratamos de medir las preferencias de nuestros clientes por el diseño y las aspiraciones de marca. Queremos alinear estas preferencias, estratégicamente, con el objetivo final de cualquier sitio web creado por Articulate: construir un motor de marketing que funcione bien.

2. Moodboards y estructura del sitio web

Aquí ejecutamos dos procesos internos. Una es armar moodboards, recomendaciones de fuentes, recomendaciones de colores, imágenes, etc.

La otra es que, con nuestro equipo de redactores publicitarios de marketing, elaboramos recomendaciones de mapas del sitio. Esta es la estructura de la navegación y las páginas que necesitaremos construir.

Luego, tenemos una llamada de revisión del cliente, que es nuestro primer gran hito. Al final de cada una de las etapas, tenemos una llamada de revisión. Si todo se aprueba, pasamos a la siguiente etapa. Si no, volvemos atrás e iteramos.

3. Diseños iniciales y wireframes

Aquí, diseñamos la página de inicio como una forma de mostrar la estética del sitio web. Por lo general, creamos algunas opciones diferentes para que el cliente elija. Como diseñamos de manera modular , pensamos en esto como el paso para mostrar cómo se verán algunos de los 'ladrillos de Lego' más importantes.

Paralelamente, elaboramos estrategias en torno a la estructura de la página. Es decir, ¿qué tipo de contenido va a qué página? ¿Qué piezas de Lego necesitamos?

Luego, nuestro equipo crea esquemas, que son como bocetos aproximados de las páginas del sitio web sin elementos de diseño.

4. Diseñe todos los módulos y escriba el borrador de la copia web

En esta etapa, nuestro equipo de redactores comienza a redactar la copia, mientras que el equipo de diseño continúa con el diseño de todos los módulos necesarios para el sitio web. No siempre es el caso que escribimos toda la copia en los sitios web de nuestros clientes, pero cuando lo hacemos, cobramos de forma transparente por página según un mapa del sitio acordado previamente.

5. Desarrollar el sitio web

Para mostrar los diseños de los módulos in situ, desarrollamos y construimos todas las páginas con copias de lorem ipsum e imágenes de marcador de posición , para que nuestros clientes puedan tener una idea adecuada del resultado final.

Cuando trabaje con un desarrollador, cualquier desarrollador, querrá hacerle algunas preguntas pertinentes:

• ¿Cuáles son los principales pasos que sigue para codificar nuestro sitio web?
• ¿Cómo te aseguras de que el código esté ordenado? (Un problema importante con los sitios web de plantillas).
• ¿Cuándo y con qué frecuencia verifica la velocidad y el rendimiento general?
• ¿Cómo se ve la construcción de una página una vez que se desarrolla el sitio web? ¿Es una experiencia de usuario amigable para quien construye la página?

O si está trabajando con Articulate, '¿Cuál es el tiempo más rápido en resolver un cubo de Rubik?' Damos la bienvenida a tales preguntas.

Nuestro proceso de desarrollo comienza en Notion, donde planificamos nuestro trabajo. Luego, configuramos el código base para las navegaciones y algunos módulos globales. A continuación, preparamos una lista de verificación de control de calidad para cada elemento de diseño y funcionalidad que necesitamos crear para ese sitio web específico. Esto nos mantendrá en lo correcto durante toda la construcción.

Creamos andamios en todos los módulos en HTML y luego comenzamos a observar el estilo. Entonces, piense en ladrillos, yeso, pintura y decoración.

En todo momento, probamos todo, verificamos el rendimiento y realizamos mejoras. A menudo, aprenderemos cómo hacer algo mejor y llevaremos esa experiencia a nuestro próximo sitio web.

6. Rellenar páginas

En esta etapa, después de varias iteraciones y revisiones de clientes, llenamos las páginas con texto e imágenes aprobados. En esta etapa, el sitio web está casi listo para su lanzamiento. Pasamos por otra etapa de revisión del cliente y, después de eso, ejecutamos una lista de verificación de control de calidad previa al lanzamiento.

7. ¡Lanzamiento!

Lanzamos, y luego ejecutamos otra lista de verificación de control de calidad posterior al lanzamiento, porque es muy importante asegurarse de que el sitio web sea funcional y que nada se haya roto desde la etapa de preparación para vivir.

¡Finalmente, por supuesto, celebramos!

10 consejos para un gran diseño de sitios web

Aquí hay algunas reglas que hemos aprendido a lo largo de los años y en docenas de construcciones de sitios web:

1. Pon tus preferencias en segundo lugar y los puntos débiles de tus personajes primero.
2. Concéntrese en cómo ayuda a sus clientes, en lugar de solo enumerar sus servicios.
3. No intentes reinventar la rueda. Lo que funciona, funciona por una razón. Por ejemplo, centrarse únicamente en el área de la mitad superior de la página es un mito. Todo el mundo sabe cómo desplazarse. Incluso hay un sitio web al respecto: http://abovethefold.fyi/
4. Mantenga la navegación corta y simple.
5. Haga que los botones estén basados ​​en valores. Evite la copia genérica siempre que sea posible.
6. Siempre enlace a una página relevante si existe una página con más contexto.
7. En las páginas clave, evite tener demasiados enlaces externos. (Tu blog es una historia diferente).
8. Siempre termina la página con una o más CTA (llamadas a la acción), llevando al usuario al siguiente paso del proceso.
9. No subestimes el poder de una página de contacto; con demasiada frecuencia es un punto de salida, pero realmente quieres mantener a las personas en esa página.
10. ¡Menos es más!

Bono: no dejes que el logo dicte un mal diseño

Cuando diseñamos el sitio web de HTG, su logotipo estaba desactualizado y ya no se ajustaba a la marca que buscábamos. Lo modernizamos con algunos cambios simples:

Aquí hay algo de comida para el pensamiento. En nuestra era digital, lo más probable es que su marca sea su sitio web en lugar de su logotipo. Entonces, piense primero en el sitio web, luego en el logotipo.

¿Qué sucede después del lanzamiento?

Bien. Tienes un nuevo sitio web. ¿Ahora que? Como dijimos, en Articulate vemos los sitios web como motores de marketing, por lo que nuestro compromiso no tiene que terminar en el lanzamiento. De hecho, ese es solo el comienzo del viaje para la mayoría de nuestros clientes.

Desde la creación de contenido nuevo, como blogs, páginas pilares, ofertas cerradas y páginas 'squeeze', hasta la ejecución de seguimiento de comportamiento y pruebas multivariantes, su sitio web puede hacer mucho más.

Adelanto: Núcleo

Entonces, ¿cómo puedes obtener un sitio web de HubSpot? Hay algunas opciones, como la creación de un sitio web personalizado, pero una forma es usar un tema de HubSpot. Nucleus es el tema propio de Articulate.

Un tema es como una plantilla de sitio web mucho más sofisticada. Nuestro propio sitio web se basa en Nucleus y lo hemos usado para varios clientes con una amplia gama de estilos de diseño. Lo lanzaremos en HubSpot Marketplace en 2022. Con Nucleus, podemos crear sitios web altamente optimizados en semanas, incluso días, para nuestros clientes. ¡Es todo bastante emocionante!

>> Haga clic aquí para explorar Nucleus <<