5 increíbles herramientas gratuitas para diseñadores

5 Increíbles Herramientas Gratuitas Para Diseñadores

 

No hay nada mejor que encontrar nuevas herramientas gratuitas para diseñadores que harán que tu vida sea un millón de veces más fácil. Después de todo, todos queremos hacer nuestro trabajo lo más rápido y eficiente posible, y si hay una herramienta para eso, entonces la quiero.

Y encontré algunas herramientas que me encantan y que son muy útiles, y por eso quiero compartir con vosotros las nuevas herramientas de diseño que más me gustan.

5 herramientas de diseño que tienes que probar

1. Opensource Builders

Opensource Builders

Quiero empezar esta lista con fuerza, así que vamos a hacerla con Opensource Builders. ¿Has encontrado alguna vez una aplicación que te guste pero que tu presupuesto no te permita comprar?

O tal vez eres un tacaño (alias, maximizador) como yo, e intentas sacar el máximo provecho de tu dinero. Opensource Builder te ayudará a encontrar alternativas de código abierto para tus aplicaciones favoritas! Sólo tienes que escribir el nombre de la aplicación que estás buscando, y encontrarás un montón de alternativas para ella.

Compara los pros y los contras, los precios y más para encontrar la aplicación ideal para tu proyecto.

2. Unscreen (herramientas gratuitas para diseñadores)

Unscreen herramientas gratuitas para disenadores

A continuación, tenemos Unscreen. ¿Alguna vez has intentado quitar el fondo de un vídeo? No es tan fácil.

Unscreen eliminará el fondo de cualquier vídeo de forma 100% automática y gratuita. Nos encanta el doble wammy.

Esto significa que puedes grabar cualquier vídeo, subir el clip a Unscreen, utilizar su herramienta para borrar el fondo de tu vídeo y luego puedes añadir cualquier elemento de fondo propio. Todo esto, de forma gratuita.

Muy pronto, también tendrán una versión profesional. Me emociona ver qué más se les ocurrirá cuando ya tengan una herramienta de diseño gratuita tan increíble.

3. Neumorphism.io

Neumorphism herramientas gratuitas para diseñadores

El neumorfismo parece estar en todas partes hoy en día, y conozco una aplicación que puede ayudarte a integrar eso en tu código CSS.

Neumorphism.io es un generador que creará el CSS para este estilo de UI suave que hemos estado viendo en todas partes. Esto hace tu trabajo mucho más fácil y puedes experimentar rápidamente para ver lo que te gusta para tu sitio web.

4. Glitch Art Generator

Glitch Art Generator

¡Tenemos otro generador en nuestra lista! El generador de Glitch Art te ayudará a conseguir el fondo de glitch perfecto para tu proyecto.

Puedes ajustar fácilmente todos los colores, la cantidad de glitch, el espacio desde el centro, la inclinación, etc! Puedes ajustar básicamente cualquier cosa. Una vez que te guste lo que ves, puedes descargar el archivo e integrarlo directamente en tu proyecto.

5. Vangogh (herramientas gratuitas para diseñadores)

Vangogh

Finalmente, y posiblemente la aplicación más estética de todas, es Vangogh. Si alguna vez buscas la paleta de colores perfecta, no busques más.

Todo lo que tienes que hacer es escribir una palabra clave, puede ser un objeto o un color real, y generará unas cuantas variaciones para la paleta de colores perfecta para ti.

Puedo literalmente sentarme aquí y escribir un montón de palabras al azar y perderme durante horas en estos maravillosos colores.

¡Te recomiendo seriamente que uses esta aplicación en tu próximo proyecto!

Tu opinión sobre herramientas gratuitas para diseñadores

¡Espero que esta lista de mis herramientas de diseño favoritas te haya sido útil!

Hazme saber qué aplicaciones fueron tus favoritas y qué otras herramientas de diseño que usas a diario se me escaparon.

Tendencias de diseño web en 2020

Tendencias De Diseño Web En 2020

Tendencias de diseño web en 2020. Cómo sorprender con el diseño de tu página web este año  2020 y en el futuro.

El temido momento ha llegado finalmente. Después de cinco años, me enfrento a un muy necesario rediseño del sitio web. En realidad, probablemente he necesitado hacer esto durante un año, pero como muchos empresarios, la idea de tener que sumergirme de lleno en el contenido, por no hablar del diseño, de un nuevo sitio web me ha hecho estallar en un sudor frío.

Aunque paso una buena parte de mi tiempo como director de proyectos online ayudando a otras empresas a desarrollar páginas web de calidad y que sobre todo vendan, como los niños de un zapatero que no tienen zapatos, el mío siempre es el último.

A pesar de todo, lo inevitable ya no puede evitarse. Por lo tanto, fui a la caza de lo que son las tendencias de diseño web en 2020. Esto es lo que encontré.

Minimalismo

minimalismo en el diseño web

Con la esperanza de conseguir que Google los clasifique alto para sus palabras clave, muchas páginas web han estado atascando sus páginas con un montón de texto. Esta superpoblación de sitios puede ser abrumadora para el espectador e incluso puede ralentizar un navegador.

Los sitios web con espacio en blanco permiten que los diferentes elementos respiren, son más fáciles de navegar y presentan una mejor experiencia para el usuario. El uso de mucho espacio blanco es algo que muchas marcas de lujo utilizan en sus propias páginas web.

Incluso si no tienes una marca de alta gama o de lujo, puedes beneficiarte de esta tendencia de diseño. Para traer más minimalismo a tu página, evita usar más que los colores principales en tu sitio web y dale a los elementos de cada página un poco de espacio para respirar con el espacio vacío.

Además, no ocultes la navegación importante. En su lugar, crea una interfaz fácil de usar e intuitiva. Asegúrate de editar de manera que tu texto diga lo que necesita, incluye tus palabras clave y que sea lo suficientemente significativo como para ser fácil de usar en Google, pero no tanto como para ser insoportable.

Cuando todo lo demás falla, no olvides que el minimalismo en el diseño web se trata de obtener más de menos.

Ilustraciones e iconos diseñados a medida

Tendencias de diseño web en 2020 ilustraciones

Si bien el minimalismo puede ser una tendencia candente para el diseño web en 2020, la clave es equilibrarlo con los elementos de diseño (fuentes interesantes, ilustraciones inesperadas y elecciones de color originales) que ayudan a una empresa a ganar reconocimiento de marca.

Con este fin, muchas empresas están incorporando ilustraciones e iconos diseñados a medida en sus diseños destinados para la web del año 2020.

En el pasado, el coste de estos elementos personalizados ha impedido a las empresas más pequeñas entrar en el juego, pero ahora se dispone de una gran cantidad de buenos diseñadores a precios asequibles a través de sitios web independientes como Upwork y Fiverr.

Elementos animados y movimiento

Elementos animados y movimiento

Todos hemos visto sitios web con texto moviéndose, imágenes que giran alrededor para revelar información adicional.

Los sitios web del 2020 tomarán la tendencia del movimiento en las páginas web y la aumentarán un poco. “Los efectos de animación capturan la atención del usuario e introducen una experiencia más dinámica”, dice Ben Pines, jefe de contenido de Elementor, una empresa de construcción de páginas de WordPress.

Además, las páginas web generadas con scroll (mucho contenido en una página que se ejecuta continuamente hacia abajo o hacia los lados) permiten acceder a una gran cantidad de información de manera fácil.

Formas geométricas

Formas geométricas

En el pasado, las formas geométricas se han utilizado en gran medida en las páginas web para crear una ruptura visual entre las secciones. Sin embargo, 2020 apunta a un uso más innovador de las formas geométricas, incluyendo formas superpuestas y sombras suaves para dar más profundidad y personalidad a un diseño. Según Pines, las formas geométricas suaves transmiten un aspecto futurista, mientras que las líneas agudas y duras transmiten un entorno más audaz.

Si eres como yo y te encuentras cara a cara con la creación de un nuevo sitio web (o la revisión de uno antiguo), estas tendencias pueden impulsarte a la próxima década con estilo y sustancia. ¿Quién sabe? Incluso podrían darle a tu sitio web una vida útil hasta mediados de la década de 2020. Brindo por la esperanza.

7 Pasos para crear la combinación perfecta de colores para páginas web

7 Pasos Para Crear La Combinación Perfecta De Colores Para Páginas Web

Colores para páginas web. Los estímulos visuales nos guían en casi todo lo que hacemos. Las marcas de éxito en todo el mundo tienen una fuerte asociación de una combinación de colores distintivos en su identidad de marca y en el diseño de su página web. Por lo tanto, establecer una sólida identidad de marca es altamente esencial para cualquier negocio. Es un componente vital en la construcción de la confianza y el desarrollo del nivel de comodidad con los consumidores.

También es fundamental para la creación de la marca de cara al público objetivo. Hablando de la marca, uno de los elementos más cruciales es su logotipo. La combinación de colores debe estar alineada con la marca y el logotipo, ya que ayuda a la comprensión de los consumidores de tu negocio. También es algo que tiene que estar en absoluta alineación y sincronización, ya que se asocia con la identidad de la marca.

