Las páginas de inicio de la iglesia tienden a sufrir muchos de los mismos problemas que vimos recientemente con los sitios web de las bandas. Hay tanto contenido que se lanza a estas páginas y todo compite por la atención en un grado tal que la mayoría o todo pierde cualquier significado visual previsto.
Hoy aprenderemos a luchar contra eso diseñando una página de inicio de iglesia dramáticamente simple y atractiva que todavía tiene mucho espacio para varios mensajes, anuncios y más.
Vistazo
Si usted es el tipo de persona al que le gusta saber a dónde se dirige, consulte el producto terminado a continuación. Tenga en cuenta que simplemente estamos trabajando con Photoshop hoy, por lo que el resultado no será un sitio en vivo sino un PSD en capas.
Haga clic aquí para descargar la PSD gratis
O haga clic aquí para ver una vista previa
El proyecto
Recientemente, a un amigo mío se le encomendó la tarea de diseñar un nuevo diseño para el sitio web de la iglesia que se muestra a continuación y me pidió mi opinión. Siendo el que me da demasiado, esta es mi respuesta.
Es cierto que este sitio ya hace mucho mejor en la organización de información dispar que la mayoría en su género. Sin embargo, el esquema gráfico general realmente no resuena conmigo. Todo parece bastante reducido y no hay un gran impacto de ningún tipo.
Para ver algunos otros ejemplos de sitios de iglesias típicas, realicé una búsqueda en Google para encontrar algunas iglesias en mi área. Desde el principio, lo que encontré reafirmó mi sospecha de que el diseño web es un área importante de lucha para muchas iglesias.
Cambiando el paradigma
De los ejemplos anteriores, decidí rechazar la idea de inspirarme en otros sitios web de la iglesia. Sé que he visto algunos diseños de sitios de iglesias realmente estelares por ahí, pero las páginas anteriores realmente me dieron ganas de reunir algo que refleja las tendencias actuales en diseño web profesional en lugar de seguir un esquema demasiado usado y / o obsoleto en el diseño para organizaciones religiosas.
Así que olvidemos todo lo que hemos visto hasta este punto, ¿vale? Eso incluye el sitio original (¡que se ve mucho mejor después de ver la competencia!) Que tenemos la tarea de rediseñar. Sabemos que necesitamos algo atractivo y limpio, pero también algo que sea capaz de almacenar toneladas de información de manera organizada.
El primer paso: el color
La mayoría de las veces, el primer paso que tomo en el proceso de diseño es encontrar algunos colores sobre los que quiera construir. Muchos diseñadores afirman que el diseño siempre debe ser lo primero, pero en última instancia, esto depende completamente de usted. Los colores que elijo para un sitio afectan a todo el tema, que incluso puede dictar cómo elijo colocar todo para que este sea realmente un paso fundamental en mi proceso.
Para evitar conscientemente el tipo de diseño ocupado que ya hemos visto, no quería dejarme llevar por el color aquí, sino por una paleta bastante simple. Terminé eligiendo los colores a continuación, el primero de los cuales es realmente mi único pop de color interesante. Los rojos y naranjas se han vuelto muy populares en el diseño web últimamente y, a menudo, son más efectivos cuando se usan con moderación en una página de otra manera tenue. Utilizaré el brillo de este tono para llamar la atención sobre áreas clave de la página.
El fondo
Cree un nuevo documento RGB en Photoshop (el mío es 1265 px por 1680 px) y rellene el fondo con #eaeaea. Ahora llene la capa de fondo con un patrón muy sutil establecido en Multiplicar para que se vea el color de fondo. El patrón que utilicé a continuación es en realidad uno de los valores predeterminados de Photoshop. Si no lo ve en el menú Efectos, intente cargar algunos conjuntos de patrones más hasta que lo detecte.
Esto simplemente sirve para dar al fondo un poco más de interés visual que un relleno sólido. Si tuviéramos que convertir esto en un sitio en vivo, simplemente tomaríamos un pequeño cuadrado del patrón y lo configuraríamos para que se repitiera en nuestro CSS.
El encabezado
El siguiente es el título, que simplemente identifica a la iglesia y arroja un lema para que sepas de qué se trata. Para iniciar este proceso, elegí una buena fuente condensada sans-serif: Humanist 521 BT Condensed. Si no tiene esta fuente en particular, cualquier otra fuente condensada sans-serif funcionará bien.
A continuación escribí el nombre de la iglesia e hice tres versiones diferentes en tres colores diferentes, como se muestra a continuación. Tenga en cuenta que la capa intermedia debería ser realmente del mismo color que el fondo, pero aquí la puse en blanco para que pueda verla. Además, el color inferior es simplemente el color superior con una opacidad reducida (36%).
Como puede ver, luego apilé estas capas para crear la composición resultante en la parte inferior. Puedes detenerte aquí, pero como a veces tengo un poco de TOC, usé la capa intermedia simplemente para enmascarar la capa inferior, de esa forma la textura del fondo se vería en la sección central.
A continuación, agregué un poco de estilo visual en forma de pequeños remolinos a cada lado del titular. También agregué un eslogan de marcador de posición con una fuente serif de losa delgada que pensé que complementaba muy bien el titular. Esta fuente se llama AW Conqueror Slab y se puede descargar gratuitamente en Font Squirrel.
Control deslizante de imagen y navegación
Muchos diseñadores también son desarrolladores, lo que significa que pueden codificar sus propios diseños en sitios web que funcionen. Otros simplemente hacen el trabajo de Photoshop y dejan que alguien más tome el diseño en vivo. Independientemente de la categoría en la que se encuentre, es increíblemente importante saber qué tipo de herramientas tienen los desarrolladores a su disposición.
Por ejemplo, solo porque no sabes nada sobre escribir JavaScript no significa que no debas estar leyendo y notando efectos interesantes de jQuery. Esto le permite pensar en la función dinámica incluso cuando diseña una página estática. Luego, puede comunicar la idea de la funcionalidad a quienquiera que codifique el sitio.
Casi siempre que estoy luchando con el problema del desorden en el diseño web, miro a jQuery como la respuesta.Un control deslizante jQuery básico es simplemente una de las mejores maneras posibles de colocar toneladas de información en un espacio pequeño y me verá incorporarlos en proyectos una y otra vez aquí en Design Shack.
Así que, naturalmente, eso es exactamente lo que haremos aquí para manejar nuestro problema de desorden. La página de inicio de nuestra iglesia necesita imágenes grandes y llamativas, además de comunicar varios mensajes desconectados que cambiarán semanalmente. Ambos objetivos se cumplen en un control deslizante de imagen. Para empezar, puse una imagen de marcador de posición y le di una sombra con el juego de plumas a 0, por lo que es agradable y difícil.
En este punto, no me gustaba la forma en que la imagen se mezclaba con nuestro tema establecido. Además, el sitio no solo tendría una foto aquí, sino más bien un mensaje sobre algo pertinente para los feligreses, como sobre el próximo sermón. Tomé esta idea y la ejecuté para crear la imagen de abajo.
Después de esto, el resto es solo un relleno típico para asegurarse de que todos los elementos funcionales necesarios estén en su lugar. Agregué algunos puntos para indicar cómo funcionaría el control deslizante y lancé un menú de navegación basado en texto súper básico usando Helvetica.
Aun mas informacion
El problema con el formato del control deslizante anterior es que parte de la información está oculta. Claro, el usuario puede acceder a cada página haciendo clic en los puntos pequeños, pero si están buscando algo específico, ¿cómo se supone que deben saber que aparecerá en el control deslizante? En última instancia, esta limitación hace que este formato sea el mejor para los anuncios generales que los usuarios se beneficiarán de ver, pero en realidad no buscarán a menos que ya estén familiarizados con el contenido que la iglesia suele ubicar en esa ubicación.
Todavía tenemos mucha más información que debemos incluir en la página de inicio y no queremos simplemente repetir el control deslizante anterior, tanto por la redundancia como por las limitaciones que acabamos de mencionar. Entonces, ¿cuál es la respuesta?
Una vez más, afirmo que realmente necesita familiarizarse con las herramientas y soluciones comunes para desarrolladores, incluso si no es un desarrollador. Para resolver los problemas a los que nos enfrentamos aquí, decidí que este sería un lugar perfecto para implementar SlideDeck, un complemento comercial de jQuery que no solo tiene un aspecto magnífico y contiene mucha información, sino que también permite a los usuarios echar un vistazo al contenido que contiene. . Visite SlideDeck.com para obtener más información y para probar el SlideDeck que se muestra a continuación.
Con este increíble producto en mente, creé un mensaje de bienvenida y otra área de contenido con un marcador de posición para un SlideDeck. Una vez más, los usuarios podrán detectar la información contenida en el control deslizante y hacer clic al instante en el banner que desean ver. Esto, combinado con nuestro primer control deslizante, crea una capacidad impresionante de información en una sola página. Cada dispositivo se puede expandir para incluir tanta información como la iglesia necesita mostrar en su página de inicio y cada imagen puede actuar como un enlace a una página dedicada que contiene más contenido sobre el tema.
El pie de página
Ahora que tenemos nuestro contenido al cuadrado, todo lo que queda es abofetear a este bebé y estamos listos para irnos. Recuerde que el pie de página no debe ser apresurado como una idea de último momento. Es importante tener en cuenta qué contenido debe ir aquí y cómo debe reflejar y destacar del resto del sitio.
Pensé que una iglesia querría que su información de contacto y dirección física fuera prominente y fácil de encontrar, así que elegí usar el pie de página para esto. También decidí tomar nuestro color primario (# ec492d) y usarlo como fondo para el pie de página, por lo que es una especie de inverso al encabezado. Esto utiliza una buena repetición y se asegurará de que el pie de página sea un elemento visualmente distinto.
Diseño terminado
¡Nuestra página de inicio ya está terminada! Aquí están las piezas todas juntas. Observe lo lejos que nos hemos desviado no solo del diseño original, sino de todos los diseños de iglesias que vimos anteriormente. La inspiración es genial, pero a veces tienes que dejar de buscar respuestas en los demás y simplemente abrir tu propio camino con los objetivos en mente que buscas lograr.
Haga clic en la imagen de abajo para ver una versión más grande.
Conclusión
En resumen, recuerde que no está haciendo ningún favor a sus usuarios al incluir todo lo que pueda imaginar en su página de inicio. El desorden hace que la información específica sea más difícil de encontrar y reduce su facilidad de uso drásticamente, al mismo tiempo que mata su estética.
Como diseñadores, a menudo pensamos demasiado en los problemas y buscamos la respuesta a la complejidad. Más a menudo que no, una respuesta mucho mejor radica en la simplificación.
Deje un comentario a continuación y déjenos saber qué piensa del diseño terminado en relación con el lugar donde comenzamos. También asegúrese de compartir los enlaces que tenga con los sitios de la iglesia que cree que rompen el molde y realmente empujan el límite tanto en estética como en funcionalidad.
Créditos fotográficos:
http://www.flickr.com/photos/normanbleventhalmapcenter/2674833839/
http://www.flickr.com/photos/2create/2152949049/