Yep, this blog design was inspired by a puffer fish: a green spotted puffer fish. Joanne Leung took an amazing photo of her puffer, Blinky, that inspired the colors of my blog design.

The color scheme wasn't taken directly from the photo but uses a similar colors with variable saturation.

Home and Index

The landing page is very simple and uses some CSS3 features including rounded-borders and text-shadows. There are only three categories and only the most recent post is displayed as an excerpt. All other posts are displayed as a vertical list of headers and dates.

Home and Index

The pastel-grey-green is necessary because any hint of over-saturation in a background could be overwhelming for the overall color scheme. The background colors may seem more grey than green because it is not a web-safe color, so the colors may vary from desktop-to-desktop

Yellow is the contrasting color of the scheme that is used to highlight interactive elements such as buttons, links and tabs.

Because I'm such a huge fan of Mark Boulton's grid theory and type rhythm, the content flows cohesively throughout the entire site in a tidy 960px grid and 24px base line height.

Posts and Comments

Content is king. The best way to embody this principle is to individually design types of content as modules such as paragraphs, lists, block quotes, and code blocks.

Post and Comments

Syntax Highlighting is done by Highlight.js (Russian author?) because I prefer simplicity over functionality. Because the audience follows the F-pattern, if line numbers existed, they would be read before the code; thus, I omitted them because they would impede code readability.

There is also a nice anti-aliasing trick that I figured out in CSS3 for Webkit-based browsers such as Chromium. By using text-shadow with no blur size and a color that matches the background color, all text becomes anti-aliased by illusion. This doesn't work well on code blocks but it's especially useful for large headers that become jagged as they scale larger in size.

Appease your lust for screenshots

Commentary alone cannot describe the entire design; instead, indulge yourself in screenshots and engage the design.

Still want more? View some posts. Click some links. Add some comments. Experience the design for yourself.

Archive Attachments