All Posts

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

Image Zoom Tour with jQuery

In Playground by

Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.

Developing Visual Rhythm in Web Design

In Articles by

In design, rhythm is created by simply repeating elements in predictable patterns. This repetition is a natural thing that occurs everywhere in our world. As people, we are driven everyday by predictable, timed events. The sun comes up every day and sets every day, the seasons cycle in predictable patterns every year, and we all know that the World Cup happens every four years. Rhythm in design is just re-creating that, re-creating these predictable timed patterns, creating a sub-conscience relationship with ourselves and creating comfort or familiarity.

Circular Content Carousel with jQuery

In Playground by

Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

Portfolio Image Navigation with jQuery

In Tutorials by

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

Content Rotator with jQuery

In Playground by

Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.

Vertical Sliding Accordion with jQuery

In Playground by

Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.

Living a Dual Life – A View on the Coding Designers Debate

In Articles by

Lately I’ve noticed some great discussions in web design forums, on Linkedin and Twitter about the role of a web designer and what skills a web designer should have. The question that keeps getting brought up time and time again is whether it is necessary for web designers to have the ability to develop designs: should designers code?

25 Examples of Inspiring Product Display in Web Design

In Articles by

Choosing the best way to display products is a really important step of web design, since the way you display your products can drive attention to it and make users interested in what you are selling, or can drive users away. It’s like when you are walking in a mall, the most creative, elegant or stylish window displays will get your attention while super colorful and busy ones will drive you away.

Sliding Background Image Menu with jQuery

In Playground by

Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as size of the image, the hover effect and custom default states.

Great Daily Tools for Freelancers

In Articles by

Designing and developing a web project is difficult enough, but adding project management, invoicing, hosting, file sharing, and staying on task to the mix? That’s exactly what freelancers do though. There are a ton of tools and apps out there designed to help freelancers complete projects and stay organized. Here is a few of my favorite apps and tools that I use on a daily basis.

1 58 59 60 61 62 70