Las CSS3 permiten a los diseñadores web usar técnicas inteligentes de CSS para crear impresionantes efectos visuales más flexibles sin necesidad de complejas animaciones.
La técnica deTom Kenny’s Stacked Elements con CSS es un ejemplo que muestra una serie de fotos con marco con el efecto 3d de tenerlas apiladas que al pasar el ratón por encima de ellas se ordenan.
Tom Kenny ha usado los pseudo-elementos :before and :after para producir un efecto de pila de imágenes. La ilusión se crea al usar una pareja de imágenes escondidas que no podemos ver. Un poco de :before y :after y CSS y observa el resultado!
Como no hay que advertir que sólo Firefox soporta la transición :before y :after, por lo que si quieres integrarlas para el resto de navegadores necesitaras jQuery o o CSS hacks.
Acabo de conocer,Guide Guide, un plugin gratis para Photoshop CS4 y CS5 para colocar guias automáticas y crear sencillas cuadriculas, algo que solo de pensar en hacer manualmente a los diseñadores no entran sudores.
En el Master sobre Administración y dirección de empresas electrónicas de la Universidad de Zaragoza, nos han mandado realizar un análisis de la página web de Cestic, empresa que se dedica a la venta online de cestas y productos navideños.
Como mi trabajo contiene una carga fuerte de imágenes y en el formato del blog no se van a visualizar bien, he subido el análisis en pdf con el objetivo de su correcta y fácil lectura.
Mi análisis se basa fundamentalmente en el posicionamiento natural de la web así como su diseño, echando un rápido vistazo a los aspectos más destacados.
Los sitios de internet que intentan vender o comercializar algo, ya sean productos o servicios, deben inspirar confianza, atraer a los clientes y facilitarles la compra.
Desafortunadamente, muchas tiendas online fallan en más de uno de los conceptos. A continuación se van a tratar 5 temas que muchos “clientes” odian, y que tu comercio electrónico debería evitar a toda costa.
1. Un diseño gráfico pobre
Muchos consumidores no compran en tiendas que no confían. Es más, la estética del sitio, es decir, como ven los usuarios tu sitio web, puede ser el factor más determinante a la hora de que los compradores juzguen el profesionalismo de la empresa.
Un estudio de la universidad de Stanford (EEUU) de hace 9 años, ya mostraba que el 42% de la gente no confiaba en tiendas online pobremente diseñadas.
Vamos a comprobarlo, ¿a cuál de las 2 tiendas de informática le darías tu tarjeta de crédito?
Conclusión: los consumidores odian un diseño pobre , ya que da una imagen cutre de empresa. Tomate tiempo en construir una tienda online de aspecto bonito y profesional. Tus ingresos lo notaran.
2. Contactar con la empresa: Misión imposible
Los clientes no quieren saber nada del llamado “servicio al cliente” a menos que tengan un problema. Ellos quieren saber que son capaces de ponerse en contacto contigo si lo necesitan, pero no quieren ser molestados con llamadas, chats, o muchos e-mails…
Los clientes odian aquellos sitios de comercio online que tienes que investigar a fondo para encontrar los datos de contacto. O pasar a través de miles de preguntas antes de ver un teléfono o un e-mail. También en 2009, Un estudio de comScore, encontró que el 22% de abandonos durante el proceso de compra se debieron a que el cliente querían hacer preguntas de comprobación y no pudieron.
En resumen, pon tu información de contacto o un formulario en cada página de tu sitio.
3. No se puede filtrar las búsquedas
Las páginas que ofrecen una paginación sin fin, no son cómodas para los usuarios. A menos que solo vendas unos pocos productos, ofrece un filtro por categoría para ofrecer resultados rápidos a las búsquedas.
La navegación filtrada es algo básico para todos los sitios de comercio electrónico, ya que es mucho más fácil así encontrar los productos.
Filtros situado en la columna de la drecha
4. Sin buscador
Parecido a lo anterior, están los sitios de comercio electrónico que no tiene un buscador. La página que más se ve de internet en el mundo es Google, y ¿qué es? Las personas están habituadas a buscar, no las hagas navegar por jerarquías de productos inacabables, cuando se les puede dar lo que buscan en un solo clic.
Eso si, si se pone, que funcione bien, aunque escriban mal la búsqueda, porque sino perderás clientes, aunque tengas el producto que buscan. (Es decir, si escriben zapatiyas, que tu buscador sea inteligente y sepa que buscan zapatillas.)
5. Es obligatorio registrarse para comprar
Muchos clientes odian cuando el sitio de comercio online les hace registrarse o loguearse para hacer una compra. Si ellos quieren comprar como invitados, déjales.
eConsultancy, una consultoría, informó en 2010 que más del 20% de los procesos de compra se abandonaron por la obligación de registrarse.
El primer web site se publicó hace 20 años en 1991 por Tim Bernes-Lee.
Esta infografia muestra un resumen de la evolución que ha sufrido el diseño web. Observala y deja correr tu imaginación, preguntándote como será dentro de otros 20 años.
A la hora de comenzar a realizar el diseño de un sitio web, con una pantalla en blanco delante, una pregunta surje: ¿qué colores uso?
Existen muchas aplicaciones online que nos ayudan a elegir una paleta de colores equilibrada. Kuler es una herramienta online creada por Adobe, en la que lospropios usuarios valoran las paletas creadas.
Puedes buscar paletas que casen con el estilo que necesitas, o simplemente elegir entre las más valoradas.
¿Los diseñadores web siguen las tendencias de color cada temporada?
Realmente no lo sé, aunque si que hay colores que predominan más que otros. Sigas o no sigas las modas en cuanto a cambio de colores se refiere las siguientes series pueden servir de inspiración para tus nuevos diseños.
También sucede que ves un color en solitario y puede parecerte feo, o que no case con tu diseño que tenías pensado, pero viendo los siguientes ejemplos puede que te convenzan.
Rojo Tomate
El color rojo tomate es un tono rojo que tira hacia el azul en la rueda de color. Es un rojo fresco que añade dramatismo sin resultar agresivo a la vista.
Añadiendo color negro, blanco o gris como se muestra en el ejemplo, resulta una llamada de atención al usuario al elemento que coloreamos en rojo tomate.
Violeta
Este color logra resaltar cualquier elemento que quieras ofrecer. Colores para mezclarlo: negro, o gris o añade amarillo o un azul claro.
Turquesa
El turquesa es un color que al no ser azul ni verde es complementario con muchos colores como el naranja, el gris y el azul. El ejemplo muestra una imagen de tonos dramáticos-futuristas en la que se emplea como color base un turquesa con predominio de tonos negros, por si pensabas que era un color de “chica”.
Cada día aumenta el número de smartphones por lo que cada vez hay más personas que se conectan a Internet mediante el móvil debido a la mejora de la tecnología.
Pero aunque cada vez los navegadores son más avanzados y capaces de interpretar CSS, Javascript y otras tecnologías, sigue siendo importante optimizar el website para que se vea con comodidad en las pantallas reducidas y con las conexiones de los móviles, ya que así cualquiera puede consultarla en cualquier momento y lugar del mundo.
Ten en cuenta que hay miles de teléfonos y cada uno es un mundo, con browsers, soportes y capacidades distintas. Si pensabas que si diseñar tu web para que se viera igual en IE, FF, Chrome, Opera y Safari era una pesadilla, bienvenido al mundo de los mil dispositivos.
Pero para que esto resulte más sencillo, a continuación se explican algunos pasos y recomendaciones para crear una versión para móviles de una web.
Detectar si la visita procede de un móvil
Lo primero es conocer si la visita proviene de un móvil o de un ordenador, para mostrarles una versión u otra. Existen aplicaciones webs que te dan el código fuente en diversos lenguajes necesario, y de ese modo poder redireccionarlo.
Existe una norma no escrita que dice usar el subdominio m. para alojar la versión para móviles de una web, ya que es lo más frecuente y será donde buscaría un usuario avanzado.
No se trata de miniaturizar el contenido sino de optimizarlo a un contexto móvil.
Si no quieres usar el subdominio puedes indicarle mediante una hoja de estilos ( media="handheld") que muestre el diseño adaptado al móvil.
Que este adaptado a todas las plataformas
Como ya hemos comentado existe muchas más plataformas, casi tantas como modelos. Los sistemas operativos son numerosos, y las interfaces varían según el fabricante. Incluso, los operadores móviles introducen sus propias modificaciones.
El objetivo que la aplicación web para móviles sea interoperables con el máximo de plataformas. De hecho, una aplicación web móvil bien diseñada no sólo funciona con teléfonos móviles, sino con cualquier clase de dispositivo.
Es decir, la versión móvil de una web debe verse bien en todos los smartphones, no solo en los que usen iPhone/Android.
Si solamente personalizas la web para estas plataformas, seguramente harás que navegar en las demás plataformas sea una pesadilla para más del 80% de los usuarios reales de web móvil.
Diseñar aplicaciones flexibles
Una de las recomendaciones más importantes del W3C para desarrollar aplicaciones dinámicas y de calidad para la web móvil es la de diseñar aplicaciones flexibles, intentando llegar al mayor número de usuarios y dispositivos con un coste reducido.
Por ejemplo, conviene asegurarse de que el texto se adapta a la pantalla, que la anchura sea dinámica, y, si es posible, es mejor crear una versión que no dependa de JavaScript.
Así mismo elimina todo lo que no sea contenido esencial.
Economizar el uso de la red
Esta máxima es vital ya sea para diseñar una web normal y mucho más para una optimizada para móviles. Si un usuario no espera más de X segundos a que se cargue una página web cuando la visualiza en un ordenador, mucho más importante cuando la conexión es través de operadores móviles.
Hay que elegir aquellas funciones de los protocolos web que disminuyen los tiempos de espera, reduce al máximo el peso de todas las imágenes, que los archivos que se van a transferir estén comprimidos, y que los recursos se puedan almacenar en la memoria caché identificando las referencias de cada uno. Hacer un uso restringido de las cookies y no enviar información sobre ellas, salvo que sea imprescindible.
Probar tu versión para móviles
En la red existen algunas herramientas que permiten observar cómo se vería tu web en un móvil:
Descárgate para visualizar tus pruebas Ópera Mini, asi no tendrás que estar mirando tu móvil
En internet encontramos millones de tutoriales sobre Photoshop, creación de iconos para web, botones, gráficos… que muchos diseñadores dejan «prestados» para que otras personas los usemos.
Con todas estas ayudas, incluso personas con escasos conociemientos en Photoshop pueden diseñar webs de gran diseño. A continuación pongo un enlace donde se pueden encontar 40 archivos de photoshop de algunas páginas con increibles diseños.
Ya sea que ayude a la inspiración o de base, espero que os ayude.
¿Cómo influir a la hora de que los visitantes de tu sitio web le den clic al botón de comprar? Esta es una de las preguntas que las personas que se dedican a plantear diseños de páginas web se hacen unas cuántas veces al día. Lo pongo a la derecha, diseño un carrito de aspecto moderno, de color rojo y amarillo para que destaque…
Y es que la cuestión no es baladí, ya que el botón o texto que lleva a hacer la compra sea usado apropiadamente, de una manera intuitiva y teniendo en cuenta la accesibilidad del usuario, puede significar un aumento enorme en las ventas de un sitio web.
A continuación voy a exponer una serie de ideas a la hora de realizar el llamado “carrito online”, que sirvan de inspiración para lograr una página diferente a la de la competencia.
Aunque eso sí, sea como sea el diseño, el proceso de compra debe ser por encima de todo cómodo, fácil y rápido, con lo que trabajar conjuntamente con el programador puede ser algo indispensable en este punto.
¿Texto o imagen?
Muchas veces los diseñadores se complican con diseños rocambolescos cuando lo más fácil es poner un enlace que sea la palabra. Según como sea el diseño del sitio web, la simple palabra COMPRAR, puesta con gracia y estilo, sirve para indicarle al usuario que debe hacer. Eso sí, que siempre se vea remarcada y de manera diferente al resto del menú, no como aquí.
Además ten en cuenta que el diseño debe estar completamente realizado a imagen del producto que se vende. Si vendes palos de golf, puede que no sea lo más adecuado usar un carrito rosa.
Un icono o botón siempre puede resaltar el enlace más que un simple texto, pero no hay que olvidarse del color y la tipografía del enlace.
Di adiós al aburrido carrito de la compra
Existen miles de diseños de iconos de carritos, pero a veces la solución es más simple. ¿La empresa usa bolsas especiales? ¿Cajas? ¿Sobres?
Un icono específico basado en como envía los paquetes la empresa puede resultar muy efectivo, creándose una complicidad cliente-vendedor.
Mejorar la usabilidad, una ayuda visual al usuario
Hablando de usabilidad es bueno ofrecer a los usuarios detalle del estado del proceso de compra, ya que así comprobarán que funciona bien el sistema y que no hay errores en su pedido, sintiéndose más cómodos para seguir navegando por tu web, con la posibilidad de que adquieran más productos o servicios.
Para que el usuario vea estos cambios, es útil que el carrito se diferencie del resto del sitio, de fácil acceso pero sin entorpecer la navegación por las páginas.
Existen diferentes tipos de información que puede aparecer:
Qué productos hay dentro del carrito
El valor de cada producto, cuántas unidades lleva, la suma total…
Que se pueda finalizar la compra o vaciar el carrito.
Opciones de pago: tarjetas, PAY-PAL, transferencia…
El mínimo de productos para comprar
Un enlace a página de ayuda
Di hola a la creatividad
Para ofrecer una experiencia de compra diferente del resto de sitios, se puede crear un diseño diferenciador, como la cesta de rebelio.ie a donde se pueden arrastrar y soltar los productos que se vayan a comprar.
Incitar a la compra
Se puede incitar a la comprar al usuario mediante mostrando una imagen o ícono de compra dentro del contenido de nuestro sitio o como parte del logotipo.
Utilizamos cookies propias y de terceros para fines analíticos. Al hacer clic en “Aceptar” usted acepta que las cookies se guarden en su dispositivo. Alternativamente, puede configurar sus preferencias clicando “Configuración”. ConfiguraciónRechazarAcepto
Privacidad & Ley de Cookies
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
