Cómo hacer una buena página de contacto

El tener una página de contacto efectiva es crucial para que los usuarios que visitan tu web puedan comunicarse contigo de manera fácil y rápida. 

En este nuevo artículo, te mostramos algunos consejos para crear una buena página de contacto.

Introducción a los beneficios de tener una página de contacto

El principal beneficio de tener una página de contacto es que permite a los visitantes de tu web comunicarse contigo de manera rápida y sencilla. Podrán hacer consultas, solicitar información o incluso compartir comentarios o sugerencias de mejora. 

Esto establecerá una comunicación directa entre tus clientes y tú, también que podrás demostrar que te preocupas por ellos y que estás dispuesto a proporcionarles asistencia cuando la necesiten.

Por otro lado, también es una buena herramienta para generar leads, es decir, los visitantes interesados en tus productos o servicios pueden usar el formulario de contacto para mostrar su interés y solicitar más información. Esto te brinda la oportunidad de capturar leads de calidad y de establecer relaciones comerciales potenciales.

Qué información es necesaria para crear una página de contacto efectiva

Para crear una página de contacto efectiva, es importante tener en cuenta los siguientes puntos: 

  • Incluye un formulario de contacto donde los visitantes puedan enviar mensajes directamente desde la página web. Dicho formulario debería incluir ciertos campos esenciales como nombre, dirección de correo electrónico y un campo de mensaje donde puedan escribir sus consultas o comentarios.
  • Proporciona una dirección de correo electrónico donde los usuarios puedan enviarte correos directamente desde sus propias cuentas. Asegúrate también de que la dirección de correo esté en un formato legible, es decir, que sea fácil de copiar y de usar como por ejemplo: nombre@tudominio.com.
  • Añade un número de teléfono si deseas que los usuarios se comuniquen contigo por ese medio. 
  • Si tienes una dirección fiscal como una oficina o una tienda, también es buena opción añadirla si quieres que los clientes te visiten o si tus servicios requieren interacción en persona.
  • Asegúrate de añadir el horario de atención al cliente si tienes horas específicas en las que atiendes a tus clientes o respondes a sus consultas. Esto evita confusiones y ayuda a los usuarios a saber cuándo pueden esperar una respuesta.
  • Añade enlaces a tus redes sociales si tienes un perfil asociado a tu negocio. Esto ayudará a que tus clientes empiecen a seguirte en las redes sociales y a mantenerse informado sobre las últimas noticias y actualizaciones.
  • Considera incluir un enlace a tu política de privacidad en la página para demostrar tu compromiso con la protección de los datos personales de los usuarios y así generar confianza en tu negocio.

Cómo optimizar la página para mejorar el SEO

Si optimizas tu página de contacto para mejorar el SEO ayudarás a que sea más visible en los motores de búsqueda (por ejemplo: Google) y será más probable que los usuarios la encuentren. Para ello os mostramos algunos puntos a tener en cuenta:

  • Investiga cuáles son las palabras clave relevantes para tu negocio e intenta incluirlas en tu página de contacto de manera natural para que los motores de búsqueda puedan comprender el propósito y la relevancia de tu página
  • Utiliza un título claro, descriptivo y atractivo en tu página de contacto.
  • Usa URL amigables, es decir, haz que por ejemplo en vez de que sea “www.ejemplo.com/contacto123/” usa algo como: “www.ejemplo.com/contacto/
  • Incluye algún enlace interno en tu página para ayudar a los motores de búsqueda a indexar y a navegar por tu sitio web.
  • Optimiza las imágenes reduciendo su peso para mejorar la carga de la página y añade un texto alternativo (atributo alt).
  • Añade etiquetas meta en la página como meta descripción, meta título y palabras clave.
  • Haz que el contenido que hay en la página sea de calidad proporcionando información útil, describiendo brevemente los servicios que ofreces y cómo se puedes beneficiar los que visitan tu web. Esto ayudará a los motores de búsqueda a comprender el contenido de la página.

Recuerda que es importante ofrecer una experiencia de usuario sólida y un acceso fácil a la información de contacto en tu página. La combinación de una buena optimización SEO y una usabilidad adecuada te ayudará a obtener mejores resultados en lo referente a términos de visibilidad y tráfico.

Ejemplos de buenas prácticas al diseñar la página de contacto

Utiliza un diseño limpio y claro que sea coherente con el resto de tu web. Evita el desorden y asegúrate que la información esté de forma ordenada y sea fácil de leer, puedes usar espacios en blanco en ciertas secciones de las páginas para mejorar la legibilidad y la estética general.

cómo hacer una buena página de contacto

En la siguiente imagen, podemos ver un ejemplo de página de contacto en la cual hay un formulario para que los usuarios puedan escribir sus dudas y han incorporado un mapa interactivo en donde se muestra la ubicación de la empresa. Esto ayudará a los visitantes a ubicarte fácilmente.

Buena página de contacto

También es muy útil añadir enlaces a tus perfiles de las redes sociales, esto permitirá que los usuarios te sigan y se mantengan actualizados con las últimas noticias.

Cómo configurar herramientas como formularios web, chats en vivo y correos electrónicos para facilitar la conexión con los usuarios

Existen varias herramientas para la creación de formularios web, las más populares son Google Forms, Typeform o JotForm. Si tu página web está hecha con WordPress también existen algunos plugins como por ejemplo Contact Form 7, WPForms o Ninja Forms. Una vez tengas elegida tu herramienta para crear formularios, lo siguiente será identificar qué campos son necesarios, es decir, piensa qué información necesitas recopilar de los usuarios y crea los campos en función de eso. No te olvides de configurar las notificaciones y hacer que te llegue un mensaje con los datos que hayan introducido en el formulario a tu correo electrónico para poder responder rápidamente.

Por otro lado, también puedes incluir chats en vivo en tu página para tener una comunicación mucha más directa y rápida con los usuarios. Algunas plataformas para implementar esta herramienta son: Intercom, Zendesk Chat o LiveChat. Podrás configurar un mensaje de bienvenida amigable para saludar a los visitantes que inicien el chat, establecer horarios de atención al cliente y asegúrate de que los agentes que respondan a dichos mensajes estén bien capacitados y preparados para ofrecer asistencia rápida y útil.

Por último, recuerda proporcionar una dirección de correo electrónico que sea clara, fácil de recordar y que esté relacionada con tu empresa o marca. También puedes configurar respuestas automáticas de confirmación para que los usuarios sepan que su mensaje ha sido recibido y que recibirán una respuesta pronto.

Desde Inicionet te ayudamos

En Inicionet podemos ayudarte y guiarte durante todo el proceso de creación de la página de contacto así como en la implementación y configuración de algunas de las herramientas mencionadas anteriormente.