Más del 90% de las decisiones de compra rápida se basan en la combinación de colores y su percepción. Optar por la combinación de colores adecuada para el sitio web es muy crucial para crear una impresión duradera. Después de todo, según la investigación, el color aumenta el reconocimiento de la marca en casi un 80%.

La combinación perfecta de colores para páginas web

Cuando se desarrolla y diseña un sitio web, es imperativo considerar la selección de colores cuidadosamente, ya que los diferentes colores envían diferentes mensajes a los consumidores. A continuación, te explicamos cómo puedes descifrar esto y obtener la combinación de colores perfecta.

1. Entendiendo la Psicología del Color:

Psicología del Color

Es necesario que te familiarices con la psicología del color antes de intentar elaborar la paleta de colores. Todos y cada uno de los colores impactan en la gente de una manera diferente. Los diferentes colores invocan emociones mezcladas en las personas.

Sin embargo, esto puede variar dependiendo de la demografía. Basándose en el producto, analiza el público objetivo – la personalidad y las emociones. Pregúntate a ti mismo qué es lo que quieres provocar en tu público objetivo. En consecuencia, elige el color primario más adecuado para la combinación de colores de tu página web. Por ejemplo, si la marca está relacionada con las finanzas, es mejor optar por el color Azul, ya que se traduce en confianza y fiabilidad. Del mismo modo, si se trata de una marca que es una empresa de alimentos orgánicos, el color Verde sería el mejor, ya que se asocia con la salud y la naturaleza.

2. Ir a lo seguro mediante el conocimiento del sector

conocimiento del sector

Comprender el sector y el nicho del cliente. La Psicología del Color es fundamental para la marca y su identidad. Cada color y tono tiene un impacto psicológico diferente en la mente de los consumidores.

Diversas industrias prefieren diferentes colores, en función del producto o servicio que ofrecen. A través de esto, tratan de provocar un cierto conjunto de emociones y crear asociaciones relacionadas con la industria. A continuación se muestra el estudio en el que se analizaron 520 logotipos, con diversas industrias, para identificar qué sectores favorecen cada color. Los resultados muestran las 20 principales marcas de cada sector y sus colores dominantes.

3. Análisis de la competencia (Colores para páginas web)

Siempre puedes coger una o dos notas de los competidores de la industria. Revisa sus sitios web y estudia el logo, la marca y los colores utilizados. Observa las similitudes en el uso de los colores y analízalas.

Este análisis también te dará una idea muy justa de los tonos utilizados en la industria. Tienes dos opciones: o sigues la corriente y utilizas la combinación de colores convencional, que se ajusta a las necesidades, o vas en la dirección opuesta y diferencias la marca.

De cualquier manera, necesitas asegurarte de que el mensaje de la marca y la historia se transmitan y se perciban de la manera en que se supone que deben ser.

4. Arregla tu color primario

color primario

Este color primario o dominante es el color de la marca. La marca y la página web serían asociadas con este color primario por los consumidores. Este color sería particularmente útil para sacar a relucir un cierto conjunto de emociones o sentimientos cuando los consumidores o los consumidores potenciales llegan a tu página web.

Este es el color que quisieras que tu público objetivo recuerde cuando piensen en la marca. Si el logotipo ya está en su lugar, asegúrate de que tu color principal es uno de los colores utilizados en el logotipo, preferentemente el principal.

Utiliza este color dominante en los lugares correctos, en lugar de insertarlo en todas partes. El color debe hacer que el contenido y el sitio web, y debe utilizarse para resaltar las características o detalles en los que desea que tu público se centre.

5. Fijar el número de colores para páginas web

Usar un solo color acompañado del espacio negativo es demasiado soso y aburrido. Es importante determinar el conjunto de colores que deseas utilizar. Haz tu diseño más interesante y visualmente atractivo usando colores de énfasis.

A través de esto, puedes resaltar varias características de tu sitio web, como los botones, las citas o las pestañas. La mezcla y combinación de colores puede ser muy difícil, especialmente sin la comprensión de la teoría del color. Por lo tanto, es mejor consultar la ‘Rueda de colores’. Elige entre Colores Análogos o Colores Complementarios.

Para agilizar aún más el proceso, también puedes utilizar herramientas como Colorspire. A través de herramientas como ésta, puedes tener una idea clara de cómo se vería tu combinación de colores en la página web. Lo ideal es tener 3 colores y seguir la regla 60-30-10.

6. Uso de Colores Neutros y Secundarios

Hacer coincidir los colores secundarios con los colores primarios puede ser una gran lucha a veces. Sin embargo, hay muchas herramientas gratuitas disponibles por ahí, que pueden hacer tu trabajo más fácil. Colorspace y otros generadores pueden ayudarte a superar la confusión. Sólo tienes que introducir el código hexadecimal, y tendrás múltiples opciones.

Los diseños específicos requieren el uso de colores secundarios, especialmente para las páginas web que están llenas de contenido, landing pages, productos, recursos descargables, y así sucesivamente. Al mismo tiempo, también necesitará usar colores neutros, para crear un contraste para los elementos importantes.

Los colores neutros más comunes son el blanco, el gris y el negro. Siempre es bueno tener un color claro / neutro y un color oscuro para los diferentes casos.

7. Colocación del color

Colocación del color

Ahora viene la pregunta crítica, así como el área de interés – ¿cómo se aplica la combinación de colores de la página web de forma ideal?

Los colores primarios normalmente van al lugar de interés de las páginas web. Utilice estos colores fuertes y vibrantes para obligar a los visitantes a “entrar en acción “. Deberían utilizarse para atraer la máxima atención y los clics. Los botones o pestañas CTA y otros elementos importantes de la página deben ser resaltados con los colores primarios.

Los colores secundarios se utilizan generalmente para resaltar la información que es menos crítica por naturaleza. Esto incluye los subtítulos, los botones secundarios, así como los elementos activos del menú, las preguntas frecuentes, los testimonios y otros contenidos de apoyo. Los colores neutros pueden ser usados usualmente para el texto así como para el fondo, pero son bastante útiles en las secciones más coloridas y dinámicas del sitio web. Los colores neutros también ayudarían a bajar el tono del sitio web y a reenfocar el ojo.

La Estructura de una Página Web

la estructura de una página web

 

¿Como es la estructura de una página web?

Estructura de una Página Web. ¿De qué están hechas las páginas web? Conocer los elementos individuales que componen un sitio web puede realmente ayudarte a entender cómo crear una página web eficaz. Y si eres nuevo en el diseño web, puede darte una base y una guía para empezar. Es hora de aprender lo que contienen todos los sitios web!

Header (Cabecera)

No hay mejor lugar para empezar que por el principio. Muchos sitios web se abren con un encabezado o menú, y aquí es donde suelen ir los enlaces de navegación, junto con el logotipo de tu empresa o el título del sitio web. Otras herramientas importantes, como los conmutadores de idiomas y los enlaces de inicio de sesión, también encajan aquí. Cualquier cosa a la que quieras que la gente tenga acceso inmediato!

Header (Cabecera)

Algunos diseñadores eligen hacer que el encabezado sea “pegajoso”, por lo que los enlaces de navegación le seguirán incluso mientras se desplaza hacia abajo. Si el encabezado se encuentra en todas las páginas web, al hacer clic en el logotipo a menudo se vuelve a la página principal. Estas pequeñas comodidades pueden hacer una gran diferencia.

Enlaces en la estructura de una Página Web

El 99,9% de las páginas web incluyen enlaces. Esta es la base de cómo te mueves por el sitio web. Los enlaces deben estar subrayados, coloreados de manera diferente, o de otra manera hechos para destacar del texto normal. Como todos los elementos interactivos, debes tomar medidas para asegurarte de que los visitantes sepan que son interactivos.

las páginas web incluyen enlaces Estructura de una Página Web

Navegación

A menos que estés haciendo un sitio de una página (landing page), probablemente vas a incluir navegación o enlaces a las páginas principales de tu sitio. Hay muchas maneras de crear una barra de navegación. Puedes hacer un menú horizontal simple en el encabezado, menús verticales que se despliegan cuando presionas un botón o menús desplegables que aparecen cuando pasas el ratón por encima de un enlace.

diseño de la navegación

Una cosa es segura: sea cual sea el diseño de la navegación, ésta debe ser claramente visible y de fácil acceso en cualquier dispositivo.

Para sitios con una tonelada de contenido, como los blogs, es aconsejable incluir una barra de búsqueda y asegurarse de categorizar y subcategorizar tu contenido. También puedes incluir la navegación con breadcrumb, que muestra la subcategoría del sitio en el que te encuentras.

Imagen principal o slider

Los buenos diseñadores web saben que el contenido visual es esencial para captar el interés, y la imagen principal lo consigue pegando un banner en la parte superior de la página principal. Además de ser un deleite para la vista, las imágenes principales a menudo incluyen un pequeño anuncio sobre la compañía y una llamada a la acción a sus servicios.

Una llamada a la acción es simplemente una frase, generalmente un enlace o un botón, que pide a sus visitantes que hagan algo. “Descargue ahora”, “Pruebe Gratis”; ¡haz obvio lo que sucederá cuando hagan clic en ese enlace!

Estructura de una Página Web

