Diseño Web

5 consejos básicos para el Mobile Commerce

Sebastián Thüer · 19.09.2013 ·

El comercio móvil, también denominado m-commerce, ha tenido un fuerte crecimiento en los últimos años, acción que no debe sorprendernos. Con el aumento en las ventas de los smartphones se ha generado un realce en las ventas que se realizan a través de estos dispositivos, comprando de una manera fácil y segura.

Gracias a datos brindados por Shopify, y de acuerdo a la firma Berg-Insight, se anticipa que para el año 2015, el uso de smartphones sea de 2.8 billones de usuarios de manera global, apostando por un crecimiento que seguirá sin parar.

Es por esto que si estás buscando iniciar tu negocio a través de una tienda virtual, debes seleccionar la mejor opción que te permita ser vista en estos millones de smartphones. Para lo anterior, debes tomar acciones de mejora que no dejen que tu tienda se vea de baja calidad y descuidada; solo recuerda la cantidad de personas que te pueden recomendar, o en el peor de los casos, evitar.

A continuación te presentamos 5 consejos básicos que debes poner en práctica si estás considerando ingresar al mundo del Mobile Commerce.

1. Diseño adaptado

Muchos sitios o tiendas virtuales se ven excelentes desde una PC, pero no son lo más útil desde un smartphone. Es por eso que es necesario considerar que el diseño del sitio sea adaptable tanto para PC como para móviles, sin comprometer su calidad.

2. Rapidez y facilidad en la navegación

Al no comprometer el diseño del sitio, se tiene que considerar no bajar la calidad y rapidez en la navegación, ya que el cliente quiere encontrar lo que necesita de manera rápida. Hay plataformas que ya tienen internamente códigos y sistemas que producen sitios adaptables para PC, smartphones o tablets Android o iOS, sin necesidad de que hagas algo.

3. Excelente fotografía

Recuerda que tu sitio a lo mejor es lo único que el cliente va a tener como recurso para conocer tus productos, y solamente por imágenes o videos. No tienen acceso a tus productos de manera física, así que tu primordial objetivo es convencerlos de que deben comprarte, porque tú tienes los mejores productos que satisfacen sus necesidades. Así que considera que las imágenes que coloques en tu sitio deben verse claras y de excelente calidad, sin pixelearse ni mucho menos verse borrosas. Invierte en este recurso y veras beneficios.

4. Compatibilidad con diferentes navegadores

Ya sea que tengas un celular Android, iOS, Blackberry o Windows Phone, sabes que existen diversos navegadores que puedes utilizar como Google Chrome, Opera, Safari o Explorer. Definitivamente tu tienda debe estar disponible para todas estas opciones, sin requerir uno en especial. De lo contrario, causará malestares a tus clientes que no buscan un navegador especial, sino una opción de compra. Así que procura que todos los navegadores acepten tu sitio o, en su defecto, la plataforma de comercio electrónico que hayas decidido utilizar.

5. Tener presencia en redes sociales

Este es un punto en el que nos gusta insistir. Las redes sociales son la oportunidad perfecta para promocionar tu negocio de una manera fácil y, sobre todo, gratis. Si a esto le sumamos que ahora la mayoría de los usuarios con un smartphone lo que más consultan son las redes sociales, entonces sabremos que puede ser el primer paso para que tu cliente potencial conozca tu sitio. Da de alta tu página de Facebook, tu cuenta de Twitter, sube imágenes a tu cuenta de Pinterest o Instagram y mantenlas actualizadas.

Lo principal, siempre mantente al pendiente de tu sitio, los pedidos enviados y recibidos y brinda un servicio de atención al cliente pre y post compra que hable bien de tu tienda y de ti como dueño. Recuerda que puedes tener tu negocio al alcance de tu mano, y afortunadamente hay dispositivos electrónicos que te facilitan estas tareas.

Disclaimer: Este post está realizado a partir de un acuerdo de colaboración con Shopify.

Las tendencias en diseño web del 2013 [infografía]

Sebastián Thüer · 09.09.2013 ·

Hoy todavía muchos siguen pensando en el diseño como una cuestión meramente ornamental para «hacer bonito» un determinado mensaje. De poco importa lo mucho que se ha escrito sobre el diseño como proceso, sobre la necesidad el hombre como centro de este proceso y, en mi opinión, la línea cada vez más difusa que separa la forma del contenido.

Sin embargo, no por ello el diseño deja de seguir determinadas tendencias que están marcadas, por un lado, por las necesidades puntuales del momento; y, por otro, y por soluciones repetidas a un mismo problema que se van transformando en convenciones no escritas.

