Este documento presenta una guía sobre cómo crear y mejorar un sitio web para una pyme. Explica los pasos a seguir como analizar la situación actual, definir las claves del negocio, e investigar el proyecto a través de wireframes y prototipos. Luego recomienda conformar un equipo multidisciplinario y tener en cuenta aspectos como el diseño, desarrollo, pruebas y uso de redes sociales y herramientas de análisis para optimizar el sitio. El objetivo final es entregar una web atractiva y funcional

2. programa
pymes2.0
VICTORIA MARAFETTI
VM@IDEASQUEFLUYEN.COM
DIEGO MARAFETTI
DM@IDEASQUEFLUYEN.COM
BUENOS AIRES, ARGENTINA
TEL +54 11 6009 1595
CONTACTO@IDEASQUEFLUYEN.COM
WWW.IDEASQUEFLUYEN.COM

4. 1

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. Tomada por Matt_Lew

7. 2

8. cualeslaclave?

9. difundirlasideas

10. tendencias
Lo que se viene. Responsive
recordar
trabajo en equipo
Terminé mi sitio web..y ahora?
inspiración
Sitios web de referencia. Aprendizaje constante. Dinamismov
3

11. investigaciondeproyecto
contenido
contexto
usuario

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. tiposdesitio
estático
dinámico

17. Ejemplo de Resposive Design

18. Creado por Libby Levi para opensource.com

19. Imagen tomada de http://www.forsmarshgroup.com

20. quetecnologiaselegir?
html5
flash
css
cms

21. tengoqueempezardesde0?
?

22. si muestro productos
o escribo 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é es importante
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 motor creada por Kevin Hulsey
“Deberías crear productos
que se conviertan en una
parte valorable en la vida
de los usuarios”.

25. para tener en cuenta:
- 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. 4

28. DISEÑADOR GRÁF-WEB
DISEÑADOR UX
DIRECTOR DE 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ética limpia - 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. obteneropiniondeterceros,
corregir,armaropciones

32. para tener en cuenta:
- 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. 5

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ón y testeo
respetar diseños aprobados
optimización de contenido
tiempos de respuesta
compatibilidad
deploy sin sorpresas

36. chrome 50% ie 13.5%
safari 4.1%firefox 29.6%

37. testeo en dispositivos estimación de usuarios
geolocalización
pruebas
de estrés

39. para tener en cuenta:
- 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. 6

41. redessociales
para qué están?
Relaciones entre 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 en cuenta:
- 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. 7

47. tendencias2013
sitios adaptables
simpleza - colores fuertes
user center
usabilidad
influencia en nuestra vida

48. preguntas

49. fuentedeinformacion
sitios consultados
Smashing Magazine
http://www.smashingmagazine.com
UX Magazine
http://uxmag.com
WDL
http://webdesignledger.com
W3SCHOOLS
http://www.w3schools.com

50. muchasgracias!
!