Trippy Thumbs Mockups

Boriss' Spec

The thumbnails below are based on Boriss' spec above. Lucida Grande has been substituted on systems without Segoe UI.

Website Title
Facebook
Wordpress

Salient Image Mockups

Here we have the website's logo and a salient image pretaining to the webpage displayed.

If no logo exists, don't display one. If no preview image exists but there is a logo, show the logo full tile. If neither exist, show the thumbnail.

Note: There is a slight change from Boriss' spec here, where the title bar background has an opacity of 95%. This is borrowed from the current new tab page.

Facebook
Valentin Tsatskin
Amazon.com: Canada Goose - Audubon Plush Bird (Authentic Bird Sound): Everything Else
Mozilla
mozilla/openbadges

Alternative Styles

Working off the previous section, here we're basing the tile's colours off of the logo's colours.

Facebook
Valentin Tsatskin
Amazon.com: Canada Goose - Audubon Plush Bird (Authentic Bird Sound): Everything Else
Mozilla
mozilla/openbadges

We can also do fancy animations and show more of the content when you hover

Facebook
Valentin Tsatskin
Amazon.com: Canada Goose - Audubon Plush Bird (Authentic Bird Sound): Everything Else
Mozilla
mozilla/openbadges

How about show the actual page? Note: currently buggy.

Valentin Tsatskin
Amazon.com: Canada Goose - Audubon Plush Bird (Authentic Bird Sound): Everything Else

The distinction between the salient image and the logo could be more subtle. Unfortunately it doesn't look too great with high constrast colours such as black and white.

Facebook
Valentin Tsatskin
Amazon.com: Canada Goose - Audubon Plush Bird (Authentic Bird Sound): Everything Else
Mozilla
mozilla/openbadges

Let's go back to full-screen logo and try some reveal effects. We've also made the mouse-out delay slighty.

Facebook
Wordpress