En lugar de una imagen tradicional, algunos sitios optan por un banner (como un logotipo grande) justo debajo del menú de navegación. Esto puede actuar como un enlace conveniente de regreso a la página de inicio.

Sidebar o barra lateral

La barra lateral es una característica opcional pero muy valiosa, ¡simplemente porque se puede usar para cualquier cosa! Archivos de blogs, navegación, formularios de registro, listas de categorías…. Las barras laterales tienen un gran potencial.

Sidebar o barra lateral

Si el contenido de su sitio es estrecho en anchura, una barra lateral puede romper todo ese espacio en blanco y hacer que la página parezca menos aburrida.

Footer o pie de página

Por último, pero no menos importante, el pie de página. Aquí es donde pegarás tu política de privacidad y términos de servicio, tus botones de medios sociales, la información de tu empresa. Algunos usan el pie de página como una forma de tirar esos enlaces aburridos pero necesarios. Pero si está bien diseñado, puede ser una buena manera de cerrar tu sitio e invitar a la gente a visitarte en los medios sociales o a inscribirse en la lista de correo electrónico. No descuides tu pie de página!

Footer o pie de página Estructura de una Página Web

Aprender lo básico en la estructura de una Página Web

Diseñador principiante o veterano, es importante tener lo básico en mente. No se puede crear un sitio web sin incluir al menos algunos de estos elementos, por lo que es necesario entender cuáles son y cómo implementarlos bien. Esperamos que haya sido una buena introducción o curso de actualización en diseño web!

Tendencias en el diseño de menús en paginas web

Tendencias en el diseño de menús en paginas web

 

Tendencias de diseño de menús en paginas web en 2019

Diseño de menús en paginas web. Todos hemos visto mega menús de navegación y desplegables a pantalla completa en Internet. Son comunes en toda la web y especialmente útiles en páginas con muchos enlaces.

Pero diseñar un mega menú de navegación que funcione puede ser una verdadera molestia. No existen pautas exclusivas para estos menús, por lo que tendrás que estudiar lo que otros están haciendo y tratar de hacer algo que se ajuste a tu proyecto.

Veamos algunas tendencias en el diseño de menús en paginas web y veamos cómo llevan los menús desplegables tradicionales y los elevan un paso más allá.

Menú de categorías de nivel profundo

El estilo de diseño más valioso para un mega menú es la estructura de columnas.

Esto te permite designar “categorías” para los enlaces y crear enlaces más profundos sin usar múltiples menús desplegables. Un mega desplegable de navegación puede abarcar toda la página, por lo que normalmente puedes incluir al menos 3-4 columnas en un solo desplegable.

Un ejemplo de calidad sería la tienda de comercio electrónico de Puma, que tiene una estructura de columnas.

Desglosan las categorías en función de la demografía y los artículos, luego dentro de cada menú se encuentran columnas para cada tipo de artículo (productos destacados, ropa, deportes, etc.).

Fíjate que las columnas tienen sus propias cabeceras y éstas se destacan del resto de los enlaces. Crea una verdadera estructura de columnas porque puedes echar un vistazo primero a las cabeceras de las columnas y navegar por los subenlaces desde allí.

Efecto similar en en la tienda de Gucci pero con un giro en el diseño.

tienda de Gucci

Todas sus columnas tienen los mismos esquemas de color, pero utilizan una tipografía diferente. Esto puede dificultar la navegación rápida, pero sigue siendo igual de útil.

Los efectos de animación de Gucci también son un buen detalle, así que eso es algo que hay que tener en cuenta.

Pero si tiene problemas con una mega jerarquía de navegación, primero intenta organizar tus enlaces en categorías más profundas.

Menús desplegables de ancho completo

Esta tendencia no se utiliza en todos los sitios, pero la veo mucho más hoy en día.

Los menús de navegación de gran tamaño pueden abarcar todo el ancho de la página para crear más espacio para los usuarios de ordenadores de sobremesa y portátiles. Los usuarios móviles suelen tener menús ocultos, por lo que nunca ven el efecto completo de todos modos.

navegación de Mango

La navegación de Mango es un excelente ejemplo con un mega menú a pantalla completa. El contenido permanece fijo en el mismo ancho que la página misma, pero el menú se extiende por toda la pantalla.

Es un efecto fresco porque crea más espacio en el menú. O al menos da la ilusión visual de más espacio.

Y si estás realizando una navegación enorme para monitores más grandes, ¿por qué no hacer todo el trabajo?

Lodi tiene algo muy similar y sus menús también incluyen saltos de categoría.

Lodi menu de navegación

Hay una división uniforme entre enlaces desplegables “normales” y las imágenes en miniatura que van directamente a los artículos o categorías principales.

Pero de nuevo el contenido permanece fijo en el mismo ancho que la página, mientras que el menú se extiende por toda la pantalla.

Un efecto fantástico si puedes hacer que funcione.

Mezcla de imágenes y texto

Recomiendo añadir más imágenes a todos los sitios web siempre que sea posible. Las imágenes ayudan a romper todo el texto que vemos regularmente.

Los menús de este tipo funcionan mejor en pantallas grandes, por lo que hay más espacio para las imágenes. El sitio web de Sears divide su navegación en categorías multinivel con enlaces e imágenes.

sears menu de navegación

Algunas de las categorías superiores tienen imágenes de electrodomésticos de cocina, colchones y muebles de hogar. Pero las categorías más profundas incluyen vínculos directos a cosas como cubiertos y vajillas.

Recuerda que puedes hacer una mega navegación bastante alta y aún así hacerla utilizable. Así que hay espacio para una fila de imágenes y una fila de enlaces de texto para casi todos los navegadores.

Pero también puedes ir por la ruta de un menú más pequeño como los desplegables de PlayStation.

playstation menu de navegación

Técnicas alternativas de desplegable

Estáte dispuesto a experimentar con tu menú de navegación. No hay reglas estrictas para esto y el diseño UX se obtiene de las pruebas para ver qué es lo que funciona.

Algunos sitios web realmente traspasan los límites de los desplegables con animaciones personalizadas, múltiples columnas e incluso menús desplegables que aparecen en mega menús. Si el menú es utilizable y funciona, entonces es un trabajo bien hecho.

Pero siempre puedes ir un poco más lejos si estás dispuesto a intentarlo.

Por ejemplo es en el sitio de Waterworks, donde los desplegables no aparecen a menos que haga clic.

 Waterworks menú de navegación

Tiene un pequeño botón de “cerrar” en la esquina, así que hay una manera fácil de cerrarlo también. Pero esto probablemente no funcionará para todos los sitios y sería más valioso para los desplegables muy altos.

Ten en cuenta todas estas tendencias a medida que avance en sus proyectos con grandes ideas de navegación.

Tus propias ideas de diseño de menús en paginas web

Los mega menús de navegación avanzan constantemente con nuevos estilos y técnicas de diseño. Estudiar otros ejemplos es excelente para empezar, pero realmente trata de pensar en tus propias ideas para llevar tus Diseño de menús en paginas web aún más lejos.

¿Cómo es el proceso de desarrollo de una página web?

¿Cómo Es El Proceso De Desarrollo De Una Página Web?

 

Desarrollo de una página web. Una página web bien desarrollada, puede hacer una gran labor para el crecimiento de tu negocio más de lo que te piensas. Al mismo tiempo, la creación de este sitio web no es un proceso fácil, requerirá mucho esfuerzo de tu parte. Para emprender este camino, necesitarás un socio fiable que te ayude a superar todos los retos. Una página web de éxito sólo puede funcionar si existe una cooperación fluida entre el equipo de desarrollo y el responsable del negocio.

¿Cuál es el objetivo del sitio web de una empresa?

Las páginas web no son sólo para convertir clientes potenciales en ventas, como se puede pensar. Hay muchos factores que empujan a las marcas a crear páginas web o a redireñar las antiguas. Para pensar en el objetivo que quieres obtener de un sitio web, necesitas antes ver la imagen completa. Un sitio web es una inversión para el futuro y una forma de convertirte en un actor principal de tu sector.

Debes pensar en la página web como una herramienta que debe encajar perfectamente con tu estrategia de marketing. Usando esta herramienta correctamente, el dueño de un negocio puede llegar a una audiencia mucho más amplia y diferenciarse en su sector. Los sitios web ayudan a las empresas a ser escuchadas desde cualquier parte del mundo.

¿Qué necesitas saber antes de contratar a un desarrollador web?

Los desarrolladores, así como los clientes, tienen ciertas preguntas o inquietudes sobre como realizar el desarrollo de una página web. Harán todo lo posible para asegurar el crecimiento de tu negocio, pero tú también tienes que realizar un esfuerzo en este proceso. Si tu elección es un equipo de desarrollo dedicado, al principio de la colaboración, esperarán que respondas a varias preguntas y aclares los detalles con el fin de proporcionarte el mejor servicio. El primero probablemente será:

¿Tiene tu empresa ya una página web o tenía una en el pasado?

