I have always  wanted to contribute to a great project, like hunting messages send by little green men from another galaxy… But I had neither the opportunity nor the scientific background to do it. Until I read about SETI@Home…

All you need is a computer and an internet connexion…

What is it all about ?

Astronomer Carl Sagan and his colleagues started the SETI (Search for Extra-Terrestrial Intelligence), and you probably all have seen the movie or read Carl´s book, “contact“, where we discover the first confirmed communication from extraterrestrial beings…

What´s exactly SETI doing ?

SETI projects use scientific methods to search for electromagnetic transmissions from civilizations on distant planets. (Wikipedia)

Why is it important to do that ?

“‘Are we alone?’ Humans have been asking [this question] forever. The probability of success is difficult to estimate but if we never search the chance of success is zero.”

Jill Tarter

So if you do not help, who will ever ? Find out more in her amazing speech…

How to help ?

Volunteer at the SETI@home program:

SETI@home searches for possible evidence of radio transmissions from extraterrestrial intelligence using observational data from the Arecibo radio telescope. The data are taken ‘piggyback’ or ‘passively’ while the telescope is used for other scientific programs. The data are digitized, stored, and sent to the SETI@home facility. The data are then parsed into small chunks in frequency and time, and analyzed, using software, to search for any signals—that is, variations which cannot be ascribed to noise, and contain information. The crux of SETI@home is to have each chunk of data, from the millions of chunks resulting, analyzed off-site by home computers, and then have the software results reported back. (Wikipedia)

You´ll need a couple of things to get started, adn in less that 10 to 15 minutes your computer can join this fantastic opportunity !!!

1. Go to the SETI@home homepage
2. To download BOINC software and run it (5 minutes)
3. Setup / synchronize your BOINC software

Here is the project manager running and processing signal from space collected by the Arecibo radiotelescope !!!!

When the computer goes in screensaver mode, the computing starts and you have a nice data vizualisation graph on display… really cool !

My computer is now processing signals from a radio-telescope… Awesome !!!!

Analysing some patterns… and searching for some outer-space SMS

It doesn´t matter if you have MAC / PC it works and it´s fun !!!! And maybe you´ll be the lucky one to get the first signal from another form of intelligence…

Related posts:

1. Week inspiration # 03
2. Manga style gravatar
3. Week inspiration #05

And since there is an IPAD to win, I an quite shure they are going to have a lot of application.

Well Done !

It is very viral since you have to invite 3 friends to participate… witty !

No related posts.

Good design begins with rising your view to the level of your visitors / users.

There are many misconception about what design is, like design is restricted to how things look, and that it is best employed at the end of the product development process.

Naturally, aesthetics is important, but it is only a part of the big picture.

You have to care about the people who will use and live in the place you design.

Designer Philippe Starck demonstrate this in a brilliant talk.

“There is not a single production out of the big picture”

“If we do not understand we are mutants we completely miss the story”

“Rise your level of vision every morning”

It is by embracing a holistic approach, like how to fulfill their needs,

their experience, their goals, by offering them a vision, by innovating in the form of design that  you tremendously increase your chances of success.

Related posts:

1. Web Design Index 9. I´m in twice !
2. Freebies #01: may 2010 be a good design year
3. Week inspiration #05

I always wondered how to get nice vector manga character to depict me  in a funny way instead of an ordinary picture… I considered doing it in illustrator, but it takes time.

And I saw many “manga face” character that looked the same on twitter, or facebook profiles… where did they come from ?

The answer is : Face your manga http://www.faceyourmanga.com/welcome.htm

It is gonna take you five minutes, cost free, to create your character.

And I enlightens your day !

Related posts:

1. A vector sport patch
2. Russian constructivism poster tutorial

Hi !

I am really happy to see that the new version of Inexor Integration went live…
You can compare with the old design in the post I published last year, so that you can embrace the improvments made.

It looks much fresher now, and the team integrated a possibility for partners to log into a dedicated page, a product slider, videos, testimonials, licence management, etc.

The old (left )VS the new (right):

As you can see, I have been reworking the icons and symbols to make the navigation clearer and easier, with focus on “action calls”. I have used the orange color to draw the attention on the right box, which is the partner access.

If you pay attention to the “waves pattern” in the header, it looks much more integrated and harmonious in the reworked design, than in the older one, where the bottom of the wave were cut by a horizontal line.

This goes as well for the footer that was just a recangle before, and became another wave the gracefully match the header.

It was also decided with the project leader and the client to go from 800 px wide to 1024px, so that the content becomes easier to read thansk to bigger margins, higher padding and bigger fonts.We have also used a large product slider, so that it is clear and easy to browse the products benefits.

I decided to try to stick on the “coolness” of the blue color, so I got rid of the black color in the footer and of the grey background color. I have used instead a palette of blue colors selected from the header pattern.

Below my photoshop design for a product page…

Check it our here live.

