Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! »

Web Design Review of Philosophersnotes.com

Here’s the home page of PhilosophersNotes.

Screengrab of philosophers notes home page

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”.

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Hannah Hurst - 4 years ago

I completely agree simplicity is the best tool for a successful website. If I learnt anything at university it was less is more! An over crowded website creates the user to get frustrated in trying to find out what they want by having to sift through a load of unnecessary junk. When designing I just ask myself, will the user benefit from this? If not, it doesn

    WDFS - 4 years ago

    Hi Hannah. Your points are thoughtful and spot-on! I couldn’t agree more.
    : )B

Kevin Hisel - a couple of years ago

I am curious of what you think about the small changes that have been made to the site. The most noticeable changes are a nav bar at the top of the screen and the changes made the core navigation links.

I really liked the screenshot image but something turned me off when I followed the link to his site. I got over it and the site is actually quite interesting. There is definitely a personality to it!

    Ben Hunt - a couple of years ago

    I think the added Entheos nav at the top doesn’t detract – it’s quite separate from the PN content.

    I struggle to see any other noticeable differences. I do think the site should use different colours for links though.

Comments are closed