¿Quieres tener una web que represente a tu marca? Ponte en contacto con nosotros y te ayudaremos.

Cómo montar una tienda online desde cero: pasos para abrir una tienda online

Montar una tienda online se ha convertido en una excelente opción para emprendedores y empresarios que desean aprovechar el potencial del comercio electrónico. Con el crecimiento constante de las compras online, es fundamental tener una presencia digital sólida. 

En este artículo, te presentaremos una guía paso a paso para montar tu propia tienda online y aprovechar al máximo esta oportunidad de negocio.

Comprender tus objetivos comerciales y definir tu cliente objetivo

Lo primero que tienes que hacer antes de lanzarte a montar una tienda online es tener claridad sobre tus objetivos comerciales. Para ello, te presentamos algunos pasos para comprender tus objetivos comerciales:

  1. Definir tu propósito: Comienza por preguntarte cuál es el propósito de tu tienda online con las siguientes preguntas: ¿Quieres vender productos, ofrecer servicios o ambas cosas? ¿Cuál es el valor único que proporcionarás a tus clientes?
  2. Establecer metas específicas: Una vez que hayas definido tu propósito, establece metas claras y alcanzables. Por ejemplo, podrías fijar metas de ventas mensuales, aumentar el tráfico del sitio web o expandir tu alcance en las redes sociales. Estas metas te proporcionarán una visión clara de lo que deseas lograr.
  3. Conocer a tu competencia: Investiga y analiza a tus competidores directos e indirectos en el mercado en el que planeas incursionar. Observa cómo se posicionan, qué estrategias de marketing utilizan y qué tipo de clientes están atrayendo. Esto te ayudará a diferenciarte y a identificar oportunidades únicas para tu negocio.

Una vez que hayas establecido tus objetivos comerciales, es hora de definir tu cliente objetivo. Esto implica comprender quiénes son tus clientes ideales y cómo puedes satisfacer sus necesidades. Aquí hay algunos pasos para definir tu cliente objetivo de manera efectiva:

  1. Realizar investigaciones de mercado: Investiga a fondo tu mercado objetivo para comprender mejor a tus clientes potenciales. Examina sus características demográficas, intereses, comportamientos de compra y necesidades específicas. Puedes utilizar encuestas en línea, entrevistas o estudios de mercado existentes para obtener información valiosa.
  2. Crear perfiles de cliente: Con la información recopilada, crea perfiles detallados de tus clientes ideales. Estos perfiles deben incluir detalles como edad, género, ubicación geográfica, ocupación, ingresos y preferencias de compra. Cuanto más específico sea tu perfil de cliente, más fácil será orientar tus estrategias de marketing.
  3. Identificar problemas y soluciones: Una vez que tengas una comprensión clara de tus clientes objetivo, identifica los problemas o desafíos que enfrentan y cómo tu tienda online puede ofrecer soluciones efectivas. Esto te ayudará a crear mensajes de marketing persuasivos y a desarrollar productos o servicios que satisfagan sus necesidades.
  4. Probar y ajustar: A medida que comiences a operar tu tienda online, recopila datos y realiza un seguimiento de las métricas clave, como las tasas de conversión y el tráfico del sitio web. Utiliza estos datos para evaluar y ajustar continuamente tu estrategia. A veces, es posible que necesites realizar cambios en tus perfiles de cliente objetivo basándote en la retroalimentación y los resultados obtenidos.

Escoger una plataforma de comercio electrónico para montar tu tienda online

El siguiente paso sería elegir un CMS para montar tu tienda online. Para ello, es importante considerar varios factores clave:

  • Facilidad de uso: Busca una plataforma que sea intuitiva y fácil de usar, especialmente si no tienes experiencia previa en el comercio electrónico. Debe ser fácil configurar productos, administrar inventario y procesar pedidos sin complicaciones.
  • Flexibilidad y escalabilidad: Asegúrate de que la plataforma sea lo suficientemente flexible para adaptarse a las necesidades de tu negocio a medida que crece. Debe permitirte agregar nuevas funcionalidades, integrar aplicaciones y personalizar el aspecto y la experiencia de tu tienda.
  • Diseño y apariencia: Elige una plataforma que ofrezca una amplia variedad de plantillas y opciones de diseño para crear una tienda online visualmente atractiva y coherente con la identidad de tu marca. También es importante que sea compatible con el diseño responsivo para que tu tienda se adapte a diferentes dispositivos y tamaños de pantalla.
  • Funcionalidades y características: Considera las funcionalidades esenciales que necesitarás en tu tienda online, como el procesamiento de pagos, opciones de envío, administración de inventario, gestión de clientes y herramientas de marketing. Asegúrate de que la plataforma ofrezca estas características y evalúa si se ajustan a tus necesidades específicas.
  • Integraciones y aplicaciones: Verifica qué integraciones y aplicaciones están disponibles en la plataforma. Esto incluye opciones de integración con pasarelas de pago, sistemas de envío, herramientas de marketing y analítica. Una amplia gama de integraciones te brindará flexibilidad y opciones adicionales para mejorar la funcionalidad de tu tienda.
  • Seguridad: La seguridad es fundamental en el comercio electrónico. Asegúrate de que la plataforma tenga medidas de seguridad sólidas, como certificados SSL, opciones de protección contra fraudes y copias de seguridad automáticas. Esto garantizará la protección de los datos de tus clientes y la integridad de tu negocio.
  • Soporte y atención al cliente: Evalúa el nivel de soporte y atención al cliente que ofrece la plataforma. Es importante contar con un equipo de soporte receptivo que pueda ayudarte en caso de problemas técnicos o preguntas relacionadas con la plataforma.
  • Coste: Considera el coste total de la plataforma, incluyendo tarifas mensuales, tarifas de transacción y cualquier costo adicional asociado. Compara los precios entre diferentes plataformas y equilibra el coste con las características y funcionalidades que ofrece.

Diseñar el aspecto de tu sitio web para atraer a los clientes a tu negocio online

