get and give

get and give

When I first came across GAG: Get and Give a few months ago it was like a breath of fresh air in a stuffy gallery filled with nondescript pictures.

Soon I realized that I’ve seen that powerful image of two crossed barefoot child legs somewhere else, and sure enough I rediscovered them on another site that impressed me just days before GAG did, it was the site for the Care For Kids Farm project.

Constant Metamorphosis

Both sites have undergone numerous reincarnations since I first laid my eyes on them. Fortunately, all previous GAG versions have been preserved and you can see them in all their August, September, October and November glories.

When September’s version of GAG was released and once again featured in numerous galleries, I could not sustain my curiosity any longer and embarked on a private investigation to find the designer of those humble pieces of art. I got lucky and landed an interview (that was soon followed by many friendly chats) with Ronny Jander, the creative genius behind GAG and Care For Kids Farm web sites.

The Care for Kids Farm is a non-profit organization in Zambia, founded in 2001. What started as a small orphanage with three children has since grown into a big family with forty children. Ronny has joined the Farm four years ago, leaving his native Germany behind. About a year ago he got interested in Web Design, and already last August he decided to start the GAG project, where he would be designing new versions of the GAG web site every month in hopes of building up his portfolio and attracting some clients, thus generating more revenue for the Care for Kids project. What a simple, yet such a powerful, idea for the world to think about: get a web site and give to kids in the orphanage.

With a background in traditional art, Ronny brings a fresh look to the world of Web design. With just a few well-chosen photos, colours and typography, as a true artist, he pours his heart and soul into his work, culminating into web sites filled with raw emotions, genuine love for the craft and painstaking attention to details.

While all the previous versions of GAG and the Care For Kids Farm were designed as single page sites the latest re-designs were built with Wordpress, Ronny’s new venture in advancing his web design skills.

Magic revealed

The very first thing that catches the eye on the new GAG site is the right alignment of its main content, something that we don’t see very often on the Web. The surprises continue as you start resizing the browser window: the site’s title, tagline and the GAG huge lettering in the background, all scale concurrently, following your mouse moves. Being the curious person I am, I immediately launched Firebug to uncover the secrets to those alterations:

Both images are embedded with img tags, not as background images. The big GAG lettering is inserted right after the body tag, with 1648x519px image dimension and styled with CSS:

#backimg {
    left:-15px;
    margin-top:4%;
    position:fixed;
    width:100%;
    z-index:-1;
}

The CSS class .logopic, set with width:100%; keeps the 940x330px image of the logotype and tagline constrained and under control of the parent div.logo-top:

.logo-top {
    left:0;
    position:fixed;
    top:12%;
    width:35%;
    z-index:13;
}

The site’s content is floated to the right and each post is wrapped within a div element with a transparent PNG image in the background, allowing us to see the GAG lettering underneath while keeping the content unobstructed and legible.

Obviously, IE6 users won’t see any of those alluring features (neither the scalable images, nor the transparent backgrounds), but rather than compromising with the design, Ronny gives up the support of the ancient browser with a polite note in the footer.

The site’s typography is simple yet understated. The main copy is set in Arial, while all headings and supporting text are set in elegant Georgia. Plenty of white space, delicate dotted lines, post titles aligned to the right of the article, restrained image styling and the see-through backgrounds give the site an airy feel, while the earthy colour scheme of harmonious browns and greys is brightened with a tangy orange on link hovers. Even the social bookmarking icons have been retouched to go in unison with the site’s subdued style.

GAG’s footer deserves a special mention. I love the delicate type treatment and how Ronny uses photos to enforce site messages. In the footer it’s a girl looking down at her bare feet. In the header it’s a boy, leaning on a giant G, clearly needing our support, or else he’ll slide down. The girl on the welcoming image looks up with a bashful smile, the illuminating light of hope behind her is a sign for her brighter future, supported by GAG.

Criticisms

I have only a few comments and wishes. First and foremost, the Get and Give image title needs to be linked to the homepage: habitually, to go back to the homepage, the majority of users click on the logo/large site title rather than on the Home link. I would separate About and Contact sections into individual pages. I would also add categories or tags to make the content more digestable. Lastly, I just wish Ronny and his team would find more time updating the blog with fascinating photos and longer posts.

