My Favorite Website Display Themes of 2017

created Jun 28, 2017 - updated Jul 5, 2017

We're only half-way through 2017, which means I may encounter other websites that provide fun themes or display looks. I'm not talking about the overall design for websites, which would include factors, such as aesthetics, typography, functionality, intuitiveness, page-load speed, and more.

I'm only talking about how a page looks, and thus far in 2017, these are my favorites.

Boghop leans more toward utility than aesthetics. Boghop looks like the old generic labeling where packaging displayed one word, such as Beer or Bread. The text color was black. The rest of the packaging was white. That was it.

werd.io

In June 2017, Ben redesigned his website. I love the skewed bio box at the top. I love the bright colors, the squiggly underline for links, and the repeated anchor image in the background. It's fun in an old style way. Personal websites should be fun.

But Ben's site also provides functionality, such as the narrow, fixed, nav header across the top that includes a search text input field. And the site responds well when resizing the browser or viewing on the phone.

http://werd.io

Jun 28, 2017 homepage screenshot of Ben's site:

Ben Werdmuller homepage

enlarge image

Sometimes, however, I have trouble reading Ben's text when the entire note is a link and underlined with the squiggly lines. Short link text and link text that is of a smaller font size is readable.

But I cannot read this post at his website because the entire post is a link for some reason.

https://werd.io/2017/the-thing-about-coming-to-a-place-youve-been-to

Jul 6, 2017 update - That didn't last long. Maybe it was an experiment. I noticed on Jul 6 that Ben reverted his website theme back to what he used in the past or something similar to his old look. It's more of a traditional look. I didn't see an explanation why he switched away from his funky look.

Jul 14, 2017 update - The wild purple and yellow theme is back. Nice.

sawv.org info.html

http://sawv.org/info.html

I dissected the HTML and CSS used at Ben's site, and I created a version that, in my opinion, is simpler to understand and implement. I'm using a colorful, skewed look on the sawv.org info page. I created a custom template for the page.

The color scheme of my info page is inspired by the colors used on the back of the paperback book titled The Weblog Handbook, written by Rebecca Blood and published in 2002.

enlarge image

Baltimore City Paper

I saw this on Jul 7, 2017. This is one of the best web design layouts for a newspaper story that I may have ever seen.

Interestingly, it looks better to me with JavaScript disabled.

Regardless, the subject, the writing, the storytelling, the art that appears to be pen/pencil and watercolor sketches, the single column display, the decent font size and spacing, the grey background, the black text, the simple orange header bar that is not fixed.

Someone was thinking well when designing that article page. The topic is important. The content is what matters. But at least the content is not lost, missed, nor ignored by a bad web design.

It's a large download, ~9 mb, because of the sketch-like images. 89% of the download is due to images. Maybe it's because I like watercolor sketches, and that's why I'm drawn to this article layout.

The images could have been created with a computer and made to appear like hand-drawn sketches. I don't know. I don't care. I think that the images compliment the writing.

http://www.citypaper.com/news/features/bcp-062817-feature-long-ride-htmlstory.html

The page loaded instantly in the text-based Lynx web browser. I could easily read the text. The content remained the star.

enlarge image 1

enlarge image 2

Geo Bootstrap theme

This theme was last updated or created in 2014, I think, but I saw it mentioned in the Aug 6, 2017 IndieWeb dev IRC channel.

https://chat.indieweb.org/dev/2017-08-06

Fun:
http://code.divshot.com/geo-bootstrap

Real Life

In late September 2017, I discovered this website that uses an interesting homepage theme.

http://reallifemag.com

November 2017 homepage screenshot.

The site might be using a Slow Web Movement approach to publishing. From the site:

Real Life is a magazine about living with technology. The emphasis is more on living. We publish one essay, advice column, reported feature, or uncategorizable piece of writing a day, four or five days a week.

Also:

Real Life is made possible by funding from Snapchat, and we operate with editorial independence and without ads.