El aspecto de tu sitio web es el factor más importante para atraer a los clientes y crear una experiencia visualmente atractiva. Algunos aspectos a tener en cuenta son:

  • Usa un diseño limpio y minimalista que sea fácil de navegar y que resalte tus productos o servicios. Utiliza colores coherentes con tu marca y asegúrate de que haya un equilibrio visual en todo el sitio así como suficiente espacio en blanco entre los diferentes elementos.
  • Las imágenes son una parte esencial de cualquier tienda online. Por eso,  asegúrate de utilizar fotografías de alta calidad, que sean claras, nítidas y representativas de los productos que estás vendiendo. También puedes incluir imágenes de tus clientes utilizando tus productos para dar una idea de cómo se ven en la vida real.
  • Crea una navegación intuitiva que sea fácil de entender y de usar organizando las categorías de los productos de manera clara y añadiendo un menú de navegación en la parte superior de la página que sea visible. Otra forma de guiar a los usuarios a través de tu sitio web para que encuentren lo que están buscando es utilizar etiquetas descriptivas y botones llamativos.
  • Asegúrate de que tu diseño web se adapte automáticamente a los diferentes tamaños de pantalla y dispositivos. Esto permitirá que tus clientes puedan navegar y comprar fácilmente desde sus móviles o tablets.
  • Incluye secciones o elementos en tu web de testimonios y reseñas de clientes satisfechos con su compra para así mostrar confianza y que los posibles clientes tengan una idea de la calidad de tus productos o servicios que ofreces.

Establecer un sistema de pago seguro y fiable para procesar las transacciones y empezar a vender online

La seguridad de los pagos es fundamental para la confianza de tus clientes y para el éxito de tu tienda online.

Lo primero que tienes que hacer es seleccionar una pasarela de pago segura, confiable, que se integre bien con tu plataforma de comercio electrónico y que cumpla con los requisitos de seguridad y encriptación necesarios. Las más populares son PayPal, Stripe o Redsys.

Lo siguiente será obtener un certificado SSL (Secure Sockets Layer) para tu web. Esto hará que se establezca una conexión segura entre tu servidor y el navegador del cliente para proteger los datos confidenciales durante el proceso de pago. Para saber si está instalado el certificado SSL en tu web, lo podrás comprobar en la barra de direcciones del navegador donde aparecerá un candado y la URL de la web empezará con “https://”.

Por último, otro aspecto a tener en cuenta es brindar transparencia a tus clientes sobre cómo se manejan sus datos personales creando páginas en tu sitio web sobre política de privacidad y términos y condiciones de compra. Esto también te ayudará a establecer confianza con tus clientes.

Poner en marcha estrategias de promoción para generar tráfico y aumentar las ventas

Cuando se crea una tienda online es fundamental implementar estrategias de promoción para generar tráfico y aumentar las ventas en tu web.

La estrategia más importante a tener en cuenta es mejorar el SEO de tu web, es decir, optimizarla para los motores de búsqueda mediante el uso de palabras clave relevantes, metaetiquetas y descripciones precisas. Esto ayudará a que tu web aparezca en los resultados de búsqueda orgánica y atraer más tráfico de calidad a ella.

Además, también puedes crear y compartir contenido relacionado con tus productos o servicios escribiendo blogs, creando vídeos o incluso ofrecer guías gratuitas. Lo puedes compartir en tus redes sociales o en la propia web para generar interés en tus posibles clientes.

Igualmente, puedes usar las redes sociales para crear perfiles de negocio relevantes para tu audiencia, comparte contenido atractivo, interactúa con tus seguidores y añade enlaces a tu tienda para dirigir el tráfico hacia tus productos.

Del mismo modo, puedes considerar la opción de invertir en publicidad online para aumentar la visibilidad de tu tienda online. Puedes usar Google Ads para anuncios en el buscador de Google o Facebook Ads para publicitarte en redes sociales.

Una buena opción para aumentar las ventas en tu web es ofrecer a los clientes descuentos y promociones especiales de los productos o envío gratuito por tiempo limitado. También puedes crear una campaña de marketing por correo electrónico para informar a los usuarios suscritos sobre dichas ventajas o para informar de algún cambio.

Monitorear los resultados y mejorar la eficiencia de tu plataforma de ecommerce

No te olvides de monitorear los resultados de las estrategias creadas para saber si están funcionando como deberían, si son efectivas o si por el contrario no están dando los resultados deseados y poder modificarlas para que mejore.

Una herramienta muy útil que te ayudará a medir estos resultados es Google Analytics. En ella podrás recopilar datos sobre el tráfico, el comportamiento de los usuarios, las conversiones de tu tienda online así como el número de visitantes o el tiempo que permanecen en el sitio web.

Por último, asegúrate de tener una excelente atención al cliente en tu tienda online para responder rápidamente y de manera efectiva las consultas y preguntas de tus clientes ya sea mediante chat en vivo, correo electrónico o redes sociales. De este modo, generarás satisfacción y fidelidad en tus clientes.

¿Necesitas ayuda para montar una tienda online? ¡Contacta con Inicionet!

Montar una tienda online desde cero puede ser un desafío emocionante y gratificante a la vez que un poco complicado. Si siguiendo estos pasos sigues sin saber muy bien por donde empezar, no te preocupes porque en Inicionet te podremos ayudar y guiar en todo el proceso de creación de tu tienda online.

Recuerda que el éxito a largo plazo requerirá esfuerzo continuo, adaptación a las tendencias del mercado y una atención constante a las necesidades y expectativas de tus clientes.

¡Emprende con confianza y aprovecha las oportunidades que el comercio electrónico tiene para ofrecer!

Preguntas frecuentes sobre cómo crear una tienda online

¿Qué es una tienda online?

Una tienda online es un sitio web que permite a los compradores hacer compras en línea de forma segura y cómoda.

¿Por qué debería abrir una tienda online?

Una tienda online puede ampliar el alcance de su negocio, permitiendo llegar a más clientes en todo el mundo y ofreciendo más oportunidades para vender sus productos.

¿Cuáles son los pasos para crear una tienda en línea?

Algunos de los pasos básicos para configurar una tienda en línea son encontrar un nicho de mercado, seleccionar una plataforma de ecommerce, obtener un proveedor de productos, personalizar la tienda, configurar la logística y empezar a vender en línea.

¿Puedo tener una tienda online sin una tienda física?

¡Sí, definitivamente! Es posible operar una tienda en línea sin necesidad de una tienda física.

¿Qué plataformas de ecommerce existen?

Hay muchas plataformas de ecommerce disponibles que permiten crear y personalizar una tienda en línea, como Shopify, Prestashop o Woocommerce.

¿Qué es el dropshipping?

El dropshipping es un modelo de negocio donde el vendedor no tiene que mantener un inventario físico. En cambio, el vendedor realiza una venta y envía el pedido a un proveedor que envía directamente los productos al comprador.

¿Cómo posiciono mi tienda online en los motores de búsqueda?

La optimización de motores de búsqueda (SEO) es importante para asegurarse que los motores de búsqueda encuentren y posicionen bien su tienda en línea. Algunas estrategias comunes incluyen la investigación de palabras clave, la creación de contenido relevante y la construcción de enlaces.

Trucos sobre tipografías para diseñadores

, ,