Si ya tienes una página web, prepárate para explicar lo que necesitas, ya sea una landing page, una aplicación web, algún tipo de integración o un nuevo diseño Web. Sin embargo, si no lo sabes y necesitas asesoramiento profesional, acude a un equipo experimentado y dedicado. Entonces, puedes pedir su opinión sobre la mejora de tu página web, y ellos te ayudarán a definir las ventajas y desventajas y te darán recomendaciones sobre lo que necesitas hacer.

En caso de que decidas visitar el sitio web de una empresa por primera vez, se te harán varias preguntas sobre el tipo de negocio con el que trabajas. Para la creación de una tienda online, el equipo de desarrollo también necesitará saber cuántos tipos de productos vendes.

¿Tiene una lista de la competencia?

Lista De La Competencia

Puede sorprenderte esta pregunta y pensar que los desarrolladores están planeando usar elementos de diseño de tus competidores o crear algo similar para ti. No hay que preocuparse, no es el caso. Necesitan conocer a tus competidores para asegurarse de que tu futuro sitio web se destacará de ellos. Si no tienes mucha información sobre otras empresas que hacen negocios similares y se dirigen a los mismos mercados, el equipo de desarrollo puede investigar y averiguar todo por ti.

¿Cuál es tu audiencia y público objetivo?

Los equipos de desarrollo de una página web más experimentados saben que deben tener en cuenta las diferencias culturales y lingüísticas. Este factor es especialmente importante para el diseño web. Por ejemplo, los diseños escandinavos suelen estar más cargados de texto que los asiáticos, donde la gente tiende a ver más imágenes y vídeos. Aquí también es importante discutir si tu país tiene algún tecnicismo legal específico sobre las tiendas online y su funcionamiento.

¿Tiene tu marca un diseño específico, una guía de estilo o un libro de marca?

El diseño es la cara de tu marca. Debe encajar perfectamente con la historia y el producto de su empresa. Si algo no va bien aquí, tu página web puede parecer un gato con cara de perro. Es por eso que el equipo de desarrollo estará interesado en todos los detalles sobre el aspecto actual de tu empresa y como fue presentada al mundo antes.

¿Importa dónde está ubicado el desarrollador?

Como dijimos antes, el aspecto cultural es significativo en el desarrollo web. Pero donde esté el cliente no es la única parte que importa, la ubicación y la cultura de los desarrolladores no son menos importantes. En la mayoría de los casos, los desarrolladores que vienen de un país tienen tarifas por hora similares y características específicas que caracterizan su enfoque del desarrollo web.

Tanto en España como en el resto de Europa, las tarifas de un desarrollador web por hora oscila entre 40 y 150 euros dependiendo de la complejidad del proyecto.

¿Cuáles son las peticiones más comunes en el desarrollo de una página web?

 ¿Por qué es necesario tener una página web corporativa?

Para muchas personas hoy en día, es difícil confiar en una empresa que no tiene presencia digital. Por lo general, buscan en Google el nombre de la marca para obtener más información o consultar las reseñas. Si no ven el sitio web, les hace pensar que hay algo sospechoso en ese negocio. Ningún empresario querría que su empresa tuviera poca credibilidad. Una página web corporativa es importante no sólo para tus clientes sino también para tus empleados potenciales. En el pasado, solía funcionar de una manera diferente, pero los buscadores de empleo de hoy en día tienden a aprender más sobre la empresa a través de la página web.

¿Por qué es necesario el comercio electrónico?

Al tener una tienda online, podrías pensar que es suficiente para hacer crecer un negocio rentable. Pero hoy en día, las expectativas de los clientes son mucho mayores. No sólo quieren comprar un artículo a un precio justo, hay miles de tiendas que lo ofrecen. Los clientes quieren que sus compras se conviertan en una experiencia emocionante, algo más que simplemente comprar un producto y pagar por él. Una tienda online es el mejor lugar para que puedas realizar ventas, ganarte la confianza de tus clientes y alcanzar nuevos horizontes ampliando tu base de clientes.

¿Qué es una landing page?

Las Landing Pages son todo para el marketing y publicidad. Es la página que tus clientes potenciales ven primero cuando hacen clic en una promoción o resultado de búsqueda. Allí, pueden ver diferentes llamadas de acciones como contactar con nosotros o confirmar una llamada o rellenar el campo del formulario. Por lo general, estas páginas ayudan a recopilar datos de los usuarios, como correos electrónicos o números de teléfono, que pueden utilizarse posteriormente para desarrollar una campaña de marketing y, finalmente, aumentar las tasas de conversión. El objetivo principal de la landing page que se puede lograr a largo plazo es convertir a los visitantes del sitio web en clientes potenciales.

¿Por qué optar por la integración?

Tarde o temprano, un negocio en crecimiento requerirá optimización de tareas. Se pueden integrar diferentes herramientas en tu sistema para ahorrar tiempo, ayudarte a gestionar la contabilidad, la publicidad u otras tareas. Estas herramientas no son capaces de hacer tu trabajo completamente por ti, pero pueden hacer tu vida como dueño de un negocio mucho más fácil. Sin embargo, no sólo te servirán a ti sino también a tus clientes: la integración de diferentes sistemas de pago, CRM, ERP…

Cómo establecer las metas del desarrollo de una página web

establecer las metas del desarrollo de una página web

Establecer la meta puede sonar fácil, pero de hecho esta etapa es bastante complicada, un error aquí puede arruinar el proyecto, y dejar tus sueños abandonados. Es crucial que el cliente exprese claramente la visión, no pida la luna, y se apegue al plan original durante todo el proyecto.

Antes de trabajar con un desarrollador, debes tener claro que en la creación de una página web, un cliente y un equipo de desarrollo deben superar diferentes problemas. Realizan dos tareas completamente diferentes para garantizar el éxito de la implementación del sitio web.

El objetivo principal del proyecto es una combinación de los resultados que se quieren alcanzar y la capacidad del equipo de desarrollo. En primer lugar, es necesario encontrar una respuesta a la pregunta mencionada anteriormente, por qué necesitas este proyecto.

Si nadie es capaz de responder a la pregunta de por qué se necesita el proyecto, no tiene sentido comenzarlo.

La mejor manera de establecer una meta alcanzable para el equipo de desarrollo es sacar a relucir los números. Por ejemplo, podría decir que el objetivo es aumentar la tasa de conversión y el valor medio de la carrito. Sin embargo, esta descripción es demasiado general para ser fácilmente medido cuando el proyecto está terminado. En lugar de tales metas abstractas, puedes analizar los sitios web de tus competidores y líderes de tu sector y establecer los objetivos en números. Supongamos que necesitas que la tasa de conversión crezca un 1,5% y que el valor medio de la cesta aumente un 20%. Si no tienes estadísticas promedio de tu sector para obtener cifras reales y alcanzables, puedes pedirle al equipo de desarrollo que lleve a cabo una investigación por ti. Algunas agencias de desarrollo de comercio electrónico ofrecen una estimación gratuita antes de realizar un proyecto.

Aquí hay que tener en cuenta que no se puede utilizar como ejemplo una empresa que opera en un sector diferente o incluso en un nicho ligeramente diferente del sector en el que trabajas. Si utilizas un ejemplo, debe ser relevante y alcanzable. Las tasas de conversión posibles de alcanzar difieren dependiendo de una variedad de factores. Por ejemplo, no puedes comparar una tienda online que vende ropa para el gran público y una boutique online. Por lo tanto, la mejor manera de salir es analizar tu nicho con precisión y establecer las metas individuales de negocio que quieres lograr.

Si como resultado del proyecto no se alcanzaba el objetivo, el proyecto en sí no servía de nada.

Una página web nueva o un rediseño moderno de la que ya tienes, puede ayudar a que tu negocio crezca, pero recuerda que incluso la página web de más alta calidad no es capaz de hacer nada y de todo. Dependiendo de tus necesidades y de los servicios que los desarrolladores realicen para tu página web, podrán realizar diferentes tareas. Debes dejar claro de antemano con tu equipo de desarrollo si llevarán a cabo la promoción de la tienda online por ti o no. Si eliges el paquete completo de servicios, los desarrolladores podrán ayudarte con lo siguiente:

¿Quién debería crear una tarea técnica?

Algunos empresarios llegan a los equipos de desarrollo con sus propias tareas técnicas preparadas. Sin embargo, en la práctica, la mayoría de estos planes se desechan.

Para evitar perder tiempo, deja la parte técnica a los profesionales.

Después de establecer el objetivo principal del proyecto, los desarrolladores harán todo lo necesario para que este objetivo se haga realidad, manteniendo tu plan inicial. Su trabajo es ofrecerte una herramienta lo suficientemente potente como para hacer avanzar tu negocio.

Sin embargo, trabajando con desarrolladores sin mucha experiencia, puede ser una buena idea que tú mismo crees una tarea técnica, para asegurarte de que no haya sorpresas desagradables. Pero sólo funcionará bien si tienes algún conocimiento y experiencia en este campo.

Trabajando con un equipo de desarrollo dedicado, obtendrás información oportuna sobre cada aspecto del trabajo. Antes de tomar cualquier decisión importante para tu futuro sitio web, el director del proyecto debe ponerse en contacto contigo. También deben preguntar si tu sitio web requiere algún conjunto de funcionalidades en particular y darte una lista de los servicios, integraciones y extensiones disponibles dentro de las diferentes categorías explicadas en términos sencillos.

