Parte 2 del curso gratuito Diseñando para la Web, ofrecido por Fondiú.

1. 
diseñando
para la web - 2

2. www.fondiu.cl
facebook.com/fondiu.cl

3. Formatos de imagen
Existen dos maneras de representar gráficos en
un computador:
1. Vector
2. Bitmap (mapa de bits)

4. vector
Las formas y colores son el resultado de
operaciones matemáticas ("vectores").

5. vector
Ventajas
• Independiente de la resolución (se pueden
agrandar hasta el infinito sin perder calidad)
• Archivos muy livianos
Desventajas
• Sólo sirve para formas básicas
• No está lo suficientemente soportado en la
Web

6. vector
Software que crea imágenes de vector
Adobe Illustrator Freehand Inkscape Corel DRAW

7. vector
Formatos en la Web
SVG (Scalable Vector SWF (Flash)
Graphics)

8. BITMAP
Las imágenes Bitmap (o mapa
de bits o Raster) representan
la información mediante una
cuadrícula de píxeles
(cuadrados pequeños de
colores).
Las fotografías son
representadas mediante
bitmaps.

9. BITMAP
Son dependientes de la resolución: si
agrandamos demasiado la imagen, veremos la
cuadrícula (conocido como imagen pixelada)

10. BITMAP
Ventajas
• Fidelidad absoluta
• Es la única manera de representar fotos
• Altamente compatible con la Web
Desventajas
• Dependiente de la resolución
• Tamaños de archivo mucho mayores

11. bitmap
Software que crea imágenes bitmap
Adobe Photoshop Adobe Fireworks GIMP Paint
(sí, Paint)

12. bitmap
Formatos bitmap para la Web
JPG GIF PNG

13. ¿qué formato elegir?
Para la Web (y al menos por ahora)
necesitamos usar bitmaps para nuestros
gráficos.
Pero… PNG, JPG o GIF?
Para saberlo, debemos entender el concepto
de compresión.

14. compresión
Todos los formatos de imagen bitmap intentan
comprimir de una u otra forma la información
para disminuir el tamaño del archivo.
(Ya sabemos que la Web es lenta y que el
usuario es impaciente)

15. compresión
La compresión busca abreviar
la información gráfica (pixel
por pixel) con la menor
pérdida posible de calidad.
En lugar de decir
"píxel negro, píxel negro,
píxel negro…" podemos
abreviar diciendo "9 píxeles
negros".

16. JPG
• Permite reproducir millones de colores
• Comprime basado en que el ojo humano es
más sensible a ciertos cambios de color,
saturación o luminancia que a otros.
• A mayor compresión, menor definición
Original (38 Kb) Calidad 50 (5,5 Kb) Calidad 0 (1,7 Kb)

17. JPG
Recomendado para
• Fotografías
• Ilustraciones de muchos colores
• Gráficos con gradientes, sombras y efectos
No recomendado para
• Figuras geométricas
• Logos y texto
• Formas demasiado definidas

18. GIF
• Trabaja con una paleta restringida o
indexada de colores (máximo 256)
• Obtiene formas definidas al pixel
• Permite animación
• A mayor compresión, menos colores
Original (38 Kb) GIF muy comprimido (5 Kb)

19. GIF
Original (15 Kb) GIF optimizado (4,7 Kb)

20. GIF
Recomendado para
• Logos, texto, figuras y gráficos de pocos
colores
• Animaciones
• Transparencias sencillas
No recomendado para
• Fotografías
• Gradientes
• Efectos de sombra, resplandor, etc

21. PNG
• PNG fue creado para ser libre, gratuito (no
usa patentes como GIF y JPG) y flexible
• Es el único formato para la Web que permite
comprimir sin pérdidas
• Es el único formato que admite
transparencia gradual
• Viene en 3 sabores: PNG-8, PNG-24 y PNG-
32

22. PNG-8
• Se comporta exactamente igual al GIF: con
una paleta indexada y transparencia simple
• En ocasiones es más liviano que el GIF, otras
veces no (siempre hay que probar!)