The team worked really hard and well to implement it so congratulations ! The live website is very close to the initial sketch.

Related posts:

1. Webdesign case study #03
2. Inexor Case study
3. KonfaStockholm webdesign case study

This week we are going to talk about constructivist posters, so if you are curious to see how to inspire from them, this tutorial is for you.

I bumped in to this commercial in “WebDesign” magazine the other day and I just couldn´t stop making the parallel with a soviet poster I had seen before.

This poster can be found in the book Soviet Poster the Sergio Grigorian Collection ,

and I strongly recomend it to anyone interested on design, since references to the constructivist era, propaganda posters, is much more frequent than we think…

I think you know that guy…

So our advertisement is a replica of a 1920 poster from Dmitry Moor and says “Have you enrolled as a volunteer?”

So I took some transparent paper to trace the line art around the girl : first trace the outer stroke, then create areas. Then improvide the lines inside the curls.
Remember : DO NOT be to accurate, because soviet posters where printed with low quality, shortage of everything, good ink, good paper.
Ever seen a Staline or Mao statue ? Check on google and compare it with renaissance sculpture, you´ll see what I mean.

So there is a feeling of “raw” material to be put in it.

If you can, make some strokes bigger than other, to give a sensation of depth, or to mark shadows.

You should be able to get something like that. Try to make strokes more numerous and darker (more ink) in areas where you represent shadows (like in her hand, or her mouth).

Some areas with highlights are just marked with a regular stroke (see her cheeks, her tongue…). It looks like an empty triangle but it works.

You can also change pen to help you. I use for highlights areas a 0,05 pen. For midtone I use a 0,2 or 0,3 pen and a 0,9 for regular strokes.

Having several pens with different size i HELPFUL.

So we are going to reuse the layout of Dmitri Moor poster…

Getting rid of the background guy and of the girl layer background…

Now let´s add the sickle and the hammer !

However, the original grey background does´t convince me… so I´ll add a gradient yellow to red, and reinforce the stroles arounf the “logo” and the letters on the right. I have also decided to change the girl´s skin color, so that it matched more the general tone of the picture, which is to say a bit brownish, like old paper or carton :

And the tie Breacker question :

Personally I think that the difference between McDonald and communism is that McDonald still kills millions with bad food ha ha ha.

By the way did you know that McDonald was presented in Russia as the “Jewel from the west ” ? Read more about it here: MacDonald In Russia 20 years ago

And I love their cirillic writings (I found the pic on the internet):

Have a good day and cook your own food !

Related posts:

1. A vector sport patch
2. Tutorial #01 Typography
3. Week inspiration #06

Hi ! I am going to show a bit more of my creative process. This time with a vector illustration. I used to be a fan of american sports, in particular basketball when I was younger. The sports gear
like caps and hoods from the NBA where among the coolest stuffs to wear in college and high school in Europe back in the 90´s…
so this is just a clin d´oeuil to that Era full of giants like Michael Jordan and Magic johnson…

Ok. So let´s start with some inspiration pictures….

Inspired enough ?Yes, continue reading. No, ask google…

So let´s abduct some pics. I used this one from photl.com

Then What I do is that I open the pic in illustrator and start tracing the stroke of the character with the pen tool…first I do the character outilne, then I place shadow areas. Using the pathfinder palette is inevitable (add / substract…) to punch down areas.

It does not have to be perfect and you have to simplify the original picture… but some people like it more realistic though…

If you have problems to place your shapes, you can use help from photoshop and the filter “treshold”… Photoshop shows, very roughly the paths to follow.

Can be helpfull… But for the mid-tones I use Von Glitshka´s method… I print my line art and hand draw shadows like this (obs. : in transparency you can see the photo wich was on a lower layer in illustrator – I show the original pic AND the stroke on the print out – easier to draw):

Thanks for the tip, Von ! Don´t hesitate to simplify the areas…

You can use again the threshold from photoshop, with a higher level this time.

As you can see, I added extra mid-tone areas, to try to make elements like the nose, eye brow, mouth / lips more prominent. Why ? Because they participate in the general expression and mood of the character, so do not neglect them. And my guy is happy, so drew “happy” mid-tones.

Then scan it, open it in illustrator and vectorise with the pen tool the drawn areas, with a grey color.

Try to respect closely teeth gum, or some nose details… but you can take more freedom with large areas mid-tones .

Then, try to find a color palette you like, like LA lakers or whatever team, and try to limit the number of color used… Here, 2 main colors and a gradient.

This make the whole composition more effective. But you can play around adding some more vectors from free vector galleries or building your own.

On the one below I duplicated the stroke on the character and inversed its color to white… So that I have two strokes: a first one, black, and then a white one. It looks a bit more dramatic that way (drag / drop the stroke in the stroke palette and the “new” icon… you have two strokes to play with: change size, color, inside or outside etc).

Rising sun on my champion ! (you´ll find tons of tutorials if you ask Google for rising sun effect illustrator).

