CLASE 3
TEMA:
PROYECTO DE DISEÑO Y DESARROLLO WEB
(1)
Decide para qué servirá y que se quiere lograr con el sitio web.
Antes de tomar decisiones sobre el diseño del sitio web, es importante centrarse en el propósito del diseño. Piensa quiénes visitarán el sitio, ya que esto ayudará a tomar decisiones más adelante.
Algunos sitios web comunes son:
- Sitio web de comercio electrónico
- Sitio web del evento
- Sitio web de la organización sin fines de lucro
- Sitio web de viajes
- Sitio web de negocios
- Sitio web de noticias
Define el público objetivo y que necesitan del sitio web.
Además del propósito del sitio web, el público objetivo determinará el diseño de las páginas web.
Comprender a tu audiencia facilita identificar sus problemas y principales preocupaciones, aspectos que puedes abordar en el sitio web. Adaptar tu contenido a las necesidades de tus clientes te permite construir relaciones sólidas, lo que aumenta la retención, la recomendación y la fidelidad.
Elige una plataforma web para crear tu sitio.
Los creadores de sitios web y los sistemas de gestión de contenido (CMS) son herramientas que te ayudan a diseñar, publicar y personalizar tu sitio web. Usar un creador de sitios web o un CMS agiliza el desarrollo, gracias a las soluciones y plantillas prediseñadas que optimizan los procesos.
Elegir la plataforma o el CMS adecuado es un paso fundamental en el diseño web. Debes evaluar cada plataforma en función de factores como la facilidad de uso, las opciones de personalización, la escalabilidad y las plantillas disponibles.
https://www.arsys.es/blog/cms-que-es-y-para-que-sirve
Características a tener en cuenta al elegir una plataforma para crear sitios web.
Al seleccionar una plataforma para crear tu sitio web, busca:
- Creación rápida de sitios web
- Facilidad de uso tanto en dispositivos móviles como de escritorio, y páginas que cargan rápidamente.
- Un sistema de gestión de contenidos que permite crear un entorno compartido común.
- Información sobre el contenido de tu plataforma
- Flujos de trabajo del proyecto
- Un creador de sitios web o CMS que se ajuste a tu presupuesto.
- Versatilidad
Plataformas para crear sitios web a tener en cuenta.
Aquí están las ventajas y desventajas de algunas de las plataformas líderes:
- WordPress. Una de las plataformas más populares para diseñar sitios web debido a su flexibilidad. Es fácil de usar si se utilizan los elementos básicos, pero las funciones más complejas pueden requerir la ayuda de un desarrollador.
- Wix. Conocido por ser intuitivo y fácil de usar, con una biblioteca de plantillas, funciones SEO integradas y opciones de soporte útiles.
- Squarespace. Una de las plataformas favoritas entre los profesionales creativos, Squarespace es conocida por sus plantillas de alta calidad y galardonadas.
- Adobe Creative Cloud. Creative Cloud ofrece un creador de sitios web gratuito, Adobe Express , que permite crear una página web de forma rápida y sencilla. Descubre cómo Deloitte utilizó Adobe Creative Cloud para generar un gran impacto con su contenido.
- Shopify. Para quienes gestionan una tienda online, Shopify les ayuda a crear un sitio web de comercio electrónico con amplias funciones de venta que les permiten acceder a diferentes canales y gestionar el inventario.
- Adobe Commerce. Centrado también en la experiencia de compra online, Adobe Commerce utiliza inteligencia artificial (IA) e integraciones con otros productos de Adobe para ayudarte a crear experiencias de cliente altamente personalizadas. Su interfaz intuitiva de arrastrar y soltar facilita la gestión de múltiples canales, marcas y ubicaciones geográficas.
Planifica la estructura y el diseño de tu sitio web.
Una estructura sólida es esencial para cualquier sitio web y garantiza que tanto los usuarios como los motores de búsqueda puedan navegar por él eficazmente. La navegación web, o la capacidad de encontrar la página correcta, es una parte importante de la experiencia del usuario y evita que los visitantes se frustren al explorar el sitio.
Diseño de una sola página.
El diseño de página única es exactamente lo que su nombre indica. En lugar de tener varias páginas en un sitio web, este diseño coloca todo en una sola página desplazable. Este formato funciona mejor cuando los sitios web no tienen demasiada información que compartir.
Estructura de varias páginas.
Los sitios web de varias páginas son el tipo más común en internet. Suelen tener una página de inicio, con enlaces a otras páginas distribuidas por todo el sitio. Esta estructura de varias páginas es útil para sitios que contienen mucha información y que pretenden tener múltiples propósitos.
Diseño basado en cuadrícula.
Una cuadrícula bien organizada permite a los usuarios explorar fácilmente el contenido de la página e interactuar con el sitio. También ayuda a mantener la coherencia en diferentes tamaños de pantalla.
Patrón F y patrón Z.
Los programas de seguimiento ocular han demostrado que las personas suelen explorar las páginas web describiendo un patrón en forma de F o Z. Los diseñadores de contenido a menudo intentan evitar este escaneo y, en cambio, animan a los lectores a interactuar con todo el texto.
El diseño de tu sitio web también dependerá de lo que mejor se ajuste a tu objetivo. Debes facilitar que los usuarios encuentren rápidamente la información más importante de la página. A continuación, te mostramos con más detalle cómo diseñarías los sitios que vimos anteriormente.
- Tiendas online. Una tienda online podría tener una página de inicio con productos que puedan interesar a los visitantes, como Amazon.com. O bien, podría usar una página que combine productos con contenido editorial, como Nike.com.
- Sitios web de portafolio. Los profesionales de áreas como la fotografía, el diseño gráfico y el marketing suelen crear sitios web de portafolio para mostrar su trabajo. El sitio web de portafolio de un fotógrafo podría ser simplemente una galería de imágenes, mientras que una agencia de marketing podría compartir estudios de caso con una combinación de texto e imágenes.
- Sitios web empresariales. Los sitios web empresariales deben estar organizados de forma que comuniquen claramente el valor que ofrece la empresa. También deben considerar cómo incentivar a los usuarios que visitan el sitio a realizar una compra o completar un formulario de contacto.
- Páginas de eventos. Las páginas de eventos deben comunicar claramente la información importante que la mayoría de la gente busca.
- Blogs. Los blogs deben estar organizados de forma que los usuarios puedan encontrar rápidamente el contenido más reciente o popular del sitio, al tiempo que se comunica a los nuevos lectores de qué trata el sitio.
Define los tipos de página y desarrolla wireframes para cada uno.
El siguiente paso en el diseño de tu sitio web es crear un mapa de las páginas que necesitas desarrollar. Este mapa puede ser una lista o una representación visual de las páginas con líneas que indiquen cómo se conectan entre sí.
https://miro.com/es/wireframe/que-es-wireframe/#estructura-de-la-p%C3%A1gina
Al elaborar un mapa de tu sitio web, te aseguras de incluir todas las páginas e información importantes. Este es un buen momento para revisar tus objetivos y aplicarlos a páginas específicas en tu mapa.
Comienza con una página de inicio con enlaces de navegación claros a otras páginas. También es importante crear una página de contacto con información sobre cómo pueden comunicarse contigo. Considera también una página de preguntas frecuentes o una página de error 404 creativa. Las páginas que incluyas dependerán de tu objetivo.
https://miro.com/es/plantillas/wireframing-sitios-web/
https://www.figma.com/resource-library/website-structure/
https://www.figma.com/es-la/wireframe-tool/
Páginas que casi todos los sitios web necesitan tener:
- Página de inicio. Tu página de inicio es probablemente la página más importante de tu sitio web. Incluye una llamada a la acción (CTA) destacada que anime a los usuarios a interactuar con tu sitio.
- Acerca de. La página "Acerca de" debe compartir la misión, la historia, los miembros del equipo y la propuesta de valor única de su empresa.
- Contacto. Esta página debe proporcionar a los visitantes la información que necesitan para ponerse en contacto con usted o con su equipo de atención al cliente.
- Página de producto. Una página de producto proporciona información detallada sobre un producto o servicio individual que se ofrece.
- Blog. La página de tu blog normalmente mostrará una lista o cuadrícula con los artículos más recientes publicados en tu sitio web.
- Preguntas frecuentes. En lugar de que tu equipo responda la misma pregunta varias veces, puedes publicar una página de preguntas frecuentes para responder a las dudas de tus clientes.
Crea y recopila el contenido de tu sitio web: texto, imágenes, gráficos.
Una vez que tengas los cimientos y la estructura de tu sitio web, puedes comenzar a agregar contenido.
Las primeras páginas que crees serán, por lo general, las que ya hemos mencionado, pero el contenido que necesites dependerá del propósito de tu sitio web. Tu contenido podría incluir imágenes, texto, logotipos, vídeos y mucho más.
Asegúrese de que cada página tenga un propósito claro.
Utilizando el mapa de tu sitio web, piensa en qué información buscan los clientes potenciales cuando lo visitan. Cada página debe tener un objetivo específico .
Escribe en un idioma sencillo y evita la jerga compleja.
El contenido atractivo es fundamental para el éxito de cualquier sitio web. Crea contenido original y cautivador que comunique tu mensaje con claridad. Tu contenido debe ser relevante, conciso y fácil de leer rápidamente.
Divide el contenido de la página con encabezados y viñetas.
El uso de encabezados, viñetas y otros estilos de formato puede dividir grandes cantidades de texto y hacer que su lectura sea mucho más fácil y rápida.
Edita el texto y las imágenes para que cumplan con las directrices de la marca.
Este también es un buen momento para utilizar las directrices de tu marca y asegurarte de que tu voz e imágenes sean coherentes con tu marca.
Utilice fotografías originales o imágenes de archivo de alta calidad.
Puede resultar tentador utilizar fotos de archivo en un sitio web nuevo —especialmente si no tienes imágenes propias—, pero esto reduce las probabilidades de que tu sitio atraiga a tu público.
Ejemplos de los tipos de contenido en diferentes sitios web.
- Tiendas online. Para los sitios de comercio electrónico, es importante brindar a los usuarios mucha información sobre los productos e imágenes de alta calidad, ya que no pueden ver ni tocar los productos en persona.
- Sitios web de portafolio. Un sitio web de portafolio probablemente presentará una combinación de medios visuales y contenido textual.
- Sitios web empresariales. Los sitios web empresariales utilizarán una variedad de tipos de contenido, como testimonios, información de productos o entradas de blog.
- Páginas de eventos. Los sitios web de eventos pueden compartir galerías de fotos de eventos pasados, gráficos promocionales o contenido de texto.
- Blogs. Tradicionalmente, los blogs eran una plataforma basada en texto, pero los blogs de hoy en día comparten contenido de fotos y vídeos, animaciones, infografías y mucho más.
Diseña los elementos estructurales y visuales de tu sitio web para la experiencia del usuario (UX).
Aunque cada sitio es diferente, aquí hay algunos elementos que debe considerar al crear una experiencia de usuario positiva en su sitio web:
- Arquitectura del sitio. Para facilitar la navegación, las páginas deben estar organizadas y enlazadas de forma intuitiva. Los visitantes deben poder encontrar rápidamente las páginas más importantes a través de la barra de navegación o mediante enlaces en el sitio.
- Menú de navegación. El menú de navegación debe incluir enlaces a las páginas más importantes del sitio, organizados de forma lógica. Se recomienda usar categorías o grupos para evitar que el menú se vea recargado. Además, debe ser adaptable a dispositivos móviles para que funcione correctamente en todos ellos.
- Colores. Puedes usar una rueda de colores para crear una paleta armoniosa para tu sitio web. Como regla general, debes limitar tu esquema de color a tres colores: un primario que uses el 60 % del tiempo, un secundario que uses el 30 % del tiempo y un terciario que uses el 10 % del tiempo.
- Tipografías. Al igual que con los colores, debes seleccionar tipografías que se ajusten a la identidad visual de tu marca. También debes priorizar las tipografías que sean legibles, incluso en pantallas pequeñas.
- Encabezado y pie de página. El encabezado debe ayudar a los usuarios a identificar claramente tu sitio web con tu logotipo y la navegación, donde encontrarán enlaces a las páginas importantes. El pie de página debe incluir información de contacto, enlaces a redes sociales y una llamada a la acción (CTA).
- Movimiento. Si bien los elementos en movimiento de tu página pueden ser atractivos y ayudar a que los usuarios permanezcan más tiempo en tu sitio, debes usar la animación con moderación. Un exceso de movimiento puede provocar tiempos de carga lentos o distraer a los usuarios del contenido importante.
Las decisiones de diseño visual que tomes en tu sitio web influyen significativamente en la impresión que los visitantes se llevan de tu marca. Una estética limpia y cuidada proyectará una imagen profesional y confiable, mientras que un aspecto desordenado e inconsistente podría ahuyentar a los usuarios.
Revisa la accesibilidad de tu sitio web y su contenido.
La accesibilidad de tu sitio web es importante. Independientemente de las necesidades de los visitantes, estos deben poder navegar por tu sitio cómodamente y completar las tareas. Existen varias medidas que puedes tomar para que tu sitio sea más accesible. Las exploramos a continuación.
Cómo las personas usan su sitio web.
Si bien la mayoría de los usuarios utilizarán un ratón para desplazarse por su sitio web y lo visualizarán con la configuración predeterminada, no todos lo harán. Debe tener en cuenta lo siguiente:
- Algunos visitantes utilizarán un teclado en lugar de un ratón para navegar por sus páginas.
- Algunos usuarios pueden cambiar la configuración del navegador para que el contenido sea más fácil de leer.
- Las personas con discapacidad visual pueden optar por usar un lector de pantalla para que les lea o les diga en voz alta el contenido.
- Otros pueden usar una lupa de pantalla para ampliar partes de su pantalla.
- Algunos pueden utilizar comandos de voz para navegar por un sitio web.
Estructura del contenido.
Para los visitantes que usan un lector de pantalla, la estructura de encabezados les ayuda a comprender su ubicación en la página y la relación entre los párrafos. El uso de encabezados HTML como H1, H2 y H3 puede ser de gran utilidad.
Usuarios que solo utilizan teclado.
Para quienes solo usan el teclado, es importante que puedan interactuar con el sitio. Ten en cuenta las interacciones promedio de un usuario típico y piensa en cómo puedes adaptarlo para que también funcione para quienes usan el teclado.
Imágenes y medios.
Un aspecto importante a considerar en materia de accesibilidad es el uso de texto alternativo para imágenes y contenido multimedia. El texto alternativo no suele mostrarse en un sitio web, pero puede ser leído por lectores de pantalla y se utiliza para describir el contenido de una imagen o contenido multimedia.
Color y contraste.
Al diseñar tu sitio web, considera el color de las fuentes y los fondos. Algunos colores combinan mejor que otros, sobre todo si los visitantes tienen discapacidad visual o daltonismo. El texto y los fondos deben contrastar para que el texto se vea con claridad en la página. Asimismo, no te bases únicamente en el color para transmitir información.
Contenido en movimiento.
El contenido en movimiento de tu sitio web, ya sean gifs, vídeos o animaciones, debe contar con funciones de reproducción, pausa y detención fáciles de controlar. Asimismo, si el contenido parpadea o destella, debe tener una función para desactivarlo.
Prueba y lanza tu sitio web.
Probar tu sitio web antes de su lanzamiento garantiza su funcionalidad, velocidad, seguridad y usabilidad. Es importante realizar pruebas exhaustivas periódicamente para evitar problemas que afecten la experiencia del usuario, como páginas o enlaces rotos.
Pruebas de funcionalidad.
Pocas cosas molestan más a los visitantes que los sitios web que no funcionan. Antes de su lanzamiento, compruebe que todo funcione correctamente, ya sean enlaces, menús de navegación, botones, menús desplegables o formularios.
Pruebas de adaptabilidad móvil.
La mayoría de las personas que acceden a internet lo hacen a través de sus teléfonos móviles , por lo que es importante que su sitio web esté adaptado tanto a los navegadores web tradicionales como a las diversas plataformas móviles.
Pruebas de velocidad y rendimiento del sitio.
La paciencia en internet es escasa , por lo que tu sitio web debe cargar en cuestión de segundos. Puedes comprobar la velocidad de carga de tu sitio con herramientas como Google PageSpeed Insights .
Pruebas A/B.
Las pruebas A/B son una forma útil de probar diferentes opciones y ver cuál funciona mejor para tu público. Puedes probar desde imágenes hasta el diseño.
Pruebas de usabilidad.
Las pruebas de usabilidad , o pruebas de usuario, consisten en monitorizar el uso de tu sitio web para identificar problemas o complicaciones. Suelen realizarse antes del lanzamiento oficial y son una excelente manera de comprobar que el sitio web funciona según lo previsto.
Supervisa el rendimiento del sitio utilizando herramientas de análisis y realiza iteraciones.
Una vez que tu sitio web esté en línea, podrás empezar a disfrutar de todas las ventajas, incluida la oportunidad de recopilar información sobre su rendimiento. Esta información es valiosa y la necesitarás para optimizar y mantener tu sitio web de forma continua.
Analiza el rendimiento de tu sitio web mediante analítica web.
La mayoría de las plataformas cuentan con herramientas de análisis integradas para medir el rendimiento de tus sitios web, y también tienes la opción de conectar tu sitio a Google Analytics para realizar un seguimiento de métricas específicas como las páginas vistas, el tiempo que los usuarios pasan en cada página, las tasas de conversión y las tasas de rebote.
Estos datos te ayudarán a comprender cómo los usuarios navegan por tu sitio web y qué páginas necesitan mejoras, incluyendo aquellas que podrían beneficiarse de una mejor optimización SEO. Cuanto más analices tus analíticas, más aprenderás sobre tu audiencia y qué les resulta efectivo.
Actualiza y supervisa tu sitio web mediante el mantenimiento del sitio.
El mantenimiento es fundamental para el diseño de un sitio web. Los enlaces y las palabras clave cambian con el tiempo, al igual que las tendencias de diseño, por lo que no basta con crear un sitio web una sola vez y dejarlo funcionando sin un mantenimiento regular. Revisar los enlaces y las imágenes, actualizar las palabras clave, supervisar la velocidad de carga del sitio y añadir o eliminar contenido periódicamente mantendrá su sitio actualizado y relevante.
Las prácticas de análisis y mantenimiento son herramientas poderosas que permiten no solo solucionar problemas, sino también mejorar y escalar su sitio web según la demanda. Mantenerse al tanto del rendimiento de su sitio web le ayudará a estar en sintonía con su audiencia y le permitirá tomar decisiones comerciales inteligentes y ágiles en el momento oportuno.
Empezando.
Ahora que cuentas con los conocimientos y la orientación de este artículo, es hora de comenzar tu aventura en el diseño de tu sitio web. Inspírate en sitios web exitosos , pero deja que tu creatividad brille.
Adobe Experience Manager te ayuda a crear y gestionar tus propios sitios web para que puedas mantener a tu audiencia interesada con experiencias web personalizadas. Crea experiencias para múltiples canales, personaliza plantillas y actualiza el contenido, todo desde una única plataforma.
=====================================================================
=====================================================================
No hay comentarios:
Publicar un comentario