Categorías
Diseño web

Amazon con nueva cara. Un rediseño que pone en primer lugar a sus dispositivos.

Si has entrado a Amazon lo verás diferente. No eres el único.

El gigante de internet ha rediseñado la totalidad de su web y después de un mes de pruebas parece que ya está disponible para todos.

El cambio más inmediato es la galería de fotos que ocupa todo el ancho de la pantalla y la barra de acceso en gris oscuro de la parte superior.

Captura de pantalla 2015-01-08 a las 16.34.37

Otro cambio radical es cómo funciona los links principales, con desplegables de acuerdo a los departamentos a los que uno quiere ingresar. Además han ordenado una sección propia con el propio hardware de Amazon como las tabletas Kindle.

Captura de pantalla 2015-01-08 a las 16.27.23

Vamos a ver si con ello logran vender más dispositivos propios, después del fracaso de su Fire Phone. El diseño no es responsive porque tiene su propia versión para móviles, que al parecer todavía no han actualizado.

Fuente: The Next Web

Categorías
Diseño web

No pierdas más dinero ¿Cuánto cuesta captar un cliente en internet?

Cualquier negocio que tiene un página web cuenta los medios necesarios para captar nuevos clientes. Si bien es cierto que es muy fácil anunciar en Adwords, Facebook u otro medio publicitario digital, y que muchas veces se pueden lograr numerosas visitas con poco presupuesto, puede resultar que esta inversión genere pérdidas.

Para ello, debemos calcular cuánto te cuesta obtener un cliente vía web. Para hacerlo simple, vamos a poner un ejemplo sobre un medio de publicidad de costo por click (CPC) en el que la empresa paga solamente por cada usuario que hace click y visita tu página web.

Imaginemos que eres una empresa que vende flores y te cuesta pagar US$0.50 por cada vez que alguien busca en Google “venta flores en Lima”, ve tu anuncio y hace click. Pero tu página web no es persuasiva ni responde a las necesidades del usuario. Por tanto tu tasa de conversión es de 1%; es decir, por cada 100 personas que ingresaron a la web vía Adwords y te costó US$50, conseguiste solo un cliente potencial.

Para colmo de males, según las estadísticas de ventas de tu tienda de flores, de cada 10 clientes potenciales, cierran solo una venta. Esto significa que con el CPC de Google Adwords, un cliente nuevo te costó US$500.

Optimización de conversión

Con estos resultados, tu estrategia consistirá en lograr aumentar tu tasa de conversión de 1% al 15%. Con este cambio el costo de un cliente nuevo para la empresa será 15 veces menos y un cliente nuevo costaría US$33.3 y no US$500.

A mejor tasa de conversión el costo por cliente disminuirá. Por ello es importante que cualquier negocio sepa cuánto le cuesta el clente por cada medio y siempre tratar de optimizar los costos. El cuadro de abajo muestra un embudo simple para entender mejor el proceso.

optimizacion-de-conversion

Fuente: Manya.pe

Categorías
Diseño web

6 tendencias de diseño web que dominarán en 2015

La industria del diseño web va evolucionando y con ello modos y formas de cómo se ven las páginas en internet. En el 2014 se van notando cambios y consolidando otros que marcarán lo que será este nuevo año. Aquí explicaremos cuáles serán estas tendencias para el 2015 que se avecina.

Una de ellas y que no se manifiesta en un trabajo gráfico es la disminución progresiva de la necesidad de saber programar para diseñar una página web. Ya hay muchas alternativas para introducir contenido en plantillas o simplemente diseñarlo todo sin tocar una línea de código.

Pero vamos a lo más visual:

1. Diseña responsivo o vete a tu casa

responsive

El responsive design llegó para quedarse, ya no es una opción diseñar de otra manera. O la página se adapta a todas las pantallas o simplemente ese diseño no sirve. Responsive es la nueva norma del diseño web, lo quieras o no.

Con la llegada de los smart watches, los diseños responsivos tendrán que responder a estos nuevos retos.

La web de Andersson Wise maneja bien los bloques que luego se adaptan en pantallas más pequeñas.
La web de Andersson Wise maneja bien los bloques que luego se adaptan en pantallas más pequeñas.

2. Flat design

flatdesign

Cada vez más vemos diseños planos y esta influencia se debe también a los dispositivos móviles y la necesidad de adaptarse a sus capacidades de velocidad de procesamiento.

Los grandes como Microsoft, Google o Apple apuntan hacia esa dirección. El consenso general es que el flat design es una técnica muy favorable para el diseño web: Menos tiempo en degradados o texturas y más en dar soluciones óptimas a problemas de interfase de usuario. Todo va en beneficio del contenido, para que se aprecie sin distracciones.

La web del resumen de 2014 de Google está llena de elementos planos, con ligeros cambios en la tonalidad del color.
La web del resumen de 2014 de Google está llena de elementos planos, con ligeros cambios en la tonalidad del color.

3. Grandes imágenes y videos de fondo

background

El uso de imágenes grandes y videos como background seguirá creciendo en 2015. Esto también es fruto de tener mayores capacidades de banda ancha así como una adecuada optimización de las mismas imágenes.

A esto se añade el efecto “flotante” que tendrá el contenido principal sin comprometer la usabilidad.

Spotify aprovecha el video como fondo en su web-resumen de 2014
Spotify aprovecha el video como fondo en su web-resumen de 2014

4. Enfoque en la tipografía

tipografia

Como parte de la necesidad de enfocarse en el contenido, la tipografía en el diseño web tendrá un papel crucial. Y es que los usuarios están leyendo cada vez textos más largos en internet.
Hay tres aspectos que afectan la lectura en la web: Tamaño de la letra, ancho de la columna y espacio entre las líneas. Y de esto se tomará cada vez más conciencia.

