Guiabreve

Normalmente no suelo usar frameworks para desarrollar sitios, pero para evitar complicaciones y problemas de compatibilidad esta vez decidí usar el “960 Grid System“.

Para empezar, antes que nada un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado (Wikipedia ™).

Este sistema se basa en un ancho de página de 960 px, el ancho ideal según muchos diseñadores. Lo bueno es que este ancho es perfectamente divisible entre 12 o 16 columnas con lo que podremos ir combinando diferentes anchos y estructuras a lo largo de la página sin problemas.

El framework nos facilita la taréa de crear la página dandonos todo el código CSS necesario para que vallamos creando las distintas columnas en nuestra web de forma que todas queden perfectamente ordenadas en su lugar y con un margen de 10 px por los lados. Lo que hace que cada columna tenga una separación de 20 px. Continuar leyendo »

Un punto importante a la hora de diseñar un sitio web es la colocación del sidebar (A partir de ahora menú). Podemos optar por colocar el menú a la izquierda del contenido, a la derecha o en ambos sitios.

En principio la decisión puede no parecer importante, pero dependiendo del tipo de web o del tipo de contenido del menú puede ser más o menos interesante colocarlo en un lugar o otro. Pasemos a nombrar las ventajas y desventajas de cada posición:

Sidebar en la derecha

Ventajas

• Al leer de izquierda a derecha conseguiremos que el contenido gane importancia en nuestra página dejando el menú lateral en un segundo plano.
• El sidebar en la derecha es ideal para añadir cierta información extra en la vista completa de las entradas como enlaces a redes sociales.
• Al colocar el sidebar en la derecha conseguimos que nuestra página luzca como un verdadero blog.

Desventajas

• Al colocar el sidebar a la derecha el contenido queda en la izquierda de la pantalla y obligaremos a el lector a mirar hacia el borde de la pantalla para leer.
• Perdemos una buena posición para un bloque publicitario, aun que en la derecha también funcionan bastante bien.

Sidebar en la izquierda

Ventajas

• Al leer de izquierda a derecha el menú se verá más lo cual puede ser interesante para colocar publicidad en él, o enlaces importantes para navegar por el blog/web.
• El sidebar en la izquierda hace que el contenido quede más centrado en la página lo que hace que el usuario para leer el contenido mire al centro de la pantalla y no al lateral.

Desventajas

• Al estar en la izquierda le resta importancia/visibilidad al contenido.
• El sidebar a la izquierda hará que nuestra página recuerde más a una web que a un blog.

Continuar leyendo »

Pattern Tap nos permite buscar la inspiración por secciones, es decir: no se trata de la clásica galería en la que se van aglomerando webs con un diseño inspirador si no que nos va mostrando por categorías webs que destacan en algunos puntos.

Por ejemplo, si queremos incluir en nuestro diseño unas tablas o un footer podemos dirigirnos a Pattern Tap y nos mostrará una categoría en la que veremos webs con un buen footer o un buen diseño de tablas.

Los cuatro logos que veis arriba forman parte de una lista de los 50 mejores logos que verás durante este año. Una lista de logos ideales para inspirarse.

A mi, personalmente, una de las cosas que más quebraderos de cabeza me provocan a la hora de diseñar una web, es escoger la combinación ideal de colores. Parece sencillo, pero, es realmente difícil encontrar 3 o 4 colores que combinen perfectamente entre sí y que encajen en nuestro diseño.

Gracias a dios, hay muchas herramientas que ayudan a los diseñadores a superar este problema. Tenemos los clásicos sitios como Colourlovers o Kuler que nos ofrecen una serie de paletas listas para usar en nuestra web.

Pero, luego hay otras herramientas como ColorJack que nos permiten seleccionar nuestros colores ideales de forma personalizada. Nosotros solo tenemos que elegir un color, el principal y luego dependiendo de como configuremos el selector nos dará 5 colores más que combinen a la perfección con el nuestro.

Fennec es el nombre en clave del proyecto de Mozilla que pretende crear una versión móvil de Firefox. Hace unas semanas os mostramos un vídeo en el que se podía ver como podría ser su interfaz y su funcionamiento. Ahora os mostramos su logo, ¿que os parece? (Vía)

Las ventajas de un diseño elástico son muchas una de ellas, la más importante, es que gracias a este tipo de diseños se consigue aprovechar en mayor medida el espacio disponible en pantalla independientemente de la resolución que tenga el usuario.

El mayor problema es que muchas veces no sabemos como hacerlo, o mejor, no sabemos como hacerlo de manera correcta. Por esto Matthew James Taylor a desarrollado varios layouts (esquemas) totalmente líquidos. Estos no usan ni JavaScript ni Hacks CSS y son compatibles con la mayoría de los navegadores además de con los iPhones/iPod Touch.

En la página que ha preparado Matthew para mostrar sus diseños podemos ver en acción hasta 7 esquemas distintos con sus correspondientes explicaciones para que podamos aplicarla a nuestros sitios.

La mayoría se conforma con unas clásicas escaleras, pero otros, prefieren innovar en su diseño y crear algo distinto y novedoso como estas 15 escaleras de diseño. Algunas de ellas son ideales para ahorra espacio, para usarlas como estanterías, librería o cajones. Otras se esconden o son realmente novedosas y extrañas.

Enlace: 15 Escaleras de diseño novedoso (IMG’s)

Algo muy importante para un diseñador web es conocer que fuentes puede utilizar en sus proyectos de forma que todos, o la mayoría de los usuarios puedan ver la web correctamente. Para ello en Font Tester han publicado un lista muy completa con todas las fuentes que podemos utilizar y que se verán correctamente en los sistemas operativos más populares.

Lista de fuentes compatibles con la mayoría de sistemas operativos:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Vía: List of Web Safe Fonts (Font tester)