Youtube Facebook Twitter Deviantart My feed Feed directly to your inbox

Illustrative header design for Free Power Boards

29 Mayo 2007

Case Studios

Illustrative header design for Free Power Boards
Choose your language / Elige tu idioma:englishespañol

Vamos a inaugurar un sección que creo que puede ser interesante, se trata de casos reales de encargos realizados en nuestra querida SOSFactory.

En este caso vamos a ver el diseño que realizamos para el header de Free Power Boards un sistema de gestion de contenidos para foros basado en PHPbb que está a punto de estrenar su tercera versión. Nos encargaron el nuevo diseño de su header.

Original header design

Si pinchas en la image puedes ver el diseño original.

Lo primero que salta a la vista es que es un diseño divertido, pero con poca calidad gráfica. Los diseños de los pingüinos son clipart, osea que no es un diseño exclusivo, el logo es bastante básico y los colores no es que sean feos pero se podían mejorar.

El cliente en principio nos pidió que diseñaramos una mascota y el típico botón animándonos a que nos registremos en su página, ya veremos que cuando se trabaja, un buen cliente se puede convertir en uno realmente excelente :) . En principio el trabajo se presupuesto en 300US$.

Después de un rato de chat llegamos a la conclusión de que la mascota sería una llama. En principio la elección del animal me dejaba algunas dudas… pero el cliente manda, ya sabes. Cuando llegó a mis manos el primer boceto estaba claro que el animal daba mucho de sí, échale un ojo:

Skecht 1

Este diseño era gracioso pero nos faltaba algo, pensamos… "Ya que Free Power Boards es un software de aspecto gráfico personalizable, ¿no sería divertido si el propio animal trabajara en el nuevo diseño?". Dicho y hecho:

Skecht_1

Esto empezaba a verse divertido. Nuestro personaje estaría pintando el header con nuevos colores más vibrantes. Sólo tuvimos que hacer dos correcciones:

  1. Fíjate que el personaje ahora mismo es una llama cualquiera. Decidimos darle uniforme corporativo.
  2. Otro pequeño detalle, fíjate las latas de pintura, cualquiera diría que nuestros trabajadores (imagen de nuestra compañía) son un poco descuidados… no estamos transmitiendo el mensaje adecuado.

Skecht_1

Así se veían nuestros personajes después de las correcciones.

Hicimos dos diseños del mismo personaje para dar más opciones al cliente, pero les gustó tanto que nos compró ambos diseños, simplemente cambiamos la cara de la segunda para que se diferenciasen un poco. El trabajo subió a 500US$, a cambio accedimos a hacerle una nueva version de su logo.

Final lineart

Aquí puedes ver las lineas finales para ambas mascotas.

Ahora vamos con el color, antes de nada pedimos una versión final del nuevo diseño, para asegurarnos que los colores de nuestros personajes se verían bien con el nuevo fondo:

Header design 2

Haz click en la imagen para ver el nuevo diseño.

Estuvimos haciendo algunas pruebas de color y resultó que los colores que mejor se adaptaban al naranja eran tonos frescos, aquí puedes ver las mascotas a todo color:

mascot design full color

En este punto del encargo se nos ocurrió que sería mucho mejor añadir otra llama para que sujetara el botón de "join free", ofrecimos hacerlo gratis. A partir del diseño que ya teníamos hicimos unas pequeñas modificaciones de la cara y del color, y la cosa pasó a quedar como ves:

mascot design full color

En ocasiones cuando un diseño tiene tantas posibilidades prefiero hacer trabajillos extra sin cobrar a que el diseño se quede incompleto, como recompensa tendremos un super diseño más en nuestro portafolio, y quién sabe que mas… Ok, veamos como quedó el header, el logotipo consistió en un efecto metálico con una font moderna, tecnológica y contundente pero divertida:

Header design 2

El cliente estaba muy contento con el diseño pero a su parecer estaba descompensado, texto de la derecha debería desaparecer. Le dimos varias opciones y al final optó por encargar un nuevo personaje. Esta vez sería algo más cómico, se nos ocurrió la idea de añadir una llama como contrapunto al resto, gordita, patosa y muy divertida. Su misión consistiría en limpiar la "v3" de nuestro logo… para no alargarnos más os dejo la versión final del personaje:

Header design 2

Y así es como hicimos este maravilloso header, al final el diseño salió por 700US$. El cliente salió ganando porque consiguió un buen descuento, y nosotros también por un lado porque disfrutamos muchisimo con el trabajo, por otro porque hicimos varias ventas sin tener que movernos demasiado y además tenemos una excelente pieza de portafolio.

Header design 2

Como ves, cuando se trabaja bien, un buen cliente se puede convertir en uno realmente excelente :)

Actualmente estamos trabajando en algunos banners, esperemos que esta nueva relación sea para largo.

Ni que decir que os paseis por la página de Free Power Boards para ver el diseño en vivo. Muchisimas gracias a Chris, CEO de Free Power Boards por darme permiso para escribir este artículo.

This post was written by:

- who has written 97 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

  • Lucian

    Please can you make a tutorial on how to make the green and orange gradient text(with the colour code that you used on Free Power Boards)
    Thanks.

  • http://www.sosfactory.com Sergio Ordonez

    Sorry, I usually reply all the comments but I never saw this comment.

    Anyway, I dont understand… what green gradient?

  • Pingback: SOSNewbie Bienvenido a la web del diseñador Freelance » PSDTUTS entrevista a Sergio Ordóñez

  • liam

    No idea what he is talking about with the green orange gradient. Not sure what he is looking at.

    Great work though, I love the bit at the top where it hasn’t been painted, its just a great addition. Nice work!

  • liam

    Ah, I think he is referring to the green text on the old design.

  • F. C.

    I don’t mean to rain in your parade, but I think you guys are not charging nearly enough to compensate for you time, much less your indisputably huge talent. A mascot like that shouldn’t be licensed for less than $4,000.

  • http://www.sosfactory.com Sergio Ordonez

    FC: please, be my agent and we share the profit.

    Why I charge so cheap?

    Please read this article: http://www.sosnewbie.com/en/freelancing/why-your-design-so-cheap/

    Cheers.

  • http://blog.madewira.com madewira

    Once again, Sergio and the team did a fantastic job.
    I love your artworks!

  • http://maluson.magicrpm.com Maluson

    GREAT!

    You guyz are really dope!

  • darvenginzks

    I’ve recently joined and wanted to introduce myself :)

  • MirmLearm

    Hi, everybody!

    I think, that this is a great forum. Very intresting and useful.
    But I can’t find the search function, cause I want faster find the topics that could be intresting for me to express my opinion…
    Please help me with search function on this forum!

  • http://www.sosfactory.com Sergio Ordonez

    Its in the navbar, just below the logo: home, about, SEARCH…

  • AMistyCrissy

    Hi there! I’m Crystal. I am almost 17. :)
    I guess http://www.sosnewbie.com – wonderful name for this site! ;)
    It is so cool here, especially in this category.
    I was surfed about 3 hours before found this forum. I think i’ll be here for a long time! :-*