Titulares grandes y generosos, texto legible y de buen contraste. Todo esto usa Seven Rooms en su web.
Titulares grandes y generosos, texto legible y de buen contraste. Todo esto usa Seven Rooms en su web.

5. Scroll sobre clic

scroll

Cualquiera que sepa un poco de analítica se dará cuenta de que la mayoría de los visitantes de su web no pasan del homepage. Es por ello que se está aprovechando este espacio en el diseño web para poner toda la información relevante allí.

En muchas páginas, solo se está diseñando el home. Con ello también los tiempos de carga se reducen considerablemente.

Asimismo, existen técnicas de animación que juegan con el scroll y cada vez salen más ayudas visuales que favorecen que la información siga fluyendo.

Apple juega con efectos de scroll para detallar las bondades de su Mac Retina 5K.
Apple juega con efectos de scroll para detallar las bondades de su Mac Retina 5K.

6. Microinteracciones

microinteracciones

Las viejas ventanas pop-ups están de vuelta ante la necesidad de obtener resultados con una página web, ya sea en forma de retener a los lectores o favorecer un contenido frente a otro.

A pesar de ello, esta tendencia tratará de interrumpir al usuario lo menos posible. Habrá técnicas más sofisticadas que otras, pero el objetivo aquí es que la interacción esté más integrada a la experiencia del usuario.

Conclusión

Este 2015 seguirá apareciendo con novedades. Aquí solo hemos puesto las tendencias más consolidadas, pero mencionamos algunas otras que seguramente veremos, como los ghost buttons, infográficos adaptados a la web, storytelling interactivo y el card design.

A fin de cuentas, son los diseñadores los que promueven los cambios en los estándares del mismo diseño. Ellos son los responsables de transformar las ideas en tendencias, y las tendencias en estándares.

Déjanos en los comentarios qué tendencias piensas que seguirán o se pueden añadir a esta lista.

Categorías
Diseño web

Cambio de cara

Desde hace tiempo que Traxxo pedía un cambio de diseño. El anterior template de WordPress que usaba, Yoko, ha sido muy bueno y ha marcado el inicio a lo que ahora ya es el estándar responsive design. Sin embargo, ya era hora de movernos hacia delante.

Como introducción a lo que cuento hay que aclarar algo: para hacer una página web ya no hay que ser un maestro en programación. Basta con saber lo mínimo indispensable. Este artículo de Ben Hunt es muy claro al respecto: el 99% de páginas web no necesitan un diseño a medida, basta con escoger entre las plataformas y templates que se ofrecen y saber cuáles son los objetivos que queremos alcanzar con dicha web. Es allí donde los diseñadores del futuro tienen que concentrar sus mejores energías, porque no es poca cosa.

A la izquierda el diseño antiguo con el template Yoko. A su lado, el imponente Hueman.
A la izquierda el diseño antiguo con el template Yoko. A su lado, el imponente Hueman.

Lo que quería con el cambio de diseño era darle un look más profesional a Traxxo para inaugurar una nueva etapa del blog. Esta nueva era estará marcada por una clara profesionalización de los contenidos centrados en tecnología, diseño y comunicación. Así como un estilo de redacción más centrado en en análisis que en el reposteo de novedades.

¡Y vaya sí que se nota el cambio! El template a escoger a sido Hueman. Es sorprendente que sea gratuito por lo bien que está hecho y por la cantidad de características configurables que tiene. Se puede escoger la paleta de colores, columnas, sidebars personalizados. Además es responsive. Un lujo

Detalles configurables del template.
Detalles configurables del template.

Vamos a los detalles

Antes de cambiar el diseño me planteé actualizar mi portafolio de trabajos en el blog. Así que la nueva plantilla tenía el reto de mantener el estilo que ya había establecido en dicha página. No hubo problema con hacer esto.

Portafolio de trabajos.
Portafolio de trabajos.

Al instalar el tema te pide que instales plugins adicionales para que todo funcione correctamente. El primero de ellos es: Regenerate Thumbnails que te ajusta los tamaños de las featured images para que sean iguales en la plantilla. Tienes que activarlo una sola vez y esperar. Si tu antiguo tema no tiene featured images tienes que instalar Easy Add Thumbnail para que tome como tal la primera imagen que aparece en el post.

Para poner los botones sociales usa font awesome. Basta con poner el código de la letra y listo.

Por otro lado, tuve un problema para añadir Google+ en la barra de compartir, pero se solucionó con el truco encontrado en esta web.

También hubo que traducir el template al español. Para ello se tiene que instalar el programa Poedit y seguir estas instrucciones.

En fin, el template tiene muchas ventajas para trabajar distintos formatos de post como video o galería. Está muy bien presentado y vale la pena leerse toda la documentación de instalación para sacarle el máximo provecho.

Muestra de cómo se ve un post con galería incrustada.
Muestra de cómo se ve un post con galería incrustada.

Newsletter

Aprovechando el rediseño, he hecho también un newsletter semanal en Mailchimp para los que quieran revisar los artículos de Traxxo en su correo. Si quieren inscribirse pueden hacerlo dejando su correo en la barra lateral. Saldrá todos los viernes.

Espero que les guste esta nueva cara de Traxxo tanto como a mí. Pronto tendremos más novedades.

Categorías
Diseño web

Documental sobre Jeffrey Zeldman

Interesante el documental hecho por Lynda.com sobre Jeffrey Zeldman, uno de los diseñadores web más influyentes en el mundo, sino el que más.