Los 8 mandamientos de un proceso de diseño web (para principiantes y sin codificación)

Descubra cómo puede crear un sitio web exitoso siguiendo un proceso estructurado de diseño del sitio web. Nuestra hipótesis es que ya ha encontrado un nombre de dominio y un proveedor de anfitriones. Si aún no ha elegido su host, realmente recomendamos a nuestro socio de Cloudways. El siguiente ejemplo se presenta para los pasos si crea un sitio web para usted. Si el sitio web es para un cliente, pueden ocurrir nuevos pasos en términos de planificación de proyectos, establecer plazos, contratos y más. Pero, en esencia, deberá respetar los pasos presentados a continuación.
Ahora aquí están los pasos:
Identificación del alcance: ¿Qué necesidades debe cumplir el sitio? ¿Con quién está hablando el sitio? ¿Cuáles son sus metas y razones? ¿Qué negocio tiene el mismo alcance y objetivo público que tú?
Definición del mapa del sitio del sitio: ¿Cuáles son las páginas web y las características que ayudan al negocio y al público a alcanzar sus objetivos?
Creación de contenido: preparación de copia para páginas del sitio;
Creación de la marca visual: preparar la paleta de colores, las fuentes y los gráficos que se utilizarán en el diseño de su sitio, que terminará modelando su identidad visual;
Wireframing: dibujando la apariencia de páginas web;
Diseño del sitio web: creando el sitio web en sí, tenga en cuenta las limitaciones que utiliza;
Prueba: asegúrese de que todo funcione, desde enlaces hasta formularios y botones. Pruebe el sitio en varios navegadores y dispositivos para asegurarse de que funcione correctamente;
Lanzamiento: Haga un poco de ruido antes de ingresar directamente con una estrategia de comunicación cuidadosamente planificada.
Vamos a tomarlos uno por uno.
Las etapas de un proceso de diseño de un sitio web 1. Identifique el alcance en esta etapa, usted y su equipo deberán descubrir las respuestas a algunas de las preguntas a continuación: ¿Para quién es el sitio?
Un sitio atractivo podría tener sus ventajas, pero si desea que los visitantes de su sitio contraten su dinero o tiempo, significa que tiene que cavar más tiempo, para convencerlos de que el compromiso vale la pena. Para ser convincente, deberá comprender su público objetivo, comprender sus necesidades, motivadores internos y externos. Esta excavación también significa que debe crear un producto que sea útil y resolver las necesidades de alguien.
Por ejemplo, suponga que tengo el pasatiempo de hacer arreglos de papel floral y quiero llevarlo más allá y convertirlo en un negocio. ¿Alguien hace flores de papel? ¿Dónde puedo encontrar a estas personas? Bueno, podría creer que los organizadores de la boda y las futuras novias pueden querer tal opción. Pero tengo que ir aún más lejos. ¿Todas las novias querrían mis flores de papel o simplemente un tipo de novia? Esto significa que tendrá que pasar por una investigación y verificar a sus competidores. ¿Hay otros comerciantes de flores de papel? Además, compites con las buenas flores viejas. ¿Cuál sería su valor agregado o su propuesta de valor única?
¿Qué esperarían encontrar los visitantes de su sitio en su sitio?
Volviendo a nuestro ejemplo, a sus visitantes probablemente les gustaría ver una variedad de productos, colores, información de transporte (puede necesitar atención adicional, porque las flores de papel son frágiles), etc. ¿Qué tal algunas menciones que el documento se recicla? Tal vez sus clientes sean muy conscientes de su impacto en el medio ambiente y se preocupan por tales detalles ¿Alguien puede alquilar flores? Ahora, ¿qué sucede si incluye algunos testimonios? Tal vez diseñó algunos arreglos florales de papel para las bodas de sus amigos. ¿Ves dónde? Debe investigar antes de saltar al diseño del sitio web.
¿Cómo se ven las conversiones?
Estamos hablando de registro en el curso, la compra de un producto, la suscripción a un boletín? En el caso del lunes, puede encontrar fácilmente sus conversiones en la página inicial.
La conversión principal es obvia a partir de la acción de acción “inicio”, que se coloca justo encima del pliegue, en el centro. Otra microconversión es un registro en la conferencia, que puede ver desde el mensaje en la esquina superior izquierda. Otra microconversión es la “ventas de contacto”. Pero es su sitio, ¿hay una conversión principal? Son algunos secundarios?
¿Cómo se ve el viaje del cliente?

Un mapa de viajes al cliente es una representación visual de la carretera que un visitante atraviesa su sitio web en la entrada, hasta que alcance el objetivo deseado y me voy. 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 el visitante del sitio web alcance sus objetivos, los puntos de interacción entre su empresa y los visitantes del sitio (formularios, chat, etc.), Puntos de fricción potenciales. El viaje del cliente no es arreglado. Comience con una suposición, luego se adapte en el camino. Puede usar herramientas como Google Analytics para analizar el comportamiento del sitio web y hacer optimizaciones basadas en información real. Definición del mapa del sitio del sitio
Fuente ahora que el viaje del cliente es claro, es hora de crear el mapa del sitio. El mapa del sitio web se utiliza para establecer la arquitectura de información del sitio web y explicar las relaciones entre las diferentes páginas. Puede crear sitios sitios en instrumentos, desde Excel hasta Figma. 3. Crear contenido
Ahora que la estructura del sitio web está establecida, es hora de crear contenido para páginas individuales. Estas son algunas de las mejores prácticas cuando se trata de redacción:
Use palabras y conceptos familiares para sus usuarios ideales;

