The Kitchen Community: Beautiful Minimalistic Interactive Design

I love this site. I found it by chance (googling interactive html websites, go figure). I like this site because it is simple, versatile, and easy to navigate, while still being beautiful and having a clear and visually appealing design.

Image

The main page has a photo background, and information, which can be navigated with left and right arrows, which when clicked create an interesting effect of sliding the page over to reveal the next page.

The page also has a transparent top horizontal menu bar. When you hover over each link, a menu box appears.
Image

All of the navigation and menu bars, while there are many, are transparent and float nicely over the background image, creating a slick and minimalistic design — even for a site with a lot of content on it.

Some of the menu items appear as a slide-up box which you can “open” and “close”. This is a nice little interactive technique that allows users to see small bits of information without leaving the original page.

Image

Image

Other menu item content comes up as a black “popup” window within the page, with an additional black overlay. This is a nice interactive feature because it doesn’t feel like you are moving to new content, and the black-out effect makes it easy to focus on the information at hand. An X at the bottom of the box makes navigation easy to understand how to bring you back to the main page.

Image

Clicking one of the menu items will bring you to a new more text heavy page. This is set up similarly with a floating transparent box over a background image. The interesting effect here is that you  scroll only the text box, while the background image remains fixed.

Image

I think any of these elements would provide useful interactive navigation for our next website. By creating minimalistic and simple navigations and information boxes, the rest of the site is allowed to be very visual and colorful.

For the HTML/CSS, their coding was very convoluted and not tagged or noted (something I will be sure to do more, looking through this code to try to find distinct elements was not fun…).

However, here is some of the coding that I found for doing some of the box overlays. (I know, it hurt my brain to look at it too)

<div></div>’, gallery_markup: ‘<div> \ <a href=”#”>Previous</a> \ <div> \ <ul> \ {gallery} \ </ul> \ </div> \ <a href=”#”>Next</a> \ </div>’, image_markup: ‘<img id=”fullResImage” src=”{path}” />’, flash_markup: ”, quicktime_markup: ”, iframe_markup: ”, inline_markup: ‘<div>{content}</div>’, custom_markup: ”, social_tools: false }); }); }); /* ]]> */ </script> <script type=”text/javascript”> /* <![CDATA[ */ jQuery(document).ready(function($) { // setup mediaelementplayer $(‘video’).mediaelementplayer( /* Options */ ); // setup overlay for external page $(“.wp_lightbox_url_content_trigger”).overlay({ expose: ‘#789’, onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getOverlay().find(“.contentWrap”); // load the page specified in the trigger wrap.load(this.getTrigger().attr(“href”)); } }); // setup overlay actions to a href $(“.wp_lightbox_html_overlay_trigger”).overlay({ expose: ‘#789’, onLoad: function(content) {}, onClose: function(content) { if (navigator.userAgent.indexOf(“Firefox”) == -1) { var count = 0; $(“video”).each(function() { $(“video”)[count].player.pause(); count = count + 1; if (count > 20) { return false; } }); } } }); }); /*]]>*/ </script>

Advertisements

One response to “The Kitchen Community: Beautiful Minimalistic Interactive Design

  1. I really like this site. I appreciate that the background photos are fitting to the content and create a very visually appealing site. I particularly like the information boxes that have the option of sliding up to see more information and sliding back down when finished. It is not too distracting from the photo and gives users more control over their experience with the site. Overall it’s a nice clean design that fits the overall mood well and invites users in.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s