Diseñar un sitio centrado en el bebé no es una tarea fácil, especialmente para personas como yo, que generalmente prefieren los temas, colores y texturas masculinas en sus diseños. Hoy abordaremos esta tarea al crear un sitio de anuncios para bebés divertido y único que dista mucho de ser típico.
Siéntase libre de seguirlo y asegúrese de descargar el PSD para que pueda echar un vistazo o incluso utilizarlo en su propio sitio.
El proyecto
Descargar Layered PSD
Cualquier lector de Design Shack puede registrarse para ser un miembro gratuito. Una de las ventajas de la membresía es que puede enviar sus "dilemas de diseño". y recibe ayuda gratis de Design Shack! Si creemos que su dilema es relevante para nuestra audiencia, lo convertiremos en un artículo como este.
Hace poco recibimos una presentación de Jonathan Jose, quien actualmente está muy emocionado de que pronto será padre. Tan emocionado, de hecho, que quiere configurar un sitio web donde la gente pueda intentar adivinar el nombre de su bebé y ganar $ 100. Jonathan parece que sabe cómo configurar el sitio en WordPress pero necesita ayuda con el diseño real.
Bueno, estás de suerte, Jonathan, porque este tipo de problema es exactamente el motivo por el que creamos el programa Design Dilemma. ¡Empecemos!
Diseñando para bebés
Aprender a orientar sus diseños correctamente es una habilidad importante. Si no evalúa adecuadamente a su audiencia, su diseño podría volverse completamente inefectivo. Como ejemplo, su salón de uñas típico probablemente no querría un sitio web que se parezca al de un bar de motociclistas local.
Con esto en mente, podrías pensar que dado que nuestro proyecto trata sobre un bebé, tiene que tener un aspecto similar al siguiente:
Es definitivamente cierto que este diseño está justo en el dinero para su propósito. Para empezar, la madre suele ser la persona a la que se dirigen los sitios como el anterior. Cuando combinas el concepto de bebés y madres, usualmente obtienes muchos diseños femeninos con pasteles, gráficos centrados en los niños, etc.
Por el contrario, nuestro sitio es realmente un padre orgulloso que quiere compartir su emoción con sus amigos. En consecuencia, podemos aprovechar esto como una oportunidad para darle un giro a su tema típico de bebé al crear algo un poco más retro y sucio. Aún será obvio que el sitio se trata de un bebé, simplemente nos desviaremos intencionalmente de los temas comunes que se encuentran en diseños como el anterior.
Paso 1: El fondo y la textura
Para comenzar, cree un documento de Photoshop de 1200px por 1200px a 72dpi. A continuación, rellénalo con # 55b06f. Ahora cree una nueva capa encima de eso, rellénela con blanco y vaya a Filtro> Agregar ruido con la configuración a continuación.
Tenga en cuenta que nos hemos dejado? Monocromática? desenfrenado. Después de algunos experimentos, esto pareció producir la mejor difusión del ruido, así que fui con él y luego desaturé la capa (Comando-Shift-U). Finalmente, configure la capa a Color Burn y reduzca el Relleno (no la Opacidad) al 53%.
Paso 2: El titular
Una vez que haya configurado todo su fondo, vaya a descargar Chunk Five y Museo del artículo de ayer 12 Stylish and Free Slab Serif Fonts.
Use estas dos fuentes juntas para crear un bonito titular tipográfico como el que se muestra a continuación. Tenga en cuenta que he utilizado una serie de herramientas de diseño diferentes aquí. Primero, varié considerablemente el tamaño y la audacia del tipo para agregar variación y poner énfasis en las partes importantes. Luego me puse un poco creativo con el apilado para que el titular llenara el espacio horizontal muy bien.
Ahora que hemos puesto el titular como lo queremos, dejemos que se vea algo de esa textura de fondo. Cambia el modo de fusión a Color Burn y la Opacidad al 62%.
Paso 3: La Foto
A continuación, agreguemos una foto para traer algo de vida y humor a la página. Obviamente, como el bebé aún no ha nacido, tendremos que ir con la madre. Como no tengo ninguna foto de la futura mamá, encontré una foto divertida en Flickr que es perfecta para este proyecto.
Ahora, te darás cuenta de que la foto no encaja bien con el sitio si simplemente la lanzamos allí. Para solucionar este problema, creé una capa de ajuste de filtro de foto y apliqué un filtro de calentamiento.
Finalmente, creé una sombra combada y la agregué a la foto. Este proceso es bastante fácil. Simplemente cree un efecto de capa de sombra, haga clic con el botón derecho en el efecto y seleccione "crear capa". luego use la herramienta de deformación para agregar un arco a la parte inferior de la capa de sombra.
Como un paso final para acabar con el efecto retro que tenemos aquí, descargué algunos pinceles de grunge libres sutiles excelentes y apliqué un poco de envejecimiento al texto y la foto.
Paso 4: Oso, estrellas y texto
Solo para que veas a dónde vamos, aquí está el producto final de este paso:
Como puede ver, está evolucionando hacia una especie de viejo tema de póster de boxeo. Te dejaré manejar las estrellas por tu cuenta, solo toma la herramienta de forma de Photoshop, dibuja una estrella y luego duplícala un montón de veces.
Del mismo modo, el texto es bastante simple: simplemente haga un cuadro de párrafo y agregue algún tipo. El oso sin embargo, es un poco más complicado. Quería un elemento gráfico simple, pero no quería tomarme el tiempo para dibujar uno, así que decidí manipular la foto de abajo.
Para comenzar, aplique el filtro de Photoshop de bordes rasgados con las siguientes configuraciones. Balance de imagen: 33, Suavidad: 13 y Contraste: 10. Esto debería darle algo como la imagen a continuación:
Ahora para la parte difícil. Tiene una imagen en blanco y negro, pero solo desea transferir los píxeles negros al sitio web, dejando un fondo transparente. Hay muchas maneras de hacer esto, pero una de las más fáciles que he encontrado es Comando-Clic en el Canal Azul para crear una selección. Luego invierta su selección con Comando-Shift-I. Finalmente, presione Comando-J para duplicar la selección a una nueva capa.
¡Entonces puedes tomar esta capa y colocarla, darle una capa de color y hacer cualquier otra cosa que te guste!
Paso 5: Los Bloques
Como el objetivo del juego es adivinar el nombre del bebé, pensé que podría ser una buena idea reducir las opciones (obviamente, esto aumentaría las posibilidades de que realmente tengas que pagarle a alguien). Como parte del juego, puede revelar una sola letra del nombre del bebé cada mes, a partir de muchos meses desde el nacimiento, ya que hay letras en el nombre del niño.
Entonces, por ejemplo, si el nombre contenía cinco camadas, revelaría la primera letra dentro de cinco meses a partir de la fecha de vencimiento. La forma en que se me ocurrió presentar este aspecto del juego es a través de los bloques de formas a continuación. Las lunas y las estrellas representan letras que aún no han sido reveladas. Cada luna o estrella se convertirá en una carta en un mes designado.
El producto terminado
Como puede ver a continuación, decidí implementar la idea de bloque en una franja vertical y terminé el sitio con un área para los comentarios. También agregué un poco más de variación de color para que los bloques no se vieran fuera de lugar.
Y con eso estamos todos terminados! Como se prometió, el producto final no tiene nada que ver con el sitio web de un bebé promedio y crea un espacio increíble para el concurso. Como beneficio adicional, el diseño es lo suficientemente versátil como para que pueda cambiarlo para reflejar cualquier propósito que desee.
Conclusión
El objetivo de este ejercicio era tomar un proyecto de diseño en una dirección completamente inesperada. Este es un gran ejercicio que realmente abre sus posibilidades de diseño si se practica regularmente. Simplemente tenga en cuenta para quién es el proyecto y cómo puede atraer a ese cliente de una manera interesante.
Deja un comentario a continuación y déjanos saber lo que piensas! Además, si ha diseñado sitios web, logotipos o cualquier otra cosa fantástica para bebés, deje un enlace a continuación para que podamos echarle un vistazo.