Algunos diseñadores no tienen muy en cuenta la importancia de si las tipografías que está usando para una web combinan entre ellas y acaban por elegirlas al azar. Como resultado, el diseño final de la web puede no ser muy bueno y se perderá mucho tiempo para encontrar la combinación perfecta de tipografías.

Como diseñador, si no quieres que te pasen ese tipo de problemas, en este artículo hemos seleccionado una serie de trucos que te ayudarán a elegir la mejor combinación de tipografías para tus diseños.

Entender el lenguaje de las tipografías

Puede que no conozcas el 100% de todos los tipos de tipografías que hay pero esta guía te servirá de ayuda a la hora de elegir una.

  • Serif: es una fuente con pequeños trazos o extensiones al final de sus trazos más largos. Suelen utilizarse en libros, revistas y periódicos, ya que las fuentes Serif se consideran más fáciles de leer cuando son textos de varios párrafos. Algunos ejemplos son: Times New Roman, Bodoni o Garamond.
  • Sans Serif: esta fuente es, como su nombre indica, una fuente sin Serif. Es decir, no tienen adornos tras el trazo de la letra. Algunos ejemplos son: Helvetica, Franklin Gothic o Futiger.
  • Script: están diseñadas para capturar la floritura y el arte de la caligrafía tradicional, como si se escribiera con un bolígrafo, un pincel o un rotulador. Suelen ser decorativas y se usan para dar una impresión más que para escribir un texto.
  • Display: son fuentes creadas especialmente para los encabezamientos y que sólo quedan bien cuando se utilizan para textos más cortos en tamaño grande. Algunos ejemplos son: Walbaum o Helvetica Now.
  • Decorative: son fuentes con un aire más vintage o dibujado a mano que pueden utilizarse con fines ornamentales.

 

Usar estilos de fuentes que se complementen

Ahora que sabes cuáles son los distintos tipos de fuentes y su función podrás comprender mejor la forma de combinarlas entre sí para que se complementen. Por ejemplo, puedes usar tipos de letra llamativos o extravagantes para los títulos en los que se quiera captar la atención del lector y utilizar fuentes sencillas y limpias para los textos de los párrafos.

En cambio, si intentas combinar fuentes que compitan entre sí solamente por llamar la atención del lector, solo hará que se confunda y afectará negativamente al diseño. En lugar de eso puedes usar fuentes con Serif para el nombre de la marca y la Sans Serif para el eslogan. Además no es recomendable que se usen fuentes que están demasiado cerca ni tampoco demasiado alejadas entre sí ya que harás que el mensaje no se transmita correctamente.

No subestimar el poder de “Kerning”

El Kerning es el espacio que hay entre cada letra o carácter de un texto. Algunos tienen trazos más alargados y otros menos. En función de la letra, se le asigna un espacio específico para que resulte visualmente atractiva cuando se utiliza en palabras.

Como diseñador, tienes que comprender que el Kerning predeterminado puede que no se adapte a cada diseño, por lo tanto tienes que encontrar el espaciado correcto entre las letras. En el caso de combinar las fuentes puedes ajustarlas para que encajen entre sí. Por ejemplo, en los logotipos, puedes utilizar fuentes en negrita para el nombre de la empresa y para el eslogan, que suele ser más largo que el nombre, se puede utilizar el Kerning para que el estilo de la fuente parezca condensado y, al mismo tiempo, coincida con la anchura del logo.

Seguir la regla de las tres C

Otra de las reglas para combinar tipografías es la fórmula de las tres C y consiste en lo siguiente:

  • Concordancia: utiliza estilos de letra que pertenezcan a una gran familia. Estas grandes familias son fáciles de encontrar y te pueden facilitar el trabajo ya que los tipos de letras combinan perfectamente entre sí y muchas ofrecen versiones en Serif y Sans Serif. Como han sido diseñadas para apoyarse mutuamente quedarán genial en todos los diseños.
  • Contraste: utiliza fuentes que contrasten entre sí, por ejemplo si un tipo de letra es fuerte y atrevido haz que el otro sea más fino y limpio.
  • Conflicto: la clave es mantener una jerarquía de títulos y encabezados, utilizar fuentes que no estén muy lejos entre sí o usar texto coloreado. Puedes hacer que los títulos destaquen con colores llamativos y seguir con un estilo de fuente parecido pero con colores más débiles.

No utilizar fuentes que sean difíciles de leer

El tema de la legibilidad de la fuente debe ser lo primordial, no sirve de nada tener una fuente con un gran diseño si los clientes no pueden leer lo que la web intenta trasmitir.

No uses tipografías muy decorativas o detalladas en tamaños de fuente muy pequeños, en cambio sí que las podrías usar para encabezados o textos cortos. Añade mucho valor a la experiencia del usuario si un texto se puede leer con facilidad y de forma agradable. Otro aspecto a tener en cuenta es que compruebes que se lea perfectamente en los distintos dispositivos sobre todo en los móviles.

No usar más de tres tipografías en un mismo diseño

Otra sugerencia que te puede servir es el no utilizar más de tres fuentes en un mismo diseño. Lo ideal sería usar solo dos fuentes en el diseño aunque también se podría usar una tercera para mensajes adicionales. Si utilizas muchos tipos de letras diferentes acabarás confundiendo al lector y harás que tu diseño sea un poco torpe.

Biblioteca o directorios online de tipografías

Puede que después de todos estos consejos sigas sin encontrar la manera de emparejar bien las fuentes. En este caso, te vamos a mostrar algunas herramientas online que te pueden servir de ayuda:

  • Google Fonts: tiene una gran biblioteca de fuentes y podrá servirte de ayuda a la hora de encontrar la combinación perfecta para la fuente que selecciones.
  • Just My type: es otro directorio muy bueno donde podrás encontrar diferentes combinaciones de fuentes.
  • Typography.com: tiene muchas sugerencias de combinación de fuentes que te ayudarán a la hora de diseñar.

Algunas de estas páginas también ofrecen la posibilidad de descargar las combinaciones de fuentes que más te gusten y así facilitar el trabajo de los diseñadores.

Crear un portfolio de combinaciones de fuentes

Crea un portfolio de combinaciones de fuentes que hayas usado en otros proyectos o que más te gusten para optimizar tiempo a la hora de diseñar una nueva web. La idea sería tener preparadas unas 5 o 6 fuentes de cada tipo y estar familiarizado con ellas. Además, los puntos anteriores pueden servirte como una especie de guía para encontrar la mejor tipografía y combinación a la hora de diseñar.

Tendencias de Diseño Web para 2023

,

