diseño: ideas creativas que ayudan a vender

Diseño para Pymes 2.0

Vanesa Gambirazio

Senior Web designer

ID4you Founder | Project and Account Director 

@vaneid

Rediseñando sites ‐Interfaces 2.0: Diseños a medida vs. CMS

Características gráficas y estéticas de la web 2.0:

*  Colores saturados y brillantes

*  Bordes redondeados

*  Brillo y volumen de los elementos

* Formas redondeadas ‐ iconografía

*  Entorno de espacio suspendido

*  Sombra inferior esfumada

*  Fondos claros de interfaces

*  Degradados suaves

*  Estructuras contenedoras modulares

Interfaces 2.0Estilos gráficos de la web 2.0

Caracteristicas gráficas y estéticas de la web 2.0: 

Estilos gráficos de la web 2.0

Características de los Diseños a medida:

• Requieren un diseño y estructura de la información únicos.

• Llevan muchas horas de trabajo para el diseño, maquetado e implementación. 

• Tienen un costo elevado al inicio para el desarrollo del backoffice.

• No requieren upgrades de actualización. Ni mantenimiento.

• Para cada nueva actualización requiere horas de inversión para instalar nuevas 

funciones y cambios.

• Es menos flexible a la hora de introducir cambios.

Ej: APSOT www.apsot.com

Diseños de sitios a medida

Diseño a medida para sitio institucional programación a medida en ASP.net 

Apsot Diseño a medida para Cobertura médica

Diseños de sitios realizados con CMS (controladores de contenidos):

• Se trabaja el diseño sobre la estructura de un template. 

• Llevan menos horas de trabajo para el diseño, maquetado e implementación. 

• Tienen un costo medio al inicio para el desarrollo del backoffice.

• Requieren actualización de nuevas versiones de upgrades. 

• Es más flexible a los cambios.

• Para cada nueva actualización las comunidades tienen desarrollos muy variados de 

módulos que permiten actualziar nuestro site de forma más rápida. Ej. Un widget de 

redes sociales.  

Ejemplos de CMS: 

Joomla ‐ Jomsocial (comunidad), Wordpress, Budypress (comunidad), Drupal, etc.

CMS Controladores de contenidos

Diseño modular y dinámico.

Customización de template de Wordpress

Diseño modular y dinámico.

Interfaces 2.0Customización de template de Joomla

Aplicaciones integradas en el diseño de un site. (Flickr‐ Nubes de tags‐ Rss – Redes Fb Tw)

Customización de template de Wordpress

Controladores de contenido. CMS para blog con Word Press

Customización de template de Wordpress

Controladores de contenido.  Blog con Word Press

Customización de template de Wordpress

Comunidad Paw (Joomla sobre diseño a medida)

El cliente buscaba comunicar su tarjeta de beneficios para el consumidor final. 

Comunidad con joomsocial

La implementación de un Jomsocial sobre template. 

Found Organic (Joomla sobre diseño a medida)

Found organic.com.auCaso extremo de cómo se puede dejar de notar la estructura de template.

Controladores de contenido.  Drupal para sitio MTV

Interfaces 2.0

Ecommerce 2.0: Tiendas online y tiendas en redes

a) Sistemas desarrollados a medida para productos y servicios: 

• Se realiza sobre un diseño a medida. Permite mucha flexibilidad. 

• Se desarrollan en los servidores del cliente.

• Permiten actualizar los productos, servicios y precios.

• Se administra a través de un backoffice y de bases de datos propias.

• Requiere más tiempo e inversión inicial, pero no tiene comisión por transacciones.

• Se puede realizar una integración con dinero mail o paypal, ó un envío de mail para 

reserva de compra.

•Ej . www.ladrillosnorte.com.ar

E commerce y Tiendas online

a) Diseño y desarrollo a medida para corralón de materiales.  www.ladrillosnorte.com.ar

E commerce y Tiendas online

b) Soluciones enlatadas:

• El diseño se trabaja dentro de las posibilidades que brinde la solución, o con selección de 

templates que ofrezca la herramienta.

• Se instala dentro del servidor del cliente.

• Permiten actualizar los productos, servicios y precios.

• Se administra a través de un back que genera bases de datos compartidas.

• Es menos costoso a nivel de desarrollo, pero tiene limitaciones de estructura, 

contenidos y campos, y requiere una inversión inicial.

• Algunos comisionan por transacciones.

• Ej : Shoppify, Virtuemart (joomla), etc

E commerce y Tiendas online

b) Virtuemart: carrito para integrar a sitio Joomla:

E commerce y Tiendas online

Paw Accesorios (Joomla sobre template)

Sitio desarrollado con Template Joomla. El objetivo del sitio era que los comercios minoristas puedan hacer su pedido online.

c) Soluciones enlatadas con costo fijo mensual:

• Se puede realizar e integrar un diseño a medida, o utilizar un template.

• Se instala dentro del servidor del cliente para la tiendaweb y en el servidor de la 

empresa que brinda el servicio para Facebook.