De este modo, podemos interpretar las tendencias en diseño como una dirección general que siguen los diseñadores y creadores de interfaz de usuario en la búsqueda eterna de combinar elegancia con funcionalidad. Aquí van algunas de las tendencias más persistentes en diseño web para el 2013. Si no querés leer todo abajo tenés la infografía que lo resume todo (en inglés).

Diseño adaptativo / responsivo: Lograr que un sitio se va bien en la pantalla de la PC, una tablet o celular ya no es algo deslumbrante sino esperable. Con el crecimiento de la navegación desde dispositivos alternativos a la computadora de escritorio la necesidad de tener un diseño que se adapta al tamaño de pantalla del usuario es cada vez mayor.
Metro: Esta vez, Microsoft lo hizo bien. La nueva interfaz Metro que introdujo en Windows 8 y fue resistida en sus comienzos se está imponiendo. Diseños planos, en mosaicos y con un lugar preponderante para una tipografía clara, simple y elegante.
Minimalismo: Ya no es una tendencia sino una necesidad. En una web superpoblada de aplicaciones y pantallas los usuarios quieren usar interfaces simples con curvas de aprendizajes lo menos pronunciadas posible. La clave: mantener el diseño tan simlpe como se pueda.
Tipografía: Basta de iconos incomprensibles y superpoblación de botones. Al final lo más claro es llamar las cosas por su nombres y tomarse tiempo para elegir una tipografía bonita, clara y de fácil lectura. El ABC del diseño editorial: títulos grandes con tamaños que correspondan a su jerarquías, párrafos separados y con buen interlineado para que leer se una experiencia agradable.
Parallax scroll: Un viejo recurso de las consolas Nintendo se está poniendo de moda: desplazar el fondo de forma más lenta que los objetos que están al frente. Es un recurso bastante fácil de implementar, consumo pocos recursos en hardware pero es muy efectivo para dar sensación de movimiento y profundidad en un sitio web.
Scroll infinito: Este punto particularmente no es me mi agrado pero hay que reconocer que es una tendencia de hoy en la web. Hacer scroll hasta el final de la página sin que esta nunca termine porque se van agregando nuevos elementos. Muy popular para redes sociales y sitios con mucha información visual como Facebook, Pinterest, Google Images, entre otros.
Header fijo: Consiste en mantener el encabezado de la página fijo cuando nos desplazamos hacia bajo de modo tal que nunca desaparezca y siempre tengamos a manos la opción de ver el logo del sitio, la navegación principal y la búsqueda.
One page web site: Basta de inflar artificialmente el tamaño de un sitio web con decenas de páginas. Si tenemos 3 o 4 secciones perfectamente el sitio se puede mostrar en una sola página web desplazándonos hacia abajo.
Imágenes de fondo de gran tamaño: Con la mejora en el ancho de banda a nivel global la opción de emplear imágenes a gran tamaño de fondo es una tendencia que se está consolidando. Ya son muchos los sitios web que están optando por fondos de pantalla completa con algo de texto por delante. Especialmente útil para páginas con formularios de búsqueda y presentaciones.
El contenido primero: Basta de diseñar sitios a ciegas. El contenido es lo primero y sobre esa base hay que armar el sitio web. Ojalá fuera tan fácil para decírselo a nuestros clientes pero hay que hacer el esfuerzo.

Vía DesignTaxi.com

Diseños web innovadores

Sebastián Thüer · 29.08.2013 ·

Un encabezado con logo y menú, un slide con una imagen bien grande, algunas columnas con información y el pie de página. Muchas veces parece que en diseño web no hay nada nuevo bajo el sol. Que todo se reduce a la misma grilla de siempre.

Original And Innovative Web Layouts es una interesante galería que recorre algunos diseños web que quiebran con este estándar y buscan soluciones originales para el mismo problema de siempre: crear sitios bonitos y fáciles de usar.

Abby Putinski

Hackery, Maths & Design

Adam Hartwig

Amsterdam Dance Event

Anderw McCarthy

Award

Baumbastisch

Beurre & Sel

Institut Choiseul

Contad

Cropp

Designer’s Friend

Impress

Edward Carvalho Monaghan

Institute for Emerging Issues

Ende

Esquire

Harry’s

Hatched

Huys

Into The Arctic

John Jacob

Juliana Bicycles

KathArt

Lucas Nikitczuk

Mikael Edwards

National Academy Museum

National LGBT Museum

Neue Yorke

Newsweek

