Friends of GNOME website process

Glad to see the new Friends of GNOME website finally online.
Kalle and I started with this when he and Clemens was over at my place some time ago.

We started with ideas and sketches. We tried a couple of different approaches and ideas for the selection of the donation level and a bunch of different ways of displaying the page where you select your hacker and different illustrations.

sketch 1 sketch 2 sketch 3

Then we took the best sketches and imported those into Inkscape for selecting the best colors, choosing the exact styling of the elements and made sure the text that Stormy provided us with would fit etc.

mockup 1 mockup 3 mockup 3

The last step was the actual html+php+css+jquery voodoo. I spent quite some time battling php (I didn’t really know any php before) to allow the page to display different things on the second page, depending on your choice on the first page and trying to understand how paypal worked exactly. Kalle fixed some jQuery and made sure my broken php snippets would work properly. Collaborating over Dropbox worked pretty well actually.

screenshot 1 screenshot 2 screenshot 3

I also made a banner that all GNOME fans can put on their websites or blogs and link to http://www.gnome.org/friends.
Friend of GNOME banner

Someone also asked if I could make a general GNOME Lover banner too, so here is that as well.
GNOME Lover banner

7 Responses to “Friends of GNOME website process”

  1. Do you have a link where can I get the SVG? I want to translate it to portuguese, to put in some brazilians blogs.

  2. [...] Home Gnome… Go here to see the origi… Digg it Stumble del.icio.us reddit Yahoo Google allow-the-page friends image insertion random-pixels selection sure-the-text templatewebsite-process Leave a Comment [...]

  3. ReinoutS says:

    Nice work guys. Congrats!

  4. Mårten W says:

    There’s still no information about who these “hackers” are what they do or where they work?

    When I select a hacker I expect some information about him/her to pop up.

  5. Andreas Nilsson says:

    Mårten: we’re working on that. Just need to collect the info on all the hackers first.

  6. Stormy says:

    Andreas, it looks awesome. Thanks for sharing the design process!

    Marten, I’m working on bios. I think I’ve collected all the info and just need to make them some what consistent and get them on the website.

Leave a Reply