diseño web

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.


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.


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.


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.


Aprende a diseñar lading pages perfectas para aumentar conversiones

Lading pages perfectas


Si quieres descubrir cuáles son los principios psicológicos fundamentales del buen diseño de una página de destino o lading pages, que convierta un 20% o 30% más que tu sitio web actual. Tienes que tomar éste curso.


Para diseñar landing page perfectas no es necesario que sepas utilizar programas especiales de diseño. Incluso no es indispensable que sepas de programación.


No vas a utilizar ni una línea de código, durante el diseño de la landing page.


Lo que me gustó del curso es que aprendes mucha teoría. La cual ves aplicada en ejemplos prácticos.


Los mejores uniformes usados durante las copas mundiales de fútbol

Patrones de uniformes de las selecciones de fútbol


Un fanático del diseño y del fútbol, se dio a la tarea de reunir cientos de patrones que fueron o van a ser utilizados en las playeras de las selecciones que participarán en la Copa Mundial de la FIFA.


El diseñador reunió los mejores uniformes que se utilizaron desde el mundial del año 1930.


En total son 520 patrones tomados de las playeras de los 32 equipos que participaran en la Copa Mundial de la FIFA 2018.


El nombre del proyecto que reúne cientos de patrones es «Soccerpattern». Es una idea del diseñador Matthieu Teyssandier.


Aprender a usar Google Adwords para que hagas campañas publicitarias con anuncios online exitosos

Curso Adwords


En este curso vas a aprender las técnicas, herramientas y trucos que utilizan los expertos, para hacer campañas en Google Adwords.


Conocerás cual es la teoría que hay detrás para crear publicidad online efectiva. Sabrás cómo y en dónde encontrar las mejores keywords. Para que tu anuncio le llegue a las personas adecuadas.


Además te explican cómo hacer para que pagues poco dinero, cada que alguien de clic en tu anuncio. De esa forma tendrás más ventas de tus productos o servicios y obtendrás más visitas a tus páginas.


Crea páginas web en versión móvil de manera fácil y divertida con Wix

Páginas web gratis

Para que tu página se encuentre bien posicionada en los resultados de Google, es indispensable que tenga una versión móvil. Con un diseño que sea atractivo e interesante y además de que todos sus elementos se puedan ver bien, en cualquier pantalla de celular o tableta.

Además de que en los últimos años, cualquier página de internet es más visitada desde dispositivos móviles, que en computadoras de escritorio.

Por eso y por otros motivos que más adelante explicaré, es necesario tener una página en versión móvil.  Es muy fácil crear una pagina web gratis para móvil, desde el editor de Wix.


Los mejores diseños gratuitos de plantillas para WordPress

Plantillas para wordpress

Elegir plantillas para WordPress no es una tarea sencilla. En el cumpleaños número 9 – si mal no recuerdo-, cambie la plantilla para éste mismo blog.

Recuerdo que tarde por lo menos tres meses en elegir la plantilla adecuada. Me la pasé buscando diseños por todas partes. En páginas que se especializan en el diseño y la venta de plantillas. Pero sobre todo busqué en el directorio de plantillas WordPress.

Lo genial de ese directorio, es que las plantillas que encuentres ahí, las puedes descargar gratis. Además hay una característica que no había visto antes, -por lo menos no la había visto cuando yo cambie de plantilla-. La opción de previsualizar la plantilla en versión móvil y en versión web, en la misma ventana.

Eso te ayuda a ahorrar muchas horas de trabajo. Por que puedes ver el diseño de la plantilla para wordpress, como la verías en un celular o en tablet.