Today’s post highlights the design of Octophant.us by Phineas X. Jones (@Phineas). Playing off of the site title, the main header uses eight-way stripes in an attractive monochrome typographical logo. A detailed stippled octopus tentacle in the site footer frames the content from below, reminiscent of illustrations of sea creatures found in old books. Diagonal elements that start in the main logo continue throughout the site, serving as background textures, decoration elements and section separators. The simple light gray monochrome color scheme is enriched with a desaturated orange used for links, highlighter ribbons and some of the diagonal stripes.

Note the interesting layout of the portfolio and store thumbnails – the latest work has a larger thumbnail (placed on either left or right to preserve the overall visual balance), while other three thumbnails are smaller and have a translucent white overlay on top of them. The large diagonal stripe serves as the background for the section header; at the same time, it helps aligning the larger thumbnail within the section bounds. The translucent overlay focuses the attention on the latest work, while still providing enough visual details on the specific work – with full-color version appearing on mouse over. While i’m on the subject of rollovers, i’d like to point out that the site can benefit greatly by adding a short animation fade-in to the image rollovers, as well as using a darker shade of orange on hyperlink hovers.

Overall, it’s a nicely executed design that breaks away from the traditional paradigm of arranging all the work as a grid of thumbnails, with a unique twist on the site name serving as the inspiration for all the supporting illustrations.