Plática sobre elementos de diseño, que se deben tomar en cuenta, en cualquier proyecto destinado a Sitios y Blogs en su interacción con las Redes Sociales.

1. Blogs, Redes Sociales
y el Diseño actual
Adan Avelar Islas
@adanvecindad
#SMCMX
blogvecindad.com
tequilavalley.com
México 2010 campus-party.com.mx

2. Antes: Blogs
un Blog es lo que
quieras que sea Redefinición
el Blog no es una
persona, es un
punto de vista.
Interacción en Microblogs y Social Media

3. Blogs
Lo que viene...

4. Blogs
Los blogs se convierten en Redes
Links de Twitter a los blogs
Estar al
día en...
Nos
moveremos
hacia...
TV

5. Diseño Impreso
Los Libros NO morirán
Las revistas y periódicos se
tendrán que adaptar a los
nuevos medios

6. Diseño Web
La meta de un diseño Web debe ser no sólo un sitio
visualmente atractivo o técnicamente impecable, ante
todo debe comunicarse con el usuario.
Cada elemento del sitio debe contribuir a su
identidad única, ya sea en color, su
estructura, tipografía, etc.

7. Usabilidad
✓ El sitio debe ser fácil de usar.
Los usuarios rápidamente
abandonan un sitio web que es ✓ Precisión. Una página web
demasiado complicado o que profesional, no debe tener
requiera explicaciones en enlaces rotos, imágenes que
pantalla. falten, errores de JavaScript, o
cualquier otra cosa que,
obviamente, no funcione. Se
✓ Velocidad. Los visitantes no debe estar absolutamente seguro
tienen paciencia para un sitio de que ninguno de estos
lento. Desafortunadamente, problemas se suban al sitio.
todavía se utiliza dial-up con Por otra parte, debemos probar
módems lentos. el sitio en múltiples navegadores
-Idealmente, se ofrecerá al y sus diferentes versiones.
usuario llegar a su destino en
tres clics.
Internet Explorer.......61.58%
✓ Retroalimentación. Si el visitante Firefox.............................24.23%
tiene que esperar por algo,
debemos advertirle de ello. Chrome.........................5.61%
Por ejemplo, una pequeña Safari................................4.45%
animación que ilustre Opera.............................2.35%
visualmente el progreso de su
bajada. Netscape......................0.75%

8. Tamaño y forma del sitio
‣ 800 x 600 1024 x 768 1280 x 1024 1600
x 1200
‣ ¿Tamaño fijo o “líquido”?

9. Diseño Visual versus
Usabilidad
❖ Minimalismo. ❖ Diseño visualmente rico. Un
Algunos se van por el magnífico diseño visual crea sentido,
minimalismo funcional, como proporciona un contexto, y evoca la
una meta ideal. Aquí se deben emoción.
evitar imágenes, fondos Puede cautivar a un visitante y
coloreados, y diseños de ratificar el profesionalismo y
fantasía. fiabilidad del sitio. También puede
Texto Negro sobre un fondo crear énfasis, establecer relaciones
blanco, con pocos o ningún entre elementos del sitio, y le puede
gráfico sería la página web ideal. servir de guía al usuario para llevar a
cabo su misión. Todo esto es
importante para la experiencia del
visitante, así como su comprensión
del sitio.

10. Creación de una identidad web
La marca es la impresión global de un producto o toda la
organización. Abarca logotipos, empaque, publicidad, su
reputación y por supuesto, el propio sitio Web.
Una marca eficaz tiene una personalidad propia.
Evoca emoción y la separa de
sus competidores en
su producto, servicio
u organización.
Lo más importante,
es que sea inolvidable.

11. Consejos de diseño
Menos es (a menudo) más.

12. Consejos de diseño
Restringirse a lo práctico
Algunos sitios
que antes solo
eran hechos con
Flash, ahora
toman algunos
métodos
interactivos,
más amigables a
los motores de
búsqueda y se
diseñan sitios
híbridos.
HTML-CSS-
JavaSccript en
conjunto con
algunos
elementos Flash.

13. Consejos de diseño
Estudiar los sitios de la competencia
Es imprescindible conocer lo que
hace la competencia, para NO
cometer el mismo error que ellos
tienen o en su caso adaptar
tecnologías que manejan y que
pueden ser útiles en nuestro
sitio.

14. Consejos de diseño
Concentrarse en solucionar problemas de diseño
El diseño debe resolver los problemas de comunicación con
restricciones inherentes: el presupuesto, objetivos de negocio,
el público que ya tiene la marca y la gestión de la organización

15. Accesibilidad
★ Proporcionar contenido idéntico ★ Si, después de hacer todo lo
para personas con posible, no se puede crear una
impedimentos, siempre que sea página accesible, proporcionar
posible o el contenido un vínculo a una página
equivalente en un formato alternativa que sea accesible.
diferente.
★ Diseñar el sitio para dar cabida a
tecnologías de adaptación
(Lectores de sitios)
★ Proporcionar alternativas de
acceso a imágenes, animaciones,
audio o vídeo, que tienen
información importante.
★ Separar la estructura del formato.
Asegurarse que las páginas
siguen siendo útiles cuando
scripts, applets, u otro objeto de
programación se desactiva.

16. Beneficios monetarios en sitios eCommerce
Un sitio web de ventas debe proporcionar la información y el
ambiente que persuade a los visitantes a abrir sus billeteras.
Una aplicación tradicional de negocio, debe entrar en los
cargos de clientes o hacer el seguimiento de inventario,
normalmente se utiliza
una interfaz de usuario gráfica.
La interfaz se basa en el
software de aplicación
que en realidad
realiza los procesos de
transacción y suele ser
construido a mano
por programadores.

17. El contenido del sitio
El manejo del contenido depende del giro del sitio, puede
ser corporativo, de noticias, productos y servicios, blogs,
foros, redes sociales, etc.
Lo principal es actualizar la información ahí expuesta.

18. Arquitectura del Sitio y navegación
‣ La arquitectura del sitio es lo que la mente ve en su estructura.
‣ La navegación debe ser simple, visible y consistente.
‣ Potencializar lo que ya sabe el usuario de la experiencia al utilizar
Internet.
‣ Orientar al visitante de donde está, de donde viene y hacia donde se
puede dirigir.
‣ Proveer múltiples forma de acceder a la información.
‣ Darle al usuario formas de contribuir en retroalimentación al contenido,
si así lo requiere el sitio.
‣ Asegurarse que la navegación es flexible y que se pueda expandir sin
problemas.

19. Diferentes medios de representación
Debemos tomar
en cuenta todas
las posibilidades
en nuestro
diseño. Que sea
flexible y
accesible.
Tarde o temprano los
sitios tienen que ser
visualizados en un
Smart Phone, en
tabletas, ser una
referencia en las Redes
Sociales, etc.

20. Consejos de diseño
Mantener constantes fuentes de

21. Grandes personajes están saliendo de
nuestro país, porque en otros lugares
valoran mejor su trabajo.
Reforma es un ejemplo de lo que no se
debe hacer, tener su contenido protegido.
Un mal terrible es que algunos diseñadores
bajan templates de Flash gratuitos y se los
venden a sus clientes como algo propio.

22. Es bueno reconocer que en
México también se hace diseño
que funciona y de gran calidad.
Como el de la Presidencia.

23. Blogs, Redes Sociales
y el Diseño actual
Adan Avelar Islas
@adanvecindad
#SMCMX
blogvecindad.com
tequilavalley.com
México 2010 campus-party.com.mx