En este artículo os mostramos algunas de las tendencias más relevantes para este nuevo año sobre el diseño web aunque algunas de ellas ya se empezaron a usar desde hace unos años.

    1. Título o imágenes de gran tamaño
    2. Texto simple y directo
    3. Degradados coloridos
    4. Tipografías integradas
    5. Imágenes con mucho detalle
    6. Elementos 3D interactivos
    7. Priorización en dispositivos móviles
    8. Estilos retro
    9. Cursores animados
    10. Texturas de vidrio

1. Título o imágenes de gran tamaño

Esto se trata de tener títulos en negrita y muy grandes o mensajes abreviados para atraer la atención del cliente más rápido. También es posible combinarlo con otros elementos como la ilustración 3D como vemos en la imagen.

2. Texto simple y directo

Es un diseño minimalista y discreto pero será la tipografía que tú elijas la que sustentará todo el diseño de tu web. Por ello deberás de elegir una que diga algo de tu marca.

3. Degradados coloridos

Esta tendencia se empezó a usar en 2019 y a día de hoy se sigue utilizando para el diseño web. Con el efecto degradado conseguirás una apariencia moderna e innovadora.

4. Tipografías integradas

Para algunos diseñadores encontrar una tipografía que se ajuste al diseño de la web puede ser una tarea un poco complicada pero todo sitio web necesita texto e imágenes. Puedes colocar el texto usando formas y patrones geométricos, en capas sobre las imágenes para que quede integrado completamente en el diseño general.

5. Imágenes con mucho detalle

Otra de las tendencias para este año son las imágenes de gran tamaño donde se pueda apreciar hasta el más mínimo detalle. Esto hará que tu diseño sea más atractivo pero también hay que tener en cuenta que las imágenes no deben de ser muy pesadas para que no afecten a la velocidad de carga de tu web.

6. Elementos 3D interactivos

Esta tendencia no es del todo nueva pero sí que se seguirá usando para este 2023. Lo interesante es combinar elementos en 2D y en 3D ya que se complementan perfectamente dando brillantes contrastes.

7. Priorización en dispositivos móviles

Desde hace unos años, la navegación mediante los dispositivos móviles ha superado a la navegación a través de escritorio. Es por eso que los sitios web deben de estar optimizados para dispositivos móviles y que el diseño sea responsive, es decir que se adapte al tamaño de la pantalla, para mejorar la experiencia del usuario (UX).

8. Estilos retro

En los últimos años hemos visto como los estilos de la década de los 2000 han vuelto en diferentes ámbitos como la moda, la música, el arte o el diseño de interiores e incluso, como era de esperarse, se está extendiendo al mundo del diseño web. Algunos diseñadores lo realizan introduciendo tipografías retro, fuentes e imágenes pixeladas, cursores personalizados, etc. y así consiguen un aire de nostalgia.

9. Cursores animados

Otra forma de mejorar la experiencia de usuario cuando visitan una web es personalizar el cursor o añadirle una animación cuando se mueve. De esta manera los usuarios pueden divertirse mientras interactúan con los diferentes comportamientos de desplazamiento o comandos al hacer clic.

10. Texturas de vidrio

Hoy en día el uso de las texturas de vidrio es muy frecuente ya que las imágenes o formas de este estilo ayudan a acentuar la atención del usuario, crean un diseño gráfico moderno y combinan perfectamente con efectos en 3D. Algunos productos que usan este tipo de diseño son los de Windows 11 o iOs de Apple.

Mejores plantillas gratuitas y de pago para Woocommerce

Existe una gran variedad de temas para tiendas online con Woocommerce y es casi imposible elegir entre todos ellos. En este post os mostramos algunas plantillas gratuitas y otras de pago para añadirlas a vuestra web. Como sabéis, Woocommerce es un plugin para WordPress con el que se pueden crear tiendas online.

Qué tiene que tener una plantilla para Woocommerce

Lo primero que tienes que tener en cuenta a la hora de elegir una plantilla son los siguientes aspectos:

  • Optimizado para la velocidad de carga de la web
  • Tener un diseño atractivo
  • La navegación sea fácil
  • Diseño adaptado para los diferentes dispositivos (móvil, Tablet, etc.)
  • Ser compatible con los plugins

A continuación os mostramos algunas plantillas gratuitas y otras de pago.

Plantillas gratuitas

Zigcy Lite

Este tema cuenta con tres diseños de demostración los cuales los puedes importar y así lanzarás tu tienda más rápidamente.

Está totalmente optimizado para SEO, es compatible con el plugin de construcción de páginas Elementor y ya cuenta con más de 3.000 descargas.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Zigcy

Woostify

Esta plantilla es de las mejores por su optimización a la hora de obtener una mayor velocidad de carga de la página. Tiene la garantía de ser compatible con futuras versiones de WordPress y Woocommerce ya que sigue los estándares de programación de dicho CMS.

Incluye varios diseños de páginas de productos, un sistema de pago en varios pasos y una galería de videos para añadir a las fichas de productos.

Aunque esta plantilla es gratuita, también dispone de tres planes de pago a partir de 49$ al año en los que incluye un año de soporte, actualizaciones y acceso a complementos avanzados.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Woostify

Astra

Este tema consta con muchas posibilidades de personalización, está realizado con un código optimizado y la página cargará rápidamente debido a que requiere menos de 50kB.

Aparte de la versión gratuita, también existe la versión Premium que cuesta 47$ al año donde encontrarás más funciones y personalizaciones, un soporte individualizado y formación.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Astra

Hestia

Este tema es una excelente elección si lo que buscas es crear una web de una sola página. Ofrece la posibilidad de crear un pie de página con widgets, el añadir una página de blog y su personalización es muy sencilla ya que tiene una gran compatibilidad con los constructores de páginas más comunes.

Los creadores del tema ponen a disposición de los usuarios más de 300 artículos y 200 videos tutoriales pero también existe una versión Premium la cual cuesta desde 69€ al año en la que incluye asistencia técnica, actualizaciones y más funcionalidades.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Hestia

WooCommerce Storefront

Cuenta con un diseño que se adapta a los diferentes dispositivos, se pueden usar plugins para modificar el diseño de la página web o bien usar la opción de “Personalizar” dentro de la opción de “Apariencia” en el menú lateral de WordPress.

Al adquirir este tema obtendrás un año de actualizaciones de los plugins que incluye y un año de soporte.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla WooCommerce StoreFront

Plantillas de pago

Ekommart

El precio de este tema es desde 58$ por licencia y es ideal para diversas tiendas. Incluye varios plugins esenciales de WordPress como “Slide Revolution” o “Mailchimp” y tiene una vista rápida de productos y la opción de comparar artículos que mejorará la experiencia de compra de tus clientes.

El tema cuenta con varias demos de páginas de inicio, encabezados y pies de página prediseñados con lo que será más fácil crear tu tienda online con WooCommerce.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Ekommart

Velure

