Los 8 mandamientos de un proceso de diseño web (para principiantes y sin código)
Publicado: 2021-11-01
Descubra cómo puede crear un sitio web exitoso siguiendo un proceso de diseño de sitio web estructurado.
Nuestra hipótesis es que ya ha encontrado un nombre de dominio y un proveedor de alojamiento.
Si aún no ha elegido su host, realmente le recomendamos nuestro socio Cloudways .
En el siguiente ejemplo, se presentan los pasos para el caso en el que está creando un sitio web para usted. Si el sitio web es para un cliente, pueden ocurrir nuevos pasos en términos de planificación del proyecto, configuración de plazos, contrato y más. Pero en esencia, aún tendrá que seguir los pasos que se presentan a continuación.
Ahora, aquí están los pasos:
- Identificación del alcance : ¿qué necesidades tiene que cumplir el sitio web? ¿Con quién habla el sitio web? ¿Cuáles son sus objetivos y motivadores? ¿Qué empresas tienen el mismo alcance y público objetivo que usted?
- Definición del mapa del sitio del sitio web : ¿cuáles son las páginas web y las funciones que ayudan a la empresa y al público a alcanzar sus objetivos?
- Creación de contenido : preparación de la copia para las páginas del sitio web;
- Creación de la marca visual : preparación de la paleta de colores, fuentes y gráficos que se utilizarán en el diseño de su sitio web, que terminarán dando forma a su identidad visual;
- Wireframing: esbozar el diseño de sus páginas web;
- Diseño del sitio web : al crear el sitio web real, tenga en cuenta las limitaciones de las herramientas que está utilizando;
- Pruebas : asegurarse de que todo funcione, desde enlaces hasta formularios y botones. Pruebe el sitio web en varios navegadores y dispositivos para asegurarse de que funciona correctamente;
- Lanzamiento: haz algo de ruido antes de salir en vivo con una estrategia de comunicación cuidadosamente planificada.
Vamos a tomarlos uno por uno.
Los pasos del proceso de diseño de un sitio web
1. Identificación del alcance
En esta etapa, usted y su equipo deberán encontrar las respuestas a algunas de las siguientes preguntas:
- ¿Para quién es el sitio?
Un sitio web llamativo puede tener sus ventajas, pero si desea que los visitantes de su sitio web comprometan su dinero o su tiempo, significa que debe investigar más para convencerlos de que el compromiso vale la pena. Para ser convincente, deberá comprender a su público objetivo, comprender sus necesidades, motivadores internos y externos.
Esta excavación también significa que necesita crear un producto que sea útil y resuelva la necesidad de alguien.
Por ejemplo, supongamos que tengo el pasatiempo de hacer arreglos florales de papel y quiero llevarlo más allá y transformarlo en un negocio. ¿Alguien hace flores de papel? ¿Dónde puedo encontrar a estas personas?
Bueno, podría pensar que los planificadores de bodas y las futuras novias podrían querer esa opción.
Pero debo ir aún más lejos. ¿Todas las novias querrían mis flores de papel o simplemente un tipo de novia?
Esto significa que deberá investigar un poco y verificar a sus competidores. ¿Hay otros comerciantes de flores de papel? También compites con las buenas florerías antiguas. ¿Cuál sería entonces tu valor añadido, o tu propuesta de valor única?
- ¿Qué esperarían encontrar los visitantes de su sitio web en su sitio web?
Volviendo a nuestro ejemplo, probablemente sus visitantes querrán ver una variedad de productos, de colores, información sobre el envío (es posible que necesiten un cuidado adicional porque las flores de papel son frágiles), etc. ¿Qué pasa con algunas menciones de que el papel es reciclado? ? Tal vez sus clientes son muy conscientes de su impacto en el medio ambiente y se preocupan por esos detalles.
¿Alguien también puede alquilar las flores?
Ahora, ¿qué tal si incluyes algunos testimonios? Tal vez diseñaste algunos arreglos florales de papel para las bodas de tus amigos.
¿Ves a dónde estoy llegando? Debe investigar antes de saltar al diseño del sitio web.
- ¿Cómo se ven las conversiones?
¿Estamos hablando de la inscripción a un curso, la compra de un producto, la suscripción a una newsletter?
En el caso del lunes, puedes averiguar fácilmente sus conversiones desde la página de inicio. 
La conversión principal es obvia desde la llamada a la acción "Comenzar", que se coloca justo encima de la tapa, en el centro.
Otra microconversión es el registro de una conferencia, que puede notar en el mensaje en la esquina superior izquierda.
Otra microconversión es la de “Ventas de contacto”.
¿Qué pasa con su sitio web, hay una conversión principal? ¿Hay algunos secundarios?
- ¿Cómo es el viaje del cliente?
Un mapa de viaje del cliente es una representación visual del camino que un visitante toma a través de su sitio web desde su entrada hasta que alcanza el objetivo deseado y se va.
Un mapa de viaje del cliente debe incluir información como las páginas que se visitan y en qué orden, los pasos necesarios para que un visitante del sitio web logre sus objetivos, los puntos de interacción entre su empresa y los visitantes del sitio web (formularios, chat, etc.), puntos potenciales de fricción.
El viaje de un cliente no es fijo. Empiezas con una suposición y luego te ajustas a lo largo del camino. Puede usar herramientas como Google Analytics para analizar el comportamiento del sitio web y realizar optimizaciones basadas en información real.
2. Definición del sitemap del sitio web 
Fuente
Ahora que el recorrido del cliente está claro, es hora de crear el mapa del sitio. El mapa del sitio de un sitio web se utiliza para establecer la arquitectura de información del sitio web y explica las relaciones entre varias páginas.
Puede crear mapas de sitio en herramientas que van desde Excel hasta Figma.
3. Creación de contenido 
Ahora que la estructura del sitio web está establecida, es hora de crear contenido para las páginas individuales.
Estas son algunas de las mejores prácticas en lo que respecta a la redacción de textos publicitarios:
- Utilice palabras y conceptos familiares para sus usuarios ideales;
- No vaya con pelusa y jerga;
- Trate de comunicarse como lo haría en un encuentro cara a cara normal. Así inducirás una sensación de familiaridad;
- Escriba en tiempo presente y evite la voz pasiva;
- Compruebe siempre su legibilidad. Para ello, puedes utilizar herramientas como Readable .
- Pruebe sus titulares con amigos, extraños, colegas. Como dice David Ogilvy:
“En promedio, 5 veces más personas leen el titular que el cuerpo del texto. Cuando ha escrito su titular, ha gastado ochenta centavos de su dólar”.
Esto significa que los titulares son vitales en un sitio web.
Intente optimizar su contenido en torno a ciertas palabras clave relevantes para su audiencia (SEO). Puede usar herramientas como Google Trends (gratis ), Ubersuggest (gratis) o Ahrefs (pago).
- Utilice el marco de redacción de AIDA.
A – Atención : crea contenido que llame la atención, que despierte la curiosidad y que convenza a tu audiencia de que necesita saber más sobre tu marca.
I – Interés : brinde a sus visitantes una razón para permanecer comprometidos. La clave aquí es hacer que el problema sea personal para que solo hables con el prospecto y con nadie más.
D – Deseo : aquí es donde muestra a los visitantes de su página de inicio cómo sus ofertas brindan una solución a su problema/dolor. Aquí puede comenzar a explicar las características de su producto, centrándose en cómo esas características pueden mejorar sus vidas.
A – Acción : ahora es el momento de persuadir a los prospectos para que actúen: comprar, suscribirse, descargar un obsequio, iniciar una prueba, etc.
4. Creación de la marca visual
Este paso no tiene que ser siempre el cuarto paso. Puede comenzar incluso antes en el proceso con esto.
La identidad visual se refiere a la forma en que moldeas la percepción en torno a tu marca.
Este es todo un proceso en sí mismo.
Aquí necesitarás:
- Defina cómo deben verse sus gráficos . ¿Usará formas, gráficos 3D, ilustraciones?
Fuente
- Defina la tipografía de su sitio web ;
Fuente
- Elige una paleta de colores . De la paleta de colores, puedes evolucionar a una guía de estilo, donde puedes establecer los colores de enlaces, titulares, botones, fondos, etc. para ello puedes utilizar herramientas como la rueda de colores de Adobe .
Fuente
- Selecciona imágenes que cuenten la historia de tu marca;
Fuente: https://convertsquad.com/blog/
- Diseña tu logotipo
Fuente
- Preparar activos físicos (embalaje de productos, etc).
Fuente
La mayoría de los elementos anteriores se pueden utilizar para crear un panel de inspiración. Cuando reúna sus fuentes, gráficos y colores en un panel de estado de ánimo, podrá comprender mejor la visión general del estado de ánimo del sitio web. ¿Cuál será su tono y voz general: claro u oscuro? ¿Formal o divertido? 
Fuente
5. Estructura alámbrica 
Fuente
Los wireframes son bocetos de una página web o aplicación. Puede dibujarlos a mano, crearlos en Google Docs, Sketch o Figma , según la complejidad de su sitio web. Una estructura alámbrica se utiliza para diseñar el contenido y la funcionalidad en una página. Debe decirle a un diseñador dónde debe colocar un video, imágenes, titulares, bloques de contenido, botones, etc. Es bueno usar wireframes antes de lanzarse al diseño porque le permiten ser más flexible. Es más fácil modificar la estructura de un wireframe que la de un sitio web ya diseñado.
6. Diseño del sitio web 
Fuente
¡Ahora estamos hablando de negocios!
Tenemos nuestro contenido, wireframes, elementos visuales, ahora es el momento de ponerse a trabajar.
Como se menciona en el título, no es necesario ser un diseñador web o un experto en programación para crear un sitio web. Existen muchas herramientas para ayudarlo a diseñar un sitio web sin código. Se llaman constructores de páginas.
La mayoría de ellos le permiten personalizar cada centímetro de su diseño y hacerlo receptivo.
Dentro de WordPress, puede optar por nuestro propio constructor Colibri, o Elementor, por ejemplo. Fuera de WordPress, Wix y Squarespace son muy populares. Estas herramientas pueden proporcionarle plantillas que puede enriquecer agregando sus propias secciones, elementos visuales y contenido.
Ahora, si su diseño requiere ciertas animaciones, efectos, es posible que deba agregar algo de código.
7. Pruebas
Ok, digamos que su contenido y elementos visuales están listos. Tu trabajo aún no está listo. Es hora de asegurarse de que todo funcione: no tiene enlaces que no lleven a ninguna parte (también conocidos como enlaces rotos o 404), que todos sus botones y formularios funcionen, que el sitio web se vea bien en la mayoría de los navegadores y dispositivos.
Ahora, antes del lanzamiento, podrías probar un poco cómo es percibido tu sitio web por personas externas. De esta manera, puede evitar quedar atrapado en sus propios prejuicios. Para ello, podrías hacer un simple user research: el test de los 5 segundos . Este es un método que lo ayuda a medir cuál es la primera impresión que obtienen los usuarios dentro de los primeros cinco segundos de ver una página de inicio, por ejemplo.
8. Lanzamiento
Ahora, cuando inicias, solo presionas publicar y listo. ¡No, necesita crear algo de entusiasmo, lanzar algunas campañas de relaciones públicas, hacer un grito en las redes sociales para que la gente sepa que está fuera!
Y eso es un resumen amigos. Ahora tiene los pasos correctos para un proceso de diseño web.
¡Feliz creación de sitios web!
Si te gustó este artículo y quieres aprender más sobre cómo diseñar un sitio web de WordPress , ¡asegúrate de suscribirte al canal de Youtube de Colibri y síguenos en Twitter y Facebook!