diseño web

Las 10 mejores plantillas de gráficos para redes sociales

plantillas redes sociales


No hay duda de que las redes sociales se han convertido en una poderosa herramienta de promoción de negocios. Incluso te permite presentar a los miembros de tu equipo directamente en tus páginas oficiales en redes sociales.


Además, hoy en día, las personas incluso buscan diferentes productos y hacen compras directamente en las redes sociales. Así que, el aspecto de tu perfil de red social importa mucho.


Si deseas mejorar la apariencia de tu empresa en varias redes sociales, por favor, consulta los siguientes cinco consejos útiles.


La creación de páginas web y las agencias de diseño en México

agencias de publicidad



Según un estudio realizado sobre los hábitos de consumo de Internet por parte de los mexicanos, en los últimos diez años la red de redes ha alcanzado el 70% de penetración entre la población. Sin embargo, un dato curioso es que parece que solo el 10% de las pymes mexicanas atienden a la creación de páginas web corporativas.


Aunque la mayoría de las empresas ya saben la importancia que una página web de calidad tiene en los resultados que obtendrá su corporación, en México todavía estamos un poco a la retaguardia en cuanto a digitalización corporativa.

Se trata de una realidad que pone de relieve las dificultades y reticencias que existen todavía a la hora de confiar y dar el salto a lo digital, a pesar de que esté socialmente asumido que este salto es clave en el éxito de una empresa. En este sentido, las agencias de diseño tienen por delante todo un reto: el de la concienciación. O lo que es lo mismo: hacer ver que sus resultados pueden llegar a ser tan profesionales como eficaces a nivel de resultados y que, por ello, merece la pena invertir en ellos. Lejos de ser una utopía, este desafío es posible gracias a las nuevas herramientas de diseño que encontramos en la propia red.


Spotify creó una web interactiva para visualizar las estadísticas de un nuevo álbum

Página interactiva de Spotify


Bon Iver publicó un nuevo álbum llamado: «i,i», para poder visualizar cómo y en dónde se escuchan las canciones del álbum, Spotify diseñó una web interactiva.


La página arroja un gran número de estadísticas y datos interesantes cada que vistas un país del mundo.


Puedes ver las veces que se ha escuchado una canción en particular del álbum, o puedes ver el clima actual de una ciudad.


Lo interesante de la página no son las estadísticas, es la forma en cómo se despliegan los datos en la pantalla.


Todos los elementos de la página están formados por las letras «i,i», igual que el nombre del nuevo álbum de Bon Iver.


Es una página en blanco y negro, sin nada de colores pero llena de elementos que interactúan con el puntero del ratón. En el fondo de la página se ven animaciones que están hechas solo con las letras «i,i». Si mueves el puntero las letras «i,i» desaparecen o aparecen.


Si todas las ventanas pop-up fueran tan originales como esta no las odiaría tanto

Ventana pop-up interactiva


Esta ventana emergente o pop-up lleva por nombre: Popup-Trombone. Es una ventana pop-up interactiva, tiene música de Trombone, pero no suena al momento de aparecer en el navegador. Como, sí lo hacen la mayoría de estas molestas ventanas.


Para hacer tocar el trombón debes de cambiar el tamaño de la ventana pop-up. Colocas el puntero del ratón en extremo derecho de la ventana, arrastras y sueltas el puntero, en el lugar donde tu quieras.


Al hacer grande la ventana pop-up distintos acordes se escucharán. El primer acorde es: A# (La sostenido) y el último es un B (Si mayor).


Si sabes tocar algún instrumento, no veo por qué no puedas tocar las mañanitas, el himno de la alegría u otra melodía. Haciendo grande y pequeña la ventana pop-up.


Membresía ONE: Todos los gráficos y temas que necesitas en un solo lugar

Membresía ONE


Si eres un diseñador web o solo sueñas con convertir tu sitio web en una verdadera obra de arte, necesitas un montón de materiales, entre los que hay herramientas de diseño, plantillas web, extensiones confiables y mucho más. De hecho, en buscar y adquirir todas estas cosas una por una se tarda mucho tiempo.


¿Pero qué pasa si te digo que puedes conseguir una gran cantidad de los mejores gráficos, temas web y complementos que están recogidos en un solo lugar? De hecho, se trata de la membresía ONE por TemplateMonster.


Manual de diseño con sugerencias para crear Dark Themes

Elementos de diseño Dark Mode



Dark Themes, temas oscuros o modo oscuro es una modalidad de interfaz de usuario que se caracteriza por utilizar un esquema de color donde el fondo es de color negro. Mientras que los demás elementos del diseño, como textos o iconos son de color cloro.


Las aplicaciones para móviles más populares tienen un modo oscuro o un Dark Mode. iPhone en su versión iOS 13, tendrá un Dark Mode. En Windows 10 también puedes activar un modo oscuro.


Dark Mode o Dark Themes, no significa que al hacer un diseño sólo se deben de utilizar color negro de fondo y los demás elementos en color blanco.


Existen directrices que hay que seguir para conseguir una buena experiencia de usuario (UX Design), al momento de crear un Dark Theme.


Esta página de muebles tiene el mejor buscador de sofás de la historia

Buscador de sofás


Made es el nombre de una marca que se especializa en diseñar, fabricar y vender todo tipo de muebles, de alta calidad y a un buen precio.


En la página de muebles podemos encontrar desde: mesas, camas, sillas hasta espejos de distintos tamaños.


Pero lo interesante del sitio, sin duda se encuentra en el buscador de muebles. Está diseñado para darle una buena experiencia al usuario (UX Design). Porque cuenta con diversas opciones, para que el usuario encuentre el sofá perfecto en un par de segundos.