Cómo comunicarse con el equipo de desarrollo web

Estos 3 principios de comunicación que te describo a continuación te ayudarán a establecer una comunicación efectiva con el equipo de desarrollo desde el comienzo de la relación.

Cooperar estrechamente en las etapas iniciales

En las primeras etapas del proyecto, la participación del cliente es especialmente crucial. Por ejemplo, cuando se establece el intervalo de tiempo del proyecto, o cuando se realiza un análisis de negocio, o cuando se crea el diseño web. Si todos los objetivos y tareas se establecen correctamente, la participación del cliente no será necesaria más adelante en el proyecto.

Deja que los desarrolladores hagan su trabajo

Tienes que aceptar un simple hecho: no siempre sabes lo que es mejor, especialmente cuando se trata de desarrollo y diseño web. Es tu proyecto y tu idea, pero a veces tienes que apartarte y observar. Mientras tanto, puedes centrarte en el desarrollo de la marca y el marketing.

El enfoque I-pay-I-know-better es contraproducente.

Definir canales de comunicación

Tanto tú como el equipo de desarrollo deben tener un claro entendimiento de qué canales utilizar para discutir sobre el proyecto. Es mejor utilizar varios canales de comunicación, uno para la interacción diaria y otro para la toma de decisiones. Para comunicarse diariamente, Skype, las llamadas telefónicas o los mensajes de texto serán suficientes, pero las negociaciones importantes deben realizarse por correo electrónico para que nada se pierda o se elimine.

¿En qué consiste el desarrollo del sitio web?

Como empresario, es posible que no necesites profundizar en los detalles técnicos, pero debes entender el proceso de desarrollo del comercio electrónico. Moverse paso a paso es la mejor manera de gestionar el desarrollo de un sitio web porque si algo sale mal, podrás notar el problema tan pronto como sea posible. Arreglar los errores al final del desarrollo te costará mucho más que los errores que se notan a tiempo.

La mayoría de los equipos dedicados tienen un plan general de desarrollo de páginas web que se ajustan a los requerimientos específicos de sus clientes. Si necesitas un nuevo sitio web con un diseño fresco, las etapas de desarrollo serán las siguientes:

¿Qué hacer después del lanzamiento de la página web?

Cuando la tan esperada tienda online se lanza y funciona sin problemas, muchos empresarios empiezan a pensar que el trabajo ya está hecho. Puede ser un grave error, el lanzamiento del sitio web es sólo el comienzo del viaje. Además de las tiendas físicas, cualquier tienda online debe ser atendida. El sitio web requiere un soporte continuo para mantener un rendimiento sin problemas y una carga rápida.

Los hackers y los virus que utilizan son cada vez más sofisticados, y para garantizar la seguridad de tu tienda online, necesitas tener todas las actualizaciones y parches de seguridad instalados de forma rápida. La mayoría de las plataformas de ecommerce liberan tanto pequeñas como significativas actualizaciones con bastante frecuencia. Tu sitio web necesita ser mantenido al día. Por lo tanto, necesitas tener un desarrollador de ecommerce fiable que actualice el sistema e instale los parches necesarios cuando sea necesario.

Además, no menos importante para ti es analizar las estadísticas del sitio web. Siempre hay un margen de mejora, incluso si el sitio web desarrollado superó tus expectativas. El primer mes debes estar especialmente atento al comportamiento de los clientes en tu sitio. Si ves que los usuarios tienen problemas para navegar por tu sitio web, debes indicar dónde están exactamente los puntos de dificultad. A continuación, debes ponerte en contacto con el desarrollador de tu sitio web o con el que lleva a cabo el soporte para mejorar los puntos débiles.

Invierte en ofrecer una mejor experiencia de usuario, y te saldrá rentable.

Si no dispones de tiempo para gestionar tú mismo la monitorización de este usuario, es mejor que confíes tu web a profesionales.

¿Ha tenido alguna experiencia trabajando con equipos de desarrollo de una página web? ¿Cuál fue la parte más desafiante? ¿Han estado los resultados a la altura de tus expectativas? Comparte tu experiencia en los comentarios que aparecen a continuación 🙂

Consejos sobre el uso de fondo blanco en diseño web

uso de fondo blanco en diseño web

 

Parece que todo el mundo está usando un fondo blanco en diseño web en la actualidad.

Atrás quedó la oscuridad y los patrones que han sido una gran parte del proceso de diseño durante mucho tiempo. Y aunque el uso de un fondo blanco puede parecer el camino más fácil y seguro hacia un diseño limpio, no siempre es así.

Los fondos blancos necesitan trabajar tanto con las opciones de texto como con las de imagen. Deben trabajar en armonía con el diseño general y no parecer una idea de última hora. También deben tener un propósito y belleza en el esquema general de diseño.

Entonces, ¿qué está haciendo el diseñador para que los fondos blancos funcionen? Echemos un vistazo.

¿Por qué un fondo blanco en diseño web?

Mientras que el uso de un fondo blanco siempre ha sido una opción popular (posiblemente porque es la configuración por defecto cuando se trabaja en HTML y CSS) el color ha visto un resurgimiento en uso en los últimos meses.

El blanco como color de fondo para blogs y sitios de comercio electrónico es un elemento básico, pero lo que estamos viendo más es que los diseñadores están usando fondos blancos para todo tipo de proyectos diferentes (y más creativos).

Aunque no se puede determinar directamente por qué está sucediendo esto, es fácil ver el número de sitios con un enfoque de fondos blancos en diseño web. Hace un par de años la tendencia era utilizar un fondo negro u oscuro.

He notado una correlación entre los fondos blancos y dos tendencias de diseño web:

Diseño sensible: El diseño adaptado para una variedad de dispositivos ha ayudado a que el fondo blanco simple recupere su popularidad porque es fácil y siempre se ve natural. En algunos diseños con responsive design, los sitios se bloquean con ciertas partes de la cuadrícula y todo lo que está fuera de ella muestra un “borde” de fondo. Si el fondo general es blanco, este borde se vuelve invisible sin ningún problema adicional en el diseño.

Estilo plano y minimalista: Lo simple sigue siendo una tendencia importante (como lo fue durante casi todo el año 2013). Y un fondo blanco es la personificación de lo simple. El blanco también facilita el emparejamiento y el uso de muchos de los colores brillantes y atrevidos que caracterizan los estilos de diseño plano.

¿Qué dice el blanco?

El blanco es un color simple – o la falta de color – y aunque tiene algunos significados propios, puede adoptar el contexto de su entorno.

El blanco, por naturaleza, es el color de la pureza, fe, luz, limpieza, posibilidad, suavidad y es generalmente positivo.

web ikea fondo blanco

Ejemplo de utilización del fondo blanco en diseño web de Ikea.

Sin embargo, como color de fondo, el blanco es más bien un elemento de soporte fundido. El blanco mantiene algunas de sus propias asociaciones de color, el tono también absorbe lo que está a su alrededor, permitiendo que el significado completo del diseño a su alrededor se manifieste. Así que el blanco como color de fondo, por ejemplo, adquirirá atributos femeninos cuando se combina con rosas y tipos de letra.

El blanco como color de fondo enfatiza la claridad y elimina los obstáculos visuales y el desorden en el uso actual de las tendencias. El tono se utiliza para añadir énfasis visual a otras partes importantes del diseño – color, texto o imágenes – y con frecuencia es parte de una estética visual general que es de diseño simple y minimalista.

Otros tonos de blanco en diseño web

Otros colores o palabras que representan tonos que son blancos o casi blancos incluyen nieve, leche, marfil, perlas, papel, seda de maíz, concha de mar, lino, crema y alabastro.

Otros tonos casi blancos incluyen una pizca de otro color – normalmente negro – para crear un blanco suave con un matiz para su lectura en pantalla.

Algunos usuarios y diseñadores argumentan que el blanco puro es duro a la vista. En los proyectos de impresión, el blanco puro es a menudo lo estándar.

Consejos para el uso del blanco

Crear contraste: Escoge colores oscuros o brillantes que hablen a los usuarios contra el fondo blanco. El negro es una opción común para escribir sobre un fondo blanco (también gris oscuro) porque es fácil de ver y leer. Lo mismo ocurre con las imágenes. Selecciona imágenes que no sean demasiado blancas en enfoque o considera usar un borde negro alrededor de las imágenes para separarlas del fondo claro.

Hazlo simple: La esencia del blanco es la simplicidad. Para obtener el mayor impacto, opta por un esquema de diseño simple o de estilo mínimo.

Usa imágenes simples: Las fotos, gráficos e ilustraciones deben reflejar la misma sensación que el diseño general. En lugar de imágenes complejas con mucho que hacer, mantenlas simples también.

Enfoque en la tipografía: La belleza de la tipografía es de suma importancia en un esquema de diseño en el que todo es sencillo. Esto también hace que la tipografía sea más bien un punto de referencia en el diseño general. Escoge una o dos fuentes grandes y úsalas bien. Esto contribuirá en gran medida a la creación de un sitio web visualmente impresionante basado en blanco.