But ultimately, my champion is very special… He wins through his life most important values… fighting spirit, motivation, har working, but most of all fair play. Like Michael Jordan and Magic Johnson. They do not need to cheat to win…

So let´s make our guy more glorious… find some stars on the internet (I have used a free designious package) and put them on the guy. And the font is creampuff, but you could as well have used any other thick font.

So in a few hours, you can get a pretty good rendering combining illustrator, photoshop and basic hand drawing.

Have fun !

Related posts:

1. Manga style gravatar
2. Tutorial #01 Typography
3. Russian constructivism poster tutorial

It felt so nice to get a first email from the Web Design Index team about the konfastockholm design…

Here is a picture of the design :

And what was really great is that I got a second mail for another one of my design:

This design was created for Inexor Ab, the compagny I am currently working for, as a replacement of their older website.

So to conclude this short article, registering your design into CSS galleries pays off in the long run. If they are any good, odds are that they will get notice.

May you all have a good day.

Related posts:

1. Inexor integration version 2 is live !
2. What is good design ?
3. Freebies #01: may 2010 be a good design year

In this post, we are going to talk about the design of Situation Stockholm. As usually, I start answering a series of questions before going into the design…

Who is the client and what are they doing ?

Situation Stockholm is a non-profit organisation helping homeless people in Stockholm. Their magazine is published every month, and contains artist interviews, articles by the redaction and comments by homeless people.

The former website provided bloggs and daily post from homeless people on various subjects.

Values of Situation Stockholm

Social involvment, honesty, facts, reality / poverty, exclusion, action.

Goal of the work commanded

It is a fresh-up of the EPiServer CMS design. A website already exists.

The functions where given by the project leader, so I had to deal exclusively on graphics.

The new website should reflect as close as possible the magazine graphic fresh-up and incite to subscribe OR buy the magazine in the streets.

A word about the target

Above all, habitants of Stockholm… the site provide information about you street seller (a person in social difficulties). Your street seller gets help from Situation Stockholm. They sell magazine and pocket a portion of the collected money. Through the website, you can get to know your local seller, and read his bloggs (they have an access paid by Situation Stockholm at the Seven/Eleven computers in town).

Thus you can know more about life below poverty line and about their progress to come back into track. By being more aware and more involved, Situation Stockholm hopes to raise more funds and that online visitors will act locally or subscribe to the magazine.

Inspiration / mood board / collage

The mood board I did : a round up of websites and some photos I took in the streets of Stockholm.

Excerpt from the mood board

Technical requirements

The site should be accessible to the maximum audience as possible. The width should allow three columns, with an advertisement column and a navigation column, so it is going to be wide (about 1200 px).

Initial sketches and wireframing…

I got a basic scheme from a meeting between Situation Stockholm and my project leader.

You can see the function scheme:

Graphic design

You can see a PDF version of the magazine here.

Below an exceprt from the online edition.

The general design is very neat, colors are white, black, light blue, red. The titles are in CAPS, very bold. The overall feeling is very rectangular / sharp edged.

Now, the whole design is not transposable to a dynamic webbpage.

But you can use some “cues “. Below the visual elements I have used:

1. The current issue with the “#” symbol in red.
2. The doted line / separator
3. The big titles  (H2 on the website) will be in capital letters, and rectangular typefont like helvetica, to mimic the magazine…
4. A megaphone showing up in the “leave a comment function”… like in a demonstration.
5. A pile of former magazine, as a quick link to former issues.
6. The scratchy corner comes from the homeless blogg…

Everything put up together

The two designs compared

The former design is on the left side, and the new one is on the right side.

I hope you liked this post, and there will be more case study to come, so stay tuned and feel free to leave a comment or to read other related post.

Related posts:

1. KonfaStockholm webdesign case study
2. Webdesign case study #03
3. Web Design Index 9. I´m in twice !

A new website dedicated to Iphone fans willing to customize or create their own Iphone case… this is I Make my case

It is really easy to create your own design, using vectors and tools built into the flash online application. However, it is sad one cannot import one´s own vector work or pictures.

But this is really cool and you can start picking an artist (Joshua Davis, Chuck Anderson, Hannah Stouffer, Anthony Yankovic …), and then play around with their vector collection.

I had choosen Hannah Stouffer collection and played around for half an hour to end up with this :

Because I am living in Sweden (a place nobody can find on a map ?), the delivery got cancelled at first.

So amazon told me thet they could not perfomed the delivery :O

So I got a mail from a manager at Case Mate who appologized and say they compensate with a free bonus robust grey case (no kidding). So that was cool. I could make a present to one of the project managers at my office. hehe.

All in all, I recomand this service to any designer willing to play around and have an IPhone case that doesn´t look like a car´s tire…. though the application has limitations too.

Have a creative day !

Related posts:

1. KonfaStockholm webdesign case study
2. IOGraphica