Web Design Review of Philosophersnotes.com

Here’s the home page of PhilosophersNotes.

Here are the features I see in its design (and the approach to design) that I think make it work.

• Simplicity
• Pixel-saving
• Design the content
• Focus
• Call to action
• Personality

Simplicity

First of all, and most importantly, this site design is simple. It does very little that it doesn’t need to do, and every single element is there for a reason.

Simple sites work better because (as “Save the Pixel – The Art of Simple Web Design” teaches), “Success is a function of Attention divided by Stuff”.

The more stuff you put on a web page, the less attention each thing is likely to get. Attention is pretty finite, but you have a lot more control over the amount of stuff on a page, so we should always aim to use as few unnecessary elements as possible.

There is only as much navigation as there needs to be. The branding is simple and clean. The page only uses a few different fonts (the main heading and the main call to action use their own typefaces in order to stand out).

Notice how each piece of content has at most one image. When your eye is drawn to a graphic, it easily finds the associated text.

The page layout is very simple, with clear logo, branding, headline, callout info, and call to action. You can easily see what everything on this page is without having to engage your brain. I call that “getability” and it’s the sign of a well-made web page.

There’s a great strap line “More Wisdom in Less Time”, which clearly differentiates and positions the site’s unique value proposition. And the sub-header concisely adds a little more to get the point home: “The ultimate personal growth tool. Giving you more wisdom in less time.”

Pixel-Saving

The “Save the Pixel” approach teaches that every visual element should have a purpose: every word, every line, every box, every image, every gradient.

A minimal pixel-saving web design does not remove all visual design. What it’s about is removing stuff that doesn’t need to be there so that the elements that remain naturally draw attention. When you clear the page of clutter, you can actually make more of the remaining elements.

Because PhilosophersNotes.com has done away with all the unnecessary decoration, it has acres of space for the really important content. So the headline, all the product images, and the callout shots are large and noticeable.

Plus, the text is nice and big, which is good for everyone, by the way! Not only will people with vision impairments be able to read this with ease, but I could read it on my iPhone without zooming. And anyone viewing the site on a regular computer will also read the text easily, so there’s no downside.

Design the Content

“Save the Pixel” also tells us to “design your content, not the box it comes in”. If you remove all the content, signage, and branding from this page, what would be left?

I’ll show you.

Not a lot, is there? This is the extent of the decoration on this home page. Remember, don’t decorate, communicate! Try this with your own designs, remove the content, signage and branding, and see what’s left. Can you justify every element?

Focus

When you view this design, where is your eye drawn? To content, naturally! Why? Because there’s practically nothing else to look at, as I’ve shown above. Your gaze is drawn to things that are most noticeable. “Save the Pixel” lists 7 noticeability factors: size, contrast, colour, dynamism, position, space, and 3d effects. The philosophersnotes design makes great use of all the noticeability factors, and more importantly balances them with skill.

Size & Position

Notice how the proportionally largest elements are at the top of the page. The headline is the largest text, and its partner image is the largest image. That combination of prominent position and large size clearly says “start here”.

Colour

The background of the page is greyscale, so any colour you see draws your attention to content. The blue arrow at the bottom draws attention to the main call to action.

Contrast

Contrast is used beautifully. The iPhone image, video, bookshelf image, and video camera keep your attention firmly in the content area.

Space

All the content has a generous amount of white space, which helps make everything easy to recognise and to read. A slight increase in line-height improves the readability of body text. If the page has more decorative clutter, either the white space would suffer or the page would have to get longer.

Dynamism

There’s nothing actually moving on the page (unless you watch the video). But there are diagonal lines (see the main page graphic in the header, iPhone, yellow book, video camera, and big blue arrow). These diagonals create a sense of dynamism, which draws attention. Can you picture this page with everything arranged square-on? It would be far less interesting. Giving stuff a slant lends it immediate visual interest (but don’t overdo it).

3d Effects

3d literally makes stuff “stand out”. 3d is used minimally on this page, but it is there. The angle of the yellow book creates a sense of space, and it has a drop shadow that suggests it’s floating off the table. The blue arrow and the two blue call-to-action buttons have subtle gradients and shading that suggest a shape. Other pages use stronger 3d effects, without ever losing focus and clarity.

Call to Action

A web page that doesn’t give you anything to do is not going to succeed at much. Every page has a purpose, even if it’s to get you to read the next page! The goals of this page are:

• to get the reader either to choose to buy the mini books on offer,
• to browse more info on the site, if they need to know more,
• or to enter their email and download the 3 free samples.

There is no missing the third call to action. It is the biggest area of colour on the page, in conjunction with the text “Start here!” in a unique handwritten font (so it stands out) and red colour (so it stands out more). There are three blue buttons on the page, all of which are calls to action, so that colour is being reserved almost exclusively for one purpose. By contrast, the other links, while clear, are far less noticeable. The calls to action draw your attention more and intentionally leave you with bold next steps.

Personality

Finally, this is a site that clearly has a character of its own. You may like it, you may not like it. But if, like me, you connect with the language, you’re probably in the target market for this product. If it turns you off, you were probably never going to buy Philosopher’s Notes in the first place, right? My tip is to let every site you create resonate with a clear personality. Whether it’s stiff and formal or hip and irreverent, let your brand’s personality come through in every phrase, and you’ll connect with the people you want to connect with.

Learn more

For more detailed tutorials and 20 redesign case studies, check out my best-selling ebook “Save the Pixel – The Art of Simple Web Design”.