23. PNG-24
• Formato sin pérdidas.
• No es posible definir un rango de
compresión: "Comprime hasta donde
puede" sin afectar la calidad
• Para fotografías puede generar archivos muy
pesados
• Ideal para logos con efectos, gradientes,
sombras, etc.

24. PNG-32
• Idéntico a PNG-24, con la diferencia que
permite transparencia gradual…
Transparencia GIF Transparencia PNG-32

25. ¿Cómo elegir?
• Programas como Fireworks o Photoshop
tienen funciones llamadas Optimizar o
Guardar para Web.
• Selecciona distintos formatos y ve cuál pesa
menos conservando la calidad requerida.
• Haz zoom a la imagen para asegurarte de
que la calidad sea la adecuada (en especial
para logotipos y textos)

26. tipografía en la Web
• Así como la Web tiene sus limitaciones, la
tipografía en la Web también las tiene…
• Es indispensable conocerlas para poder
mejorar nuestro diseño.

27. tipografía en la Web
Limitación 1: no puedes usar cualquier
tipografía
• NADA garantiza que el usuario tenga en su
computador la tipografía que estás usando
• Windows tiene ciertas fuentes, Mac otras,
Linux otras…

28. tipografía en la Web
Limitación 1: no puedes
usar cualquier tipografía
• Pero existen ciertas
fuentes que tienen
equivalentes similares
en la mayoría de los
sistemas:
• ..sí, son pocas.

29. tipografía en la Web
Limitación 2: No todos los sistemas operativos
suavizan el texto de la misma forma
• Y eso quiere decir que tus páginas se verán
distintas en Windows que en Mac o Linux…
• Y el "color tipográfico" también será distinto.
• Incluso el espacio que ocupan las letras a
veces tampoco es el mismo.

30. tipografía en la Web
Limitación 2: No todos los sistemas operativos
suavizan el texto de la misma forma
Windows Mac

31. tipografía en la Web
Limitación 3: El texto TIENE que ser accesible
para la Web
• Sería muy fácil ponerlo todo como una
imagen para conservar mis tipografías
(algunos "diseñadores" lo hacen…)
• Pero la Web es accesible; es parte de su
naturaleza y de su potencial

32. tipografía en la Web
Web Fonts y CSS al rescate
• Hace mucho tiempo que se está buscando
una solución para poder usar fuentes
personalizadas en la Web, manteniendo la
compatibilidad y la accesibilidad.

33. tipografía en la Web
Web Fonts y CSS al rescate
• CSS 3 estrenó una regla llamada @font-face,
que permite adjuntar una tipografía para
usarla en una página.
• Problema: no todos los navegadores lo
soportan.

34. tipografía en la Web
Web Fonts y CSS al rescate
• Dada esta limitación, apareció Web Fonts.
• Existen varias técnicas para las Web Fonts,
pero todas tienen lo mismo en común: dibuja
gráficos vectoriales que simulan ser las
tipografías y esconden detrás texto
seleccionable (y accesible)

35. tipografía en la Web
Web Fonts
• Google Web Fonts
• Cufón
• WebINK

36. tipografía en la Web
Variables a considerar al manejar tipografías
en la Web
• Interlineado
• Espaciado entre caracteres
• Tamaño de texto

37. tipografía en la Web

38. tipografía en la Web

39. tipografía en la Web

40. banners y publicidad
La publicidad en Internet puede ser vista como
una limitante (muy probablemente DEBAMOS
lidiar con ella) o como un desafío (cómo
ofrecer anuncios de calidad y que no disgusten
al visitante)

41. banners y publicidad
• La inmensa mayoría de los recursos de
Internet son gratuitos.
• Alguien tiene que pagar eso… por ende,
debemos acostumbrarnos a trabajar con la
publicidad en la Web

42. banners y publicidad
• Internet y la Web ofrecen una amplia
variedad de canales a las marcas y a sus
agencias de publicidad:
– Avisaje en sitios de alto tráfico
– Avisaje en buscadores (Google Adwords)
– Avisaje en Facebook
– Estrategias de redes sociales (Twitter, Facebook
Fan Pages, Virales, YouTube…)
– Landing Pages para consolidar campañas

