Noticias Diseño – Tutorial Photoshop

¡No todo va a ser trabajar! Desde saijogeorge.com se encargan de amenizarnos la jornada con algunos chistes basados en CSS como el de la imagen que acompaña estas líneas.

Comprar online es una de las actividades que más impulso está cogiendo con el paso de los años, sobre todo en el caso de tecnología, informática, etc. ya nos parece raro acercarnos a cualquier almacén para comprar un disco duro o unos altavoces. Cuando desarrollamos una página web, que integra tienda virtual, existen muchos detalles que debemos cuidar para que sea más efectiva y el usuario termine comprando.

Uno de esos detalles, en el que debemos mostrar especial interés, es los listados de artículos. Debemos contemplas las siguientes opciones:

Foto, nombre y marca. Estos serán los datos básicos del artículo. El nombre debería coincidir con la URL del mismo, de esta forma mejoramos su posicionamiento en buscadores. La foto, lo ideal es que cuente con un fondo blanco, eliminar cualquier tipo de distracción para el usuario y centrarse en mostrar el producto con el mayor lujo de detalles. La marca, en el caso de que el catálogo sea extenso, nos puede ahorrar clics innecesarios puesto que muchos usuarios sólo se centran en algunas en concreto.

Descuentos y novedades. Hay dos anzuelos que nunca fallan. El primero es el descuento, un % de ahorro siempre será una buena llamada de atención. Lo segundo ¿Se trata de un artículo nuevo? Para usuarios recurrentes será perfecto, verán que novedades existen en tu catálogo sin necesidad de dar muchas vueltas.

Precio anterior y precio nuevo. Acompañando al % de descuento, no viene de más mostrar el precio anterior del artículo. Hace que todo parezca más sólido y creíble.

Precio por plazos. Si tu pasarela de pago admite el pago a plazos, es fundamental que detalles el precio mensual. Normalmente son valores mucho más bajos al precio final y resulta muy atractivo para el cliente.

Logra un audio profesional en tus televisiones con los artículos que puedes encontrar en tiendas como Linio. Ofrecen una gran variedad de productos de video como altavoces, home cinema y reproductores.

Recuerda que las tiendas virtuales están en auge y los detalles son fundamentales para desmarcarnos de la competencia. Ofrece algo extra, algo diferente y original.

¿Cuántas veces habéis diseñado una web que requiera de un mapa donde ubicar puntos de venta o algo similar? Con jVectorMap obtendréis una solución perfecta para esos casos. Entre sus ventajas cuenta con:

• Compatibilidad con todos los navegadores actuales, incluyendo explorer 6 en adelante.
• Vectorial. Podrás adaptarlo a cualquier ancho y alto sin perder calidad, perfecto también para dispositivos retina display.
• Posibilidad de generar mapas personalizados (por ejemplo el mapa de un centro comercial).
• Mapa del Mundo, Europa y España (por comunidades autónomas).

Visitar sitio de jVectorMap

¡Vamos poco a poco pero con paso firme! Ya somos algo más de 500 los seguidores de Kaosconcept.net en Facebook.

Gracias a todos por pasaros por este sitio y seguirlo en redes sociales.

Si te dedicas al mundo del diseño Web o de Apps, uno de los aspectos más importantes, a la hora de presentar un proyecto, es que el diseño o boceto parezca real. A continuación os dejo el enlace de un sitio que os ayudará a crear estas presentaciones profesionales con un simple movimiento de ratón. Y es que, sólo tendrás que arrastrar la imagen y se montará automáticamente sobre una foto que elijas entre un amplio abanico de opciones.

- Visitar http://placeit.breezi.com/

Montar una tienda virtual, y que además venda, no es una tarea especialmente sencilla. Influyen infinidad de pequeños detalles que determinarán su éxito. A continuación os revelo 7 claves fundamentales:

Garantía de reembolso.

Internet es un sitio “inseguro” por naturaleza. Nadie sabe realmente qué, o quién, se esconde tras una tienda virtual. Es por eso que la gente necesita una muestra de seguridad por tu parte y ¿qué mejor que devolverle el dinero al cliente si no está satisfecho con la compra? Creas compromiso, seguridad. Acompaña el diseño de tu tienda con algún banner o call to action donde expliques cómo y cuándo se aplica la garantía.

Prueba gratis.

Si tienes la opción de ofrecer muestras, demos o triales (en caso de software) tendrás a muchos clientes desconfiados un paso más cerca de comprar en tu sitio. ¡Está demostrado! Cuando un cliente ha comprado o probado una tienda, siempre hay más posibilidades de que lo vuelva a hacer en esa tienda y no en otra de la competencia.

