diseño pymes 2 0

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

Upload: id4you

Post on 09-Jul-2015

567 views

Category:

Design


1 download

DESCRIPTION

Presentación utilizada en la capacitación para Pymes 2.0. Es material de interés para quien necesita información para rediseñar su sitio, o agregarle funciones acorde a nuevos objetivos comerciales.

TRANSCRIPT

Page 1: Diseño pymes 2 0

Diseño para Pymes 2.0

Vanesa Gambirazio

Senior Web designer

ID4you Founder | Project and Account Director

@vaneid

Page 2: Diseño pymes 2 0

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

Page 3: Diseño pymes 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

Interfaces 2.0Estilos gráficos de la web 2.0

Page 4: Diseño pymes 2 0

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

Estilos gráficos de la web 2.0

Page 5: Diseño pymes 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

Page 6: Diseño pymes 2 0

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

Apsot Diseño a medida para Cobertura médica

Page 7: Diseño pymes 2 0

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

Page 8: Diseño pymes 2 0

Diseño modular y dinámico.

Customización de template de Wordpress

Page 9: Diseño pymes 2 0

Diseño modular y dinámico.

Interfaces 2.0Customización de template de Joomla

Page 10: Diseño pymes 2 0

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

Customización de template de Wordpress

Page 11: Diseño pymes 2 0

Controladores de contenido. CMS para blog con Word Press

Customización de template de Wordpress

Page 12: Diseño pymes 2 0

Controladores de contenido. Blog con Word Press

Customización de template de Wordpress

Page 13: Diseño pymes 2 0

Comunidad Paw (Joomla sobre diseño a medida)

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

Page 14: Diseño pymes 2 0

Comunidad con joomsocial

La implementación de un Jomsocial sobre template.

Page 15: Diseño pymes 2 0

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.

Page 16: Diseño pymes 2 0

Controladores de contenido. Drupal para sitio MTV

Interfaces 2.0

Page 17: Diseño pymes 2 0

Ecommerce 2.0: Tiendas online y tiendas en redes

Page 18: Diseño pymes 2 0

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

Page 19: Diseño pymes 2 0

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

E commerce y Tiendas online

Page 20: Diseño pymes 2 0

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

Page 21: Diseño pymes 2 0

b) Virtuemart: carrito para integrar a sitio Joomla:

E commerce y Tiendas online

Page 22: Diseño pymes 2 0

Paw Accesorios (Joomla sobre template)

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

Page 23: Diseño pymes 2 0

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

Page 24: Diseño pymes 2 0

Carro Accesorios (Diseño a medida para linkedstore)

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

Page 25: Diseño pymes 2 0

Tienda en facebook con Linkedstore.

Carro Accesorios (Diseño a medida para linkedstore)

Page 26: Diseño pymes 2 0

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

Page 27: Diseño pymes 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

Evolución de las marcas al mundo 2.0

Page 28: Diseño pymes 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

Page 29: Diseño pymes 2 0

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

Evolución de las marcas al mundo 2.0

Page 30: Diseño pymes 2 0

Branding en Redes sociales: Twitter de pinturerías Rex

Evolución de las marcas al mundo 2.0

Page 31: Diseño pymes 2 0

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

Evolución de las marcas al mundo 2.0

Page 32: Diseño pymes 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

Page 33: Diseño pymes 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

Page 34: Diseño pymes 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

Page 35: Diseño pymes 2 0

Facebook: Fan pages

Dell Outlet. Publicación de Ofertas.

Facebook Fanpages y aplicaciones

Page 36: Diseño pymes 2 0

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

Page 38: Diseño pymes 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

Page 39: Diseño pymes 2 0

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

Page 40: Diseño pymes 2 0

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

Twitter

Page 41: Diseño pymes 2 0

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

Twitter

Page 42: Diseño pymes 2 0

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

Twitter

Page 43: Diseño pymes 2 0

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

Twitter

Page 44: Diseño pymes 2 0

Youtube: Lookeo de un canal personalizado. El cavernicola.

Youtube

Page 45: Diseño pymes 2 0

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

Page 46: Diseño pymes 2 0

Ejemplos de banners

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

[email protected]

www.id4you.com

@vaneid

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