"Mejorando mi sitio web" Diseño: ideas creativas que ayudan a vender Presentación de Vanesa Gambirazio

1. Diseño para Pymes 2.0
@vaneid
Vanesa Gambirazio
Senior Web designer
ID4you Founder | Project and Account Director

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

3. Interfaces 2.0
Estilos gráficos de la web 2.0
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

4. Estilos gráficos de la web 2.0
Caracteristicas gráficas y estéticas de la web 2.0:

5. Diseños de sitios a medida
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

6. Apsot Diseño a medida para Cobertura médica
Diseño a medida para sitio institucional programación a medida en ASP.net

7. CMS Controladores de contenidos
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.

8. Customización de template de Wordpress
Diseño modular y dinámico.

9. Interfaces 2.0
Customización de template de Joomla
Diseño modular y dinámico.

10. Customización de template de Wordpress
Aplicaciones integradas en el diseño de un site. (Flickr‐ Nubes de tags‐ Rss – Redes Fb Tw)

11. Customización de template de Wordpress
Controladores de contenido. CMS para blog con Word Press

12. Customización de template de Wordpress
Controladores de contenido. Blog con Word Press

13. Comunidad Paw (Joomla sobre diseño a medida)
El cliente buscaba comunicar su tarjeta de beneficios para el consumidor final.

14. Comunidad con joomsocial
La implementación de un Jomsocial sobre template.

15. Found Organic (Joomla sobre diseño a medida)
Found organic.com.au
Caso extremo de cómo se puede dejar de notar la estructura de template.

16. Interfaces 2.0
Controladores de contenido. Drupal para sitio MTV

17. Ecommerce 2.0: Tiendas online y tiendas en redes

18. E commerce y Tiendas online
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

19. E commerce y Tiendas online
a) Diseño y desarrollo a medida para corralón de materiales. www.ladrillosnorte.com.ar

20. 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

21. E commerce y Tiendas online
b) Virtuemart: carrito para integrar a sitio Joomla:

22. Paw Accesorios (Joomla sobre template)
Sitio desarrollado con Template Joomla.
El objetivo del sitio era que los comercios minoristas puedan hacer su pedido online.

23. E commerce y Tiendas 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. )

24. Carro Accesorios (Diseño a medida para linkedstore)
Sitio desarrollado con Linkedstore. Diseño a medida para tienda online.

25. Carro Accesorios (Diseño a medida para linkedstore)
Tienda en facebook con Linkedstore.

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

27. Evolución de las marcas al mundo 2.0
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

28. 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.

29. Evolución de las marcas al mundo 2.0
Branding en Redes sociales: Canal de Facebook de Pinturerías Rex

30. Evolución de las marcas al mundo 2.0
Branding en Redes sociales: Twitter de pinturerías Rex

31. Evolución de las marcas al mundo 2.0
Facebook: Aplicación dentro de sitio con FB Connect.

32. 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.

33. 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.

34. Evolución de las marcas al mundo 2.0
¿Cual es la clave para que funcione una campaña con redes sociales?
*) Idea creativa = VIRALIDAD
*) estrategia y difusión Provocación a la respuesta.
*) 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.

35. Facebook Fanpages y aplicaciones
Facebook: Fan pages
Dell Outlet. Publicación de Ofertas.

36. 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.

37. Facebook Fanpages y aplicaciones
Facebook: Aplicación dentro del hotsite con FB Connect.
Stella Artois. Jaques D`Azur no puede ir a Cannes.

38. Facebook Fanpages y aplicaciones
Facebook: Aplicación dentro del hotsite con FB Connect.
Stella Artois. Jaques D`Azur no puede ir a Cannes.

39. Twitter
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.

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

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

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

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

44. Youtube
Youtube: Lookeo de un canal personalizado. El cavernicola.

45. Banners publicitarios en medios
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.

46. Ejemplos de banners
¡¡Muchas Gracias!!
www.slideshare.net/vanesaID
vgambirazio@id4you.com
www.id4you.com
@vaneid
http://ar.linkedin.com/in/vanesagambirazio