El espacio es tu amigo: Recuerda, los fondos blancos son parte de una apariencia general y una tendencia. Utilízalos bien dando a todo lo que hay en la pantalla mucho espacio. Añade espacio extra alrededor de los objetos, deja márgenes más amplios entre el texto y los elementos del menú. Trata de enfocarte en el espacio tanto como en los objetos dentro de él.

Concéntrate en un determinado color: Elige un color y úsalo contra fondos blancos y letras negras para divertirte. El “pop of color” enfoca ciertas partes del diseño de una manera más sutil. Y funciona con casi cualquier tono.

Conclusión

Aunque los fondos blancos no son nuevos, ahora es el momento de diseñarlos de una manera nueva. Trabajar con fondos blancos puede aportar un toque moderno, elegante y limpio a casi cualquier tipo de proyecto de diseño web.

Y me encantaría ver en qué estás trabajando. Comparte tus proyectos usando fondos blancos en los comentarios.

8 plantillas para newsletter gratis

8 plantillas para newsletter gratis

Te he seleccionado las mejores plantillas para newsletter gratis para ayudarte a enviar el mensaje correcto a tus suscriptores.

Las plantillas para Newsletters gratis son una excelente manera de enviar tu marca por correo a las bandejas de entrada de las personas con un coste mínimo. Es vital que el diseño de tu correo electrónico sea correcto: necesitas algo que funcione con la imagen de tu marca y que atraiga la atención de tus suscriptores y, por supuesto, que funcione bien en todos los dispositivos.

Afortunadamente, hay muchas plantillas de newsletter gratuitas para elegir. Algunas vienen con todo lo que necesitas para empezar, mientras que otras puedes usarlas como punto de partida para crear tus propios diseños.

Si no está seguro de lo que estás buscando, sigue leyendo para ver mi selección de las mejores plantillas para newsletter gratis disponibles.

01. Tech (plantillas para newsletter gratis)

plantillas para Newsletter gratis de Cakemail

Hay una variedad de plantillas para Newsletter gratis de Cakemail

Hay un montón de plantillaspara Newsletter gratis para elegir en Cakemail. Es difícil elegir un favorito, pero me gustan los colores brillantes y la simplicidad de Tech. Cakemail sugiere usar Tech para promocionar una aplicación, pero creo que podría funcionar para una gran variedad de marcas o propósitos.

02. Plantilla para newsletter gratis Material Design

Plantilla para newsletter Material Design

Esta plantilla es colorida y funcional.

Esta plantilla de correo electrónico  de Paul Goddard se basa en el Material Design de Google y tiene un toque retro, que puede o no ser lo que buscas. Puedes usarla con la seguridad de que el diseñador la ha probado a fondo, en 33 clientes de correo electrónico, de hecho.

03. Email Monks MailChimp Master Template

Email Monks MailChimp Master Template

Una plantilla masiva que podrás modificar para que se ajuste a tus necesidades

Esta plantilla de newsletter gratuita de Email Monks Mailchimp podría ser tu plantilla de referencia para muchos correos diferentes, ya que tiene un gran número de estilos de bloques diferentes, todos metidos en un solo documento. Sólo tienes que eliminar los que no quieras y crear un diseño personalizado para tu marca. Funciona con más de 40 clientes de correo electrónico y es fácil de integrar con MailChimp.

04. Pook: Newsletter

Pook Newsletter

Esta plantilla de newsletter gratuita ha sido probada a fondo

Pook: Newsletter es una de las plantillas de Litmus. Existen plantillas de newsletters fiables y gratuitas para una amplia gama de funciones, desde el lanzamiento de un producto hasta la gestión de cuentas o la comercialización de tus productos. Si estás construyendo cualquier tipo de campaña de correo electrónico, deberías echar un vistazo a Litmus, ya que te ayudará a probar tu correo electrónico para asegurarte de que se interrumpa lo menos posible. Hay una gran comunidad que te ayudará si te quedas atascado, y muchos recursos útiles.

05. Mooza

Mooza es una plantilla para newsletter gratis

Transmite todas tus noticias en este sencillo diseño de boletín de Pixel Hint

Mooza es una plantilla para newsletter gratis creada por el equipo de Pixel Hint. Es un poco antigua, pero sigue haciendo bien su trabajo. El diseño es limpio, compacto y llamativo, lo que lo hace adecuado para una amplia gama de disciplinas creativas. Puede descargar la versión PSD de forma gratuita.

06. Campaign Monitor

Campaign Monitor

Crea tu propia plantilla de forma rápida y sencilla

¿En un apuro? Campaign Monitor promete que con su generador de plantillas en línea puede crear una plantilla HTML en menos de 60 segundos. Todas sus plantillas están totalmente probadas y listas para su uso en el móvil, y una vez que haya terminado, puede descargar tu plantilla de forma gratuita o cargarla en una cuenta de Campaign Monitor.

07. ZURB

ZURB

Una gama ideal de plantillas para newsletters gratuitas para aquellos que quieran personalizar más.

ZURB tiene una amplia variedad de plantillas gratuitas entre las que puedes elegir. Cada plantilla está empaquetada con archivos CSS y HTML separados. Si estás añadiendo imágenes, tendrás que crear y comprimir una carpeta separada con la hoja de estilo antes de subirla.

08. Antwort

Antwort

Las plantillas de newsletter de Antwort funcionan en todos los dispositivos

Los diseños de Antwort, que originalmente se crearon para correos electrónicos transaccionales con contenido dinámico, se someten a pruebas exhaustivas en entornos reales con datos reales y casos extremos. También funcionan en todos los dispositivos, adaptándose para ofrecer correos electrónicos de gran calidad en pantallas de diferentes tamaños. Puedes descargarlo desde Github hoy mismo.

Cómo crear un chatbot con Inteligencia Artificial

Cómo crear un chatbot con Inteligencia Artificial

 

Usa la poderosa herramienta de aprendizaje de Google para crear un chatbot con Inteligencia Artificial.

Crear un chatbot con inteligencia artificial. La Inteligencia Artificial (IA) nos permite crear nuevas formas de ver los problemas existentes, desde replantearnos las estrategias del entorno hasta cómo aprendemos. Tus proyectos, ya sean aplicaciones, páginas web o juegos, pueden aprovechar la IA para hacerlos más atractivos, fáciles de usar y con resultados más valiosos. Uno de estos métodos consiste en crear un chatbot en lenguaje natural para ayudar a los usuarios a interactuar con tu sitio.

Para crear un chatbot con inteligencia artificial, utilizaremos el nuevo conjunto de herramientas Dialogflow de Google. Aprovecha el potente aprendizaje de la herramienta, así como la comunicación de voz a texto. Se puede incorporar directamente en tu sitio web como un widget o personalizarse según tus necesidades.

Comencemos este tutorial para crear un chatbot con Inteligencia Artificial:

01. Crear una cuenta

Dirígete a dialogflow.com y crea tu cuenta. Inicia sesión y acepta los permisos para que Dialogflow tenga acceso a tu cuenta.

02. Crear un agente

Dialogflow utiliza el término ‘agente’ para representar instancias de tu IA. Piensa en el agente como la inteligencia virtual que estás creando. Podrías tener muchos agentes trabajando para ti, cada uno con su propia personalidad y propósito.

Haz clic en el botón “Crear agente” e introduce un nombre para tu agente: Ejemplo: “HAL9000”.

03. Crear una intención

Primero, necesitas crear una intención. Estamos definiendo la “intención” de las entradas del usuario. Haz clic en “Crear intención” y ponle el nombre,  por ejemplo “Abrir puertas”. Presiona ‘Guardar’.

Crear una intención

04. Entrena a la IA para este propósito

Entrena a la IA para este propósito proporcionando frases que un usuario pueda usar. La IA PNL utilizará estas y otras variaciones derivadas para entrenar al agente. Añade las siguientes frases de formación en la ventana ‘Frases de formación’ y añade todas las que quieras:

“Abre las puertas de la bahía de la cápsula, Hal.
“Abre las puertas”.
¡Déjame entrar, Hal!

frases de formación

05. Añadir respuestas