Norwich University of the Arts

Paper & Paint

Postable

The Drawing Room

Trask Industries

Wacom

We Love Noise

World Baking Day

Anatomía de un sitio web adaptativo [infografía]

Sebastián Thüer · 26.08.2013 ·

El diseño web adaptativo o responsive web design no es más ni menos que la recuperación de una vieja técnica del diseño web de la época en que había múltiples resoluciones de pantalla y se buscaba que las páginas encajaran perfectamente en cada una de ellas. Esto eso, hacer un diseño elástico o fluido donde el contenido se adapte al contienente.

Hoy, con la presencia de computadoras de escritorio, tablets y teléfonos inteligente este tipo de diseño ha resurgido. Pero, ¿cómo saber exactamente qué es un sitio web adaptativo? ¿Qué características tiene? Esta infografía nos muestra algunos datos muy interesantes para tener en cuenta.

En primer lugar, lo que he repetido varias veces en el blog: mientras sigan creciendo los accesos desde tablets y teléfonos no tiene sentido seguir haciendo una web que solo se puede ver bien en una computadora de escritorio.

En segundo término, se identifican los componente de un sitio web adaptativo o responsivo: grillas fluidas que se acomodan de acuerdo a la pantalla, imágenes flexibles para ajustarle múltiples tamaños y media query para detectar en qué pantalla se muestra el sitio web.

A continuación, se describen las diferente secciones de un sitio web como el encabezado, la galería de imágenes, la descripción del producto, la información adicional y el pie de página para analizar qué características tiene cada uno de estos elementos de acuerdo al dispositivo donde se reproduzca el sitio web. Todo explicado de manera visual y atractiva en el siguiente gráfico.

Vía Mashable

Consejos para pasar el diseño gráfico al diseño web

Sebastián Thüer · 22.08.2013 ·

Cada vez más los diseñadores alternan sobre diferentes plataformas. Del papel a la web, muchas veces un mismo trabajo se distribuye por múltiples canales y no sé sabe muy bien cuál soporte quedará plasmado el trabajo. De todas formas, cada área tiene sus cuestiones técnicas específicas, sus trucos y un modo de trabajo diferente.

Sin embargo, con esta tendencia a la convergencia muchas veces un trabajo que comienza para papel termina en la web… o viceversa. En este post van algunos consejos básicos para diseñadores gráficos que quieren incursionar en la web.

1. El diseño web es fluido

Hace años que lo repito: Mientras un producto gráfico está cerrado y acabado (al menos como producto, no nos metamos en tema del otorgamiento de sentido); en la web hablamos de un diseño abierto donde no sabemos muy bien bajo que condiciones nuestro trabajo será reproducido. Hoy en día menos que nunca.

Una computadora de escritorio, una tablet o un teléfono o inclusive un smart tv. Las producciones se consumen en diferentes pantallas y con diferentes interfaces. Y un sitio web debe estar preparado para verse bien en cualquier condición. Por eso, hablamos de un «diseño líquido» o «diseño adaptativo» donde cada elemento es una pieza de rompecabezas que se ensambla de distinta forma según sea el tamaño y la resolución del dispositivo bajo el cual se muestra el sitio.

2. Aprender un poco de HTML

Seamos claros: para hacer un trabajo de diseño web medianamente profesional hay que saber un poco de HTML. Hoy en día existen múltiples herramientas que nos permiten trabajar de forma visual y se encarga de generar el código automáticamente. Algunas son muy buenas. Pero en algún punto siempre tenemos que recurrir a trabajar sobre el código, aunque más no se apara insertar un enlace, embeber información de otra página o modificar algún detalle.

HTML es un lenguaje de etiquetas, es decir, que de acuerdo al tipo de elementos que tenemos en una página le asignamos una etiqueta determinada: p a los párrafos, img a las imágenes, a los enlaces… No hay dominar algoritmos ni técnicas de programación, solo tener algo de tiempo y ganas de apreneder.

3. El contenido es dinámico

Cuando estás diseñando un folleto, un libro o una tarjeta normalmente te envían un archivo con el texto a incluir. Sobre este texto aplicamos tipografías, interlineados, márgenes, tamaños, negritas, itálicas, separaciones de párrafo y un largo etcétera. En la web, el texto puede venir predeterminado o puede provenir de una fuente dinámica: una base de datos, una página externa, una actualización de Facebook o cualquier otro lugar que pueda almacenar información.

