Sikbox Logo Design ProcessListThumbs

Sikbox Logo Design Process

October 15, 2008

For the last few weeks I've been working on some projects, but there is one in particular that I think will be really useful for the blog community. It's called Sikbox. Sikbox is a web app that allows you to add a live search to your site, or any site. It uses the Yahoo Boss api and it actually works better than my Drupal default search system.

This project was done pretty quickly. I had the honor to work on the logo and web design with my brother, Eduardo Sasso, the Ninja programmer, and Fabiano, the CSS samurai.

Anyway, in this post I want to share a bit of the ideas and the design process for the logo creation.

Doing the home work

The first thing we did was look for references. We visited lots of sites and also used the very helpful http://patterntap.com/. Below are some of the references we had.

Sikbox logo tutorial

Sikbox logo tutorial

Sikbox logo tutorial

Sikbox logo tutorial

Sikbox logo tutorial

First ideas

The basic idea for the logo was to create a clear association with search. The most common and iconographic symbol for that is the magnifying glass. However we wanted a very subtle element and the first thoughts and sketches we had, tried to avoid that.

For the first designs we tried to use the search box result and the cursor for the symbol as you can see below.

Sikbox logo tutorial
I'm terrible at drawing but they always help ;)

Sikbox logo tutorial

Back to the roots

After some sketches and designs we decided to forget about the other symbols and try to go with the magnifying glass (but again something subtle and discreet). The idea we had was to create the "b" with that element. Also we had to rethink our idea for the best font style, we gave up the idea of a serif font.

Sikbox logo tutorial

Refining the idea.

Our first thought was use shadow to create the 3D effect, but as I always like to do the negative version, the shadows wouldn't work well in that format. We decided to make the effect without the shadow instead.

Sikbox logo tutorial

Final design

Of course the whole process was much longer and painful :) but we think the end result was really cool and, despite the fact that we didn't want the magnifying glass symbol in the very beginning of the process, it ended up a lot better than we had thought.

That's again why I think we have to like the design process otherwise this sort of starting from scratch thing can be very traumatizing, but if you learn to enjoy that everything will flow much better.

Sikbox logo tutorial

Sikbox logo tutorial
Site Design with the logo.

About the author

User picture

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links:

More content from:

Help us to share this!

18 Comments

Eduardo Sasso10/15/2008

Great post man, the Sikbox logo is totally awesome, brilliant work! Congrats and thank you for working with you guys Fabio and Fabiano

Léo10/15/2008

The Alltop, it's a very interesting site.

iheartrendering10/15/2008

Thanks for sharing dude. Very awesome.

Monkeytail10/15/2008

(Y)

[+_+]

starlight8610/15/2008

awesome work guy..nice to know how the workflow done

liam10/15/2008

Amazing, a truly great logo. Nice work and great to see the process!

Logo ontwerp meppel10/15/2008

Cool logo! I love to see logo-workflows! Like this one too!

BogDinamita10/16/2008

Thanks for sharing, Fabio, great work! ;)
Flickr Photostream

MSOnWired10/16/2008

It's nice to see the logo thought process. very cool.

DL10/17/2008

I love that logo. Can i ask what font it is?

Jonathan10/18/2008

Thanks for sharing. The information gathering/research is an area that I'm finding myself struggling with as a fledgling graphic design student, so it's great to have such an insight into a fully fledged designer's process.

grungelover04/26/2009

muy interesante fabio, gracias por compartir, sería bueno ver el proceso de elección de la tipografía.

Chetan Madaan05/01/2009

Amazing... guys... I just Love it!

Thanks a bunch!

dudula05/26/2009

verygood!

danilloOc07/17/2009

Good process and final design, thanks for sharing.

Arvind08/24/2009

Thanks for showing your process. Looks very cool.
I'm wondering how it would be if the b was multi-colored - with the | being grey, and the magnifying glass being blue. That might highlight the magnifying glass a bit more.

Anonymous09/14/2009

Perfect!!!

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?