Una de las preguntas más frecuentes que recibimos es una variante de qué tipo de antecedentes debería usar alguien para su sitio. Estos diseñadores tienen el contenido básico y el diseño bastante definido, pero el fondo es demasiado aburrido o está demasiado ocupado y no saben cómo solucionarlo.
Hoy vamos a echar un vistazo a algunos sitios en vivo para inspirarnos sobre cómo agregar fondos interesantes a una página web. Marque este artículo como favorito y vuelva a él la próxima vez que esté atascado en una decisión de fondo.
# 1 Sketch It
Este tipo de fondo se hizo popular hace unos años y aún persiste hoy. Surge de la idea de un cuaderno lleno de garabatos, como el de un adolescente típico durante la clase de inglés. Todo tiene una apariencia aproximada y esbozada rápidamente, y la página es una colección de ideas de apariencia bastante aleatoria que se encuentran dispersas y ubicadas en varias rotaciones.
NotchStudio saca esta idea bien y de una manera bastante tenue.
Incluso si no puedes dibujar, este aspecto es bastante fácil de quitar ya que los garabatos son generalmente muy básicos. Si tienes un Wacom o iPad, es bastante fácil rastrear algunas de tus propias fotos o texto impreso de una manera que refleje este estilo. También hay un montón de fuentes gratuitas como Pointy que te ayudarán a sacar un texto de boceto impresionante sin ningún esfuerzo.
# 2 pergamino sutil
Las texturas de papel siempre han intrigado a los diseñadores y es probable que las estemos utilizando durante años. La tendencia actual no es tanto el intenso grunge de hace unos años, sino un efecto mucho más sutil que podría perderse fácilmente si no lo estuviera buscando.
Observe que la textura utilizada en el sitio de Beautiful Type a continuación no distrae ni exagera, sino que aporta un bonito acabado a un sitio que ya se vería perfectamente bien sin él.
Echa un vistazo a Lost and Taken para obtener toneladas de texturas geniales que puedes usar en todos tus diseños.
# 3 un gradiente radial
Los gradientes han estado recibiendo una mala reputación últimamente de los diseñadores que piensan que están sobreutilizados. Personalmente, creo que se usan mal y se ejecutan de manera deficiente, pero no se puede ver que llegue el momento en que todos los diseños usen colores puramente sólidos sin ninguna gradación. Dado que los gradientes reflejan la realidad (nunca vemos colores sólidos puros y sin adulterar en el mundo natural), los diseñadores los seguirán utilizando para hacer que sus diseños se sientan más reales.
Con los gradientes, a menudo es mejor mantener las cosas simples. No vaya mezclando colores locos y creando transiciones embarradas, opte por un degradado simple. Uno de mis favoritos es el degradado radial gris viejo a negro (o gris más oscuro). Es limpio y fácil de implementar y se ve muy elegante.
Puede ver esto en la práctica en el sitio web de 177 temas que se muestra a continuación.
# 4 en dos tonos!
Otra solución que encuentro particularmente elegante o audaz (dependiendo de la ejecución) es hacer una transición difícil a través de la página. Esto se hace con mayor frecuencia en forma horizontal, pero puede sentirse más único y llamativo si se hace en forma vertical.
La idea aquí es utilizar la magia del contraste. Nuestros ojos están naturalmente atraídos al contraste, ¡simplemente no podemos evitar mirar! La clave para eliminar este método es asegurarse de que los dos colores realmente contrasten. No escoja nada que entre en conflicto o choque, en su lugar, intente un color realmente oscuro y luego un tono muy claro del mismo color.
Mi herramienta favorita para crear este tipo de combinaciones es 0to255, que te permite capturar los valores web de forma rápida y fácil para variaciones de cualquier color.
# 5 fotografías a pantalla completa
Menciono esta idea tanto que probablemente estés harto de ella, pero continuaré perforándola en tu cabeza todo el tiempo que pueda: la fotografía genial lo convierte en un gran diseño. Es sencillo y simple. A todos nos encanta ver una buena foto, por lo que trabajar en su diseño lo convierte en un sitio web que todos adoran. Fácil verdad?
Las fotos proporcionan inspiración para todo el diseño del sitio. Puedes tomar colores, texturas e incluso la inspiración de la tipografía de una fotografía y crear un tema coherente y agradable.
Vea cómo la naturaleza oscura de los elementos diseñados en el sitio a continuación refleja la apariencia de muchas de las fotos utilizadas en la presentación de diapositivas de la página de inicio.
Si se está preguntando cómo codificar un sitio como este, consulte nuestro artículo reciente, Cree fácilmente un sitio web de diapositivas de fotografías en pantalla completa sin Flash.
# 6 textura a color se desvanece
Un truco que realmente me gusta que he visto mucho últimamente es usar efectos de iluminación o algo similar para agregar solo un poco de textura en la parte superior de la página, que se desvanece rápidamente a un color sólido.
Las texturas pueden reducir fácilmente la legibilidad de su texto y agregar un ruido visual innecesario a una página de otra manera utilizable. Hacer referencia a una textura en un solo lugar le permite obtener los beneficios de la golosina extra sin sacrificar la estética y la legibilidad general del sitio.
A menudo sentimos que elegir una textura significa que tenemos que inundar el fondo usando una repetición de imagen de fondo CSS. Trate de ser más selectivo con respecto a su textura y encontrará que sus diseños se ven mejor de inmediato.
# 7 mira hacia arriba
El cielo es una distracción constante y fantástica para los humanos. Nubes, rayos de sol, estrellas, planetas, la luna; todos estos objetos tienen una especie de lugar mágico en nuestra mente que los hace irresistibles a la vista.
Tenga mucho cuidado al incorporar estos elementos en su fondo, es muy fácil crear algo feo y / o cliché. Esta técnica solo debe ser utilizada por diseñadores que tengan una idea real de la estética y cómo tomar una idea como "espacio". y no hacer que se vea como algo de un viejo protector de pantalla de Windows.
El siguiente sitio es un gran ejemplo de una escena del cielo realmente hermosa que se utiliza como un fondo de sitio web fuerte. Los planetas se representan de manera hermosa con un ambiente de color vintage y una textura sutil provista por líneas diagonales. Este es el tipo de atención a los detalles que debe conocer antes de lanzar un fondo de cielo en su sitio.
# 8 Argyle
Puedo oírte ahora, ¿Argyle? ¿¿Estás loco?? Antes de seguir adelante en los comentarios, los patrones de diamante pueden producir algunos resultados realmente atractivos. Pero, al igual que con la sugerencia anterior, no deben ser intentados por nadie más que por diseñadores experimentados que saben cómo usar un patrón loco sin crear un sitio web realmente feo.
Echa un vistazo al uso realmente agradable de esta idea en el sitio web a continuación. El patrón de estilo de argyle modificado solo es suficiente para agregar algunos bonitos acentos coloridos y realmente no se desvía de su camino para captar su atención.
# 9 abstracto y loco
¿Estás harto de mis sugerencias para ser cuidadoso? y? tómalo con calma? ¿Con sutiles toques de diseño? Pues bien, este consejo es para ti. A veces, el mejor fondo es algo loco y audaz que no tiene que tener sentido con el contenido de la página, simplemente llama la atención.
Pensé que los dos sitios web a continuación lograron esto muy bien. Observe cómo el segundo se ve particularmente como una pieza de acuarela pintada. Esta es una técnica muy popular que puedes encontrar muchos recursos en línea para imitar.
Ir a buscar iStock con el término? Acuarela abstracta? Para ver lo que puedes encontrar. Hay muchas imágenes baratas en esta categoría que realmente aumentarán el interés visual de su página.
# 10 No tengas miedo de los colores sólidos
Todos los consejos anteriores están destinados a satisfacer sus demandas de excelentes ideas de fondo de sitios web. Sin embargo, es muy importante que entiendas como diseñador que no hay absolutamente nada de malo en el espacio en blanco de colores sólidos. Es un ingrediente clave en muchos de mis diseños favoritos de todos los tiempos, y aprender a usarlo adecuadamente es una parte importante de convertirse en diseñador.
Echa un vistazo a la hermosa página web de Fuzion Ads a continuación. El diseño es realmente un festín tipográfico y ambos llaman tu atención y se comunican de manera efectiva a pesar del hecho de que el fondo es solo un color sólido, simple y aburrido.
Asegúrese de revisar Piknik, una herramienta gratuita que debe agregar a su arsenal de diseño. Este sitio hace que sea muy fácil previsualizar y seleccionar colores para llenar su pantalla. Simplemente mueva el mouse y el fondo cambiará de color.
Conclusión
El fondo que elija establece el tono y la personalidad de todo el sitio. Estaba trabajando con un diseñador el otro día que quería que su sitio apareciera en nuestra galería, pero simplemente había elegido una imagen de fondo realmente pobre. El diseño y el diseño del sitio fueron excelentes, pero no pude superar el fondo feo. Después de señalarlo, aceptó y cambió a algo mucho más simple que realmente llevó al sitio a un nivel completamente nuevo.
Como dije en los párrafos iniciales, la próxima vez que se encuentre atrapado en una rutina de diseño y no pueda elegir un buen fondo para su sitio, vuelva a esta publicación e intente algunas de las ideas que he presentado aquí. Tarde o temprano tendrás que aterrizar en uno que sea perfecto para tu proyecto.
¡Como siempre, gracias por leer! Si te gustó el artículo, ¡danos un tweet, Stumble, Like o cualquier otra cosa que te guste!