• Permiten actualizar los productos, servicios y precios.

• Se administra a través de un back que genera bases de datos compartidas para ambas 

tiendas.

• Es menos costoso a nivel de desarrollo, tiene un costo mínimo de Setup inicial para 

diseños a medida

• Comisiona por transacciones y tiene un costo mensual.   

Linked store ( carrito de compras con catálogo online en sitio web del cliente y misma 

tienda en Facebook. )

E commerce y Tiendas online

Carro Accesorios (Diseño a medida para linkedstore)

Sitio desarrollado con Linkedstore. Diseño a medida para tienda online. 

Tienda en facebook con Linkedstore. 

Carro Accesorios (Diseño a medida para linkedstore)

Las redes sociales como nuevos canales de difusión para las empresas

Con la creación de las redes sociales y la conectividad a internet, los consumidores 

Se convierten en generadores de opinión y tendencias.  

Las marcas fueron evolucionando para acompañar este crecimiento. 

:: Re‐diseño de logos de empresas de tecnología. Fuente: Neatorama

Evolución de las marcas al mundo 2.0

Branding en Redes sociales:  Pinturerías Rex suma su canal de Facebook y Twwitter para promocionar descuentos y beneficios especiales a través de las redes sociales. 

Evolución de las marcas al mundo 2.0

Branding en Redes sociales:  Canal de Facebook de Pinturerías Rex

Evolución de las marcas al mundo 2.0

Branding en Redes sociales:  Twitter de pinturerías Rex

Evolución de las marcas al mundo 2.0

Facebook:  Aplicación dentro de sitio con FB Connect. 

Evolución de las marcas al mundo 2.0

Facebook:  Fan page Fb y Aplicación dentro de sitio con FB Connect. 

Sedal 7 expertos – Fan page para comunicar los eventos de los diferentes salones de belleza en donde van a estar los expertos. 

Evolución de las marcas al mundo 2.0

Twitter:  Canal de expert salón para difusión. 

Sedal 7 expertos –los usuarios pueden seguir los eventos de los salones vía twitter.    Canal de twitter.

Evolución de las marcas al mundo 2.0

¿Cual es la clave para que funcione una campaña con redes sociales? 

*) Idea creativa 

*) estrategia y difusión 

*) ESPACIO PARA LA CREATIVIDAD DEL USUARIO

¿Cómo podemos difundir un producto o servicio? 

• Campañas SEO Adsense y adwords

• Difusión a traves de Facebook ads

• Landing pages:

(Diseño y armado de una página de llegada de una promo. Puede estar aparte del sitio 

institucional promoviendo un concurso, o descuento especial. 

= VIRALIDADProvocación a la respuesta. 

Evolución de las marcas al mundo 2.0

Facebook:  Fan pages 

Dell Outlet. Publicación de Ofertas. 

Facebook Fanpages y aplicaciones

Facebook:  Aplicación dentro del hotsite con FB Connect. 

Stella Artois. Jaques D`Azur no puede ir a Cannes.  

Evolución de las marcas al mundo 2.0

Facebook:  Aplicación dentro del hotsite con FB Connect. 

Stella Artois. Jaques D`Azur no puede ir a Cannes.  

Facebook Fanpages y aplicaciones

Facebook:  Aplicación dentro del hotsite con FB Connect. 

Stella Artois. Jaques D`Azur no puede ir a Cannes.  

Facebook Fanpages y aplicaciones

Twitter: Lookeo de fondos como espacios de diseño y comunicación. 

Tips para el lookeo:

* Aprovechar los styles que vienen predeterminados.

* Utilizar un fondo a modo inspirativo.

* Utilizar el fondo como espacio de difusión de un evento.

* Utilizar el fondo como espacio de información de contacto.

* Hacer una prueba crossbrowser/monitores.

Twitter

Twitter: Lookeo de fondos como espacios de diseño y comunicación. 

Twitter

Twitter: Lookeo de fondos como espacios de diseño y comunicación. 

Twitter

Twitter: Lookeo de fondos como espacios de diseño y comunicación. 

Twitter

Twitter: Lookeo de fondos como espacios de diseño y comunicación. 

Twitter

Youtube: Lookeo de un canal personalizado. El cavernicola.  

Youtube

Banners  y rich media banners con medición de estadísticas: 

* Publicidad como instrumento de medición de target.

* Permiten identificar tiempo de permanencia en el banner.

* Permiten medir selección de preferencias de productos.

* Permiten cargar info por Rss, audio y video.

* Tienen 3 años de crecimiento en expansión. 

* IAB (Interactive Advertising Bureau) afirmó que este formato el año pasado se superó la cifra de 1,5 millones de dólares de inversiónes de MKT. 1/3 del capital invertido en estas campañas. 

Banners publicitarios en medios

Ejemplos de banners Ejemplos de banners

¡¡Muchas Gracias!!www.slideshare.net/vanesaID

vgambirazio@id4you.com

www.id4you.com

@vaneid

http://ar.linkedin.com/in/vanesagambirazio