No va con pelusa y jerga;

Trate de comunicarse como lo haría en una reunión normal cara a cara. De esta manera inducirás una sensación de familiaridad;
Escribe en la actualidad y evita la voz pasiva;
Siempre verifique su legibilidad para esto, puede usar herramientas como legibles.
Pon a prueba tus títulos con amigos, extraños, colegas. Como dice David Ogilvy:
“En promedio, 5 veces más personas leen el título de lo que leen el cuerpo. Cuando escribiste tu título, gastaste ochenta centavos de tu dólar “.
Esto significa que los títulos 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 (pagado).
Use el marco de redacción de AIDA.
A – Precaución: cree contenido que atraiga la atención, estimule la curiosidad y convencerá a su público de que debe saber más sobre su marca.
I-Interest: Dé a los visitantes una razón para mantenerse involucrados. La clave aquí es hacer el problema personal, para que solo hables con el prospecto y nadie más.
D – Deseo: Aquí muestra a los visitantes a la página inicial cómo sus ofertas ofrecen una solución a su problema. Aquí puede comenzar a explicar las características de su producto, con énfasis en cómo estas características pueden mejorar su vida. A-Action: Ahora es el momento de convencer a los potenciales de actuar: comprar, suscribirse, descargar un obsequio, comenzar un intento, etc. 4. Creación de la marca visual Este paso no siempre tiene que ser el cuarto paso. Puede comenzar incluso antes en el proceso con él. La identidad visual se refiere a cómo modela la percepción en torno a su marca.
Este es un proceso completo en sí mismo. Aquí tendrás que:

Defina cómo se vean sus gráficos que usará formularios, gráficos 3D, ilustraciones?
Fuente
Defina la tipografía de su sitio;
Fuente

Elija una paleta de colores. Desde la paleta de colores, puede evolucionar a una guía de estilo, donde puede determinar los colores de los enlaces, títulos, botones, fondos, etc. Para esto, puede usar herramientas como la rueda de color de Adobe.
Cree imágenes que cuenten la historia de su marca;

Fuente: https://convertsquad.com/blog/
Diseña tu logotipo

Fuente
Prepare activos físicos (envasado de productos, etc.).

Fuente La mayoría de los elementos anteriores se pueden usar para crear un tablero de humor. Cuando apriete las fuentes, los gráficos, los colores en una placa de humor, podrá comprender mejor la visión general del estado de ánimo del sitio. ¿Cuál será su tono y voz general: abierto u oscuro? Formal o juguetón?
Fuente 5. alambre de alambre

La fuente de estructuras alámbricas son bocetos de una página web o aplicación. Puede dibujarlos manualmente, crearlos en Google Docs, Sketch o Figma, dependiendo de la complejidad de su sitio. Se utiliza una estructura de alambre para pedir el contenido y la funcionalidad de una página. Debe decirle a un diseñador dónde debe colocar un video, imágenes, valores, bloques de contenido, botones, etc. Es bueno usar estructuras alámbricas antes de saltar en el diseño porque le permiten ser más flexible. Es más fácil cambiar la estructura de una estructura alámbrica que la de un sitio web listo para diseñar. 6. Diseño del sitio
¡Fuente ahora estamos hablando de negocios!

Tenemos nuestro contenido, estructuras alámbricas, elementos visuales, ahora es el momento de ir a trabajar. Como se menciona en el título, no tiene que ser un diseñador web o experto en código para crear un sitio web. Hay muchas herramientas que lo ayudan a diseñar un código sin código. Se llaman Page Builders. La mayoría de ellos le permiten personalizar cada centímetro en su diseño y hacerlo receptivo. En WordPress, puede ir con nuestro propio constructor Colibri, o elemental, por ejemplo. Fuera de WordPress, Wix y Squarespace son muy populares. Estas herramientas pueden brindarle plantillas, que puede enriquecer agregando sus propias secciones, imágenes y contenido. Ahora, si su diseño requiere ciertas animaciones, efectos, es posible que deba agregar algún código. 7. OK PRUEBA, suponga que el contenido y los elementos visuales están disponibles. Tu trabajo aún no está listo. Es hora de asegurarse de que todo funcione: no tiene un enlace que conduzca a ninguna parte (también conocido como enlaces rotos o 404), que todos los botones y formularios funcionen, que el sitio web se ve bien en la mayoría de los navegadores y dispositivos. Ahora, antes del lanzamiento, podría probar la forma en que su sitio es percibido por personas externas. De esta manera, puedes evitar ser atrapado en tu propio sesgo. Para esto, puede hacer una investigación simple de usuario: