All Posts

Browse through all our articles, tutorials, roundups, and experiments.

Architecture in Web Design: Applying Vitruvius’ Principles

In Articles by

Let’s make a real world comparison: buildings are very much like web sites. So are we (web designers and developers) essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.

Flexible Slide-to-top Accordion

In Tutorials by

In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

Circle Navigation Effect with CSS3

In Tutorials by

Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

Draggable Image Boxes Grid

In Tutorials by

Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

Mobile: The Web’s New Minimalist Movement

In Articles by

Is it just me or is the popularity of mobile devices pushing a new minimalist movement in web design? Web design trends come and go from time to time: the dancing babies, suckerfish menus, rounded corners and ribbons have all graced the web with enthusiastic glee. But these are all more superficial things, style things. There is a movement growing in the web design community for a more minimal web, a user friendly web, a more semantic web where things have a purpose and reason for their existence. And the new mobile revolution is taking us there.

Scrollbar Visibility with jScrollPane

In Tutorials by

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

Developing Emphasis in Web Design

In Articles by

Developing emphasis in web design can be tricky in that it all depends on what you want to accomplish with it. For the most part, whatever the product is, is what will be our focal point and in most cases it’s not the picture of the product but how to get the product that becomes the focal point – the call to action.

Multi-level Photo Map

In Playground by

This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed in medium size mode or in full lightbox-like mode. The map has a fullscreen option which will show the thumbnails of the images in their location.

Is There Room for Negative Space in Web Design?

In Articles by

Negative space is most commonly associated with logos or compositions where the empty space creates a unique shape or represents something – like the arrow in the FedEx logo. But negative space in web design may not be that cool or sexy, but its still very important to the over all design. Just remember that you don’t want your design to feel cramped or cluttered, you want your users to enjoy the experience. If anything, just add a little bit more padding.

Responsive Image Gallery with Thumbnail Carousel

In Tutorials by

A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

Automatic Image Montage with jQuery

In Playground by

Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.

1 57 58 59 60 61 70