A continuación, debe añadir algunas respuestas con las que el agente responderá. Se introducen en la ventana `Respuestas’. Prueba algunas como esta:

Me temo que no puedo hacer eso.
No puedo hacer eso ahora mismo.
A continuación, pulsa `Añadir respuestas’ y `Guardar’ en la parte superior de la pantalla. Verás notificaciones de que el agente está siendo entrenado y entonces está listo.

Añadir respuestas

06. Prueba el chatbot

En el lado derecho de la pantalla hay una herramienta de prueba. El chatbot utilizará el servicio de voz a texto de Google para traducir tu voz a texto si lo pruebas. Deberias ver los resultados de tu solicitud y la respuesta que el agente de AI seleccionó. ¡Muy bien!

07. Crear y utilizar una entidad

Las entidades son conceptos que pueden ser definidos y reutilizados en las respuestas del agente como variables. Vamos a entrenar a la IA para que entienda cuando un usuario está expresando una emoción y luego usarla en su respuesta al usuario.

En el menú de la izquierda, haga clic en ‘Entidades’. Escribe ’emoción” para el nombre de tu nueva entidad. Mantén marcada la opción ‘Definir sinónimos’. Haz clic en la tabla de abajo y escribe “enojado” como primera emoción. Luego haz clic a la derecha y añade sinónimos como “loco”, “molesto”, etc. Luego añade otra entrada para “asustado” y usa los sinónimos “asustado”, “aterrorizado”, etc., que te gusten. Presiona ‘Guardar’ cuando termines.

Esto ha entrenado al Agente a entender que ‘enojado’ y ‘asustado’ son emociones que un usuario puede comunicar. Todos esos sinónimos son variaciones que pueden ocurrir. La IA también generará algunos.

Crear y utilizar una entidad

08. Crear una nueva intención

Ahora vamos a crear una nueva intención para usar la entidad “emoción” que hemos creado. Llama a esta intención ’emociones’ y haz clic en’Guardar’.

A continuación, añade nuevas frases de formación como “me estás asustando”, “me estás volviendo loco” y “estoy muy enfadado”, utilizando variaciones de palabras clave enfadado y asustado. Esto capacitará al agente para comprender las diversas formas en que un usuario puede expresar esta expresión emocional.

Notarás que el sistema resalta las palabras asustadas y enojadas para ti. Ya los está marcando como entidades. También ha añadido una entrada en la ventana `Acciones y parámetros’. Esto te permite usar estas entidades en tus respuestas del mismo modo.

Crear una nueva intención

09. Añade una respuesta usando la nueva entidad `emoción’.

En la ventana Respuestas, añade nuevas respuestas que utilicen esta nueva entidad. Fíjate en el ‘$’ para indicar la Entidad $emoción. Intenta añadir estas respuestas:

Lamento que sientas $emoción, Dave.
“Sentir $emoción es una respuesta humana, Dave”.
Haz clic en “Añadir respuestas” y pulsa el botón “Guardar” en la parte superior de la pantalla para guardar la intención completa.

10. Prueba tu chatbot de nuevo

Intente decir o escribir las siguientes frases en la herramienta de prueba.

Me estás haciendo enojar mucho, Hal.
Me estás asustando.
¿Notan cómo respondió usando “asustado” con el segundo? Usó nuestro sinónimo ‘asustado’ para saber que queríamos decir asustado. Muy bien.

Siéntete libre de jugar con esto, así como de añadir más intentos y respuestas que te gusten y luego añadiremos esto a una página web.

11. Activar la integración web

Para añadirlo a tu página web, haz clic en ‘Integraciones’ en el menú de la izquierda. A continuación, haz clic en la casilla `Web Demo’ para activar esta opción.

Activar la integración web

Aparecerá una ventana emergente que te mostrará un enlace directo para que puedas probar tu integración de inmediato. También mostrará un fragmento de código que puedes usar para soltar el widget en tu propio sitio web. Copia ese fragmento al portapapeles para que puedas pegarlo en tu sitio.

12. Crear una página web básica y añadir el fragmento

Crea una página básica de HMTL e incluye ese fragmento de código a continuación. Prueba el siguiente código y súbelo a tu servidor o ejecútalo en tu servidor local. Reemplace el fragmento de abajo con el que ha copiado de su agente Dialogflow:

<!DOCTYPE html>
<html>
<head>
	<title>NET - AI Chatbot</title>
</head>
<body>
	<iframe
    allow=”microphone;” width=”350”height=”430” src=”https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa”>
</iframe>
</body>
</html>

Acabas de crear un chatbot con inteligencia artificial

Con este último paso habrás integrado tu primer chatbot en tu página web, y por su puesto, si te ha parecido interesante este artículo, te recomiendo leer este otro, Cómo Diseñar Para La Web En 2019 / Nuevas Tendencias.

 

8 pasos para un diseño web accesible para todos

Diseño web accesible

Descubre cómo crear un diseño web accesible con estos sencillos consejos

La accesibilidad es un derecho humano y, en algunos países, por ley. De hecho, en 2018 se produjo un gran aumento de las demandas de accesibilidad web. Ahora los diseñadores están empezando a darse cuenta de que un diseño web accesible es una necesidad. Con esto en mente, aquí te doy los ocho principales consejos para asegurar que tu diseño web esté optimizado para ser accesible y lo más inclusivo posible.

Si decides revisar los elementos accesibles de tu sitio web y te das cuenta de que tu diseño web necesita una actualización total, aquí te explico las principales tendencias del diseño web para 2019.

A continuación los 8 pasos para un diseño web accesible:

01. Definir la accesibilidad

La accesibilidad y el diseño inclusivo a veces se mencionan indistintamente, pero no reconocer la distinción entre ellos puede tener consecuencias drásticas. El diseño de accesibilidad consiste en eliminar obstáculos para que todos los usuarios puedan utilizar las aplicaciones y sitios web que diseñamos.

A continuación, recordemos que los tamaños de fuente más grandes reducen el obstáculo “no puede leer el texto”, por lo que o bien permitimos que ciertos usuarios cambien a un “modo de accesibilidad” alternativo, o bien creamos una versión accesible, pero separada, a la que se puede acceder mediante un enlace en la navegación. Ahora, esto no sólo difumina la línea entre accesible e inaccesible (ya que los usuarios con discapacidad visual todavía lo tienen que localizar), sino que no es del todo inclusivo, porque hemos aislado a estos usuarios. Han sido segregados, se les ha hecho sentir diferentes, y para colmo, hemos tenido que diseñar y desarrollar dos versiones de nuestra interfaz, gastando tiempo y esfuerzos adicionales.

Una fuente más grande para todos

En su lugar, podríamos haber diseñado simplemente una interfaz singular, más inclusiva, donde la fuente sea más grande para todos. Después de todo, incluso los usuarios que no son discapacitados visuales se beneficiarán de poder leer el texto más fácilmente, y es por esto que el diseño inclusivo es un triunfo tanto para los usuarios discapacitados como para los no discapacitados. El diseño inclusivo no disminuye la experiencia de los que no están discapacitados. De hecho, la gran mayoría de las reglas de accesibilidad definidas por el WCAG – Web Content Accessibility Guidelines, se duplican como consejos de usabilidad que, si se implementan, beneficiarán a todos los usuarios.

02. Simplificar el lenguaje

Cuando se trata de la palabra escrita, hay una gran variedad de consideraciones a tener en cuenta si queremos diseñar experiencias que se adapten a todo el mundo. Está la simplicidad de las palabras mismas (que puede afectar a los que tienen dificultades para leer), está la tipografía (que puede afectar a los usuarios con discapacidad visual), y está la consistencia (que puede afectar a los que tienen discapacidades cognitivas). Y, por supuesto, el diseño subóptimo afecta tanto a los que no están discapacitados como a los que sí lo están.

Cómo mejorar la tipografía y, por tanto, la legibilidad:

Alinear el texto sólo a la izquierda o a la derecha
Enlaces subrayados para un mayor contraste visual
Aplicar el espaciado de línea por lo menos 1.5 veces el tamaño de la fuente
Espaciado entre párrafos: al menos 1,5 veces el espacio entre líneas
Ancho de párrafo: no más de 80 caracteres

Cómo reducir la carga cognitiva:

Usar un lenguaje sencillo
Definir abreviaturas en el primer uso
Asegurarse de que el texto del enlace se describa de forma eficaz
Coincidir URLs idénticas con texto de enlace idéntico
Estructurar el contenido de forma lógica utilizando encabezados claros.

03. Optimizar el contraste de color

El contraste de color es una medida de lo bien que se distinguen los colores de dos elementos de diseño. La unidad de esta medida es una proporción, y hay una proporción mínima a la que apuntar. Suponiendo que varios elementos de diseño cumplan con la relación mínima de contraste de color definida por el WCAG, no sólo estamos permitiendo la legibilidad a los usuarios con discapacidad visual, sino que la estamos potenciando para aquellos que no la tienen también. Esta es una de las muchas maneras en que diseñamos inclusivamente con un esfuerzo prácticamente nulo.

Entonces, ¿cuál es el requisito mínimo, y cómo lo comprobamos? En primer lugar, los analizadores de contraste de color como Stark pueden utilizarse para medir la relación de contraste de color. Sin embargo, la proporción mínima a la que debemos llegar depende del elemento en sí, es decir, si se trata o no de un elemento importante de la interfaz de usuario, como un icono o un campo de formulario, o, si el elemento es textual, si el tamaño de la fuente es pequeño o grande, ya que las fuentes más grandes son más legibles incluso antes de retocar el contraste.

Estos son los requisitos de la relación de contraste de color para el texto sobre el fondo, tal como lo define el WCAG:

14pt negrita o 18pt normal: 4.5:1 (7:1 es mejor)
Negrita de 14pt o normal de 18pt, y más: 3:1 (4.5:1 es mejor)

Estos son los requisitos para los elementos de la interfaz de usuario:

Objetos gráficos (como gráficos): 3:1
Concéntrate, desplaza el cursor y los estados activos: 3:1
Iconos y elementos de formulario en los que se puede hacer clic: 3:1

La aplicación Stark mencionada anteriormente también puede simular el aspecto de nuestro diseño para usuarios con diferentes tipos de daltonismo: después de todo, el 4,5% del mundo es un gran número de usuarios potenciales. Si te resulta difícil conseguir un contraste óptimo con los enlaces de un cuerpo de texto, subrayalos para que los enlaces sean más fáciles de detectar, porque algunos usuarios daltónicos no ven el contraste de color en absoluto.