Cuesta 69€ al año y a parte del propio tema también incluye actualizaciones, importador de demos y un año de soporte. También existe la opción de un único pago que incluye todo lo anterior excepto el soporte que no expiraría y solo tendrías que pagar una vez 159€.

Este tema está más enfocado a blogs de moda y estilos de vida pero también te permite crear una tienda online con un estilo muy elegante. Cuenta además con una barra de Instagram integrada para ayudarte a mejorar tu presencia online.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Velure

PeakShops

Su precio es de 79$ e incluye futuras actualizaciones y 6 meses de soporte, si quieres extender el soporte hasta 1 año el precio sería de 25,13$ más.

Es uno de los mejores temas para crear una tienda online con WooCommerce ya que incluye diversas plantillas para las páginas de productos así como demos prediseñadas para diferentes tipos de negocios como la venta de muebles, electrónica, etc.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla PeakShops

Hongo

El precio es de 59$ en el que incluye 6 meses de soporte y futuras actualizaciones, también se puede ampliar el soporte hasta 1 año por 17,63$ más.

Algunas de las características más destacadas de este tema es que permite la visualización de productos en 360 grados subiendo múltiples imágenes del producto, permite añadir pins a las imágenes y vincularlas a determinados productos. Además tiene incluido el plugin de “MailChimp” con el que podrás crear y lanzar campañas de marketing a través del email.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Hongo

Metro

El precio de esta plantilla es de 35$ en el que se incluye actualizaciones futuras del tema y 6 meses de soporte, también existe la opción de ampliar el soporte hasta 1 año por 8,63$ más.

Tiene un diseño minimalista en el que se centra más en los productos y servicios que ofrece la web y cuenta con siete diferentes diseños de la página de inicio prediseñados. El tema incluye el plugin “Variation Images Gallery” y también es compatible con “Yoast SEO”.

Si quieres obtener más información sobre este tema pulsa en el siguiente enlace.

Plantilla Metro

Inicionet Aplicaciones S.L.

Como aplicar filtros a una imagen con CSS

,

La propiedad de CSS “filter” es una herramienta muy útil para aquellas personas que quieren usar efectos visuales sobre una imagen, es como usar los filtros de Photoshop pero para navegadores. Esta propiedad te permite aplicar filtros como por ejemplo cambiar el brillo de una imagen, hace que sea en colores sepia o en escala de grises. En este post veremos el cómo aplicar estos filtros así como la sintaxis que se usa:

Cuál es la sintaxis

Existen dos opciones de escribir esto en las hojas de estilos CSS. La primera de ellas es poner cada parámetro (brillo, saturación, etc.) en diferente línea:

La segunda opción es ponerlo todo en la misma línea y separar cada parámetro con un espacio en blanco:

La última línea que pone “filter: none;” sirve para quitar todos los filtros que tiene aplicados una imagen.

Cambiar el brillo

Para cambiar el brillo de la imagen, se hace con el parámetro “brightness”. Permite valores con porcentaje (%) y sin él. El valor 0% o 0 mostrará la imagen completamente en negro, por el contrario si se pone el valor 100% o 1 no se apreciará ningún cambio en la imagen. Para subir el brillo, los valores tendrán que estar por encima de esos valores. Si no se indica ningún valor por defecto se usará 100% o 1.

Filtro brightness CSS

Cambiar el contraste

A la hora de cambiar el contraste de la imagen mediante CSS pasa igual que para el brillo, si se usa el valor 0% o 0 la imagen se quedará en negro, si se usa 100% o 1 la imagen no sufrirá ningún cambio. Para que se note algún cambio se tienen que poner valores por encima de esos. Por defecto se usará el 100% o 1 si no se indica ningún valor.

Filtro contrast CSS

Cambiar a sepia

Para convertir la imagen en colores sepia hay que usar valores entre 0% y 100% o también se pueden usar valores entre el 0 y el 1, como por ejemplo 0.6, donde el 0 sería la imagen sin ningún cambio y el 100% o 1 sería completamente en colores sepia. Si no se indica ningún valor, por defecto se usará el valor de 100% o 1. No funciona si ponemos valores negativos.

Filtro sepia CSS

Cambiar a escala de grises

Para convertir la imagen a escala de grises el valor también será entre 0% y 100% o entre 0 y 1. Si se usa el valor mínimo, la imagen no sufrirá ningún cambio. En cambio, si se usa el valor máximo, la imagen se verá totalmente a escala de grises. Si el valor está vacío, por defecto cogerá el valor máximo. Con esta función no se permite usar valores negativos.

Filtro grayscale CSS

Cambiar la saturación

A la hora de saturar la imagen, si se usa el valor 0% o 0 la imagen estará sin saturar, si se usa el 100% o 1 la imagen estará sin cambiar. Para ver más cambios los valores tendrán que estar entre 0% y 100% o mayor que 100%. Por defecto cogerá el valor 100% y los valores negativos no están permitidos.

Filtro saturate CSS

Cambiar los valores HUE

Este filtro aplica una rotación de los colores. El valor se mide en grados (deg) y es el número de grados alrededor del círculo de color que se ajustarán en la imagen. El valor será entre 0 y 360. Si se usa el valor mínimo la imagen no sufrirá ningún cambio y por defecto también coge ese valor si está vacío.

Filtro hue-rotate CSS

Cambiar la nitidez

Este filtro aplica un efecto borroso sobre la imagen. El valor se mide por píxeles (px) pero no se permiten porcentajes. Por defecto se usará el valor 0 si no es válido o está vacío.

Filtro blur CSS

 

Esperamos que os sirva de ayuda a la hora de crear filtros en una imagen desde los estilos CSS. Existen más opciones de esta función de CSS que podéis mirar en el siguiente enlace: https://www.w3schools.com/cssref/css3_pr_filter.php

 

Mejores extensiones para Mozilla Firefox

,

Mozilla Firefox es otro de los navegadores más usados por los usuarios. Os mostramos algunas de las extensiones más comúnes y que os harán vuestra experiencia de navegación mucho mejor.

Adguard

Esta extensión bloquea eficazmente todos los tipos de publicidad en todas las páginas web así como las ventanas emergentes.

Algunas páginas donde bloquea anuncios son: Facebook, Youtube, páginas de periódicos, etc.

Adguard Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Dark Reader

Esta extensión, al igual que en Google Chrome, permite activar y desactivar el modo oscuro del navegador.

Además, también tiene un modo claro con brillo reducido y colores sepia.

Dark Reader Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Stylus

Con esta extensión puedes rediseñar libremente tus sitios web favoritos usando hojas de estilo CSS personalizadas. También incluye funciones avanzadas como por ejemplo diseños opcionales, opciones de iconos y colores, puedes instalar temas de otros diseñadores y desarrolladores, hacer copias de seguridad de tus diseños, etc.

