Descargar como PDF, PPTX
Presentacion
- 2. programa pymes2.0 VICTORIA MARAFETTI VM@IDEASQUEFLUYEN.COM DIEGO MARAFETTI DM@IDEASQUEFLUYEN.COM BUENOSAIRES, ARGENTINA TEL +54 11 6009 1595 CONTACTO@IDEASQUEFLUYEN.COM WWW.IDEASQUEFLUYEN.COM
- 4.
- 5. situacionactual dónde me encuentro ¿quéhace mi negocio? ¿tengo sitio web? ¿cuál es su función principal? ¿se encuentra actualizado? ¿qué valor agregado tiene? ¿qué competencia tengo? ¿tiene presencia en redes sociales?
- 6.
- 7.
- 8.
- 9.
- 10. tendencias Lo quese viene. Responsive recordar trabajo en equipo Terminé mi sitio web..y ahora? inspiración Sitios web de referencia. Aprendizaje constante. Dinamismov 3
- 11.
- 13. prototipos wireframes: para qué sirven? -Planificación - Interacción - Definición de contenido - Definir navegación del sitio - Comportamientos - Definición de acciones principales - Diseño de estructura - Layouts ( Responsive design) - Compromiso con emociones del usuario - Patrones de diseño
- 14.
- 17. Ejemplo de ResposiveDesign
- 18. Creado por LibbyLevi para opensource.com
- 19. Imagen tomada dehttp://www.forsmarshgroup.com
- 20.
- 21.
- 22. si muestro productos oescribo un blog Se puede usar un CMS como Wordpress o WIX por ejemplo, que viene hecho de forma predeterminada. si vendo por internet Se puede usar Magento o Tienda Nube por ejemplo, que es un servicio en la nube (cloud service) que maneja toda la infraestructura del sitio. Ejemplo de Blog realizado en Wordpress
- 23. piensaen disenarflujos por qué esimportante Los usuarios que ingresan a tu sitio lo hacen desde distintos lugares y con diferentes niveles de conocimiento y de relación con tu producto o servicio. Por ese motivo debemos llenar ese espacio faltante para que logren su objetivo y realicen su acción de forma sencilla: Ej. un comprador, suscriptor, etc.
- 24. Ilustración de motorcreada por Kevin Hulsey “Deberías crear productos que se conviertan en una parte valorable en la vida de los usuarios”.
- 25. para tener encuenta: - Tener una buena comunicación con el equipo. - Armar un sitio pensado para que posicione en google. - No utilizar Flash para realizar sitios completos. - Revisar los wireframes antes de pasar a la etapa de diseño. - Armar un documento del lado del cliente donde diga lo que el diseñador y desarrollador tiene que hacer y utilizarlo como guía. - Establecer fechas de entrega y revisiones. Se suben versiones. - Respetar los estándares.
- 26.
- 28. DISEÑADOR GRÁF-WEB DISEÑADOR UX DIRECTORDE ARTE enqueconsiste puntos importantes - Análisis de tendencias - Análisis de contexto - Definición de lenguaje visual - Diseño de pantallas - Organización de contenido - Generación del mensaje - Niveles de lectura - Accesibilidad - Experiencia de usuario - Usabilidad - Creatividad equipo
- 30. puntosimportantes título principal atractivo estéticalimpia - fácil lectura fuerte ¨call to action¨ navegación simple y visible imágenes y videos primer área visible vs resto datos más imp. destacados
- 31.
- 32. para tener encuenta: - Revisar los diseños. - Chequear que se cumplan con los requerimientos previamente definidos. - Ser coherentes en cada pieza propuesta. - Analizar junto al diseñador cada pantalla diseñada. Volver a revisar la navegación y aspectos fundamentales de cada una. - Definir fechas de entrega paulatinas para ir avanzando de forma ordenada y no todo dejar todo para lo último. - Realizar la mayor cantidad de cambios necesarios en esta instancia. Es más sencillo.
- 33.
- 34. DISEÑADOR GRÁF-WEB desarrollador web (frontend- backend) tester Stakeholders Project Leaders Product Owner enqueconsiste puntos importantes - Respetar los estándares - Metodologías de desarrollo - Definir la arquitectura - Utilizar herramientas adecuadas - Darle importancia a la seguridad - Tener buen project management equipo
- 35. puntosimportantes trabajo en equipo validacióny testeo respetar diseños aprobados optimización de contenido tiempos de respuesta compatibilidad deploy sin sorpresas
- 36. chrome 50% ie13.5% safari 4.1%firefox 29.6%
- 37. testeo en dispositivosestimación de usuarios geolocalización pruebas de estrés
- 39. para tener encuenta: - Que haya buena comunicación entre las áreas de diseño y desarrollo. - Respetar los estándares. - Versionar las entregas para hacer el proceso más ordenado y poder volver atrás en caso de ser necesario. - Realizar testeos durante toda la etapa de desarrollo. Dejarlo para lo último es riesgoso y puede llevar a encontrarnos con sorpresas a último momento. - Priorizar las funcionalidades más importantes a desarrollar y así poder lanzar mi sitio en versión beta sin esperar a que esté íntegramente desarrollado.
- 40.
- 41. redessociales para qué están? Relacionesentre individuos Redes de contactos Son formas de interacción social crear, editar, compartir contenido actualidad interconexión comunicación protagonismo
- 43. ESTADISTICAS google analytics: para quésirve? - Muestra que hacen los usuarios - Indicador de visitas - Indicador de fuentes de tráfico - Qué páginas recorre el usuario - Palabras clave más relevantes - Anuncio online más eficaz - Visualizar acciones en el sitio - Patrones y tendencias - Porcentaje de rebote - Conversiones
- 44. para tener encuenta: - Analizar si el perfil de mi empresa requiere presencia en las redes sociales o no. No siempre es necesario. - Escuchar lo que dicen los usuarios de nuestros productos o servicios. Ellos nos ayudan a mejorar lo que hacemos día a día - Es muy común recibir consultas, comentarios o quejas a través de las redes. Es tan importante responderlos como si fueran hechas por otros medios. - La creación de una reputación online positiva nos ayuda a mejorar nuestra imagen y a brindar una relación más cercana con nuestros clientes. - No tenerles miedo.
- 45.
- 47. tendencias2013 sitios adaptables simpleza -colores fuertes user center usabilidad influencia en nuestra vida
- 48.
- 49. fuentedeinformacion sitios consultados Smashing Magazine http://www.smashingmagazine.com UXMagazine http://uxmag.com WDL http://webdesignledger.com W3SCHOOLS http://www.w3schools.com
- 50.