Hoy vamos a examinar un problema del mundo real al que frecuentemente se enfrentan los diseñadores. La actualización y el diseño antiguo pueden ser una tarea desalentadora, ya sea de usted o de alguien más. Una vez que ves un diseño presentado de cierta manera, es difícil salir de esa caja mental, incluso si no te gusta el original.
El siguiente artículo abordará una serie de problemas táctiles para los diseñadores. Trataremos con gráficos obsoletos, legibilidad sobre un fondo oscuro, sobrecarga de información, trabajo con texturas y más. Sigue leyendo para ver cómo abordamos estos problemas.
El proyecto
El proyecto de hoy proviene de dos consultas de nuestra página de Dilema del diseño, una nueva sección en la que les pedimos a los diseñadores que nos ayuden con sus problemas reales, sin cargo.
La primera pregunta es de Atif Mohammed Ameenuddin. Atif tropezó con algunas impresionantes texturas gratuitas y quiere saber cómo puede incorporarlas en un diseño web atractivo.
Además, Joe Elias está teniendo problemas para diseñar un sitio web para un cliente. Tiene una maqueta inicial de Photoshop, pero sabe que necesita ayuda. Hay algunos méritos en el diseño de Joe, pero creo que en general se siente un poco desactualizado. Me da la impresión de que un diseñador de impresión está intentando convertir un diseño de volante a la web. En estos días, el diseño web es mucho más que un diseño de impresión interactivo, tiene un aspecto único que aprovecha el rico medio web.
Tenga en cuenta que el sitio es también para un servicio de tanque séptico! No es la tarea de diseño más fácil que he realizado, pero me gusta un desafío. vamos a saltar y empezar.
Usando los patrones de fondo
El primer paso es dirigirse a Premium Pixels y descargar los patrones de fondo. Estos ya se guardan convenientemente como un complemento de patrón de Photoshop, por lo que no podrían ser más fáciles de implementar.
Una vez que haya descargado el archivo de patrones, simplemente arrástrelo a Photoshop para instalarlo automáticamente. A continuación, cree un nuevo documento RGB que esté alrededor de 1200px por 1300px. Rellene la capa de fondo con blanco y agregue un estilo de capa de Superposición de patrón. Desde aquí, simplemente puede seleccionar el patrón que desee y ajustar el tamaño a su gusto. Asegúrese de que está viendo el documento al 100% para poder dimensionar el patrón correctamente.
El logo
Me tomé la libertad de actualizar el logotipo un poco (es probable que el diseñador no tenga la libertad de hacerlo). Definitivamente no es genial y podría necesitar más trabajo, pero encaja un poco mejor con el tema masculino.
Utilicé el icono de llave existente y lo combiné con un tipo de letra más elegante. También agregué un trazo de texto con un degradado solo para agregar algo de interés visual. Muchas personas no se dan cuenta de que puede cambiar el trazo de Photoshop a un degradado en lugar de un color sólido, esta opción se encuentra cerca de la parte inferior de la ventana del trazo.
Las cuatro cajas
A continuación, quiero abordar los cuatro cuadros que se muestran a continuación.
Uno de los puntos principales del correo electrónico de Joe fue que quería algunas ideas de diseño / organización. Creo que esta área se puede convertir en algo mucho más dinámico y atractivo con un poco de jQuery. Con la magia de los controles deslizantes de JavaScript, podemos tomar toda esta información y ubicarla en un área.
Es difícil mostrarlo en una imagen estática, pero básicamente esta área alternaría automáticamente entre cuatro imágenes que representan cada uno de los cuatro cuadros de Joe anteriores. Tenga en cuenta que también hemos dejado mucho espacio para el contenido de texto con el área de la parte posterior protegida a la izquierda. Hay un montón de controles deslizantes de jQuery gratuitos disponibles en línea, muchos de los cuales tienen áreas de contenido como este incorporado.
Para ayudar a que la imagen se destaque en la textura de fondo, le di un tratamiento polaroid básico. Esto implica una sombra paralela, un trazo alineado al interior (esto le da esquinas duras en lugar de redondeadas) y una sombra interior leve. Para la foto, tomé algo de Flickr porque no tenía las imágenes originales con las que estaba trabajando Joe.
Rompiendo el fondo
El diseño original tenía bastante texto. Necesitamos respetar los deseos del cliente incluyéndolo, pero nuestro trabajo como diseñadores es presentar la información de una manera atractiva. Vamos a hacer esto dividiéndolo un poco, lo que convertirá el contenido en partes más manejables.
El fondo texturizado puede ser demasiado en toda la página, por lo que vamos a dividirlo un poco agregando una franja horizontal. Esto también ayudará a organizar visualmente el contenido.
He hecho mucho aquí. Para el banner, le di un color rojo oscuro, un ligero degradado, un trazo negro fino, una textura sutil y sombras que salen de la parte superior e inferior (haga clic en la imagen para verla a tamaño completo). También lancé otra imagen para ayudar a dividir el texto aún más. Observe que se alinea horizontalmente con el control deslizante por encima de él. Aunque el banner en sí se extiende a lo largo de toda la página, el contenido del interior aún debe adherirse al diseño que hemos configurado.
El resto del texto
Coloqué la segunda parte del bloque de texto justo en el fondo debajo del área de la cinta. La parte difícil aquí es que el fondo hace que el texto delgado sea bastante difícil de leer. Haz siempre tu mejor esfuerzo para no sacrificar la usabilidad en nombre de la estética.
Para resolver este problema, simplemente apliqué una sombra muy oscura al bloque de texto. Esto ayuda a destacar y se puede lograr fácilmente con CSS, dejando el texto completamente seleccionable.
Cuando se combina con el área de banner anterior, esto hace que para un trozo de texto mucho más atractivo que no abrume la página.
Terminando
Por último, lanzaremos un pie de página simple en la parte inferior de la página con información de contacto y estaremos listos. Todo lo que hice aquí fue hacer una caja negra y reducir un poco la opacidad.
Y con eso, aquí está nuestro producto terminado. Haga clic aquí para verlo en tamaño completo.
Como puede ver, tiene una sensación mucho más moderna que la original.Honestamente, el error que la mayoría de los diseñadores cometen es que se esfuerzan demasiado. Ellos llenan una página llena de todo lo que pueden pensar para poner allí y terminan con algo que está ocupado y es difícil de ver. La tendencia actual en el diseño profesional es hacia diseños simples y limpios con distracciones mínimas y un énfasis en el contenido.
Como diseñadores, esto significa que podemos tomar el camino más fácil y eliminar toda la pelusa de nuestros diseños hasta encontrar el equilibrio perfecto entre simple y atractivo.
Conclusión
En resumen, la actualización de un diseño antiguo a menudo puede implicar alejarse completamente del diseño anterior. No se deje llevar por las cosas y haga cambios incrementales, a veces solo tiene que empezar de cero y buscar una idea nueva.
Si tiene un proyecto en el que le gustaría recibir ayuda, asegúrese de revisar nuestro programa de Dilema del diseño. Si pensamos que su problema es algo con lo que muchos diseñadores pueden relacionarse, lo convertiremos en un artículo completo como este.