04. Ayudar a los usuarios a corregir errores

Los errores a menudo resultan una nube de confusión, especialmente cuando el usuario no sabe exactamente lo que hizo, o cómo arreglarlo. Los errores son inevitables, especialmente para el usuario moderno que se apresura a interactuar con las interfaces, fuertemente armado con su modelo mental, y es por esto que ayudar a los usuarios (discapacitados o no) a superar sus errores es vital para la accesibilidad.

Naturalmente, el escenario más común en el que el usuario puede cometer un error es al rellenar un formulario, y a menudo como resultado de una variedad de discapacidades, es decir, dificultad de comprensión como resultado de una discapacidad cognitiva, introducción de datos incorrectos como resultado de una discapacidad motora, etc. En primer lugar, si podemos corregir el error del usuario de forma programada, entonces se evitará la crisis. Un ejemplo de esto en acción podría ser añadir https:// a su URL si aún no ha sido añadido, en lugar de forzar al usuario a arreglarlo por sí mismo.

Considera estos otros consejos para reducir los errores:

Utiliza siempre etiquetas de formulario para describir los campos.
Y marcadores de posición para mostrar un ejemplo de entrada aceptable
Habilitar la función de autollenado y autocompletar para reducir los requisitos de escritura

Y estos consejos para ayudar a los usuarios a corregir errores:

Mostrar los errores de formulario claramente en tiempo real
Permita que el usuario verifique sus datos antes de enviarlos.
Importante y a menudo se olvida: ¡no hagas que los usuarios se sientan estúpidos!

05. Saltar al Contenido Principal

Saltar al contenido principal es una característica de accesibilidad relativamente oscura dirigida a aquellos que navegan por las interfaces de usuario con lectores de pantalla. Lo más probable es que nunca hayas oído hablar de esta función; así de inclusiva es. Los lectores de pantalla, o simplemente aquellos que en su mayoría navegan por las interfaces de usuario utilizando el teclado, tabulan a través de los destinos mediante la tecla de tabulación. Si no está desactivada, es probable que lo hayas experimentado de todas formas al saltar a través de los campos del formulario en un navegador web de escritorio, ya que es mucho más fácil que hacer clic.

Saltar al contenido principal es una mejora de la accesibilidad para ayudar a este subconjunto de usuarios a escapar de la repetitividad evitando la navegación principal; esto funciona al tener el primer elemento de la pestaña un enlace que salta al contenido principal. Es oscuro para aquellos que no usan lectores de pantalla porque este enlace sólo se muestra una vez con pestañas. Intenta buscar algo en Google y luego presiona la tecla de tabulación.

También es importante indicar visualmente qué elemento está actualmente enfocado, ya que el índice de pestañas puede cambiar a una ubicación inesperada (índices de pestañas y, por lo tanto, lectores de pantalla leídos de arriba hacia abajo). En términos de código CSS, esto a menudo aparece como si fuera una sombra azul, pero en realidad es un esquema, ¡así que asegúrate de no sobreescribir este estilo!

06. No crees presión (diseño web accesible)

A nadie le gusta sentirse presionado, pero para las personas con discapacidades motoras o cognitivas, la presión puede provocar ansiedad. Las interfaces se han vuelto mucho más dinámicas con el paso de los años, a medida que más y más tareas pueden ser completadas usando un dispositivo. Lamentablemente, demasiadas experiencias dinámicas son el resultado de que los diseñadores intentan hacer que las interfaces de usuario sean más imaginativas a costa de la usabilidad. Un consejo útil sería simplificar el diseño y eliminar elementos dinámicos innecesarios.

Esto incluye carruseles, ventanas emergentes, alertas y animaciones que distraen.

A continuación, veamos cómo podemos hacer que estos elementos, en caso de que los necesitemos, sean accesibles para las personas con discapacidades. En primer lugar, necesitamos añadir un nivel de control para la reproducción automática de medios que exija atención, ya que esto podría añadir una cantidad incómoda de carga cognitiva adicional para las personas con discapacidades cognitivas. La regla es, tal y como se define en la WCAG 2.0, que si el medio se ejecuta durante más de tres segundos, debe ser controlable. Cualquier otra cosa que se desplace, parpadee o se mueva automáticamente sin que el usuario tenga que interactuar con ella (es decir, animaciones y carruseles) también debería ser controlable si dura más de cinco segundos.

Los movimientos inesperados son desagradables

Por lo general, los movimientos de comunicación inesperados son desagradables para los usuarios y es mejor evitarlos. Ten en cuenta que una regla similar se aplica a los elementos que parpadean más de tres veces por segundo, especialmente si es de alto contraste y rojo, ya que esto puede provocar convulsiones.

En cuanto a los mensajes de chat, alertas, recordatorios, noticias, etc, los usuarios deben poder limitar su frecuencia para disponer de más tiempo para leer y comprender lo que se está comunicando, y también es aconsejable dejar que el usuario descarte fácilmente cualquier alerta u obstrucción visible con la tecla esc. La presión para llevar a cabo una tarea es a veces inevitable, ya que algunas interfaces (como las interfaces bancarias) pueden tener un tiempo de espera por razones de seguridad, y naturalmente estas alertas tienen que ser obvias. En este escenario, a los usuarios con discapacidad que necesiten más tiempo se les debe ofrecer la oportunidad de hacerlo, haciéndole saber a la interfaz que el usuario no la ha abandonado y que por error dejó sus datos expuestos.

07. Relevo con los desarrolladores

Cuando se trata de mejorar la accesibilidad, los desarrolladores deben compartir la mitad de la responsabilidad, especialmente cuando se trata de hacer que las interfaces de usuario sean fáciles de leer para el lector de pantalla. La optimización del diseño web accesible para lectores de pantalla se realiza principalmente entre bastidores y no afecta en absoluto a los usuarios no discapacitados, lo que hace que estos sitios web sean muy inclusivos para los usuarios de todas las capacidades.

Para aquellos que se lo pregunten, un lector de pantalla ayuda a los usuarios con discapacidad visual leyendo en voz alta lo que hay en la pantalla. ¿Pero qué hay de las imágenes? ¿Qué pasa con los iconos sin etiquetas de texto? ¿Cómo es que los lectores de pantalla transmiten exactamente elementos de diseño sin descripción de texto, y cómo estas tecnologías de asistencia cambian rápidamente el enfoque a puntos de referencia clave como la búsqueda y la navegación? Bueno, aquí es exactamente donde el desarrollador entra en escena.

Repasemos algunos de los aspectos clave en el diseño web accesible:

Utilizar elementos HTML semánticos como <nav> y <header>.
Utiliza las funciones de referencia de ARIA para añadir más contexto a los elementos HTML
Declarar el lenguaje (correcto) (guía WCAG aquí)
Formar siempre elementos
Utilice “texto alt” (Error! Nombre de archivo no especificado.) para alternativas de texto a las imágenes puedes revisar este artículo.
Proporcionar opciones sin JS y nunca utilizar scripts en línea.

08. Elige gestos sencillos

La elección de gestos sencillos en lugar de gestos complejos ganará a los usuarios no discapacitados, al tiempo que hará que las interfaces de usuario sean accesibles para los usuarios discapacitados. Los gestos tienden a diferir entre aplicaciones y sitios web. En primer lugar, está la cuestión de las expectativas del usuario; por ejemplo, es bastante normal que las interacciones en las aplicaciones de pantalla táctil se produzcan al pasar el dedo por la pantalla, pero los usuarios no suelen pensar en pasar el dedo por un sitio web (ni siquiera por un sitio web para móviles). Aparte de eso, ¿hay algo que vaya más allá de la simple pulsación y el clicteo para los usuarios discapacitados?

La respuesta es sí, pero también son un poco intimidantes para los usuarios no discapacitados, con la posibilidad de que el swiping sea una excepción, ya que se puede hacer sólo con el pulgar. Quiero decir, ¿alguna vez has intentado girar un mapa de Google? Es una experiencia muy quisquillosa, y para aquellos con alguna discapacidad motora sería una tarea casi imposible de llevar a cabo. Dado que Google Maps no ofrece una forma alternativa de rotar utilizando botones en los que se pueda hacer clic, esta funcionalidad no es accesible ni inclusiva.

¿Realmente necesitamos este gesto?

Así que tenemos que preguntarnos caso por caso, ¿realmente necesitamos este gesto complejo? Por ejemplo, ¿funcionaría una columna estática y vertical tan bien como un carrusel deslizante? En ambos escenarios tendríamos el contenido desbordando la vista de cualquier manera, así que ¿qué es lo que realmente consigue un carrusel de deslizamiento? ¿Podría ser el swiping una mejora progresiva para los usuarios no discapacitados? Más simple es mejor en este caso.

Mientras tanto, asegúrate de que los objetivos de las tomas sean al menos 44px2 (para que sean fáciles de tocar y hacer clic, y también para el diseño web accesible visualmente) y razonablemente espaciados (para reducir el número de clics de error).

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)