Stylus Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Lastpass

Esta extensión es un gestor de contraseñas y las mantiene seguras y accesibles en la nube. Solo tendrás que recordar la contraseña de acceso a Lastpass para poder ver todas tus contraseñas guardadas. Además, podrás acceder desde cualquier dispositivo, incluyendo las aplicaciones para Android y para iOS. Todas tus contraseñas estarán a salvo gracias a que las protege con una encriptación de grado militar.

LastPass Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

LanguageTool

Esta extensión te ayuda con la gramática y la ortografía a la hora de escribir correos electrónicos o contenido en la web. Corrige los errores mientras escribes o bien haciendo clic. Con ella podrás mejorar la gramática y no se necesita ningún registro o suscripción.

LanguageTool Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Avast Online Security

Esta extensión te ayuda a evitar que accedas a sitios web peligrosos y estafas de phising usando datos de crowdsourcing. Puedes comprobar la calificación de cualquier sitio web que visites incluso da la opción de que tú mismo puedas calificar los sitios web a los que accedas según su fiabilidad.

Avast Online Security Extensión para Mozilla Firefox

Para poder descargarla lo podéis hacer desde el siguiente enlace.

 

Esperamos que estas extensiones para Mozilla Firefox os sean de gran ayuda a la hora de navegar en Internet.

Mejores extensiones para Google Chrome

,

Google Chrome es uno de los navegadores más usados hoy en día, por ello os presentamos algunas de sus extensiones más conocidas y usadas que os pueden facilitar vuestro día a día en el trabajo o en casa:

Touch VPN

Esta extensión te permite tener una VPN totalmente gratuita y con ancho de banda ilimitado. Esto te da la opción de visualizar las páginas desde el país que tú elijas con solo pulsar un botón.

Touch VPN

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Traductor de Google

Para aquellas personas que suelen navegar por páginas de diferentes idiomas, esta extensión les será muy útil ya que simplemente con pulsar el icono de la extensión podrán escribir una palabra que quieran traducir sin tener que cambiar de pestaña e incluso pueden traducir una página entera. También se pueden seleccionar partes de un texto para traducirlas sin que afecte al resto de la página web.

Traductor de Google

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Push to Kindle

Esta herramienta envía la página web por la que estás navegando directamente a tu cuenta de kindle y la podrás leer tranquilamente y con tranquilidad desde tu dispositivo.

Solo tendrás que pulsar el icono de la extensión y escribir a qué cuenta de Kindle lo quieres enviar.

Push to Kindle

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Grammarly for Chrome

Esta es una extensión imprescindible para aquellas personas que suelen escribir en inglés desde Google Chrome.

Esta aplicación se encarga de analizar lo que estás escribiendo y corrige errores ortográficos, gramaticales, símbolos de puntuación, etc.

Tiene una versión gratuita y otra de pago pero con la opción gratuita sería suficiente.

Grammarly for Chrome

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Google Arts & Culture

Esta herramienta está diseñada para la gente que le gusta el arte. Lo que te permite esta extensión es que cada vez que abras una nueva pestaña se mostrarán obras de distintos pintores, artistas contemporáneos o artistas callejeros de todo el mundo.

Google Arts and Culture

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Escritorio Remoto de Chrome

Esta aplicación está creada por Google y te permite conectarte remotamente a otro ordenador utilizando Chrome. Podrás controlar todo del otro ordenador como ficheros, carpetas, menús, programas, etc.

Esta extensión funciona a través de tu cuenta de Google con la que tendrás que utilizarla para acceder a otros ordenadores o móviles.

Chrome Remote Desktop

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Documentos de Google sin conexión

Te da la posibilidad de acceder a Drive y a sus herramientas como son los Documentos, Hojas de cálculo o Presentaciones de Google sin necesidad de conectarte a Internet.

Es muy útil cuando lo necesitas durante un viaje o si te encuentras en un lugar donde la cobertura no es muy buena.

Documentos de Google sin conexión

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Dark Reader

Te ofrece la posibilidad de activar el modo oscuro en cualquier página que visites. No solo cambia el blanco de fondo por el negro y las letras a blanco, sino que reduce el brillo de las imágenes cuando sea necesario, analiza los colores que tiene la web.

Te permite ajustar el brillo, el contraste, la intensidad de los colores, cambiar las fuentes de texto, elegir en qué sitios web lo quieres aplicar y en cuales no, tiene la opción de usar colores sepia, etc.

Dark Reader

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Screencastify

Permite grabar tu pantalla del ordenador, grabar audio, editarlos y compartirlos en segundos. Además, puedes realizar preguntas interactivas al espectador.

Screencastify

Para poder descargarla lo podéis hacer desde el siguiente enlace.

uBlock Origin

Esta extensión es un bloqueador de publicidad. Bloquea prácticamente todos los anuncios y consume muy pocos recursos del ordenador.

Si estás navegando en una página pero quieres desactivar la aplicación y que aparezcan los anuncios, es tan simple con pulsar un botón. Los anuncios volverán a aparecer pero solamente en la página que estás visitando en ese momento, el resto de páginas seguirán con los anuncios bloqueados.

uBlock Origin

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Video Downloader professional

Esta extensión es completamente gratuita y muy sencilla de utilizar que te permitirá descargar vídeos en cualquier página web donde esté alojado.

Para descargar los vídeos solamente hará falta pulsar un botón y se guardarán en diferentes resoluciones. Cuando la descarga haya finalizado ya se podrán reproducir sin necesidad de conexión a Internet.

Video Downloader Professional

Para poder descargarla lo podéis hacer desde el siguiente enlace.

Tendencias de diseño web para 2022

,

Como hace poco que cambiamos de año, os mostramos las tendencias de diseño web más importantes para este nuevo año 2022. Algunas de las más relevantes son:

  1. Usar colores llamativos
  2. Contenido personalizado
  3. Chatbots más humanos
  4. Carga inteligente del contenido
  5. Formas fluidas
  6. Microanimaciones
  7. Microinteracciones
  8. Animaciones 3D
  9. Uso de degradados
  10. Efecto de vidrio esmerilado
  11. Datos más visibilizados
  12. Inspiración vintage
  13. Modo oscuro
  14. Combinación de fotos y elementos gráficos
  15. Tipografía Bold (Negrita)
  16. Minimalismo y uso de espacios en blanco
  17. Hero Image

 

1. Usar colores llamativos

El uso de tonos atrevidos, saturados y brillantes puede hacer que tu marca destaque mucho más.

Eso sí, hay que utilizarlos con mucho cuidado para no cansar al usuario y provocar un efecto contrario.

2. Contenido personalizado

