Diseño 14
Kit Digital del gobierno de Chile
El Kit Digital consiste de una serie de herramientas de comunicación digital, diseño y desarrollo para facilitar la creación y mejora de los productos oficiales de Gobierno.
El contenido se actualizará de forma periódica, agregando nuevos componentes para el diseño y desarrollo de productos digitales e impresos por parte de instituciones públicas.
Los recursos los puedes encontrar en la página oficial
¿Como diseñar un buen Layout para tu página web?
Cuando hablamos de Layout en diseño web normalmente nos referimos a las columnas y las ventanas dentro de ellas, o sea que cosas van arriba y que cosas a la izquierda, que cosas a la derecha y que cosas abajo.
Es muy normal que el logo vaya arriba a la izquierda, hoy en día es casi imposible encontrar una página que no cumpla con ese patrón de diseño, pero respecto al resto de la página, todavía hay muchas opciones y todas igualmente válidas.
Existen múltiples formas de diagramar una página web y este tutorial de interfaces las explica de forma simple y efectiva, además de incluir links a los css de los distintos diagramamientos posibles.
http://www.stepwise.hk/wdwiki/Lecture/InterfaceDesign
P.D: Se debe evitar el diagrama via tablas a menos de que se trate para mailing, debido a la enorme cantidad de clientes estos últimos todavía presentan problemas para mostrar una página de varias columnas ocupando únicamente CSS.
P.P.D: CSS3 Tiene una mangífica propiedad llamada flex box que es muy útil a la hora de trabajar con columnas y diseño responsive.
PNG VS JPG VS GIF
¿Cuál es la diferencia entre PNG, JPG y GIF y cuál de estos formatos debería escoger para mi sitio web?
Formato GIF: Este formato está limitado a 256 colores con una compresión sin perdida, esto quiere decir que cuando se guarda en este formato no se pierden datos (bits) y por lo mismo no se pierde calidad, este formato es muy común en la web y es ideal para para dibujos simples, iconos y gráficos pequeños.
Formato PNG: Es una versión mejorada del formato GIF, además de comprimir las imágenes sin perdida de datos como su antecesor este formato soporta 24 y 32 bits de colores y transparencia (canal alpha) lo que permite tener imágenes de calidad superior. Dentro de todos los formatos sin compresión este es el más utilizado en la web hoy.
Formato JPG es un formato de compresión con perdida, esto lo hace ideal para guardar fotografías que de otra forma pesarían mucho, JPG puede comprimir hasta 10 veces el tamaño de la foto, de los formatos de compresión con perdida, pero una de las grandes ventajas que tiene es que esta perdida es ajustable.
La regla para seleccionar es sencilla:
Los archivos JPGs o JPEGs son para fotografías e imágenes realistas, los PNG para imágenes de trazos muy finos o que contengan mucho texto o texto importante y los gifs son más que nada para iconos y dibujos muy sencillos.
Imágenes de fondo con Background-cover de CSS3
Antes de CSS3 teníamos que recurrir a plugins como backstretch para poner una imagen de fondo en una página web, ahora podemos ocupar la propiedad background-cover, si queremos ponerla en toda la página podemos utilizar el siguiente código:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ahora claro que no estamos obligados a poner la imagen en todo el sitio, podemos aplicarla a un div o una sección, cambiando la parte de html por el id o clase de la etiqueta(s) respectiva(s).
La gran ventaja de esta solución es que la imagen se adapta al ancho de la pantalla y por lo tanto no afectará a la responsividad de nuestro sitio.
El juego de Bezier
Un sencillo juego que te hará un ninja utilizando la herramienta de lápiz de Photoshop
http://bezier.method.ac/
y si te gustan más los números que el dibujo, te recomendamos este post sobre como dibujar lineas bezier directamente en html5.