curso diseñando para la web, parte 2

diseñando

para la web - 2

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

Existen dos maneras de representar gráficos en un computador:

1. Vector

2. Bitmap (mapa de bits)

Formatos de imagen

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

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

vector

Software que crea imágenes de vector

vector

Adobe Illustrator Freehand Corel DRAW Inkscape

Formatos en la Web

vector

SVG (Scalable Vector Graphics)

SWF (Flash)

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.

BITMAP

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

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

BITMAP

Software que crea imágenes bitmap

bitmap

Adobe Photoshop Adobe Fireworks Paint (sí, Paint)

GIMP

Formatos bitmap para la Web

bitmap

JPG GIF PNG

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.

¿qué formato elegir?

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)

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".

compresión

• 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

JPG

Original (38 Kb) Calidad 50 (5,5 Kb) Calidad 0 (1,7 Kb)

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

JPG

• 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

GIF

Original (38 Kb) GIF muy comprimido (5 Kb)

GIF

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

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

GIF

• 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

PNG

• 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!)

PNG-8

• 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.

PNG-24

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

PNG-32

Transparencia GIF Transparencia PNG-32

• 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)

¿Cómo elegir?

• 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.

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…


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.


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.


Limitación 2: No todos los sistemas operativos suavizan el texto de la misma forma


Windows Mac

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


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.



• 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.



• 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)


Web Fonts

• Google Web Fonts

• Cufón

• WebINK


Variables a considerar al manejar tipografías en la Web

• Interlineado

• Espaciado entre caracteres

• Tamaño de texto


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)

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


• 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


Muchas marcas están comenzando a tratar a Internet como un punto de venta físico…


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


• Banners, Calugas, Roadblocks, Microbotones

avisaje lateral

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

avisaje OBTRUSIVO

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

Integrado con el

contenido

• Úsalos con criterio. Úsalos al mínimo.

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.

Efectos visuales

Efectos visuales

• 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

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"


• 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 :)


• Bocetee A MANO. Es barato, directo y amoroso.


(sí, dije amoroso. El dibujo a mano tiene calidez)


• 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)


• 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.


• Aplicaciones para hacer wireframes:

– Photoshop

– Illustrator

– Balsamiq Mockups


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


Busca en Google:

• Web design inspiration

• Web design examples

• Web typography examples

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

buscar inspiración

Date otra vuelta por nettuts.com

• Realiza los tutoriales paso a paso

• Aprende nuevas técnicas

• Saca ideas

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

buscar inspiración

Muchas Gracias.

Gracias.

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

curso diseñando para la web, parte 2

Design