A principios de este año, publicamos un artículo que describe los 5 sitios web de la banda Suck. Hoy vamos a seguir esa publicación creando un diseño de página web de la banda que evite los problemas encontrados por la mayoría de los sitios en esta categoría.
Crearemos la maqueta en Photoshop y aprenderemos sobre algunas características, así como sobre una sólida teoría de diseño en el camino. ¡Empecemos!
El proyecto
Descargar Free Layered PSD
La publicación de hoy es otro proyecto extraído de nuestro programa Design Dilemma. Dos diseñadores independientes, Nathan Futo y Roman Hurton, escribieron en esta semana pidiendo ayuda para diseñar un diseño inicial para el sitio web de una banda.
Como demostró nuestro post anterior, esta puede ser una tarea bastante complicada y el producto final a menudo es desordenado y feo. Abordaremos este problema de frente creando un diseño simple y flexible que cualquiera pueda usar para mantener gran cantidad de contenido.
El proyecto
La publicación de hoy es otro proyecto extraído de nuestro programa Design Dilemma. Dos diseñadores independientes, Nathan Futo y Roman Hurton, escribieron en esta semana pidiendo ayuda para diseñar un diseño inicial para el sitio web de una banda.
Como demostró nuestro post anterior, esta puede ser una tarea bastante complicada y el producto final a menudo es desordenado y feo. Abordaremos este problema de frente creando un diseño simple y flexible que cualquiera pueda usar para mantener gran cantidad de contenido.
Comenzando: La foto de fondo
El primer paso es crear un archivo de Photoshop que esté alrededor de 1200px por 1600px a 72dpi y en RGB. A continuación, queremos un buen fondo fotográfico para nuestro sitio. Algo dramático pero que no distrae demasiado y que aún se ve bien incluso cuando la mayor parte está cubierta por otro contenido.
Te recomiendo que compres una foto de stock barata o la tomes tú mismo, pero como este es solo un ejemplo, crucé a Flickr Creative Commons y tomé esta foto de campo de maíz de Snake-Eyes Photography.
Cuando lance esta foto en su PSD, debería dejar una gran parte del espacio vacío en la parte inferior. Para solucionar esto, establezca la capa de fondo en negro y aplique una máscara a la foto del campo de maíz. Luego, tome su herramienta de degradado y extienda un degradado lineal verticalmente de blanco a negro. Esto debería dar a su foto un fundido gradual a negro sin dañar realmente ninguno de los píxeles originales.
Siempre que sea posible, siempre querrá usar máscaras para realizar cambios no destructivos. Esto se traduce en una flexibilidad incomparable que resulta útil cuando se desea cambiar las cosas. La modificación de la capa real destruye la imagen original y le impide volver a ese punto.
El diseño
El mayor problema con los sitios web de las bandas es que se acumulan tantas cosas en la página de inicio que el resultado final es un desorden desordenado. El contenido tiende a parecer disparejo y improvisado en lugar de parecer una unidad cohesiva con partes distintas.
La salida fácil es simplemente decirle que no ponga tanto en su página de inicio, pero esto a menudo no es una solución muy práctica. En su lugar, debe aprender a crear una página llena de fotos, publicaciones de blog, reproductores de música, publicaciones de Twitter, fechas de giras y más, a la vez que mantiene un diseño atractivo. Se puede hacer? ¡Absolutamente! Y en realidad es mucho más fácil de lo que piensas.
Para comenzar, configure algunas guías en su documento para que creen una única columna centrada de 960 píxeles de ancho. Si tiene Photoshop configurado para ajustar sus selecciones a alguna guía, esto le ayudará a dibujar algunos cuadros para el contenido.
A continuación, crea cuatro cajas blancas dispuestas como las que se muestran a continuación. Esta será la base de todo nuestro diseño. ¿Demasiado fácil dices? ¡No! Este patrón de cuadrícula simple y flexible puede contener una amplia variedad de contenido. De hecho, siéntase libre de organizar las cajas como desee e incluso intente dividirlas de manera diferente. Siempre que su espaciado se mantenga constante y su alineación sea fuerte, puede crear cuadros simples para contener lo que desee.
Agregué una sombra a mis cuadros para ayudarlos a sobresalir un poco mejor del fondo.
El encabezado
Para realizar este proyecto, asumiré que estás trabajando para una banda real. Estos grupos generalmente tienen muchos recursos para trabajar: fotos, portadas de álbumes, etc. Para nuestro sitio hipotético, no tuve ninguno de estos. Afortunadamente, en realidad estaba en una banda de rock en la universidad y todavía tengo todo nuestro material promocional, así que usaré material al azar de esa colección para llenar la página.
Lo primero que tenemos que hacer es llenar ese cuadro de encabezado. Esto podría ser cualquier cosa que te guste, un anuncio para un próximo álbum o gira, una foto de la banda o, mejor aún, lanzar todo lo anterior en un control deslizante jQuery.
Para este proyecto, solo lanzaré una foto de banda simple. En lugar de recortar su foto para que se ajuste al espacio, intente colocarla directamente sobre la capa con el cuadro blanco y aplicar una máscara de recorte (Comando + Opt + G). Esto debería ajustarse automáticamente a su foto en la configuración de límites por la capa de cuadro blanco. Esta es solo otra técnica no destructiva que ofrece más flexibilidad que el recorte.
Para ayudar a resaltar la foto, le di un trazo interior blanco. Por extraño que parezca, asegúrese de aplicar esto a la capa de la caja blanca y no directamente a la capa de fotos.
Notarás que esta foto es bastante genial en comparación con el fondo cálido. Creo que esto hace que la foto parezca que no pertenece, así que agregué una capa de ajuste de calentamiento para que las dos sean más consistentes.
Como puedes ver, también puse un pequeño gráfico con el nombre de la banda. La foto está demasiado ocupada para colocar el texto directamente, por lo que el pequeño rectángulo de desplazamiento facilita la lectura y se duplica como un bonito toque gráfico.
Navegación y Logo
Mientras trabajamos en el encabezado, debemos colocar algunos elementos estándar del sitio web: el logotipo y el área de navegación.Estos son bastante simples, solo alinee el logotipo a la izquierda y la navegación a la derecha. Dibujé unas pequeñas cajas negras para las pestañas de navegación. Esto proporciona una buena repetición con el elemento que agregamos arriba y ayuda a que el texto se destaque en el fondo del cielo.
Con eso, nuestro encabezado está terminado y ahora podemos proceder a la sección central.
Mostrar fechas y nuevo álbum
La sección central es la más fácil. Simplemente use estos dos cuadros para guardar cualquier contenido que crea que es importante. Por ejemplo, creé un programa básico de giras y un banner que anunciaba un nuevo álbum. ¡Este es también el lugar perfecto para lanzar un reproductor de música si tiene uno, solo asegúrese de configurar la música para que solo se reproduzca cuando la gente lo desee! No hay nada peor que un sitio que te sorprenda con música cuando la página se carga.
Observe que usé la misma fuente Slab-Serif (Museo) que vimos en la navegación para las fechas del espectáculo. Siempre que sea posible, mantenga sus tipos de letra bastante constantes y limítese a dos o tres familias principales.
Todo lo demas
La sección inferior es la más grande y por lo tanto la más complicada. Realmente vamos a meter una tonelada de contenido aquí mientras intentamos mantenernos estructurados y limpios.
Para lograr esto, usaremos el mismo truco que usamos en el diseño general del sitio. Esta vez simplemente estamos anidando otro sistema de módulos dentro de nuestro módulo principal más grande.
Para comenzar, dibuje unos cuadros y organícelos en otro patrón de cuadrícula. Esta vez fui con cuatro cuadrados grandes y una barra lateral.
Luego, agregue cuatro fotos y aplique máscaras de recorte como lo hicimos antes para que se ajusten a las cajas que configuró. En la parte inferior de cada cuadrado, agregue un texto que describa a dónde llevará el enlace.
Finalmente, usa la barra lateral como un centro de redes sociales. Incluya aquí sus widgets de Twitter, Facebook, Flickr, etc. y aplíquelos cuando sea posible para que coincidan con el aspecto de su sitio.
Realmente puedes ver aquí cuánto puede contener este sistema de diseño. Incluso si tienes el doble del contenido que he colocado aquí, es fácilmente ampliable y aún así no se verá desordenado.
Producto terminado
¡Eso remata el diseño de nuestro sitio! Aquí está el proyecto terminado (haga clic para obtener una vista previa más grande).
Conclusión
En resumen, sí, los sitios web de las bandas a menudo apestan pero no tienen que hacerlo. Usando los métodos anteriores, puede crear fácilmente diseños agradables y limpios que contengan toneladas de contenido sin parecer un desastre de MySpace.
Deja un comentario a continuación con un enlace a los sitios web de grandes bandas que hayas visto o creado. Pregúntese si el sitio podría mejorarse con un diseño más coherente o si ya lo ha definido. ¡Nos encantaría ver algunos de tus trabajos!
También asegúrese de visitar nuestra página de Dilema de diseño para enviar sus propios problemas relacionados con el diseño. Si creemos que es relevante para nuestros lectores, lo convertiremos en una publicación como esta.