Seguramente te hayas dado cuenta de que cada vez que vuelves a visitar una página web o una aplicación aparece un contenido totalmente diferente a cualquier otra persona o si lo visualizas desde otro navegador diferente.

Contenido personalizado         Contenido personalizado

Este tema es muy útil para los sitios que son ecommerce, se puede usar para mostrar diferentes productos dependiendo de los intereses del usuario que visita la web y poder generar más ventas.

3. Chatbots más humanos

Gracias a los avances en la inteligencia artificial, los chatbots son capaces de ayudar a los clientes durante el proceso de compra en la web, resolver dudas u ofrecer un servicio determinado.

Aunque los chatbots llevan ya unos años, en este 2022 los veremos evolucionar para ser mucho más humanos.

4. Carga inteligente del contenido

Con la actualización del algoritmo de Google, se añadieron los parámetros Core Web Vitals. Estos parámetros se aplican en todas las páginas web y tienen en cuenta, además de la velocidad de carga, el cómo se presentan los elementos más relevantes de la web.

Se pueden utilizar funciones como el Infinity Scroll y el Lazy Load para no sobrecargar los recursos del servidor y mejorar el tiempo de carga ya que solo se muestra el contenido visible.

5. Formas fluidas

Esta tendencia trata de descartar los ángulos rectos y se introducen formas redondas, asimétricas que pueden dividir las distintas secciones de una web de forma fluida y sin cortes bruscos.

Formas Fluidas

6. Microanimaciones

Se trata de usar pequeñas animaciones en distintas partes del diseño como en los iconos o en las descripciones de productos.

Con esto conseguimos diseños más dinámicos utilizando videos y gifs en vez de imágenes estáticas.

Microanimaciones

7. Microinteracciones

Son pequeñas animaciones que sirven para guiar al usuario en la web a través de algunas acciones.

Algunos ejemplos te esta tendencia son: enlaces que cambian de color cuando pasas el ratón sobre ellos, cambio del propio cursor dependiendo del sitio de la web donde esté ubicado, diferentes efectos al pasar el cursor por un producto en un listado, etc.

Microinteracciones

Microinteracciones

8. Animaciones 3D

Pueden hacer del diseño de la web mucho más moderno.

Aunque no hay que sobrecargar la web de animaciones en 3D, si que es cierto que gracias a los avances tecnológicos cada vez suponen menos problemas en cuanto al tiempo de carga de la página.

Un ejemplo de esto sería mostrar las imágenes de productos en la web con fotos en 360 grados.

Animaciones en 3D

9. Uso de degradados

El uso de degradados puede añadir un efecto de profundidad, puede servir como un fondo llamativo o para añadir textura a una imagen.

Suele utilizarse en tipografías grandes y atrevidas y combina perfectamente con elementos redondeados y con transparencias.

10. Efecto de vidrio esmerilado

Este efecto ofrece una apariencia borrosa en los elementos situados detrás dando prioridad a los que están delante.

A veces se suele usar como sustitución a los fondos degradados y transmite profesionalidad.

Efecto de vidrio esmerilado

11. Datos más visibilizados

Mostrar los datos en gráficas o tablas puede hacer que los usuarios que visitan la web entiendan mucho mejor estos datos además de ser una forma mucho más atractiva que mostrarlos con texto.

Datos más visibilizados

12. Inspiración vintage

Puedes intentar mezclar estilos modernos con estilos vintage para crear una apariencia ultramoderna.

Por ejemplo, puedes usar productos artesanales, de época y tradicionales.

Inspiración vintage

13. Modo oscuro

Este estilo permite reducir la fatiga de los usuarios ya que cada vez pasamos más tiempo mirando pantallas. Además puede ayudar a ahorrar batería en dispositivos móviles.

Utilizando esta tendencia puedes conseguir una apariencia ultramoderna para tu web y resaltar otros elementos.

Modo oscuro

14. Combinación de fotos y elementos gráficos

Mezclando elementos gráficos y fotos puedes conseguir aportar un nivel de diversión y creatividad a una imagen corriente y reforzar la marca de tu empresa.

Combinación de fotos y elementos gráficos

15.Tipografía Bold (Negrita)

Usando fuentes gruesas y en negrita hace que el mensaje de la página sea mucho más claro e instantáneo y no necesite ninguna imagen. Además puede lograr captar la atención del usuario.

Tipografía Bold (Negrita)

16. Minimalismo y uso de espacios en blanco

Usando espacios en blanco y un aspecto minimalista permite mejorar la legibilidad de la web y da prioridad al producto o contenido que se quiere destacar.

Minimalismo y uso de espacios en blanco

17. Hero Image

Hero image se refiere al banner de gran tamaño que suele haber en una página web en la página principal.

Esto puede atraer y hacer que el usuario siga viendo el contenido de tu web.

Se suele usar para expresar el servicio que ofreces y normalmente es la primera impresión que se lleva un cliente al visitarla.

Hero image

 

Estas son las tendencias más importantes que llegarán este nuevo año.

¿Cómo añadir y quitar las www de tu página web?

, ,

Puede que te preguntes si es importante o no el usar las www en tu página web para el rendimiento del SEO. La respuesta es no, es simplemente un tema de preferencias o de estética pero debes saber cómo añadir o quitar las www de tu dominio para asegurar que Google lo indexe correctamente.

En este artículo te explicaremos lo siguiente:

Cómo quitar las www de tu dominio

Si prefieres que tu sitio web sea sin el prefijo www puedes añadir el siguiente código en tu fichero .htaccess en el directorio principal de tu web (Solamente para servidores con Apache):

Cómo quitar las www de tu página web con .htaccess

Para que esto funcione correctamente, el módulo de Apache mod_rewite tiene que estar instalado y habilitado en el alojamiento donde se encuentra tu web. Una vez añadido este código no es necesario reiniciar el servicio de Apache.

Añadir las www a tu página web

Por el otro lado, si lo que quieres es añadirlas en tu web, igual que en la sección anterior, será necesario editar el fichero .htaccess de tu página y añadir lo siguiente:

Cómo añadir las www de tu página web con .htaccess

Al igual que para quitarlas, es necesario que en el servidor esté activado y habilitado el módulo de Apache mod_rewrite, de otra forma esto no funcionará.

Cómo afecta a la seguridad del sitio web

Al realizar este tipo de cambio en una web, hay algunos aspectos sobre su seguridad que hay que tener en cuenta.

Si configuras tu dominio sin las www y posees algún subdominio, puede darse el caso de que el dominio principal y el subdominio compartan cookies. Esto puede ser potencialmente malo si hay alguna información delicada y se guarda en las cookies que tú no quieres compartir con terceras partes.

Inicionet