Diseñar un layout {Parte 1}

Esta entrada forma parte de los tutoriales de los que hablé hace un tiempo sobre cómo hacer un layout. Como había dicho, los dividiré en 2 partes, la de diseño y la de codificación. Hoy comienzo con la de diseño que a su vez estará dividida en 3 partes: header, entradas y sidebar.

Lo primero que yo hago cuando comienzo a diseñar un layout es el header (o cabecera) aunque eso es cuestión de gusto y comodidad pero creo, personalmente, que el header nos dará la pauta y nos guiará para después hacer el resto del diseño.

Antes de diseñar debemos conocer las medidas que tendrá nuestro header. Bien, el tamaño puede variar pero debe ser mediano o grande. Aquí te dejo las medidas más comunes:

+ 900x500px // 900x600px
+ 1000x600px // 1000x700px

Esas son las que yo más utilizo. En general te recomiendo que el ancho no sea más pequeño que 800px ni exceda los 1000px y que el alto no sea menor a 300px ni exceda los 700px.

Luego lo diseñas a tu gusto. La verdad es que no os voy a explicar como diseñar un header porque es una cosa de creatividad... es cómo hacer un blend o un wallpaper, si uno conoce las herramientas que nos ofrece el Photoshop y usa recursos como texturas, pinceles, estilos, etc. tendrá un header bonito y original pero no hay una única manera de hacer un header.

Les recomiendo que entren en diferentes fansites para observar como están diseñados. NO para copiar ideas sino para que puedan darse una idea de cómo es la estructura de un header. Por ejemplo, que llevan una zona con los links de navegación, que en ocasiones tienen iconos que llevan a las diferentes redes sociales, etc.

+ Uso muchos brushes y texturas (sobre todo de luz). El tipo de brushes depende del estilo del diseño que vaya a hacer. Valganse de todoooo lo que les ofrece el Photoshop, usen estilos en los textos, pongan sombras, trazos...

+ Sobre los colores. Trato de elegir 2 o 3 y moverme dentro de esos, en distintas gamas. En lo posible no usen muchos colores distintos. Además es recomendable, más lindo y más vistoso si los colores combinan  con las imágenes que hayan elegido.

+ Sean prolijos. Recorten bien las fotos que sean PNG, no escatimen ni si excedan con los recursos. Las fotos, que no se corten con el borde del archivo, borren lo que sobre, para que todo quede dentro del rectángulo que es nuestro header.

Por ejemplo, cuando ponen un PNG en lugar de que quede como en la primera foto, agarren una goma con bordes difuminados y borrenle el borde para que quede como en la segunda:

También pueden taparlo con algunos pinceles, como aquí:

+ En general, el menú de navegación la pongo dentro de una forma personalizada. Por ejemplo dentro de un rectángulo de bordes redondeados como aquí:

Sin embargo hay muchas maneras de acomodarlo. Verás que en mi diseño actual esta acomodado de manera vertical. Como te digo, todo es cuestión de gusto, imaginación y creatividad.

+ Pueden jugar con las herramientas de recorte y poner imágenes recortadas en forma de círculos o rectángulos, como se ven en mi diseño actual. También pueden poner imágenes en el fondo con una opacidad más baja. Como se ve en este header: {X} Son sólo algunas de las cosas que se me ocurren.

+ ¿Qué más puedo decirte? No lo se... tu sólo concéntrate en explotar al máximo tus ideas, con el tiempo lo irás haciendo mejor. No se aprende nada de la noche a la mañana.

+ Pueden fijarse en mis headers PSD y modificarlos un poco para hacer sus primeros intentos, a veces está bueno intentarlo. Les doy permiso para que les cambien las imágenes por las de sus artistas preferidos. Es para que tengan idea de como acomodar las cosas.

Aquí les dejo los links de los PSD que ya subí al blog {1} {2}

Cuando pueda voy a hacer y subir alguno más. También les dejo algunos que encontré en deviantART, que no hice yo; si usan alguno tienen que poner créditos, pero en realidad se los dejo para que tengan diferentes ideas para crear los propios, ese sería el objetivo:

{1} {2} {3} {4} {5} {6} {7}

Bueno y esto vendría siendo todo lo que tengo para decirles.
Cualquier pregunta o duda que tengan, no duden en dejarla mediante un comentario que les voy a responder. Sus dudas pueden servirme también para agregar cosas a esta guía, lo cual sería muy bueno.

Espero que les sirva de algo, y estén atentos porque próximamente subiré la segunda parte que es sobre que tener en cuenta en el momento de diseñar las entradas.