Amazing websites!

First up is this site that simply blew me away the first time I saw it.:

Ben the Bodyguard. (Click to visit)

(Does it use CSS? > YES) This site, advertising protection software, takes takes a commonly used CSS effect (centralising images) and uses it to very creative effect!

As the user scrolls the page, an illustrated image of Ben the Bodyguard is centralised on the scrolling background, giving the effect the camera is following him.
As you scroll, little speech bubbles pop out as Ben explains his story. The rest of the information is cleverly embedding in the really long background image.

While one expects that the amount of information would result in clutter, ‘Ben’ handles it very well. The site’s layout is effectively divided into 3 columns, the road in the centre being Ben’s walking path, and this is where the salient points are delivered via Ben’s speech bubbles(you could think of them as subheadings). The buildings on the sides have billboards that convey the supporting information. It’s closely linked to what Ben says as you scroll. It’s all very easy to follow and avoids the usual complications with three column layouts being ‘information overload’.

The colours give the sense of illustrated ‘film noir’ with a lot of blacks and cold colours like blue making up the city. But warm colours like Yellow and red are used to draw attention to key elements, without being distracting. For instance, the street lamps light the road, keeping the user’s eye fixed on Ben’s walking path. Occasionally lights illuminate billboards with key information, making them stand out from the ‘coldness’ of the city and drawing attention.


The Next site is one I commonly visit: (click to visit)

It’s a blog on all things Graphic design related. The layout is extremely minimalistic, but that’s actually very good for it’s purposes, after all it’s showcasing works of design, not the webpage itself.

(Does it use CSS? > YES) The site uses CSS in formatting text styles and alignments. In fact it uses CSS styles with embedded fonts (more on that later)

The current story (as seen above) occupies the first visual impression. It usually consist of a Graphic taking 70% of the visual impression, paired with a callout blurb in large text. They followed by the introductory paragraph of the story and the requisite ‘Read More’ link. Past stories are actually scaled down and displayed in a two column grid. (shown below) It’s almost like replicated the experience of browsing through the newspaper/newsletter and picking stories to read.

The experience of reading comes because unlike other news sites, the graphics (not any story headers) are the ones drawing the readers eye flow. Understandable, given it’s a blog on Graphic Design.

There’s also the use of a lot of embedded fonts. The system used is sIFR (Scalable Inman Flash Replacement) which requires the Adobe Flash Plugin, but allows text to be selectable. The site combines this CSS styles to make some truly effective typographic art.

Like this banner?

It’s actually selectable!

The Banner is actually created using CSS to hide the overflow text 🙂


This last site is one I stumbled upon recently. (click to visit)

Most ‘portfolio’ sites tend to be very flashy to ‘show off’ with little information. This site is packed full of the author’s reflections and even share of his quick tips on web design and code.

One of the first things that struck me is that just how the interface simply ‘gets out of the way’. He makes very good use of Pictorial representations to make up his entire navigation. Home, Search, Contact icons are immediately recognisable and obvious. Because they are so simple yet effective, they give the sense of a seamless experience.

(Does it use CSS? > YES) But most uses CSS in formatting text styles and alignments. The fancier stuff is done with Javascript. For example, Javascript is used to change the entire content of the page without refreshing the page.

You can try this on the page itself. Just clicking on the arrows and watch the page change ‘magically’.


The author also provides his own implementation of embedding fonts using Javascript!

Not only are the Banner’s letters selectable, they are also animated!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s