Es decir, no podemos trabajar sobre un texto concreto sino sobre un área de texto que podrá variar su extensión. Pero también hay una ventaja: podemos obtener también imágenes, videos y todo tipo de contenido multimeida de forma dinámica. Por ello el consejo fundamental es emplear metáforas visuales fácilmente reconocibles por los usuarios.

4. Nuevo sistema de color

Tema de diseño estrictamente técnico: Mientras el modelo de color tinta se basa sobre la síntesis sustractiva (cada vez que mezclamos colores obtenemos como resultado uno más oscuro), la pantallas trabajar con el color luz que funciona por síntesis aditiva (mezclamos haces de luces y obtenemos por resultado un color más claro).

En gráfica se trabaja sobre el modelo CMYK de cuatro colores, mientras que en las pantallas empleamos el modelo RGB. Es decir, los colores no son los mismos y esto se nota particularmente en el brillo de las tonalidades y la saturación de las tonalidades verdosas. Para complicar un poco más la cosa, la forma convencional de referirse a los colores en la web es sobre base hexadecimal.

5. Tipografía en la web

Años los recursos tipográficos para la web eran de una austeridad franciscana. Hoy en día, tenemos más variedad. Sin embargo debemos tener presente que la tipografía que queremos usar debe estar disponible en un servidor y descargarse a la computadora del usuario. Por lo tanto, no se trata de un recurso para abusar.

Al mismo tiempo, tipografías que se ven hermosas en papel pueden tener problemas para mostrarse en pantalla. Y para complicar más la cosa, cada navegador y sistema operativo tiene sus bemoles y particularidades. Por eso conviene chequear bien el texto en diferentes tamaños y pantallas para asegurarse que el contenido es legible.

Eso explica porque hay tantos sitios web que para no complicarse emplean Arial / Helvetica para los párrafos de texto: estas tipografías vienen instaladas por defecto en Windows / Mac instalada y siempre se ve bien.

6. El tamaño de las imágenes importa

El ancho de banda siempre es un recurso escaso. A pesar de la mejora generalizada de las conexiones a nivel global, también es cierto que cada vez más programas y aplicaciones se conectan a la red y que el volumen de datos que se transporta es mayor. Conclusión: sigue siendo importante optimizar el sitio web para obtener una mejor velocidad.

Uno rol importante lo juegan las imágenes: a mayores dimensiones y resolución, mayor tamaño del archivo y más tiempo requiere para transferirse. Por lo tanto es importante limitar la resolución de las imágenes 72 DPI, aunque en el caso de los dispositivos con pantallas de alta definición como es el caso de la tecnología retina para los últimos iPad y iPhones es mejor elevarlo a 150 DPI.

En la web se trabaja básicamente con tres formatos: JPG, GIF y PNG. El primero admite control de compresión por lo tanto hay que afinar el ojo y reducir el tamaño del archivo lo máximo posible sin sacrificar calidad de imagen. Para los otros dos formatos, hay que probar reduciendo la paleta de colores.

7. El impacto del SEO

La optimización de las páginas de un sitio web para ser correctamente indexadas por los buscadores como Google o Bing tiene un nombre: Search Engine Optimization o SEO. Esto es, que ademas de hacer diseños bonitos, funcionales y de acuerdo con el público y los objetivos del producto hay que tratar que los buscadores lo encuentren.

Para ellos conviene prestar mucha atención a algunos elementos clave de una página: el título de la misma (definida con la etiqueta TITLE), los títulos del texto (H1, H2, H3…) y siempre que sea posible tener un poco de texto para los buscadores tengan un poco algo para indexar. Básicamente, los robots de búsqueda son voraces escrudiñadores de textos y, aunque han mejorado, tiene problemas para detectar el contenido en formato de imágenes, animaciones Flash u otro tipo de elementos interactivo.

8. El diseño no es perfecto…

Los diseñadores obsesivos por cada milímetro pueden volver locos en la web. Es imposible tener el control total y absoluto sobre cómo se mostrará cada elemento. Aunque tecnologías como CSS y las adopción de estándares han contribuido a mejorar mucho, lo cierto es que con la variedad de dispositivos, sistemas operativos y navegadores lograr que una pantalla se va absolutamente igual es imposible.

No es para desesperarse. Siguiendo los estándares y empleando tecnologías extendidas se pueden conseguir generar experiencias muy similares. Obsesionarse porque el interlineado no funciona de la misma manera en un iPad o una PC, enojarse porque un pixel rojo no luce del mismo modo en distintos celulares no conduce a nada. En su lugar, mejor preparar un diseño para que pueda verse bien bajo múltiples condiciones.

Vía Design Shack