What are your thoughts on GAG and its designs?

  1. Morgan

    Thanks for sharing. It’s nice to see people doing good things for web and the world.

  2. Steve Killen

    Not much about the typography in there. Don’t get me wrong, I would love to see a site where every aspect of a design is reviewed but Typesites is here to concentrate on the typography used.

  3. Tor Løvskogn Bollingmo

    Ditto on Stevens comment.

  4. inspirationbit

    You’re very welcome, Morgan.

    @Steve Killen, @Tor Løvskogn Bollingmo: With all due respect, there’s plenty of typography on GAG: scalable text in the images, right-aligned headlines in Georgia, well spaced text in Arial, delicate italics in the footer, font size variations, earthy colours and lots of white space, they all bring organic qualities to typographic choices made here, and I’ve mentioned them all in the article.

    Just because a site doesn’t have Helvetica plastered all over in big sizes or fancy drop caps, it doesn’t mean that the site has no typography. Typography should not scream at you: “Look at me, see how imaginative I am”. If I get good vibes from looking at a site, if I don’t have to strain my eyes and enjoy reading the text online, then that site gets two thumbs up from me on a well applied typography.

  5. Tor Løvskogn Bollingmo

    No need to get frustrated, Vivien – it’s just that Typesites is a place I visit to read about typographic treatment in webdesign. And since it’s such a niche website I expect the review to have a focus on typography. As you mention the GAG site has some really nice typography, but I don’t think the focus of the review is on that part of the site.

  6. inspirationbit

    I’m not getting frustrated, Tor. I agree, I didn’t focus too much on typography of GAG, but it’s because this site/project is so different from all other sites, that I had to talk about its uniqueness and story behind too. Wouldn’t you agree?

  7. Tor Løvskogn Bollingmo

    Yes I agree, but then again – maybe the site isn’t a perfect fit for Typesites. It’s still a great site.

  8. Leon Paternoster

    I thought it was a good review, relating the typography to the story (having said that, I didn’t find the message particularly clear, but that’s the sites’ fault, rather than Vivien’s).

    It’s amazing that the guy has advanced so much in a year of web design: he’s obviously had (and used) the freedom to experiment: lots of ideas and inspiration in there. I appreciate the ingenuity in the layout (I’ll have to use z-index one day!) but I didn’t like the effect: on a wide screen monitor the content’s somewhat orphaned, while it borks at lower resolutions. On the other hand, shifting content to the right seems to create a sense of balance (whatever that means!)

    You’re quite right to say that the typography creates a cool, airy effect: I thought this contrasted nicely with vibrant photos, giving them space to breathe. There are some clever touches: the image borders are darker than the content border, thereby pushing them even further to the foreground.

    Didn’t like the footer much - the mixture of italics, bold and obliques didn’t really suggest anything to me, so I found it quite confusing.

    Looks like he’s fixed the logo link…

    Oh, and I knew you didn’t like (big) helvetica ;)

    As a sidenote: it’s good to have typesites back: the design seems even better than it did when I first came across the site.

  9. inspirationbit

    Thanks, Leon. It’s not that I don’t like big Helvetica (I too want that red Helvetica Moleskine :) ), it’s just there must be (and there is) effective typography beyond big bold Helvetica.

  10. Kyle Meyer

    @Leon

    but I didn’t like the effect: on a wide screen monitor the content’s somewhat orphaned, while it borks at lower resolutions.

    I agree, perhaps if it he made use of max-width to alleviate this for modern browsers at the very least, it may work a tad better.

    As a sidenote: it’s good to have typesites back: the design seems even better than it did when I first came across the site.

    There’s been a few touch-ups to the existing design, but stay tuned as there will be a much more dramatic re-align before the end of the month.

    @Tor & @Steve

    While I agree that Get and Give doesn’t showcase anything stupendously original in the typography department, it does however make a case for a simple site to possess a good typographic foundation. Attention was given to each element and contributes strongly to the design. That said, I appreciate the feedback and will take it into account in selecting sites in the future. I appreciate your thoughts. :)

  11. Leon Paternoster

    I too want that red Helvetica Moleskine

    Oooh yes.

    I’m going all serif soon anyway. The thing about helvetica is that it’s pretty easy to make it look good (spectacular, even) as it’s such a suggestive font, yet clear and simple: not neutral at all.

  12. Ronny Jander

    Thank you, Vivian, for your warm enchantment of our site and letting hearts fail to proceed for some seconds after checking the Typesites´ feed! What a surprise, honor and memorable moment! Still cannot believe to find us here, thank you all.

    It helped a lot: the lonely image got a link (so much to painstaking attention to details), the tags and navigation a promise of a more enlightening future (raised by the growing amount of posts and history), the server work to do and we: happy tears, milk and chocolate.

    @Leon: thanks for the kind review. You might be right about the footer, it does not suggest a lot. We will see what happens with that. And thanks for letting the content fit to the content: the content’s somewhat orphaned - nice one! ;)

    We appreciate all this attention and thank again for the generous words!

  13. Leon Paternoster

    dramatic re-align

    Whatever happened to good, old–fashioned redesigns, eh? Look forward to seeing it.

    the content’s somewhat orphaned

    I did think twice before typing that…

  14. Ronny Jander

    I had to read it twice to get it…

  15. Kyle Meyer

    @Leon

    Whatever happened to good, old–fashioned redesigns, eh? Look forward to seeing it.

    It is more of a redesign perhaps, but with many of the same elements. I think it’s important to maintain a consistent brand and certain parts of the current design are relatively unique to Typesites. Either way, we can worry about semantics afterwards. :)

  16. Steve Killen

    @inpirationbit/Vivien: I wasn’t aiming my criticism at the site, it does have some fantastic typography and is a welcome addition to this site. I just think a lot of reviews on here do stray into talking about the layout rather than the type as it’s so easy to do. It could be argued that this site is a review of sites with great typography rather than great typography within a site but I like the reviews to focus on how they created the great type treatments. Your review did focus on typography a bit but not enough for me, sorry :( .

    btw, I love your site and your articles on colour etc, it took me ages to find your site again after the first time I came across it but I was happy when it turned up on cssbeauty.com!

  17. inspirationbit

    Thanks, Steve. Since you are reading my site, you probably know that I love going behind the scenes of exquisite Web typography and dissect every bit of it on Inspiration Bit.

    In my review of GAG, I did talk about its typography, but here it’s so much intertwined with the rest of the design choices on the site—colours, photos, different alignment, story—that I just could not neglect those elements, hence my stray into talking about all of that as well. Typography on GAG is very subtle, it doesn’t hold that many secrets into how it’s been implemented, the right alignment of the site on the other hand was very interesting and that’s why I’ve revealed CSS implementation for that rather than for Typography.

    In saying this, GAG is a perfect example where an understated Typography doesn’t compete with the design and content for attention, but rather works in unison with them, which prompted my divided focus on all of that rather than just Typography alone.

    I’m not arguing the point you made, I’m just explaining my point of view. I myself wasn’t sure if I should talk about all those other things for my review on Typesites, but in the end I did, and left it up to Kyle to cut anything he didn’t find fitting. I’m glad he didn’t, otherwise we would’ve not had all these discussions, that will help us (at least, help me) with defining a clear direction for reviews on Typesites. So thanks for the comments, keep them coming :)

  18. Steve Killen

    Thanks Vivien for explainging your approach to the article, I appreciate your effort as it is never easy to write for the web! Incidentally am I right in thinking the title copy is Rockwell? The large background type is my favourite part of the site.

  19. inspirationbit

    You’re absolutely right, Steve. The title copy is Rockwell. The scaling large background type was what prompted me to review this site for Typesites in the first place :)

  20. wRong

    Don’t listen listen what the want, give them what they need! Forget restriction, and write out of box. Typography isn’t only typefaces. You got me, on this article. Keep going with a good work, cheers.

  21. Cyprian

    I would spice this websites a little. I have to admit, typo is cool and smooth as banana.

  22. dev

    All design version was good, clean, beauty and simple, hope to see more