Digamos que quieres encontrar un sofá que mida 2 metros de largo, lo que tienes que hacer es arrastrar la imagen con el puntero del mouse, hasta llegar a los 2 metros.


En la parte inferior de inmediato se van mostrando imágenes de los diferentes sofás que se encuentran en stock con esa medida.


Ahora si quieres refinar la búsqueda, puedes seleccionar los sofás por colores. Para ello cuentas con una paleta de colores, que va desde el rojo, hasta el color blanco.


Si seleccionas el color rojo, una nueva paleta aparece, pero ahora es una paleta de color con distintos tonos del color rojo.


Una web en la que escribes tu ciudad de origen, una fecha para viajar, y te da los destinos más baratos de todo el mundo

Página de viajes


Una de las páginas para viajes con el mejor UX (Experiencia de Usuario) que he visitado en los últimos años. Para conocer los destinos más baratos del mundo, lo único que debes de hacer en la página, es escribir el nombre de la ciudad y el día de salida junto con el día de entrada.


Luego da clic en el botón «Search», debes de esperar unos segundos para que las opciones de destinos aparezcan en el mapa. Los destinos se dividen en: Norte América, América del Sur, Asia, Europa, Oceanía y Africa.


La página te da distintas opciones, para organizar los destinos. Por ejemplo, puedes elegir que los vuelos sean directos y sin escalas. También puedes pedir ir a lugares en donde no te pidan visa para entrar.


Incluso puedes seleccionar los destinos a los cuales quieres viajar, de acuerdo al clima. Si te gusta el calor, la página te recomendará sólo lugares en donde hay mucho sol. Y lo mismo sucede si eres fan de las ciudades donde haga frio.


Algo muy importante es el presupuesto con el que cuentas, selecciona la opción de Budget y selecciona entre $35 pesos, hasta el viaje más costoso de $35,000 pesos. El tipo de moneda se adapta dependiendo del lugar de origen que seleccionaste al inicio. Si tu vives en España, los precios serán en euros. Si vives en Estados Unidos los precios aparecerán en dólares.


Portafolio web inspirado en la interfaz gráfica del sistema operativo Mac OS

portafolio web


Matthew P Munger es un diseñador gráfico y diseñador web, que en la actualidad trabaja como desarrollador web.


Para demostrar sus conocimientos, tanto en diseño como en desarrollo web, creó uno de los portafolios web, más geniales que he visto en mucho tiempo.


Matthew utilizó muchos de los elementos gráficos en su portafolio web, que encontrabas en las primeras versiones del sistema operativo Mac OS.


Puedes interactuar con todos los objetos que ves en la pantalla. Da clic en el menú para abrir las diferentes secciones del portafolio.


Para ver uno de los proyectos diseñados por Matthew, tienes que abrir la carpeta que contiene los trabajos.


Da clic en un archivo para que se abra el documento, y se vean todos los detalles de cada uno de los proyectos.


También puedes dar clic en los iconos que hay en el escritorio. Puedes abrir el disco duro, abrir el disquete, o las carpetas.


Y como punto extra, el portafolio tiene muchos easter egg escondidos por todas partes.


Por ejemplo puedes cambiar el color de los textos y todos los demás elementos. También tienes la opción de tirar los archivos que se encuentran en la papelería.


Hasta puedes apagar el sistema y ver lo que sucede en el portafolio.


Códigos para animar la URL de la barra de dirección del navegador

Animar la URL de la barra de direcciónPuedes utilizar emojis o graphical unicode characters, junto con un poco de código Javascript, para agregar una animación en la URL de la barra de dirección del navegador.

 

Estas pequeñas animaciones las puedes utilizar por pura diversión, no tienen un beneficio en particular.

 

La única animación que sí puede llegar a tener utilidad, es la barra de progreso, que se mueve cuando das Play a un video.

 

Si quieres agregar una animación a la URL de la barra de dirección, tienes que copiar uno de los 8 códigos que más abajo te comparto.

 

Luego debes de pegar ese código en el header, o en la META tag de la página.

 

Si quieres utilizar otro tipo de emoji, también lo puedes hacer. Sólo debes de sustituir los emojis en los códigos.


Errores de Experiencia de Usuario frecuentes en un sitio web, tips y trucos para hacer mejores diseños

Errores de Experiencia de Usuario


El UX o Diseño de Experiencia de Usuario, es una disciplina esencial en cualquier diseño.


Pero hoy nos vamos a centrar en los principales errores que se cometen al momento de diseñar un sitio web.


Y como ejemplo práctico, utilizaré un artículo que publiqué hace algunos meses, aquí en el blog.


Voy a mostrar los principales errores en UX y cómo los soluciono, con unos cambios que cualquier puede hacer.


Plantillas woocommerce que puedes utilizar en tu tienda online

Plantillas Woocommerce


Si tienes una tienda online pero no te gusta su diseño y estas pensando en cambiarlo por uno que se vea mejor.


A continuación te recomiendo un par de plantillas woocommerce que puedes descargar gratis. Y también te comparto unas plantillas premium que puedes instalar en un par de clic.


Encuentras plantillas con diseños elegantes, modernos, minimalistas con diseño responsive, para que puedas vender tus productos desde cualquier celular.


Si ves algún elementos en el diseño de la plantilla que ni te guste, lo puedes cambiar muy fácil. Porque las plantillas están preparadas para ser editadas.


Por ejemplo si quieres poner de fondo el color característico de tu marca en la plantilla, lo puedes hacer en cuestión de segundos.


También puedes cambiar los textos, colocar tus propias fotos o puedes utilizar la plantilla tal cual la descargaste.