Download - Diseño pymes 2 0
![Page 1: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/1.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/2.jpg)
Rediseñando sites -Interfaces 2.0: Diseños a medida vs. CMS
![Page 3: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/3.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/4.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/5.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/6.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/7.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/8.jpg)
Diseño modular y dinámico.
Customización de template de Wordpress
![Page 9: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/9.jpg)
Diseño modular y dinámico.
Interfaces 2.0Customización de template de Joomla
![Page 10: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/10.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/11.jpg)
Controladores de contenido. CMS para blog con Word Press
Customización de template de Wordpress
![Page 12: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/12.jpg)
Controladores de contenido. Blog con Word Press
Customización de template de Wordpress
![Page 13: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/13.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/14.jpg)
Comunidad con joomsocial
La implementación de un Jomsocial sobre template.
![Page 15: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/15.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/16.jpg)
Controladores de contenido. Drupal para sitio MTV
Interfaces 2.0
![Page 17: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/17.jpg)
Ecommerce 2.0: Tiendas online y tiendas en redes
![Page 18: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/18.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/19.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/20.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/21.jpg)
b) Virtuemart: carrito para integrar a sitio Joomla:
E commerce y Tiendas online
![Page 22: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/22.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/23.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/24.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/25.jpg)
Tienda en facebook con Linkedstore.
Carro Accesorios (Diseño a medida para linkedstore)
![Page 26: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/26.jpg)
Las redes sociales como nuevos canales de difusión para las empresas
![Page 27: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/27.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/28.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/29.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/30.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/31.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/32.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/33.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/34.jpg)
¿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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/35.jpg)
Facebook: Fan pages
Dell Outlet. Publicación de Ofertas.
Facebook Fanpages y aplicaciones
![Page 36: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/36.jpg)
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 37: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/37.jpg)
Facebook: Aplicación dentro del hotsite con FB Connect.
Stella Artois. Jaques D`Azur no puede ir a Cannes.
Facebook Fanpages y aplicaciones
![Page 38: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/38.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/39.jpg)
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.
![Page 40: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/40.jpg)
Twitter: Lookeo de fondos como espacios de diseño y comunicación.
![Page 41: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/41.jpg)
Twitter: Lookeo de fondos como espacios de diseño y comunicación.
![Page 42: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/42.jpg)
Twitter: Lookeo de fondos como espacios de diseño y comunicación.
![Page 43: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/43.jpg)
Twitter: Lookeo de fondos como espacios de diseño y comunicación.
![Page 44: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/44.jpg)
Youtube: Lookeo de un canal personalizado. El cavernicola.
Youtube
![Page 45: Diseño pymes 2 0](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/45.jpg)
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](https://reader033.vdocument.in/reader033/viewer/2022060203/559d6b551a28ab94678b4722/html5/thumbnails/46.jpg)
Ejemplos de banners
¡¡Muchas Gracias!!www.slideshare.net/vanesaID
www.id4you.com
@vaneid
http://ar.linkedin.com/in/vanesagambirazio