43. banners y publicidad
Muchas marcas están comenzando a tratar a Internet
como un punto de venta físico…

44. banners y publicidad
Cómo influye el avisaje en nuestro diseño Web
• 3 grandes formas de incluir publicidad en
sitios Web:
– Lateral o complementaria
– Obtrusiva
– Integrada con el contenido

45. avisaje lateral
• Banners, Calugas, Roadblocks, Microbotones

46. avisaje OBTRUSIVO
• PushDown, Interstitials, Sábanas: Todos
aquellos que se interponen entre el usuario y
su contenido.

47. Integrado con el
contenido
• Aún no muy visto en Chile… se mezcla con el
contenido. A veces casi no parece publicidad

48. Efectos visuales
• Úsalos con criterio. Úsalos al mínimo.

49. Efectos visuales
Photoshop ("Estilos de capa") y Fireworks
("Filtros") poseen galerías de efectos para jugar:
• Sombras difuminadas y sólidas
• Iluminaciones (Glow)
• Biseles (Bevel)
• Rellenos de color
• Transparencias
• Gradientes
• Etc.

50. Efectos visuales

51. Efectos visuales

52. bocetos y wireframes
• Ambos son de enorme utilidad para diagramar
y tener una idea gráfica para el cliente, antes de
lanzarse de cabeza a prototipar el diseño

53. bocetos y wireframes
• "Corregir un error en la fase de
planificación cuesta 1 dólar… corregirlo
en la fase de prototipado cuesta 10
dólares… y corregirlo en la fase de
producción cuesta 1000 dólares"

54. bocetos y wireframes
• La gracia de los bocetos y wireframes es: tener
la mayor cantidad de feedback y correcciones
posibles del cliente, antes de invertir tiempo y
diseño en producir.
• Sumado a la Arquitectura de Información, a una
buena investigación y a una correcta elección
del layout… tenemos todo para crear con
comodidad :)

55. bocetos y wireframes
• Bocetee A MANO. Es barato, directo y amoroso.

56. bocetos y wireframes
(sí, dije amoroso. El dibujo a mano tiene calidez)

57. bocetos y wireframes
• Primero el boceto, después el Wireframe
• Siéntase libre boceteando: después se pone
límites
• Haga rayones, borrones, manchas
• No Necesita Dibujar Bonito Para Bocetear.
• (Haga la prueba dibujando un cubo. Pudo?
Maravilloso. Tiene todo lo necesario)

58. bocetos y wireframes
• El Wireframe es un poco más estructurado.
Puede incluir ya el trabajo con grids, y
usualmente se realiza al tamaño real del diseño
definitivo.

59. bocetos y wireframes
• Aplicaciones para hacer wireframes:
– Photoshop
– Illustrator
– Balsamiq Mockups

60. bocetos y wireframes
Consejos para Wireframes
• No use color (salvo azul para indicar links)
• Use letra Arial (algunos usan Comic Sans)
• No incluya el logo, íconos ni otra información
gráfica a menos que sea estrictamente
necesaria
• No incluya exceso de detalle: sea simple

61. bocetos y wireframes

62. bocetos y wireframes

63. buscar inspiración
Busca en Google:
• Web design inspiration
• Web design examples
• Web typography examples

64. buscar inspiración
Date una vuelta por
templatemonster.com
(sin prejuicios!)
• Observa los diseños,
mira los detalles
• Encuentra uno similar a
lo que necesitas crear
• No tengas miedo a
imitar lo bueno

65. buscar inspiración
Date otra vuelta por nettuts.com
• Realiza los tutoriales paso a paso
• Aprende nuevas técnicas
• Saca ideas

66. buscar inspiración
Nunca, nunca, nunca dejes de
"vitrinear".
• Mira afiches
• Mira portafolios de amigos y gente
exitosa
• Mira concursos de diseño Web
• Aprende recursos nuevos

67. Gracias.
Muchas Gracias.

68. www.fondiu.cl
facebook.com/fondiu.cl