Buscador y guías

Tu tienda necesita que ningún usuario se pierda o dude de cómo usarla, debe ser accesible y sencilla. Una miga de pan (breadcumb), un teléfono de asistencia telefónica, un buen buscador… son detalles que pueden ayudar mucho a que el cliente sepa dónde se encuentra, cómo acceder a ciertos contenidos, etc. Si dispones de muchos contenidos, como por ejemplo en este servicio de comida a domicilio en DF con Sindelantal México, no será mala idea si estos aspectos toman el protagonismo de todo el diseño inicial.

Satisfacción 100%.

Si la inseguridad sigue siendo un problema en los visitantes de tu web, entonces sería buena idea que entrevistaras a tus antiguos clientes para que fueran partícipes de artículos, entrevistas y encuestas de satisfacción. Con su consentimiento, podrías subir estos resultados a la tienda para que todos vean lo bien que les ha ido a otros consumidores contigo. ¡Los “Casos Reales” están de moda por algo!

Fotos de calidad.

El escaparate de una tienda virtual son las fotos de sus productos. Deben ser grandes, bien definidas y que muestren todas las partes interesantes del producto: fotos frontales, superiores, laterales, etc. No racanees a la hora de subir fotografías de todo tipo, si alguien está interesado en un artículo no hay nada como observarlo desde todas las posiciones y formas posibles. Una buena galería de imágenes por cada producto es de vital importancia. ¡No olvides marcar tus fotos con sellos o con tu propia marca para que no te las copien!

Descripciones únicas y originales.

¿Qué es lo que diferencia a una tienda de otra si ambas venden el mismo producto? Los contenidos. La información. Es importante que despliegues tanta información como dispongas del producto y que, además, sea un texto “artesanal”, hecho por ti, que no de lugar a ninguna opción de encontrarlo repetido. Google valora mucho la originalidad de los contenidos, si creas algo que no tiene nadie mas, serás premiado con un mejor posicionamiento. Para ayudarte en esta tarea, es buena idea que dispongas de un sistema de comentarios donde otros usuarios puedan contar sus experiencias, añadir más información y extender la ficha del artículo.

¡Olvida plantillas y sitios precocinados!

Internet está invadida por cientos de sitios donde montar tu tienda online en pocos pasos, a precios muy económicos, a base de plantillas y código precocinado. Es importante que, si realmente tienes interés en que tu tienda funcione, inviertas un dinero en hacer un sitio 100% a medida. Diseñado y maquetado de forma “artesanal”. ¿Qué crees que hará Google cuando vea que la estructura, código y diseño de tu web es idéntica a la de otros cientos de sitios? Seguramente te será muchísimo más complicado posicionar tu web que a otra persona con una tienda personalizada y realizada por un estudio de diseño y programación profesional.

SVG es la extensión de aquellas imágenes con formato vectorial. Prácticamente, tal y como lo harías en Illustrator. Es fácil de implementar una imagen SVG en tu Web y tiene muchas ventajas:

• Se pueden redimensionar sin perder calidad. Perfecto para Webs Responsive.
• Se ven perfectas en pantallas de alta resolución (como la Retina de iPad).
• Son interactivas, se les pueden aplicar efectos y cambios mediante código.

En este artículo encontrarás numerosos consejos y ayuda para trabajar con este formato ahora tan de moda.

Leer tutorial sobre el formato SVG

Si eres desarrollador web / maquetador, te interesará saber que BrowserShots te permite visualizar tu Web hasta en 200 navegadores diferentes. Es gratis pero presenta el inconveniente de tener que esperar colas hasta de 30 minutos. Si no tienes mucha prisa, y te interesa conocer la compatibilidad de tu código HTML y CSS en diferentes navegadores, no dudes en visitarla.

Curator es una aplicación online, muy sencilla de utilizar, que te permitirá presentar trabajos online como logotipos, ilustraciones, etc. Te envía el PDF por email, con lo que es cómodo para reenviarlo al cliente.

- Visitar la Web

Windows es el peor sistema operativo para desarrollo web pero, para aquellos que no se puedan separar de él (como yo) por cualquier extraño motivo, os traigo los buenos consejos de Marshall Ford. Nos explica los programas que usa: Console2, Git, Sublime Text 2, putty, SASS, COMPASS, Emmet, Live Reload, XAMPP y Jekyll en entorno Windows.

- Leer artículo Windows workflow for web designers